​

function setup() {

  createCanvas(400, 400);

  slidieslide = createSlider(0, 200, 40);  // instantiating the slider

  background(255,255,150);  // drawing the background color

  DrawGrid(400, 20);  // calling my grid function

}

​

function draw() {

  if (mouseIsPressed) {  // if the mouse is pressed ...

    DrawCircle(mouseX, mouseY, slidieslide.value());

    /* I'm going to call the DrawCircle function with the

    parameters for the X and Y position of the mouse and 

    use the slider value for the radius of my circle */

  }

}  // end draw()

​

function DrawGrid(MAX,SPACING) {

  stroke(0);  // setting the color of my grid lines

  for (var g = 0; g < MAX; g = g + SPACING) {  // a for loop for my lines

    strokeWeight(1);

    line(g, 0, g, MAX);

    line(0, g, MAX, g);

  }

  // setting up the mid-point lines

  strokeWeight(3); 

  line(0, MAX/2, MAX, MAX/2);

  line(MAX/2, 0, MAX/2, MAX);

}  // end DrawGrid()

​

​

// this is my function for drawing my circle

function DrawCircle(cX, cY, rad) {  // my parameters here are for the position of the circle and the radius

  /* In order to "refresh" the circle every time I click my mouse, 

  I will redraw the background and the grid when the function DrawCircle() is called. In this case, when the mouse is pressed. See the draw() function.

  */

  background(255,255,150);  

  DrawGrid(400, 20);

  /* Here, I'm using the parameters to draw 2 circles. 

  The size of the larger blue one is set by the value of rad, 

  which in our example is set by the slider. 

  This happens when the DrawCircle() function is called in draw() */

  noFill();

  strokeWeight(2);

  stroke(255,0,0);

  ellipse(cX, cY, 3, 3);

  stroke(0, 0, 255);

  strokeWeight(1);

  ellipse(cX, cY, rad, rad);

  /* Also, I'm going to display the Cartesian coordinates of the circle when it is clicked. I've moved these lines into the DrawCircle function. 

  */

  noStroke();

  fill(0);

  textSize(16);

  text(coord(mouseX, mouseY), mouseX, mouseY);

  /* In the line above, I'm calling the function coord(). 

  It is in this function that the translation from the p5js grid to the Cartesian graph is being done. 

  */

}  // end DrawCircle()

​

function coord(gridx, gridy) {  

  /* This particular solution takes two parameters, one for x and y. 

  Yours may be using two separate functions or something completely different. */

  var graphx = map(gridx, 0, 400, -10, 10);  // using the map function for the x coordinate 

  var graphy = map(gridy, 0, 400, 10, -10);  // using the map function for the y coordinate

  var grXround = round(graphx);  // rounding both numbers

  var grYround = round(graphy);

  var displaytext = grXround + ", " + grYround  // concatenating the two numbers into a string variable

  return displaytext;  // returning the string variable

}

​