How to use processing.js for drawing on Web pages
Setting up processing.js
Placing a drawing on a Web page requires three components. One is the processing.js JavaScript library, which you should download and place somewhere on your Web site. The drawing itself is described in a stand-alone file, with a name ending in the .pde extension. Processing.js uses the HTML5 canvas element to render the drawing. You describe what you want to draw using processing.js functions. Then, you embed links to both the file and the library at the location on your Web page where you want the drawing to appear:
<script src="/libraries/processing.js"></script> <canvas data-processing-sources="BasicShapes.pde"></canvas>
Drawing with processing.js
To draw using processing.js functions, you basically designate the shape you want to draw (line, rectangle, or other pre-defined shape), then fill in the numbers (or "parameters") that specify the location and size proportions of the shape. For example, "ellipse(100, 120, 150, 190)" has a location of 100 on the x coordinate and 120 on the y coordinate -- 0, 0 being the upper left corner of the canvas, with increasing x values going to the right and increasing y values descending from that point.So, you can draw this...
...by coding this:
void draw(){
// A rectangle
rect(60, 270, 200, 100);
// Ellipses
ellipse(100, 120, 150, 190);
ellipse(290, 120, 150, 190);
// Lines
line(200, 100, 199, 250);
}
In addition to drawing shapes, processing.js can fill in colors as well. Colors are created by mixing different portions of red, green and blue. Each amount is designated by its own parameter(0, 0, 0) respectively, with 0 meaning none of that color and 255 meaning the maximum amount of that color:
(Examine the pde file).
The position of the function in the program code determines the layer at which the function resides. Each function is layered below all the functions that appear after it. In other words, you build up your canvas. For instance, if you set the background color function at the top of the code block, then it renders underneath what the other functions render. If it is on the bottom of the code, then it overlays all the other functions ahead of it.
Some various functions for color: "background" sets the background color. "Stroke" sets the color of the lines (and "NoStroke" renders the lines invisible). "Fill" fills in the designated color within a shape. Coloring functions should be set appear immediately prior to the specific shape you want to color.
Shapes, and groups of shapes, can be rotated. This involves temporarily resetting the canvas start point. Resetting is done with the "transform" function...
transform (50, 50);...which offsets the upper left side of the drawing canvas, in this case down 50 pixels and to the right 50 pixels. Resetting the canvas after you have made the transformative adjustment is simply done by placing the reset function ("resetMatrix()") below the shapes you want transformed.
Shapes, and groups of shapes, can be made larger or smaller as well, through the "scale" function. For instance, "scale(2, 3)" makes things two times as wide and three times as long. "rotate," as the name states, rotates the canvas around clockwise in the degrees specificed, i.e. "rotate(90)" rotates the canvas 90 degrees clockwise. Keep in mind, "rotate" rotates the entire canvas within its purview, not just the orientation of the objects themselves, a subtle difference that can be maddening at first.
Both "scale" and "rotate" can be apply to multiple objects simply by invoking them prior to the collection of objects you want scaled and/or rotated, and concluding the block with "resetMatrix()".
(Examine the pde file).
See also: Animating processing.js drawings.
