Array of new p5 instance & DOM

p5.js Coding Questions
1

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

2

Ok sorry nevermind.
This part of my problem is working now. I forgot to put an index on the array holding the function when I instantiated it.
I’m still at the foot of the mountain so I think I will be back.

Here is the array of canvases for now:

<body>   
	<div id="oya">
	
	</div>
	<script>

		for (let i = 0; i < 9; i++){
			containers[i] = String("c-"+[i]) ;

			let newEl = document.createElement('div');
			newEl.setAttribute("class", 'myContainer');
			newEl.setAttribute("id", containers[i]);
			document.getElementById('oya').appendChild(newEl);
		}
		
	for (let i = 0; i < 9; i++){
		let thisP = String("p-"+[i]) ;

		s[i]= function( thisP ) { // p could be any variable name
				let x = 100; 
				let y = 100;
				thisP.setup = function() {
					thisP.createCanvas(400, 200);
				};

				thisP.draw = function() {
					thisP.background(0,0,255);
					thisP.fill(255);
					thisP.erase();
					thisP.rect(x,y,50,50);
					thisP.noErase();
				};
			};

		let myp5 = new p5(s[i], containers[i]);


	}		
	
	</script>
</body>