Making image appear and fade out with void keyPressed()

Programming Questions

sunooz

Making image appear and fade out with void keyPressed()

in Programming Questions • 1 year ago

Hi, i'm testing something about circles fading out which are triggered by keyPressed().

I have made two sketches; one with an image fading out as time goes, the other with a short sound triggered by keyPressed().

i want to combine these two sketches, but the new sketch does not work well.

Can anybody help me?

Here's two codes;

'an image fading out as time goes'

PImage test13;
float time = 0;
float going = 1;
void setup()
{
size(500,500);
test13 = loadImage("pattern13.png");
}
void draw()
{
background(0);
time=time+going;
tint(255, 200-time);
imageMode(CENTER);
image(test13, width/2, height/2);
}

'a short sound triggered by keyPressed()'

/////////////setting for sound///////////////
import ddf.minim.*;
Minim minim;
//set names of intagers(which becomes random index for same sound values)
int indexHigh3;
//set names of sounds ([value] indicates the numbers of same sound)
AudioSample high3;
void setup()
{
size(1024, 768);
minim = new Minim(this);
// load a file, give the AudioPlayer buffers that are 512 samples long
high3 = minim.loadSample("3-3_1.wav", 512);
}
void draw()
{
background(0,0,75);
}
void keyPressed()
{
imageMode(CENTER);
if ( key == 'e' )
{
high3.trigger();
}
void stop()
{
// always close Minim audio classes when you are done with them
high3.close();
// always stop Minim before exiting
minim.stop();
super.stop();
}

The sound is 3-4sec long and it does not stop after releasing key 'e'.

However, when I adapt keyPressed to the first sketch, image disappears after 1 frame.(it blinks only once)

PImage test13;
float time = 0;
float going = 1;
void setup()
{
size(500,500);
test13 = loadImage("pattern13.png");
}
void draw()
{
background(0);
}
void keyPressed()
{
if (key == 'e')
{
time=time+going;
tint(255, 200-time);
imageMode(CENTER);
image(test13, width/2, height/2);
}
}

I think that the second sketch works because of trigger() from minim.

The document for minim says;

Triggers the sound to play once. Can be called again before the sound finishes playing.

Can I make my image stay and fade out even though key is released? (just like that a sound does not stop after releasing key)

I want similar effect of my second sketch, but on image not on sound.

I want to 'trigger' my image to appear and fade out by pressing key.

I think it might be possible if i create void display() or something...like class...? But I'm not sure and don't know how to make it.. I've tried it but stuck in the middle. My brain is messed up. Or should I use array? I don't know where to start....T_T

Replies(8)

v.k.

Re: Making image appear and fade out with void keyPressed()

1 year ago

Without digging in your code, keyPressed() method runs once at key pressing and that's all, So you need a boolean to help. i've scratched an example over your code, quick and dirty.

PImage test13;
float time = 0;
float going = 1;
boolean fade = false;
void setup()
{
size(500,500);
test13 = loadImage("tempImage.jpg");
}
void draw()
{
background(0);
if(fade && time < 255)
{
tint(255, 255-time);
time++;
}
imageMode(CENTER);
image(test13, width/2, height/2);
ellipse(frameCount%width, height-20, 20, 20);//as the sound...
}
void keyPressed()
{
// it is very poorly made...
//after first time press twice to go agian
if (key == 'e')
{
fade = !fade;
time = 0;
}
}

Or you can just use

fill(0,10) //some alpha value

rect(0, 0, width, height)

but that will fade everything in screen...

sunooz

Re: Re: Making image appear and fade out with void keyPressed()

1 year ago

Thank you for helping me. I tweaked your advice a little because I want to make the image 'appear and fade out' by pressing key. Here's the one;

PImage test13;
float time = 0;
float going = 5;
boolean fade = false;
void setup()
{
size(500,500);
test13 = loadImage("pattern13.png");
}
void draw()
{
background(0);
if(fade && time < 255)
{
imageMode(CENTER);
image(test13, width/2, height/2);
tint(255, 200-time);
time = time + going;
}
ellipse(frameCount%width, height-20, 20, 20);
}
void keyPressed(){
if(key == 'e')
{
fade = !fade;
time = 0;
}
}

It works, but I have a new problem.

After pressing key 'e' first time, I should press 'e' twice to call the fading out sequence again.

I have to make the image called again in alpha 100 every time I press 'e'.

Any suggestion? T_T

sunooz

Re: Re: Making image appear and fade out with void keyPressed()

1 year ago

I made it!

PImage test13;
float time = 0;
float going = 1;
boolean fade = false;
void setup()
{
size(500,500);
test13 = loadImage("pattern13.png");
}
void draw()
{
background(0);
if(fade && time < 255)
{
imageMode(CENTER);
image(test13, width/2, height/2);
tint(255, 200-time);
time = time + going;
}
ellipse(frameCount%width, height-20, 20, 20);
}
void keyPressed(){
if(key == 'e')
{
if(fade == false)
{
fade = !fade;
time = 0;
}else
{
fade = fade;
time = 0;
}
}
}

It's quite inspiring. I appreciate your help, v.k.! :-)

Every suggestion and correction would be welcome!!

benja

Re: Making image appear and fade out with void keyPressed()

1 year ago

I think in this case the boolean is not needed, because time is enoght to decide if the image is currently fading. Makes the code a little shorter:

PImage test13;
float maxAlpha = 100;
float time = 100;
float going = 1;

void setup()
{
size(500, 500);
test13 = loadImage("test.png");
imageMode(CENTER);
}

void draw()
{
background(0);
if (time < maxAlpha){
    tint(255, maxAlpha-time);
    image(test13, width/2, height/2);
    time = time + going;
}

ellipse(frameCount%width, height-20, 20, 20);
}

void keyPressed() {
if (key == 'e')
{
    time = 0;
}
}

sunooz

Re: Re: Making image appear and fade out with void keyPressed()

1 year ago

Hmm.... When I use boolean, the application starts with blank screen.

However, with benja's solution, the image appears at the start of sketch without pressing key.

I want to start with blank screen...

So, I changed your script like this;

PImage test13;
float time = 0;
float going = 5;
float maxAlpha = 255;
void setup()
{
size(500,500);
test13 = loadImage("pattern13.png");
imageMode(CENTER);
}
void draw()
{
background(0);
if(time == 0)
{
tint(255, 0);
image(test13, width/2, height/2);
}
else if(time < maxAlpha)
{
tint(255, maxAlpha-time);
image(test13, width/2, height/2);
time = time + going;
}
// ellipse(frameCount%width, height-20, 20, 20);
}
void keyPressed(){
if(key == 'e')
{
time = 1;
}
}

I'm not sure if it is a good approach. It works anyway.

Is it fine?

benja

Re: Making image appear and fade out with void keyPressed()

1 year ago

The image was shown, because you started with "time=0". I started with "time" beeing equal to "maxAlpha", so the image is only shown when you hit "e" for the first time. I mean it does not really matter which version you choose, if both bring the desired result.

sunooz

Re: Re: Making image appear and fade out with void keyPressed()

1 year ago

Thank you! :-)

v.k.

Re: Making image appear and fade out with void keyPressed()

1 year ago

Simpler always better! Always learning :)

Top Reply