motion and conditionals
Post on 12-Mar-2016
226 Views
Preview:
DESCRIPTION
TRANSCRIPT
Motion, if else, randomDSDN 142 Creative Coding
Recap of last weekLast week we learned how to:
draw using processing's coordinate systemuse variablesuse functionsuse while loops
You should at least feel comfortable using variables and while loops now.
Motion, if else, randomDSDN 142 Creative Coding
Learning GoalsThis 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, randomDSDN 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, randomDSDN 142 Creative Coding
AnimationWe 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, randomDSDN 142 Creative Coding
Problem 1Draw 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, randomDSDN 142 Creative Coding
Solution 1int 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, randomDSDN 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, randomDSDN 142 Creative Coding
The if statement
if(something is true)run a block of code
Motion, if else, randomDSDN 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, randomDSDN 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 co-ordinate of the square, and an if statement asking if that variable is bigger than…….
Motion, if else, randomDSDN 142 Creative Coding
Solution 2float 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, randomDSDN 142 Creative Coding
Problem 3There 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, randomDSDN 142 Creative Coding
Solution 3void 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 co-ordinate only went to 50, not till 90.
Motion, if else, randomDSDN 142 Creative Coding
Problem 4This 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, randomDSDN 142 Creative Coding
Solution 4float 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, randomDSDN 142 Creative Coding
A bit of extra codefloat 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, randomDSDN 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, randomDSDN 142 Creative Coding
Problem 5Problem 5Draw 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, randomDSDN 142 Creative Coding
Solution 5void 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, if else, randomDSDN 142 Creative Coding
Making them sparklefloat 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, randomDSDN 142 Creative Coding
Extensions for the interestedThis next section is slightly more mathematical and is for those of you interested in getting to grips with some of processing’s more powerful features.
Motion, if else, randomDSDN 142 Creative Coding
Problem 6float 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;}
Copy-paste this code then animate it!
Only change the variables: peak, speed and time.
Motion, if else, randomDSDN 142 Creative Coding
Solution 6int 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, randomDSDN 142 Creative Coding
Problem 7Modulo 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.
float counter = 0;
void draw(){ background(127); fill(255,0,255); rect(counter,25,30,30);
counter = counter + 1; if (counter > 100) { counter = 0; }}
Rewrite solution 2 using % instead of the if statement
Motion, if else, randomDSDN 142 Creative Coding
Solution 7float 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?
top related