Slow fade frame transition

Turnbuckle

Hello, this works ok for jpg or png but it won't oblige for svg's - anyone know how to get them to blend from one to another ?

    float a;
    PShape s1;
    PShape s2;
    PImage img3;

    void setup()
    {

      size(800,800,P3D); 
      s1 =loadShape("bk7.svg");
      s2 =loadShape("m10.svg");
      img3 = loadImage("output.jpg");

      a=0;
    }

    void draw()
    {
      background(0);
      frameRate(100);

      noTint();
      shape(s1,0,0);
      tint(255,255,255,a);
      image(img3,0,0);
      //tint(255,255,255,a);
      //shape(s2,0,0); // no blend

      if(a<255)
        a++;

    }

PhiLho

Do you mean you cannot see s1? Isn't it drawn under img3?

Turnbuckle

Yes, it is under img3. s1 appears, then is slowly covered by img3. It works with jpg/png/tiff over the top - it doesn't work with s2 - an svg ? I'm trying to get a smooth screensaver transition from one frame to another ...

PhiLho

I don't understand your problem. What are you expecting exactly, and what do you get instead?

Turnbuckle

This works nicely - a jpg gently appearing over an svg:

float a;
PShape s1;
PShape s2;
PImage img3;

void setup()
{

  size(800,800,P3D); 
  s1 =loadShape("bk7.svg");
  //s2 =loadShape("m10.svg");
  img3 = loadImage("output.jpg");

  a=0;
}

void draw()
{
  background(0);
  frameRate(100);

  noTint();
  shape(s1,0,0);
  tint(255,255,255,a);
  image(img3,0,0);
  //shape(s2,0,0); // no blend

  if(a<255)
    a++;

}

Whereas in this case both layers of svg are immediately visible, with no transition:

float a;
PShape s1;
PShape s2;
PImage img3;

void setup()
{

  size(800,800,P3D); 
  s1 =loadShape("bk7.svg");
  s2 =loadShape("m10.svg");
  //img3 = loadImage("output.jpg");

  a=0;
}

void draw()
{
  background(0);
  frameRate(100);

  noTint();
  shape(s1,0,0);
  tint(255,255,255,a);
  //image(img3,0,0);
  shape(s2,0,0); // no blend

  if(a<255)
    a++;

}

I have just seen tint() doesn't support svg - would you know an equivalent way to fade one image into another ?

PhiLho

Perhaps s2 has transparency or see-through parts, making s1 visible from the start.

Turnbuckle

No it doesn't - and they are both equally opaque. Even when swapped around, one appears instantly on top of the other with no transparency and no transition between frames...

PhiLho

Workaround: draw the shape(s) on a PGraphics, then blend them like you do with images.

Turnbuckle

It's a nice idea, but I can't get it to work - PGraphics won't accept a PShape argument - this is as far as I've got:

float a;
PShape s1;
PShape s2;
PGraphics pg1;
PGraphics pg2;

void setup()
{
  size(800, 800, P3D); 

  pg1 = createGraphics(width, height);
  pg2 = createGraphics(width, height);

  s1 =loadShape("bk7.svg");
  s2 =loadShape("m10.svg");

  a=0;
}

void draw()
{
  background(100);

  noTint();
  pg1.beginDraw(s1, 100, 100);
  pg1.endDraw();

  tint(255, 255, 255, a);
  pg2.beginDraw(s2, 100, 100);
  pg2.endDraw();

  if (a<255)
    a++;
}

PhiLho

1. You should draw on the PGraphics only once, in setup().
2. You just create the PGraphics, and call shape() on them (pg1.shape(...)): you can use any drawing function of Processing on them.

Turnbuckle

It's a bit slow, but it works - merci bcp !

float a;
PShape s1;
PShape s2;
PGraphics pg1;
PGraphics pg2;

void setup()
{
  size(800, 800); //P3D
  background(random(200), random(100), random(100));

  s1 =loadShape("bk7.svg");
  s2 =loadShape("m10.svg");

  pg1 = createGraphics(width, height);
  pg2 = createGraphics(width, height);

  a=0;
}

void draw()
{

  noTint();

  pg1.beginDraw();
  pg1.shape(s1, 0, 0);
  pg1.endDraw();
  image(pg1, 0, 0);

  tint(255, 255, 255, a);

  pg2.beginDraw();
  pg2.shape(s2, 0, 0);
  pg2.endDraw();
  image(pg2, 0, 0);


  if (a<255)
    a++;
}

PhiLho

"It's a bit slow"
Again, move the lines 26-28 and 33-35 to setup(): the images won't change, so there is no need to redraw them on each frame.

Turnbuckle

Perfect, thank you.