Grid

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

The 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

Landscape waves

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

Random lines with different grey scale colors built a landscape.

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.

Columns

Basil.js, grid, columns
Fabian Morón Zirfas

How to calculate the columns of a page?

Continuous layout

Basil.js, grid, continuous layout
Fabian Morón Zirfas

How to calculate a continuous layout?

Golden Ratio

Basil.js, grid, Golden Ratio
Fabian Morón Zirfas

How to calculate the golden ratio?

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.

corridor

P5.js, grid, Law of Space

Illusion of space through vanishing points.

Fishing Net

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

Grid with growing weight of Lines.

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

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.

lines

P5.js, grid, Law of Prägnanz

Many lines and the lack of lines forms a square.

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.