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>