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