m-chrzan.xyz
aboutsummaryrefslogtreecommitdiff
path: root/src/blog/sixteen.html
diff options
context:
space:
mode:
Diffstat (limited to 'src/blog/sixteen.html')
-rw-r--r--src/blog/sixteen.html406
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 08:40:43 +0000