Redesign, hi-def mode

tmcw · Apr 15, 2012 · 8ad5be4 · 8ad5be4
1 parent a344421
commit 8ad5be4
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 61 deletions.
diff --git a/img/bm_large.jpg b/img/bm_large.jpg
diff --git a/index.html b/index.html
@@ -4,17 +4,31 @@
     <title>Project it Yourself!</title>
     <link href='reset.css' rel='stylesheet' type='text/css' />
     <link href='site.css' rel='stylesheet' type='text/css' />
+    <script src='http://127.0.0.1:1337/'></script>
   </head>
   <body>
-    <canvas id='c2'></canvas>
-    <canvas id='c'></canvas>
     <div class='wrapper'>
       <div class='head'>
-        <h1>Project it Yourself!</h1>
+        <h1>Project it Yourself! (<a target='_blank' href='http://macwright.org/2012/03/12/project-it-yourself.html'>?</a>)</h1>
       </div>
 
       <div class='input'>
-      <p>presets:
+      <table><tr>
+        <td>
+        <label for='fx'>x = function(x, y)</label>
+        <textarea id='fx'>return x</textarea>
+        <small id='fx-error'></small>
+      </td><td>
+        <label>y = function(x, y)</label>
+        <textarea id='fy'>return y</textarea>
+        <small id='fy-error'></small>
+      </td></tr></table>
+      <p class='help'>Fill in the blanks with the body of Javascript
+      tions implementing a projection. Both functions take
+      x &amp; y for longitude and latitude and should
+      return a number. <a href='https://github.com/tmcw/projectityourself'>broken? happy? angry? tell it to the github issue tracker.</a>
+      </p>
+      <p class='help'>presets:
       <a href='#1819127'>azimuthal from the south pole</a>,
       <a href='#1822426'>Tom's fun swoopy</a>,
       <a href='#1988238'>Gall Peters</a>,
@@ -23,22 +37,13 @@ <h1>Project it Yourself!</h1>
       <a href='#2010091'>Lambert cylindrical</a>,
       <a href='#1988386'>Sinusoidal</a>
       </p>
-      <label for='fx'>x = function(x, y)</label>
-      <textarea id='fx'>return x</textarea>
-      <small id='fx-error'></small>
-      <label>y = function(x, y)</label>
-      <textarea id='fy'>return y</textarea>
-      <small id='fy-error'></small>
-      <p class='help'>Fill in the blanks with the body of Javascript
-      tions implementing a projection. Both functions take
-      x &amp; y for longitude and latitude and should
-      return a number. <a href='https://github.com/tmcw/projectityourself'>broken? happy? angry? tell it to the github issue tracker.</a>
-      </p>
       render
       <button id='hifi'>hifi</button>
       <button id='lofi'>lofi</button>
       <button id='download'>download</button>
       <button id='share-button'>share!</button>
+      <button id='hidef'>super hifi (beware)</button>
+      <span id='status'></span>
       <div id='share'>
         <textarea id='gist-share'></textarea>
         <p class='help'>Copy &amp; paste these contents into a new
@@ -49,6 +54,9 @@ <h1>Project it Yourself!</h1>
       </div>
     </div>
 
+    <canvas id='c2'></canvas>
+    <canvas id='c'></canvas>
+
     </div>
     <script src='site.js'></script>
     <script type="text/javascript">

diff --git a/site.css b/site.css
@@ -1,6 +1,8 @@
 body {
   background:url('img/paper.png') #fff;
   font:15px/20px 'Helvetica Neue';
+  margin:0;
+  padding:0;
 }
 
 a {
@@ -12,14 +14,14 @@ a:hover {
 }
 
 .wrapper {
-  margin:0 20px;
+  margin:0 10px;
 }
 
 .head {
 }
 
 h1 {
-  font:30px/80px 'Georgia', serif;
+  font:30px/50px 'Georgia', serif;
 }
 
 h2 {
@@ -39,26 +41,27 @@ label {
 }
 
 #c2 {
-  position:absolute;
-  top:5px;
-  right:5px;
-  bottom:5px;
 }
 
 #c {
   display:none;
 }
 
 textarea {
-  width:400px;
+  width:90%;
   height:100px;
   font:14px/20px monospace;
+  border:2px solid #B30071;
   padding:0;
 }
 
+table {
+  width:100%;
+}
+
 div.input {
-  width:400px;
-  padding:25px;
+  padding:10px;
+  margin-bottom:20px;
   background:rgba(255, 255, 255, 0.5);
 }
 

diff --git a/site.js b/site.js
@@ -1,14 +1,16 @@
 var canvas = document.getElementById('c2'),
-    ctx = canvas.getContext('2d'),
-    fcanvas = document.getElementById('c'),
-    fctx = fcanvas.getContext('2d');
+    ctx = canvas.getContext('2d');
 
 var loaded = false;
 var w = 640;
+
 canvas.width = w;
 canvas.height = w;
-fcanvas.width = w;
-fcanvas.height = 640;
+
+var fcanvas = document.createElement('canvas');
+fcanvas.width = 600;
+fcanvas.height = 300;
+var fctx = fcanvas.getContext('2d');
 
 var bm = new Image();
 bm.onload = function() {
@@ -17,32 +19,67 @@ bm.onload = function() {
 };
 bm.src = 'img/bm.jpg';
 
+var bcanvas = document.createElement('canvas');
+bcanvas.width = 5400;
+bcanvas.height = 2700;
+var bctx = bcanvas.getContext('2d');
+
+var bml = document.createElement('img');
+bml.onload = function() {
+  loaded = true;
+  bctx.drawImage(bml, 0, 0, 5400, 2700);
+};
+bml.src = 'img/bm_large.jpg';
+
 var skip = 5;
 var block = 7;
+var def = 1;
 
-function draw(fx, fy) {
-    if (!loaded) return;
-    var pts = [];
+function sampleCanvas(xcanvas) {
+    var pts = [],
+        w = xcanvas.width,
+        h = xcanvas.height;
+
+    document.getElementById('status').innerHTML = 'building points...';
     for (var x = -180; x <= 180; x += skip) {
       for (var y = -90; y <= 90; y += skip) {
             pts.push({coord: [x, y]});
         }
     }
 
-    var imgData = fctx.getImageData(0, 0, fcanvas.width, fcanvas.height);
+    var ct = xcanvas.getContext('2d');
+    var imgData = ct.getImageData(0, 0, w, h);
     var data = imgData.data;
 
+    document.getElementById('status').innerHTML = 'sampling...';
     for (var i = 0; i < pts.length; i++) {
-        var x = Math.floor((pts[i].coord[0] + 180) * (600/360));
-        var y = Math.floor((pts[i].coord[1] + 90) * (300/180));
+        var x = Math.floor((pts[i].coord[0] + 180) * (w / 360));
+        var y = Math.floor((pts[i].coord[1] + 90) * (h / 180));
         var r = data[4 * ((y * w) + x) + 0],
             g = data[4 * ((y * w) + x) + 1],
             b = data[4 * ((y * w) + x) + 2];
         pts[i].color = 'rgb(' + [r, g, b].join(',') + ')';
     }
 
+    return pts;
+}
+
+function draw(fx, fy) {
+    if (!loaded) return;
+
+    var outputw = 640;
+
+    if (def == 1) {
+        var pts = sampleCanvas(fcanvas);
+    }
+    if (def == 2) {
+        outputw = 2700;
+        var pts = sampleCanvas(bcanvas);
+    }
+
     var mappings = [];
 
+    document.getElementById('status').innerHTML = 'computing points...';
     // Compute all of the points
     for (var i = 0; i < pts.length; i++) {
         mappings.push({
@@ -71,17 +108,18 @@ function draw(fx, fy) {
     }
     var xrange = maxx - minx;
     var yrange = maxy - miny;
-    canvas.width = w;
-    canvas.height = (yrange / xrange) * w;
+    canvas.width = outputw;
+    canvas.height = (yrange / xrange) * outputw;
     var scale_denom;
     if (xrange > yrange) {
-        scale_denom = xrange / w;
+        scale_denom = xrange / outputw;
     } else {
-        scale_denom = yrange / w;
+        scale_denom = yrange / outputw;
     }
     var xoffset = -minx;
     var yoffset = -miny;
 
+    document.getElementById('status').innerHTML = 'drawing points...';
     // Finally draw the points
     for (var i = 0; i < mappings.length; i++) {
         ctx.fillStyle = mappings[i].color;
@@ -98,13 +136,22 @@ function load_and_draw() {
     draw(fx, fy);
 }
 
+document.getElementById('hidef').onclick = function() {
+    def = 2;
+    skip = 0.2;
+    block = 3;
+    load_and_draw();
+};
+
 document.getElementById('hifi').onclick = function() {
+    def = 1;
     skip = 1;
     block = 4;
     load_and_draw();
 };
 
 document.getElementById('lofi').onclick = function() {
+    def = 1;
     skip = 5;
     block = 7;
     load_and_draw();
@@ -121,7 +168,7 @@ document.getElementById('share-button').onclick = function() {
       document.getElementById('fx').value + '}' +
       '\nfunction fy(x, y) {\n' +
       document.getElementById('fy').value + '}';
-}
+};
 
 var ldt;
 
@@ -135,7 +182,7 @@ document.getElementById('fx').onkeyup = function() {
     } catch (e) {
         document.getElementById('fx-error').innerHTML = e;
     }
-}
+};
 
 document.getElementById('fy').onkeyup = function() {
     try {
@@ -147,30 +194,30 @@ document.getElementById('fy').onkeyup = function() {
     } catch (e) {
         document.getElementById('fy-error').innerHTML = e;
     }
-}
+};
 
 function loadpreset() {
 if (window.location.hash) {
-  var id = parseInt(window.location.hash.substring(1));
-  if (isNaN(id)) return alert('you gave a location hash but it wasn\'t an id!');
-  var head =  document.getElementsByTagName('head')[0];
-  var script = document.createElement('script');
-  script.type = 'text/javascript';
-  head.appendChild(script);
-  document.getElementById('fx').value =
-  document.getElementById('fy').value = '... loading preset ...';
-  script.onload = function() {
+    var id = parseInt(window.location.hash.substring(1), 10);
+    if (isNaN(id)) return alert('you gave a location hash but it wasn\'t an id!');
+    var head =  document.getElementsByTagName('head')[0];
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    head.appendChild(script);
     document.getElementById('fx').value =
-      fx.toString()
-        .replace('function fx(x, y) {', '')
-        .replace(/\}/, '');
-    document.getElementById('fy').value =
-      fy.toString()
-        .replace('function fy(x, y) {', '')
-        .replace(/\}/, '');
-    load_and_draw();
-  };
-  script.src = 'https://raw.github.com/gist/' + id;
+    document.getElementById('fy').value = '... loading preset ...';
+    script.onload = function() {
+      document.getElementById('fx').value =
+        fx.toString()
+          .replace('function fx(x, y) {', '')
+          .replace(/\}/, '');
+      document.getElementById('fy').value =
+        fy.toString()
+          .replace('function fy(x, y) {', '')
+          .replace(/\}/, '');
+      load_and_draw();
+    };
+    script.src = 'https://raw.github.com/gist/' + id;
 }
 }