# 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

one single spiro.

### Clock

Basil.js, repeat, form

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

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.

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

A classic example for the "Law of Similarity".

### Proximity

processing, 2D, form, Law of Proximity, repeat

A classic example for the "Law of Proximity".

### Rotate Rect

processing, 2D, form, Law of Figure and Ground

A figure always stands on a ground.

processing, form, Law of Closure, Law of Prägnanz, todo

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

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

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

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

A classic example for the "Law of Closure".

### Stick Figure

P5.js, form

A simple stick figure - heavily parameterized.

### pyramid

P5.js, form, Law of Space

Visit the pharaohs!

### 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?

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

P5.js, form

Just some arcs

### Cross

P5.js, form, sol-lewitt

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

just primitive shapes

### Polygons

Basil.js, form

Polygons in a circle

Basil.js, distored, duplicate, form

Shows how to create a fake shadow.

### Just a path

Basil.js, form

Drawing paths is easy

### Primitives in InDesign

Basil.js, form

Primitives created in InDesign

### Space Through Overlapping Line

processing, form, Law of Space

if elements overlap the create depth.

### Space Through Foreshortening

processing, form, Law of Space

If a elements get foreshortend the feeling of depth is created

### Space Through Angles And Curves

processing, 3d, form, Law of Space

Angles and curves create the perception of space.

### Space Through Light and Shadow Plane

processing, form, Law of Space

A spacial object gets spacial by its shadows.

### Noise Mesh

processing, grid, mesh, form, repeat

generate a noisy mesh

### Displacement Map

processing, displacement, map, 3D, form

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

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

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

A simple 3D form in InDesign

### 3D Cubes

basil.js, 3D, form, advanced, Law of Gestaltwechsel

Creating 3D forms in InDesign