We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Page Index Toggle Pages: 1
Afterimages (Read 2467 times)
Afterimages
Oct 26th, 2005, 2:14am
 
I'm trying to think of a way to create the effect of the "afterimage" you see after you look into a bright light -- basically, I'm moving a point (I say point as in point of light, not vertex) along a path, and I want the trail to slowly fade out behind it, like an osciliscope scan or radar scan or something in that vein.

The "slow" way to do this would be to remember the last few frames' images, generate the current frame image, then add the previous frames with older frames having lower opacity.. but I suspect doing this calculation repeatedly would result in unacceptable delay (I want to do this at 30fps+).  

Does anyone have any thoughts?

Ryan
Re: Afterimages
Reply #1 - Oct 26th, 2005, 4:16am
 
you could repeatedly render the same object to screen and create an array to store "old" positions as the trail and decrement the colour or increase the alpha value. I will try to post some code tomorrow to illustrate what i mean.
Re: Afterimages
Reply #2 - Oct 26th, 2005, 5:46am
 
Don't worry about posting code; I do understand what you're saying.  If you have code to deal with decrementing the alpha value of a texture for each copy of the object w/o making a copy of the PImage and then doing math on each pixel, that would be useful though.. (or is it workably speedy to do it that way? Seems it would get memory-intensive..)

Ryan
Re: Afterimages
Reply #3 - Oct 26th, 2005, 10:31am
 
the easiest way (and maybe the fastest one):
instead of erasing the whole screen with
background(255) every frame, draw a semi transparent rect:
Code:
void draw(){
fill(255,64);
rect(0,0,width,height);

//draw your stuff
}

this makes older frames fade out slowly. example
doing something like background(grayvalue, alpha) doesn't work...

regards,
postpop
Re: Afterimages
Reply #4 - Oct 26th, 2005, 2:19pm
 
Ooh, sexy-as-hell.  Thanks for the link/advice. Smiley
Re: Afterimages
Reply #5 - Oct 26th, 2005, 5:10pm
 
the only trouble with rendering a transparent image on screen is that everything will blur. On my project SADI I used a structure that created an object for each character which would render it and and store/modify such information as the font, position, skew and alpha value. Unfortunately this was written directly in Java (and 1.5 to boot) so is unlikely to port well to processing.

The central idea is that there was an IF block that dealt with  adjusting the alpha value, working on time elapsed since initialized although you could do this by frame count as well.
Code:

//fade out function
public void updateFade(){
if(this.startFrame>this.minFullFrames){



this.alphaVal=1f-((float)(this.startFrame-this.minFullFrames)/((float)this.minFullFrames*(float)this.fadeOutSpeed));
}
//catch out of bounds
if(this.alphaVal<0){
this.fadeVal=0;//makes sure that fadeVal is min 0
} else if(this.alphaVal>1){
this.alphaVal=1;//limists to maximum of 1
}
}

this would then be called by the parent object so that:
Code:
//when drawing
int deadObjects=0;
for(i=0;i<array.length;i++){

array[i].updateFade;
if(array[i].alphaVal<=0){
deadObject++;
}
//remove the dead objects
drawnObjects newArray= new drawnObjects[array.length];
for(int i=deadObject;i<array.length;i++){
newArray[i-deadObject]=array[i];
}
array = newArray;
//draw objects
for(int i=0;i<renderedObjectsNumber;i++){
array[i].draw;
}


I hope this makes sense. I realise it's not as computationally effective as the other version but allows the rest of the screen not to be blurred.
Re: Afterimages
Reply #6 - Oct 26th, 2005, 5:43pm
 
To avoid GUI elements - or what have you - to get blurred, you could draw a non- or different-alpha rect over these areas and redraw the GUI.
Which won't work if you want differential blurring for moving and overlapping objects...
Re: Afterimages
Reply #7 - Oct 30th, 2005, 1:53am
 
I'm trying to get postpop's suggestion working in OpenGL mode.  Here's draw  my code:

import processing.core.*;
import processing.opengl.*;
import damkjer.ocd.*;

public class MBlurTest extends PApplet {

//time management stuff
private long tO;//time at last frame
private long tN;//time at this frame
private long tT;//total time since start
private long dt;//delta time (new time - old time)

//camera stuff
private Camera myCamera;

//trig object
private FastTrig ft = new FastTrig(720);

public void setup() {
size(800,600,OPENGL);
framerate(30);
noStroke();

//time management initialization stuff
tO = System.currentTimeMillis();
tT = 0;

//myCamera = new Camera(this,0,0,-300);
myCamera = new Camera(this,0,0,-600);
myCamera.feed();
background(0);
}

public void draw() {
updateTime();
lights();
pushMatrix();
fill(0,0,255,255);
float x = (float)(100 * ft.sine(tT/40));
float y = (float)(100 * ft.cosine(tT/40));
translate(x,y,(float)0);
sphere(15);
popMatrix();

/*
fill(255,0,0);
beginShape(QUADS);
vertex(-50,-50,-295);
vertex(50,-50,-295);
vertex(-50,-50,-295);
vertex(-50,50,-295);
endShape();*/


pushMatrix();
fill(255,0,0,8);
translate(0,0,-290);
box(100);
popMatrix();


}

private void updateTime(){
tN = System.currentTimeMillis();
dt = (tN - tO);
tO = tN;
tT += dt;
}
}

FastTrig is a utility class I wrote that just calculates sine, cosine, and tan to a given resolution (720 ticks in a circle, in this example) and stores it in an array for faster trig calculations.

What happens is that, if you comment out the line that draws the transparent box in the foreground, the sphere moves around in a circle, tracing out a path (but not fading, obviously).  If you leave the box(100); line in, the sphere is drawn in its' initial position and then the box is drawn over top of it; the box slowly becomes more opaque and obscures the sphere, but you don't see the sphere's motion beyond that first point.

I tried the rect(0,0,width,height) solution from the example you posted, but that didn't work for me either.. thoughts?
Re: Afterimages
Reply #8 - Oct 30th, 2005, 11:14am
 
Hi Afterscape,

Concerning your example: Without adding a background(0) at the beginning of draw() my screen stays black and nothing is drawn. That means i always have to clean the screen, which makes my strategy obsolete...

Which version of processing do you use (I'm on 0093)? Might be a prob with my graphics card/opengl though. Or specific to the way OPENGL is implemented in p5.

Nevertheless, i think the box is considered to create the afterimages-like effect on the orbiting sphere. Therefor it should have the same fill color as the background, i.e. 0 in your case.

postpop
Re: Afterimages
Reply #9 - Oct 30th, 2005, 2:25pm
 
In that code, I'd given the box a non-black color so that I could see where it was being drawn. The behavior is the same whether it's black or some other color.

The behavior is also the same in P3D and OpenGL.  I will try with a white background and see if that makes a difference, althoough in the application I'm eventually intending, I need a black bg.

Cheers,
Ryan
Re: Afterimages
Reply #10 - Oct 30th, 2005, 4:45pm
 
Just searched around in the forum and found this post. I think that applies the same solution to your problem in OPENGL...
Re: Afterimages
Reply #11 - Oct 30th, 2005, 10:15pm
 
Hmm, it's still behaving oddly.

I think I may take the code from the example that was posted earlier, strip out the bits related to drawing the 3d network, and see if I can't work forward from there..

Thank you very much for your help!

Ryan
Re: Afterimages
Reply #12 - Oct 31st, 2005, 11:35am
 
Hi again,

this is the solution proposed by depth applied to a stripped-down version of your example:

Code:

import processing.opengl.*;
import net.java.games.jogl.*;
GL gl;

void setup() {
size(800,600,OPENGL);
gl = ((PGraphicsGL)g).gl;
noStroke();
background(0);
}

void draw() {
gl.glClear(GL.GL_DEPTH_BUFFER_BIT);
fill(0,2);
rect(0,0,width,height);
lights();
pushMatrix();
fill(0,0,255,255);
float x = (float)(100 * sin(millis()/400.0));
float y = (float)(100 * cos(millis()/400.0));
translate(400+x,300+y,0);
sphere(15);
popMatrix();
}



it works for me...
Re: Afterimages
Reply #13 - Oct 31st, 2005, 1:16pm
 
Edited:
I'll bet it has something to do with the fact that I was using OCD


It works for me too. This is quite strange -- the only significant difference I can see between your code and my most recent attempt is using the JOGL object to clear the depth buffer, rather than the PGraphics3

Anyhow, thank you so much for spending what looks like a substantial chunk of time saving my rear. Wink  If you're ever in Ithaca, NY, I seriously owe you a drink or three!

Cheers,
Ryan
Page Index Toggle Pages: 1