Changing CENTER point of a vertex Shape for rotation

p5.js Coding Questions
1

In this sketch, I’m trying to changing CENTER point of a vertex Shape so I can easily do rotation on it.
In processing there is shapeMode but P5 doesn’t currently have that. (well post a feature request soonish).

I had a quick look at the p5.shape but got lost.

I am guessing that I would have to translate() the shape so the corner point it’s drawing from is moving in a circle relative to the rotation() but having done the equation as I’m not good a trig and hoping there is an easier solution.

1 Like
2

A workaround I use is just to draw the shape so 0, 0 is the center of the shape. It’s kinda hard to explain so just copy and paste the code from below (backup your code first) and it should make more sense. It’s unclear if you’d like to do it for each individual triangle but the same idea applies. Create a function that draws a single triangle with the center at 0, 0 and then do a transform and rotate to position it in another function that draws all the triangles.

function doTri(){
	t = beginShape()
  for(let y=0;y<TSize;y++){
	  let yPoz=y*TSize
		for(let x=0;x<TCount;x++){
			t.vertex(TSize*x - width/2, yPoz+TSize - height/2)
			t.vertex(TSize/2+(TSize*x)- width/2, yPoz - height/2)
			t.vertex(TSize+(TSize*x)- width/2, yPoz+TSize - height/2)
		}  // end x loop
		t.vertex(TSize/2- width/2,yPoz+TSize - height/2)	// set to start of next line
		t.vertex(0- width/2, yPoz+TSize - height/2)
	} // end y loop
	t.endShape(CLOSE)
}
3 Likes
3

Thanks @figraham that totally fixed it and an easy solution too.

Final version

insta

2 Likes