https://editor.p5js.org/bthedrop/sketches/84d8aBvTP

I wanted to recreate the triangle function and have the triangle move with the mouse. I will caveat this with the fact that I learned how to do this because I wanted to make something much more complicated and failed which taught me the skills to make this fairly simply.

Initialized variables, Setup, Draw

Initialize the variables at the top for color, and size.

let colorArray = [100, 100, 100]; // this did not work
let tColor; // this did not work
let triSize = 0;

Then we want to control the size of the triangle using the mouse position in relation to the center

  triSize = map(abs(mouseX - width / 2), 0, width, 40, 600);

1 instance of the class triangle is all we need wherein which I pass in two parameters into the class the triangle size and the color (the color i could not get to work)

  let tri = new Triangle(triSize, tColor);
  tri.iterate();

Triangle Class

there are two methods within this class:

  iterate() {
  display() { // draw the triangle using the three points

Iterate method

this method draws the baseline of the triangle and then depending on where the mouse is placed will either place the equilateral triangle facing up or down using an if statement.

if (mouseY > height / 2) {
        this.point3 = createVector(mouseX, mouseY - (this.d / 2) * sqrt(3));
      } else {
        this.point3 = createVector(mouseX, mouseY + (this.d / 2) * sqrt(3));
      }

all we have done so far however is define the points. We need to then call another method to actually draw the triangle. This is how we call the next method: