Cool Red Car

Variables & Functions

Shapes & X,Y Coordinates

Draw Coordinate Guides

// set (x,y) at the stage center
var x = width/2;    // width is predefined (default=400)
var y = height/2;   // height is predefined (default=400)

// draw guides
stroke(0, 0, 255);   // blue
line(0, y, width, y);  // horizontal line (x position changes)
line(x, 0, x, height);  // vertical line (y position changes)

Draw guides to help visualize the shape position
Type the code below into a [new program]

stroke() and line() are function calls to the Processing Library

Organize Code Into Functions

Code gets complex very quickly
Organize early and keep it organized
A function definition puts complex code and multiple commands into one simple command that can be re-used
Commands such as line, stroke, rect are predefined functions
A group of predefined functions is called a library (such as the Processing Library)

Wrap Code in a Function

// set (x,y) at the stage center
var x = width/2;    // width is predefined (default=400)
var y = height/2;   // height is predefined (default=400)


var drawGuides = function (x, y) {
    stroke(0, 0, 255);   // blue
    line(0, y, width, y);  // horizontal line (x position changes)
    line(x, 0, x, height);  // vertical line (y position changes)
};


drawGuides(x,y);            // center 
drawGuides(x/2, y/2);       // top left
drawGuides(x*3/2, y*3/2);   // bottom right

Note open and closing curly braces with semicon { ... };

Set variables x, y to be at the stage center

Define function drawGuides

Type drawing commands inside the function body

Call function drawGuides() with different arguments and notice the resulting grid

Draw Car Body and Wheels

Define function drawCar
before calling it

var drawGuides = function (x, y) { ... };
var drawCar = function (x, y) {
    // set draw modes
    noStroke();         // fill only, no shape outlines
    rectMode(RADIUS);
    ellipseMode(RADIUS);

    fill(255, 0, 0); // red
    ellipse(x, y, 100, 40); // car body
    
    fill(0, 0, 0); // black
    ellipse(x - 45, y + 30, 30, 30); // left tire
    ellipse(x + 45, y + 30, 30, 30); // right tire
    
    fill(255, 255, 0); // yellow
    ellipse(x - 45, y + 30, 20, 20); // left wheel
    ellipse(x + 45, y + 30, 20, 20); // right wheel
};
drawCar(x,y);     
drawGuides(x,y);   // must be drawn last

Do not define drawGuides() again. "..." means code previously shown is now hidden to save space

Call drawGuides() before calling drawCar() so that the guides are shown on top of the car. Try reversing the order.

Draw Car Top & Windows

var drawCar = function (x, y) {
    // set draw modes
    // draw car body
    // draw tires and wheels

    // draw car top and windows
    //   (x1,y1) is position of car top, relative to car body
    var x1 = x - 60; 
    var y1 = y - 30;
    
    fill(255, 0, 0);  // red car top
    quad(x1, y1, x1+120, y1, x1+100, y1-50, x1+20, y1-50);
    
    fill(0,255,255); // aqua windows
    quad(x1+10, y1, x1+50, y1, x1+50, y1-45, x1+25, y1-45);
    quad(x1+60, y1, x1+110, y1, x1+93, y1-45, x1+60, y1-45); 
};

These comments represent code previously shown

Change the argument values and see how the shape changes

Add to function drawCar commands to draw car top & windows
Define variables (x1, y1) for the position of the car top, relative to the (x,y) position of the car body
Draw a quadrilateral* with arguments relative to (x1,y1); [*quad]

Congratulations!

You have learned

To use variables to have meaningful names for values and for reuse
To organize your code into functions with meaningful names for readability & reuse
The Processing Library provides pre-built drawing functions for rectangles, ellipses, lines, coloring, and other capabilities
The drawing canvas has an (x,y) coordinate system, with
top left = (0,0) and bottom right = (width-1, height-1)

Please enter Cool Red Car for Exercise Name