Tutorial+2+–+Drawing+Lines+and+Changing+Colors

**Module 2 – Drawing Lines and Changing Colours**
 * Programming and Design – Unit 2 //Programming Part 1//**

In the first module, you were able to get into Processing, copy-and-paste code, and run your program. In this module, we’ll learn how to go from a blank document and create your own simple sketch. It’s important to remember that Processing will only do what you tell it to do – we’re just learning how to tell it to do what we want it to do.


 * Part 1: Setup and Draw **

There are two important parts to a basic Processing sketch – **setup** and **draw**. We call these sections **functions**, but we’ll talk more about functions later. For now, think of them as sections of code.

Setup – all of the instructions for creating your sketch (or “setting it up”). Instructions in setup only run **once** (that’s important!) In setup, the following things are usually defined: -the size of the sketch -the background colour (at least to start) -the starting colours that we use for drawing and filling in shapes -fonts for text Remember: setup instructions only run once!

Draw –all of the instructions for “running” the program. Draw instructions repeat over and over and over, while your program is running, unless you tell it otherwise. Sometimes, you won’t be able to tell that it is repeating your instructions over and over, because it will draw the same picture on top of itself many, many times. In draw, the following things are often defined: -lines and shapes that need to be drawn, especially if they interact with the mouse -colours that will need to change -text

Processing doesn’t care where we put the setup and draw sections in our code. However, we have to follow Processing’s pattern for defining where they are in the code, so that the **compiler** cane find **setup** and **draw.**

Pattern: code format="java" void setup {

//code goes here

}

void draw {

//code goes here

} code

We put all of the instructions where “code goes here” is.

Drawing a line is the next step. To draw a line, we’ll have to use a bit of math. Processing keeps track of where things are on the sketch using **coordinates**. The x-coordinate (first number) tells how far over the “thing” is from the left, and the y-coordinate (second number) tells how far down it is from the top.
 * Part 2 – Drawing a Line **

To draw a line, we just tell it two sets of coordinates (two points) and it draws a line between them. Example: To draw a line between (10, 20) and (40, 50)*, our program will look like: code format="java" void setup {

}

void draw {

line(10, 20, 40, 50);

}

code *Remember: it’s going from a point 10 over, 20 down to a point 40 over, 50 down.

You can add more lines in your sketch by adding more line instructions. Be sure to put a semi-colon ; at the end of the line. Also make sure that all of your instructions happen between the {} brackets of the draw section!

You try:
 * 1) Draw a line from (60, 70) to (100, 30). Check that this line makes sense on the screen.
 * 2) See if you can add more lines to make the first letter of your first name.

We can change the color of a line by changing the **stroke** of a line. This is like making Processing pick up a new color of pen to draw with. The pen will continue to be the new color until we tell Processing otherwise. Remember though – the draw instructions are repeated over and over, so whatever the most recent pen is will be used to draw lines after that instruction.
 * Part 3 – Changing the Color **

Do you remember what three colors a pixel is made of?

We can specify what color we want our line to be, by telling it how much red, green and blue to use.

To change the color, you program will look like this: code format="java" void setup {

}

void draw {

line(10, 20, 50, 60);

stroke(255, 0, 0);

line(60, 70, 100, 30);

} code

The three numbers in the stroke command tell how much red, green and blue in order.

You try:
 * 1) Add another stroke command before the } bracket. Add another line after the stroke command.

Hint: Want a specific color? The Color Picker (Tools>Color Picker) will let you pick your color and tell you the Red, Green and Blue values for that color. This makes it easy when you’re programming!

**Save your work as Module 2, when you have completed all of the You Try! exercises.**