Animating outside draw()

Programming Questions

jimmij

in Programming Questions • 3 years ago

Hello,

When I press mouse I want ellipse to animate for few seconds, then I want it to disappear from memory.

It shouldn't be inside main processing draw().

I tried a Thread, but ellipse has ugly flicker all the time:

Copy code

SimpleThread thread1;
void setup()
{
size(400,300);
}
void draw()
{
background(0);
float x=sin(frameCount*.01)*100+width/2;
float y=cos(frameCount*.01)*100+height/2;
ellipse(x,y,40,40);
}
void mousePressed()
{
thread1 = new SimpleThread(5,"cat");
thread1.start(new PVector(mouseX, mouseY));
}

Copy code

// Class taken from http://www.shiffman.net/teaching/a2z/threads/
public class SimpleThread extends Thread{
private boolean running; // Is the thread running? Yes or no?
private int wait; // How many milliseconds should we wait in between executions?
private String id; // Thread name
private float count; // counter
private PVector p;
public SimpleThread (int w, String s) {
wait = w;
running = false;
id = s;
count = 0;
p=new PVector(0,0);
}
// Overriding "start()"
public void start (PVector p_)
{
p=p_;
// Set running equal to true
running = true;
// Print messages
System.out.println("Starting thread (will execute every " + wait + " milliseconds.)");
// Do whatever start does in Thread, don't forget this!
super.start();
}
// We must implement run, this gets triggered by start()
public void run ()
{
while (running && count < 10) {
//System.out.println(id + ": " + count);
count+=.001;
// Ok, let's wait for however long we should wait
try {
sleep((long)(wait));
}
catch (Exception e) {
}
float x=sin(frameCount*.01)*100+p.x;
float y=cos(frameCount*.01)*100+p.y;
ellipse(x,y,10,10);
}
System.out.println(id + " thread is done!"); // The thread is done when we get to the end of run()
}
// Our method that quits the thread
public void quit()
{
System.out.println("Quitting.");
running = false; // Setting running to false ends the loop in run()
interrupt(); // in case the thread is waiting. . .
}
}

Any tips appreciated.

jimmi

Replies(8)

blindfish

Why should it not be inside draw()? This approach is going to cause you all kinds of problems (there are plenty of examples of similar questions in the forum), so you need a pretty good reason to justify causing yourself the hassle...

My guess for the cause of the flicker is that the timing of your separate thread doesn't correspond with the timing of the draw() loop, but the sketch window is only updated when draw completes. So if your thread doesn't coincide with draw refreshing the screen the ellipse won't get drawn, hence the flicker.

Why not let us know why you want to avoid putting the code into draw() - perhaps there's an alternative approach that will satisfy your needs.

jimmij

Re: Animating outside draw()

3 years ago

Thanks for the reply!

I am writing a game with lots of classes, and I want draw() to be as clean as possible.

Here I used thread animation for popping animations, like "game over", "you've earned a point", "2 lives left" and many more..

These animations are executed for few secs while playing the main game. The main game code is inside draw();

Is there a better way instead of putting animation into draw()?

blindfish

Re: Animating outside draw()

3 years ago

Sounds like you might appreciate registerDraw(). Make your class public, add registerDraw(this) to your class constructor and you can add a separate draw method within your class. There are some gotchas to this approach, but it definitely has many benefits too...

You can see it implemented here:
http://www.openprocessing.org/visuals/?visualID=6412

jimmij

Re: Re: Animating outside draw()

3 years ago

Thanks blindfish! registerDraw is awesome.

here is what makes sense to me:

Copy code

Circle c;
void setup() {
size(500,500);
c=new Circle();
}
void draw() {
background(0);
}
void mousePressed()
{
c.trigger(new PVector(mouseX, mouseY));
}
public class Circle {
PVector p;
boolean drawing;
int time=1;
int endTime=100;
Circle() {
registerDraw(this);
}
void draw()
{
if (drawing)
{
float x = sin(frameCount*.1)*25+p.x;
float y = p.y;
ellipse(x,y,20,20);
time++;
if (time>endTime)drawing=false;
}
}
void trigger(PVector p_)
{
drawing=true;
time=0;
p=p_;
}
}

Jo Wood

Re: Animating outside draw()

3 years ago

You can still write the drawing code to do all the little temporary things like flashing up 'game over' in other classes or methods. But the important thing is that all requests to do some drawing should be iniated by the main the draw() loop. That way you can guarantee that all drawing is done on the same thread and so avoid flickering problems.

A fairly standard way of doing this in processing would be something like this in your main sketch:

draw()

{

// Normal game drawing stuff here

otherObject1.draw(this);

otherObject2.draw(this);

}

And this in each of your other classes

OtherClass()

{

void draw(PApplet parent)

{

// Other object's drawing happens here.

}

Those other objects can keep track of whether they need to display anything at all (such as a 'game over'). If they don't need to draw anything, they can just return straight away with little cost to the speed of your main draw() loop. If they do need to draw, they have a handle to the main sketch (' parent') so can do standard Processing drawing operations. Those other objects can also keep track of their own time so that they can animate for a fixed number of draw cycles or seconds.

This way keeps your code uncluttered, is pretty object-oriented and ensures all drawing is done on the same thread.

noncom

Re: Animating outside draw()

3 years ago

I don't understand the initial problem. The way I usually do is this:

Copy code

ArrayList things = new ArrayList();
class Sample
{
...
void update()
{
mathAndLogicUpdate();
display();
}
void display()
{
//class object drawing routines here
}
...
}
//////////////////////////////////////////////////////DISTINCT FILE //////////////////////////////
void setup()
{
things.add(new Sample);
things.add(new Sample);
things.add(new Sample);
things.add(new Sample);
}
//////////////////////////////////////////////////////DISTINCT FILE //////////////////////////////
void draw()
{
updateWorld();
}
/////////////////////////////////////////DISTINCT FILE////////////////////////////////////////
void updateWorld()
{
for (int i = 0; i< things.size(); i++)
{
Sample thing = (Sample) things.get(i);
thing.update();
}
}

See, everything is neatly hierarchied and placed into separate files, so no mess. And all is clean.

Copy code

jimmij

Re: Re: Animating outside draw()

3 years ago

yeah, it's probably the same....

however I'll have to write less code with registerDraw :)

what about memory usage is it the same thing?

blindfish

Re: Animating outside draw()

3 years ago

registerDraw() avoids the need for additional 'class display method' calls from within the main draw loop, but essentially achieves the same result. One of the gotchas I hinted at before is that the order your objects are drawn is dependent on the order in which registerDraw() was called on them; with later calls to registerDraw() being drawn on top. If that's a problem you may want to use the 'class display method' approach and use conditions within the main draw loop to determine drawing order. Alternatively you could have a controller class that determines drawing order... Basically the best approach will depend on your needs.

I personally like the registerDraw approach; though perhaps take it to extremes e.g.: http://www.openprocessing.org/visuals/?visualID=6890

A couple more things to know about registerDraw. There's an associated unregisterDraw() method, that does what it says on the tin. Note that if you call this then the class's draw method is no longer called until registerDraw is called again - not always what you want.

One other gotcha I know about: unless it's now been fixed, it is possible to call registerDraw multiple times on the same object. This is bad! You land up running the object's draw() method multiple times in the same frame...

Top Reply