P5.js

transformation

P5.js, repeat, Law of Prägnanz

Are there fifteen squares or one circle?

Black and white Stripes

P5.js, repeat, Law of Figure and Ground, Sol LeWitt
Fabian Morón Zirfas

Simple stripes. "Law of Figure and Ground".

Circle Raster

P5.js, repeat, Law of Prägnanz, Law of Similarity
Fabian Morón Zirfas

Creates a rster of circles. one circle is "prägnant".

Decrease Size

P5.js, repeat, Law of Prägnanz, Sol LeWitt
Fabian Morón Zirfas

Decrease the size of a circle. Inspired by Sol LeWitt.

Splatter

P5.js, repeat, chance
Fabian Morón Zirfas

Creates circles within a range of the canvas.

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.

Open Paths

P5.js, data, repeat, Law of Connected Elements
Fabian Morón Zirfas

Loading and displaying data

Network of Molecules

P5.js, repeat, Law of Connected Elements, Law of Similarity

A network interconnected of molecules.

lines

P5.js, grid, Law of Prägnanz

Many lines and the lack of lines forms a square.

Law of Clousure and Multistable Perception in a grid

P5.js, Law of Proximity, Law of Multistable Perception, grid

This sample shows a dynamic grid, that changes the width and height of itself.

Law of Symetry and chance

P5.js, Law of Connected Elements, Law of Symmetry, grid, symmetry

This sample shows a static grid regular distances between the arcs.

Fishing Net

P5.js, Law of Connected Elements, Law of Similarity, contrast, grid, repeat

Grid with growing weight of Lines.

Hidden Room

P5.js, Law of Multistable Perception, Law of Space, repeat, form, chance

Square with diagonal lines that interact with each other in one point.

Law of Symetry and Figured-Ground

P5.js, Law of Contrast, Law of Symmetry, contrast, symmetry, grid

This sample shows a static grid with horizontal lines. The lines on the top of the square are the longest. The lines on the bottom of the square are the shortest. They built together a triangle. In the middle of the square is another small triangle that built the same image that is built before.

corridor

P5.js, grid, Law of Space

Illusion of space through vanishing points.

Noise Line

P5.js, chance, repeat, noise
Fabian Morón Zirfas

Generate a line from the middle of one side of the convas to another. Similar to the sketch Noise.

Landscape waves

P5.js, Law of Multistable-perception, Law of Emotion, form, grid

Random lines with different grey scale colors built a landscape.

Popup Circles

P5.js, chance, repeat, Law of Similarity

Random crackling circles with similar color ranges.

Random Circles

P5.js, chance, repeat, Law of Similarity
Fabian Morón Zirfas

Generate random circles with one simple loop. Break at the width of the canvas.

John Venn's Randomness

P5.js, chance, repeat, Law of Similarity, Law of Connected Elements, grid
Fabian Morón Zirfas

This sketch shows the visual representation of randomness by John Venn

dots

P5.js, chance, Law of Direction of Reading

Follow the dots!

Colorful circles

P5.js, chance, repeat

Creation of differently sized and colored circles that shrink with each loop

mice-nip

P5.js, chance, Law of Simplicity

Someone bite the square.

Noise vs Random

P5.js, chance, repeat
Fabian Morón Zirfas

Shows the difference between noise and random values.

Circles bubbles

P5.js, Law of Connected Elements, Law of Similarity, contrast, repeat, form

Different size of Circles and their interaction show Space and Volume.

Hairy Story

P5.js, Law of Causality, Law of Connected Elements, form, interaction

Arcs in random position built a irregular grid.

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.

motion-triangle

P5.js, p5.Vector, color, triangle

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

individual

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

How motion leads to perceived similarity.

Splash

P5.js, typography, parameterized, Law of Prägnanz, todo
Fabian Morón Zirfas

Heavily parameterized splash image creation. Uses a font that has to be installed on the users machine.

Macro

P5.js, typography, macro
Fabian Morón Zirfas

Come closer. Can you still spot the character?

Stick Figure

P5.js, form
Fabian Morón Zirfas

A simple stick figure - heavily parameterized.

pyramid

P5.js, form, Law of Space

Visit the pharaohs!

An Obvious Circle

P5.js, form, Law of Closure

An example for the appearance of shapes through additional forms that are not actually closed, but support the impression of a closed form in between them.

Arcs

P5.js, form
Fabian Morón Zirfas

Just some arcs

Cross

P5.js, form, sol-lewitt
Fabian Morón Zirfas

Inspired by Sol LeWitts Wall Drawing No.154

geometrical shape

P5.js, form, Law of Continuity

Six lines, three triangles or one square?

Primitives

P5.js, form
Fabian Morón Zirfas

just primitive shapes

Lines for Space

P5.js, form, Law of Space

An example for the creation of space and forms between lines through their length and the angles in between.

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.