Week 9 - Optical illusion

For this week's assignment I partnered up with Morgen Chen and we both had a

brainstorming session over what we want to do in our optical illusion sketch. After a very cool class with a lot of inspiration examples that we saw I had an idea of doing maybe some optical illusion with a spinning of a globe.

I showed Morgen one of my old sketches where I am drawing with rects and changing their scale and we thought it could be cool to do some kind of the same interaction with our globe.

I found this really nice optical illusion with circles in different sizes and I thought that this could be a great inspiration for us.

I looked at the circles as a kind of mosaic and I wanted the mouse to control the scale of the circles and to control the image appearance from the left top corner to the right top down (as I saw in one of Mimi’s videos). Only when you go further the globe will appear. I thought that we can use my rects idea to be inside the globe, so we would have two shapes, one of them the illusion of the circles and as you click on the mouse the rects are the illusion for the inside of the globe.

I shared with Morgen what I succeeded so far, but we still had a few problems. For some reason I had a lot of trouble positioning the globe in the middle. She had a session with our instructor Mimi and shared with her our sketch and they change the position of the globe to the middle by defending a scale expression:

let ww2iw;
ww2iw = windowWidth / img.width;// to scale the globe to fit the canvas

We wanted to start out with one pixel - a large ellipse, and then as you move across the sketch horizontally (the x value increasing), the sketch turns into little circles that eventually become the details of the earth photo.

From a multiplier for loop, we changed it to an additive for loop that counts by pixels until we have reached the image width/height. Mimi explained that if we wanted to center the globe, we might have to use trigonometry with sine and cosine, but an easier way would be to divide the sketch into four quadrants, and draw each quadrant separately so that they are centered on the canvas and they break into little circles from the first big one, and if you click on the mouse instead of circles there are rects.

"This project plays with the idea of pixels and shapes and how we associate shapes with certain objects or ideas (i.e. a circle = globe). In this sketch, a one-pixel circle gradually gains resolution until it becomes earth as we know it