Codekids Lesson 2

Windows, Colours, Points

Time to start coding!

Your First Program

Start up Processing and write your first program:

size(100,100);

Here's a little hint for you: (DON'T FORGET THE SEMI-COLON!!!!!!!)

Now, hit the play arrow and see what happens. Does Processing make a little gray window (like the one below) for you?

Try making windows of different sizes...but not too big!

Your Second Program

Copy or type this into processing, then run it.

size(400, 400);
background(0,0,0); 

What happened? Did it make a yellow box? (NO! It makes a black box, like the one below.)

Remember: Computer colours are made out of RED, GREEN, and BLUE. The three numbers between 0 and 255 stand for the amount of red, green, and blue you want.

So, try making some windows of different sizes and colours.

What's your favourite colour?

Here are the colours we chose during class:

Your Third Program

Copy or type this into processing, then run it.

size(200, 200);
background(0,0,0); 
stroke(255);
point(10, 10);

What happened? Did it make a little teeny tiny white dot in the upper-right corner? NO! it should be in the upper-left corner!

Now try to move the dot to the center of your window. Or make a bunch of dots in different places.

Your Fourth Program

Maybe the dots are too small?! You can make them bigger, and change their colors. To change the dot size, use this command:

strokeWeight(10); 

The number inside the parentheses is the size of the dot. But, you need to set the strokeWeight BEFORE you draw the point. Copy or type this into processing, then run it.

size(200, 200);
background(0,0,0); 
stroke(255);
strokeWeight(10);
point(10, 10);

To change the color of the dot, change the number(s) in the stroke() command. For example, do this to make a very big green dot:

size(200, 200);
background(0,0,0);
stroke(0,200,30);
strokeWeight(100);
point(100,100);

Now you try it. Make dots of different colors and sizes in your window.

Go back to the home page.