1. CSC 123 – Computational Art Introduction to Shape and composition
Zoë Wood

2. What is art…? Shapes Composition Color/shading Texture Story
We like triangles, circles and squares…
Especially triangles…
Composition
Color/shading
Warm/cool
Near/far
Texture
Story

3. Circles
George Tooker
Da Vinci
Sunflowers, Van Gogh

4. ellipse Circles in Processing: ellipse(200, 150, 250, 250);

5. Arcs Circles in Processing: noStroke();
arc(200, 200,200, 200, 0, PI+HALF_PI);
arc(220, 180,200, 200, PI+HALF_PI, TWO_PI);

6. Rectangles
Cezanne

7. 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);

8. 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);

9. Triangles
Monet’s Saint Lazare Station
Cezanne
Van Gogh

10. Triangles Triangles fill(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);

11. 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)

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

13. 2D co-ordinate system
Unlike most mathematical conventions Processing’s coordinate system has (0, 0) in the upper left hand corner

14. Order
Clockwise!
Radians to degree

15. Composition Fill scene Balance scene Golden ratio Cezanne Da Vinci
Seurat’s Bathers at Snieres
Cezanne
Da Vinci

17. Composition Balance and fill Sunflowers, Van Gogh
The car has passed, G. Balla

18. Balancing light
Monet’s Saint Lazare Station

19. Summary Variety of shapes available in Processing
Consider your composition
Balance
Fill scene