Hand Simon 2014: Difference between revisions
No edit summary |
No edit summary |
||
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. | 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. | ||
'''[http://pzwart3.wdka.hro.nl/prototyping/handsimon2014/ LIVE DEMO!]''' | |||
<source lang="html4strict"> | <source lang="html4strict"> |
Revision as of 09:53, 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>