Programming for Artists ART 315 Dr J R

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

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.

ART How can we use these things to make art? What is the process? When we have brushes or pencils we know what to do. With a computer?

Process 1: Design on Paper 1. Very simple. Barcode

Barcode Not a useable one, just the graphic. What comprises a bar code? Lines. Is there some organization we should be aware of? (Only if we want them to work? ) We just want it to look ‘nice’.

Barcode Some lines are thicker than others. They are spaced apart by white/grey regions

Barcode Lines are vertical Thickness is controlled in Processing by stroke. Weight (n) Where n is a number of pixels.

Barcode How can we position them? We need an algorithm. State a method in English. ?

Algorithm 1 Draw lines of width 1 spaced n pixels apart Draw lines of width 2 spaced n+3 apart Draw lines of width 3 spaced n+7 apart Draw lines of width 4 spaced n+11 apart Start at the same spot on the left Drawing area is 200 pixels wide Start over at same positions each time size increases. What will this look like?

Implementation 1 Always begin with the basic template of a Processing program: // Barcode 2018 -05 -24 J. Parker void setup () { size (600, 400); } void draw () { background (255); }.

Implementation 1 Need to draw 4 sets of vertical lines. void draw () { int i=0, n=8, x=200; background (255); stroke. Weight(1); while (x < 400) // Draw lines { line (x, 100, x, 300); x = x + n; } }.

Implementation 1 This does only 1 set.

Implementation 1 Second set of lines: stroke. Weight(2); x = 200; while (x < 400) // Draw lines { line (x, 100, x, 300); x = x + n+3; }

Implementation 1

Implementation 1 stroke. Weight(3); x = 200; while (x < 400) // Draw lines { line (x, 100, x, 300); x = x + n+7; } stroke. Weight(4); x = 200; while (x < 400) // Draw lines { line (x, 100, x, 300); x = x + n+11; }

Implementation 1

Parameter N How does changing N make the images different? n=12 n=16 N=5

Drawing Modes – Rect, Ellipse What else could be a parameter? The width or the drawing region (now fixed at 200) The thickness of the lines (Now fixed at 1, 2, 3, 4) Starting point in the image (100) Height of the barcode (200) Find these value in the code. Change them to variables.

Algorithm 1+ The first algorithm worked a lot better than I thought it would. What else could we do? Use different grey values for different thicknesses.

Algorithm 1+ Use color? Transparency

Design on Paper 2

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.

// 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); Bender stroke (0); line (141, 213, 238, 212); line (125, 194, 143, 213); line (252, 190, 238, 212); // Erase no. Stroke (); triangle (126, 193, 142, 212, 145, 201); triangle (251, 190, 236, 211, 235, 200); stroke(255); ellipse. Mode (CORNERS); ellipse (176, 100, 205, 128); // Head ellipse (138, 108, 238, 170); rect. Mode (CORNERS); rect (139, 131, 236, 280); // Visor ellipse (122, 157, 155, 205); ellipse (210, 155, 205); line (135, 157, 230, 156); no. Stroke (); rect (135, 158, 205); rect (210, 157, 240, 206); 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); no. Stroke (); // Eyes fill (255); ellipse (139, 167, 181, 199);

Bender (continued) ellipse (200, 166, 240, 199); fill (0); rect (144, 180, 150, 186); rect (205, 180, 211, 186); // Vertical teeth // 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); line (148, 245, 159, 242); no. Stroke (); // Erase ellipse (146, 240, 159, 263); stroke (0); line (173, 230, 173, 266); line (187, 230, 187, 266); line (202, 230, 202, 266); 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);

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 Game. Maker does and as does C and Java.

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 Game. Maker.

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

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 Game. Maker.

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

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

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

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

Mouse void draw () { background (200); stroke (0); fill (175); rect. Mode (CENTER); rect mouse. X, mouse. Y, 50); } mouse. X and Mouse. Y are Variables defined by the system. They are like those in Game. Maker.

Output

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

Explain? ?

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? )

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

Output

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 **