basil.js, processing, P5.js
Fabian Morón Zirfas

The Color.

Mountain view: Berchtesgaden - Nussdorf

P5.js, data, color, form, repeat, Law of Continuity

A simple data visualization based on altitude profiles forms abstract mountain views.

Space Through Color In Gray

processing, color, library, color-model
Fabian Morón Zirfas

Different colors create different perceptions of depth. Depending on the ground they stand on.

Color Wheel

processing, color, ui, interact, library, HSB, color-model
Fabian Morón Zirfas

A color wheel for demonstrating the usage of HSB colors


processing, color, repeat
Juri Wolf

In this sketch the line changes the direction when it hits onto a white suface.

Space Through Color

processing, color, library, HEX, color-model
Fabian Morón Zirfas

Different colors create different perceptions of depth. Warm colors are near cold colors are far.

Color Thief

processing, color, library, java
Fabian Morón Zirfas

Using the color thief library we can extract dominant colors from an image.


P5.js, color, Law of Proximity

Creating proximity through monochromatic colors.

colored disco

P5.js, color, repeat

change light strobe, reminding of a disco light.


P5.js, color, Law of Similarity

Items that are similar tend to be grouped together.


P5.js, color, color-radius, Geometric shapes

Geometric shapes from the same source. Inspired from Sol LeWitt's work.


P5.js, color, chance, interact, Law of Closure

Mouse higlights individual parts of elements created by gaussian noise

Law of Contrast and Similarity with symmetry

P5.js, Law of Contrast, Law of Symmetry, contrast, color

This sample shows a strong contrast between the drawn rectangles. The combination of the color black and white let them look in their composition hard and strong. One reason for the visual perception is that both colors are opposite to each other in the color theory.


P5.js, color, hsb

using HSB


P5.js, color, Law of Good Gestalt

Stripes changing color gradient after every row. Colors range form orange to blue.

Subtractive Color Model

P5.js, Law of Similarity, Law of Common Fate, color

CMYK interaction built RGB + Black.


Basil.js, color, RGB, repeat, chance
Fabian Morón Zirfas

Using Color in InDesign


Basil.js, color, HSL, color-model
Fabian Morón Zirfas

Using HSL in InDesign

Connected Nodes

processing, color, ui, interact, library, motion, chance, class, repeat, Law of Connected Elements
Fabian Morón Zirfas

Connect nodes by distance. A rather complex sketch that makes use of several techniques. Similar to Connect and Distance


P5.js, p5.Vector, color, triangle

Primary colors represented by a moving triangle in P5.js.

Is Inside?

P5.js, repeat, interact, mouse, key, color, chance
Fabian Morón Zirfas

Check whether the mouse is inside of an element. If so, change the color.

Drawing with Particles

P5.js, repeat, interact, mouse, key, color
Fabian Morón Zirfas

This example shows different interaction types. Keycodes and mouse movement. Text on screen and also global color creation.