Wednesday, July 28, 2021

Fun with SVGs and Javascript

I got up late this morning and had to grab all my diabetes meds and take them with me to take at work! Still and all, I got there okay, even got a decent parking space for a quarter after six AM… I’ve spent the last hour struggling with creating SVG elements on my webpage. I finally have a loop spitting out random overlapping opaque rectangles in a blue 520 by 260 pixel world rectangle, so, so far, I’ve reinvented a canvas! 8-P

The overlapping effect is pretty, though.

The next step will be to generate random polygons using Javascript within the world rectangle, then work out how to handle wrapping and clipping. In this case, if something in my random polygon extends off the edge, I will clip the extension. I need to take the points off the edge and work out where the extension leaves the world rect, create a few points to bridge the bits which I am clipping, then put the clipped points into a new rectangle, wrap it and add or subtract x and y as needed. If it extends off the right, subtract the width of the world rect and it will project into the left side. If it extends up or down we need to flip it around and over half the width.

(Or I can just start on building up a low poly spherical polyhedron and project it in 3D with SVG…)


No comments:

Post a Comment