createCanvas(600, 600);

}

​

function draw() {

  background(200);

  let circleSize = 20

  strokeWeight(10);

  stroke(255);

  line(0,mouseY,width, mouseY);

  stroke(255);

  line(mouseX,0,mouseX,height);

  noCursor();

  noFill();

  stroke(255);

  if (mouseX > width)

    {

      quad(width,circleSize * 0.5,width - circleSize * 0.5,mouseY,width,height - circleSize * 0.5,circleSize * 0.5,mouseY);

    }

  else if (mouseX < 0)

    {

      quad(0,circleSize * 0.5,width - circleSize * 0.5,mouseY,0,height - circleSize * 0.5,circleSize * 0.5,mouseY);

    }

  else if (mouseY > height)

    {

      quad(mouseX,circleSize * 0.5,width - circleSize * 0.5,height,mouseX,height - circleSize * 0.5,circleSize * 0.5,height);

    }

  else if (mouseY < 0)

    {

      quad(mouseX,circleSize * 0.5,width - circleSize * 0.5,0,mouseX,height - circleSize * 0.5,circleSize * 0.5,0);

    }

  else

    {

      quad(mouseX,circleSize * 0.5,width - circleSize * 0.5,mouseY,mouseX,height - circleSize * 0.5,circleSize * 0.5,mouseY);

    }

​

​

  fill(255)

  stroke(255);

  ellipse(mouseX,mouseY,30,30);

​

  fill(mouseX / 600 * 255,0,0);

  noStroke();

  if (mouseX > width)

    {

      ellipse(width, circleSize * 0.5,circleSize,circleSize);

    }

  else if (mouseX < 0)

    {

      ellipse(0, circleSize * 0.5,circleSize,circleSize);

    }

  else

    {

      ellipse(mouseX,circleSize * 0.5,circleSize,circleSize);

    }

  fill(0,mouseY / 600 * 255,0);

  if (mouseY > height)

    {

      ellipse(width - circleSize * 0.5,height,circleSize,circleSize);

    }

  else if (mouseY < 0)

    {

      ellipse(width - circleSize * 0.5,0,circleSize,circleSize);

    }

  else

    {

      ellipse(width - circleSize * 0.5,mouseY,circleSize,circleSize);

    }

  fill(0,0,mouseX / 600 * 255);

  if (mouseX > width)

    {

      ellipse(width, height - circleSize * 0.5,circleSize,circleSize);

    }

  else if (mouseX < 0)

    {

      ellipse(0, height - circleSize * 0.5,circleSize,circleSize);

    }

  else

    {

      ellipse(mouseX,height - circleSize * 0.5,circleSize,circleSize);

    }

  fill(mouseY / 600 * 255);

  if (mouseY > height)

    {

      ellipse(circleSize * 0.5,height,circleSize,circleSize);

    }

  else if (mouseY < 0)

    {

      ellipse(circleSize * 0.5,0,circleSize,circleSize);

    }

  else

    {

      ellipse(circleSize * 0.5,mouseY,circleSize,circleSize);

    }

  textAlign(CENTER);

  fill(0);

  textSize(20);

  text("You are here! -->",mouseX - 100,mouseY + 5);

  if (mouseIsPressed)

    {

      let trackSize = random(10,30)

      ellipse(mouseX,mouseY,trackSize,trackSize);

    }

}

​

//In this sketch, I wish to make a curssor tracking system that draws a quadrilateral based on the position of the cursor. The tracking dots at the edge of the sketch changes color according to the position of the cursor.

//To accomplish this sketch, I mainly relied on the p5.js official reference and some information from Eloquent Javascript. Though I did watch the online tutorial, I mainly referred to the official guide during my coding.

//I am getting more familiar to p5.js compared to when I started. Yet I still have some difficulties with some certain codes like "mouseIsPressed".

//I would agree with Marijin that "computers are dumb, pedantic beasts" (p.1 Introduction) for I had the idea of making a simulation for a wallet but gave it up after attempting to code it. The code does not always work as I want it to. I have also been using a lot of console.log() to check where my codes go wrong. It is very helpul.

//resources used to accomplish this sketch:

//https://p5js.org/reference/#/p5/quad

//https://p5js.org/learn/program-flow.html