Programming for Artists Dr. J. R. Parker Art/Digital Media Lab Lec 12 Fall 2010

Style and Messy details Style refers to the manner in which one writes code. It is not important in and of itself. Good style usually means that you can read a program and understand it quickly. You can return to a program days or weeks later and finish or repair it. It costs a bit more time at the outset to save a lot of time later. Although sometimes you never need to repair it …

Variables Variables should have relevant names. If a variable holds a count of objects, then name it objectCount If a variable represents a distance, then call it distance Get it?

Variables Variables should always be initialized. Best to do this in the declaration int Nitems = 12, j = 0; float xdistance=0.0;

Variables Scope: refers to the places where a variable can be used, where it has been defined. So far, all of our variables have been defined at the beginning of the program, outside of the ‘setup’ or ‘draw’ blocks.

Variables The declaration of x is outside of int x=0; void setup() { size (200,200); } void draw ( ) background (128); x=0; while (x<width) stroke(255); line(x, 0, x, height); x = x + 5; The declaration of x is outside of the setup and draw blocks, and so x can be used within both.

Variables The declaration of x is inside of The draw blocks, and so void setup() { size (200,200); // X can’t be used here. } void draw ( ) int x=0; background (128); while (x<width) stroke(255); line(x, 0, x, height); x = x + 5; The declaration of x is inside of The draw blocks, and so x can be used within draw but noplace else. X is redefined and initialized each time draw is called (each step) so there’s no need to have the ‘x = 0;’ statement as before.

Variables Convert to FOR loop void setup() { size (200,200); // X can’t be used here. } void draw ( ) int x=0; background (128); while (x<width) stroke(255); line(x, 0, x, height); x = x + 5; Convert to FOR loop

Variables Convert to FOR loop void setup() { size (200,200); // X can’t be used here. } void draw ( ) int x=0; background (128); while (x=0; x<width) stroke(255); line(x, 0, x, height); x = x + 5; Convert to FOR loop

Variables Convert to FOR loop void setup() { size (200,200); // X can’t be used here. } void draw ( ) int x=0; background (128); for (x=0; x<width; x=x+5) stroke(255); line(x, 0, x, height); Convert to FOR loop

Variables void setup() { size (200,200); } void draw ( ) background (128); for (int x=0; x<width; x=x+5) stroke(255); line(x, 0, x, height); Declare variable within the loop. X does not exist outside of the loop, and can’t be used outside.

Variables - scope Keep the scope of variables as small as possible. This means that if something goes wrong with the program, it is easier to locate the problem.

Comments Write comments for: New blocks Variable declarations Calculations Loops Magic numbers Comments should be descriptive, and must not Simply duplicate the code.

Comments Write comments for: Variable declarations int x=0; // X coordinate of box. 0=upper left // The distance between the ball and the goal. float distance=0.0;

Comments Write comments for: Calculations d = x1*x2 + y1*y2; // Distance between car1 and car2 count = count + 1; // One more object has been created Cool new syntax: count += 1; // Same as count = count+1 count++; // Same as count = count+1

Comments Write comments for: Loops Magic numbers for (i=0; i<10; i++) // Examine each row // Loop until the car escapes the black hole // 100 is the distance at which something can escape. while (d<100.0) A magic number

Example Let’s write a program Create a window and draw randomly colored squares In it, so as to look like white noise. Follow the rules That we have listed as closely as possible.

// Jim Parker // Art 315 - Static // Fall 2010 // Create a window of known size. void setup() { int windowSize = 200; // How big is the window, screen coordinates? size (windowSize,windowSize); } Good // Draw the current random static window as 2D image. Each picture element is a 2x2 // rectangle filled with a random grey level. void draw ( ) { int backgroundColor = 128; // Color of window background int minNoise=100; // Minimum grey level in noise int maxNoise = 256; // Maximum grey level in noise int pixelSize = 2; // How large are pixels, as rectangles? background (backgroundColor); // Background color of window is mid grey for (int i=0; i<width; i=i+pixelSize) // For each column in the window for (int j=0; j<height; j= j+pixelSize) // For each row in the window fill(random(minNoise, maxNoise)); // Creat a random grey level between 100-255 rect(i,j,pixelSize,pixelSize); // Draw filled reactangle with random level }

Poor List the reasons why this is a poor program in terms of style. // Jim Parker // Art 315 - Static (Poor) // Fall 2010 int i,j; void setup() { size (256,256); } void draw ( ) background (128); for (i=0; i<width; i=i+2) for (j=0; j<height; j= j+2) fill(random(100,256)); rect(i,j,2,2); Poor List the reasons why this is a poor program in terms of style.

Poor List the reasons why this is a poor program in terms of style. // Jim Parker // Art 315 - Static (Poor) // Fall 2010 int i,j; no initiialization; scope too large; no comment. void setup() { size (256,256); Magic numbers } No comment here void draw ( ) background (128); Magic number, no comments for (i=0; i<width; i=i+2) No comment; magic for (j=0; j<height; j= j+2) No comment; magic fill(random(100,256)); Magic; no comment rect(i,j,2,2); magic; no comment Poor List the reasons why this is a poor program in terms of style.

Modules One way to organize code so that it can be understood is to build it from simpler units. Simple things (bricks) are used to build more complex things (walls) which are used to build still more complex things (rooms) and then floors and then buildings. Modules are a few lines of code (let’s say rarely more than 20) that accomplish a simple, nameable task. They are implemented using blocks of code with parameters that are called functions, procedures, subroutines, methods, etc etc. We’ll use function.

Modules In the previous code, we could have a function to Draw the picture element. All picture elements are treated in the same way by the program, so this should work.. Parameters to the function would be: -The x,y location to draw the picture element Let’s call it randomPixel (i,j)

Modules int i,j; void setup() { size (256,256); } void draw ( ) background (128); for (i=0; i<width; i=i+2) for (j=0; j<height; j= j+2) fill(random(100,256)); rect(i,j,2,2); Modules Select the code you want As the body of the function. (or write new) fill(random(100,256)); rect(i,j,2,2);

Modules int i,j; void setup() { size (256,256); } void draw ( ) background (128); for (i=0; i<width; i=i+2) for (j=0; j<height; j= j+2) fill(random(100,256)); rect(i,j,2,2); Modules Make a header for the function void function (int i, int j) { fill(random(100,256)); rect(i,j,2,2);

Modules int i,j; void setup() { size (256,256); } void draw ( ) background (128); for (i=0; i<width; i=i+2) for (j=0; j<height; j= j+2) fill(random(100,256)); rect(i,j,2,2); Modules End the function’s block void function (int i, int j) { fill(random(100,256)); rect(i,j,2,2); }

Modules int i,j; void setup() { size (256,256); } void draw ( ) background (128); for (i=0; i<width; i=i+2) for (j=0; j<height; j= j+2) randomPixel (i, j); Modules Replace code in draw with a Call to the function void randomPixel (int i, int j) { fill(random(100,256)); rect(i,j,2,2); }

Modules int i,j; void setup() { size (256,256); } void draw ( ) background (128); for (i=0; i<width; i=i+2) for (j=0; j<height; j= j+2) randomPixel (j, i); Modules Document // Draw a random colored pixel at (j,i) void randomPixel (int i, int j) { fill(random(100,256)); rect(i,j,2,2); }

Details void randomPixel (int i, int j) … for (j=0; j<height; j= j+2) randomPixel (i, j); Values are passed from caller to function in order, left to right void randomPixel (int i, int j) Names are the same here, so perhaps It’s confusing.

Details void randomPixel (int i, int j) … for (y=0; y<height; y= y+2) randomPixel (x, y); Values are passed from caller to function in order, left to right void randomPixel (int i, int j) Names are different here, and it does The same thing as before. Position is what matters.

Details void randomPixel (int i, int j) … for (y=0; y<height; y= y+2) randomPixel (x, y); VOID means that it does not return a value (like random or sin) void randomPixel (int i, int j)