Programming for Artists

1. ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 10 Fall 2010 Programming for Artists

2. Intro to Processing • In the previous lecture we discussed scripting, in which the program is specified by typing text. • The text represents something to be carried out, a process. • The text has a specific structure that allows it to be unambiguous about the process being described. • Processing uses scripts only. • This is programming in the sense that even engineers are used to.

3. Processing • A script is a test version of a program in Game Maker, and is attached to an object, like a sprite. • A script has to communicate the same things as does the point-and-click mouse program, so there must be symbols (text) that do this. • A script (program) is written in a scripting language (programming language), which has a fixed set of these symbols and has a syntax (structure). Scripts are the more familiar type of computer program.

4. Running Processing • Click on Processing.exe (in windows) • Now type the program into the white part • Or copy and paste it from a text file. • Or use File->Open

5. Running Processing • Here’s a simple Processing program. • It calls a function that draws an ellipese. • Run it by pressing the start button.

6. First Program • Draws a circle (a degenerate ellipse) at (50,50) in a default window.

7. Errors • Errors in the program results in • an error message for you • (missing ‘;’) • And one for a Java programmer. This system is written in Java, and gives Java errors.

8. Errors • We can get errors in GameMaker too. • This type, a compilation error, is the result of a typing mistake or misunderstanding of the sequence of things needed in the program. • Syntax; program can’t execute until the grammar and punctuation is right.

9. Errors • Unexpected token: null What the hell does that mean? Are we not simply missing a ‘;’? The Processing system does not know what we are missing or exactly what is wrong. If it did, it could fix it. All it knows is that it got to the end of your text and seemed to Not be done yet. Reached the end of the file and did not have a Complete program. Expected more, got ‘null’.

10. Errors • Computer reported errors are frequently like this. There are two reasons: • 1. As we stated, the program can’t always figure out what is wrong, only what it expected next or what it did not get. • 2. The programmers writing these systems do not have a good idea of the context of the system of the user. Error messages must be written using the user’s vocabulary and expressing concepts in a form that follows the user’s view of the system.

11. Errors Nothing we can do, so we need to live with it.

12. Processing • All programs in processing are scripts. • All output is as graphics. • This is unlike other languages, where output is text by default and graphics is hard.

13. Basic Code • We have seen a simple program. All it did was to use a function to draw an ellipse. • The first thing we need to do is to become familiar with the stable of built-in operations offered by Processing. Then we don’t have to look them up all of the time. • ellipse is one such built-in

14. Coordinates (0,0) • The coordinates used in Processing are those of GameMaker. • 0,0 is upper left. These are screen coordinates. Y increasing X increasing

15. Essential Functions line (15, 25, 100, 100) Draws a line between the two points specified as (x,y) values. point (120, 180) Draws a single point. rect (ulx, uly, lrx, lry) Draws a rectangle ellipse (x, y, xx, yy) Draws an ellipse Look up: triangle, quad, curve, arc

16. Essential Functions size (640, 480) Make the window 640 pixels wide by 480 high. background (255, 0, 0) Sets background color (to red in this case). stroke (0, 0, 200) Sets line (stroke) color. (To blue, in this case) nostroke() means none. fill (0, 255, 0) Sets fill color (green here) nofill() means do not fill. You all OK with RGB color??

17. Drawing Modes – Rect, Ellipse • Specifying a rectangle can be done 3 ways: • Default: CORNER upper left coordinates and the height and width are specified • CENTER: the coordinates of the center, plus width and height are specified. • CORNERS : upper left/lower right are specified

18. Drawing Modes – Rect, Ellipse (2,2) • CORNER • rect(2,2,5,3) • CENTER • rect(2,2,5,3) • CORNERS • rect(2,2,5,3) Width, height

19. Drawing Modes – Rect, Ellipse (2,2) • CORNER • rect(2,2,5,3) • CENTER • rect(2,2,5,3) • CORNERS • rect(2,2,5,3) Width, height

20. Drawing Modes – Rect, Ellipse (2,2) • CORNER • rect(2,2,5,3) • CENTER • rect(2,2,5,3) • CORNERS • rect(2,2,5,3) (5,3) lrx, lry

21. Drawing • Cartoons are often made • from simple shapes. • Perhaps we can make an • approximation to Bender • using what we know about • Processing

22. Bender • Our version in Processing is • not identical to the template, or course. • This is done by simply drawing primitive objects in the right places. • Pretty dull.

23. Bender stroke (0); line (141, 213, 238, 212); line (125, 194, 143, 213); line (252, 190, 238, 212); // Erase noStroke (); triangle (126, 193, 142, 212, 145, 201); triangle (251, 190, 236, 211, 235, 200); stroke(255); fill (0); stroke (0); ellipse (128, 161, 154, 197); ellipse (226, 160, 250, 196); rect (141, 161, 240, 197); line (141, 161, 239, 160); line (144, 197, 240, 197); noStroke (); // Eyes fill (255); ellipse (139, 167, 181, 199); • // Jim Parker • // Art 315 • // Fall 2010 • // Bender! • size (300, 300); • background (128); • stroke (0); • fill(190); • // Antenna • triangle (187, 100, 191, 40, 195, 100); • ellipse (191, 39, 8, 8); • ellipseMode (CORNERS); • ellipse (176, 100, 205, 128); • // Head • ellipse (138, 108, 238, 170); • rectMode (CORNERS); • rect (139, 131, 236, 280); • // Visor • ellipse (122, 157, 155, 205); • ellipse (210, 155, 255, 205); • line (135, 157, 230, 156); • noStroke (); • rect (135, 158, 158, 205); • rect (210, 157, 240, 206);

24. Bender (continued) ellipse (200, 166, 240, 199); fill (0); rect (144, 180, 150, 186); rect (205, 180, 211, 186); // Mouth stroke (0); fill (255); ellipse (146, 230, 181, 265); ellipse (146, 246, 165, 265); ellipse (200, 230, 227, 264); rect (159, 230, 216, 265); noStroke (); // Erase ellipse (146, 240, 159, 263); stroke (0); • // Vertical teeth • line (173, 230, 173, 266); • line (187, 230, 187, 266); • line (202, 230, 202, 266); • line (148, 245, 159, 242); • line (159, 242, 173, 241); • line (173, 241, 187, 241); • line (187, 241, 202, 242); • line (202, 242, 216, 242); • line (216, 242, 226, 244); • line (148, 256, 159, 254); • line (159, 254, 173, 253); • line (173, 253, 187, 253); • line (187, 253, 202, 253); • line (202, 253, 216, 254); • line (216, 254, 222, 256);

25. Bender • This is not how Processing code is generally written, but it does give us a chance to become familiar with the basic drawing stuff. • Processing has variables, functions, events, IF statements, and flow of control, just as GameMaker does and as does C and Java.

26. Processing Modes • Processing operates in static mode or dynamic mode. • In static mode, processing draws a picture on the screen. (EG bender) • In dynamic mode it draws pictures repeatedly, in succession. IE animation, as in GameMaker.

27. Dynamic Mode • Involves two parts. • An initialization step that is always executed once, at the beginning of the program. • A drawing step, that happens every fraction of a second. • We need to write code for both parts.

28. Dynamic mode Initialization step is named setup: void setup () { // initialization here } Void? Parentheses? These enclose the script that does the initialization. Like the triangles In GameMaker.

29. Dynamic mode Initialization step is named setup: void setup () { size (300, 400); } Example: set the window size once, at the beginning of the program.

30. Dynamic Mode • Drawing at each step. • void draw () • { • // Stuff that draws things each iteration. • // Runs forever. • }

31. Dynamic Mode • Drawing at each step. • void draw () • { • int x, y; • background (200); • stroke (0); • fill (175); • rectMode (CENTER); • rect (20, 30, 50, 50); • rect (30, 90, 50, 50); • }

32. Output This is a static drawing. It does Not show off the animation. Lets draw the rectangles where the mouse cursor is.

33. Mouse mouseX and MouseY are Variables defined by the system. They are like those in GameMaker. • void draw () • { • background (200); • stroke (0); • fill (175); • rectMode (CENTER); • rect mouseX, mouseY, 50, 50); • }

34. Output

35. Let’s make a small change … void setup() { size(300,400); background (200); } void draw () { // background (200); stroke (0); fill (175); rectMode (CENTER); rect (mouseX, mouseY, 50, 50); } Move the background call From ‘draw’ to ‘setup’. What will happen??

36. Explain??

37. Variables • Variables need to be declared before they can be used. • Declarations are simple, and merely tell Processing that the name is to be used and what kind of thing it can contain (an integer? Character? Real number?)

38. Variables void draw () { r = random (255); g = random (255); b = random (255); a = random (255); noStroke (); fill (r,g,b,a); ellipse (random (200), random(200), 20, 30); } • Here’s an example: • float r, g, b, a; • void setup () • { • size (200, 200); • background (0); • smooth(); • }

39. Output

40. New things • Cause the size of the ellipses to vary too. • Draw rectangles too. • Specify colours – red range, blue range, etc. • ** Color depends on mouse position **