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

2. 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 …

3. 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?

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

5. 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.

6. 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.

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

8. 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

9. 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

10. 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

11. 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.

12. 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.

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

14. 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;

15. 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

16. 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

17. 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.

19. // Jim Parker
// Art 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
rect(i,j,pixelSize,pixelSize); // Draw filled reactangle with random level }

20. Poor List the reasons why this is a poor program in terms of style.
// Jim Parker
// Art 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.

21. Poor List the reasons why this is a poor program in terms of style.
// Jim Parker
// Art 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.

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

23. 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)

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

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

26. 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); }

27. 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); }

28. 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); }

29. 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.

30. 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.

31. 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)