<h3> P5 coordinate example </h3>
<p>
  <p>You could try changng the canvas size in the code to see what happens.</p>
<p>Why did what happened happen? What line of code helped the sketch respond to your changes (If your changes didnt work try different changes, eg createCanvas(a Million) wont happen)</p>
<a href = "https://p5js.org/reference/#/p5/stroke"> Heres an idea for further editing, if you like
  </p>
function setup() {
  createCanvas(400, 400);
  stroke(10);
   
  
}

function draw() {
  background(255);
 scales();
  text('X Value: '+str(mouseX), mouseX,mouseY);
  text('Y Value: '+str(mouseY), mouseX,mouseY + 20);
}

function scales(){
  for(x=0; x<canvas.width;x+=50){
    line(x,0, x, 10);
    print(x);
    text(str(x), x, 10);
  }
   for(y=0; y<canvas.height;y+=50){
    line(0,y, 10, y);
    print(y);
    text(str(y), 10, y);
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js