CSC 123 – Computational ArtIntroduction to Shape

and composition

Zoë Wood

What is art…?

• Shapes – We like triangles, circles and squares…

• Especially triangles…

• Composition• Color/shading– Warm/cool– Near/far

• Texture• Story

Circles

George Tooker

Da Vinci Sunflowers, Van Gogh

ellipse

• Circles in Processing:

ellipse(200, 150, 250, 250);

ellipse(300, 250, 250, 250);

ellipse(100, 250, 250, 250);

Arcs

Circles in Processing:

noStroke();arc(200, 200,200, 200, 0, PI+HALF_PI);arc(220, 180,200, 200, PI+HALF_PI,

TWO_PI);

Rectangles

Cezanne

Rectangles• Rectangles:

background(255);stroke(0);strokeWeight(5);strokeJoin(ROUND);fill(255, 0, 0);rect(20, 100, 300, 55);noFill();rect(10, 0, 20, 400);rect(30, 0, 20, 400);

rect(310, 0, 40, 400);

rect(0, 340, 400, 25);rect(0, 75, 400, 25);

fill(243, 252, 3);rect(350, 370, 100, 100);

Quads

• Quads:

background(255);stroke(108, 79, 42);fill(108, 79, 42);strokeWeight(5);strokeJoin(ROUND);quad(110, 20, 231, 28, 276, 287, 12, 301);fill(178, 123, 50);quad(120, 40, 223, 32, 289, 293, 12, 301);

Triangles

CezanneVan Gogh

Monet’s Saint Lazare Station

Triangles

• Trianglesfill(255, 255, 255, 160);

stroke(125, 125, 125, 255);triangle(310, 380, 20, 380, 340,

150);

stroke(0);triangle(20, 380, 150, 50, 310,

380);triangle(150, 50, 340, 150, 310,

380);

Shapes

• 1. line(x1, y1, x2, y2) • 2. triangle(x1, y1, x2, y2, x3, y3) • 3. quad(x1, y1, x2, y2, x3, y3, x4, y4) • 4. rect(x, y, width, height) • 5. ellipse(x, y, width, height)• 6. arc(x, y, width, height, start, stop)

2D co-ordinate system

• In order for the points we specify to make sense, we must know with respect to what coordinate system we are using

2D co-ordinate system

• Unlike most mathematical conventions Processing’s coordinate system has (0, 0) in the upper left hand corner

Order

• Clockwise!• Radians to degree

Composition

• Fill scene• Balance scene• Golden ratio

Seurat’s Bathers at Snieres

Cezanne Da Vinci

Composition

• Balance and fill

The car has passed, G. Balla Sunflowers, Van Gogh

Balancing light

Monet’s Saint Lazare Station

Summary

• Variety of shapes available in Processing• Consider your composition– Balance– Fill scene