Learning Processing.js – some 2D Primitives and Coordinate systems

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.

<html>
<head>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<canvas id="2d" width="500" height="500" data-processing-sources="shapes_pjs.js"></canvas>
</body>
</html>

The coordinate system has 0,0 at the top left corner of the canvas and 500,500 is the bottom right corner.

Triangles:

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.

triangle (x1,y1,x2,y2,x3,y3)

For example to draw a triangle pointing up (near top left corner):

triangle(20,10,10,30,30,30);

Rectangles:

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,

default(rectMode(CORNER)):

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);

rectMode(CORNERS):

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:

rectMode(CORNERS);
rect(225,225,275,275);

rectMode(CENTER)

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:

rectMode(CENTER);
rect(250,250,50,50);

rectMode(RADIUS):

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

2 responses to “Learning Processing.js – some 2D Primitives and Coordinate systems

  1. Another tip, you can shorten your html to just this, the rest is unnecessary unless you’re really building a whole page:

  2. …this time with visible code:

    <script type=”text/javascript” src=”processing.js”></script>
    <canvas id=”2d” width=”500″ height=”500″ data-processing-sources=”shapes_pjs.js”></canvas>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s