I'm trying to draw this wavy pattern using p5.js
I tried using a sine wave, but notice sine waves don't have a the peaks vertical and are pointed
Is there a way to do this with using mathematical functions?
Or should I manually draw this by traversing a point vertically + making semi circle peaks manually and so on
I would also like to build upon this wavy pattern and put it inside shapes and maybe skew it in a curved shape
Related
I’m working on 2d map, where I have to render buildings (polygons with some fill and border colors). Three.js library used. I use shader where GLSL program handle rendering of all buildings as well as hover/select effects by changing the colors.
The problem with borders of buildings. The barycentric coordinates approach is used for rendering of borders: https://stackoverflow.com/a/18068177/3093329
In simple cases of square building I have to specify which diagonal lines (edges) have to be eliminated and it easy because it always the same. But in cases of more complex shapes of building I can't define these edges easily because they always are different:
So, is this approach the only one way how to render borders of polygons? How can I define which edges have to be eliminated in complex cases?
I have randomly generated some points on a JavaScript canvas I was wondering what the most efficient method would be to draw triangles connecting the points in a uniform fashion. The goal is to have the triangles fill the entire canvas without overlapping.
For a visual representation, here is an image of the points I have randomly generated across a canvas. As you can see I may have to modify the way I randomly place the points on the canvas.
And this is how I wish to draw the triangles.
Thanks to #Phorgz & #GabeRogan for pointing me in the right direction. Delaunay Triangulation was definitely the way to go and it ended up being very fast, even when updating the canvas as an animation.
I did end up using the npm package faster-delaunay which uses the divide and conquer algorithm to triangulate the randomly generated points.
Here is a result of what I have drawn on the canvas that updates as the points move around the plane:
I'm trying to learn more about programmatically drawing and animating shapes using javascript. I'm trying to recreate something like this:
The base shape is a circle which I want to add series of jagged peaks and valleys of various sizes (distortion/zigzags). I also want to add some sliders with dat.GUI where I can control:
Points (number of vertices added between existing vertices in the circle. The density of jagged edges.)
Size (maximum length for segment paths.)
The speed of the animation.
It similar to how Wiggle Path in after effects works.
What is the best practice to recreate an animation like in the gif above?
Is using requestAnimationFrame and drawing on canvas a good solution because it's an "live" animation (not looping)?
Or is using a library like two.js to draw SVGs a better solution in this case?
Keep in mind that I want the animation randomly generated over time, and its a learning process where I'm looking for a starting point.
There isn't any code included in the question to address, so here's a general run-through:
The wiggle path in After Effects works by splitting each line segment into several points using interpolation.
p = p1 + (p2 - p1) * t; // t = [0, 1]
// t is a result of length / points, then each segment length / length.
Each point is assigned one or several oscillators (the more oscillators the more complex the movement, or put differently: more variations) that starts at a random angle moving the point perpendicularly to the line it sits on. For circles you can see the circle as a single line where interpolation is based on angle instead of distance.
Rotate each oscillator based on temporal phase (speed) and their radius based on spacial phase. Here Math.sin() can be used for the y-position of the point along the perpendicular line. For increased complexity you simply add more sin() together each at a different frequency. If you want to normalize the output is up to you.
Connect the points using lines, or to make it smooth like in the example gif, use for example cardinal splines which goes through the points and takes n points (disclaimer: the linked solution is MIT, author here).
If you need the shape to start as the same shape each time (like in AE) you will need to implement a custom random function so you can control the seed value at the beginning of the animation.
An alternative to use oscillators is to use Perlin / Simplex noise, but this require you to calculate much more data to obtain the same result.
If you use SVG, canvas or something else doesn't really matter as long as you understand how it works and why you're using it.
Im going to try to explain this as best as I can.
I have a centerpoint defined on a canvas element where I am using Kinetic JS to draw triangles.
What I want to do, is create an array of coordinates based on the center point of the excircle radius of a triangle (Kinetic draws regular polygons by using the excircle radius) to see how many of the triangle center points will fit on the canvas in a grid structure. Think this but bigger:
Now Ive already done this with squares because they fall in the same interval from the centerpoint on both the X axis and the Y axis. However with triangles this ends up being different due to where the radius center point of the excircle on a triangle is. Here is a semi clear picture illustrating the interval difference:
Now these coordinates HAVE to be pushed into an array in a very specific way, or else the way I have planned for them to interact will not work correctly.
Ultimately I want to find the bottom most triangle coordinate possible. Find out if that triangle is flipped at 180 degrees or 0 degrees respectively while making sure the centerpoint of the entire canvas is touching the vertex of a triangle.
Sounds complicated? It is. Ive been trying several different methods and racking my brain for two weeks now, and I cant figure out an algorithm that will allow me to do this from any canvas size possible.
Aloha,
is there any possibility to make the bundles in this visualization:
... look just like the bundles in that visualization
?
I have no idea how to achieve this in d3.
EDIT 1:
Obviously I have to write a custom interpolator. How can I extend the bundle interpolator to additionally interpolate between two colors without changing the d3 library?
Unfortunately, neither SVG or Canvas support stroking a gradient along a path. The way that my dependency tree visualization is implemented is as follows. For each path:
Start with a basis spline (see Hierarchical Edge Bundling).
Convert to a piecewise cubic Bézier curve (see BasisSpline.segments).
Convert to a piecewise linear curve (i.e., polyline; see Path.flatten).
Split into equal-length linear segments (see Path.split).
Once you have these linear segments, you color each segment by computing the appropriate color along the gradient. So, the first segment is drawn green, the last segment is drawn red, and the intermediate segments are drawn with a color somewhere in-between. It might be possible to combine steps 2-4 by sampling the basis spline at equidistant points, but that will require more math.
My dependency tree is implemented in Canvas, but you could achieve the same effect in SVG by creating separate path elements (or line elements) for each segment of constant color. You might get slightly better performance by combining segments of the same color.