How to manipulate a P5.JS Sketch when hovering over HTML element

Question

I have a p5.js sketch behind the contents of my website, as a pattern. Currently, when you do mousePressed, the shapes get drawn again. I'd like to change this to happen when you hover over the links on the HTML page, not when you click on the sketch.

Is there a way to use jQuery(or something else) where when you hover over a link, the p5.js sketch changes? Not sure how to communicate between the two scripts, and wasn't sure what to reference

screenshot of the website. i want the p5.js sketch to change when i hover over the HTML links

let colors = ["#FAC6E5", // bright pink
              "#D1B6FF", //lavender
              "#8155A0", //bright purple
              "#FFC2B9", //coral
              "#C7D8DB", //pale robins egg
              "#BCBBDA", //pale purplish blue
              "#95A8CB", //cool blue
              "#FAC6E5", //brighter pink
              "#FFDFEF", //dusty rose
              "#DBC7D4" //lavender
];

let posX = 10;
let posY = 10;
let step = 100;
let i;



function setup() {
  let canvas = createCanvas(windowWidth, windowHeight);
  canvas.position(0, 0);
  canvas.class("canvas");
  frameRate(20);
  noLoop();
}

function draw() {
  //choose a random color from my colors array

  for (i = 0; i < 6; i++) {
    //set the fill to be a random number from the array
      let randX = random(0, width);
      let randY = random(0, height);
      let randCol = round(random([0], [colors.length - 1]));
      let chooseCol = colors[randCol];
      fill(color(chooseCol));
      blendMode(OVERLAY);
      console.log("randCol is " + randCol);
      console.log("randX is " + randX);
      console.log("randY is " + randY);
      noStroke();
      ellipse(randX, randY, 685,685);
     }
}

function mousePressed() {
  redraw();
}

}

This is working how I'd expect (it gets redrawn on mousepressed), but I'd like to interact with links that I have in my HTML. see screenshot for reference.

Answer 1

P5.js is "just" JavaScript, so you can mix regular JavaScript with a P5.js sketch.

Just as an example, let's say you have this P5.js sketch:

function setup(){
  createCanvas(500, 500);
}

function mousePressed(){
  drawRandomCircle();
}

function drawRandomCircle(){
  ellipse(random(width), random(height), 25, 25);
}

This sketch draws a random circle whenever you click the mouse.

But since all of the above code is "just" JavaScript, you can also call the drawRandomCircle() function from other JavaScript. For example you could add it as an onclick handler of a button in your HTML:

<button onclick="drawRandomCircle();">Click me</button>

Shameless self-promotion: here is a tutorial on P5.js and web development. Here is another guide on going beyond the P5.js canvas.

If I were you, I would try to work in smaller steps. Write some code that prints a hard-coded message to the console whenever you hover over your link first. Get that working before you worry about connecting it to your P5.js sketch. Good luck.