1. We're going to start by setting the size of the canvas our P5 program will draw on. The code for this is, simply, "createCanvas(width, height);"
We also need to wrap our program inside a
function. In programming, a
function is a chunk of code with a name and a job. "setup()" is a function that every P5 program has, and its job is to run right at the start of the program and set things up. Since our programs right now aren't moving or interactive or anything, we'll just put all of our code in "setup()" for now to keep it simple.
function setup(){
createCanvas(500, 400); //sets the size for the window
}
2. Now, we'll draw a rectangle. The code is "rect(x, y, w, h);". x and y are the positions of the rectangle on the screen, w and h are its width and height. Notice that the (0,0) position is in the
upper left of the screen, and larger 'y' values are lower down on the screen.
Try copying this line of text to make a rectangle, then add two more rectangles of your own (can you make a square?):
function setup(){
createCanvas(500, 400); //sets the size for the window
rect(250, 200, 150, 100); // draws a rectangle
}
3. Now, we'll draw an ellipse. The code is almost identical to the rectangle code: "ellipse(x, y, w, h);". x and y are the positions of the ellipse on the screen, w and h are its width and height. One difference: By default, a rectangle's x and y position refers to its top left corner, while an ellipse's position refers to its center.
Try copying this line of text to make an ellipse, then add two more ellipses of your own (can you make a circle?):
function setup(){
createCanvas(500, 400); //sets the size for the window
rect(250, 200, 150, 100); // draws a rectangle
rect(150, 50, 25, 25);
rect(450, 100, 25, 300);
ellipse(250, 200, 200, 200); //draws an ellipse
}
4. Now, we'll draw a triangle. The code is a little trickier. We need to give Processing 6 numbers, the x and y values for each corner of the triangle. The code looks like this: "triangle(x1, y1, x2, y2, x3, y3);" Notice that each new shape we add is drawn
on top of the previous ones. How do you think we would add a shape
underneath our current shapes?
Try copying this line of text to make a triangle, then add two more triangles of your own. (Can you put one of the triangles BEHIND your other shapes?):
function setup(){
createCanvas(500, 400); //sets the size for the window
rect(250, 200, 150, 100); // draws a rectangle
rect(150, 50, 25, 25);
rect(450, 100, 25, 300);
ellipse(250, 200, 200, 200); //draws an ellipse
ellipse(50, 250, 100, 200);
ellipse(350, 0, 300, 100);
triangle(100, 100, 200, 200, 0, 200); //draws a triangle
}
5. Lines are pretty easy, after triangles. We just give them four numbers, an x and y value for the starting point and ending point, like this: "line(x1, y1, x2, y2);"
Try copying this line of code to make a line, then add two more lines of your own.:
function setup(){
createCanvas(500, 400); //sets the size for the window
triangle(500, 30, 450, 200, 300, 100);
rect(250, 200, 150, 100); // draws a rectangle
rect(150, 50, 25, 25);
rect(450, 100, 25, 300);
ellipse(250, 200, 200, 200); //draws an ellipse
ellipse(50, 250, 100, 200);
ellipse(350, 0, 300, 100);
triangle(100, 100, 200, 200, 0, 200); //draws a triangle
triangle(0, 0, 50, 0, 0, 50);
line(0, 0, 500, 400); //draws a line
}
6.
COLOR. The way computers create colors is by mixing three primary colors. Unlike the primaries you may have learned about mixing paint in art class, computer screen mix the three light primaries:
red, green, and blue. Our first color experiment will be to give our screen a background color. This is done with the code "background(r, g, b);" We put in a number between 0 and 255 for each of those three colors.
Copy the line below to give the screen a 100% blue background. (How would you change the code to make the background 100% green? Or red?)
function setup(){
createCanvas(500, 400); //sets the size for the window
background(0, 0, 255); // makes the background blue
triangle(500, 30, 450, 200, 300, 100);
rect(250, 200, 150, 100); // draws a rectangle
rect(150, 50, 25, 25);
rect(450, 100, 25, 300);
ellipse(250, 200, 200, 200); //draws an ellipse
ellipse(50, 250, 100, 200);
ellipse(350, 0, 300, 100);
triangle(100, 100, 200, 200, 0, 200); //draws a triangle
triangle(0, 0, 50, 0, 0, 50);
line(0, 0, 500, 400); //draws a line
line(250, 50, 250, 100);
line(300, 300, 500, 300);
}
7. We can also change the color of our shapes. The code for that is "fill(r, g, b);"
Try adding the code below to fill our first shape with red. What happens?
function setup(){
createCanvas(500, 400); //sets the size for the window
background(0, 0, 255); // makes the background blue
fill(255, 0, 0); //starts filling in shapes red
triangle(500, 30, 450, 200, 300, 100);
rect(250, 200, 150, 100); // draws a rectangle
rect(150, 50, 25, 25);
rect(450, 100, 25, 300);
ellipse(250, 200, 200, 200); //draws an ellipse
ellipse(50, 250, 100, 200);
ellipse(350, 0, 300, 100);
triangle(100, 100, 200, 200, 0, 200); //draws a triangle
triangle(0, 0, 50, 0, 0, 50);
line(0, 0, 500, 400); //draws a line
line(250, 50, 250, 100);
line(300, 300, 500, 300);
}
8. It made all of our shapes red! That's because the "fill(r, g, b);" command tells Processing to start drawing red, but we never tell it to draw with a different color.
Google has
a handy tool to get the RGB values for any color. (Focus on the 'RGB' values, rather than the HEX, HSV, etc. for now)
Try adding additional "fill(r,g,b);" code to your project, in the lines before various shapes, to add more color variety. Use the Color Selector to find more interesting colors. (For something extra, see what happens when you add a fourth number to the "fill" code. What does the fourth number control?)
function setup(){
createCanvas(500, 400); //sets the size for the window
background(0, 0, 255); // makes the background blue
fill(255, 0, 0); //starts filling in shapes red
triangle(500, 30, 450, 200, 300, 100);
fill(242, 259, 90);
rect(250, 200, 150, 100); // draws a rectangle
rect(150, 50, 25, 25);
rect(450, 100, 25, 300);
fill(90, 242, 221, 150);
ellipse(250, 200, 200, 200); //draws an ellipse
ellipse(50, 250, 100, 200);
fill(255, 0, 255);
ellipse(350, 0, 300, 100);
triangle(100, 100, 200, 200, 0, 200); //draws a triangle
triangle(0, 0, 50, 0, 0, 50);
line(0, 0, 500, 400); // draws a line
line(250, 50, 250, 100);
line(300, 300, 500, 300);
}
9. You can also change the color and thickness of the outlines of your shapes. "stroke(r, g, b);" lets you add color to the lines, and "strokeWeight(x);" lets you change the thickness - strokeWeight(1); is the normal line we already see, but larger numbers can make thicker lines.
"noStroke();" will draw your shapes without outlines.
"noFill();" will draw your shapes with only outlines.
Test out each of the above commands in your sketch. They work just like "fill(r,g,b);" - place the code before the shape you want to affect.
function setup(){
createCanvas(500, 400); //sets the size for the window
background(0, 0, 255); // makes the background blue
fill(255, 0, 0); //starts filling in shapes red
stroke(0, 255, 255);
triangle(500, 30, 450, 200, 300, 100);
fill(242, 259, 90);
rect(250, 200, 150, 100); // draws a rectangle
rect(150, 50, 25, 25);
noStroke();
rect(450, 100, 25, 300);
fill(90, 242, 221, 150);
stroke(0, 0, 0);
strokeWeight(5);
ellipse(250, 200, 200, 200); //draws an ellipse
ellipse(50, 250, 100, 200);
strokeWeight(1);
fill(255, 0, 255);
ellipse(350, 0, 300, 100);
triangle(100, 100, 200, 200, 0, 200); //draws a triangle
triangle(0, 0, 50, 0, 0, 50);
stroke(255, 255, 0);
strokeWeight(4);
line(0, 0, 500, 400); // draws a line
line(250, 50, 250, 100);
line(300, 300, 500, 300);
}
THAT'S IT! You now know all the code you need to do the first assignment, and create a character face with code. Look at the examples below, then look at the "Assignment" link for the resources and requirements.