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 n…
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: trans…
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…
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 Y…
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 ar…
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, IR…
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 func…
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 …
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 …