 |
Author |
Topic: Simple fading rect (Read 3541 times) |
|
rocketegg
|
Simple fading rect
« on: Feb 6th, 2005, 5:18pm » |
|
Hi all, I'm generally new at programming as a whole, and only understand the basics at the moment so please be gentle...
My question is this: I'm trying to make a rectangle move around the screen that leaves trails behind it that fade out as time passes. I've had a look at the Brownian Motion example since it seems to have the right code for this to happen, but I just don't get it. Could someone please break down the following (or let me know if it's the wrong thing for what I'm trying to achieve).
for(int i=1; i<num; i++) { //I get what this does...
float val = float(i)/num * 204.0 + 51; //...but not this
stroke(val); //I'd change this to fill(val) for what I'm trying
Thanks.
Chris
|
|
|
|
|
st33d
 
|
Re: Simple fading rect
« Reply #1 on: Feb 6th, 2005, 7:03pm » |
|
I've just done this in 3D (see need for speed - last entry). But I won't confuse you with that version. Basically you want a chain of rectangles in an array. The latest co-ords go into the head rectangle and are passed down the line. You can see this in the brownian motion example, but it's easier to understand in the Storing Input example in learning:
http://processing.org/learning/examples/storing_input.html
I've adapted the example to get your fading rects:
Code:
// Storing Input
// by REAS <http://www.groupc.net>
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
void setup()
{
size(200, 200);
noStroke();
ellipseMode(CENTER_DIAMETER);
}
void loop()
{
background(51);
// Reads throught the entire array
// and shifts the values to the left
for(int i=1; i<num; i++) {
mx[i-1] = mx[i];
my[i-1] = my[i];
}
// Add the new values to the end of the array
mx[num-1] = mouseX;
my[num-1] = mouseY;
for(int i=0; i<num; i++) {
//use the "i" on this for loop to change the color of your rect
fill((255.0/num)*i);
//remember to put .0 after 255 so it divides nicely
rect(mx[i], my[i], i/2, i/2);
}
}
|
|
This:
float val = float(i)/num * 204.0 + 51;
Just keeps our magical 255 (the colour of white) from fading darker than the background when its divided by the for loop iteration number. Note the background colour in the brownian motion sketch:
background(51);
Of course if you translate your co-ords to the center of your applet (width/2,height/2) you can even use this technique to make your rectangles shrink towards the center of your applet by dividing each co-ord in the chain by the for loop iteration number (I've played around with this a lot).
Hope that helps.
|
| « Last Edit: Feb 6th, 2005, 7:04pm by st33d » |
|
I could murder a pint.
|
|
|
rocketegg
|
Re: Simple fading rect
« Reply #2 on: Feb 6th, 2005, 7:26pm » |
|
Aaah. That does help, thanks a lot! Good luck with your tron particles.
|
|
|
|
|
Porkchop
|
Re: Simple fading rect
« Reply #3 on: Feb 6th, 2005, 11:06pm » |
|
Hey I'm faily new to programming too but I though I'd share my realyl simple fading function (Its a bit limited since it fades everything on the screen and works best on black background)
Code:
//Initial display setup
void setup() {
size(200,200);
background(0);
noStroke();
}
//Fade things away with transparent black
void Fade(int strenght){
fill(0,0,0,strenght);
rect(0,0,width,height);
}
//Runs the program
void loop(){
fill(255);
rect(mouseX,mouseY,20,20);
Fade(3);
}
|
|
Depending on what your doing it might give a good result.
I did this using a modified version of the fader so it would fade with different strenght depending on how long the flower would take to draw :
http://dfar_253.hybrid.concordia.ca/db/db_2.0/a/Bergeron,Maxime/db_2.10/
|
|
|
|
|
st33d
|
Re: Simple fading rect
« Reply #4 on: Feb 7th, 2005, 1:11am » |
|
You've raised a very good point.
Why don't we have an alpha value on the background function? It would achieve the same effect as a fade when updating.
|
I could murder a pint.
|
|
|
|
