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.
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!
How can I draw a Bezier Line between two non-static DOM elements, like this:
The two lines should be drawn between the
<div class="brick small">Line starts here</div>
and the
<div class="brick small">Line ends here</div>
of this CodePen: https://codepen.io/anon/pen/XeamWe
Note that the boxes can be dragged. If one of the elements changes its position, the line should be updated accordingly.
If I'm not wrong I can't use a canvas, right? What can I use instead?
Let me point you toward the answer I beleve you're looking for, it's a dom element type called 'SVG' which is supported by most if not all web browsers of today (so you won't need to plug in anything external), in which you can draw lines, shapes, apply graphical filters much like in Photoshop and many other useful things, but the one to be pointed out here is the so called 'path', a shape that can consist of both straight lines with sharp corners, or curved lines (bezier) or both combined.
The easiest way to create such paths is to first draw them in for example Illustrator, save the shape in the SVG format, open that file in a text editor and pretty much just copy the generated markup code and paste it into your html, as it is supported there. This will result in the drawn shape to be displayed on your site. But in your case, you won't come around the a little bit complex structuring of the paths, because you wish to have control of it using javascript, so I would suggest first making a few simple paths in this way by exporting from Illustrator, study these in code, then manipulate their bezier values in javascript until you get the hang of how they work, once you've done that you will be able to create the accurate bezier shape you have in mind and (knowing the positions of the elements you want to connect) position them so that they connect your boxes.
Paths can even be decorated with markers, like an arrowhead in the end or beginning of the path, you can even design your own markers as you like them to look and much more if you would dig deeper into it.
Good luck! :)
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.
Any ideas on where to even begin with making a violin chart using d3? Does it exist already?
I've looked around and have figured out how to do it using ggplot2 and was hoping there'd be a ready-made example that I could learn from but haven't found one yet.
I suppose I could do a really painful process of making various size bars on top of each other, or taking a distribution, rotating it and mirroring it. But surely there's a better way.
I needed that for myself so here it is: violin plot
As far as I know, nobody has done this before, but it shouldn't be too hard. I would start as if I was making a line chart (or boxed instead of lines) for one half of a violin. That is, create the appropriate x and y scales and add the data in. The result of this I would rotate and translate to the correct position. Then do the same thing again and mirror it as well to get the other half of the violin.
This may sound complex, but SVG has built-in support for these operations (rotating and mirroring). You should be able to approach this pretty much like drawing a line graph of the distribution with 2-3 simple operations on top of that. Wrap everything in a function and you've got something you can call to create a violin.
It of course also depends in what form you have the data to make the plot. A line plot might not be feasible because of too few data points, but then you can easily use bars instead.
I'm trying to animate a circle being drawn - here's a simplified version of what I'm doing:
http://jsfiddle.net/DQz37/1/
Problem is: I get slight lines / distortion between each line segment. Like this:
The constraints I'm dealing with are:
I need to render more than one circle on the same canvas, sometimes circles overlap
I need to render the circles using transparency / rgba coloring
I need to animate the rendering of the circles (so they look like they are being drawn)
Is this a common issue? How do you handle this kind of thing?
One easy way to fix this is to always be drawing one path, that way you guarantee that they will be connected well.
So instead of arcing from A to B and then B to C and then C to D, you arc from A to B, clear the canvas, arc from A to C, clear the canvas, arc from A to D, etc.
Here's a modified code bit as an example:
http://jsfiddle.net/ZV7rv/
Edit: In response to the comment, this is how to achieve the same thing while using a canvas buffer to keep the same state that was the canvas previously:
http://jsfiddle.net/7vVBC/
Basically, you want to compose two paths and join them perfectly without any seams, but that won't work, or if you are really lucky and it works in one browser, probably it's not going to work in another one. This is because the antialiasing algorithms are not implemented exactly the same, or might even be hardware accelerated and passed down to the videocard.
Hint: it's not possible to disable antialiasing.
As a programmer you keep stumbling into all kinds of issues that are not easy to do or convenient, and at that moment you need to step back a bit and reevaluate your choices. This is one of them.
Your only option in your specified constrains will be to redraw everything on each frame, or don't use alpha, and overlap segments a bit to make sure you don't have spaces because of antialiasing.