programming for artists
DESCRIPTION
ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 11 Fall 2010. Programming for Artists. Processing - Loops. We know about variables and some kinds of expressions. We know about conditions/flow of control (IF-THEN-ELSE) - PowerPoint PPT PresentationTRANSCRIPT
Programming for Programming for ArtistsArtistsART 315ART 315
Dr. J. R. ParkerDr. J. R. ParkerArt/Digital Media LabArt/Digital Media Lab
Lec 11 Fall 2010Lec 11 Fall 2010
Processing - LoopsWe know about variables and some kinds
of expressions.We know about conditions/flow of control
(IF-THEN-ELSE)
Consider now how we could do something many times. Of course, each time step our program gets called, and we can draw things and update positions, speeds, and so on.
Let’s write some code that changes each line in the display to a different color or grey value each step, so that it seems to slowly shift in hue or brightness.
Loops
Here’s what I mean:
Loops
How to do it: 1. Let i be the column under
consideration.2. Draw a vertical line with grey level I3. Repeat for i=0..255
i
Loops
We can use a new statement: while
while (expression) statement
The statement gets executed repeatedly so long as the expression is true
(IE not equal to 0)
LoopsThe statement can be a bunch of statements within begin-end
braces.
while (expression) {statement;statement;…statement;}
LoopsSo increase I by 1 until it becomes greater than 255
i = 0; // Initialize iwhile (i < 256) // Done yet??{
statement; // here I = 0, then 1, then 2, …
statement;…
i = i + 1; // Increment i}
LoopsSo increase I by 1 until it becomes greater than 255
i = 0; // Initialize iwhile (i < 256) // Done yet??{
stroke (i); // set stroke colour to istatement;
…i = i + 1; // Increment i
}
LoopsSo increase I by 1 until it becomes greater than 255
i = 0; // Initialize iwhile (i < 256) // Done yet??{stroke (i); // set stroke colour to iline (i, 0, i, 256);// Draw a line, color i…i = i + 1; // Increment i}
Loops
void (draw){
i = 0; // Initialize iwhile (i < 256) // Done yet??{
stroke (i); // set stroke colour to iline (i, 0, i, 256); // Draw a line, color ii = i + 1; // Increment i
}}
Loopsint i; // counters
void setup (){ size (256,256);}
void draw (){ i = 0; // Start at the first row. while (i<256) // Repeat for all 256
rows { stroke(i); line (i,0,i,255); i += 1; }}
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
This pointer will slideright from 0 to the end.Levels will be changed
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
This pointer will slideright from 0 to the end.Levels will be changed
21 22 23 24 25 26 27 27… …
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
22 22 23 24 25 26 27 27… …
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
22 23 23 24 25 26 27 27… …
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
22 23 24 24 25 26 27 27… …
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
22 23 24 25 25 26 27 27… …
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
22 23 24 25 26 26 27 27… …
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
22 23 24 25 26 27 27 27… …
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
22 23 24 25 26 27 28 27… …
Loops – make it moveNew problem: Make the grey level change by one each step.It will now be an animation where the greys change – it will have the illusion of the image moving.
22 23 24 25 26 27 28 29… …
This can be done with a loop
1. Start the program with the left column = 0 and the right one =255(white).
2. Each step (draw) change the start value (increase by 1).
3. Need a variable for the start value. Call it v.
Otherwise, the program is as it was.
This can be done with a loop
1. Start the program with the left column = 0 and the right one =255(white).
2. Each step (draw) change the start value (increase by 1).
3. Need a variable for the start value. Call it v. And one for the current colour (call it s)
Otherwise, the program is as it was.
Modify the programint i;
void setup (){ size (256,256);}
void draw (){ i = 0; while (i<256) { stroke(i); line (i,0,i,255); i += 1; }}
int i,s,v;
void setup (){ size (256,256); v=0;}
void draw (){ i = 0; s = v; while (i<256) { stroke(s); line (i,0,i,300); i = i + 1; s = s + 1; } v = v + 1;}
Here’s what it does
A bug!We keep adding 1 to the color.
At some point it gets bigger than 255, and then is useless – there’s no white that is whiter than 255. So after a while, all parts of the image become white, and don’t seem to change after that.
We can fix that by checking the current color and not letting it get bigger than 255 – set it to 0 instead and start over.
A Bug fixWe keep adding 1 to the color.
At some point it gets bigger than 255, and then is useless – there’s no white that is whiter than 255. So after a while, all parts of the image become white, and don’t seem to change after that.
We can fix that by checking the current color and not letting it get bigger than 255 – set it to 0 instead and start over.
A Bug fix
A Bug fix
void draw (){ i = 0; s = v; while (i<256) { stroke(s); if (s>255) s = 0; line (i,0,i,300); i = i + 1; s = s + 1; } v = v + 1; if (v>255) v = 0;}
Check colour – makeSure it stays less than 255
The same for start colour, or else at some point, when v>255, allimages look the same (allstart at 0)
The FOR statment The WHILE statement creates a very
general loop, and is all we really need.
On the other hand … the most common type of loop
involves adding 1 to a variable each time through.
A FOR loop does this.
The FOR statement i = 0;
while (i<256){
i = i + 1;}
for (i=0; i<256; i=i+1){
}
The FOR statement void draw (){ i = 0; s = v;
for (i=0; i<256; i=i+1)
{ stroke(s); if (s>255) s = 0; line (i,0,i,300); s = s + 1; } v = v + 1; if (v>255) v = 0;}
This is the same programas before, but using a FORstatement instead of a WHILE
A FOR statement can alwaysbe turned into a WHILE in a simple way.
Loops Let’s try a new program. It’ll be artistic.
Start at some point, say 20,20
Draw a line to another point; say 200,200
Now modify the endpoint and start point in a regular way:
startx = startx + 1 starty = starty + 10endx = endx – 1 endy = endy-12
Loops Let’s try a new program. It’ll be artistic.
Start at some point, say 20,20
Draw a line to another point; say 200,200
Now modify the endpoint and start point in a regular way:
startx = startx + 1 starty = starty + 10endx = endx – 1 endy = endy-12
Loops int startx=20, starty=20;int endx = 200, endy=200;int sx1, sx2, sy1, sy2;void setup (){ size (256,256);}
void draw (){ stroke (255); sx1 = startx; sy1 = starty; sx2 = endx; sy2=endy; while ((sy1 < 256) && (sy2>=0)) { line (sx1,sy1,sx2,sy2); sx1 = sx1 + 1; sy1 = sy1 + 10; sx2 = sx2 - 1; sy2 = sy2 - 12; }}
36
Loops
Now animate the colour = change from a start value through the range.
Each time DRAW is called, change the colour a little bit.
Need a variable for current colour, and need to check to see that it does not get bigger than 255.
37
Loops int startx=20, starty=20;int endx = 200, endy=200;int sx1, sx2, sy1, sy2;int s = 128;void setup (){ size (256,256}
void draw (){ stroke (s); sx1 = startx; sy1 = starty; sx2 = endx; sy2=endy; while ((sy1 < 256) && (sy2>=0)) { line (sx1,sy1,sx2,sy2); sx1 = sx1 + 1; sy1 = sy1 + 10; sx2 = sx2 - 1; sy2 = sy2 - 12; } s = s + 1; if (s > 255) s = 0;}
38
Loops
39
Loops
That’s okay, but not great.
How about changing the colour of each line each time.
I’ll bet it won’t look like what you imagine.
Change the line colour by 5 every time a line is drawn.
40
Loops int startx=20, starty=20;int endx = 200, endy=200;int sx1, sx2, sy1, sy2;int s = 128;void setup (){ size (256,256);}
void draw (){ sx1 = startx; sy1 = starty; sx2 = endx; sy2=endy; while ((sy1 < 256) && (sy2>=0)) { stroke (s); line (sx1,sy1,sx2,sy2); sx1 = sx1 + 1; sy1 = sy1 + 10; sx2 = sx2 - 1; sy2 = sy2 - 12; s = s + 5; if (s > 255) s = 0; }}
41
??
42
Loops Most of our
programs will use loops.
Practice with simple problems
Try new things
Use the print statements for easy to understand output.
43
Printing … void draw (){ sx1 = startx; sy1 = starty; sx2 = endx; sy2=endy; while ((sy1 < 256) && (sy2>=0)) { stroke (s); line (sx1,sy1,sx2,sy2); sx1 = sx1 + 1; sy1 = sy1 + 10; sx2 = sx2 - 1; sy2 = sy2 - 12; s = s + 5; if (s > 255) s = 0; } n = n + 1; print ("Iteration "); print(n); print (" Color "); println(s);}
44
Printing …