Camera in animation

Programming Questions

ceube89

in Programming Questions • 2 years ago

Hello!

I have a plan to write an animation using dinamic typography. The problem (for now) is a control of a camera. All scenes is in 2d, is it better to render it in 3d using coordinate z of the camera as a zoom, or leave it in 2d operating zoom by something else (scale maybe?)? I've tried PeasyCam, but I couldn't make it work. For the animation I am using motionlib (Key frames), everything has to be synchronized with audio. I've found a project which has camera control I would like to create - ( http://www.caligraft.com/calligraphies/web-lettree/applet). What would you recommend?

[edit]

I've found a solution. Now I have a problem with motionlib library. How could I render something and during the tweek change the camera? I wrote something like this (probably I have to "add" KeyFrame kf9 to kf1 somehow, but I don't know how to merge them:

Motion.setup(this);

t = new Timeline();
//This KeyFrame is for rendering some text
KeyFrame kf1 = new KeyFrame("1", 0);
kf1.addChild(new Tween("IKS",0, 50, 155));

////This KeyFrame is for changing camera parameters during KeyFrame
KeyFrame kf9 = new KeyFrame("9", 50);
kf9.addChild(new Tween("IKS",50, 200, 105));

//This KeyFrame is for rendering some text
KeyFrame kf2 = new KeyFrame("2", 156);
kf2.addChild(new Tween("IKS",50, 200, 125));

t.addKeyFrame(kf1);
t.addKeyFrame(kf2);
t.addKeyFrame(kf9);

void draw(){
cam = new PeasyCam(this,width/2-x, height/2-y,(height/2)/tan(PI*60/360),0.005+z);
currentKeyFrames = t.getCurrentKeyFrames();

for (int i = 0; i < currentKeyFrames.length; i++)
{

    for (int k = 0; k < currentKeyFrames[i].getTweenCount(); k++)
    {
      println(t.getCurrentKeyFrames());
                if (currentKeyFrames[0].getName()=="1")
                {

fill(255,0,0);
stroke(255,0,0);
translate (width/2,height/2);
font.draw("Bla bla");

                                              };

if (currentKeyFrames[0].getName()=="2")
                {

fill(255,0,0);
stroke(255,0,0);
translate (width/2,height/2);
font.draw("Bla bla");

                                              };

   if (currentKeyFrames[0].getName()=="9")
                { x = currentKeyFrames[i].getTween(k).getPosition();
                   y = currentKeyFrames[i].getTween(k).getPosition();
                   z = currentKeyFrames[i].getTween(k).getPosition();

                                              };

Replies(2)

ijeoma

Re: Camera in animation

2 years ago

Could you post code that I can run. i replaced things such as your text.draw() call (which isnt a Processing method) with Processing's text() call and etc but couldnt get your app to run. i cant tell much from what you posted. could you break your code into 2 sketches: the first without the camera and the second with the camera?

Animation library for timeline/keyframe based tweens and more: www.ekeneijeoma.com/processing/ijeomamotion/

ceube89

Re: Camera in animation

2 years ago

Thank you for fast response!

Of course, below there is a code without the camera, second one is with it.

import ijeoma.math.util.*;
import ijeoma.geom.bezier.test.*;
import ijeoma.geom.path.*;
import ijeoma.motion.tween.physics.test.*;
import ijeoma.motion.*;
import ijeoma.motion.timeline.test.*;
import ijeoma.motion.tween.*;
import ijeoma.motion.timeline.*;
import ijeoma.motion.easing.*;
import ijeoma.motion.tween.physics.*;
import ijeoma.motion.tween.path.*;
import ijeoma.geom.bezier.*;
import ijeoma.motion.tween.path.test.*;
import ijeoma.motion.tween.bezier.test.*;
import ijeoma.motion.event.*;
import ijeoma.motion.tween.test.*;
import ijeoma.geom.path.test.*;
import ijeoma.util.*;
import ijeoma.motion.behavior.*;
import ijeoma.motion.tween.bezier.*;

import ddf.minim.*;
import ddf.minim.signals.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;

import peasy.test.*;
import peasy.org.apache.commons.math.*;
import peasy.*;
import peasy.org.apache.commons.math.geometry.*;

    import geomerative.*;

PeasyCam cam;
Timeline t;
KeyFrame[] currentKeyFrames;
Minim minim;

RFont font;

float x,y,z,lol;

void setup(){

size(800,600,P3D);
frameRate(60);

     RG.init(this);
font = new RFont( "The Sauce.ttf", 20);

background(255);

Motion.setup(this);

t = new Timeline();

KeyFrame kf1 = new KeyFrame("1", 0);
kf1.addChild(new Tween("IKS",0, 50, 155));

/*CAMERA

KeyFrame kf9 = new KeyFrame("9", 50);
kf9.addChild(new Tween("IKS",50, 200, 250));
*/
KeyFrame kf2 = new KeyFrame("2", 156);
kf2.addChild(new Tween("IKS",50, 200, 125));

t.addKeyFrame(kf1);
t.addKeyFrame(kf2);
/*CAMERA
t.addKeyFrame(kf9);
*/

t.play();

}

void draw()
{
background(100,102,241);

/*CAMERA
cam = new PeasyCam(this,width/2-x*5, height/2-y,(height/2)/tan(PI*60/360),0.00005+z);
*/
currentKeyFrames = t.getCurrentKeyFrames();

for (int i = 0; i < currentKeyFrames.length; i++)
{

    for (int k = 0; k < currentKeyFrames[i].getTweenCount(); k++)
    {
      println(t.getCurrentKeyFrames());
                if (currentKeyFrames[0].getName()=="1")
                {

fill(255,0,0);
stroke(255,0,0);
translate (width/2,height/2);
font.draw("Text1");

                                              };


                 if (currentKeyFrames[0].getName()=="2")
                 {


fill(255,0,0);
stroke(255,0,0);
translate (width/2,height/2);
font.draw("Text2");



               };

              /* CAMERA
                        if (currentKeyFrames[0].getName()=="9")

{ x = currentKeyFrames[i].getTween(k).getPosition();
   y = currentKeyFrames[i].getTween(k).getPosition();
   z = currentKeyFrames[i].getTween(k).getPosition();


                                              };

      */
     };
println(currentKeyFrames[0].getName());

};

}

CODE WITH CAMERA

import ijeoma.math.util.*;
import ijeoma.geom.bezier.test.*;
import ijeoma.geom.path.*;
import ijeoma.motion.tween.physics.test.*;
import ijeoma.motion.*;
import ijeoma.motion.timeline.test.*;
import ijeoma.motion.tween.*;
import ijeoma.motion.timeline.*;
import ijeoma.motion.easing.*;
import ijeoma.motion.tween.physics.*;
import ijeoma.motion.tween.path.*;
import ijeoma.geom.bezier.*;
import ijeoma.motion.tween.path.test.*;
import ijeoma.motion.tween.bezier.test.*;
import ijeoma.motion.event.*;
import ijeoma.motion.tween.test.*;
import ijeoma.geom.path.test.*;
import ijeoma.util.*;
import ijeoma.motion.behavior.*;
import ijeoma.motion.tween.bezier.*;

import ddf.minim.*;
import ddf.minim.signals.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;

import peasy.test.*;
import peasy.org.apache.commons.math.*;
import peasy.*;
import peasy.org.apache.commons.math.geometry.*;

    import geomerative.*;

PeasyCam cam;
Timeline t;
KeyFrame[] currentKeyFrames;
Minim minim;

RFont font;

float x,y,z,lol;

void setup(){

size(800,600,P3D);
frameRate(60);

     RG.init(this);
font = new RFont( "The Sauce.ttf", 20);

background(255);

Motion.setup(this);

t = new Timeline();

KeyFrame kf1 = new KeyFrame("1", 0);
kf1.addChild(new Tween("IKS",0, 50, 155));

KeyFrame kf9 = new KeyFrame("9", 50);
kf9.addChild(new Tween("IKS",50, 200, 250));

KeyFrame kf2 = new KeyFrame("2", 156);
kf2.addChild(new Tween("IKS",50, 200, 125));

t.addKeyFrame(kf1);
t.addKeyFrame(kf2);

t.play();

}

void draw()
{
background(100,102,241);

cam = new PeasyCam(this,width/2-x*5, height/2-y,(height/2)/tan(PI*60/360),0.00005+z);

currentKeyFrames = t.getCurrentKeyFrames();

for (int i = 0; i < currentKeyFrames.length; i++)
{

    for (int k = 0; k < currentKeyFrames[i].getTweenCount(); k++)
    {
      println(t.getCurrentKeyFrames());
                if (currentKeyFrames[0].getName()=="1")
                {

fill(255,0,0);
stroke(255,0,0);
translate (width/2,height/2);
font.draw("Text1");

                                              };


                 if (currentKeyFrames[0].getName()=="2")
                 {


fill(255,0,0);
stroke(255,0,0);
translate (width/2,height/2);
font.draw("Text2");



               };


                        if (currentKeyFrames[0].getName()=="9")

{ x = currentKeyFrames[i].getTween(k).getPosition();
   y = currentKeyFrames[i].getTween(k).getPosition();
   z = currentKeyFrames[i].getTween(k).getPosition();


                                              };


     };
println(currentKeyFrames[0].getName());

};

}

Top Reply