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.

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.

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.

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 Light and Shadow Plane

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

A spacial object gets spacial by its shadows.

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.

Displacement Map

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

A sketch using a grayscale image as displacement map

Space Through Foreshortening

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

If a elements get foreshortend the feeling of depth is created

Causality

processing, form, Law of Causality

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

Noise Mesh

processing, grid, mesh, form, repeat
Unknown

generate a noisy mesh

Mesh3D

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

Creates a mesh and displaces its verticies in 3D space

Space Through Overlapping Line

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

if elements overlap the create depth.

Space Through Overlapping Circle and Line

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

if elements overlap the create depth.

Space Through Angles And Curves

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

Angles and curves create the perception of space.

Depth - Simple 3D Cube

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

A simple 3D form in InDesign

3D Cubes

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

Creating 3D forms 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.

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.

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.

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

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.

Similarity

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

A classic example for the "Law of Similarity".

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)

Rotate Rect

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

A figure always stands on a ground.

Kanizsa's Triangle

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

A classic example for the "Law of Closure".

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.

Polygons

Basil.js, form
Fabian Morón Zirfas

Polygons in a circle

Triangle with Shadow

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

Shows how to create a fake shadow.

Just a path

Basil.js, form
Fabian Morón Zirfas

Drawing paths is easy

Primitives in InDesign

Basil.js, form
Fabian Morón Zirfas

Primitives created in InDesign

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?

Stick Figure

P5.js, form
Fabian Morón Zirfas

A simple stick figure - heavily parameterized.

pyramid

P5.js, form, Law of Space

Visit the pharaohs!

Arcs

P5.js, form
Fabian Morón Zirfas

Just some arcs

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.

Primitives

P5.js, form
Fabian Morón Zirfas

just primitive shapes

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?

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.

Landscape waves

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

Random lines with different grey scale colors built a landscape.

Hairy Story

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

Arcs in random position built a irregular grid.

Clock

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

Generate a watch face.

Spiro

extendscript, repeat, form
Fabian Morón Zirfas

one single spiro.