Develop Reference

Generate Code to represent Tony Stark palladium neck effect

I am trying to create an animated, random generated, palladium toxicity neck effect like the one Tony Stark has on his neck in Ironman 2.
My first thought was to create it using SVG's auto generation with a loop to split off as children.
https://codepen.io/tony-hensler/pen/gOPBJWO this didn't go to well at all, I'm not keeping track of the children as they are created, and the lines seem too robotic and ridged.
I have also had a look at altering the code provided on https://codepen.io/Tibixx/pen/MZWRzJ
By altering the following values:-
var cx;
var cy;
but unfortunately this also didn't work out.
My next attempt it to generate a JSON with all of the required coordinates, and then generate a canvas with the lines drawn out.
I defiantly think SVG's are not the was to go with this, so I am going to have a look at drawing it on a canvas.
I maybe overthinking the process with storing the JSON.
How else can I attach this task? Any help with a push in the right direction would be amazing.

Have you tried changing the Recursive Lightning pattern in such a way that instead of drawing a direct line from (sx,sy) to (cx,cy), you draw two lines (one vertical and one horizontal) ? Essentially you replace the hypotenuse with the two other sides of the right triangle.
I don't have a code example yet but can imagine this working well.
EDIT:
Here is an example of the result. I worked on the original codepen instead of forking it as well. Do not forget to change both the draw() and the split() functions.

Canvas HTML5 animation with GSAP/d3.js

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!

JS: Move a div following a defined trajectory/path

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!

Position resizable circles near each other

I am working on this browser-based experiment where i am given N specific circles (let's say they have a unique picture in them) and need to position them together, leaving as little space between them as possible. It doesn't have to be arranged in a circle, but they should be "clustered" together.
The circle sizes are customizable and a user will be able to change the sizes by dragging a javascript slider, changing some circles' sizes (for example, in 10% of the slider the circle 4 will have radius of 20px, circle 2 10px, circle 5 stays the same, etc...). As you may have already guessed, i will try to "transition" the resizing-repositioning smoothly when the slider is being moved.
The approach i have tried tried so far: instead of manually trying to position them i've tried to use a physics engine-
The idea:
place some kind of gravitational pull in the center of the screen
use a physics engine to take care of the balls collision
during the "drag the time" slider event i would just set different
ball sizes and let the engine take care of the rest
For this task i have used "box2Dweb". i placed a gravitational pull to the center of the screen, however, it took a really long time until the balls were placed in the center and they floated around. Then i put a small static piece of ball in the center so they would hit it and then stop. It looked like this:
The results were a bit better, but the circles still moved for some time before they went static. Even after playing around with variables like the ball friction and different gravitational pulls, the whole thing just floated around and felt very "wobbly", while i wanted the balls move only when i drag the time slider (when they change sizes). Plus, box2d doesn't allow to change the sizes of the objects and i would have to hack my way for a workaround.
So, the box2d approach made me realize that maybe to leave a physics engine to handle this isn't the best solution for the problem. Or maybe i have to include some other force i haven't thought of. I have found this similar question to mine on StackOverflow. However, the very important difference is that it just generates some n unspecific circles "at once" and doesn't allow for additional specific ball size and position manipulation.
I am really stuck now, does anyone have any ideas how to approach this problem?
update: it's been almost a year now and i totally forgot about this thread. what i did in the end is to stick to the physics model and reset forces/stop in almost idle conditions. the result can be seen here http://stateofwealth.net/
the triangles you see are inside those circles. the remaining lines are connected via "delaunay triangulation algorithm"

I recall seeing a d3.js demo that is very similar to what you're describing. It's written by Mike Bostock himself: http://bl.ocks.org/mbostock/1747543
It uses quadtrees for fast collision detection and uses a force based graph, which are both d3.js utilities.
In the tick function, you should be able to add a .attr("r", function(d) { return d.radius; }) which will update the radius each tick for when you change the nodes data. Just for starters you can set it to return random and the circles should jitter around like crazy.

(Not a comment because it wouldn't fit)
I'm impressed that you've brought in Box2D to help with the heavy-lifting, but it's true that unfortunately it is probably not well-suited to your requirements, as Box2D is at its best when you are after simulating rigid objects and their collision dynamics.
I think if you really consider what it is that you need, it isn't quite so much a rigid body dynamics problem at all. You actually want none of the complexity of box2d as all of your geometry consists of spheres (which I assure you are vastly simpler to model than arbitrary convex polygons, which is what IMO Box2D's complexity arises from), and like you mention, Box2D's inability to smoothly change the geometric parameters isn't helping as it will bog down the browser with unnecessary geometry allocations and deallocations and fail to apply any sort of smooth animation.
What you are probably looking for is an algorithm or method to evolve the positions of a set of coordinates (each with a radius that is also potentially changing) so that they stay separated by their radii and also minimize their distance to the center position. If this has to be smooth, you can't just apply the minimal solution every time, as you may get "warping" as the optimal configuration might shift dramatically at particular points along your slider's movement. Suffice it to say there is a lot of tweaking for you to do, but not really anything scarier than what one must contend with inside of Box2D.
How important is it that your circles do not overlap? I think you should just do a simple iterative "solver" that first tries to bring the circles toward their target (center of screen?), and then tries to separate them based on radii.
I believe if you try to come up with a simplified mathematical model for the motion that you want, it will be better than trying to get Box2D to do it. Box2D is magical, but it's only good at what it's good at.

At least for me, seems like the easiest solution is to first set up the circles in a cluster. So first set the largest circle in the center, put the second circle next to the first one. For the third one you can just put it next to the first circle, and then move it along the edge until it hits the second circle.
All the other circles can follow the same method: place it next to an arbitrary circle, and move it along the edge until it is touching, but not intersecting, another circle. Note that this won't make it the most efficient clustering, but it works. After that, when you expand, say, circle 1, you'd move all the adjacent circles outward, and shift them around to re-cluster.

What is the best way to draw a moving line/curve?

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