单击鼠标调用函数绘制

Question

是否可以在点击 canvas 时在 p5 js sketch 中调用 function draw(){}？

我希望在单击 canvas 上的任意位置时调用 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

换一种方式来解决你在上面中的问题，你可以做这样的事情，当鼠标被点击一次时连续绘制，再次点击时停止。这就像绘图的切换开关一样工作：-

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

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

单击鼠标调用函数绘制

Call function draw on mouse click

p5.js