Motion, if else, random DSDN 142 Creative Coding
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 variables and while loops now.
Motion, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
The if statement if(something is true) run a block of code
Motion, if else, random DSDN 142 Creative Coding
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);
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, if else, random DSDN 142 Creative Coding
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 coordinate of the square, and an if statement asking if that variable is bigger than…….
Motion, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
Problem 4 This code draws a grid of 9 squares. Could you make the squares shrink over time? Hint: to make the squares shrink, all you need to change is the question marks
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 - ???????; if(siz < 0) siz = 0; rect(x, y, siz, siz); y = y + 30; } x = x + 30; } counter = counter + 1; }
Motion, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
Problem 5 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, if else, random DSDN 142 Creative Coding
Solution 5 void draw() { background(0); randomSeed(0);
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); ?
int i = 0; while (i < 100) { stroke(255); point(random(0,100),random(0,100)); i = i + 1; } }
Motion, if else, random DSDN 142 Creative Coding
Making them sparkle float counter = 0; void draw() { background(0); int i = 0; 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; }
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?
Motion, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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, if else, random DSDN 142 Creative Coding
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?