Hover effect triangle

p5.js Libraries
3

hey @mnse,
sorry that was probaply not clear enough. The first code was just a test to figure out how the library works. The second one is a snippet of my code where I want so have the collision in it. So when my mouse is over the trinagle it should grow. This is the part which works in the first part, but when I put it into my project, the hovering does not work. Here the hole project:

let firstColor = '#A1C6BE';
let secondColor = '#1F299C';
let thirdColor = '#FAB73D';
let colorParam;
let drawColor;

let myf;
let myr;

var hit = false;

function setup() {
  // read url
  let queryString = new URLSearchParams(window.location.search);
  // set variable to read value
  colorParam = queryString.get("color");

  // check for values
  if (colorParam == "blue") {
    drawColor = firstColor;
  }

  if (colorParam == "dark-blue") {
    drawColor = secondColor;
  }

  if (colorParam == "yellow") {
    drawColor = thirdColor;
  }
  var cnv = createCanvas(windowWidth, windowHeight);
  cnv.style('display', 'block');
  stroke(255);

  myf = {
    x: width / 2,
    y: 500,
    eSize: 670,
  };
  df();

  myr = {
    x: width - 1150,
    y: 500,
    eSize: 670,
  };
  dr();

  myt = {
    x1: 800,
    y1: 830,
    x2: 1150,
    y2: 165,
    x3: 1550,
    y3: 830
  };
  dt();
}


function dr() {
  push();
  fill(drawColor);
  rectMode(CENTER);
  square(myr.x, myr.y, myr.eSize);
  pop();
}

function df() {
  push();
  fill(drawColor);
  ellipse(myf.x, myf.y, myf.eSize);
  pop();
}

function dt() {
  push();
  fill(drawColor);
  triangle(myt.x1, myt.y1, myt.x2, myt.y2, myt.x3, myt.y3);
  pop();
}

function draw() {
  background(255);
  hit = collidePointTriangle(mouseX, mouseY, myt.x1, myt.y1, myt.x2, myt.y2, myt.x3, myt.y3)

  // Test if the cursor is over for hover effect
  if (dist(mouseX, mouseY, myf.x, myf.y) < 335) {
    myf.eSize = 620;

  } else {
    myf.eSize = 670;
  }
  if (dist(mouseX, mouseY, myr.x, myr.y) < 335) {
    myr.eSize = 620;
  } else {
    myr.eSize = 670;
  }
  if (hit) {
    print('colliding?', hit);
    triangle(myt.x1 + 60, myt.y1 + 60, myt.x2 + 40, myt.y2, myt.x3, myt.y3);
  }
  dt();
  dr();
  df();
}

function mousePressed() {
  if (dist(mouseX, mouseY, myf.x, myf.y) < 300 || dist(mouseX, mouseY, myr.x, myr.y) < 300 || hit) {
    // use parameter for next url
    location.replace('../mouse/clickGame.html?color=' + colorParam + '');
  }
}