Repeat

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"

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"

Chance Line

P5.js, chance, repeat

Denys Ivanchenko

Casualty lines creating the effect of an infinite tunnel.

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.

Colorful circles

P5.js, chance, repeat

Malte Völkner

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

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

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.

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.

Noise

processing, chance, repeat, noise

Fabian Morón Zirfas

Noise. Way more natural then random.

Random Circles

processing, chance, repeat

Fabian Morón Zirfas

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

Stripes

Basil.js, color, RGB, repeat, chance

Fabian Morón Zirfas

Using Color in InDesign

colored disco

P5.js, color, repeat

Malte Völkner

change light strobe, reminding of a disco light.

lilli

processing, color, repeat

Juri Wolf

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

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

Proximity

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

Fabian Morón Zirfas

A classic example for the "Law of Proximity".

Similarity

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

Fabian Morón Zirfas

A classic example for the "Law of Similarity".

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.

Mesh3D

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

morphogen

Creates a mesh and displaces its verticies in 3D space

Noise Mesh

processing, grid, mesh, form, repeat

Unknown

generate a noisy mesh

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.

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.

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.

Network of Molecules

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

Lucas Vogel

A network interconnected of molecules.

Diagonal Grid

processing, grid, repeat

Fabian Morón Zirfas

A simple diagonal grid pattern

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

Vision

processing, grid, repeat

Fabian Morón Zirfas

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

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.

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.

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.

Motion Dots

P5.js, chance, repeat, motion

Denys Ivanchenko

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

Motion Without Motion

P5.js, motion, repeat

Julian Broocks

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

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.

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

character

Basil.js, repeat, typography

Fabian Morón Zirfas

one single character repeated several times.

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

Spiro

extendscript, repeat, form

Fabian Morón Zirfas

one single spiro.

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.

Hidden Circles

P5.js, repeat, Law of Connected Elements

Natalie Schreiber

Circles creating patterns on a simple grid.

Splatter

P5.js, repeat, chance

Fabian Morón Zirfas

Creates circles within a range of the canvas.

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

transformation

P5.js, repeat, Law of Prägnanz

Julia Hilt

Are there fifteen squares or one circle?

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