Hello I have been building a script with a fractal grid wherein a more complicated vector shape is created per grid square and I want to be able to crop the shape into its square but without turning it into a bitmap image through createGraphics.
I want it to stay as a vector so that I can manipulate it’s properties (stroke width etc) during the program. I can’t find anyway to do this like SVG masking or something in p5js so the only thing I can think of is making lots of p5 canvases where cropping can be effected on a per canvas level and then making the fractal grid out of the canvases.
This sketch is very slow due to the patterning over the many many shapes which are turned into createGraphics and served at different sizes:
Click (and wait several seconds) to see each new design
This is a version with live vector graphics, but they aren’t cropped
This is me trying to mess with DOM to make an array of p5 instances but DOM gives me a headache… maybe I’m close or maybe I’m 50 hours away. That is how I generally feel with DOM:
The div array is getting created in index.html but the p5 instances are not being assigned to it and there are a bunch of errors.
Hoping some p5js guru can understand what I’m trying to say/do