Color

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

lilli

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.

colorblock

P5.js, color, Law of Proximity

Creating proximity through monochromatic colors.

colored-dots

P5.js, color, Law of Similarity

Items that are similar tend to be grouped together.

colored-shapes

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

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

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.

HSB

P5.js, color, hsb

using HSB

Subtractive Color Model

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

CMYK interaction built RGB + Black.

Stripes

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

Using Color in InDesign

HSL

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

motion-triangle

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.