Pixel Programmer

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Pixel Programmer</title>

</head>
  <body>
    <div>
      <div id="pixel"></div>
      <h1>Pixel Programmer</h1>
      <p>Open your JavaScript Console, and pass three functions to the paint function.
        This colors the pixel at this location according to the RGB functions you specify.</p>
      <pre>
Usage:
paint(rgb) // where rgb(x,y) is an array [r,g,b]-valued function with components ranging from 0 to 255.
// x ranges from 0 to 319
// y ranges from 0 to 159
Examples (the first being the pattern above):
paint((x,y) => [(x * y) % 256, 0, 0])
paint((x,y) => [ x % 256, 2 * y % 256, 0 ])
paint((x,y) => [Math.floor(128+128*Math.cos(x*y/10)) % 256 , 0, Math.floor(128+128*Math.sin(x*y/10)) % 256])
paint((x,y) => [Math.floor(256*Math.random()), 0, Math.floor(256*Math.random())])
paint((x,y) => [0 , ((x-160)*(x-160)+(y-80)*(y-80))%256, 0])
paint((x,y) => [0 , 0, (5*y + x*x) % 256])
paint((x,y) => [Math.floor(128*Math.random()) , 11 * Math.abs(y % 25-13) % 256, (5*y + x*x) % 256])
paint((x,y) => [Math.floor(10*x) % 256 , Math.floor(10*x+20*y) % 256, Math.floor(20*y) % 256])
      </pre>
      <script src="https://d3js.org/d3.v4.min.js"></script>
      <script type="text/javascript">
function range(n) {
  return Array.from(Array(n).keys());
}
function hierarchicalZipMap(firstArray, secondArray, mapFunction) {
  return Array.from(firstArray.map((a) =>
    Array.from(secondArray.map((b) =>
      mapFunction(a,b)
    ))
  ));
}
const xSize = 320;
const ySize = 160;
const xData = range(xSize);
const yData = range(ySize);
const data = hierarchicalZipMap(yData, xData, (y,x) => ({'x':x, 'y':y}));
const character = '█'; // U+2588 full block
d3.select('#pixel')
  .style('font-size', '6px')
  .selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .attr('id', (d,j) => 'y' + j)
  .selectAll('span')
  .data((d,i) => d) // d===data[i]
  .enter()
  .append('span')
  .attr('id', (d,i) => 'x' + i)
  .style('color', function(d) {
    let x = d.x;
    let y = d.y;
    return 'hsl(' + Math.random() * 360 + ',100%,50%)';
  })
  .text(character);

function paint(rgbFunction) { // [r,g,b]-valued function of (x,y)
  d3.select('#pixel')
    .selectAll('div')  //y
    .selectAll('span') //x
    .style('color', function(d) {
      let x = d.x;
      let y = d.y;
      let rv = rgbFunction(x,y);
      //console.log(rv);
      let [r, g, b] = rgbFunction(x,y);
      let rgb = 'rgb('+r+','+g+','+b+')';
      //console.log(rgb);
      return rgb;
    });
}

paint( (x,y) => [(x * y) % 256,0,0] )
      </script>
    </div>
  </body>
</html>

https://d3js.org/d3.v4.min.js