Monday, July 5, 2021

Pyramid, Cone, Cylinder and Spherical Low-Poly Polyhedrons, oh my!

I switched things around so that I have an init() to initiate (in this case drawFlg()) and animate() to loop and iterate, which is a bit I’ll need, naturally enough, for animation. I’m not currently having it wave my flag, but instead it takes input from the mouse when I click in the canvas and javascript listens for this with an event listener, in this case for the click, gets a cx and cy, for ‘click x’ and ‘click y’ and then calls draw() to clearRect(0,0w,h) and draw text with fillText(“Something”,cx,cy). I will change cx and cy to ‘screen x’ and ‘screen y’, then use sy to derive a depth z. The middle of the screen is at infinity and three quarters of the way down the screen is w distance into the screen, where the screen is w from the viewers’ eyes... 

What I want the page to do is only accept points greater or lesser than h/2, because that point is at infinity. Subtract h/2 from h and get the absolute of h-h/2, and if this is >0, calculate depth z and use z to get per, then turn sx and sy into ‘true’ x and y. Depth z = h*h/abs(h-h/2) and roughly half of the points will be between w and 2w, and roughly the other half will be greater than 2w to as much as h*w/2 or h^2, so 260 times as far from your eye with my projection.


Instead of worrying about the humanoid shape or my peeps, I want to pick two points and draw a cone, a cylinder and some sort of a spherical polyhedron, probably starting with an octahedron. I can have a button for toggle between picking and adding points or picking and dragging. I can get a dx, dy, and dz from P0 and P1, and use them to derive the points for the base quad/triangle fan, which can be turned into a ring by subdividing the edges of the quads into an octagon, then a 16-sided polygon, etc.


No comments:

Post a Comment