Versions Compared

Version Old Version 2 New Version 3
Changes made by

paulina.zybinska

paulina.zybinska

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


p5.js uses a Cartesian coordinate system, where the zero point is in the upper left corner. The X axis is from left to right and the Y axis is from top to bottom. While this might seem odd, it comes from the tradition that bitmaps were always read in that order. In computer graphics the cartesian coordinate system is almost always used.

...

Frequently, local and global coordinate systems will be used. The global coordinate system is the original coordinate system, in p5.js this is the one fixed to the upper left corner. If the original coordinate system is transformed, then the result is local coordinate system (in reference to the global). push() and pop() store information related to the current transformation state and style settings.

With an example program, this should be easier to understand:

...

Create a new program where a simple car follows the mouse on the screen from left to right. The car should be drawn from the side, and include wheels that rotate. You may use the example code to get started.


Code Block
languagejava
var rotation;

function setup()
{
  createCanvas(900, 400);      // window size
  stroke(0);
  strokeWidth(2);
}
 
function draw()
{
  rotation++rotate(mouseX);
}
 
function drawCar(x,  y) {
  fill(100);

  beginShape();
  vertex(0, 0);
  vertex(5, -50);
  vertex(50, -50);
  vertex(70, -80);
  vertex(150, -80);
  vertex(190, -50);
  vertex(265, -45);
  vertex(270, 0);
  vertex(0, 0);
  endShape();

  drawWheel(60, 0);
  drawWheel(210, 0);
}
 
function drawWheel(x, y) {
  let radius = 25;
  fill(150);
  stroke(0);
  strokeWeight(7);
  ellipse(0, 0, radius*2, radius*2);
  strokeWeight(4);
  line(0-radius, 0, 0+radius, 0);
  line (0, 0-radius, 0, 0+radius);
  noStroke();
}

...

Code Block
languagejs
titleSolution to exercise
linenumberstrue
collapsetrue
var rotation;
var xScale = 1;

function setup()
{
  createCanvas(900, 400);
}

function draw() {
  background(255);
  
  var mouseMovement = mouseX - pmouseX; //pmousex gives us our mouse x value from the last frame. Subtracting from the current position give us the distance moved per frame
  if (mouseMovement<0) { // if the movement is negative, then we flip everthing backwards with a negative xcale
    xScale = -1;
  }
  if (mouseMovement>0) { // if the movement is positive, then our xscale is positive
    xScale = 1;
  }
  
 
rotation
+= abs(mouseMovement);   drawCar(mouseX, height/2);
 

  
}

function drawCar(x, y) {
  
  push();
      translate(x, y);
      scale(xScale, 1);
      fill(100);
      beginShape();
      vertex(0, 0);
      vertex(5, -50);
      vertex(50, -50);
      vertex(70, -80);
      vertex(150, -80);
      vertex(190, -50);
      vertex(265, -45);
      vertex(270, 0);
      vertex(0, 0);
      endShape();
      drawWheel(60, 0);
      drawWheel(210, 0);
  pop();
}

function drawWheel(x,y) {
  let radius = 25;
  fill(150);
  stroke(0);
  
  push();
  translate(x, y);
  rotate(radians(mouseX));
  
  strokeWeight(7);
  ellipse(0, 0, radius*2, radius*2);
  strokeWeight(4);
  line(0-radius, 0, 0+radius, 0);
  line (0, 0-radius, 0, 0+radius);
  noStroke();
  pop();
  
}

...