Color Me Pretty

Now that we know how to make circles, lines, and rectangles, we can start to make simple pictures. But, these will only be in black and white. Adding color is a very simple task that holds a world of possibility.

Let’s say you want to make this: Robot with watermark

Your code will have to look like this:Robot Start Code


But how do you add color and change the width of the lines?

To add a background color you use background(r,g,b);, but if you want to add color to a specific shape, you out fill(r,g,b); right before the shape(s) you want colored in. RGB stands for red, green, and blue. A mixture of these three colors makes any color you want. For just red, green, or blue, you would put 255 in that colors slot, because 255 is the highest concentration you can go. Think of these numbers as the amount you are putting into the mixture to create a certain color. If you are using Khan Academy, a color box should appear when this code the code is typed. This will allow you to pick the color you want without knowing the exact code.

To change the thickness of your border, use strokeWeight(thickness);. When you put this code in, everything under it will change to that thickness. If you want only a section of code to change, set the new value by putting a stroke weight in front of the first shape you want to change, and then changing the value again after the section you want to be changed, by putting in a stroke weight line with the thickness of one. If you want all the borders to disappear, put noStroke(); at the beginning of your code. To change the color of the borders use the code stroke(r,g,b); and it will change all the borders after it.

(When I say put code “in front” of something, I am saying to put it on the line before it.)

So, if you wanted to make the robot face shown at the top of the page, your code would look like this:Robot End Code


Leave a Reply

Your email address will not be published. Required fields are marked *