Documentation

Screenshots

page_asset/img1.png, page_asset/img2.png, page_asset/img3.png, page_asset/img4.png, page_asset/img5.png, page_asset/img6.png, page_asset/img7.png, page_asset/img8.png, page_asset/img9.png, page_asset/img10.png

Inspiration

This project is mainly inspired by the Animated Images Experiment and tries to recreate it in a 3D environment using the earlier experience with Cosmic Tunes using WebGL. Animated Images Experiment provides a template to turn pixels on an image into objects with the picSet() function. Cosmic Tunes provides the necessary experience of manipulating spheres using WebGL.

Process

I started by changing the picSet() function in the Animated Images Experiment so that each particle representing a pixel on the image turns into a 3D object.

Then, I designed effects that are specific to 3D objects:

Neutral: The neutral effect returns the particles to their original positions by creating a velocity vector that subtracts their current position from their original position.

Emphasize: Emphasize helps order the particles in the z-axis based on their brightness/darkness. The brighter the particles, the more positive they are in the z-axis. The darker they are, the more negative they are in the z-axis. This effect is achieved by declaring a position vector for the destination that subtracts the current position vector from the velocity vector.

Wave: : The wave effect adds an oscillation movement on the particles in the z-axis using the sin() function.

2D Spread: : 2D spread creates a velocity vector that points away from the center of the image in the x and y axis, so the particles spread out from the center two-dimensionally.

3D Spread: : The only difference between 2D spread and 2D spread is that the velocity vector now points away from the x and y-axis and the z-axis.

2D Shrink: : 2D shrink reverses 2D spread by pointing the velocity vector towards the center.

3D Shrink: : 3D shrink adds the third dimension to 2D shrink.

Users can creatively play around with an existing image by manipulating it on a 3D canvas using these different effects. The program also has an additional feature that allows the user to save the canvas by pressing the take pic button to save any interesting composition.

Next Steps

In the future, I want to add more interesting 3D effects that the users can play around with. I also want to make the interaction more interesting by replacing the buttons with hand gesture control using ml5. Additionally, I could make two or more images interact with each other on the 3D canvas to produce more interesting effects.