CSC 123 – Computational Art
Introduction 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
Monet’s Saint
Lazare Station
Cezanne
Van Gogh
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);
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
D
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