Smaller logo.
authorEugen Sawin <sawine@me73.com>
Tue, 20 Dec 2011 03:01:50 +0100
changeset 779c443a61358c
parent 76 681b1d7dc3a9
child 78 1e4ba37124e3
Smaller logo.
books.html
dark.css
experiments.html
factory/raw_images/logobase.xcf
factory/v2012/dark.css
factory/v2012/frame.html
factory/v2012/links.html
factory/v2012/linksend.html
factory/v2012/script.js
howiwork.html
images/logobase.png
index.html
links.html
linksend.html
personalwork.html
resume.html
script.js
     1.1 --- a/books.html	Sun Dec 18 19:15:59 2011 +0100
     1.2 +++ b/books.html	Tue Dec 20 03:01:50 2011 +0100
     1.3 @@ -28,8 +28,7 @@
     1.4        <div id="header">
     1.5          <canvas id="logo">
     1.6            FIND A BETTER BROWSER
     1.7 -        </canvas>    
     1.8 -        
     1.9 +        </canvas>        
    1.10        </div>
    1.11        <div id="content-wrap">
    1.12          <div id="main">
     2.1 --- a/dark.css	Sun Dec 18 19:15:59 2011 +0100
     2.2 +++ b/dark.css	Tue Dec 20 03:01:50 2011 +0100
     2.3 @@ -110,7 +110,7 @@
     2.4      color: #F8F8F8;    
     2.5      /* change the values of top and left to adjust the position of the logo*/
     2.6      top: 40px; left: 25px;
     2.7 -    height: 120px;
     2.8 +    height: 100px;
     2.9      width: 670px;
    2.10  }
    2.11  
    2.12 @@ -225,7 +225,7 @@
    2.13  #header {
    2.14      position: relative;
    2.15      width: 1020px;	
    2.16 -    height: 170px;	
    2.17 +    height: 150px;	
    2.18      margin: 0; 
    2.19      padding: 0;			
    2.20  }
     3.1 --- a/experiments.html	Sun Dec 18 19:15:59 2011 +0100
     3.2 +++ b/experiments.html	Tue Dec 20 03:01:50 2011 +0100
     3.3 @@ -28,8 +28,7 @@
     3.4        <div id="header">
     3.5          <canvas id="logo">
     3.6            FIND A BETTER BROWSER
     3.7 -        </canvas>    
     3.8 -        
     3.9 +        </canvas>        
    3.10        </div>
    3.11        <div id="content-wrap">
    3.12          <div id="main">
     4.1 Binary file factory/raw_images/logobase.xcf has changed
     5.1 --- a/factory/v2012/dark.css	Sun Dec 18 19:15:59 2011 +0100
     5.2 +++ b/factory/v2012/dark.css	Tue Dec 20 03:01:50 2011 +0100
     5.3 @@ -110,7 +110,7 @@
     5.4      color: #F8F8F8;    
     5.5      /* change the values of top and left to adjust the position of the logo*/
     5.6      top: 40px; left: 25px;
     5.7 -    height: 120px;
     5.8 +    height: 100px;
     5.9      width: 670px;
    5.10  }
    5.11  
    5.12 @@ -225,7 +225,7 @@
    5.13  #header {
    5.14      position: relative;
    5.15      width: 1020px;	
    5.16 -    height: 170px;	
    5.17 +    height: 150px;	
    5.18      margin: 0; 
    5.19      padding: 0;			
    5.20  }
     6.1 --- a/factory/v2012/frame.html	Sun Dec 18 19:15:59 2011 +0100
     6.2 +++ b/factory/v2012/frame.html	Tue Dec 20 03:01:50 2011 +0100
     6.3 @@ -28,8 +28,7 @@
     6.4        <div id="header">
     6.5          <canvas id="logo">
     6.6            FIND A BETTER BROWSER
     6.7 -        </canvas>    
     6.8 -        
     6.9 +        </canvas>        
    6.10        </div>
    6.11        <div id="content-wrap">
    6.12          <div id="main">
     7.1 --- a/factory/v2012/links.html	Sun Dec 18 19:15:59 2011 +0100
     7.2 +++ b/factory/v2012/links.html	Tue Dec 20 03:01:50 2011 +0100
     7.3 @@ -13,7 +13,7 @@
     7.4  
     7.5  <h2>The Bad</h2>
     7.6  <ul>
     7.7 -<li><h4><a href="https://twitter.com/notchnik">@notchnik</a></h4>
     7.8 +<li><h4><a href="https://twitter.com/notchnik">@sowae</a></h4>
     7.9  The emptyness in 140 characters.
    7.10  </li>
    7.11  <li><h4><a href="https://plus.google.com/101733701635400621767/">Google+ profile</a></h4>
    7.12 @@ -21,7 +21,7 @@
    7.13  </li>
    7.14  </ul>
    7.15  
    7.16 -<h2>The People and their Sites</h2>
    7.17 +<h2>People and their Sites</h2>
    7.18  <ul>
    7.19  <li><h4><a href="http://www.chris-koenig.de">Christian K&ouml;nig</a></h4>
    7.20  An ex-fellow student and companion in the quest for world domination.
     8.1 --- a/factory/v2012/linksend.html	Sun Dec 18 19:15:59 2011 +0100
     8.2 +++ b/factory/v2012/linksend.html	Tue Dec 20 03:01:50 2011 +0100
     8.3 @@ -13,7 +13,7 @@
     8.4  
     8.5  <h2>The Bad</h2>
     8.6  <ul>
     8.7 -<li><h4><a href="https://twitter.com/notchnik">@notchnik</a></h4>
     8.8 +<li><h4><a href="https://twitter.com/notchnik">@sowae</a></h4>
     8.9  The emptyness in 140 characters.
    8.10  </li>
    8.11  <li><h4><a href="https://plus.google.com/101733701635400621767/">Google+ profile</a></h4>
    8.12 @@ -21,7 +21,7 @@
    8.13  </li>
    8.14  </ul>
    8.15  
    8.16 -<h2>The People and their Sites</h2>
    8.17 +<h2>People and their Sites</h2>
    8.18  <ul>
    8.19  <li><h4><a href="http://www.chris-koenig.de">Christian K&ouml;nig</a></h4>
    8.20  An ex-fellow student and companion in the quest for world domination.
     9.1 --- a/factory/v2012/script.js	Sun Dec 18 19:15:59 2011 +0100
     9.2 +++ b/factory/v2012/script.js	Tue Dec 20 03:01:50 2011 +0100
     9.3 @@ -11,7 +11,7 @@
     9.4          $(this).css("cursor", "pointer");        
     9.5      }, function() {
     9.6          $(this).css("cursor", "auto");
     9.7 -    });      
     9.8 +    });
     9.9  });
    9.10  
    9.11  $(document).keypress( function(event) {
    9.12 @@ -22,8 +22,8 @@
    9.13  });
    9.14  
    9.15  var menu_width = 670;
    9.16 -var menu_height = 120;
    9.17 -var menu_splits = new Array(150, 350, 545);
    9.18 +var menu_height = 100;
    9.19 +var menu_splits = new Array(180, 350, 505);
    9.20  
    9.21  var click_events = new Array();
    9.22  click_events["logo"] = new Array();
    9.23 @@ -56,15 +56,21 @@
    9.24  click_events["logo"][3]["func"] = switch_page;
    9.25  click_events["logo"][3]["args"] = new Array("links.html", "linksend.html");
    9.26  
    9.27 -function handle_click(e) {
    9.28 -    var offset = $("#logo").offset();
    9.29 -    var x = e.pageX - offset.left;
    9.30 -    var y = e.pageY - offset.top;   
    9.31 -    for (var i in click_events[e.target.id]) {
    9.32 -        var ces = click_events[e.target.id][i];
    9.33 +function mouse_pos(event) { 
    9.34 +    var offset = $("#logo").offset();   
    9.35 +    return new Array(event.pageX - offset.left, 
    9.36 +                     event.pageY - offset.top);
    9.37 +}
    9.38 +
    9.39 +function handle_click(event) {
    9.40 +    var xy = mouse_pos(event);
    9.41 +    var x = xy[0];
    9.42 +    var y = xy[1];
    9.43 +    for (var i in click_events[event.target.id]) {
    9.44 +        var ces = click_events[event.target.id][i];
    9.45          if (ces && x >= ces["min_x"] && x <= ces["max_x"]
    9.46              && y >= ces["min_y"] && y <= ces["max_y"]) {    
    9.47 -            ces["func"](e.target.id, ces);
    9.48 +            ces["func"](event.target.id, ces);
    9.49              break;
    9.50          }
    9.51      }
    9.52 @@ -76,10 +82,7 @@
    9.53      document.location.href = page;    
    9.54  }
    9.55  
    9.56 -function color_area(id, min_x, max_x, min_y, max_y, colour) {
    9.57 -    var canvas = document.getElementById(id);
    9.58 -    var context = canvas.getContext("2d");  
    9.59 -    var image = context.getImageData(0, 0, menu_width, menu_height);
    9.60 +function colour_area(image, min_x, max_x, min_y, max_y, colour) {   
    9.61      var pixels = image.data;    
    9.62      for (var y = min_y; y <= max_y; y += 1) {
    9.63          for (var x = min_x; x <= max_x; x += 1) {
    9.64 @@ -89,34 +92,46 @@
    9.65                  setPixel(image, x, y, colour);
    9.66              }
    9.67          }
    9.68 -    }   
    9.69 -    context.putImageData(image, 0, 0);
    9.70 +    }    
    9.71  }
    9.72  
    9.73  function init_logo(event) {
    9.74      var canvas = document.getElementById("logo");
    9.75 -    var context = canvas.getContext("2d"); 
    9.76 -    var image = context.getImageData(0, 0, menu_width, menu_height);  
    9.77 +    var context = canvas.getContext("2d");    
    9.78      canvas.width = menu_width;
    9.79      canvas.height = menu_height;
    9.80      context.drawImage(event.target, 0, 0);
    9.81 +    var image = context.getImageData(0, 0, menu_width, menu_height);
    9.82      var white = new Colour(255, 255, 255);
    9.83 +    var black = new Colour(0, 0, 0);
    9.84 +    var orange = new Colour(201, 87, 35);
    9.85 +    var green = new Colour(90, 215, 21);
    9.86 +    var found = false;
    9.87      for (var i in click_events["logo"]) {
    9.88 -        var p = click_events["logo"][i];       
    9.89 +        var p = click_events["logo"][i]; 
    9.90 +        var min_x = p["min_x"];
    9.91 +        var max_x = p["max_x"];
    9.92 +        var min_y = p["min_y"];
    9.93 +        var max_y = p["max_y"];
    9.94          var pos = document.location.href.lastIndexOf("/") + 1; 
    9.95 -        var page = document.location.href.substr(pos);
    9.96 -        var found = false;
    9.97 +        var page = document.location.href.substr(pos);        
    9.98          for (var j in p["args"]) {
    9.99              if (page == p["args"][j]) {         
   9.100 -                color_area("logo", p["min_x"], p["max_x"], 70, p["max_y"], white);
   9.101 -                found = true;
   9.102 +                colour_area(image, min_x, max_x, 0, 60, orange);
   9.103 +                colour_area(image, min_x, max_x, 60, max_y, white);                        
   9.104 +                found = p;
   9.105                  break;
   9.106              }
   9.107          }
   9.108          if (!found) {
   9.109 -            color_area("logo", p["min_x"], p["max_x"], 0, 70, white);
   9.110 +            colour_area(image, min_x, max_x, 0, 60, white);
   9.111 +            colour_area(image, min_x, max_x, 60, max_y,  orange);          
   9.112          }
   9.113 -    }
   9.114 +    } 
   9.115 +    context.putImageData(image, 0, 0);        
   9.116 +    // context.fillStyle = green.str();
   9.117 +    // console.log((found["max_x"] - found["min_x"]) / 2 + found["min_x"] - 2);
   9.118 +    // context.fillRect((found["max_x"]-found["min_x"])/2+found["min_x"]-1, 95, 2, 5);  
   9.119      drawMenuLines();   
   9.120  }
   9.121  
   9.122 @@ -216,7 +231,7 @@
   9.123      this.r = r;
   9.124      this.g = g;
   9.125      this.b = b;
   9.126 -    this.a = a == undefined ? 1 : a;
   9.127 +    this.a = a == undefined ? 255 : a;
   9.128  }
   9.129  Colour.prototype.equals = function(rhs) {
   9.130      for (p in this) {
   9.131 @@ -231,12 +246,12 @@
   9.132      return "rgba(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")";
   9.133  }
   9.134  
   9.135 -function setPixel(image, x, y, color) {
   9.136 +function setPixel(image, x, y, colour) {
   9.137      var index = 4 * (x + y * image.width);
   9.138 -    image.data[index] = color.r;
   9.139 -    image.data[index + 1] = color.g;
   9.140 -    image.data[index + 2] = color.b;
   9.141 -    image.data[index + 3] = color.a;
   9.142 +    image.data[index] = colour.r;
   9.143 +    image.data[index + 1] = colour.g;
   9.144 +    image.data[index + 2] = colour.b;
   9.145 +    image.data[index + 3] = colour.a;
   9.146  }
   9.147  
   9.148  function getPixel(image, x, y) {   
    10.1 --- a/howiwork.html	Sun Dec 18 19:15:59 2011 +0100
    10.2 +++ b/howiwork.html	Tue Dec 20 03:01:50 2011 +0100
    10.3 @@ -28,8 +28,7 @@
    10.4        <div id="header">
    10.5          <canvas id="logo">
    10.6            FIND A BETTER BROWSER
    10.7 -        </canvas>    
    10.8 -        
    10.9 +        </canvas>        
   10.10        </div>
   10.11        <div id="content-wrap">
   10.12          <div id="main">
    11.1 Binary file images/logobase.png has changed
    12.1 --- a/index.html	Sun Dec 18 19:15:59 2011 +0100
    12.2 +++ b/index.html	Tue Dec 20 03:01:50 2011 +0100
    12.3 @@ -28,8 +28,7 @@
    12.4        <div id="header">
    12.5          <canvas id="logo">
    12.6            FIND A BETTER BROWSER
    12.7 -        </canvas>    
    12.8 -        
    12.9 +        </canvas>        
   12.10        </div>
   12.11        <div id="content-wrap">
   12.12          <div id="main">
    13.1 --- a/links.html	Sun Dec 18 19:15:59 2011 +0100
    13.2 +++ b/links.html	Tue Dec 20 03:01:50 2011 +0100
    13.3 @@ -28,8 +28,7 @@
    13.4        <div id="header">
    13.5          <canvas id="logo">
    13.6            FIND A BETTER BROWSER
    13.7 -        </canvas>    
    13.8 -        
    13.9 +        </canvas>        
   13.10        </div>
   13.11        <div id="content-wrap">
   13.12          <div id="main">
   13.13 @@ -48,7 +47,7 @@
   13.14  
   13.15  <h2>The Bad</h2>
   13.16  <ul>
   13.17 -<li><h4><a href="https://twitter.com/notchnik">@notchnik</a></h4>
   13.18 +<li><h4><a href="https://twitter.com/notchnik">@sowae</a></h4>
   13.19  The emptyness in 140 characters.
   13.20  </li>
   13.21  <li><h4><a href="https://plus.google.com/101733701635400621767/">Google+ profile</a></h4>
   13.22 @@ -56,7 +55,7 @@
   13.23  </li>
   13.24  </ul>
   13.25  
   13.26 -<h2>The People and their Sites</h2>
   13.27 +<h2>People and their Sites</h2>
   13.28  <ul>
   13.29  <li><h4><a href="http://www.chris-koenig.de">Christian K&ouml;nig</a></h4>
   13.30  An ex-fellow student and companion in the quest for world domination.
    14.1 --- a/linksend.html	Sun Dec 18 19:15:59 2011 +0100
    14.2 +++ b/linksend.html	Tue Dec 20 03:01:50 2011 +0100
    14.3 @@ -28,8 +28,7 @@
    14.4        <div id="header">
    14.5          <canvas id="logo">
    14.6            FIND A BETTER BROWSER
    14.7 -        </canvas>    
    14.8 -        
    14.9 +        </canvas>        
   14.10        </div>
   14.11        <div id="content-wrap">
   14.12          <div id="main">
   14.13 @@ -48,7 +47,7 @@
   14.14  
   14.15  <h2>The Bad</h2>
   14.16  <ul>
   14.17 -<li><h4><a href="https://twitter.com/notchnik">@notchnik</a></h4>
   14.18 +<li><h4><a href="https://twitter.com/notchnik">@sowae</a></h4>
   14.19  The emptyness in 140 characters.
   14.20  </li>
   14.21  <li><h4><a href="https://plus.google.com/101733701635400621767/">Google+ profile</a></h4>
   14.22 @@ -56,7 +55,7 @@
   14.23  </li>
   14.24  </ul>
   14.25  
   14.26 -<h2>The People and their Sites</h2>
   14.27 +<h2>People and their Sites</h2>
   14.28  <ul>
   14.29  <li><h4><a href="http://www.chris-koenig.de">Christian K&ouml;nig</a></h4>
   14.30  An ex-fellow student and companion in the quest for world domination.
    15.1 --- a/personalwork.html	Sun Dec 18 19:15:59 2011 +0100
    15.2 +++ b/personalwork.html	Tue Dec 20 03:01:50 2011 +0100
    15.3 @@ -28,8 +28,7 @@
    15.4        <div id="header">
    15.5          <canvas id="logo">
    15.6            FIND A BETTER BROWSER
    15.7 -        </canvas>    
    15.8 -        
    15.9 +        </canvas>        
   15.10        </div>
   15.11        <div id="content-wrap">
   15.12          <div id="main">
    16.1 --- a/resume.html	Sun Dec 18 19:15:59 2011 +0100
    16.2 +++ b/resume.html	Tue Dec 20 03:01:50 2011 +0100
    16.3 @@ -28,8 +28,7 @@
    16.4        <div id="header">
    16.5          <canvas id="logo">
    16.6            FIND A BETTER BROWSER
    16.7 -        </canvas>    
    16.8 -        
    16.9 +        </canvas>        
   16.10        </div>
   16.11        <div id="content-wrap">
   16.12          <div id="main">
    17.1 --- a/script.js	Sun Dec 18 19:15:59 2011 +0100
    17.2 +++ b/script.js	Tue Dec 20 03:01:50 2011 +0100
    17.3 @@ -11,7 +11,7 @@
    17.4          $(this).css("cursor", "pointer");        
    17.5      }, function() {
    17.6          $(this).css("cursor", "auto");
    17.7 -    });      
    17.8 +    });
    17.9  });
   17.10  
   17.11  $(document).keypress( function(event) {
   17.12 @@ -22,8 +22,8 @@
   17.13  });
   17.14  
   17.15  var menu_width = 670;
   17.16 -var menu_height = 120;
   17.17 -var menu_splits = new Array(150, 350, 545);
   17.18 +var menu_height = 100;
   17.19 +var menu_splits = new Array(180, 350, 505);
   17.20  
   17.21  var click_events = new Array();
   17.22  click_events["logo"] = new Array();
   17.23 @@ -56,15 +56,21 @@
   17.24  click_events["logo"][3]["func"] = switch_page;
   17.25  click_events["logo"][3]["args"] = new Array("links.html", "linksend.html");
   17.26  
   17.27 -function handle_click(e) {
   17.28 -    var offset = $("#logo").offset();
   17.29 -    var x = e.pageX - offset.left;
   17.30 -    var y = e.pageY - offset.top;   
   17.31 -    for (var i in click_events[e.target.id]) {
   17.32 -        var ces = click_events[e.target.id][i];
   17.33 +function mouse_pos(event) { 
   17.34 +    var offset = $("#logo").offset();   
   17.35 +    return new Array(event.pageX - offset.left, 
   17.36 +                     event.pageY - offset.top);
   17.37 +}
   17.38 +
   17.39 +function handle_click(event) {
   17.40 +    var xy = mouse_pos(event);
   17.41 +    var x = xy[0];
   17.42 +    var y = xy[1];
   17.43 +    for (var i in click_events[event.target.id]) {
   17.44 +        var ces = click_events[event.target.id][i];
   17.45          if (ces && x >= ces["min_x"] && x <= ces["max_x"]
   17.46              && y >= ces["min_y"] && y <= ces["max_y"]) {    
   17.47 -            ces["func"](e.target.id, ces);
   17.48 +            ces["func"](event.target.id, ces);
   17.49              break;
   17.50          }
   17.51      }
   17.52 @@ -76,10 +82,7 @@
   17.53      document.location.href = page;    
   17.54  }
   17.55  
   17.56 -function color_area(id, min_x, max_x, min_y, max_y, colour) {
   17.57 -    var canvas = document.getElementById(id);
   17.58 -    var context = canvas.getContext("2d");  
   17.59 -    var image = context.getImageData(0, 0, menu_width, menu_height);
   17.60 +function colour_area(image, min_x, max_x, min_y, max_y, colour) {   
   17.61      var pixels = image.data;    
   17.62      for (var y = min_y; y <= max_y; y += 1) {
   17.63          for (var x = min_x; x <= max_x; x += 1) {
   17.64 @@ -89,34 +92,46 @@
   17.65                  setPixel(image, x, y, colour);
   17.66              }
   17.67          }
   17.68 -    }   
   17.69 -    context.putImageData(image, 0, 0);
   17.70 +    }    
   17.71  }
   17.72  
   17.73  function init_logo(event) {
   17.74      var canvas = document.getElementById("logo");
   17.75 -    var context = canvas.getContext("2d"); 
   17.76 -    var image = context.getImageData(0, 0, menu_width, menu_height);  
   17.77 +    var context = canvas.getContext("2d");    
   17.78      canvas.width = menu_width;
   17.79      canvas.height = menu_height;
   17.80      context.drawImage(event.target, 0, 0);
   17.81 +    var image = context.getImageData(0, 0, menu_width, menu_height);
   17.82      var white = new Colour(255, 255, 255);
   17.83 +    var black = new Colour(0, 0, 0);
   17.84 +    var orange = new Colour(201, 87, 35);
   17.85 +    var green = new Colour(90, 215, 21);
   17.86 +    var found = false;
   17.87      for (var i in click_events["logo"]) {
   17.88 -        var p = click_events["logo"][i];       
   17.89 +        var p = click_events["logo"][i]; 
   17.90 +        var min_x = p["min_x"];
   17.91 +        var max_x = p["max_x"];
   17.92 +        var min_y = p["min_y"];
   17.93 +        var max_y = p["max_y"];
   17.94          var pos = document.location.href.lastIndexOf("/") + 1; 
   17.95 -        var page = document.location.href.substr(pos);
   17.96 -        var found = false;
   17.97 +        var page = document.location.href.substr(pos);        
   17.98          for (var j in p["args"]) {
   17.99              if (page == p["args"][j]) {         
  17.100 -                color_area("logo", p["min_x"], p["max_x"], 70, p["max_y"], white);
  17.101 -                found = true;
  17.102 +                colour_area(image, min_x, max_x, 0, 60, orange);
  17.103 +                colour_area(image, min_x, max_x, 60, max_y, white);                        
  17.104 +                found = p;
  17.105                  break;
  17.106              }
  17.107          }
  17.108          if (!found) {
  17.109 -            color_area("logo", p["min_x"], p["max_x"], 0, 70, white);
  17.110 +            colour_area(image, min_x, max_x, 0, 60, white);
  17.111 +            colour_area(image, min_x, max_x, 60, max_y,  orange);          
  17.112          }
  17.113 -    }
  17.114 +    } 
  17.115 +    context.putImageData(image, 0, 0);        
  17.116 +    // context.fillStyle = green.str();
  17.117 +    // console.log((found["max_x"] - found["min_x"]) / 2 + found["min_x"] - 2);
  17.118 +    // context.fillRect((found["max_x"]-found["min_x"])/2+found["min_x"]-1, 95, 2, 5);  
  17.119      drawMenuLines();   
  17.120  }
  17.121  
  17.122 @@ -216,7 +231,7 @@
  17.123      this.r = r;
  17.124      this.g = g;
  17.125      this.b = b;
  17.126 -    this.a = a == undefined ? 1 : a;
  17.127 +    this.a = a == undefined ? 255 : a;
  17.128  }
  17.129  Colour.prototype.equals = function(rhs) {
  17.130      for (p in this) {
  17.131 @@ -231,12 +246,12 @@
  17.132      return "rgba(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")";
  17.133  }
  17.134  
  17.135 -function setPixel(image, x, y, color) {
  17.136 +function setPixel(image, x, y, colour) {
  17.137      var index = 4 * (x + y * image.width);
  17.138 -    image.data[index] = color.r;
  17.139 -    image.data[index + 1] = color.g;
  17.140 -    image.data[index + 2] = color.b;
  17.141 -    image.data[index + 3] = color.a;
  17.142 +    image.data[index] = colour.r;
  17.143 +    image.data[index + 1] = colour.g;
  17.144 +    image.data[index + 2] = colour.b;
  17.145 +    image.data[index + 3] = colour.a;
  17.146  }
  17.147  
  17.148  function getPixel(image, x, y) {