Repeat

basil.js, processing, P5.js
Fabian Morón Zirfas

The 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

Casualty lines creating the effect of an infinite tunnel.

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.

Colorful circles

P5.js, chance, repeat

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

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

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

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

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

Mesh3D

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

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

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

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.

Network of Molecules

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

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

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

Motion Without Motion

P5.js, motion, repeat

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

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

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

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.

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.

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.