Water and Fire in Motion

Water and Fire in Motion

Water and Fire are powerful forces that evoke a hypnotic energy that can be explored through visual motion and sound. 

The composition of the frames are representing the top middle and bottom of the Water and Fire images in a horizontal portal. The center frames are the most energetic and powerful of the falling Water and rising Fire. The top frames are the beginning of the falling water and the tips of the flames, while the bottom frames are the end of the spillway and the burning ambers. 

Using Leap Motion to identify hand motion in the X Y Z coordinates and ATOM as the programable text editor one can manipulate the video images.

  • X coordinate in a left/right motion toggles between the videos of Water and Fire
  • Y coordinate in a forward/back motion slows or speeds up either video of Water and Fire
  • Z coordinate in a raising/lowering motion magnifies either video of Water and Fire
    between the videos of Water and Fire




Reach into virtual reality with your bare hands
“Your hands are the original universal interface. With our unprecedented hand tracking, you can reach into virtual and augmented reality to interact with new worlds.”


Using a Mark III DSLR in video mode with a 200mm/300mm zoom macro lense filmed the Fire and Water sequences


‘A hackable text editor for the 21st Century’

“Atom is a text editor that’s modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file”.

Code copied here:

let video1;
let video2;
let video3;
let video4;
let video5;
let video6;
var px = 0;
var py = 0;
var pz = 0;

function preload(){
video1 = createVideo(“water.mp4”);
video2 = createVideo(“fire.mp4”);
video3 = createVideo(“fire2.mp4”);
video4 = createVideo(“fire3.mp4”);
video5 = createVideo(“water3.mp4”);
video6 = createVideo(“water2.mp4”);

function setup() {
createCanvas(windowWidth, windowHeight);
// video2.play();
// video1.position(0,0);
// video1.size(width/2, height);


function draw() {
px = width/2+ x/200*width/2;
py = height/2+ y/200*height/2;
pz = z;

if (px < width/2) {
image(video1, 0, height/2 – 100, width/2, 200, pz*2, pz*2, 1920 – pz*2, 1080 – pz*2);
image(video5, 0, height/2 + 100, width/2, 200, pz*2, pz*2, 1920 – pz*2, 1080 – pz*2);
image(video6, 0, height/2 – 300, width/2, 200, pz*2, pz*2, 1920 – pz*2, 1080 – pz*2);

image(video2, width/2, height/2 – 100, width/2, 200);
image(video3, width/2, height/2 – 300, width/2, 200);
image(video4, width/2, height/2 + 100, width/2, 200);

} else if (px > width/2) {
image(video2, width/2, height/2 – 100, width/2, 200, pz*2, pz*2, 1920 – pz*2, 1080 – pz*2);
image(video3, width/2, height/2 – 300, width/2, 200, pz*2, pz*2, 1920 – pz*2, 1080 – pz*2);
image(video4, width/2, height/2 + 100, width/2, 200, pz*2, pz*2, 1920 – pz*2, 1080 – pz*2);

image(video1, 0, height/2 – 100, width/2, 200);
image(video5, 0, height/2 + 100, width/2, 200);
image(video6, 0, height/2 – 300, width/2, 200);

ellipse(px, py, 20, 20);

// if within waterfall
if (px < width/2) {
if (document.getElementById(“videoone”).paused) {
console.log(“play videoone “);
document.getElementById(“videoone”).volume = 0.5;
document.getElementById(“videoone”).playbackRate = py/height;
else {
document.getElementById(“videoone”).playbackRate = py/height;

if (document.getElementById(“videofive”).paused) {
console.log(“play videofive “);
//document.getElementById(“videofive”).volume = 1.5;
document.getElementById(“videofive”).playbackRate = py/height;
else {
document.getElementById(“videofive”).playbackRate = py/height;

if (document.getElementById(“videosix”).paused) {
console.log(“play videosix “);
//document.getElementById(“videosix”).volume = 1.5;
document.getElementById(“videosix”).playbackRate = py/height;
else {
document.getElementById(“videosix”).playbackRate = py/height;

if (!document.getElementById(“videotwo”).paused) {
console.log(“pause videotwo”);
// document.getElementById(“videotwo”).volume = 5.0;

if (!document.getElementById(“videothree”).paused) {
console.log(“pause videothree”);

if (!document.getElementById(“videofour”).paused) {
console.log(“pause videofour”);

// closes video two
} // closes waterfall

// if on fire
else {
if (document.getElementById(“videothree”).paused) {
console.log(“pause videothree”);
document.getElementById(“videothree”).playbackRate = py/height;
} else {
document.getElementById(“videothree”).playbackRate = py/height;

if (document.getElementById(“videotwo”).paused) {
console.log(“play videotwo”);
//document.getElementById(“videotwo”).volume = 1.5;
document.getElementById(“videotwo”).playbackRate = py/height;
} else {
document.getElementById(“videotwo”).playbackRate = py/height;

if (document.getElementById(“videofour”).paused) {
console.log(“pause videofour”);
document.getElementById(“videofour”).playbackRate = py/height;
} else {
document.getElementById(“videofour”).playbackRate = py/height;

if (!document.getElementById(“videoone”).paused) {
console.log(“pause videoone”);

if (!document.getElementById(“videofive”).paused) {
console.log(“pause videoone”);

if (!document.getElementById(“videosix”).paused) {
console.log(“pause videoone”);


// if(x < width/2){
// video2.pause();
// }else{
// video1.pause();
// }


A Macro Art Project [Draft]

Talk about Kinectron and interaction


So started to think about an art project as a jumping off point.
Want to see what I can explore using Kinect and a Mark III with a macro lens. Close up of water dripping, steam, pouring sand, grass moving. Motion, digital representation , temperature , light, sound.



The Puffin Series

I don’t Give a Hoot


I don’t Give a Hoot.2


I don’t Give a Hoot.3


I don’t Give a Hoot.4


I don’t Give a Hoot.5


Flying Puffins


I’m a Puffin


I’m lots of Puffins


I’m lots of Puffins.2


Name That Puffin


My Puffin Name is






Midterm Prototype – Scary Jack-O-Lantern


A prototype for a trick and treat Jack-O Lantern filled with candies. When reaching inside to get candies sonar sensor would trigger loud scary sound and bright pulsating LED strip.


  • The volume of mp3 could not increase
  • The sonar sensor fluctuates and readings would not detect hand at close proximity and could not insert fully into container
  • The 9v power source could not power mp3 and LED strip without distorting sound


  • A more accurate sonar sensor that can register movement within the container
  • Regulate voltage input to play mp3 and LED strip in 1 code and 1 power source
  • Control and Increase sound volume

Iconographic Halloween symbol

Scary Sound and Lights

LED lights brighten closer to Sonar Sensor





Psycho Scream.mp3

Testing scream on Music Maker



Modify wiring diagram for 2 transistors and LED strip- white and amber LED source

Music maker Shield Wiring Sonar sensor


Music maker Shield stacked on Arduino Uno

Bread Board wired for LED strip & Sonar Sensor

2 magnetic 9V speakers

USB cable for Code download & 5V power supply

9V battery

Observation – Pedestrian & Vehicular Traffic Flow

Pedestrian & Vehicular Traffic Lights

  1. Pedestrians must participate and be aware of surroundings
  2. Optimizing traffic flow – secondary road traffic advance when vehicles are within range, otherwise primary road traffic continues to flow.
  3. Patterned traffic flow – sequential traffic light patterns to prevent traffic congestion

Pedestrian Crossing indicator – Pedestrian needs to participate by reading instructions and pressing button to activate.








Vehicular Motion detector1 shows the vehicle in range to activate green advance light.

Vehicle indicator2 shows vehicle not in range not activating green advance light




Patterned vehicular light indicators – Left turn signal first then all advanced green indicator

Patterned vehicular light indicators – Left turn signal and all advanced green indicator simultaneous

‘The Craftsman and the Craft’

The Craftsman And The Craft

An innocent exploration of the workings of a man and his machine shop. The beauty of the craft with not a clear idea of the process; a puzzle, and how the pieces fit together. The dance and the tension between the craftsman and the craft.

With the precision of a doctor working on his patient, and knowing that each action and observation matters, he displays the artistry of his knowledge, which transports us into a ritual that has been passed through generations. 

Under the craftsman’s command, as if by magic the machines grind, torch, drill, sand, burn, polish, and rinse in an oil bath, synchronizing in a rhythmic symphony to achieve an overall outcome that has very little tolerance for mistakes. For if there are any mistakes the dance won’t happen, and the machine will be lifeless. But, with the final turn of the key, the machine comes alive.

View Storyboard here

By Alexandra . Camilla . Michael