Repeat

Boxen

processing, repeat, chance, Law of Similarity

Fabian Morón Zirfas

Generate a box with something on its corners.

Small Multiples

processing, repeat, chance, Law of Connected Elements, Law of Similarity

Fabian Morón Zirfas

Generate multiple elements based on the same rules.

Basil.js Logo

processing, Basil.js, repeat, chance, Law of Closure

ffd8

Okay. I know totaly wired to have the Basil.js logo made in Processing. The right tool for the right job. Processing handles the creation of animations way better then Basil.js does

Hidden Circles

P5.js, repeat, Law of Connected Elements

Natalie Schreiber

Circles creating patterns on a simple grid.

transformation

P5.js, repeat, Law of Prägnanz

Julia Hilt

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.

Spiro

extendscript, repeat, form

Fabian Morón Zirfas

one single spiro.

Clock

Basil.js, repeat, form

Fabian Morón Zirfas

Generate a watch face.

Rotation

Basil.js, repeat, typography

Fabian Morón Zirfas

Rotate and duplicate an element on the page in InDesign

character

Basil.js, repeat, typography

Fabian Morón Zirfas

one single character repeated several times.

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.

Open Paths

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

Fabian Morón Zirfas

Loading and displaying data

Diagonal Grid

processing, grid, repeat

Fabian Morón Zirfas

A simple diagonal grid pattern

Vision

processing, grid, repeat

Fabian Morón Zirfas

A optical problem. Take some distance from the image and try to spot all the circles.

Groups

processing, grid, Law of Similarity, repeat, chance

Fabian Morón Zirfas

The law of similarity on action. Elements that are similar in size or shape are seen as a group. Uses nested loops

Network of Molecules

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

Lucas Vogel

A network interconnected of molecules.

Fishing Net

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

Edmundo Mejía Galindo

Grid with growing weight of Lines.

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.

Margins

Basil.js, grid, repeat

Fabian Morón Zirfas

A simple sketch that shows how to set margins for an InDesign document and also for a text frame.

Random Circles

processing, chance, repeat

Fabian Morón Zirfas

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

Noise

processing, chance, repeat, noise

Fabian Morón Zirfas

Noise. Way more natural then random.

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.

Popup Circles

P5.js, chance, repeat, Law of Similarity

Daniele Maselli

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

Colorful circles

P5.js, chance, repeat

Malte Völkner

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

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

Edmundo Mejía Galindo

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

Chance Line

P5.js, chance, repeat

Denys Ivanchenko

Casualty lines creating the effect of an infinite tunnel.

Distance

Basil.js, chance, repeat, Law of Proximity, Law of Connected Elements

Fabian Morón Zirfas

Calculate the distance between two points and draw a line if they are in reach. Also an example for the "Law of Proximity"

Connect

Basil.js, chance, repeat, Law of Proximity, Law of Connected Elements

Fabian Morón Zirfas

Calculate the distance between two points and draw a line if they are in reach. Similar to the sketch Distance. Also an example for the "Law of Proximity"

lilli

processing, color, repeat

Juri Wolf

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

colored disco

P5.js, color, repeat

Malte Völkner

change light strobe, reminding of a disco light.

Stripes

Basil.js, color, RGB, repeat, chance

Fabian Morón Zirfas

Using Color 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

Circular Scanner

processing, motion, chance, class, repeat, Law of Common Fate

Fabian Morón Zirfas

Visualizes the "Law of Common Fate". Elements with the same directional motion and/or same speed are seen as a group.

Common Fate

processing, motion, chance, class, repeat, Law of Common Fate

Fabian Morón Zirfas

Visualizes the "Law of Common Fate". Elements with the same directional motion and/or same speed are seen as a group.

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.

Spiro Text

extendscript, typography, spiro-text, repeat, unicode, chance

Fabian Morón Zirfas

This example adds text to a path in InDesign. It takes random characters from an array of unicode signs and adds them to the path.

Underline

Basil.js, typography, underline, repeat

Fabian Morón Zirfas

Shows how to use the underline settings to hide parts of a character. It repeats this for each second character.

Topolade

processing, 2D, form, Law of Similarity, repeat, chance, Law of Prägnanz, Law of Proximity

Jonas Köpfer

Topolade is a sketch created by Jonas Köpfer in the seminar Eingabe/Ausgabe.

Similarity

processing, 2D, form, Law of Similarity, repeat

Fabian Morón Zirfas

A classic example for the "Law of Similarity".

Proximity

processing, 2D, form, Law of Proximity, repeat

Fabian Morón Zirfas

A classic example for the "Law of Proximity".

Noise Mesh

processing, grid, mesh, form, repeat

Unknown

generate a noisy mesh

Mesh3D

processing, 3d, form, repeat, chance, library

morphogen

Creates a mesh and displaces its verticies in 3D space

Noise Mesh 2

processing, grid, mesh, form, repeat, interact

Cedrik Kiefer

generate a noisy mesh with some interaction. Original work by Cedrik Kiefer edits by Fabian Morón Zirfas. Found here.

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.

Dialog and Overflow

Basil.js, repeat, interact, typography, unicode

Fabian Morón Zirfas

This example creates a dialog and waits for the user to make a selection.