Hand Simon 2014: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
 
Line 73: Line 73:
</script>
</script>
<style>
<style>
area {
area { cursor: pointer; }
cursor: pointer;
}
</style>
</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.

BLHand01.jpg

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