I have created below SVG using svg.js 2.7
Now I want to draw all possible polygons made based on lines intersection with other line and outer rectangle.
I have got all intersection points for lines and lines intersection with the outer rectangle using svg.js plugin svg-intersections-js
My requirement is, I want to display a hover effect for every possible polygon.
Edit 1: Line position and alignment are dynamic.
Is it possible?
Related
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
I'm trying to find points inside a non-uniform polygon (N edges) drawn on a canvas(JavaScript) by doing the following:
First getting all the lines across the width of the canvas and looping through it to find the intersection of each line with how many polygon edges. If intersection is more than two then trying to get the points of intersection. Using this i'm trying to get the points between these points of intersection which will be the points inside polygon.
I'd like to position svg elements (say, ellipses) along a path, for instance a curve generated with a d3.js line generator with B-spline interpolation. While finding the coordinates of points along the path is easy using path.getPointAtLength(), I can't figure out how to find the tangent of any point on the line. If I could get the tangent (or the derivative), I would be able to rotate the elements accordingly to make them look as if they are positioned along the line.
Call path.getPointAtLength() at two points close together. Calculus tells us the difference is the slope/tangent at that point.
I am following the link http://bl.ocks.org/mbostock/7607535 to pack circles. I have gone through the pack layout and could not find pack.position to customize the position of circles to be packed. Currently I have the following output with my data where 5 circles are randomly positioned inside the circle.
But I want to customize to the dice pattern like the following
Could anyone help me to customize the position of circles.
I would like to know whether it is possible to customize the position(Override default position method).
Apologies if this is the wrong overflow to be posting this question to.
There was a certain control on a game one time that I thought was compelling. You select a unit and then drag the mouse around. As you're dragging, an ant line is displayed from the unit to where the mouse pointer is. Then when you release the mouse button, you're telling that unit to go to that position.
Can that now be done using JavaScript and canvas?
An ant line is like a dashed line where the dashes are rotating.
follow the mouse around throwing points into a point array (split them up into segments that represent your dotted line) and drawing line segments onto the canvas following those points. if you want some portion of the points to be transparent, just apply a paint that sets the line color to transparent for each alternate point segment. Have the drawing method sitting in an Timeout animation that swaps the order of the transparent paint and voila.
This tutorial should give you some ideas on how to draw the line.