190 likes | 356 Views
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.
E N D
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 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 Da Vinci Cezanne
Composition • Balance and fill Sunflowers, Van Gogh The car has passed, G. Balla
Balancing light Monet’s Saint Lazare Station
Summary • Variety of shapes available in Processing • Consider your composition • Balance • Fill scene