Water and Fire in Motion

Posted on December 9, 2017December 10, 2017 by Michael Fuller

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.”

Canon EOS 5D Mark III DSLR Camera

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

ATOM

‘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”);
video1.id(“videoone”);
video2 = createVideo(“fire.mp4”);
video2.id(“videotwo”);
video3 = createVideo(“fire2.mp4”);
video3.id(“videothree”);
video4 = createVideo(“fire3.mp4”);
video4.id(“videofour”);
video5 = createVideo(“water3.mp4”);
video5.id(“videofive”);
video6 = createVideo(“water2.mp4”);
video6.id(“videosix”);
}

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

}

function draw() {
background(220);
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);

translate(width/2,height/2);
ellipse(px, py, 20, 20);
}
//console.log(py/height)

// if within waterfall
if (px < width/2) {
if (document.getElementById(“videoone”).paused) {
console.log(“play videoone “);
document.getElementById(“videoone”).play();
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”).play();
//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”).play();
//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”).pause();
// document.getElementById(“videotwo”).volume = 5.0;
}

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

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

// closes video two
} // closes waterfall

// if on fire
else {
console.log(“fire”);
if (document.getElementById(“videothree”).paused) {
console.log(“pause videothree”);
document.getElementById(“videothree”).play();
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”).play();
//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”).play();
document.getElementById(“videofour”).playbackRate = py/height;
} else {
document.getElementById(“videofour”).playbackRate = py/height;
}

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

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

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

}

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

}