p5js 中 mousePressed 的问题

Question

我正在尝试构建一个简单的应用程序，当您 press/click 在屏幕上时播放歌曲。一旦你 press/click 就会产生连锁反应，同时也会产生视觉效果。

每次 press/click 时都应该出现涟漪，但在我的代码中（每次单击都会重新启动），您按下并出现涟漪，但不会一直循环。我知道答案就在我嘴边，但我想不通。此外，当我的草图加载时，会出现一个紫色框，我不确定为什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="resources\p5.js"></script>
    <script src="resources\p5.dom.js"></script>
    <script src="resources\p5.sound.js"></script>
    <script type="text/javascript" src="js\app.js"></script>
    <link rel="stylesheet" href="css\style.css">
    <title>Breathe</title>
</head>
<body>

</body>
</html>


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


let outerDiam = 0;
let cnv;
let drawThings;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() { 
  cnv = createCanvas(600, 600);
  centerCanvas();
  background(255, 0, 255);
} 

function windowResized() {
  centerCanvas();
}

function draw() { 
  if (drawThings) {
      background(255);
      for (let i = 0; i < 5; i++){
        let diam = outerDiam - 30 * i;    
        if (diam > 0){

          let fade = map(diam, 0, width, 0, 255);
            stroke(fade);
            noFill();
            ellipse(300, 300, diam);
    }


        outerDiam = outerDiam + 2;
    } 
    }
  }

function mousePressed() {
  drawThings = !drawThings;
}

Answer 1

我修复了你的代码，现在每次按下鼠标时都会播放动画：

"use strict";

let outerDiam = 0;
let cnv;
let drawThings;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() {
  cnv = createCanvas(600, 600);
  centerCanvas();
  background(255, 0, 255);
}

function windowResized() {
  centerCanvas();
}

function draw() {
  //if (drawThings) {
  background(255);
  for (let i = 0; i < 5; i++) {
    let diam = outerDiam - 30 * i;
    if (diam > 0) {

      let fade = map(diam, 0, width, 0, 255);
      stroke(fade);
      noFill();
      ellipse(300, 300, diam);
    }


    outerDiam = outerDiam + 2;
  }
  //}
}

function mousePressed() {
  drawThings = !drawThings;
  outerDiam = 0;
}

Answer 2

在您的 mousePressed 函数中，您从未真正重置动画，您只是切换播放。

function mousePressed() {
  drawThings = !drawThings;
}

当您单击时它再次开始播放时，动画会从停止处继续播放。

不要在单击时关闭绘图，而是将 outerDiam 重置为 0。所以这个：

function draw() { 
  if (drawThings) {
    [...]
  }

function mousePressed() {
  drawThings = !drawThings;
}

变成这样：

function draw() { 
  [...]
}

function mousePressed() {
  outerDiam = 0;
}

另外"purple box"是由于背景一开始设置为紫色而创建的：

function setup() { 
  [...]
  background(255, 0, 255); //red is 255, green is 0 and blue is 255 so it appears purple
}

当您开始使用 draw() 中的背景函数绘制时，这会被覆盖，但是在您提供的代码中，背景会一直保持这种颜色，直到您单击为止，因为 drawThings 没有定义为开始并且仅当您第一次点击时变为 true。

如果您按照我上面的建议进行更改，setup() 中的这个背景将立即被覆盖，因此您根本看不到紫色背景。（我建议删除设置函数中的第一个后台函数。）

p5js 中 mousePressed 的问题

Issues with mousePressed in p5js

javascript

processing

p5.js