Multiple random ellipses - pulsing - Processing JS + HTML5 Canvas
in
Processing with Other Languages
•
2 years ago
Hi,
I'm currently working with this code. It creates a pulsing circle which randomly changes position when you 'click'.
What I want to do is have multiple circles which appear in random positions. So, essentially the same as I have now but multiple instances.
Any ideas?
Thanks!
I'm currently working with this code. It creates a pulsing circle which randomly changes position when you 'click'.
What I want to do is have multiple circles which appear in random positions. So, essentially the same as I have now but multiple instances.
Any ideas?
Thanks!
- <script type="application/processing">
// Global variables
float radius = 150.0;
int X, Y;
int nX, nY;
int delay = 1;
// Setup the Processing Canvas
void setup(){
size(1263, 673);
noStroke();
frameRate( 100 );
X = random(width/1);
Y = random(width/3);
nX = X;
nY = Y;
}
// Main draw loop
void draw(){
radius = radius - sin( frameCount / 60 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas white
background(255);
// Set fill-color to blue
noFill();
// Set stroke-color white
stroke(211, 50, 74);
strokeWeight(3);
// Draw circle
ellipse( X, Y, radius, radius );
}
// Set circle's next destination
void mousePressed(){
nX = random(width);
nY = random(height);
}
</script>
1