More 2D visualizations. Life games, simple wrap-around turtle graphic…

…s, not-actually-bezier-curves, and chernoff faces.
rheaplex · Dec 21, 2014 · 33229b7 · 33229b7
1 parent 895542f
commit 33229b7
Show file tree

Hide file tree

Showing 25 changed files with 1,324 additions and 5 deletions.
diff --git a/bitcoin-html5/blocks-beziers.html b/bitcoin-html5/blocks-beziers.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Bitcoin Transactions</title>
+    <link rel="stylesheet" type="text/css" href="css/beziers.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="js/reconnecting-websocket.js"></script>
+    <script src="js/representations.js"></script>
+    <script src="js/beziers.js"></script>
+  </head>
+  <body>
+    <div id="transactions">
+      <div id="transactions-inner">
+      </div>
+    </div>
+    <script>
+      init('{"op":"blocks_sub"}');
+    </script>
+  </body>
+</html>
diff --git a/bitcoin-html5/blocks-cellulars.html b/bitcoin-html5/blocks-cellulars.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Bitcoin Transactions</title>
+    <link rel="stylesheet" type="text/css" href="css/cellulars.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="js/reconnecting-websocket.js"></script>
+    <script src="js/cellular.js"></script>
+    <script src="js/representations.js"></script>
+    <script src="js/cellulars.js"></script>
+  </head>
+  <body>
+    <div id="transactions">
+      <div id="transactions-inner">
+      </div>
+    </div>
+    <script>
+      init('{"op":"blocks_sub"}');
+    </script>
+  </body>
+</html>
diff --git a/bitcoin-html5/blocks-chernoffs.html b/bitcoin-html5/blocks-chernoffs.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Bitcoin Transactions</title>
+    <link rel="stylesheet" type="text/css" href="css/chernoffs.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="js/reconnecting-websocket.js"></script>
+    <script src="js/d3.min.js"></script>
+    <script src="js/chernoff.js"></script>
+    <script src="js/representations.js"></script>
+    <script src="js/chernoffs.js"></script>
+  </head>
+  <body>
+    <div id="transactions">
+      <div id="transactions-inner">
+      </div>
+    </div>
+    <script>
+      init('{"op":"blocks_sub"}');
+    </script>
+  </body>
+</html>
diff --git a/bitcoin-html5/blocks-lifes.html b/bitcoin-html5/blocks-lifes.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Bitcoin Transactions</title>
+    <link rel="stylesheet" type="text/css" href="css/lifes.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="js/reconnecting-websocket.js"></script>
+    <script src="js/life.js"></script>
+    <script src="js/representations.js"></script>
+    <script src="js/lifes.js"></script>
+  </head>
+  <body>
+    <div id="transactions">
+      <div id="transactions-inner">
+      </div>
+    </div>
+    <script>
+      init('{"op":"blocks_sub"}');
+    </script>
+  </body>
+</html>
diff --git a/bitcoin-html5/blocks-turtles.html b/bitcoin-html5/blocks-turtles.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Bitcoin Transactions</title>
+    <link rel="stylesheet" type="text/css" href="css/turtles.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="js/reconnecting-websocket.js"></script>
+    <script src="js/representations.js"></script>
+    <script src="js/turtles.js"></script>
+  </head>
+  <body>
+    <div id="transactions">
+      <div id="transactions-inner">
+      </div>
+    </div>
+    <script>
+      init('{"op":"blocks_sub"}');
+    </script>
+  </body>
+</html>
diff --git a/bitcoin-html5/css/beziers.css b/bitcoin-html5/css/beziers.css
@@ -0,0 +1,26 @@
+html {
+    overflow:hidden;
+}
+
+.cell {
+    margin: 12px;
+    display: inline-block;
+    outline: lightgray solid 1px;
+}
+
+#transactions-inner {
+    display:inline;
+    text-align: left;
+}
+
+#transactions {
+    text-align: left;
+    /* If this changes, check the row counts at the top of transaction-bitmaps.js */
+    width: 1124px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.cell a {
+    text-decoration: none !important;
+}
diff --git a/bitcoin-html5/css/cellulars.css b/bitcoin-html5/css/cellulars.css
@@ -0,0 +1,25 @@
+html {
+    overflow:hidden;
+}
+
+.cell {
+    margin: 8px;
+    display: inline-block;
+}
+
+#transactions-inner {
+    display:inline;
+    text-align: left;
+}
+
+#transactions {
+    text-align: left;
+    /* If this changes, check the row counts at the top of transaction-bitmaps.js */
+    width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.cell a {
+    text-decoration: none !important;
+}
diff --git a/bitcoin-html5/css/chernoffs.css b/bitcoin-html5/css/chernoffs.css
@@ -0,0 +1,30 @@
+html {
+    overflow:hidden;
+}
+
+.cell {
+    margin: 12px;
+    display: inline-block;
+}
+
+.face {
+    fill: none;
+    stroke: #000;
+}
+
+#transactions-inner {
+    display:inline;
+    text-align: left;
+}
+
+#transactions {
+    text-align: left;
+    /* If this changes, check the row counts at the top of transaction-bitmaps.js */
+    width: 760px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.cell a {
+    text-decoration: none !important;
+}
diff --git a/bitcoin-html5/css/lifes.css b/bitcoin-html5/css/lifes.css
@@ -0,0 +1,25 @@
+html {
+    overflow:hidden;
+}
+
+.cell {
+    margin: 12px;
+    display: inline-block;
+}
+
+#transactions-inner {
+    display:inline;
+    text-align: left;
+}
+
+#transactions {
+    text-align: left;
+    /* If this changes, check the row counts at the top of transaction-bitmaps.js */
+    width: 850px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.cell a {
+    text-decoration: none !important;
+}
diff --git a/bitcoin-html5/css/turtles.css b/bitcoin-html5/css/turtles.css
@@ -0,0 +1,26 @@
+html {
+    overflow:hidden;
+}
+
+.cell {
+    margin: 12px;
+    display: inline-block;
+    outline: lightgray solid 1px;
+}
+
+#transactions-inner {
+    display:inline;
+    text-align: left;
+}
+
+#transactions {
+    text-align: left;
+    /* If this changes, check the row counts at the top of transaction-bitmaps.js */
+    width: 1020px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.cell a {
+    text-decoration: none !important;
+}
diff --git a/bitcoin-html5/js/beziers.js b/bitcoin-html5/js/beziers.js
@@ -0,0 +1,95 @@
+/**
+ *
+ * @licstart  The following is the entire license notice for the
+ *  JavaScript code in this page.
+ *
+ * Copyright (C) 2014  Rob Myers
+ *
+ *
+ * The JavaScript code in this page is free software: you can
+ * redistribute it and/or modify it under the terms of the GNU
+ * General Public License (GNU GPL) as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option)
+ * any later version.  The code is distributed WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+ *
+ * As additional permission under GNU GPL version 3 section 7, you
+ * may distribute non-source (e.g., minimized or compacted) forms of
+ * that code without the copy of the GNU GPL normally required by
+ * section 4, provided you include this license notice and a URL
+ * through which recipients can access the Corresponding Source.
+ *
+ * @licend  The above is the entire license notice
+ * for the JavaScript code in this page.
+ *
+ */
+
+// Make sure these are multiples of the number of cells in a row
+var TRUNCATE_BLOCKS_AT = 1200;
+var TRUNCATE_BLOCKS_TO = 600;
+
+var CANVAS_SIZE = 256;
+
+var conn;
+
+var drawHash = function (canvas, bytes) {
+  var x = canvas.width / 2;
+  var y = canvas.height / 2;
+  var ctx = canvas.getContext('2d');
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  for(var i = 0; i < bytes.length; i += 4) {
+    ctx.quadraticCurveTo(bytes[i], bytes[i+1], bytes[i+2], bytes[i+3]);
+  }
+  ctx.stroke();
+};
+
+var appendHash = function (hash) {
+  //console.log(hash);
+  // Don't add too many elements to the page, we don't want to hog memory
+  var numCells = $('.cell').size();
+  if (numCells >= TRUNCATE_BLOCKS_AT) {
+    var remove = $(".cell:lt(" + (numCells - TRUNCATE_BLOCKS_TO) + ")");
+    remove.slideUp('fast',function() { remove.remove(); });
+  }
+  var bytes = byteValues(hash);
+  var cell = '<span class="cell">' + transactionHashToA(hash)
+           + '<canvas width="' + CANVAS_SIZE + '" height="' + CANVAS_SIZE
+           + '"></canvas></a></span>'
+  $('#transactions-inner').append(cell);
+  var canvas = $('canvas:last')[0];
+  drawHash(canvas, bytes);
+  $('.cell:last').hide();
+  $('html, body').animate({scrollTop: $(document).height()}, 'slow');
+  $('.cell:last').fadeIn('slow');
+};
+
+var initConnection = function (spec) {
+  var err = false;
+  conn = new ReconnectingWebSocket('ws://ws.blockchain.info/inv');
+  conn.onopen = function () {
+    // Should assert conn and err
+    conn.send(spec);
+  };
+  conn.onmessage = function (e) {
+    var data = $.parseJSON(e.data);
+    var hash = data.x.hash;
+    appendHash(hash);
+  };
+  conn.onerror = function (e) {
+    console.log(e);
+    err = e;
+  };
+  conn.onclose = function (e) {
+    if (err) {
+      console.log('Closing connection because: ' + e.toString());
+      conn = null;
+      err = false;
+    }
+  };
+};
+
+var init = function (spec) {
+  initConnection(spec);
+};