bvancil/index.html

## index.html
<!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>
	<!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+128Math.cos(xy/10)) % 256 , 0, Math.floor(128+128Math.sin(xy/10)) % 256])
	paint((x,y) => [Math.floor(256Math.random()), 0, Math.floor(256Math.random())])
	paint((x,y) => [0 , ((x-160)(x-160)+(y-80)(y-80))%256, 0])
	paint((x,y) => [0 , 0, (5y + xx) % 256])
	paint((x,y) => [Math.floor(128Math.random()) , 11 Math.abs(y % 25-13) % 256, (5y + xx) % 256])
	paint((x,y) => [Math.floor(10x) % 256 , Math.floor(10x+20y) % 256, Math.floor(20y) % 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>