Can we actually paint with light?

Details

Tools to help people paint with light over the web

Role

Self-directed

Tools

p5.js

Thought

There are abundant images on the Internet of people attempting to paint with light, often with the use of long exposure photographs.

Image source: Wikimedia Commons.

I wondered what it would look like, if people were able to paint in real-time with light on a computer screen. To do this, I created a set of computer programs that track the brightest point on a webcam video feed and drop particles to follow its trail, making the movement similar to that of a paintbrush dropping paint.

Outcomes

First program that captures the brightest point in a dark environment, here a lightbulb, and draws a trail of yellow circles.

Second program where I used an LED bulb, powered by a coin battery that I could then turn on & off to give the desired lines and breaks.

Code

The program, as mentioned before, tracks the brightest point of a webcam video feed. This is primarily done by going through all pixels on the screen, analysing the RGB values and returning the point with the highest values in that frame (that will be the brightest).

        
                    function findBrightest(video) {

                        var brightestValue = 0;

                        var brightestPosition = createVector(0, 0);

                        var pixels = video.pixels;

                        var i = 0;

                        for (var y = 0; y < h; y++) {

                          for (var x = 0; x < w; x++) {

                            var r = pixels[i++];

                            var g = pixels[i++];

                            var b = pixels[i++];

                            i++; // ignore a 

                            var brightness = r + g + b;

                            if (brightness > brightestValue) {

                              brightestValue = brightness;

                              brightestPosition.set(x, y);

                            }

                          }

                        }

                        return brightestPosition;

                      }

Then, all the computer has to do is place an object at the brightest point (which has an x & y coordinate).

        
                    capture.loadPixels();

                    if (capture.pixels.length > 0) {

                      var brightest = findBrightest(capture);

                    }

                      this.x = brightest.x;

                      this.y = brightest.y;

                      //using 'this' identifier as an object is created.

̣̉̉̉̉̉