Click mouse to pause draw and start new animation

Click mouse to pause draw and start new animation

in General Discussion » Other • 1 year ago

Hey all,

I'm having difficulty even describing this problem. :)

I have a map, and points on the map moving about representing people in a story (bit like Marauders Map) but I would like that when I click an icon the bottom corner the animation pauses and the dots (representing the characters) stop whereever they are and then display the name of the character. Any ideas or suggestions?

Replies(2)

tfguy44

Re: Click mouse to pause draw and start new animation

1 year ago

Have a boolean variable that tracks the state of the icon.
When the icon is clicked, toggle the boolean's value.

When updating the positions of the people on the map, only do so if the value of the boolean is false.

Also draw the names of the people on the map next to them if the value of the boolean is true.

Here is an example sketch:

boolean moveOk = true;
class Bloop{
float x, y;
color c;
Bloop(){
x = random(width);
y = random(height);
c = color( random(255),random(255),random(255) );
}
void simulate(){
if( moveOk ){
x+=random(-2,2);
y+=random(-2,1);
x+=width;
y+=height;
x%=width;
y%=height;
}
}
void render(){
stroke(0);
fill(c);
ellipse( x, y, 10, 10 );
if( !moveOk ){
noFill();
stroke(255);
ellipse( x, y, 15, 15 );
}
}
}
Bloop[] bloops;
void setup(){
size(200,200);
smooth();
bloops = new Bloop[10];
for( int i = 0; i < bloops.length; i++){
bloops[i] = new Bloop();
}
}
void draw(){
background(0,64,0);
if( !moveOk ){
background(64,0,0);
}
for( int i = 0; i < bloops.length; i++){
bloops[i].simulate();
bloops[i].render();
}
}
void mousePressed(){
moveOk = !moveOk;
}

enfpvisua..

Re: Click mouse to pause draw and start new animation

1 year ago

Thanks tfGuy44, yeah that's definitely what I'm aiming for, but I still have the issue with the position of the ellipse when I press the mouse.

This is the code I'm working with at the moment. I know the bezier curve is a dirty mess in code wise, but you get the point.

PImage m;
int a = 30;
int b = 50;
int c = 80;
int d = 60;
int e = 100;
int f = 90;
int g = 200;
int h = 80;
boolean moveOK = true;
void setup() {
size(1400, 1000);
// m = loadImage("map.jpg");
}
void draw() {
background(0);
// image(m, 0, 0);
noStroke();
noFill();
if (moveOK){
bezier(a, b, c, d, e, f, g, h );
float t = (frameCount/2500.0)%1;
float x = bezierPoint(a, c, e, g, t);
float y = bezierPoint( b, d, f, h, t);
fill(0, 140, 0, 220);
ellipse(x, y, 20, 20);
}
}
void mousePressed(){
moveOK = !moveOK;
}

Top Reply

Response title

Attachments

New to this Portal?