Anruf Funktion zeichnen auf Mausklick

Question

Ist es möglich, die function draw(){} in einer P5 js Skizze beim Klicken auf die Leinwand?

Ich möchte alles unter der Zeichenfunktion aufgerufen werden, wenn Sie irgendwo auf der Leinwand und nicht vorher klicken.

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

Dies funktioniert gut für mich:

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

nur eine andere Art zu erwähnen, und Ihre Frage in Kevin's answer oben zu adressieren, können Sie etwas tun So ziehen Sie kontinuierlich, wenn die Maus i s hat einmal geklickt und stoppt, wenn erneut geklickt wird. Dies würde für die Zeichnung wie ein Kippschalter arbeiten: -

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>