User:Mathijs van Oosterhoudt/counting

<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1'); function searchComplete(searcher) { c = document.getElementById("canvas") p = c.getContext("2d") var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight]; c.width = ((dimension[1]-100)/4)*5; c.height = (dimension[1]-100)/3; p.globalAlpha = 0.8; if (searcher.results && searcher.results.length > 0) { var results = searcher.results; for (var i = 0; i < results.length; i++) { var result = results[i]; base_image = new Image(); base_image.src = result.unescapedUrl; p.drawImage(base_image, Math.floor((Math.random()*((dimension[1]-100)/4)*5-220)+1), 0); } } } function searchComplete2(searcher) { c = document.getElementById("canvas2") p = c.getContext("2d") var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight]; c.width = ((dimension[1]-100)/4)*5; c.height = (dimension[1]-100)/3; p.globalAlpha = 0.8; if (searcher.results && searcher.results.length > 0) { var results = searcher.results; for (var i = 0; i < results.length; i++) { var result = results[i]; base_image = new Image(); base_image.src = result.unescapedUrl; p.drawImage(base_image, Math.floor((Math.random()*((dimension[1]-100)/4)*5-220)+1),(Math.random()*10)+1); } } } function searchComplete3(searcher) { c = document.getElementById("canvas3") p = c.getContext("2d") var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight]; c.width = ((dimension[1]-100)/4)*5; c.height = (dimension[1]-100)/3; p.globalAlpha = 0.8; if (searcher.results && searcher.results.length > 0) { var results = searcher.results; for (var i = 0; i < results.length; i++) { var result = results[i]; base_image = new Image(); base_image.src = result.unescapedUrl; p.drawImage(base_image, Math.floor((Math.random()*((dimension[1]-100)/4)*5-220)+1),(Math.random()*10)+1); } } } function OnLoad() { var imageSearch = new google.search.ImageSearch(); var imageSearch2 = new google.search.ImageSearch(); var imageSearch3 = new google.search.ImageSearch(); imageSearch.setResultSetSize(8); imageSearch2.setResultSetSize(8); imageSearch3.setResultSetSize(8); imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM); imageSearch2.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM); imageSearch3.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM); imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]); imageSearch2.setSearchCompleteCallback(this, searchComplete2, [imageSearch2]); imageSearch3.setSearchCompleteCallback(this, searchComplete3, [imageSearch3]); imageSearch2.execute("blue sky"); imageSearch3.execute("the matterhorn"); imageSearch.execute("old person raising hand"); } google.setOnLoadCallback(OnLoad); </script> </head> <div style="width:100%;"> <div style="width: 50%; margin: 0px auto;"> <canvas id="canvas2" style="margin = 0px; padding = 0px;"></canvas> <canvas id="canvas3" style="margin = 0px; padding = 0px;"></canvas> <canvas id="canvas" style="margin = 0px; padding = 0px;"></canvas> </div> </div>