Play animation in front of a video in the background.

Brenda

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();

}

kfrajer

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

kfrajer

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();

}

Brenda

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

kfrajer

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

Kf

Brenda

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

Brenda

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();



}

kfrajer

Can you share your sprite? I will be able to run it in few hours.

Kf

Brenda

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:

kfrajer

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();

}

Brenda

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();



}

kfrajer

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

Brenda

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