if key pressed crossfade between image 1 and image 2 over 25 frames.

zbyszek

what I came up with so far was: PImage img; PImage img2;

void setup() {
  size(1280,720);
  frameRate(25);
  img = loadImage("forest1.jpg");
  img2 = loadImage("forest2.jpg");

}

void draw() {
   image(img,0,0);
}

void keyPressed() {
  if (key == '1'){
     tint(255, frameCount*10.5);
  image(img,0,0,width, height);
  tint(255, 255-frameCount*10.5);
  image(img2,0,0,width, height);
  }
}

this however does not work because once the key is pressed the frame count does not start from 0 but from whenever it is pressed. Is there a way to reset the frame count to zero once the key is pressed? or perhaps is there a better way to do this in whole? Thank you

Chrisir

when keyPressed say

myframeCountAtStart = frameCount;

where myframeCountAtStart is a global var

when using tint say

toUseForTint = frameCount - myframeCountAtStart ; 

zbyszek

Sorry I'm quite new to this. I understood to do this, can you tell me what I did wrong/need to change?

PImage img;
PImage img2;

int myframeCountAtStart;
int toUseForTint;

void setup() {
  size(1280,720);
  frameRate(25);
  img = loadImage("forest1.jpg");
  img2 = loadImage("forest2.jpg");

}

void draw() {
   image(img,0,0);
}

void keyPressed() {
  if (key == '1'){

    myframeCountAtStart = frameCount;
    toUseForTint = frameCount - myframeCountAtStart ; 

  tint(255, frameCount*10.5);
  image(img,0,0,width, height);
  tint(255, 255-frameCount*10.5);
  image(img2,0,0,width, height);

  }
}

Chrisir

this is the idea

PImage img;
PImage img2;

int myframeCountAtStart;
int toUseForTint;

// this tells whether we are morphing 
boolean doTheChange = false; // No 

void setup() {
  size(1280, 720);
  frameRate(25);
  img = loadImage("forest1.jpg"); // forest
  img2 = loadImage("forest2.jpg");
  println ("Hit 1 to start.");
} // func 

void draw() {
  if (doTheChange) {
    // yes, morph 
    toUseForTint = frameCount - myframeCountAtStart ; 
    // println (toUseForTint);
    tint(255, toUseForTint*10.5); // stronger 
    image(img, 0, 0, width, height);
    tint(255, 255-toUseForTint*10.5); // weaker 
    image(img2, 0, 0, width, height);
    if (255-toUseForTint*10.5<=0) {
      // doTheChange=false;
      println ("Done.");
    } // if
  } // if 
  else 
  {
    // no
    tint(255, 255); // reset tint 
    image(img2, 0, 0, width, height);
    // image(img, 0, 0);
  } // else
} // func 

void keyPressed() {
  if (key == '1') {
    myframeCountAtStart = frameCount;
    doTheChange=true;
    println ("Start.");
  } // if
} // func 
//

Chrisir

explanation

since draw() runs on and on (60x per second) we want to draw the images there and also use tint there (and not in keyPressed())

since the function keyPressed() gets called only once (when the key is pressed) we only want to make the changes there necessary for what's happening in draw() :

• set myframeCountAtStart and

• set doTheChange

images

Since the image after the morphing is another than before, you need to swap the images. Then you could say

doTheChange=false;  

in line 28 and start all over again.

Now when you hit 1 again and again it always starts from the start and doesn't go back and forth from image1 to image2.

Greetings, Chrisir ;-)

zbyszek

thank you very much! :)

Chrisir

you're welcome!