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

draw()函数连续执行其块中包含的代码行，直到程序停止或调用noLoop（）

在您的代码中，它不断更改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上更改一次颜色（使其停止循环）？

1 个答案: