Form

basil.js, processing, P5.js, 2D, 3D

Form is the most basic thing we build upon. From simple primitive shapes to complex 3D shapes.

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.

Hairy Story

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

Arcs in random position built a irregular grid.

Landscape waves

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

Random lines with different grey scale colors built a landscape.

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.

Just a path

Basil.js, form
Fabian Morón Zirfas

Drawing paths is easy

Polygons

Basil.js, form
Fabian Morón Zirfas

Polygons in a circle

Primitives in InDesign

Basil.js, form
Fabian Morón Zirfas

Primitives created in InDesign

Triangle with Shadow

Basil.js, distored, duplicate, form
Fabian Morón Zirfas

Shows how to create a fake shadow.

An Obvious Circle

P5.js, form, Law of Closure

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.

Arcs

P5.js, form
Fabian Morón Zirfas

Just some arcs

Close the Triangle

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

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?

Cross

P5.js, form, sol-lewitt
Fabian Morón Zirfas

Inspired by Sol LeWitts Wall Drawing No.154

geometrical shape

P5.js, form, Law of Continuity

Six lines, three triangles or one square?

Primitives

P5.js, form
Fabian Morón Zirfas

just primitive shapes

pyramid

P5.js, form, Law of Space

Visit the pharaohs!

Stick Figure

P5.js, form
Fabian Morón Zirfas

A simple stick figure - heavily parameterized.

Kanizsa's Triangle

processing, 2D, Kanizsa's Triangle, form, Law of Closure
Fabian Morón Zirfas

A classic example for the "Law of Closure".

arcs

processing, 2D, Law of Closure, form
Fabian Morón Zirfas

The "Law of closure". > The law of closure states that individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap. > [wikipedia](https://en.wikipedia.org/wiki/Gestalt_psychology#Pr.C3.A4gnanz)

conciseness

processing, 2D, Law of Prägnanz, form
Fabian Morón Zirfas

The "Law of Prägnanz". Elements that are simple and are more lickly to recognized then complex ones.

continuity

processing, 2D, Law of Continuity, form
Fabian Morón Zirfas

The "Law of Continuity". We tend to see the obvious form. In this example we see two lines crossing. Not 2 lines bouncing of one another.

Gestaltwechsel

processing, 2D, form, Law of Gestaltwechsel
Fabian Morón Zirfas

The "Law of Gestaltwechsel". We can see this form in two different ways. Either coming toward us or moving away from us.

Proximity

processing, 2D, form, Law of Proximity, repeat
Fabian Morón Zirfas

A classic example for the "Law of Proximity".

Rotate Rect

processing, 2D, form, Law of Figure and Ground
Fabian Morón Zirfas

A figure always stands on a ground.

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.

Triangle and Quad

processing, form, Law of Closure, Law of Prägnanz, todo
Fabian Morón Zirfas

Even though there is a skewed rectangle in the we see the triangles. They are more prägnant.

3D Cubes

basil.js, 3D, form, advanced, Law of Gestaltwechsel
Fabian Morón Zirfas

Creating 3D forms in InDesign

Depth - Simple 3D Cube

basil.js, 3D, form, basic, Law of Gestaltwechsel
Fabian Morón Zirfas

A simple 3D form in InDesign

Lines for Space

P5.js, form, Law of Space

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

Causality

processing, form, Law of Causality

The perception wants to give forms that stand together a meaning. It tries to bring them into context.

Displacement Map

processing, displacement, map, 3D, form
Fabian Morón Zirfas

A sketch using a grayscale image as displacement map

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.

Relativity of Properties

processing, form, Law of Relativity of Properties
Fabian Morón Zirfas

Differences between elements are percept as bigger as they are. Both of these rectangles have the same size. The white one has the same size as the black one. Just by standing on a different ground it "blows up".

Space Through Angles And Curves

processing, 3d, form, Law of Space
Fabian Morón Zirfas

Angles and curves create the perception of space.

Space Through Foreshortening

processing, form, Law of Space
Fabian Morón Zirfas

If a elements get foreshortend the feeling of depth is created

Space Through Light and Shadow Plane

processing, form, Law of Space
Fabian Morón Zirfas

A spacial object gets spacial by its shadows.

Space Through Overlapping Circle and Line

processing, form, Law of Space
Fabian Morón Zirfas

if elements overlap the create depth.

Space Through Overlapping Line

processing, form, Law of Space
Fabian Morón Zirfas

if elements overlap the create depth.

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.

Clock

Basil.js, repeat, form
Fabian Morón Zirfas

Generate a watch face.

Spiro

extendscript, repeat, form
Fabian Morón Zirfas

one single spiro.