Codekids Lesson 6

Animation

Now, you've learned how to make circles and how to do while loops. In this lesson, we'll put these together with two new things, random numbers and mouse clicks.

Random Numbers

Processing lets you pick some random number using the random() function. For example the following command picks a random number between 0 and 255:

random(0,255);

One thing weird about this is that it could be ANY random number between 0 and 255, like 47.658902 or 0.00003! So, in our program we use another command to convert the random number into a regular "integer" or counting number:

mrRandom = random(0,255);
mrRed = int(mrRandom);

What this means is:

1. Get a random number between 0 and 255
2. Keep that number in the variable called mrRandom
3. Round the random number to get an integer
4. The variable called mrRed gets the new random integer

Mouse Clicks

Processing lets you know where the mouse is and when it gets clicked. When someone clicks the mouse down, the mousePressed() function automatically does whatever code you put between the curly braces:

void mousePressed(){

}

Then, when you draw stuff, you can use mouseX and mouseY to draw it at the place where the mouse cursor is. For example, what does this code mean?

void mousePressed(){

ellipse(mouseX,mouseY,circleSize,circleSize);

}

It means:

"Draw a circle, centred where the mouse cursor is, that is circleSize pixels wide and circleSize pixels tall."

Your Ninth Program

Now, let's try using the random() function and mouse information in a new program. Start up Processing and copy this code into the program:

int circleSize = 1;
int mrRed = 0;
int mrGreen = 0;
int mrBlue = 0;
float mrRandom = 0;
int circleMax = 500;

void setup(){

size(400, 400);
background(0);
stroke(100,50,255);
strokeWeight(1);
noFill();
smooth();
frameRate(5);

}

void mousePressed() {

mrRandom = random(0,255);
mrRed = int(mrRandom);

mrRandom = random(0,255);
mrGreen = int(mrRandom);

mrRandom = random(0,255);
mrBlue = int(mrRandom);

mrRandom = random(10,500);
circleMax = int(mrRandom);

stroke(mrRed,mrGreen,mrBlue);

while(circleSize < circleMax){

ellipse(mouseX,mouseY,circleSize,circleSize);
circleSize = circleSize + 20;

}
circleSize = 1;

}

void draw(){

fill(0,0,0,10);
rect(0,0,400,400);

}

 

When it plays, it will draw rings in random colors and sizes, centered at the place where you click. Like this:

Of course, it will be different for everyone, because the circle sizes and colors are all random.

How does it work?

We'll learn about that in class.

Hack your Program

Now that you've got your ninth program running, do these things:

1. change the circleSize = circleSize + 20;and stroke colours
2. change strokeWeight
3. see what happens if you change void mousePressed(); to void mouseReleased(); or void mouseDragged();
4. change how fast it fades by changing the last number in: fill(0,0,0,10);
5. change the shapes from circles to squares with these commands:

rectMode(CENTER);
rect(mouseX, mouseY, circleSize, circleSize);

If you create something cool, use Grab to copy it and email it to me!

Go back to the home page.