MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
BY WILLEM THIART AND BEN JACK 9/7/09
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Recap of last week Last week we learned how to: draw using processing's coordinate system use variables use functions use while loops
You should at least feel comfortable using
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Learning Goals This week we will learn to: • use variables as a means to animate objects. • use if and else statements to control animation. • use the random() function to generate random numbers. • Use mouse and keyboard variables to control interaction And there will be some extension work for those who are interested: • using sin() to generate wavelike motion • using the % (modulo) operator as a means to loop through values
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Recap Learning Strategy • Give an honest attempt at the problems BEFORE looking at the answer slides. • If you get stumped, figure out why and where you are stumped. • Understand what kind of help you need
Take your time
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Animation We need variables to animate our programs. The idea is to draw our sketch using variables instead of using static numbers (ie. Using width instead of 500). If our sketch is based off variables, then changing the variables will change the way the sketch looks. eg. a variable that increases continuously will result in a sketch that changes continuously.
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY Problem 1
Draw a circle that starts small but grows larger. hint: you need a variable which increases instead of using a number in the width and height part of ellipse(x,y,width,height);
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Solution 1 int counter = 0; void setup() { size(100,100); } void draw() { ellipse(50,50,counter,counter); counter = counter + 1; }
We create an integer variable called counter, and we set it to 0. Inside draw we set the value of counter to be the value of counter plus 1. This increases counter by 1. We draw the ellipse in the middle of the screen (ie. we set its x to 50 and its y to 50. there is also another way to center an object, what is it?) and base its width and height off counter. Note: counter is created OUTSIDE of draw, why is this? Experiment by placing it inside of draw and seeing what happens.
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Void draw()? Some of you may be asking why the last example works, ie. animates, and why exactly is the counter created outside of the draw() function? To understand this, we must realize that the draw function is essentially a loop. Every time the screen refreshes (60 times every second) the code inside draw() is repeated. What this means is that the ellipse is redrawn 60 times a second, but because counter is getting bigger by 1 every frame, so is the ellipse. (remember that the width and height of the ellipse ARE in fact whatever number counter happens to be at the moment). What would happen if counter was created INSIDE of draw? Well essentially every time the code was repeated, counter would be reset to 0. Try it if you haven’t already.
int counter = 0; void setup() { size(100,100); } void draw() { ellipse(50, 50, counter, counter); counter = counter + 1; }
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
The if statement
if(something is true) run a block of code
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
if statement int number = 5; size(150, 150); smooth(); stroke(10); if (number < 10) { stroke(255,0,0); }
ellipse(25, 100, 50, 50); strokeWeight(8);
â&#x2C6;&#x2019; Just like the while loop but instead it either gets run once or it simply doesn't. It depends if the test is true
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY Problem 2
• 1. Draw a square that starts off on the left of the screen and slowly moves to the right. • 2. when the square gets to the far side of the screen it should get “reset” to the left of the screen. • Hint: you will need a variable which controls the x co-ordinate of the square, and an if statement asking if that variable is bigger than…….
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Solution 2 float counter = 0; void setup() { size(100,100); } void draw() { background(127); fill(255,0,255); rect(counter,25,30,30); counter = counter + 1; if (counter > 100) { counter = 0; } }
We used counter again. We also added an if statement to set counter to 0 every time counter is greater than 100. Why reset if x is greater than 100? Is there a better way? Where did the number 100 come from, ie. is it random or is there a reason it was specifically chosen?
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Problem 3 There is a bug in this code which causes the bottom row of squares not to be drawn, can you fix it? Hint: look at the while loops
void setup() { size(100,100); fill(0); background(255); } void draw() { int x = 7; while (x < 90) { int y = 7; while (y < 50) { rect(x, y, 25, 25); y = y + 30; } x = x + 30; } }
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Solution 3 void setup() { size(100,100); fill(0); background(255); } void draw() { int x = 7; while (x < 90) { int y = 7; while (y < 90) { rect(x, y, 25, 25); y = y + 30; } x = x + 30; } }
The problem was that the while loop for the y coordinate only went to 50, not till 90.
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Problem 4 This code draws a grid of 9 squares. Could you make the squares shrink over time?
float counter = 0; void draw() { fill(0); background(255); float x = 7.5; while (x < 90) { float y = 7.5;
Hint: to make the squares shrink, all you need to change is the question marks
while (y < 90) { float siz= 25 - ???????; if(siz < 0) siz = 0; rect(x, y, siz, siz); y = y + 30; } x = x + 30; } counter = counter + 1; }
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Solution 4 float
counter = 0; void draw() { fill(0); background(255); float x = 7.5; while (x < 90) { float y = 7.5; while (y < 90) { float siz = 25 - counter; if(siz < 0) siz = 0; rect(x, y, siz, siz); y = y + 30; } x = x + 30; } counter = counter + 1; }
Every time draw repeats, counter gets bigger. So.. If we subtract counter from 25 (the original size of the squares) the squares will get SMALLER every time.
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
A bit of extra code float
counter = 0; void draw() { fill(0); background(255); float x = 7.5; while (x < 90) { float y = 7.5; while (y < 90) { float siz = 200 - counter - x - y; if(siz > 25) siz = 25; if(siz < 0) siz = 0; rect(x, y, siz, siz); y = y + 30; } x = x + 30; } counter = counter + 1; }
This code makes the squares get smaller from the bottom left up to the top right. Try out the code and see if you can work it out. Can you reverse the motion?
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
random() Randomness is a tool we can use to make our sketches different each time. Randomness can also make our sketches look more natural if used properly. Numbers we get from random() are not random but in fact something called pseudo-random. random() is based on a complicated formula. If you set randomSeed(0); your sketch will always choose the same sequence of random numbers.
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Problem 5 Draw a night sky in a 100x100 window (100 stars randomly arranged in the window). Hint: you will need a while loop that repeats 100 times, and two different calls to random() for x and y co-ordinates of points. Also use the point(x,y); function to draw a single point.
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Solution 5 void draw() { background(0); randomSeed(0); int i = 0; while (i < 100) { stroke(255); point(random(0,100),random(0,100)); i = i + 1; } } Basically, just drawing a point() at a random x and random y should spread the stars out randomly enough for you. The while loop was to repeat the random point 100 times. What happens if you remove randomSeed(0); ?
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Making them sparkle float counter = 0; void draw() { background(0); int i = 0;
This is a bit mathmatical, but try out the code and see what it does. If I set stroke() to the value of counter (after it's been converted to a number range of -1 to 1 by sin()) times 255 (the maximum a colour can be), the colour of the points will be different each second. The i inside sin() is doing a lot of work! Why is i there? Do the stars sparkle without it?
randomSeed(0); while (i < 100) { stroke(sin(counter * 0.001 * i) * 255); point(random(0,100),random(0,100)); i = i + 1; } counter = counter + 1; }
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Extensions for the interested This next section is slightly more mathematical and is for those of you interested in getting to grips with some of processingâ&#x20AC;&#x2122;s more powerful features.
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY Problem 6
Copy-paste this code then animate it! Only change the variables: peak, speed and time.
float counter = 0; void draw() { background(255); float x = 10; while (x<100) { // Your changes start here float peak = 10; float speed = 0.1; float time = x; // Your changes end here float y = sin(time * speed) * peak; ellipse(x, 50 + y, 10, 10); x = x + 5; } counter = counter + 1; }
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Solution 6 int counter = 0; void draw() { background(255); float x = 10; while (x<100) { // Your changes start here float peak = 10; float speed = 0.1; float time = x + counter; // Your changes end here float y = sin(time * speed) * peak; ellipse(x, 50 + y, 10, 10); x = x + 5; } counter = counter + 1; }
sin() is a function that turns any number into a new number that is between -1 and 1. Basically even though counter becomes very large, sin() always keeps it between -1 and 1. This is very useful. Use sin() in places where you want the shapes in your pattern to move naturally in a wavelike motion and stay in control. Try replacing sin() with noise() and see what happens. What does noise() do? tan() does something interesting as well!
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Problem 7 Modulo is an extremely helpful feature of programming. It is essentially the remainder of a division. Its like primary school division all over again. You don’t worry about the decimal points, you simply get a “remainder”. Modulo returns this remainder! Examples: 1%4=1; (1/4 = 0 with 1 remainder) 2%4=2; (2/4 = 0 with 2 remainder) 3%4=3; (3/4 = 0 with 3 remainder) 4%4=0; (4/4 = 1 with 0 remainder) 5%4=1; (5/4 = 1 with 1 remainder) 6%4=2; (6/4 = 1 with 2 remainder) 7%4=3; (7/4 = 1 with 3 remainder) 8%4=0; (8/4 = 2 with 0 remainder) As you may be able to see, the result of ?%4 will ALWAYS be a value between 0 and 3, likewise ?%7 will always be a value between 0 and 6. This is useful for looping between values.
Rewrite solution 2 using % instead of the if statement float counter = 0; void draw() { background(127); fill(255,0,255); rect(counter,25,30,30); counter = counter + 1; if (counter > 100) { counter = 0; } }
MOTION PATTERN DSDN 142 ANGELA BLACHNITZKY
Solution 7 float counter = 0; void draw() { background(127); fill(255,0,255); rect(counter,25,30,30); counter = counter + 1; counter = counter % 100; }
What happens when counter gets to 100? Well what is 100%100? What is 101%100?