Ok, so I have this piece of code:
var a = 0;
var left = random(width);
var right = left +50;
var pos = left;
var isLeft = true;
var draw= function() {
background(255, 0, 0);
fill(255, 0, 0);
strokeWeight(2);
stroke(255, 255, 255);
ellipse(pos,400-a,10,10);
a=a+0.5;
if (isLeft === true) {
pos +=0.5;
}
if (pos === right) {
isLeft = false;
}
if (isLeft === false) {
pos -=0.5;
}
if (pos === left) {
isLeft = true;
}
};
Basically all it does is create a bubble that floats upwards while moving left and right just a little bit. My idea is to make it so that this only happens/starts when I click the mouse. But I don't seem to know how. I am still learning how to code. Anyone can help me produce the desired effect.
Thanks you and sorry for my bad english.
If your function is called
draw
and your button's ID isdraw-start
, then add an event listener to the button which calls the function.However, if you want to start the animation if the click happens on the canvas in which you are drawing, and canvas ID is
draw-canvas
then,