User:Mathijs van Oosterhoudt/counting

   <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
   <script type="text/javascript">
   /*
   *  How to search for images and restrict them by size.
   *  This demo will also show how to use Raw Searchers, aka a searcher that is
   *  not attached to a SearchControl.  Thus, we will handle and draw the results
   *  manually.
   */
   
   google.load('search', '1');

   function searchComplete(searcher) {

c = document.getElementById("canvas") //console.log("c is",c) 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;

// Math.floor((Math.random()*100)+1);

     // Check that we got results
     if (searcher.results && searcher.results.length > 0) {
       // Grab our content div, clear it.    
       // Loop through our results, printing them to the page.
       var results = searcher.results;
       for (var i = 0; i < results.length; i++) {
         // For each result write it's title and image to the screen
         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") //console.log("c is",c) 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;

// Math.floor((Math.random()*100)+1);

     // Check that we got results
     if (searcher.results && searcher.results.length > 0) {
       // Grab our content div, clear it.    
       // Loop through our results, printing them to the page.
       var results = searcher.results;
       for (var i = 0; i < results.length; i++) {
         // For each result write it's title and image to the screen
         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") //console.log("c is",c) 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;

// Math.floor((Math.random()*100)+1);

     // Check that we got results
     if (searcher.results && searcher.results.length > 0) {
       // Grab our content div, clear it.    
       // Loop through our results, printing them to the page.
       var results = searcher.results;
       for (var i = 0; i < results.length; i++) {
         // For each result write it's title and image to the screen
         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() {

     // Our ImageSearch instance.
     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);

     // Restrict to extra large images only
     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);

     // Here we set a callback so that anytime a search is executed, it will call
     // the searchComplete function and pass it our ImageSearch searcher.
     // When a search completes, our ImageSearch object is automatically
     // populated with the results.
     imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
     imageSearch2.setSearchCompleteCallback(this, searchComplete2, [imageSearch2]);
     imageSearch3.setSearchCompleteCallback(this, searchComplete3, [imageSearch3]);

     // Find me a beautiful car.
      
      
     imageSearch2.execute("blue sky");

     imageSearch3.execute("the matterhorn");

     imageSearch.execute("old person raising hand");

   }
   google.setOnLoadCallback(OnLoad);
   </script>

 		<canvas id="canvas2" style="margin = 0px; padding = 0px;"></canvas>
 		<canvas id="canvas3" style="margin = 0px; padding = 0px;"></canvas>