Hand Simon 2014: Difference between revisions
No edit summary |
No edit summary |
||
(9 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
In 1998, Ben Fry, later co-developer of the Processing language, created a simple online game of [http://acg.media.mit.edu/courses/mas961/exhibition/fry/hands/index.html "Hand Simon"] for [http://acg.media.mit.edu/courses/mas961/exhibition/ John Maeda's Numeric Photography] course. | |||
[[File:BLHand01.jpg|320px|link=//pzwart3.wdka.hro.nl/prototyping/handsimon2014/]] | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<img src = "neutral.jpg" onclick ='change ()'> | <img src = "neutral.jpg" onclick ='change ()'> | ||
<!-- <img src = "1.jpg"> <img src = "2.jpg"> <img src = "3.jpg"> <img src = "4.jpg"> <img src = "5.jpg"> --> | <!-- <img src = "1.jpg"> <img src = "2.jpg"> <img src = "3.jpg"> <img src = "4.jpg"> <img src = "5.jpg"> --> | ||
Line 12: | Line 14: | ||
</script> | </script> | ||
</source> | |||
<source lang="html4strict"> | |||
I don't know <u>what</u> to do! <br> | |||
<img src = "0.jpg" onclick ='change ()'> | |||
<!-- <img src = "1.jpg"> <img src = "2.jpg"> <img src = "3.jpg"> <img src = "4.jpg"> <img src = "5.jpg"> --> | |||
<script> | |||
var count=0; | |||
function change () { | |||
var x= document.getElementsByTagName ("img"); | |||
count=count+1; | |||
if (count==6) { | |||
count=0; | |||
} | |||
//alert(count); | |||
x[0].src = count+".jpg"; | |||
} | |||
</script> | |||
</source> | |||
Click on a finger: | |||
<source lang="html4strict"> | |||
I don't know <u>what</u> to do! <br> | |||
<!-- <img src = "0.jpg" onclick ='change ()'> --> | |||
<!-- <img src = "1.jpg"> <img src = "2.jpg"> <img src = "3.jpg"> <img src = "4.jpg"> <img src = "5.jpg"> --> | |||
<img id="image" src="0.jpg" border="0" usemap="#map" alt="" /> | |||
<map name="map" id="map"> | |||
<area id="f4" alt="" title="" shape="rect" coords="357,303,455,530" style="outline:none;" target="_self" onclick = 'change(4)' /> | |||
<area id="f3" alt="" title="" shape="rect" coords="479,299,567,526" style="outline:none;" target="_self" onclick = 'change(3)' /> | |||
<area id="f2" alt="" title="" shape="rect" coords="587,306,685,534" style="outline:none;" target="_self" onclick = 'change(2)' /> | |||
<area id="f1" alt="" title="" shape="rect" coords="698,316,772,490" style="outline:none;" target="_self" onclick = 'change(1)' /> | |||
<area id="f0" alt="" title="" shape="rect" coords="639,543,783,611" style="outline:none;" target="_self" onclick = 'change(5)'/> | |||
<area shape="rect" coords="1078,718,1080,720" alt="Image Map" style="outline:none;" title="Image Map" | |||
/> | |||
</map> | |||
<script> | |||
var count=0; | |||
var x= document.getElementsByTagName ("img"); | |||
function change (finger) { | |||
//count=count+1; | |||
//if (count==6) { | |||
// count=0; | |||
//} | |||
//alert(count); | |||
x[0].src = finger+".jpg"; | |||
setTimeout(reset,1000); | |||
} | |||
function reset(){ | |||
x[0].src = "0.jpg"; | |||
} | |||
</script> | |||
<style> | |||
area { cursor: pointer; } | |||
</style> | |||
</source> | </source> |
Latest revision as of 21:18, 24 September 2014
In 1998, Ben Fry, later co-developer of the Processing language, created a simple online game of "Hand Simon" for John Maeda's Numeric Photography course.
<img src = "neutral.jpg" onclick ='change ()'>
<!-- <img src = "1.jpg"> <img src = "2.jpg"> <img src = "3.jpg"> <img src = "4.jpg"> <img src = "5.jpg"> -->
<script>
function change () {
x= document.getElementsByTagName ("img")
x[0].src = "1.jpg"
x[0].src = "2.jpg"
}
</script>
I don't know <u>what</u> to do! <br>
<img src = "0.jpg" onclick ='change ()'>
<!-- <img src = "1.jpg"> <img src = "2.jpg"> <img src = "3.jpg"> <img src = "4.jpg"> <img src = "5.jpg"> -->
<script>
var count=0;
function change () {
var x= document.getElementsByTagName ("img");
count=count+1;
if (count==6) {
count=0;
}
//alert(count);
x[0].src = count+".jpg";
}
</script>
Click on a finger:
I don't know <u>what</u> to do! <br>
<!-- <img src = "0.jpg" onclick ='change ()'> -->
<!-- <img src = "1.jpg"> <img src = "2.jpg"> <img src = "3.jpg"> <img src = "4.jpg"> <img src = "5.jpg"> -->
<img id="image" src="0.jpg" border="0" usemap="#map" alt="" />
<map name="map" id="map">
<area id="f4" alt="" title="" shape="rect" coords="357,303,455,530" style="outline:none;" target="_self" onclick = 'change(4)' />
<area id="f3" alt="" title="" shape="rect" coords="479,299,567,526" style="outline:none;" target="_self" onclick = 'change(3)' />
<area id="f2" alt="" title="" shape="rect" coords="587,306,685,534" style="outline:none;" target="_self" onclick = 'change(2)' />
<area id="f1" alt="" title="" shape="rect" coords="698,316,772,490" style="outline:none;" target="_self" onclick = 'change(1)' />
<area id="f0" alt="" title="" shape="rect" coords="639,543,783,611" style="outline:none;" target="_self" onclick = 'change(5)'/>
<area shape="rect" coords="1078,718,1080,720" alt="Image Map" style="outline:none;" title="Image Map"
/>
</map>
<script>
var count=0;
var x= document.getElementsByTagName ("img");
function change (finger) {
//count=count+1;
//if (count==6) {
// count=0;
//}
//alert(count);
x[0].src = finger+".jpg";
setTimeout(reset,1000);
}
function reset(){
x[0].src = "0.jpg";
}
</script>
<style>
area { cursor: pointer; }
</style>