Infinite Zoom
If you're using a mouse or touchpad, point in the direction you want to go. On a mobile device, tap on the place where you want to zoom in. Alternatively, if you leave it long enough, the automatic mouse will move around for you.
The main inspiration for this project came from Pixel Words by Frank Force, and I wanted to see if I could make something like it, as infinite zooms have always interested me.
This is how it works:
∙ Draw the image on the screen
∙ Zoom in
∙ Once the pixels making up the image are bigger than a certain amount:
∙ Create a duplicate of the image inside each of its pixels
∙ Fade and remove the old image
∙ Continue zooming in
An annoying thing regarding the JavaScript fillRect() method is it starts to get slow when drawing more than 1000 rectangles on the screen. Apparently, both PutImageData() and webgl are super fast for that kind of thing, but I went for a much easier (but worse) approach: Instead of drawing a rectangle for every pixel of the face, I created an image (which HTML calls a canvas) that represented the icon. This meant I could draw double the distance without the performance suffering too much.
© Copyright joachimford.uk
