walke.web.animate

walke.web.animate.photo

the first phase was know as walke and lasted for a few hours during a visual arts in practice open house at unl (read more in walke). this project was then reborn as an installation in richard’s hall at unl for an advanced sculpture class. unlike the first phase- walke now included a stack of three non-working televisions that had been filled with two part expanding foam. tint of the foam in each television corresponded with an additive primary color (red, green, blue). on the other side of the room there was a functional television that played a fuzzy clip reel of selected short videos. these selected videos ranged from funny/stupid to grotesque/pornographic. the idea was to capture some essence of internet video- which doesn’t carry the burden of fcc broadcast regulation/censorship. the slightly larger than life size (20′x8′ screen size) video of nick walking back and fourth from looking at the stack of televisions, to looking at the video clip reel, was timed in such a way that a light would come on above to illuminate the stack of televisions when nick went over to look at them and turn off when he left. the video clip reel on the other side would similarly turn on when he walked over to stand in front and watch and turn off when he left. this was on a loop so nick constantly shifted from one side to the other. he would spend anywhere from 2-8 minutes staring at either the stack of televisions or the clip reel.

the final phase of walke is everlasting life on the web(ifitis.org)- void of any physical presence. the same video footage of nick and the clip reel is used. a picture of the stack of televisions is used in place of the real, physical televisions. video on the web is not any sort of simple or standardized thing. it can range wildly from propriety based format to format (flash, windows movie, quicktime). there currently no commonly accepted standards on how to play video on the internet. to make walke viewable on as many platforms as possible i decided to use one of the most widely understood formats- javascript. many devices have browsers that support javascript to some degree. i then exported all the frames as jpeg images (roughly 10,000) from my two videos, wrote some js to refresh the image every x amount of time to produce an animation of the original video. i’ve included my source code and some comments on it after the link for those that are interested.


//included on walke.web.animate- an esnet_ project
//created by edward sharp
//web: edwardsharp.net
//buttons
function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.backgroundColor = “#555555″;
window.document.forms[FRM].elements[BTN].style.borderColor = “#999999″;
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.backgroundColor = “#333333″;
window.document.forms[FRM].elements[BTN].style.borderColor = “#EEEEEE”;
}
//close prompt
function closePrompt()
{
var where= confirm(”confirm.close”);
if (where== true)
{
window.close();
}
else
{}
}

//image reel
var timer;
//page load set index
var index = 1;
var reelindex = 1;
function starttimer() {
timer = setInterval(nextImage, 500);
}
function nextImage() {
//buffer zone? before any images shown
if(index>-10 && index<1) {
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 11 + “.jpg”;
window.alert(index);
index++;
}
//stop after 9626 frames
else if (index<9627) {
//show frame number
document.getElementById(”out”).value = index;
index++;
//dom replace of src
document.getElementById(”imgg”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + “.jpg”;
document.getElementById(”imgg”).title = index;
//if index is divisible by 10 the load 10 more images.
if (index % 10 == 0) {
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 1 + “.jpg”;
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 2 + “.jpg”;
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 3 + “.jpg”;
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 4 + “.jpg”;
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 5 + “.jpg”;
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 6 + “.jpg”;
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 7 + “.jpg”;
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 8 + “.jpg”;
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 9 + “.jpg”;
document.getElementById(”imggpre”).src = “seqImg/seq” + index.toString().padLeft(”0″, 4) + 10 + “.jpg”;
}
//reel if, else if, else code
else if (index>174 && index<1086){
document.getElementById(”imggreel”).src = “reelImg/seq” + reelindex.toString().padLeft(”0″, 4) + “.gif”;
document.getElementById(”imggreel”).title = reelindex;
reelindex++;
}
else if (index>1987 && index<3168) {
document.getElementById(”imggreel”).src = “reelImg/seq” + reelindex.toString().padLeft(”0″, 4) + “.gif”;
document.getElementById(”imggreel”).title = reelindex;
reelindex++;
}
else if (index>4030 && index<5774) {
document.getElementById(”imggreel”).src = “reelImg/seq” + reelindex.toString().padLeft(”0″, 4) + “.gif”;
document.getElementById(”imggreel”).title = reelindex;
reelindex++;
}
else if (index>7711 && index<9008) {
document.getElementById(”imggreel”).src = “reelImg/seq” + reelindex.toString().padLeft(”0″, 4) + “.gif”;
document.getElementById(”imggreel”).title = reelindex;
reelindex++;
}
else{
document.getElementById(”imggreel”).src = “transparent.gif”;
document.getElementById(”imggreel”).title = “transparent”;
}

/*
switch(index) {
case 174:
document.getElementById(”imggreel”).src = “reelImg/seq” + reelindex.toString().padLeft(”0″, 4) + “.gif”;
document.getElementById(”imggreel”).title = reelindex;
reelindex++;
window.alert(”case 174 move left”);
break;
case 1086:
window.alert(”case 1086 move right”);
break;
case 1987:
window.alert(”case 1987 move left”);
break;
case 3168:
window.alert(”case 3168 move right”);
break;
case 4030:
window.alert(”case 4030 move left”);
break;
case 5774:
window.alert(”case 5774 move right”);
break;
case 7711:
window.alert(”case 7711 move left”);
break;
case 9008:
window.alert(”case 9008 move right final”);
}*/
}
else {clearInterval(timer);}
}
//end image reel
//tv magic
var tvindex=0;
function nextTv() {
switch(index) {
case 0:
document.getElementById(”imggtv”).src = “tvImg/” + index + “.jpg”;
var tvindex=1;
break;
case 1:
document.getElementById(”imggtv”).src = “tvImg/” + index + “.jpg”;
var tvindex=2;
break;
case 2:
document.getElementById(”imggtv”).src = “tvImg/” + index + “.jpg”;
var tvindex=3;
break;
case 3:
document.getElementById(”imggtv”).src = “tvImg/” + index + “.jpg”;
var tvindex=0;
break;
}}
//code to make image names work
String.prototype.padLeft = function(char, count) {
var val = new String(this);
char = char.toString().substr(0, 1);
while (val.length < count) {
val = char + val;
}
return val;
}

Bookmark and Share

reply