如何在 mousePressed 时仅更改一次颜色（停止循环）？

Question

我正在编写另一个练习教程，我的程序应该在您按住鼠标时更改一次眼睛颜色。但是当我尝试按住它时，它会不断循环随机颜色，而不是只改变一次。本质上，每次用户按下或按住鼠标时，我只想更改一次眼睛颜色。

var u;
var l;
var a;
var mods = [];
var x;
var y;
var count;
var r, g, b;

function setup() {
  createCanvas(windowWidth, windowHeight);
  u = 100;
  l = 40;
  var highCount = height/80;
  var wideCount = width/80;
  count = int(highCount * wideCount);

  var index = 0;
  for (var xc = 0; xc < wideCount; xc++) {
    for (var yc = 0; yc < highCount; yc++) {
      mods[index++] = new Module(int(xc)*u,int(yc)*u);
    }
   }
}

function draw() {
  //background black if mouse is pressed or held down
  if (mouseIsPressed) {
    background(0);
    r = random(255);
    g = random(255);
    b = random(255);
  //background white if mouse is not pressed or held down
  } else {
    background(255);
  }
  //drawing the eyeballs
  noStroke();
  translate(15, 15);
  for (var i = 0; i <= count; i++) {
    mods[i].update();
    mods[i].eyeball();
    mods[i].pupil();
  }
}

function Module(_x, _y) {
  this.x = _x;
  this.y = _y;
  this.a = 0;
}

Module.prototype.update = function() {
    this.a = atan2(mouseY-this.y, mouseX-this.x);
}

Module.prototype.eyeball = function() {
  push();
  translate(this.x, this.y);
  fill(255);
  ellipse(0, 0, l, l);
  pop();
}

//need to keep pupil and iris together for movement
Module.prototype.pupil = function() {
  push();
  translate(this.x, this.y);
  rotate(this.a);
  fill(r, g, b);
  ellipse(8, 0, l/2, l/2);
  fill(0);
  ellipse(8, 0, l/4, l/4);
  pop();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Answer 1

the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called

在您的代码中，它不断更改 r、g 和 b

的值

您宁愿需要使用 mousePressed 事件。

P.S。我在 setup() 中声明了初始随机颜色，这样它就不会抱怨：p5.js says: color() was expecting Number

var u;
var l;
var a;
var mods = [];
var x;
var y;
var count;
var r, g, b;

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  //initial color
  r = random(255);
  g = random(255);
  b = random(255);
  
  u = 100;
  l = 40;
  var highCount = height/80;
  var wideCount = width/80;
  count = int(highCount * wideCount);

  var index = 0;
  for (var xc = 0; xc < wideCount; xc++) {
    for (var yc = 0; yc < highCount; yc++) {
      mods[index++] = new Module(int(xc)*u,int(yc)*u);
    }
   }
}

function draw() {
  //background black if mouse is pressed or held down
  if (mouseIsPressed) {
    background(0);
    //r = random(255);
    //g = random(255);
    //b = random(255);
  //background white if mouse is not pressed or held down
  } else {
    background(255);
  }
  //drawing the eyeballs
  noStroke();
  translate(15, 15);
  for (var i = 0; i <= count; i++) {
    mods[i].update();
    mods[i].eyeball();
    mods[i].pupil();
  }
}

// HERE WE ARE
function mousePressed() {
  r = random(255);
  g = random(255);
  b = random(255);
}

function Module(_x, _y) {
  this.x = _x;
  this.y = _y;
  this.a = 0;
}

Module.prototype.update = function() {
    this.a = atan2(mouseY-this.y, mouseX-this.x);
}

Module.prototype.eyeball = function() {
  push();
  translate(this.x, this.y);
  fill(255);
  ellipse(0, 0, l, l);
  pop();
}

//need to keep pupil and iris together for movement
Module.prototype.pupil = function() {
  push();
  translate(this.x, this.y);
  rotate(this.a);
  fill(r, g, b);
  ellipse(8, 0, l/2, l/2);
  fill(0);
  ellipse(8, 0, l/4, l/4);
  pop();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

如何在 mousePressed 时仅更改一次颜色（停止循环）？

How do I change the color only once upon mousePressed (stop it from cycling)?

javascript

p5.js