I would like to draw "moving" lines using JavaScript and Canvas. Basically, I have a bezier curve I would like to draw, but instead of drawing the curve all at once, I would like to draw pieces of the curve over time so it looks like it is growing. A better explanation might be: I would like the line to start to the origin, and then move to the destination point over time. What is the best way to achieve this?
I created a jQuery plugin called jCurvy that allows you to place elements along a bezier curve. You could use jCurvy along with the fadeIn method and a callback to do what you are talking about. Take a look at the example I setup here:
http://jsfiddle.net/pFZss/2/
If you do end up going this route and you run into any problems, please let me know. I'm pretty sure you'd be one of the first people to use the plugin, so I'd love some feedback.
I was looking for a way to do the same thing, and found the jQuery Tween and jQuery Curve plugins, described and demoed here:
http://heygrady.com/blog/2011/07/20/animating-with-curves-in-jquery/
Use setTimeout or setInterval. You can also use animate function
Related
I want to create a HTML5 canvas animation likely the one on this site: https://flowstudio.co/.
I have started with GSAP, but it looks like creating something like this, is really a big task.
I have to create mostly every point/move singular and i have no idea if there is a faster/better way.
Currently i only have looked at GSAP without plugins.
Is there some special tool/(GSAP) plugin that can help to create this?
Or should i maybe use d3.js?
I also tried to find an tutorial for this, but it looks like there is nothing for this more advanced case.
Thanks for the help!
The example you provided is using THREE.js and I would suggest you to use it too since you want to operate in 3D space also.
When you want to animate a large ammount of points you will need to use a vertex shader. That's because vertex shader will allow you to calculate all of the points positions in one step (thanks to parallel computing on the GPU), whereas doing it the 'normal way' (on the CPU) is very bad on performance, since every single point has to be calculated one by one. (here you can see the difference)
The way you animate the points is a little different than you might think- you don't want to apply animation to every. single. point...
Instead you will need three things that you will pass to the shader:
-array containing starting points position,
-array containing final points position,
-blend parameter (just a float variable taking values from 0 to 1).
Then you use GSAP to animate only the blend parameter, and shader does the rest (for example when the blend parameter is 0.5 the point position is exactly halfway between starting position and final position that you provided to the shader)
The example you provided is also using some kind of Perlin Noise function which you will have to implement in the shader also.
Its a lot to bite at one time but here's some great tutorials from Yuri Artyukh which will help you achieve something similiar:
https://www.youtube.com/watch?v=XjZ9iu_Z9G8&t=5713s
https://www.youtube.com/watch?v=QGMygnzlifk
https://www.youtube.com/watch?v=RKjfryYz1qY
https://www.youtube.com/watch?v=WVTLnYL84hQ&t=4452s
Hope it helps and...good luck!
I'm trying to do an animation: move a life-belt on water very slowly, floating on the sea across waves and wind.
For code, I would like to make a div following a path. I'm using Popmotion for moving and reversing the animation (with the option {yoyo: true}).
I saw this example but a random position is a bit tricky and creates a "stop" before running again the animation, this is not like a realtime random trajectory.
http://jsfiddle.net/Xw29r/375/
Is it possible to do something like this in javascript/SVG?
I actually created Popmotion so I want to help you in the right direction here.
To get the non-straight lines you can play around with asymmetric easing. For example the first movement there, if you gave y an easeIn and x and easeOut the line would bend, maybe not completely to your liking but you can play around with different easing strengths to get a good combination.
You could also look into using the Simulate action instead of Tween, maybe the spring physics with a high initial x movement and playing around with spring and friction properties.
You don't have to use yoyo, you could write an onComplete function that starts the actor again using new randomised properties.
Hopefully some of these tips are helpful to you!
I need to animate a curve from one point to another using Mapbox.js.
I looked through the official examples and I saw that simply drawing the line is very easy using Arc.js.
So I thought, is it possible to export points of the curve that is made with Arc.js and use them to animate a line using Mapbox.js?
Or only possible way to animate lines is coming up with formula?
Just like in movies, animation is simply a series of still images: you would take the arc generated by Arc.js, make 'frames' of sub-sections of it, and call .addData or .setGeoJSON() repeatedly, depending on whether you're using L.geoJson or L.mapbox.featureLayer. You would do this on a setInterval or setTimeout or requestAnimationFrame in order to run the calls across time.
I'm completely new to canvas and animating objects with it. I did a little bit of research (e.g. I found RaphaelJS) however I couldn't find any general answer or tutorial on how to create a "morphing" circle.
The image I posted here is what I would like to do:
I'd like to create one circle that is endlessly animated via a randomizer and is slightly morphing its contours.
I know this might be not a "real" question for this forum, however I just wonder if anyone could provide a few tipps or tricks on how to do something like that.
By "how to do something like that" I'm speaking actually about the technique on how to morph a circle. Do I have to "mathematically" create a circle with dozens of anchor-points along the edge that are influenced by a randomized function?
I would really appreciate some starting help with this.
Thank you in advance.
A circle can be reasonably well approximated by 4 cubic curves (one for each quarter and the control points on the tangents - google for the correct length of the control segments or calculate them yourself - see here. You could then randomly animate the control points within a small radius to get a wobbling effect.
Do I have to "mathematically" create a circle with dozens of anchor-points along the edge that are influenced by a randomized function?
Yes, you do, although it should not be necessary to create "dozens".
You may find the .bezierCurveTo() and .quadraticCurveTo() functions useful to provide smooth interpolated curves between control points.
When you can use a raster image then for every point you can displace it along the x-axis with a sin function. You can run the same function along the y-axis but instead to simply displace the pixel you can double it. This should give you a morphing circle but it also works with other shapes.
I'm just getting started with three.js and I'm trying to make a very basic animation sequence. I've gone through the basic examples and see how to make objects move and spin, but I don't quite get how to structure a series of animation sequences.
For example...
Show 3 cubes and move them to a new position (ideally staggered a bit so as not to move at the same time)
THEN once they've all arrived, make two of them rotate an axis
THEN move them to a new position
etc...
There is no user interaction with what I'm building - it's just a series of movements that happen in sequence. Do people use something like Frame.js for this sort of thing or is there something simpler that I'm overlooking?
Try out director.js - simple but effective.
https://github.com/zz85/ThreeLabs/blob/master/Director.js
There is somewhere a longer showcase, can't find the link, though.
Tween.js is one choice:
https://github.com/sole/tween.js/.
Tutorial:
http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/
Example:
http://learningthreejs.com/data/tweenjs_for_smooth_animation/tweenjs_for_smooth_animation.html