COORDINATE SYSTEM AND SHAPES
In Processing, you determine the coordinates of every object you draw on the screen.
The coordinate system is in pixels. The origin (ie. starting point) is the top left corner, you should give your coordinates relative to that point. Another thing you should know is, each shape has a different reference point. For example, rect() has its top left corner as a reference point. For ellipse(), it is the center. These reference points can also be changed with methods like rectMode() and ellipseMode().
Each shape has its own syntax to be created.
You want to give either its coordinates or its sizes or both.
Here are some shapes you should be familiar with
(for all values given below, ‘x’ and ‘y’ means x and y coordinates
in pixels, ‘w’ and ‘h’ means width and height values also in pixels):
point() - Simple point, only needs a single coordinate. Usage:
point(x, y, z) - In case you are using 3 dimensions.
line() - For creating a line.
You can create a line with only a starting and ending point. Usage:
line(x1, y1, x2, y2)
line(x1, y1, z1, x2, y2, z2) - In case you are using 3 dimensions.
triangle() - For creating a triangle.
Usage: triangle(x1, y1, x2, y2, x3, y3)
quad() - For creating a quadrilateral.
Usage: quad(x1, y1, x2, y2, x3, y3, x4, y4)
rect() - For creating a rectangle.
The reference point is top left corner by default
(refer to the figure). Here is the usage:
rect(x, y, w, h)
rect(x, y, w, h, r) - ‘r’ mean the radius in pixels to make the corners rounded.
rect(x, y, w, h, tl, tr, br, bl) - Radius for top left, top right, bottom right, bottom left corners respectively. This is also in pixels.
ellipse() - For creating an ellipse shape.
This is also used to create a circle, same width and height values should be given.
The reference point for this shape is the center by default (refer to the figure). Here is the usage:
ellipse(x, y, w, h)
arc() - Draw an arc. Usage:
arc(x, y, w, h, start, stop) - ‘start’ and ‘stop’ is used to determine the angle to start and stop drawing the arc. Values are in radians. Constants such as “PI, HALF_PI, QUARTER_PI and TWO_PI” can be used.
arc(x, y, w, h, start, stop, mode) - ‘mode’ variable is to determine the rendering style of the arc (string). Available options are “OPEN, CHORD, PIE”. OPEN will leave the non-drawn parts borderless. CHORD will complete the non-drawn parts with a border. PIE will make your arc look like a pie chart.
Displaying texts on the screen is similar to displaying shapes. You want to determine a coordinate at which you want your text to be displayed. There is however more to handling texts. You will have more control over your texts after the properties & settings section, where you’ll learn how to apply settings and properties to objects.
For now, I will show the basics of displaying texts. There are many ways to do it, here are some basics:
text() - Display texts. Usage:
text(c, x, y) - ‘c’ means character, any alphanumeric character will be displayed.
text(c, x, y, z) - In case you are working with 3 dimensions.
text(str, x, y) - ‘str’ is the string to be displayed.
text(str, x, y, z) - In case you are working with 3 dimensions.
text(num, x, y) - ‘num’ is the numeric value to be displayed.
text(num, x, y, z) - In case you are working with 3 dimensions.
PROPERTIES + SETTINGS
Setting properties of objects means defining things like fill color, background color, border, border width, border color, alignment of the shapes, border styles, etc... When you set a property, you have to remember that the code will execute from top to bottom.
For example, if you set the “fill” property to red, all the objects drawn below that line will be filled with red until it gets overwritten by another fill property (not all properties will overwrite each other... “stroke” property doesn’t overwrite “fill” property, instead they work together).
fill() - Sets the fill color to objects. This setting is also used to color texts. For now, we only need to know the following usage:
fill(r, g, b) - Red, green and blue values as integer
fill(r, g, b, a) - Additional alpha value, max is 255
noFill() - Sets the fill color to transparent.
stroke() - Sets the stroke color to objects. Stroke property is applicable for lines and borders around objects. For now, we only need to know the following usage:
stroke(r, g, b) - Red, green and blue values as integer.
stroke(r, g, b, a) - Additional alpha value, max is 255
noStroke() - Removes the stroke.
strokeWeight() - Sets the width of the stroke. Usage:
strokeWeight(x) - x is an integer and represents the width of stroke in pixels.
background() - Sets the background color. For now, we only need to know the following usage:
background(r, g, b) - Red, green and blue values as integer.
background(r, g, b, a) - Additional alpha value, max is 255
KEYBOARD + MOUSE (EVENTS)
There are methods you can call for each event, and what you write inside will be executed once when the event occurs.
There are global variables such as mousePressed and keyPressed you can use in your draw block to take advantage of the loop.
There are however more options available for mousePressed and keyCode variables.
Available options for mousePressed are
LEFT, RIGHT and CENTER.
There are many more available for keyCode; UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC and DELETE.
How do you get the coordinates of the mouse?
To get the exact coordinates of the cursor, we can use mouseX and mouseY variables directly in the draw() block.
ANIMATION EXERCISE (TEAMS OF 3)
Create four balls (all different colors) that start from 4 corners of the screen and travel through the center at different speeds.
EXTRA CHALLENGE (extension activity for home):
Create four balls (all different colors) that start from 4 corners of the screen and travel through the center at different speeds. When you click and hold the mouse button, the balls should freeze. And when you let go of the mouse, the balls could go back to their initial position and keep moving.
If stuck, check out Processing Reference