This is the third post about learning Processing.js. It will look at the the 2D coordinate system and some basic 2D primitives. If you want more basic info please check out my earlier post.
The HTML code is not much different than what it was. I only made the canvas bigger to have more room to play with.
The coordinate system has 0,0 at the top left corner of the canvas and 500,500 is the bottom right corner.
The triangle function takes 6 numbers (either floating point or integer) as arguments. The first 2 numbers are the x,y coordinates of the first point, the second is the x,y coordinate of the second point, the third are the x,y coordinate of the third point.
For example to draw a triangle pointing up (near top left corner):
A rectangle is 4 sided shape with all 4 corners at 90 degrees.
To draw a rectangle the rect() function is used. The rect() function takes 4 numeric arguments however depending on the rectmode() setting the way these 4 arguments work could be different. recmode() can take one of 4 values as arguments: CORNER, CORNERS, CENTER, RADIUS,
If you do not call recmode() the default setting is CORNER. This means that the first 2 arguments is the XY coordinate of the top left corner and the last two arguments are the width and height. To draw a 50X50 sqaure centered into our canvas using recmode CORNER:
rectMode(CORNER); //you don't have to put this if you had not changed it rect(225,225,50,50);
CORNERS uses the 4 arguments of rect() to specify the top left and bottom right corners of the rectangle. To draw a square 50X50 in middle of page using CORNERS recmode:
This rectMode is similar to CORNER in that the first two values represent position and last two represent size. However, the coordinate represents the centre of the rectangle as opposed to the top corner. The following draws a 50X50 rectangle in the middle of our canvas using the CENTER recmode:
This rectMode is similar to CENTER. The only difference is that the width and height represents half the width/height of the full rectangle. The following code will draw a 50X50 rectangle in the middle of our canvas:rectMode(RADIUS); rect(250,250,25,25);Advertisements