Interactive Graphics: Ink Drops

NYU Shanghai, Shanghai
December, 2017
Documentation: http://ima.nyu.sh/documentation/2017/12/16/noc-week-14-final-project/

Water has been of mysterious feature in many ways. It has been hard to predict the movement of an object placed in the water, and even harder to predict the interaction between multiple objects on the water surface. This final project of Nature of Code explored the notion of ink drops in an interactive context, which resembles a drawing platform. This project had two elements: simulating the ink dropping and mixing process; and creating an interactive interface for users to draw their own pattern. The physics and mathematics behind this project were not too complicated to understand and calculate. However, by adjusting the color and letting different color of ink drops to interact, this project provided the digital tools for users to create their own art work. Human’s eyes will do the job of mixing multiple colors, hence creating a beautiful and meditating experience of ink dropping and drawing. (p5.js)


Interactive Graphics: Evolution of Dots

NYU Shanghai, Shanghai
November, 2017
Documentation: http://ima.nyu.sh/documentation/2017/11/03/noc-week-7-midterm-project/

Points may be the most basic mathematical concept. However simple, it forms the basis of many complex mathematical shapes: Two points form a line, and a line can form millions of other shapes. This midterm project for Nature of Code explored the notion of points in an interactive context. This project had two features: displaying the evolution of heart functions using dots; and creating pattern which user can change shape and its auxiliary shapes using dots. The mathematical functions behind this project are not too complicated to understand and calculate. However, by displaying more than 100 lines on the canvas and letting them move, the effect is visually pleasing. (p5.js)


Interactive Graphics: Tilted Box

NYU Shanghai, Shanghai
October, 2017
Documentation: http://ima.nyu.sh/documentation/2017/10/15/noc-week-5-tilted-box-stephanie/

This project had a box which contained all the particles, and users could use mouse to rotate the box. This interaction resembled the movement of particles in an enclosed volume if shaking fiercely. (p5.js)


Interactive Graphics: Yin-Yang

NYU Shanghai, Shanghai
September, 2017
Documentation: http://ima.nyu.sh/documentation/2017/09/25/noc-week-3-yin-yang-stephanie/

This project realized a mirrored movement – an Yin Yang effect – of two arrays. User can use the arrow keys, left/right/up/down, to draw mirrored images on the canvas. (p5.js)


Interactive Graphics: Pixel Maze

NYU Shanghai, Shanghai
May, 2015
In Collaboration with Sijia Liu
Documentation: http://ima.nyu.sh/documentation/2015/12/13/final-project-pixel-maze-yue-sun-sijia-liu/

This project is the final project for Interaction Lab, which was an extension of the midterm project, a maze game on the laptop. In this project, a real “maze” displaying multiple maps which could be physically touched was implemented, adding more user interaction. This real “maze” was realized using an LED Matrix. With  the communication between Processing and Rainbowduino, the maze game was represented on an 8×8 LED matrix and used direction bottoms in the keyboards as controller. The LED Matrix had two highlights. First, the collision test was done by Processing as backstage instead of Rainbowduino. Second, the limited scale of matrix can present a map of unlimited scale. (Processing, Arduino)

 (Maze Design Map)