fade out problem - Processing Forum

Loading...

Processing Forum

Programming Questions

Per_

fade out problem

in Programming Questions • 4 months ago

Hi!

I want to create a drawing patch where the lines from the tale fades away partly. so if im drawing with ellipses I want the most recent drawn ellipses to be in alpha 0 and then slowly fade away but not completely. so you can se whats have been drawn. so I want the drawing to stay in alpha say 180

in the patch below the whole tale fades and not the individual ellipses

so:
most recent drawn ellipses start in alpha 0 and fade against 180 while the new ellipses does the same procedure.

heres my example code: (tried to do this with PGraphics to create a second layer but without success)
any tips?

int a = 0;
PGraphics pg;
void setup() {
size(400, 400);
smooth();
pg = createGraphics (400, 400);
}
void draw() {
pg.beginDraw(); // startar renderingen
pg.fill(0, 255, 0);
pg.stroke(255, 0, 0);
pg.ellipse(mouseX, mouseY, 10, 10);
pg.endDraw(); // avslutar renderingen
image(pg, 10, 10);
a=a+1;
noStroke();
fill(255, a);
rect(0, 0, 400, 400);
// restart
if (a == 180) {
a = 0;
}
println(a);
}

1

Replies(20)

v.k.

v.k.

Re: fade out problem

4 months ago

maybe this? Well not exactly, but a path :)

ArrayList<PVector> pos = new ArrayList<PVector>();
void setup() {
size(400, 400);
smooth();
}
void draw() {
background(255);
for (int i = 0; i < pos.size(); i++) {
float a = map (i, 0, pos.size(), 10, 255);
fill(0, 255, 0, a);
stroke(255, 0, 0, a);
ellipse(pos.get(i).x, pos.get(i).y, 10, 10);
}
}
void mouseDragged(){
pos.add(new PVector (mouseX, mouseY));
}

Alex Pilkevych

Alex Pilk..

Re: fade out problem

4 months ago

Daniel Shiffman has an example about this:

http://www.learningprocessing.com/examples/chapter-9/example-9-8/

Per_

Re: fade out problem

4 months ago

not exactly what i want though daniel shiffman. in his example the dots dissapears totally after a certain times in draw. I want the dots to stay but to fade out (but not totally)

v.k. :

thanks for the answer but it doesnt work 100% as Im trying to achieve. it to works to begin with but the longer the tail the slower the fade.

I want something like this:

newest ellips: 255 alpha
2nd newest ellipse: 245 alpha
3rd newest: 235 alpha
4th: 225 alpha
5th: 215 alpha
6th: 205 alpha
7th: 195 alpha
8th: 185 alpha
9th: 175 alpha (and stay there)
10th: 175 alpha
11th: 175 alpha
12th: 175 alpha

and so on ...

and so on until it reaches maybe alpha 180 where it stays. so it doesnt go below 180 or something like that.
guess I can use constrain for this if I only get the tail correct?

v.k.

v.k.

Re: fade out problem

4 months ago

Yep here:

ArrayList<PVector> pos = new ArrayList<PVector>();
void setup() {
size(400, 400);
smooth();
}
void draw() {
background(255, 255,0);
for (int i = 0; i < pos.size() ; i++) {
// adjust minimal alpha here (now in 100)
float a = constrain(255-i, 100, 255);
fill(0, 255, 0, a);
stroke(255, 0, 0, a);
ellipse(pos.get(i).x, pos.get(i).y, 10, 10);
}
}
void mouseDragged(){
// add new ellipses to begining of ArrayList (0)
pos.add(0, new PVector (mouseX, mouseY));
}

try this in line 12 also :)

float a = constrain(255-i*5, 20, 255);

Per_

Re: fade out problem

4 months ago

thanks

float a = constrain(255-i*5, 20, 255);

did the trick!!!

Per_

Re: fade out problem

4 months ago

thanks

float a = constrain(255-i*5, 20, 255);

did the trick!!!

v.k.

v.k.

Re: fade out problem

4 months ago

That's cause one is a very little decrement in alpha to be noticed, so we decrement faster and visually gets better :) You may tweak the '5' to any other number.

Per_

Re: fade out problem

4 months ago

another way accomplishing the same thing (this one is based on your first example:

ArrayList<PVector> pos = new ArrayList<PVector>();
float size_front;
float size_back;
void setup() {
size(400, 400);
smooth();
}
void draw() {
background(255, 255, 0);
for (int i = 0; i < pos.size(); i++) {
float a = map (i, size_back, size_front, 100, 255);
float alpha = constrain(a, 20, 255);
fill(0, 255, 0, alpha);
stroke(255, 0, 0, alpha);
ellipse(pos.get(i).x, pos.get(i).y, 10, 10);
println("alpha: " + alpha);
}
}
void mouseDragged() {
pos.add(new PVector (mouseX, mouseY));
size_front = pos.size();
size_back = size_front - 20;
}

v.k.

v.k.

Re: fade out problem

4 months ago

That's it :) There are a million of ways to prepare Neston... That's an old commercial in Brasil that stuck...

GoToLoop

GoToLoop

Re: fade out problem

4 months ago

Brazilian too?

GoToLoop

GoToLoop

Re: fade out problem

4 months ago

Since every1 posted a version... Here's the same w/ some tweaks:

// http://forum.processing.org/topic/fade-out-problem

import java.util.List;

final static List<PVector> pos = new ArrayList();

final static short  DIM = 25, FPS = 50;
final static color  INK = 0x00FF00, BORDER = 0xFF0000, BG = #FFFF00;
final static String GFX = P2D; // or JAVA2D

void setup() {
  size(600, 600, GFX);
  smooth();
  noLoop();
  frameRate(FPS);

  mouseX = mouseY = -width;
}

void draw() {
  background(BG);

  pos.add( new PVector(mouseX, mouseY) );

  final int sizeFront = pos.size();
  final int sizeBack  = sizeFront - DIM;

  int i = sizeFront;

  while (i-- != 0) {
    final PVector p = pos.get(i);

    final int alphaness  = (int) map(i, sizeBack, sizeFront, 100, 255);
    final int opaqueness = constrain(alphaness, 20, 255) << 030;

    fill(INK | opaqueness);
    stroke(BORDER | opaqueness);

    ellipse(p.x, p.y, DIM, DIM);
  }
}

void mouseDragged() {
  redraw();
}

Per_

Re: fade out problem

4 months ago

say I want to have a very colorfull line and want to change the color randomly.

as it is right now If Im changing the fill color randomly Im changing the whole line. how do you paint with random colors with the fade out without changing the fill on the whole row, just the last one?

ArrayList<PVector> pos = new ArrayList<PVector>();
float size_front;
float size_back;
void setup() {
size(400, 400);
smooth();
}
void draw() {
background(255, 255, 0);
for (int i = 0; i < pos.size(); i++) {
float a = map (i, size_back, size_front, 100, 255);
float alpha = constrain(a, 20, 255);
// how do you paint with random colors without changing the whole row?
fill(random(0, 200), random(0, 200), random(0, 200), alpha);
stroke(255, 0, 0, alpha);
ellipse(pos.get(i).x, pos.get(i).y, 10, 10);
println("alpha: " + alpha);
}
}
void mouseDragged() {
pos.add(new PVector (mouseX, mouseY));
size_front = pos.size();
size_back = size_front - 20;
}

GoToLoop

GoToLoop

Re: fade out problem

4 months ago

I did some more tweaks in my already tweaked version above and I guess I've made it!

I had the idea to use the 3rd float field z from Pvector pos to store a random color when instantiating it.

Then, instead of previous constant INK, used pos.get(i).z!

Check it out:

// http://forum.processing.org/topic/fade-out-problem

import java.util.List;

final static short  MAX_NUM = 02000, CHUNK = 0200;
final static short  DIM = 25, FPS = 50;
final static color  BORDER = 0xFF0000, BG = #FFFF00;
final static String GFX = P2D; // or JAVA2D

final static List<PVector> pos = new ArrayList(MAX_NUM);

void setup() {
  size(600, 600, GFX);
  smooth();
  noLoop();
  frameRate(FPS);

  mouseX = mouseY = -width;
}

void draw() {
  background(BG);

  pos.add(new PVector( mouseX, mouseY, random(0x1000000) ));

  final int sizeFront = pos.size();
  final int sizeBack  = sizeFront - DIM;

  print(sizeFront + " - ");

  int i = sizeFront;

  while (i-- != 0) {
    final PVector p = pos.get(i);

    final int alphaness  = (int) map(i, sizeBack, sizeFront, 100, 255);
    final int opaqueness = constrain(alphaness, 20, 255) << 030;

    fill( (color) p.z | opaqueness );
    stroke(BORDER | opaqueness);

    ellipse(p.x, p.y, DIM, DIM);
  }

  if (sizeFront == MAX_NUM)   pos.subList(0, CHUNK).clear();
}

void mouseDragged() {
  redraw();
}

Per_

Re: fade out problem

4 months ago

thanks!

made a quick look and do I understand it correctly that you are storing the color information for each ellipse in the p.z value. in the z component of the vector? good solution

but just a thought, is there any other way of storing? just thinking if I for example want to use the z value for example with a kinect and to controll other things than the color information?

will study it more tonight. thanks

GoToLoop

GoToLoop

Re: fade out problem

4 months ago

Well, just create more ArrayLists besides < PVector> pos!

I just used field z from it b/c it was vacant & none of PVector's methods were being used.

A nd didn't want to create another ArrayList just to store a single color!

But if you happen to create many Arrays or ArrayLists to deal w/ an object concept,

it's better to pack all of them into 1 class!

P.S.: Just don't forget to erase older List entries.

Lest you end of running outta memory or getting too sluggish @ some "much" later moment!

Look @ my solution below as an example:

if (sizeFront == MAX_NUM) pos.subList(0, CHUNK).clear();

Per_

Re: fade out problem

4 months ago

thanks

P.S.: Just don't forget to erase older List entries.

been thinking of this as well.
/
but since Im learning all these things about arrays and arraylists and pvectors. for this I can not use any of the methods in the class ArrayList

for example something like this (havnt tried it but guessing here )

if (sizeFront == MAX_NUM) {
pos.remove(0); // does this remove the first index in the list?
}

what is CHUNK by the way?

so if i create a new arraylist called posTwo that contains the color information I have to do the same thing in this i guess. for example

if (sizeFrontTwo == MAX_NUM) posTwo.subList(0, CHUNK).clear();

GoToLoop

GoToLoop

Re: fade out problem

4 months ago

Uh-huh! Method remove(0) does remove 1st entry!

MAX_NUM & CHUNK are some of the constants I've defined at the top of the program.

The idea is that once size() of the List becomes = to MAX_NUM, remove CHUNK entries at once!

From index 0 up to index CHUNK.

And since your new List posTwo is bound to List pos, as all of them are characteristics of your ellipse objects,

they should have the same # of entries!

That's the very idea of a class object btw!

P.S.: Since variable sizeFront is assigned current pos.size(); I use that variable as synonym of the latter.

Per_

Re: fade out problem

4 months ago

thanks

cannot really get this though:

fill( (color) p.z | alpha ); // mulitiplicerar färgen med z värdet
stroke(BORDER | alpha);

how do you rewrite that into something like:

fill(0, 255, 0, alpha);
stroke(255, 0, 0, alpha);

dont understand (color) p.z | alpha
the |

and how the (color) p.z works

does (color) p.z mean that they are multiplied to the red, green and blue?

GoToLoop

GoToLoop

Re: fade out problem

4 months ago

Well; where do I start?

Variable p.z is storing raw RGB color w/ the alpha part!

You can check it out @ this line:

pos.add(new PVector( mouseX, mouseY, random(0x1000000) ));

That big highlighted hexadecimal literal represents all possible 100% transparent RGB colors!

So, each time a new PVector object is instantiated, a new color is randomly picked and memorized.

Now, inside the while loop block, there's an algorithm to determine current alpha attribute to display

for each PVector entry in the ArrayList pos.

The final result of it is stored in the local loop's variable opaqueness.

Then, the bitwise OR | operator is used to merge that alpha value into p.z.

Resulting a full ARGB color; that is, including the alpha property as well!

P.S.: (color) or (int) is 1 of Java's cast unary operator.

It forces conversion to a specified primitive data-type.

GoToLoop

GoToLoop

Re: fade out problem

4 months ago

Here's a modified version that abandons the use of bitwise operators:

(Differences are highlighted)

// http://forum.processing.org/topic/fade-out-problem
import java.util.List;
final static short MAX_NUM = 02000, CHUNK = 0200;
final static short DIM = 25, FPS = 50;
final static color BORDER = #FF0000, BG = #FFFF00;
final static String GFX = P2D; // or JAVA2D
final static List<PVector> pos = new ArrayList(MAX_NUM);
void setup() {
size(600, 600, GFX);
smooth();
noLoop();
frameRate(FPS);
mouseX = mouseY = -width;
}
void draw() {
background(BG);
pos.add(new PVector( mouseX, mouseY, random(#000000) ));
final int sizeFront = pos.size();
final int sizeBack = sizeFront - DIM;
print(sizeFront + " - ");
int i = sizeFront;
while (i-- != 0) {
final PVector p = pos.get(i);
final int alphaness = (int) map(i, sizeBack, sizeFront, 100, 255);
final int opaqueness = constrain(alphaness, 20, 255);
fill( (color) p.z, opaqueness );
stroke(BORDER, opaqueness);
ellipse(p.x, p.y, DIM, DIM);
}
if (sizeFront == MAX_NUM) pos.subList(0, CHUNK).clear();
}
void mouseDragged() {
redraw();
}

Top Reply