One Glance

December 2017

Language: Processing P5js


One glance (惊鸿一瞥)is a webcam based interactive pixel manipulation project. It interacts with user and draws a particle system. The particle system follows mouse motion and presents as animated Long (animal, Chinese dragon).
This pattern is created while some wild experiments, but the Long like pattern(some friends also thinks it like neuron) attracts my attention. Then it's made to be a teaching demo in my "See Through Kinect" class as an example in webcam pixel manipulation session. This interactive pattern will shows like a mirror; instead of showing the whole image, it only present one glance of what the camera sees. With the mystery enough pattern, it bring the feeling of some obscure beauty in eastern culture.

Here is a demo, recorded in front of my favorite sofa.


The interactive pattern is not an intended design and absolutely an exception when play with code. The Long like interactive drawing caught my attention from beginning.

A simple demo has been recorded while I am casually moving the mouse around:

Then this pattern is combined with webcam pixels, the result is not very ideal, the pattern remains cool and simply cannot work as mirror to show captured image.

A recorded demo:

Since webcam pixel manipulation works better with pattern consisted of points and other dot like shapes(not lines), the particle system is modfied to be presented as ellipses.

A recorded demo:

At last, draw the particle system with webcam captured image pixels.

Future Development

Convert code into p5js and openframeworks; first case is for making it available through browser and latter case is to increase the efficiency and implement more complicated particle systems.

Source code for this website is available on github.