romsson/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from romsson's block: Venn diagram canvas

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    canvas {
      image-rendering: pixelated;
		}
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 800,
      height = 600;

    var canvas = d3.select('body')
      .append('canvas')
      .attr('width', width)
      .attr('height', height);

		var ctx = canvas.node().getContext('2d');

    var r = 100;

    ctx.clearRect(0, 0, width, height);
    ctx.globalAlpha = 0.5;
    // does not seem to work https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element
    ctx.imageSmoothingEnabled = false;

    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(150, 150, r, 0, 2*Math.PI);
    ctx.fill();

    ctx.fillStyle = 'green';
    ctx.beginPath();
    ctx.arc(250, 150, r, 0, 2*Math.PI);
    ctx.fill();

    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(200, 250, r, 0, 2*Math.PI);
    ctx.fill();

    // Uint8ClampedArray(1920000)
    var imageData = ctx.getImageData(0, 0, width, height);

    var pixels = imageData.data;

    var colors = []

    function count() {

    	for (var i = 0, il = pixels.length; i < il; i += 4) {
        var color = pixels[i] + "-" + pixels[i+1] + "-" + pixels[i+2]

        if(typeof(colors[color]) === "undefined") {
          colors[color] = 0;
        }

        typeof(colors[color])++

       }

       // Put pixels back into canvas
       ctx.putImageData(imageData, 0, 0);
    }

    count();

		var c = d3.values(colors)
    console.log(c.sort(d3.descending))

    console.log(colors)

    // export as csv
    // https://gist.github.com/cmbaughman/586fd115b627e0a355553015ad5f0576

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	canvas {
	image-rendering: pixelated;
	}
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var width = 800,
	height = 600;

	var canvas = d3.select('body')
	.append('canvas')
	.attr('width', width)
	.attr('height', height);

	var ctx = canvas.node().getContext('2d');

	var r = 100;

	ctx.clearRect(0, 0, width, height);
	ctx.globalAlpha = 0.5;
	// does not seem to work https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element
	ctx.imageSmoothingEnabled = false;

	ctx.fillStyle = 'red';
	ctx.beginPath();
	ctx.arc(150, 150, r, 0, 2*Math.PI);
	ctx.fill();

	ctx.fillStyle = 'green';
	ctx.beginPath();
	ctx.arc(250, 150, r, 0, 2*Math.PI);
	ctx.fill();

	ctx.fillStyle = 'blue';
	ctx.beginPath();
	ctx.arc(200, 250, r, 0, 2*Math.PI);
	ctx.fill();

	// Uint8ClampedArray(1920000)
	var imageData = ctx.getImageData(0, 0, width, height);

	var pixels = imageData.data;

	var colors = []

	function count() {

	for (var i = 0, il = pixels.length; i < il; i += 4) {
	var color = pixels[i] + "-" + pixels[i+1] + "-" + pixels[i+2]

	if(typeof(colors[color]) === "undefined") {
	colors[color] = 0;
	}

	typeof(colors[color])++

	}

	// Put pixels back into canvas
	ctx.putImageData(imageData, 0, 0);
	}

	count();

	var c = d3.values(colors)
	console.log(c.sort(d3.descending))

	console.log(colors)

	// export as csv
	// https://gist.github.com/cmbaughman/586fd115b627e0a355553015ad5f0576

	</script>
	</body>