# Tween sprite with an arc.

## 11 posts in this topic

Hello!

Is there a way to tween a sprite to somewhere but with an arc? Like throwing a ball to the air and then falling.

Any examples are appreciated!

##### Share on other sites

They ways I have done this is either using multiple points or offsetting the sprite and then rotating it.

##### Share on other sites

I put something together for you on jsfiddle to show one way of achieving an arc using a straight tween on the x axis and Math.sin to create an arc on the y

http://jsfiddle.net/zHhus/

The relevant bit of the code is the function 'doTween'

`function doTween(){    //NOTE THAT Y GOES FROM ZERO TO MATH.PI    var from = {x:10, y: 0};    var to = {x:w-10, y: Math.PI};    var tw = new TWEEN.Tween(from);    tw.to(to, 3000);    tw.onUpdate(function(){        tweenX = this.x;        //THIS IS THE IMPORTANT BIT (h is the height of the canvas)        tweenY = h - (Math.sin(this.y) * h);    });    tw.start();};`

##### Share on other sites

Wow,thank you both! Really needed those tips! I'll test em out!

##### Share on other sites

I've made a bouncing ball example for my game, It can bounce to any direction you want, it doesn't do arcs though.

http://jsbin.com/rokelulo/21/edit?js,output

##### Share on other sites

I'm trying to implement what alex_h suggested but, god, math are too hard for my brain

All i want is for a ball to reach an object with an arc, and when it's there it should start falling with an arc. Anything simpler? If not, i'll try to implement what suggested already.

##### Share on other sites

Here's a little cheat using just tweens which will always exactly fly through the target point specified: http://jsfiddle.net/lewster32/9UjPy/

Cyclone112 likes this

##### Share on other sites

Here's a little cheat using just tweens which will always exactly fly through the target point specified: http://jsfiddle.net/lewster32/9UjPy/

That's a nice trick indead, may steal that method from you

##### Share on other sites

Of course, by all means steal, adapt, reuse and enjoy! I use this method to make pieces on a board in an isometric turn-based-game 'hop' from one place to the next. It's by no means 'physically accurate' but it looks right and allows total control over the movement.

##### Share on other sites

Oh my god lewster... Thank you !!!!!!

Thanks everyone for those awesome tips!

##### Share on other sites

Just updated the routine to fix a little issue when not starting from 0. Should work regardless of the positions of the ball and the target, and even work backwards and upside down

## Create an account

Register a new account