通過鼠標點擊呼叫功能

Question

單擊畫布時，是否可以在p5 js草圖中調用function 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上面，你可以這樣做像這樣，當鼠標我連續畫點擊一次，再次點擊時停止。這工作就像一個撥動開關用於繪圖： -

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>