Computational art using Processing for CS0

1. #GHC13 Computational art using Processing for CS0 Zoë Wood Julie Workman October 3, 2013 2013

2. Introductions: Zoë Wood

3. Introductions: Julie Workman

4. Workshop Goals • Orientation to Processing + hands-on exercise • Description of our CS0 curriculum • Reflections on our course with regards to female students

5. What is computational art? • Code -> picture

6. What is Processing? • “Processing is an open source programming language and environment for people who want to create images, animations, and interactions.”

7. What is C0? • CSC 123: theme based (project based) introduction to computer science • games, music, mobile, robotics, computational art

8. Why you should care? • Introducing a theme based intro course: • Larger number of “A”s in subsequent courses • increased number of students who ‘see their future’ CS • Computational Art in particular: • popular with diverse students • Fun introduction to programming

9. Lets start • Type in the following command in the processing text window: ellipse(20, 20, 10, 10); • Remember the semi-colon! • Then press the ‘play’ button

10. 2D co-ordinate system • In order for the points we specify to make sense, we must understand the coordinate system we are using

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

12. Learn by trying • Try changing the numbers: ellipse(30, 10, 20, 20);

13. Note • Computers do one command at a time: • 1. • 2. • 3. • 4. • So, to add another ellipse….

14. Make a face • Now, figure out how to make a face together: • Use only 4 ellipses • For example:

15. Color • Under “tools” • Select “color selector” • To pick somecolors youlike…

16. Processing 1 • Commands to add color: background(12, 12, 125); fill(125, 12, 12); • Play with these commands • Only add the background command 1ce • Add “fill” command to change color before you draw…

17. Recall • Computers do one command at a time: • 1. • 2. • 3. • 4.

18. Note • If you like your picture, you can save it by typing: saveFrame(”Myface.jpg");

19. Other shapes in Processing line(x1, y1, x2, y2); triangle(x1, y1, x2, y2, x3, y3); quad(x1, y1, x2, y2, x3, y3, x4, y4); rect(x, y, width, height); ellipse(x, y, width, height); arc(x, y, width, height, start, stop); beginShape(); vertex(11, 23); vertex(21, 33);….. endShape(CLOSE);

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

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

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

23. Order • Clockwise!

24. ellipse • Circles in Processing: ellipse(200, 150, 250, 250); ellipse(300, 250, 250, 250); ellipse(100, 250, 250, 250);

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

26. Order • Clockwise! • Radians to degree

27. Shape beginShape(); vertex(11, 23); vertex(15, 23); vertex(17, 21); vertex(17, 19); vertex(16, 18); vertex(21, 18);…. endShape(CLOSE);

28. On your own now… • Personalize your face to represent how you feel today You have 5 minutes

29. Other shapes in Processing line(x1, y1, x2, y2); triangle(x1, y1, x2, y2, x3, y3); quad(x1, y1, x2, y2, x3, y3, x4, y4); rect(x, y, width, height); ellipse(x, y, width, height); arc(x, y, width, height, start, stop); beginShape(); vertex(11, 23); vertex(21, 33);….. endShape(CLOSE);

30. Processing - interaction void setup() { size(400, 400); stroke(255); } void draw() { line(150, 25, mouseX, mouseY); }

31. Functions • Group commands together and give them a name: void setup() { size(400, 400); stroke(255); } Name Curly braces, enclose a group of commands

32. Processing - interaction void setup() { size(400, 400); stroke(random(255), random(255), random(255)); } void draw() { line(150, 25, mouseX, mouseY); } This program has two functions

33. Processing - interaction void setup() { size(400, 400); stroke(random(255), random(255), random(255)); } void draw() { line(150, 25, mouseX, mouseY); } void mousePressed() { background(192, 64, 0); } This program has three

34. Please type this: void setup() { size(400, 400); background(192, 64, 0); stroke(255); } void draw() { line(20, 20, mouseX, mouseY); } void mousePressed() { stroke(random(255), random(255), random(255)); }

35. Result

36. Variables int center_x • Variables: • Are place holders with a nameintstartX, startY; • Type (int) • Name (startX) • Now you can use those place holders 200

37. Processing - interaction These are variables intstartX; intstartY; void setup() { size(400, 400); stroke(random(255), random(255), random(255)); } void draw() { line(startX, startY, mouseX, mouseY); } void mousePressed() { stroke(random(255), random(255), random(255)); startX = mouseX; startY = mouseY; }

38. Type this intstartX; intstartY; void setup() { size(400, 400); background(192, 64, 0); stroke(random(255), random(255), random(255)); } void draw() { line(startX, startY, mouseX, mouseY); } void mousePressed() { stroke(random(255), random(255), random(255)); startX = mouseX; startY = mouseY; }

39. Result

40. Now, on your own… • Modify the sample code to make your face appear where the mouse clicks • You will need to use variables! You have 10 minutes

41. Consider • Using offsets: void drawFace(float Cx, float Cy) { //sleepy face fill(#AFEDF5); ellipse(Cx, Cy, 50, 50); stroke(0); arc(Cx-10, Cy-10, 12,4, 0, PI); arc(Cx+5, Cy-10, 12,4, 0, PI); arc(Cx-2, Cy+8, 21,3, 0, PI); }

42. Processing - more To create more expressive sketches we need to be able to draw more complex shapes….

43. Math allows us to express geometric relationships • Parametric lines • Parametric circles • = introduction to loops (x1, y1) (x0, y0)

44. for loop to draw lines float x0, y0, x1, y1; float curX, curY; x0 = 10; y0 = 10; x1 = 390; y1 = 390; //pick a random color fill(random(255), random(255), random(255)); //draw line for (float t=0; t< 1; t=t+.05) { curX = x0 + t*(x1-x0); curY = y0 + t*(y1-y0); ellipse(curX, curY, 10, 10); } Lets code this together and play with thenumber of spheres.. Can you make the line more solid? Or more sparse?

45. You can control sketch • Have the radius grow in the loop for (float t=0; t< 1; t=t+.05) { curX = x0 + t*(x1-x0); curY = y0 + t*(y1-y0); ellipse(curX, curY, rad, rad); rad= rad+3; }

46. You can control the sketch • Two lines with varying color and radius (here is one line’s code): for (float t=0; t< 1; t=t+.05) { fill(r, g, b); curX = x0 + t*(x1-x0); curY = y0 + t*(y1-y0); ellipse(curX, curY, rad, rad); rad= rad+3; r = r+13; g = g+13; b = b+13; }

47. Using these simple ideas… • Can create expressive sketch • consider altering color/speed/direction or shape to express how you feel today.

48. Outcomes • Computers commands one at a time • Must be precise in your language • Variables (placeholders) allow for flexibility • You can combine simple concept to create complexprograms! (functions) • Playing is okay!

49. A look at our CSC 123 curriculum • Goals: • Academic: • basic understanding of computational problem solving • basic programming skills • Non academic: • work in teams, • meet other CSC students, • learn basic college skills, • enjoy computer science • Allow students to express themselves

50. CSC 123 • Topics: • Shapes & 2D coordinate systems • Colors • Interactivity (mouse & conditionals) • Animation basics (points and vectors) • Geometric shape (implicit and parametric) • Images (arrays and pixels) • Particle systems (classes)