Color

There's several ways of declaring a color, and functions that will take a color value:

background()
fill()
stroke()
color() - this is a special way of storing a color in a variable, more later...

Colors can be identified in one of two ways: as a gray value from 0 to 255 (2⁸), or as an color value with varying shades of each color value for Red, Green, and Blue (RGB), also measured in values from 0 to 255. (NOTE: There's other ways to control color with colorMode(), but never mind for now. The good news is, if you're used to hexadecimal colors for the web, you can use those too.)

size(200,100);
background(0);

size(200,100);
background(128);

size(200,100);
background(255);

size(200,100);
background(255, 0, 0);

size(200,100);
background(128, 0, 128);

size(200,100);
background(#FF8800);

Fills & Strokes

fill() and stroke() define the obvious fill and stroke of a shape. You can also turn oFF a stroke entirely with noStroke().

PROCESSING

Example 3-16: Control Fill and Stroke

size(400,100);
background(255);
stroke(255, 0, 0);
strokeWeight(10);
fill(0, 255, 0);
rect(20, 20, 60, 60);
ellipse(130, 50, 70, 70);
noStroke();
rect(20+80+80, 20, 60, 60);
ellipse(20+80+80+100, 50, 70, 70);

Good News: There's A Color Selector

If trying to figure out that dark orange is fill(128, 0, 0) is not something that you can easily remember, or that puce is fill(114, 47, 55), then be glad that Processing has a built-in color picker.

Setting Transparency

By adding a fourth parameter to a defined RGB color (or a second one to a grayscale color) you can control the transparency of a shape

PROCESSING

Example 3-18: Set Transparency

size(500,100);
background(255);
strokeWeight(20);
stroke(255, 0, 0);
line(0, 50, 500, 50);
stroke(0, 0, 128, 128);
fill(114, 47, 55, 128);
rect(220, 20, 60, 60);

Custom Shapes

There's more shapes that can't be drawn with point(), line(), rect(), quad(), ellipse(), and arc() than can be.

One way to draw a more complex shape (but one without any curves) is to use vertex() combined with beginShape() and endShape(). A vertex() is defined by an x and y coordinate in the Display Window

The best way to plot these out in on graph paper with a pencil. In our book they have an example, let's try it...

PROCESSING

Example 3-19: Draw an Arrow

size(480, 120);
beginShape();
fill(153, 176, 180);
vertex(180, 82);
vertex(207, 36);
vertex(214, 63);
vertex(407, 11);
vertex(412, 30);
vertex(219, 82);
vertex(226, 109);
endShape();

And, Processing has one more trick up its sleeve. If you don't create a shape with beginShape() and endShape() that is closed (that is, the last vertex isn't the same as the first vertex), then you can add a property to endShape(CLOSE) to close the shape.

PROCESSING

Example 3-20: Close the Gap

size(480, 120);
beginShape();
fill(153, 176, 180);
vertex(180, 82);
vertex(207, 36);
vertex(214, 63);
vertex(407, 11);
vertex(412, 30);
vertex(219, 82);
vertex(226, 109);
endShape(CLOSE);

Do you see the pattern of something(ALLCAPS)? The text in ALLCAPS is a called reserved word, or a property that's pre-defined by the Processing language. Things like:

• HALF_PI
• PI
• QUARTER_PI
• TAU (which is 2xPI)
• TWO_PI (which is TAU)
• SQUARE
• PROJECT
• ROUND
• BEVEL
• MITER
• ARROW
• CROSS
• HAND
• MOVE
• TEXT
• WAIT

PROCESSING

Example 3-21: Create Some Creatures

size(480, 120);
// Left Creature
fill(153, 176, 180);
beginShape();
vertex(50, 120);
vertex(100, 90);
vertex(110, 60);
vertex(80, 20);
vertex(210, 60);
vertex(160, 80);
vertex(200, 90);
vertex(140, 100);
vertex(130, 120);
endShape();
fill(0);
ellipse(155, 60, 8, 8);

// Right Creature
fill(176, 186, 163);
beginShape();
vertex(370, 120);
vertex(360, 90);
vertex(290, 80);
vertex(340, 70);
vertex(280, 50);
vertex(420, 10);
vertex(390, 50);
vertex(410, 90);
vertex(469, 120);
endShape();
fill(0);
ellipse(345, 50, 10, 10);

Arcs Again

I'm putting this here mostly to call attention to the converter and the diagram

size(200, 200);
arc(100, 100, 150, 150, 0, PI*1.5);

This is a weird one. It measures out in units of Pi, called radians, and the starting point on the ellipse is on the far left edge.
arc(x, y, w, h, start, stop)
origin location x, origin location y,
width, height
start, stop - in radians!

size(200, 200);
arc(100, 100, 150, 150, radians(0), radians(270));

Here's a version of arc() using the function radians(N) that will return a value of PI for a given value of N degrees.

Radians vs Degrees

size(200,200);
// Left Pacman
arc(100,100,150,150,radians(-90),radians(180));
// Right Pacman
arc(300,100,150,150,radians(45),  radians(315));

Comments

Comments are a really big deal. Get used to commenting your code as you go along. It will save you countless hours of time when you come back to your code months later and wonder "What the hell was I trying to do here?"

Comments basically remove the commented text from being processed by the PDE, but the remain part of the Sketch file so you can keep track of your intentions

Comments are really simple, just put a double forward slash // in front of the comment. Whatever comes after the // will not be processed by the PDE until it reaches the end of the line. So this is a valid comment:

// This is a valid comment
size(100, 100); // This is also a valid comment	
// This: size(100, 100); won't get processed because it's inside the comment
// Any comments ends at the end of the line
/* The textbook doesn't cover this yet, but using 
   a forward slash followed by an asterisk starts a block of text 
   that's a comment. Anything written in the sketch will be a
   comment until it's closed with an asterisk followed by
   a double forward slash */
point(50, 50); 

One of the best places to use the multiline comment /* -- */ is at the top of a sketch, and use it to describe what the sketch is supposed to do, who did it, and when it was created.

/* Sketch to create a new Display Window 
   that's 100 by 100 pixels.
   Created by James Khazar
   August 15, 2017
   Modified by James Khazar
   August 30, 2017 */

size(100, 100);

Another nice feature of the PDE is that you can comment and uncomment text by putting the cursor anywhere in a line and typing Control/Command-/

Very handy for de-bugging code

Robot 1: Draw

So here's the first robot from our book:

size(720, 480);
smooth();
strokeWeight(2);
background(0, 153, 204);     // Blue background
ellipseMode(RADIUS);

// Neck
stroke(255);                 // Set stroke to white
line(266, 257, 266, 162);    // Left
line(276, 257, 276, 162);    // Middle
line(286, 257, 286, 162);    // Right

// Antennae
line(276, 155, 246, 112);    // Small
line(276, 155, 306, 56);     // Tall
line(276, 155, 342, 170);    // Medium

// Body
noStroke();                  // Disable stroke
fill(255, 204, 0);           // Set fill to orange
ellipse(264, 377, 33, 33);   // Antigravity orb
fill(0);                     // Set fill to black
rect(219, 257, 90, 120);     // Main body
fill(255, 204, 0);           // Set fill to yellow
rect(219, 274, 90, 6);       // Gray stripe

// Head
fill(0);                     // Set fill to black
ellipse(276, 155, 45, 45);   // Head
fill(255);                   // Set fill to white
ellipse(288, 150, 14, 14);   // Large eye
fill(0);                     // Set fill to black
ellipse(288, 150, 3, 3);     // Pupil
fill(153, 204, 255);         // Set fill to light blue
ellipse(263, 148, 5, 5);     // Small eye 1
ellipse(296, 130, 4, 4);     // Small eye 2
ellipse(305, 162, 3, 3);     // Small eye 3

Previous Chapter

Next Chapter

• 02
• 03
• 04
• 05
• 06
• 07
• 08
• 09
• 10
• 11
• 12
• 13