Fixed cache size

Was using size of canvas rather than size of image as cache. Also
turned off animation.

interactives/pixel-viewer/index.html

@@ -50,10 +50,11 @@ <h5>Upload your own image</h5>
             <p>
               <i><span id="pixel-viewer-interactive-resize-values"></span></i>
             </p>
+
+            <div id="picture-picker"></div>
 
             <p>You can save an image of this interactive by right clicking on the zoomed image and clicking "Save image as..." (Chrome/Firefox).</p>
 
-            <div id="picture-picker"></div>
 
             <p class="pixel-viewer-interactive-footer">
                 <a href="https://docs.google.com/forms/d/1gCOwTMAd6idaeIRwvIELARfQsyL6lpI5P4EQa9bIW9w/viewform" target="_blank">Report a bug or suggestion</a><br>

interactives/pixel-viewer/js/pixel-viewer.js

@@ -35,7 +35,7 @@ this.tiling = new Tiling;
 this.piccache = Array();
 
 $( document ).ready(function() {
-  init_cache();
+  	init_cache(300, MAX_HEIGHT);
 	if (getUrlParameter('mode') == 'threshold') {
     	mode = 'threshold';
     }if (getUrlParameter('mode') == 'thresholdgreyscale') {
@@ -794,19 +794,25 @@ $( "#pixel-viewer-interactive-menu-toggle" ).click(function() {
 });
 
 // Caches data about the image
-function init_cache(){
+function init_cache(width, height){
 	piccache = Array()
 	ctx = source_canvas.getContext('2d');
-	for (var col = 0; col<contentWidth; col++){
-		next_col = Array(contentHeight)
+	for (var col = 0; col<width; col++){
+		next_col = Array(height)
 		piccache.push(next_col)
 	}
 }
 
 function get_pixel_data(col, row){
+	if (piccache.length <= col || piccache[col].length <= row){
+		// If we're looking outside the range of the size of picture just make it white
+		return [255,255,255]
+	}
 	if (piccache[col][row] == null){
+		// Otherwise if we haven't already cached this then cache it
 		piccache[col][row] = source_canvas.getContext('2d').getImageData(col, row, 1, 1).data;
 	}
+	// Return the value from the cache
 	return piccache[col][row];
 }
 
@@ -822,7 +828,7 @@ function load_resize_image(src, user_upload=true){
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         canvas.width = image.width;
         canvas.height = image.height;    
-	   	init_cache();
+	   	init_cache(image.width, image.height);
         ctx.drawImage(image, 0, 0, image.width, image.height);
         scroller.scrollTo(0,0);
         if(user_upload){
@@ -914,6 +920,7 @@ var render = function(left, top, zoom) {
 this.scroller = new Scroller(render, {
     zooming: true,
     bouncing: false,
+    animating: false,
     locking: true,
     paging: false,
     snapping: true,