var sqRotChange = 5;

var triRotChange = 5;

var cursorX;

var cursorY;

var cursorMove = false;

var release = false;

var pressed = false;

var rateLimiter = 0;

var releaseIter = 0;

​

function setup() {

  createCanvas(400, 450);

  angleMode(DEGREES);

  frameRate(30);

}

​

function draw() {

  background(0);

  stroke(255);

  fill(255);

  text("Click and drag the cursor left and right to change the pattern.", 40, 425, 360, 450);

  noFill();

  while (rot < 360 && rot >= 0) {

    translate(200, 200);

    rotate(rot);

    rect(-125, -125, 250, 250);

    rotate(-rot);

    translate(-200, -200);

    rot += sqRotChange;

  }

  rot = 0;

​

  if (triRotChange < 10) {

    while (rot < 360 && rot >= 0) {

      translate(200, 200);

      rotate(rot);

      triangle(0, -100, 86.6, 50, -86.6, 50);

      rotate(-rot);

      translate(-200, -200);

      rot += triRotChange;

    }

  } else {

    while (rot < 720 && rot >= 0) {

      translate(200, 200);

      rotate(rot);

      triangle(0, -100, 86.6, 50, -86.6, 50);

      rotate(-rot);

      translate(-200, -200);

      rot += triRotChange;

    }

  }

  rot = 0;

​

  customCursor();

}

​

function mouseDragged() {

  if (mouseX > 10 && mouseX < 390) {

    sqRotChange = Math.floor(mouseX / 5);

    if (sqRotChange === 0) {

      sqRotChange = 1;

    }

    triRotChange = 400 / Math.floor((400 - mouseX) / 5);

    if (triRotChange === 0) {

      triRotChange = 1;

    }

  }

  cursorX = mouseX;

  cursorY = mouseY;

  cursorMove = true;

  release = false;

}

​

function mouseReleased() {

  release = true;

  cursorX = mouseX;

  cursorY = mouseY;

}

​

function customCursor() {

  var particleNum = random(7, 10);

  /* add fading squares on release later

  const relSqSize = [];

  const relSqX = [];

  const relSqY = [];

  */

​

  if (cursorMove) {

    stroke(196, 253, 255, 150);

    translate(cursorX, cursorY);

    rotate(45);

    rect(-7.5, -7.5, 15, 15);

    rotate(-45);

    translate(-cursorX, -cursorY);

    for (let i = 0; i <= particleNum; i++) {

      noStroke();

      fill(random(0, 100), random(100, 255), random(100, 255), 100);

      var squareSize = random(8, 12);

      rect(

        pmouseX + random(-25, 18),

        pmouseY + random(-25, 18),

        squareSize,

        squareSize

      );

    }

    cursorMove = false;

  } else if (mouseIsPressed) {

    stroke(196, 253, 255, 150);

    translate(mouseX, mouseY);

    rotate(45);

    rect(-7.5, -7.5, 15, 15);

    rotate(-45);

    translate(-mouseX, -mouseY);

    for (let i = 0; i <= particleNum; i++) {

      noStroke();

      fill(random(0, 100), random(100, 255), random(100, 255), 100);

      var sqSize = random(8, 12);

      rect(mouseX + random(-25, 18), mouseY + random(-25, 18), sqSize, sqSize);

    }

  } else if (release && releaseIter < 5) {

    translate(cursorX, cursorY);

    rotate(45);

    stroke(196, 253, 255, 150 - releaseIter * 20);

    rect(

      -7.5 - releaseIter,

      -7.5 - releaseIter,

      15 + releaseIter * 1.5,

      15 + releaseIter * 1.5

    );

    rotate(-45);

    translate(-cursorX, -cursorY);

    releaseIter++;

  } else if (release && releaseIter === 5) {

    release = false;

    releaseIter = 0;

  }

}

​