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.
Related
I am trying to shrink a polygon by a specific amount where all edges in the new polygon are of equal distance to the old one. To explain better I have a picture here.
If the picture doesnt work I have a link here.
https://imgur.com/a/A27mVHs
This is a rough drawing.
I have a point array in ([x,y])
[[390,435], [388,430], [391,425], [425,428], [410,435]]
I am trying to shrink it so the new array
[[x1,y1], [x2,y2] ... [x5,y5]]
ensures that the distance between the new area and the original one is 2 at all sides of the area.
How can I do this by only manipulating the co-ordinates. I know I need some kind of scalar vector but I'm unsure how to do this. I am trying to implement this in javascript
In the general case this is indeed an arduous problem. But for a convex polygon, it is pretty easy.
At every angle, draw the bissector and find the point at distance of the vertex equal to d / sin α/2 where α is the measure of the angle.
Have you done some research because there is lots of topics in internet about that subject, the short answer is this is not easy because there is lots of edge cases (look this topic for exemple).
A good term if you want to look more and find nice libs to do this task for your is Polygon offsetting
Others good links :
An algorithm for inflating/deflating (offsetting, buffering) polygons
ClipperOffset
A Survey of Polygon Offseting Strategies
Javascript Clipper
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 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.
Ok, so... here's what I'm trying to do. In HTML/JS. With a math knowledge that would embarrass a twelve-year old.
With, say, 20 checkboxes on a page, the user picks.. five of them. A circle then appears on the page (I'd anticipate using one of the canvas libraries like Raphael) with their five answers arranged around it. So that's the first thing I don't know how to do; split a circle into x equal segments. Strange, foreign terms like "cos" and "sin" are looming on the horizon.
But then it gets even more fun: the user can click a point on the circle. And that point is translated into some sort of percentage value for each of the segments. So if the user checks Happy, Grumpy, Sneezy, Dopey and Bashful, and clicks the circle, I can tell them that they're 37% Happy, 42% Dopey and 21% Sneezy.
The best analogy is probably a colour-picker wheel, but I can't find any JS ones that I could repurpose. A pie chart is close - and there's a nice Raphael demo - but I've got a feeling that the fixed boundaries of a pie chart segment is going to take me down the wrong route for estimating percentage positions within the circle as a whole.
So, given my vague and poorly thought out request, and the noticeable absence of any "here's what I've tried so far" code - because I don't have the foggiest where to even start, apart from high school trigonometry books, can anyone suggest any code libraries or snippets that might get me at least pointing in the right direction?
Thanks :)
========================
Edit :
Wow, thanks for all the answers. I'll try to refine the question/s a bit:
I'm going to need to draw a circle with x number of points arranged equally around its circumference. The number of points will correlate to the number of checkboxes that the user checked.
That's the first bit I'm stuck on: I reckon that I can draw a circle, with dimensions and at a position on the page of my own choosing, (using Raphael or similar canvas library) but how can I calculate what the x/y pixel coordinates of those points should be on the circle circumference?
The second bit: the user then clicks anywhere in the circle. I guess what I'd do is calculate how far each of the circumference points are from that user click point - I'm not sure how to do that, apart from a vague suspicion it involves imaginary triangles - and then how much of a total distance each of those distances are. That last bit, at least, I can manage.
Actually, this is starting to make sense. I'm still not sure how the trig stuff works but it's amazing what typing your problem out so that strangers will understand it can do to help your own understanding...
You need to revise your question to explain more clearly what you are trying to do. In the meantime, I can give you the following information that may help you get started.
First of all, you'll need to know the locations of the five checkboxes that the user selects. In order to do this, the jQuery library offers some convenient functions such as $.position and $.offset.
Your question does not make clear exactly how the circle you want to draw is positioned in relation to the five checkboxes that the user clicks. As for actually drawing the circle, you may want to use something like the HTML5 canvas element. I've not yet used it myself, so I can't tell you much about it.
You might want to try asking another question on StackOverflow about how to draw a circle on your web page once you've computed the center and radius of the circle.
As for doing the math about the circle, you need to know that a circle can be parameterized on an x-y plane by the following equations:
x = x0 + r cos(theta)
y = y0 + r sin(theta)
where (x0,y0) is the center of the circle, r is the radius of the circle, and theta ranges over 0 to 2*Pi radians (0 to 360 degrees)
Let us know more about what you're doing and we can give you some more specific information.
I want to code a little Game, dealing with fonts and letters. I want to make them move arround in 2d space and i am using box2dweb as physics engine, what is actually doing a very great job. At the moment all I am struggling with, is the problem of building the b2Body for a Letter. Box2d can only handle primitive, convex shapes and to build an more complex hitbox I have to combine some of them. In the image I tried to figure out what i would like to reach, an algorithm, that takes an svg-path of a letter and generates a series of b2shapes which represent the hitbox.
All in all i have no Idea where i could find some Information about this, if there is a library that is capable of doing this. Even if this Library is not available in Javascript, i could do the job on Server.
I know that there is paper.js and raphalel, some clever vector libraries, but i have not found any hint how to solve this yet.
I would be happy for any kind of help, links to ressources, or the correct name of the problem in mathematical sense.
Greetings and thanks in advance...
Philipp
I just want to leave the result of investigation here, maybe someone will help it. The initial idea is based on »ear cutting«, »ear culling«, or »ear cropping«. A demo here will describe this. But the algorithm, which produces less, but box2d suitable polygons is shown in a demo here. The idea is to merge as much triangles as possible, as long as they are convex and this case, do not have more than eight edges. A triangle is suitable to be added to a polygon, if one can find two points in the triangle and two adjective points in the polygon, with the same x and y coordinates.