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

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();
// }

}

A Macro Art Project [Draft]

Talk about Kinectron and interaction

http://127.0.0.1:3000/

 

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.

 

tools 

The Puffin Series

I don’t Give a Hoot

https://alpha.editor.p5js.org/mfuller/sketches/r1BfFhZhZ

I don’t Give a Hoot.2

http://alpha.editor.p5js.org/mfuller/sketches/rJ_6Qp-nb

I don’t Give a Hoot.3

http://alpha.editor.p5js.org/mfuller/sketches/BJpZbQM3b

I don’t Give a Hoot.4

http://alpha.editor.p5js.org/mfuller/sketches/Hy9AP7Mn-

I don’t Give a Hoot.5

http://alpha.editor.p5js.org/mfuller/sketches/H1k4WVzhb

Flying Puffins

https://alpha.editor.p5js.org/mfuller/sketches/ByIdoco3b

I’m a Puffin

http://alpha.editor.p5js.org/mfuller/sketches/SkdwMMETb

I’m lots of Puffins

http://alpha.editor.p5js.org/mfuller/sketches/BkycZz4TW

I’m lots of Puffins.2

http://alpha.editor.p5js.org/mfuller/sketches/rJ8LM64aZ

Name That Puffin

http://alpha.editor.p5js.org/mfuller/sketches/ry_jCl8RZ

My Puffin Name is

http://alpha.editor.p5js.org/mfuller/sketches/SkBhB8PAZ

 

 

 

 

1st sketch ICM 2017

https://alpha.editor.p5js.org/mfuller/sketches/BJQVBTat-

Went to Arón for help with the Bezier for the string of the balloon and how to scale an object. He first spoke of how important it is to design, document and inform before developing the program. Then he showed me basic ways to rotate and Scale. A big move and insight was push(); & pop(); so I could isolate the object.

Like to try to develop this sketch and get it to animate. How does a balloon move or raise an object? Is a balloon one directional?

Reproduce this Image with Code

Above the reproduced image and the code below. Totally trial and error and intuitive. I really need a better tool for scale and color is through the eye of the beholder.

function draw() {

background(0,255,255);
strokeWeight(40);
stroke(255,0,0);
line(0,0,600,400);

strokeWeight(0);
ellipse(300, 200, 300, 220);
fill(0,0,153);
rect(410,160,40,40);
strokeWeight(0);
fill(0,204,0);
}