The Coordinate System

x/y

In p5.js the coordinate system starts in the upper left corner. This is the point where x = 0 and y = 0. The x axis increases to the right. The y axis increases downwards. We can draw a dot using the command point(x,y) at that location.

Sketch

In this sketch we draw three points. A darkgrey one at x = 10 and y = 10, a gold one at 50, 50 (remember first parameter for the point function is x, the second y) and a blueviolet one at a random position on the canvas.

A point has no volume or area as we could call it. Therefore we can only change its color using the stroke method. The strokeWeight method can be used to change its size.

Tasks

• Use the button below to clone this sketch into your account (don't forget to save it)
• Explore the x/y space of your canvas
• Find out how to change the size of the canvas
• Draw more points then just three
• Create patterns
• Alter the strokeWeight and stroke color (find other named css colors here ☛ )
• Learn more about the random function. Can you pass more then one parameter?

Referenced Methods

See the p5.js reference to learn more about the used methods.

• point
• stroke
• strokeWeight
• random