Reverse Keyframe animation in Three.js - three.js

Really I would like to reverse a keyframe animation using THREE.KeyFrameAnimation.update with a negative number, appreciate this isn't supported natively, has anyone got any advice?

I actually found a solution to this for when you only want to play it once. I posted the full class here:
https://gist.github.com/rtpHarry/2d41811d04825935039dfc075116d0ad
The important bit is:
// will force the mixer to play in reverse no matter what
playClipReverseByIndex_Forced(index) {
this.action = this.mixer.clipAction(this.animations[index]);
if(this.action.time === 0) {
this.action.time = this.action.getClip().duration;
}
this.action.paused = false;
this.action.setLoop(THREE.LoopOnce);
this.action.timeScale = -1;
this.action.play();
}

Try setting animation.timeScale = -1;
But it works only when animation.loop = true;

Related

How can I randomize a video to play after another by pressing a key on Processing?

I'm quite new to Processing.
I'm trying to make Processing randomly play a video after I clear the screen by mouseclick, so I create an array that contain 3 videos and play one at a time.
Holding 'Spacebar' will play a video and release it will stop the video. Mouseclick will clear the screen to an image. The question is how can it randomize to another video if I press spacebar again after clear the screen.
I've been searching all over the internet but couldn't find any solution for my coding or if my logic is wrong, please help me.
Here's my code.
int value = 0;
PImage photo;
import processing.video.*;
int n = 3; //number of videos
float vidN = random(0, n+1);
int x = int (vidN);
Movie[] video = new Movie[3];
//int rand = 0;
int index = 0;
void setup() {
size(800, 500);
frameRate(30);
video = new Movie[3];
video[0] = new Movie (this, "01.mp4");
video[1] = new Movie (this, "02.mp4");
video[2] = new Movie (this, "03.mp4");
photo = loadImage("1.jpg");
}
void draw() {
}
void movieEvent(Movie video) {
video.read();
}
void keyPressed() {
if (key == ' ') {
image(video[x], 0, 0);
video[x].play();
}
}
void mouseClicked() {
if (value == 0) {
video[x].jump(0);
video[x].stop();
background(0);
image(photo, 0, 0);
}
}
You have this bit of logic in your code which picks a random integer:
float vidN = random(0, n+1);
int x = int (vidN);
In theory, if you want to randomise to another video when the spacebar is pressed again you can re-use this bit of logic:
void keyPressed() {
if (key == ' ') {
x = int(random(n+1));
image(video[x], 0, 0);
video[x].play();
}
}
(Above I've used shorthand of the two lines declaring vidN and x, but the logic is the same. If the logic is harder to follow since two operations on the same line (picking a random float between 0,n+1 and rounding down to an integer value), feel free to expand back to two lines: readability is more important).
As side notes, these bit of logic look a bit off:
the if (value == 0) condition will always be true since value never changes, making both value and the condition redundant. (Perhaps you plan to use for something else later ? If so, you could save separate sketches, but start with the simplest version and exclude anything you don't need, otherwise, in general, remove any bit of code you don't need. It will be easier to read, follow and change.)
Currently your logic says that whenever you click current video resets to the start and stops playing and when you hit the spacebar. Once you add the logic to randomise the video that the most recent frame of the current video (just randomised) will display (image(video[x], 0, 0);), then that video will play. Unless you click to stop the current video, previously started videos (via play()) will play in the background (e.g. if they have audio you'll hear them in the background even if you only see one static frame from the last time space was pressed).
Maybe this is the behaviour you want ? You've explained a localised section of what you want to achieve, but not overall what the whole of the program you posted should do. That would help others provide suggestions regarding logic.
In general, try to break the problem down to simple steps that you can test in isolation. Once you've found a solid solution for each part, you can add each part into a main sketch one at a time, testing each time you add something. (This way if something goes wrong it's easy to isolate/fix).
Kevin Workman's How To Program is a great article on this.
As a mental excercise it will help to read through the code line by line and imagine what it might do. Then run it and see if the code behaves as you predicted/intended. Slowly and surely this will get better and better. Have fun learning!

Collision not detecting at high speed

I decided I wanted to learn how to work with the unity2D engine, and started with trying to make pong. This was going pretty good, until I found a problem I couldn't find/didn't understand an answer for on google .
Every time the player/AI hits the ball, I make the ball go a little bit faster. This works fine until the ball goes pretty fast (still playable though) and just passes through the player/AI. I solved this by making the box collider of the player/AI really long, but at really high (and unplayable) speeds it still goes through.
My solution works, but isn't that pretty, and I wonder if there is a better solution for this (make the engine check more often for collisions?).
Here's the script for the ball movement (Javascript):
#pragma strict
var StartSpeed : int;
var speedFactor : float;
function Start () {
yield WaitForSeconds(2);
StartBall();
}
function ResetBall () {
GetComponent.<Rigidbody2D>().velocity.x = 0;
GetComponent.<Rigidbody2D>().velocity.y = 0;
transform.position.x = 0;
transform.position.y = 0;
yield WaitForSeconds(0.5);
StartBall();
}
function StartBall () {
var randomDirection = Random.Range(0f,1f);
var randomAngle = Random.Range(-Mathf.PI/4, Mathf.PI/4);
if(randomDirection < 0.5f){
GetComponent.<Rigidbody2D>().velocity.x = Mathf.Cos(randomAngle) * StartSpeed;
GetComponent.<Rigidbody2D>().velocity.y = Mathf.Sin(randomAngle) * StartSpeed;
}else{
GetComponent.<Rigidbody2D>().velocity.x = - Mathf.Cos(randomAngle) * StartSpeed;
GetComponent.<Rigidbody2D>().velocity.y = Mathf.Sin(randomAngle) * StartSpeed;
}
}
function OnCollisionEnter2D (colInfo : Collision2D) {
if(colInfo.collider.tag == "Player"){
GetComponent.<Rigidbody2D>().velocity.x = speedFactor * GetComponent.<Rigidbody2D>().velocity.x;
if(colInfo.collider.GetComponent.<Rigidbody2D>().velocity.y == 0){
GetComponent.<Rigidbody2D>().velocity.y = speedFactor * GetComponent.<Rigidbody2D>().velocity.y;
}
var vel = GetComponent.<Rigidbody2D>().velocity;
Debug.Log("Speed: " + vel);
}
}
Any other comments on the script that may improve it are welcome!
EDIT: I tried the following (as Andrew suggested):
function OnCollisionEnter2D (colInfo : Collision2D) {
if(colInfo.collider.tag == "Player"){
GetComponent.<Rigidbody2D>().AddForce( Vector2 (speedFactor * GetComponent.<Rigidbody2D>().velocity.x, speedFactor * GetComponent.<Rigidbody2D>().velocity.y));
var vel = GetComponent.<Rigidbody2D>().velocity;
Debug.Log("Speed: " + vel);
}
}
This still causes the problem I had before.
Update your RigidBody settings and set Collision Detection to Continuous (it will probably be set to discrete) and your high speed collision will work fine.
You shouldn't be messing with the velocity directly, try just using AddForce() instead.
Whole physics including collision detection runs on FixedUpdate, so to actually detect any collision colliders must collide when FixedUpdate is called. Let's say one collider isn't moving (wall for example) and another is going right at it, on current call of FixedUpdate collider that is moving is just before the wall, while on the next call of FixedUpdate collider that is moving has passed the wall, because that is it's position step per frame. Visually we see that colliders did collide, but they didn't collide on any call to FixedUpdate. Now, there are two solutions to this, lower the speed or lower the timestep of FixedUpdate ( http://docs.unity3d.com/Manual/class-TimeManager.html ), but this can be bad for framerate, it all depends what machines are you targeting and how hardware hungry your game is.
There is also this open source script which you should look at :
http://wiki.unity3d.com/index.php?title=DontGoThroughThings#C.23_-_DontGoThroughThings.js

In processing , why movie.jump() function not work during movie reverse?

I am working on movie in processing. The move.jump() function not working during movie reverse play. And I have reverse code:
(The reverse is global boolean variable)
float playSpeed = 1.0;
//After click reverse button
if(reverse == false){
playSpeed = playSpeed * -1;
movie.speed(playSpeed);
reverse = true;
}
else{
playSpeed = playSpeed * -1;
movie.speed(playSpeed);
reverse = false;
}
During reverse == true I click some button, and jump to a time, for example 5.0, code is show below:
//after click button
if(reverse == true){
movie.jump(5.0);
}
And this jump function is not work. It not jump to the movie frame which at 5.0 second. And show some error:
ast_segment_set_seek: assertion 'start <= stop' failed
Can anybody tell me why the jump function not work and how to fix it?
Thank you.
EDIT: more reasonable answer: Could it be that jump calculates the position in relation to the frame rate which becomes negative when playing backwards and then end is before start? In this case my workaround should work.
Not sure what classes you are using, but couldn't you just make a workaround? Should be so fast the user won't notice:
if (reverse) {
movie.speed(1f);
// jump();
movie.speed(playSpeed);
} else {
// jump();
}
Btw reverse can be written as (no if needed):
reverse = !reverse;
playSpeed = -playSpeed;
movie.speed(playSpeed);
I know the answer, I figure out by myself.
If movie play speed is less 0, the star will less than stop.
So, if the play speed is less 0, just * -1, let greater than 0, than jump, than * -1, let speed less than 0.
if(reverse == true){
m.speed(playSpeed*-1);
m.jump(5.0);
m.speed(playSpeed*-1);
}

Actionscript 2: Event Cue Points: findNearestCuePoint

Hello everyone and anyone!
Ok... I have been banging my head against the wall with this issue for literally weeks, but I still cannot find an answer that has successfully resolved the issue.
I created an FLA and placed a FLV component with the instance name of videoPlay on the stage.
videoPlay is pathed to a streaming FLV with embedded event cue points. The cue points are numbered sequentially from narration1 to narration16.
I established a listener object:
var videoPlayCuePointListener:Object = new Object();
The event listener for the cue points:
videoPlayCuePointListener.cuePoint = function(eventObject:Object):Void{
if(eventObject.info.name == "narration1"){_root.cc_box.cc_txt.htmlText = cueTxt1);}
else if(eventObject.info.name == "narration2"){_root.cc_box.cc_txt.htmlText = cueTxt2);}
etc, through narration16 }
and so on through narration16.
Then I attached the event listener to the FLV component on stage:
videoPlay.addEventListener("cuePoint", videoPlayCuePointListener);
All of this works very well. As the FLV plays, each event cue point fires off the correct text to the cc_txt dynamic text box.
The issue I am having is that I cannot find the nearest cue point to the FLV playhead so that I can fire events when the user scrubs the timeline.
I have researched this as thoroughly as I possibly could before finally deciding to post the issue, but although the documentation and various postings regarding findNearestCuePoint discovered throughout the web have provided numerous examples, not a single one has been successful.
I have attempted to add a listener to videoPlay that creates an object (nearestCue) and gives nearestCue the value of videoPlay.findNearestCuePoint(videoPlay.playheadTime), then read out nearestCue's name, label, etc. No dice.
Nothing suggested in any posts I have reviewed (many, many posts) has provided an answer.
This seems like it would be the easiest thing to accomplish but I have not been successful a single time.
Any suggestions or assistance would be much appreciated.
Thank you for your time!
Haven't touched AS2 in a long time. I've done a basic test and findNearestCuePoint worked. You're using the FLVPlayback component, right ?
Here's what I've tried:
videoPlayer.autoPlay = false;
onEnterFrame = function():Void{
videoPlayer.seekPercent(_xmouse/Stage.width * 100);
videoPlayer.play();
trace(videoPlayer.findNearestCuePoint(videoPlayer.playheadTime).name);
}
The recommended way would be to find the nearest cue point in an playheadUpdate handler which is triggered after the playhead changes it's value. (e.g. 1. tell the playhead to move, 2. the playhead actually changes the value, 3. the playheadUpdate gets called)
Here's a more basic approach:
onEnterFrame = function():Void{
if(videoPlayer.metadata) trace(videoPlayer.findNearestCuePoint(_xmouse/Stage.width * videoPlayer.metadata.duration).name);
}
In my test I've added 4 cue points. Tried them all: actionscript/event/navigation.
The strange thing was when I tried to access the cuePoints property through videoPlayer
or through videoPlayer.metadata I got an array of 8 undefined objects, and the length of the array was 4 when I traced it. Don't know what the issue is, maybe encoding/codec and as2 compatibility, not sure.
Anyway...as long as you've got your cuePoints array, you can manually find the closest one by looping though all of them and getting the smallest absolute difference between each cue point time and the current time:
function getClosestCuePoint(cuePoints:Array,time:Number):Object{
var numCuePoints:Number = cuePoints.length;
var minDist:Number = 100000000,result:Object;
for(var i:Number = 0 ; i < numCuePoints ; i++){
if(Math.abs(cuePoints[i].time - time) < minDist){
minDist = Math.abs(cuePoints[i].time - time);
result = cuePoints[i];
}
}
return result;
}
Here's a mockup example: let's pretend some boxes on the screen are the cue points and the _xmouse position would be the playhead time. Try this in a new document:
//fake cue points
var numCuePoints:Number = 5;
var cuePoints = [];
for(var i:Number = 0 ; i < numCuePoints ; i++) cuePoints[i] = {name:'narration ' + (i+1),time: 10 + (80 + Math.random() * 20) * i}
//visual hint - separated from the cue points
for(var i:Number = 0 ; i < numCuePoints ; i++) drawBox(this,0x009900,10,15,cuePoints[i].time,Stage.width * .5);
var playhead:TextField = drawText(this,'playhead');
//playhead update
onEnterFrame = function():Void{
playhead._x = _xmouse;
playhead.setTextFormat(new TextFormat('Verdana',11));
playhead.text = 'time: ' + _xmouse+' / cue ' + getClosestCuePoint(cuePoints,_xmouse).name;
}
//find the shortest marker within the shortest distance from the current value
function getClosestCuePoint(cuePoints:Array,time:Number):Object{
var numCuePoints:Number = cuePoints.length;
var minDist:Number = 100000000,result:Object;
for(var i:Number = 0 ; i < numCuePoints ; i++){
if(Math.abs(cuePoints[i].time - time) < minDist){
minDist = Math.abs(cuePoints[i].time - time);
result = cuePoints[i];
}
}
return result;
}
//utils
function drawBox(target:MovieClip,color:Number,width:Number,height:Number,x:Number,y:Number):Void{
target.lineStyle(3,color);
target.moveTo(x,y);
target.lineTo(x+width,y);
target.lineTo(x+width,y+height);
target.lineTo(x,y+height);
target.lineTo(x,y);
}
function drawText(target:MovieClip,name:String):TextField{
var result:TextField = target.createTextField(name,target.getNextHighestDepth(),0,Stage.width * .5-20,100,20);
result.autoSize = 'left';
result.border = true;
result.selectable = false;
return result;
}
HTH
George,
I believe I discovered the issue, and I think it was something that you covered in your previous post, but I glossed over it by accident.
The F4V I was working with had the cue points embedded using Adobe Media Encoder... and that was the entire issue.
I went back and exported the cue points out to XML, then stripped them out of the F4V and re-encoded it without them. Then I edited the XML to change all of the event cue point to actionscript and imported them into the FLA file using the FLV component properties dialogue.
Presto, amazingly enough, I had no issues finding the cue points, tracing them, and using them for any purpose.
So in the future, I just need to remember to set up the cue points in the Properties dialogue and set them to actionscript and I should be golden. So far, it has worked flawlessly with all of the F4V files since making the change.
Thank you very much for your detailed response and your follow up!

How do I apply the same animation to multiple items in AS3?

I have about 100 different MCs that I need to apply the following animation to.
total_bananas = 5;
frameCount = 0;
for (i=1;i<=total_bananas;i++)
{
thisMC = _root["mc"+i];
thisMC.startY = thisMC._y;
thisMC.rand = Math.random();
}
this.onEnterFrame = function ()
{
frameCount++;
for (i=1;i<=total_bananas;i++)
{
thisMC = _root["mc"+i];
thisMC._y = thisMC.startY + Math.sin(thisMC.rand*100+frameCount/10)*5;
}
}
how would I go about applying this animation to each of them individually? I don't need to populate 5 of the same MCs. This script is simply the perfect animation visually, but not lean and bespoke like it should be. I just need to make a lot of objects (all unique) bob up and down like they are tied to balloons. Also I was thinking this might be depreciated and there might be a waayy better way to do this.

Resources