Play animation in front of a video in the background.

Hi there,

I've created an animation successfully in one program and loaded up a video separately in another program. I'm now trying to merge the two i.e. I want to play the animation in front of the video(have the video running in the background). I've tried lots of variations. I'm wondering does finger.loop() line stop the draw() method being called?? I'm stumped now:-)

Any help would be greatly appreciated.

I'm including the current problematic code below:

//Program to play animation in front of video.
//variable declarations

var fingers; //video
var sequenceAnimation;//name of completed animation
var mySprite1; //name of sprite
var canvas;//canvas

function preload() 
{

//on preload() the animation images are loaded into "sequenceAnimation"
sequenceAnimation = loadAnimation("capGuy/walk_0001.png", "capGuy/walk_0008.png");

} 

function setup() { 

    canvas = createCanvas(800, 800);
    canvas.style('z-index','1');
    canvas.position(50, 300);

    fingers = createVideo(['assets/glen.mov']);
    fingers.loop(); //is this stopping draw() being called? 
}

function draw() {
    mySprite1 = createSprite(300,578,650,960);
    mySprite1.addAnimation("walking", sequenceAnimation);
    scale(.93); //reduced the size
    mySprite1.velocity.x += .03
    drawSprites();

}

Answers

  • Can you run this example in your computer? https://p5js.org/examples/dom-video.html

    Do you have the dom lib as it's suggested in the link?

    Kf

  • Untested partial code. Does it do the trick for you?

    Kf

    function setup() {  
        canvas = createCanvas(800, 800);
        canvas.style('z-index','1');
        canvas.position(50, 300);
    
        fingers = createVideo(['assets/glen.mov']);
        fingers.loop().hide();     //  **CHANGED
    }
    
    function draw() {
        image(fingers,0,0);   //  **CHANGED
        mySprite1 = createSprite(300,578,650,960);
        mySprite1.addAnimation("walking", sequenceAnimation);
        scale(.93); //reduced the size
        mySprite1.velocity.x += .03
        drawSprites();
    
    }
    
  • Dear Kfrager,

    -many thanks for your responses.

    • To answer your first question: Yes the code at the link does work and the dom is included.

    • In answer to your second question: I tested the the code you kindly supplied and if I put in .hide() then I can't see the video I can only hear the sound. When I take out .hide() I'm back to square one I can see the video but no sign of the animation.

    It's a conundrum...

    Many thanks for your help though.

    Brenda

  • Just to clarify, did you have the image() function call in draw?

    Kf

  • Dear Kfrajer, - sorry for the delay in getting back to you. Yes I had the image() function call in draw

  • I've been tweaking the code and the following works in that it places the animated and moving Sprite onto the video background. My 'libraries' folder got corrupted and I replaced that and things started to work for me.The next thing that I have to figure out is how to make the animation trails of the sprite transparent also. Many thanks for all your help. Very much appreciated.

    Please see below the working code so far.

    //global variables
    var sequenceAnimation;//name of completed animation
    var mySprite1; //name of sprite
    var myVideo;//name of video
    var canvas;
    
    function preload() {
    //on preload() the animation images are loaded into "sequenceAnimation"
    sequenceAnimation = loadAnimation("capGuy/walk_0001.png", "capGuy/walk_0008.png");
    
    myVideo = createVideo(['assets/glen.mov']); 
     myVideo.loop();    
    }
    
    function setup() {
        frameRate(22);//N.B. This is what slows down the rate at which the animation itself walks
         canvas = createCanvas(800,800);
        canvas.style('z-index','2');//This is the key to placing the animation over the video!!
        canvas.position(50, 300);
    
    
        //creating a sprite called mySprite1
        mySprite1 = createSprite (200,800,400,400);
    
        //Adding the animation(labelled "walking") which was //preloaded to 
        //mySprite1. This exposes the Sprite 
        //interfaces to the animation now.
        mySprite1.addAnimation("walking", sequenceAnimation);
    
    
    }
    
    function draw() {
    
        scale(.5); //reduced the size by half
    
        //This moves the sprite each time the draw() is executed
        mySprite1.velocity.x += .05;
    
        //Draws any of the sprites you have created.
        //Is always the last line in draw()
        drawSprites();
    
    
    
    }
    
  • Can you share your sprite? I will be able to run it in few hours.

    Kf

  • Dear kfrajer,

    I managed to get rid of the animation trails by putting the method clear(); as the first line in the draw() method.

    The sprite is a series of 8 animations taken from a sprite sheet and divided equally in Adobe photoshop.(You could use the same procedure on any sprite sheet or alternatively draw your own) See images below:

    walk_0001 walk_0002 walk_0003 walk_0004 walk_0005 walk_0006 walk_0007 walk_0008

  • Answer ✓

    Ok, here I got it to work. This link for reference: http://p5play.molleindustria.org/docs/classes/p5.play.html#method-createSprite

    Kf

    //global variables
    var sequenceAnimation;//name of completed animation
    var mySprite1; //name of sprite
    var myVideo;//name of video
    var canvas;
    
    function preload() {
    
        //on preload() the animation images are loaded into "sequenceAnimation"
        sequenceAnimation = loadAnimation("capGuy/walk_0001.png", "capGuy/walk_0008.png");    
    
    }
    
    function setup() {
        frameRate(22);//N.B. This is what slows down the rate at which the animation itself walks
        canvas = createCanvas(800,400);
        canvas.style('z-index','2');//This is the key to placing the animation over the video!!
        canvas.position(50, 0);
    
    
        //creating a sprite called mySprite1
        mySprite1 = createSprite (200,200,400,400);
    
        //Adding the animation(labelled "walking") which was //preloaded to 
        //mySprite1. This exposes the Sprite 
        //interfaces to the animation now.
        mySprite1.addAnimation("walking", sequenceAnimation);
        //mySprite1.position(width*0.10,100);
    
        myVideo = createVideo(['assets/transit.mov']); 
        myVideo.loop().hide();    
    
    }
    
    function draw() {
        //background(255);
        image(myVideo,0,0);
        scale(.5); //reduced the size by half
    
        //This moves the sprite each time the draw() is executed
        mySprite1.velocity.x += .05;
    
        //Draws any of the sprites you have created.
        //Is always the last line in draw()
        drawSprites();
    
    }
    
  • Thanks for that Kfrajer. That code doesn't work for me in that the video doesn't show up in the background. The animation walks alright but there are animation trails.

    Please see the draw() method below: (Note the clear() method at the top). This is what I used eventually and it worked. Many thanks. Kfrajer.

     function draw() {
    
        clear();//clears the animation trail.
        scale(.85); //reduces the size
    
        //This moves the sprite each time the draw() is executed
        mySprite1.velocity.x += .05;
    
        //Draws any of the sprites you have created.
        //Is always the last line in draw()
        drawSprites();
    
    
    
    }
    
  • Answer ✓

    What browser were you suing? Both ways work for me. using clear is better in your case. I can see my method more convenient in other situations.

    Kf

  • I am using Chrome. Thanks very much for that Krafjer. Very much appreciated.

Sign In or Register to comment.