Custom controls based on grid

[foumfo]

I've already checked the first post and I think that using a library to increment a meshes position by a small amount in order to create an animation, would be very taxing to the cpu. Correct me if I'm wrong.

Your second post, could I use that part of code as is?

[Snouto]

29 minutes ago, foumfo said:

I've already checked the first post and I think that using a library to increment a meshes position by a small amount in order to create an animation, would be very taxing to the cpu. Correct me if I'm wrong.

Your second post, could I use that part of code as is?

For the first link I was referring to the specific comment I've linked to, where DK says "However for future reference, as DK mentioned - I always use a parent node to provide the coordinate system by which objects are animated.". I throwing ideas at you hoping something will stick

As for the second post, I don't know, but you could try and let us know the results.

[foumfo]

1 hour ago, Snouto said:

For the first link I was referring to the specific comment I've linked to, where DK says "However for future reference, as DK mentioned - I always use a parent node to provide the coordinate system by which objects are animated.". I throwing ideas at you hoping something will stick

As for the second post, I don't know, but you could try and let us know the results.

Let's say I've added a parent node. Won't this command:

BABYLON.Animation.CreateAndStartAnimation();

use the GLOBAL axis despite the parent?

[Wingnut]

Yes it will.  https://www.babylonjs-playground.com/#1MK1Y4#17

Still global for the translation moves.  In the above PG, I do both spin and move... on the parent.

We have to be missing something, here.  hmm.

------------------------------------

https://www.babylonjs-playground.com/#1MK1Y4#18

In the #18 playground, I spin the parent, but move the player.  Things work ok until the player is some distance from the parent.  Then spin again.

Player makes a long arc move, placing it far-away from its correct position on the grid.  Perhaps we need to reset the parent... to be atop the player... after every move?

Hmm.  Crazy.

I asked Snouto to help us out, here, because he has done some recent work with lerps.  I think... we need to grow some lerp "paths"... and feed those values to mesh.translate()... to get a localspace eased animation.

I heard that @Pryme8 has done some lerp-o-lations, too.  We're looking to do localspace eased animation on the colored player box, Pryme8.  Got any ideas?  (thx!)

And thx for coming on-board with us, Snouto.  I appreciate you taking time from your project... to look at this challenge... real nice of ya.

Localspace eased animation using translate().  Whooda thunk it would be so "elusive"? 

We gotta be missing something obvious... it seems.  *scratch scratch*  It must be one of those "can't see the tree because there is a forest in the way" things. 

Somebody built a "character controller"... and its laying around here somewhere.  Anyone know anything about that?  Usable here?

[foumfo]

https://www.babylonjs-playground.com/#1MK1Y4#24

Just did it.

I had to remove the left and right movement in order to make everything simpler

[Wingnut]

Now you have only 90 degree turns.  It still fails with 45's.

https://www.babylonjs-playground.com/#1MK1Y4#25

Good discoveries, though.  Thx for reporting.  If this works for you, great... but... I want to keep thinking/working on localspace animating.

I know I'm missing something obvious (but not matrix transformations... I never miss those)... even though that's probably what is needed.

hmm. 

[Pryme8]

http://www.babylonjs-playground.com/#K1LI48#1

This will do it.  Just need to add the rotate controls, but this will support moving locally what ever your rotation is.

[JohnK]

https://www.babylonjs-playground.com/#1MK1Y4#26

Added a couple of refinements. Added 45 deg movement. As you seem to want to move on a grid of squares have blocked movement when at 45 deg angles (if you want this possibility then new directions and movement amounts of sqrt(2) are needed). Added a small box on top so easy to see front. Also key presses when animation is taking place miss-aligns the box so have prevented movement when animating.

Need to note that adding 7 modulo 8 is the same as -1 but prevents negative results.

Have fun.

[Pryme8]

So I thought 

window.addEventListener("keypress", playerMovement, false);

was bad convention in a playground?

[foumfo]

3 minutes ago, JohnK said:

https://www.babylonjs-playground.com/#1MK1Y4#26

Added a couple of refinements. Added 45 deg movement. As you seem to want to move on a grid of squares have blocked movement when at 45 deg angles (if you want this possibility then new directions and movement amounts of sqrt(2) are needed). Added a small box on top so easy to see front. Also key presses when animation is taking place miss-aligns the box so have prevented movement when animating.

Need to note that adding 7 modulo 8 is the same as -1 but prevents negative results.

Have fun.

Nice, thanx a lot for the way to prevent the box from moving again after keypress while its still moving.

I have an idea. lets say we still want to use this method:

BABYLON.Animation.CreateAndStartAnimation() 

I've checked that we can have 2 such animations simultaneously, one for the x and one for the z axis. That means that after the right calculations, the mesh can move diagonally in any way.

And by calculations I mean something like using the sin or cos of the given angle. I'm still looking into it.

 

27 minutes ago, Pryme8 said:

http://www.babylonjs-playground.com/#K1LI48#1

This will do it.  Just need to add the rotate controls, but this will support moving locally what ever your rotation is.

Your way has to do with actual movement and not hard coded animation correct?

[Pryme8]

yeah, mine is based of of positions and some quick maths (the ting go skkkaaattt {I hope someone gets this reference}) to translate the players position.

If you use yall's method for rotating the cube this should work right away with it as its transforming the position of the player locally.

[foumfo]

34 minutes ago, JohnK said:

https://www.babylonjs-playground.com/#1MK1Y4#26

Added a couple of refinements. Added 45 deg movement. As you seem to want to move on a grid of squares have blocked movement when at 45 deg angles (if you want this possibility then new directions and movement amounts of sqrt(2) are needed). Added a small box on top so easy to see front. Also key presses when animation is taking place miss-aligns the box so have prevented movement when animating.

Need to note that adding 7 modulo 8 is the same as -1 but prevents negative results.

Have fun.

There is a small delay between the moment the animation stops and the moment the keypress is accepted. For a second I think the box stands still no matter what

[Pryme8]

tis cause you are easing in and out.

 

[foumfo]

2 minutes ago, Pryme8 said:

tis cause you are easing in and out.

 

There's no way to avoid that right?

[Pryme8]

http://www.babylonjs-playground.com/#K1LI48#2
or
http://www.babylonjs-playground.com/#K1LI48#3

[foumfo]

1 minute ago, Pryme8 said:

http://www.babylonjs-playground.com/#K1LI48#2

Nice, your code needs a lot work to implement into mine. I'll see if I'll manage that thank you.

 

[Pryme8]

any questions hit me up, I'm always around... (might be busy but ill get back to you).

And the beforeRender Observable needs to be reworked to prevent the repeat sections for conditions, I was just being lazy. 

Here is one with better easing:

http://www.babylonjs-playground.com/#K1LI48#5

[Pryme8]

http://www.babylonjs-playground.com/#K1LI48#6

I think this is more what you are looking for, as far as responsiveness...

you can hold keys down now as well

[Wingnut]

Babylon GUI-Bar-Graph Lerp Array Plotter/Visualizer, version 1.0!  Feed it Path2d, a Path3d, a log(), an array of lerpity-lerp... it'll display it all, and let you scale timebase and amplitude ranges.  COOOOOL.

Let's grow some waveforms! 

Ya didn't do any lerping, P8!  I thought you were a lerpmeister.    I figged you'd show us how to grow ANY lerp-transition with ANY easing across ANY time-scale and having ANY move-distance.

Pfft.  (Just funnin' with ya, P8).

Snouto's slerp for rotation looks fine.  That yawPitchRoll() func can do any rotation, and Quaternions are a dataType that is allowed for BJS animation system.  In fact, we have two kinds of eased turn, now.

I think the eased translate (move)... needs linear interpolation, then feed to player.translate()... repeatedly... at a frame rate speed... maybe stepped-along with 'deltaTime' or getAnimationFrame(), whatever THAT does.

But, path visualization... (plotting the lerp array so we can see it better)... you know... we haven't got the best of tools yet, me thinks.

And then there's that OTHER issue... will the lerp array hold worldspace .position values, or localspace amount-of-change-since-last-change values [ for .translate() ]  hmm.

[Wingnut]

https://www.babylonjs-playground.com/#1MK1Y4#28

Doing a little Bezier work today, just for fun.  Stole some Bezier-growing code from another BJS user... and you can see it plotted in orange over the player box.

Ideally, I would have liked an Isosceles_trapezoid ... you know... ramp up to full speed, hold there for awhile, ramp down to stop.  But, that was difficult to plot.  So, I used a cubic Bezier.

The Bezier generator is at line 123, its caller at line 137, and the number of vector3 values in the cubicBezierVectors array... is set at 100 (line 142).

I'm using its ever-changing Y value... as player Z-translate values... in the translate animators... lines 62 and 70.

Everything is working... W-S-Q-E keys active, but the Bezier-powered translation anims... are finishing VERY fast.  Not sure how to slow them down, yet. 

First time this geezer... has played with an eezer.      I'm sort-of impressed with my skills (at stealing code).  heh

[Wingnut]

Okay, deep thoughts happening.  I REALLY need to STAY... within the BJS "approved animation system".

So the actual issue here... is:  I can't animate local-space position... because there is no mesh.localPosition property for the animation to use.

I went looking at the transformNode... a recent addition to BJS... sort of a layer of abstraction for the AbstractMesh class.  (I'm speaking abstractly, here.) 

This is where .translate() lives, and also .setPositionWithLocalVector().  But no .localPosition property.

SO, this brings us to... umm... ahem... using an animation to executeCodeAction(animatedValue). 

That would be an EXTREME bastardization of an 'Animation', eh?  But, it has features.  I get my easy-use of easings, the power of frameRate, the power of ANIMATION_MODE (cycle, relative, ping-pong), etc.

I'm scared.   Such a "feature" would seriously change our solution-chasing, here, I think. 

Has anyone ever used a BJS animation... to repeatedly call a function(newValue)... instead of setting a property = newValue? 

I wonder.  It's a weird idea, huh?  Greasy. 

"Teaching Your Animation To Be A Task Scheduler" - Foumfo Publications International - Available June 1st at finer booksellers everywhere. 

Ohhh... wait a minute.  AnimationEvents.  We already have THOSE things.  hmm. 

So we make an animation that does NOTHING.... except fire animationEvents at frame-rate. The 'easing' happens in the animEventHandler(sentValue), not in the animationEvent occurrence rate.  The frameRate/eventFiring happens at a fairly constant rate.  The values that get provided... animEventHandler(here) ... are the values from normal Animation CubicEase, like those used in move() and moveTo()...   starting with small values, getting bigger, then smaller again.

Wow.  It could be done.  Each event... IS the executeCodeAction [its event handler is].   Cool!

I hope AnimationEvents carry the 'current' animatedValue.  We need that so we can send it to .translate() or .setPositionWithLocalVector().  hmm.

http://doc.babylonjs.com/classes/3.1/animationevent  AnimationEvent doesn't carry the current value, but it carries frame which SHOULD be an index into the interpolation array (to get the current value), if we have access to the interpolated array.  hmm.

[Wingnut]

I had another bad idea.    https://www.babylonjs-playground.com/#1MK1Y4#29

Line 136.  I am/was going to OVER-RIDE (replace) the setter function on player.playerBox.position.  (line 136).

I figged the standard BJS animation MUST do its value 'pokes'... via the setter func on .position.  I can hack that setter func, maybe.

But then I thought... hey... I'll make my own property... .localPosition, and tell the Animation to animate THAT property instead (line 53).  Then I would wedge-into ITS setter, intercepting each attempt the Animation makes... to set .localPosition... and instead... I would do a translate(). 

That hasn't worked yet, but I'm new to installing custom properties and their setters and getters.

Just crazy demented mad scientist activity.  heh.  How to fool a BJS Animation into running a function for each frame-update... instead of doing a property setting?  hmm.

(Wingnut notices some security border "burns" on his toe, finger, and nose tips.  He also notices a little padlock icon next to .localPosition... in the Firefox/Firebug object inspector.) 

Help welcome, as always.

update:  https://www.babylonjs-playground.com/#1MK1Y4#31

Above... Press W or S (even after pressing Q or E). 

I'm ease-animating the new property .localPosition using standard CreateAndStartAnimation() in line 37. 

Down at lines 113-121, I intercept the inbound-to-setter floater value, and use it in a playerBox.translate() at line 114.  Gruesome!

The floater values ARE eased (start small, get big, then small again).  Watch the box when pressing W or S.  It is an 'eased' launching... but then it goes to the moon, or somewhere.  heh.  She's a little 'hot'.    (part of the fun!)

Intervening in Animation-driven setter calls!  Holy crap.  Whooda thunkit!  How dare us?  How totally audacious and 'forward' of us, huh?    FUN! 

Now, why is the player rocketing to the other side of the planet... with each W or S keypress?  hmm.  Something in line 116 needs adjusting/scaling, or perhaps a problem with amt param in line 37.  Butt hay, we got anim!  PARTY!

Latest: #32  Workin' pretty good.  Held keypresses not working well, yet.  Each W or S animation takes too long to finish, or something.  Lines 50/56 adjust anim speeds.  YAY.  We're using BJS animation on a .translate().  CreateAndStartAnimation() - standard and used.   player.playerBox.localPosition setter... hacked silly.