P5.js

Macro

P5.js, typography, macro

Fabian Morón Zirfas

Come closer. Can you still spot the character?

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.

Open Paths

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

Fabian Morón Zirfas

Loading and displaying data

Mountain view: Berchtesgaden - Nussdorf

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

Julia Hilt

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

corridor

P5.js, grid, Law of Space

Julia Hilt

Illusion of space through vanishing points.

Law of Clousure and Multistable Perception in a grid

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

Edmundo Mejía Galindo

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

Hidden Room

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

Edmundo Mejía Galindo

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

Network of Molecules

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

Lucas Vogel

A network interconnected of molecules.

Law of Symetry and chance

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

Edmundo Mejía Galindo

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

lines

P5.js, grid, Law of Prägnanz

Julia Hilt

Many lines and the lack of lines forms a square.

Law of Symetry and Figured-Ground

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

Edmundo Mejía Galindo

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.

Fishing Net

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

Edmundo Mejía Galindo

Grid with growing weight of Lines.

Lines for Space

P5.js, form, Law of Space

Jeanette Knipp

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

Cross

P5.js, form, sol-lewitt

Fabian Morón Zirfas

Inspired by Sol LeWitts Wall Drawing No.154

Criss Cross

P5.js, Law of Symmetry, Law of Closure, Law of Contrast, symmetry, simplicity

Paulina Mrksic

This sample shows a cross with a square in the middle.

geometrical shape

P5.js, form, Law of Continuity

Julia Hilt

Six lines, three triangles or one square?

Stick Figure

P5.js, form

Fabian Morón Zirfas

A simple stick figure - heavily parameterized.

pyramid

P5.js, form, Law of Space

Julia Hilt

Visit the pharaohs!

Arcs

P5.js, form

Fabian Morón Zirfas

Just some arcs

An Obvious Circle

P5.js, form, Law of Closure

Jeanette Knipp

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.

Primitives

P5.js, form

Fabian Morón Zirfas

just primitive shapes

Close the Triangle

P5.js, form, 2d, Law of Closure

Jakob von Kietzell

Because our eyes always try to see shapes, we can see a shape without it being fully closed. In this example a corner is missing. Can you still see the triangle?

conObjects

P5.js, motion, chance, interact, Law of Connected Elements, Law of Common Fate

Theodor Hillmann

Connected balls attracted by the mouse and a kind of gravity

Green Hyperspace

P5.js, motion

Filip Czekajlo

Green lines flashing at the screen making it seem like one is travelling at high speed through space.

Raindrops

P5.js, motion, Law of Similarity

Julian Broocks

Elements of same speed towards the same direction are seen as a group.

Air Dancer

P5.js, motion, Law of Connected Elements

Marius Claßen

The figure suggests that there is a ball which moves in front of two lines. One end of each line and the ball are connected to the position of the mouse. mouuse

Spiral Beams

P5.js, motion, Law of Regularity

Marius Claßen

Every frame a circle is drawn with a new position. It is always connected to the center of the picture and moves in form of a spiral. The law of regularity means that if neighboring objects repeat in patterns, the human eye will recognize them as groups.

Cloth

P5.js, motion, chance

Ludwig Frank

Particles move in the motion of cloth in a wind breeze

motion-triangle

P5.js, p5.Vector, color, triangle

Daniele Maselli

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

Cones

P5.js, motion, Law of Space through Light and Shadow

Natalie Schreiber

Light over an array of cones.

individual

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

Ludwig Frank

How motion leads to perceived similarity.

Motion Without Motion

P5.js, motion, repeat

Julian Broocks

This is an experiment on how to create motion without using moving elements.

Motion Dots

P5.js, chance, repeat, motion

Denys Ivanchenko

Balls that change color and size fill the entire area of the frame.

Common Fate Planets

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

Jakob von Kietzell

In this example you see some planets moving around. Two of them belong together. We make a connection between them because they move the same speed and into the same direction. Our brain immediately sees them as an integrated whole.

Colm

P5.js, color, Law of Good Gestalt

Filip Czekajlo

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

colored disco

P5.js, color, repeat

Malte Völkner

change light strobe, reminding of a disco light.

Subtractive Color Model

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

Edmundo Mejía Galindo

CMYK interaction built RGB + Black.

Dripping Wall

P5.js, chance

Ludwig Frank

I imitate Pollock.

WaveformCut

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

Theodor Hillmann

Mouse higlights individual parts of elements created by gaussian noise

HSB

P5.js, color, hsb

Fabian Morón Zirfas

using HSB

colorblock

P5.js, color, Law of Proximity

Julia Hilt

Creating proximity through monochromatic colors.

Law of Contrast and Similarity with symmetry

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

Edmundo Mejía Galindo

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.

colored-dots

P5.js, color, Law of Similarity

Daniele Maselli

Items that are similar tend to be grouped together.

colored-shapes

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

Daniele Maselli

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

mice-nip

P5.js, chance, Law of Simplicity

Julia Hilt

Someone bite the square.

Proximity through distance

P5.js, chance, proximity, Law of Proximity

josues

This creates random proximities between ellipses.

Popup Circles

P5.js, chance, repeat, Law of Similarity

Daniele Maselli

Random crackling circles with similar color ranges.

Praegnanz by Varying Edges

P5.js, chance, proximity, Law of Prägnanz

josues

This creates random Prägnanzen between ellipses by varying the strength of their edges.

Similarity by Hue and Size

P5.js, chance, similarity, Law of Similarity

josues

This creates random similarities between ellipses by varying their size and color.

Circles bubbles

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

Edmundo Mejía Galindo

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

Landscape waves

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

Edmundo Mejía Galindo

Random lines with different grey scale colors built a landscape.

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.

Noise vs Random

P5.js, chance, repeat

Fabian Morón Zirfas

Shows the difference between noise and random values.

Hairy Story

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

Edmundo Mejía Galindo

Arcs in random position built a irregular grid.

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

Julia Hilt

Follow the dots!

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.

Chance Line

P5.js, chance, repeat

Denys Ivanchenko

Casualty lines creating the effect of an infinite tunnel.

Planets

P5.js, chance

Ludwig Frank

Drawing a circle.

Colorful circles

P5.js, chance, repeat

Malte Völkner

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

transformation

P5.js, repeat, Law of Prägnanz

Julia Hilt

Are there fifteen squares or one circle?

Splatter

P5.js, repeat, chance

Fabian Morón Zirfas

Creates circles within a range of the canvas.

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".

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".

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.

Hidden Circles

P5.js, repeat, Law of Connected Elements

Natalie Schreiber

Circles creating patterns on a simple grid.

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.