Question

我的网站内容后面有一个p5.js草图，作为一种模式。当前，当您执行mousePressed时，将再次绘制形状。我想将其更改为将鼠标悬停在HTML页面上的链接上，而不是单击草图时发生。

有没有一种使用jQuery（或其他方式）的方法，当您将鼠标悬停在链接上时，p5.js草图会发生变化吗？不确定如何在两个脚本之间进行通信，也不确定要引用什么

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();
}

}

这是我所期望的（在鼠标按下时会重画），但是我想与HTML中的链接进行交互。请参阅屏幕截图以供参考。

Answer 1

P5.js是“纯” JavaScript，因此您可以将常规JavaScript与P5.js草图混合使用。

仅作为示例，假设您有此P5.js草图：

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

function mousePressed(){
  drawRandomCircle();
}

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

只要您单击鼠标，此草图就会绘制一个随机圆。

但是，由于上述所有代码都是“纯” JavaScript，因此您还可以从其他JavaScript调用drawRandomCircle()函数。例如，您可以将其添加为HTML中按钮的onclick处理程序

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

无耻的自我宣传：here是有关P5.js和Web开发的教程。 Here是超越P5.js画布的另一指南。

如果我是你，我会尝试work in smaller steps。编写代码，以便每当您首先将鼠标悬停在链接上时，就会向控制台输出一条硬编码的消息。在担心将其连接到P5.js草图之前，请先进行工作。祝你好运。

将鼠标悬停在HTML元素上时如何操作P5.JS Sketch

1 个答案: