Slow fade frame transition

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++;

    }

Answers

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

  • 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 ...

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

  • 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 ?

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

  • 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...

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

  • 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++;
    }
    
  • Answer ✓
    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.
  • 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++;
    }
    
  • "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.

  • Perfect, thank you.

Sign In or Register to comment.