マウスクリックによるコール関数の描画

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であなたの質問に対処するために、あなたが何かを行うことができますこのように、マウスiもう一度クリックすると停止します。これは、描画のためのトグルスイッチのように動作します： -

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>