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.

Spiro

extendscript, repeat, form
Fabian Morón Zirfas

one single spiro.

Clock

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

Generate a watch face.

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.

Landscape waves

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

Random lines with different grey scale colors built a landscape.

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.

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.

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

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.

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.

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)

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.

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.

Kanizsa's Triangle

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

A classic example for the "Law of Closure".

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!

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

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

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

Space Through Overlapping Line

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

if elements overlap the create depth.

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 Angles And Curves

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

Angles and curves create the perception of space.

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

processing, grid, mesh, form, repeat
Unknown

generate a noisy mesh

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

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

Causality

processing, form, Law of Causality

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

Space Through Overlapping Circle and Line

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

if elements overlap the create depth.

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.

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.

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