Previous
Next

Primitives Shapes - point()

point()

The point function takes 2 arguments which determine its x and y position. Thus we have point(x,y).

The function draws a point with dimensions of 1 pixel.

Let's see an example of a code that uses the point() function to create points across the canvas:


let xPos;
let yPos;
function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('orange');
}
function draw () {
  for (xPos = 1; xPos<width; xPos = xPos +10) {
    for (yPos = 1; yPos<height; yPos = yPos+10) {
      point (xPos,yPos);
    }
  }
}

Result of the above code:

Exercise

  1. Open your Visual Studio editor and the p5yourName folder.
  2. Open the file ex812.js in your editor and save it as ex825.js
  3. Open the file ex812.html in your editor and save it as ex825.html
  4. In the ex825.html file, update the link to ex825.js  from ex812.js
  5. Go to the index.html file and create, under Module 8, a link to the ex825.html  file with the title "Primitives Shapes - point".

Modify the ex825.jsfile in order to create a diagonal line of points, going from the up left edge to the right down. You can see here an example.

Answer:

let xPos;
function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('orange');
}
function draw () {
  // use a for loop and create points with a distance of 30px
  for (xPos = 1; xPos<width; xPos = xPos +30) {
    // in order to create a diagonal line of points going from up left to down right
    // you will have to use the appropiate geometry to define the y coordinate
    point (xPos,5/8*xPos);
  }
}

Do a Git commit with the message "Primitives Shapes - point".

Previous
Next