I have some SVG arbitrary closed shapes composed of lines and curve paths. I want to check if some points are inside the shape. I have found Point in Polygon algorithm that seems to work well, but I will have to decompose my path into a multitude of lines. Is there a more direct solution to this problem? If not,
Tag: geometry
Draw isocele triangle according to angle in javascript canvas
I would like to know how can I draw an isocele triangle in canvas, if I know the first angle, and the lengths of the two equal side. Shema (known lengths are in red) And second question, is it possible to curve the top side like that : Shema Answer
How to move an object over half-circle from start to end?
I have a half-circle (green) and an object (blue). I want to move that object on that circle from start (left) to end (right). The object should follow the path (black) of the half-circle. Object should move based on specific value. Value is a number from 0 to 1. Start = 0, end = 1. My current solution: translate the
How to calculate a bounding box for a rectangle rotated around its center?
I am looking to calculate the bounding box of a rectangle rotated around its center. I have read this question and while MarkusQ’s answer works in general, it is not efficient enough for my needs. I am trying to get Troubadour’s answer working, but it seems to only work when the origin of rotation is around a corner, not the
three.js Highlighting the edge of a cube on hover LineSegmentsGeometry
I am using LineSegmentsGeometry and LineMaterial to create thick cube edges. I want to change the color of the edge on hover. This code only works if using thin lines with LineBasicMaterial. Can I do it somehow with bold lines? I also have other shapes with this logic sandbox here https://codesandbox Answer You can do it with fat lines! LineSegmentsGeometry
Three.js Zoom-to-Fit with offset
I’m trying to come up with a zoom-to-fit function that ensures that a list of points are perfectly fit into the drawing area, while also adding configurable offsets on all sides of the image. I.e. zoom-to-fit an area of the frame rather than the whole viewer area: (note that the offsets in this image are not accurate) I’m using a
Using Trigonometry to draw equidistant parralleles lines through a circle
As seen on the picture, I need a math formula that calculate the red circled point with cartesian coordonate that will make equidistant lines. It is not simple trigonometry I guess… My goal is to be able to calculate cartesian point around half of the circle and trace my lines from it. Using p5js, I’ll use random value from Perlin
Canvas zoom to cursor doesn’t work correct
I’m trying to scale canvas to/from mouse position, but it works not perfect (always goes few cells away from mouse pos). I’ve read all similar posts but i don’t know what’s wrong. https://jsfiddle.net/shumikua/3afxtmqw/ All code is only to run snippet, it works good. Problem is in function scale. Answer In function scale() keep the same values for x and y
Recalculation next position (x and y) based on rotate to N degree
I need to calculate the next position of the shape (X and Y) but don’t have any idea how. I tried different solutions but all-time something went wrong. Maybe someone can help me, I need a tip how it calculates, for best understand I will add screenshots. Description: I have the image of the map in the background. I drew
How to increase stroke outside of svg path without using paint-order=”stroke”?
I am facing a problem while increasing stroke width. When I am using the attribute paint-order=”stroke” it’s not meet my requirement, because stroke width increasing on both sides (inside and outside). Please look into the attached images. original svg :- Actual svg :- Expected svg(Which is my requirement) :- Code :- Answer A stroke with a width of 20px of