单击鼠标即可调用调用函数

Question

点击画布时，是否可以在p5 js草图中调用function draw(){}？

我希望在单击画布上的任何位置时调用draw函数下的所有内容，而不是之前。

function setup() {
 createCanvas(500, 500);
 frameRate(65);
  background('#ff0a0a'); 
 textSize(60);
text("ART", 370, 250);

};
function draw() {
  noFill();
  var red = random(100);
  var green = random(200);
  var blue =random(230);
  var h = random(height);

  stroke(red,green,blue);
  strokeWeight(8);
  rect(frameCount,h,300,20+(frameCount));
  
  ellipse(frameCount,h ,300,20+(frameCount));
  triangle(frameCount,h ,300,20+(frameCount));

};

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

Answer 1

这对我来说很好用：

function setup() {
  createCanvas(500, 500);
  frameRate(65);
  background('#ff0a0a'); 
  textSize(60);
  text("ART", 370, 250);
};

function mousePressed() {
  noFill();
  var red = random(100);
  var green = random(200);
  var blue =random(230);
  var h = random(height);

  stroke(red,green,blue);
  strokeWeight(8);
  rect(frameCount,h,300,20+(frameCount));
  
  ellipse(frameCount,h ,300,20+(frameCount));
  triangle(frameCount,h ,300,20+(frameCount));
};

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

Answer 2

只是提到另一种方法并在上面Kevin's answer中解决您的问题，您可以执行类似这样的操作，以便在单击鼠标时连续绘制并在再次单击鼠标时停止。这就像用于绘图的切换开关一样： -

＆＃13;

＆＃13;

var drawThings;

function setup() {
  createCanvas(500, 500);
  frameRate(65);
  background('#ff0a0a');
  textSize(60);
  text("ART", 370, 250);
}

function draw() {
  if (drawThings) {
    noFill();
    var red = random(100);
    var green = random(200);
    var blue = random(230);
    var h = random(height);

    stroke(red, green, blue);
    strokeWeight(8);
    rect(frameCount, h, 300, 20 + (frameCount));

    ellipse(frameCount, h, 300, 20 + (frameCount));
    triangle(frameCount, h, 300, 20 + (frameCount));
  }
}

function mouseClicked() {
  drawThings = !drawThings;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;