(If you learn better from video tutorials, this same material is covered in the "Shapes" and "Color" segments of Dan Shiffman's excellent
Hello, Processing tutorial.)
1. We're going to start by setting the size of our Processing display. The code for this is, unsurprisingly, "size(width, height);"
size(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?):
size(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?):
size(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?):
size(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.:
size(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?)
size(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?
size(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.
Processing has a handy tool to get the RGB values for any color. Look in the menu under "Tools -> Color Selector," and it will bring up a
tool where you can choose a color, and the RGB values will be displayed. (Ignore the HSB values, for the moment.)
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?)
size(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.
size(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.