motion and conditionals

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.


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


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


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.


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


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.


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;}


The if statement

if(something is true)run a block of code


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


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


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?


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; }}


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.


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;}


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.


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?


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.


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.


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); ?


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?


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.


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.


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!


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


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?

motion and conditionals

Documents