Change transparency over time

Programming Questions

fembotness

Change transparency over time

in Programming Questions • 2 years ago

I wrote a super basic code for drawing circles with greyscale coloring. The keys that are used are the middle row of a qwerty keyboard so 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'. I am really new to Processing and was wondering how to create a time event that after the key is released the circle fades away within 5 seconds. Here is my code so far :

float x;
float y;
float b = 0; //start black
float g = 100; //start grey
float w = 200; //start white
float diam; //diameter
void setup () {
size(900,300);
background(255);
}
void draw() {
x = random(width);
y = random(height);
diam = 200;
}
void keyPressed() {
if (key == 'a') { //darkblack
stroke(0);
fill(b);
ellipseMode(CENTER);
ellipse(x,y,diam,diam);
}
if (key == 's') { //mediumblack
stroke(0);
fill(b + 50);
ellipseMode(CENTER);
ellipse(x,y,diam,diam);
}
if (key == 'd') { //lightblack
stroke(0);
fill(b + 90);
ellipseMode(CENTER);
ellipse(x,y,diam,diam);
}
if (key == 'f') { //darkgrey
stroke(0);
fill(g);
ellipseMode(CENTER);
ellipse(x,y,diam,diam);
}
if (key == 'g') { //mediumgrey
stroke(0);
fill(g + 50);
ellipseMode(CENTER);
ellipse(x,y,diam,diam);
}
if (key == 'h') { //lightgrey
stroke(0);
fill(g + 90);
ellipseMode(CENTER);
ellipse(x,y,diam,diam);
}
if (key == 'j') { //darkwhite
stroke(0);
fill(w);
ellipseMode(CENTER);
ellipse(x,y,diam,diam);
}
if (key == 'j') { //mediumwhite
stroke(0);
fill(w + 25);
ellipseMode(CENTER);
ellipse(x,y,diam,diam);
}
if (key == 'j') { //lightwhite
stroke(0);
fill(w + 50);
ellipseMode(CENTER);
ellipse(x,y,diam,diam);
}
}

Replies(4)

cedrickie..

Re: Change transparency over time

2 years ago

the easiest and quickest solution would be to overdraw the screen with a semi transparent background.
you do that by adding

fill(255,10);
rect(0,0,width,height);

to the beginning of draw().

its not really flexible though. So in case you want to add other elements that should behave differently another solution would be better. For example creating a class where every circle/key has its own variable for transparency which gets counted down as soon as a key is pressed.

mbraendle

Re: Change transparency over time

2 years ago

Cedric's comment on creating a class is the right way to go. As you see from your code, you always repeat the same four statements for every key with a slight variation.

With a class, you just define a method that displays the ellipse and to which you can pass a greyscale parameter. You should also add the random part into the class initialization and not into draw(). For every init of the object, you could then save the framecount and use the difference of the initial framecount and the current framecount to to calculate the fadeout.

Have also a look at the example in the Processing reference for ArrayList.

fembotness

Re: Re: Change transparency over time

2 years ago

Thank you both for your responses.
I am not too sure how to establish the parameters of a class for the circles. Do I place all the variables for the placement and coloring of the circles in the class description?
I've also never used frame count, do I set that up in setup or draw?
I know these are really basic questions but I'd really appreciate any help. Thanks again.

cedrickie..

Re: Change transparency over time

2 years ago

to answer your first question.
yes. you place all the variables like position, size, transparency inside the class. so every circle has its own.
this tutorials helps you to understand OOP http://www.processing.org/learning/objects/

about framecount.
you dont need to set it up.
its a systemvariable you can read. for example using prinln(frameCount) prints the actual framecount.

so what mbraendle was taking about is that when creating the object you save the current framecount into a variable. and then use the difference to calculate a change in your transparency variable.

Top Reply