Add sixteen.js blogpost

1 files changed, 406 insertions, 0 deletions

diff --git a/src/blog/sixteen.html b/src/blog/sixteen.html
new file mode 100644
index 0000000..0c98c35
--- /dev/null
+++ b/src/blog/sixteen.html
@@ -0,0 +1,406 @@
+title: An experiment in programmatic and artistic constraints
+date: February 8, 2020 13:29
+---
+<h3>
+</h3>
+
+<p>
+Write a piece of JavaScript that defines a function named <code>s</code> that
+
+<ul>
+    <li>
+        Takes three non-negative integer arguments: <code>x</code>,
+        <code>y</code>, <code>t</code> (<code>x</code> and <code>y</code>
+        less than <b>16</b>).
+    </li>
+    <li> Returns a non-negative integer less than <b>16</b><sup>2</sup>. </li>
+    <li>
+        The code can be syntactically written in a <b>16</b>x<b>16</b> block of
+        characters.
+    </li>
+</ul>
+</p>
+
+<p>
+The source code defining <code>s</code> will be visually displayed on a 16x16
+grid. 32 times a second, it will be separately called for each <code>x</code>,
+<code>y</code> coordinate of the grid, initially with a <code>t</code> parameter
+equal to 0, and incrementing by one with each series of calls.
+</p>
+
+<p>
+The result of each call to <code>s</code> will determine the shade of the
+character in the corresponding grid location.
+</p>
+
+<h3>In code:</h3>
+<pre>
+var step = 0
+_frame = function() {
+    for (var row = 0; row &lt; 16; row++) {
+        for (var column = 0; column &lt; 16; column++) {
+            <b>var shade = s(row, column, step)</b>
+            var cell = display.children[row].children[column]
+            <b>cell.style.color = `rgb(${shade}, ${shade}, ${shade})`</b>
+        }
+    }
+    step++
+}
+setInterval(_frame, 31.25)
+</pre>
+
+<h3>An example</h3>
+<script>
+    s=(x,y,t)=>{r=(t
+    )=>Math.floor(t%
+    256/16);c=t=>r(t
+    )%2==0?(t%16):-(
+    t%16)+15;m=(x,y,
+    t)=>(x==r(t))&&(
+    y==c(t));d=Array
+    .from({length:4*
+    64}).map((_,i)=>
+    i).find((d)=>m(x
+    ,y,256+t-d));var
+    b=Math.log(d+1)/
+    5.54517744447956
+    return(t<d?2*2*2
+    *2*2*2*2*2:b*2*2
+    *2*2*2*2*2*2);};
+</script>
+<div id='display'>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+    <div class='row'>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+        <code class='cell'></code>
+    </div>
+</div>
+
+<script>
+var display = document.getElementById('display')
+
+var str=`s=(x,y,t)=>{r=(t
+)=>Math.floor(t%
+256/16);c=t=>r(t
+)%2==0?(t%16):-(
+t%16)+15;m=(x,y,
+t)=>(x==r(t))&&(
+y==c(t));d=Array
+.from({length:4*
+64}).map((_,i)=>
+i).find((d)=>m(x
+,y,256+t-d));var
+b=Math.log(d+1)/
+5.54517744447956
+return(t<d?2*2*2
+*2*2*2*2*2:b*2*2
+*2*2*2*2*2*2);};`
+
+var characters = str.split('\n').map(s => s.split(''))
+for (var row = 0; row < 16; row++) {
+    for (var column = 0; column < 16; column++) {
+        var cell = display.children[row].children[column]
+        cell.innerHTML = characters[row][column]
+    }
+}
+
+function makeColor(shade) {
+    return `rgb(${shade}, ${shade}, ${shade})`
+}
+
+var step = 0
+_frame = function() {
+    for (var row = 0; row < 16; row++) {
+        for (var column = 0; column < 16; column++) {
+            var shade = s(row, column, step)
+            var cell = display.children[row].children[column]
+            cell.style.color = makeColor(shade)
+        }
+    }
+    step++
+}
+setInterval(_frame, 31.25)
+</script>