lsbardel/.block

## .block
license: bsd-3-clause

## README.md

      
    Raw
  

              README.md
            
          
    A colored mesh on svg and canvas thanks to d3-canvas-transition module.
Adapted from Color Mesh II block.
It uses the d3 symbol API to draw triangles both on canvas and svg.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Triangular mesh on Canvas</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://giottojs.org/d3-canvas-transition/0.2.6/d3-canvas-transition.js"></script>
</head>
<body>
  <div id="paper">
      <label>
        <input id='svg' name="type" type="radio" checked>
        <span>svg</span>
      </label>
      <label>
        <input id='canvas' name="type" type="radio">
        <span>canvas</span>
      </label>
  </div>
  <div id="example" style="max-width: 960px"></div>
<script>
(function () {
    d3.select('#svg').on('click', function () {
        draw('svg');
    });
    d3.select('#canvas').on('click', function () {
        draw('canvas');
    });
    if (d3.resolution() > 1) {
        d3.select('#paper').append('label').html(
                "<input id='canvas-low' name='type' type='radio'><span>canvas low resolution</span>"
        );
        d3.select('#canvas-low').on('click', function () {
            draw('canvas', 1);
        });
    }

    var example = d3.select("#example"),
        width = d3.getSize(example.style('width')),
        height = Math.min(500, width),
        radius = 30,
        margin = 2*radius;

    var sampler = poissonDiscSampler(width + 2 * margin, height + 2 * margin, radius),
        samples = [],
        sample;

    while (sample = sampler()) samples.push([sample[0] - margin, sample[1] - margin]);

    draw('svg');

    function draw(type, r) {
        example.select('.paper').remove();
        var paper = example
            .append(type)
            .classed('paper', true)
            .attr('width', width).attr('height', height).canvasResolution(r).canvas(true);

        var voronoi = d3.voronoi()
            .extent([[-margin, -margin], [width + margin, height + margin]]),
            grid = voronoi.triangles(samples).map(mesh),
            marks = d3.symbol().type(function (d) {return d;}).size(function (d) {return d.area;});

        paper
            .selectAll("path")
            .data(grid)
            .enter()
            .append("path")
            .attr("transform", function (d) {
                return "translate(" + d.centeroid[0] + "," + d.centeroid[1] + ")";
            })
            .attr("d", marks)
            .style("stroke", function (d) {
                return color(d.centeroid);
            })
            .style("fill", "#333")
            .transition()
            .delay(function(d, i) { return i * 1; })
            .style("fill", function (d) {
                return color(d.centeroid);
            });

        function color (d) {
            var dx = d[0] - width / 2,
                dy = d[1] - height / 2;
            return d3.lab(100 - (dx * dx + dy * dy) / 5000, dx / 10, dy / 10);
        }
    }

    function mesh (d) {
        var area = d3.polygonArea(d),
            centeroid = d3.polygonCentroid(d);

        return {
            area: area,

            centeroid: centeroid,

            draw: function (context, size) {
                var m = Math.sqrt(size/area);
                context.moveTo(p(m, d[0], 0), p(m, d[0], 1));
                context.lineTo(p(m, d[1], 0), p(m, d[1], 1));
                context.lineTo(p(m, d[2], 0), p(m, d[2], 1));
                context.closePath();
            }
        };

        function p(m, v, j) {
            return m*(v[j] - centeroid[j]);
        }
    };

    // Based on https://www.jasondavies.com/poisson-disc/
    function poissonDiscSampler(width, height, radius) {
        var k = 30, // maximum number of samples before rejection
            radius2 = radius * radius,
            R = 3 * radius2,
            cellSize = radius * Math.SQRT1_2,
            gridWidth = Math.ceil(width / cellSize),
            gridHeight = Math.ceil(height / cellSize),
            grid = new Array(gridWidth * gridHeight),
            queue = [],
            queueSize = 0,
            sampleSize = 0;

        return function () {
            if (!sampleSize) return sample(Math.random() * width, Math.random() * height);

            // Pick a random existing sample and remove it from the queue.
            while (queueSize) {
                var i = Math.random() * queueSize | 0,
                    s = queue[i];

                // Make a new candidate between [radius, 2 * radius] from the existing sample.
                for (var j = 0; j < k; ++j) {
                    var a = 2 * Math.PI * Math.random(),
                        r = Math.sqrt(Math.random() * R + radius2),
                        x = s[0] + r * Math.cos(a),
                        y = s[1] + r * Math.sin(a);

                    // Reject candidates that are outside the allowed extent,
                    // or closer than 2 * radius to any existing sample.
                    if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y);
                }

                queue[i] = queue[--queueSize];
                queue.length = queueSize;
            }
        };

        function far(x, y) {
            var i = x / cellSize | 0,
                j = y / cellSize | 0,
                i0 = Math.max(i - 2, 0),
                j0 = Math.max(j - 2, 0),
                i1 = Math.min(i + 3, gridWidth),
                j1 = Math.min(j + 3, gridHeight);

            for (j = j0; j < j1; ++j) {
                var o = j * gridWidth;
                for (i = i0; i < i1; ++i) {
                    if (s = grid[o + i]) {
                        var s,
                            dx = s[0] - x,
                            dy = s[1] - y;
                        if (dx * dx + dy * dy < radius2) return false;
                    }
                }
            }

            return true;
        }

        function sample(x, y) {
            var s = [x, y];
            queue.push(s);
            grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s;
            ++sampleSize;
            ++queueSize;
            return s;
        }
    }
}());
</script>
</body>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Triangular mesh on Canvas</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://giottojs.org/d3-canvas-transition/0.2.6/d3-canvas-transition.js"></script>
	</head>
	<body>
	<div id="paper">
	<label>
	<input id='svg' name="type" type="radio" checked>
	<span>svg</span>
	</label>
	<label>
	<input id='canvas' name="type" type="radio">
	<span>canvas</span>
	</label>
	</div>
	<div id="example" style="max-width: 960px"></div>
	<script>
	(function () {
	d3.select('#svg').on('click', function () {
	draw('svg');
	});
	d3.select('#canvas').on('click', function () {
	draw('canvas');
	});
	if (d3.resolution() > 1) {
	d3.select('#paper').append('label').html(
	"<input id='canvas-low' name='type' type='radio'><span>canvas low resolution</span>"
	);
	d3.select('#canvas-low').on('click', function () {
	draw('canvas', 1);
	});
	}

	var example = d3.select("#example"),
	width = d3.getSize(example.style('width')),
	height = Math.min(500, width),
	radius = 30,
	margin = 2*radius;

	var sampler = poissonDiscSampler(width + 2 * margin, height + 2 * margin, radius),
	samples = [],
	sample;

	while (sample = sampler()) samples.push([sample[0] - margin, sample[1] - margin]);

	draw('svg');

	function draw(type, r) {
	example.select('.paper').remove();
	var paper = example
	.append(type)
	.classed('paper', true)
	.attr('width', width).attr('height', height).canvasResolution(r).canvas(true);

	var voronoi = d3.voronoi()
	.extent([[-margin, -margin], [width + margin, height + margin]]),
	grid = voronoi.triangles(samples).map(mesh),
	marks = d3.symbol().type(function (d) {return d;}).size(function (d) {return d.area;});

	paper
	.selectAll("path")
	.data(grid)
	.enter()
	.append("path")
	.attr("transform", function (d) {
	return "translate(" + d.centeroid[0] + "," + d.centeroid[1] + ")";
	})
	.attr("d", marks)
	.style("stroke", function (d) {
	return color(d.centeroid);
	})
	.style("fill", "#333")
	.transition()
	.delay(function(d, i) { return i * 1; })
	.style("fill", function (d) {
	return color(d.centeroid);
	});

	function color (d) {
	var dx = d[0] - width / 2,
	dy = d[1] - height / 2;
	return d3.lab(100 - (dx * dx + dy * dy) / 5000, dx / 10, dy / 10);
	}
	}

	function mesh (d) {
	var area = d3.polygonArea(d),
	centeroid = d3.polygonCentroid(d);

	return {
	area: area,

	centeroid: centeroid,

	draw: function (context, size) {
	var m = Math.sqrt(size/area);
	context.moveTo(p(m, d[0], 0), p(m, d[0], 1));
	context.lineTo(p(m, d[1], 0), p(m, d[1], 1));
	context.lineTo(p(m, d[2], 0), p(m, d[2], 1));
	context.closePath();
	}
	};

	function p(m, v, j) {
	return m*(v[j] - centeroid[j]);
	}
	};

	// Based on https://www.jasondavies.com/poisson-disc/
	function poissonDiscSampler(width, height, radius) {
	var k = 30, // maximum number of samples before rejection
	radius2 = radius * radius,
	R = 3 * radius2,
	cellSize = radius * Math.SQRT1_2,
	gridWidth = Math.ceil(width / cellSize),
	gridHeight = Math.ceil(height / cellSize),
	grid = new Array(gridWidth * gridHeight),
	queue = [],
	queueSize = 0,
	sampleSize = 0;

	return function () {
	if (!sampleSize) return sample(Math.random() * width, Math.random() * height);

	// Pick a random existing sample and remove it from the queue.
	while (queueSize) {
	var i = Math.random() * queueSize \| 0,
	s = queue[i];

	// Make a new candidate between [radius, 2 * radius] from the existing sample.
	for (var j = 0; j < k; ++j) {
	var a = 2 * Math.PI * Math.random(),
	r = Math.sqrt(Math.random() * R + radius2),
	x = s[0] + r * Math.cos(a),
	y = s[1] + r * Math.sin(a);

	// Reject candidates that are outside the allowed extent,
	// or closer than 2 * radius to any existing sample.
	if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y);
	}

	queue[i] = queue[--queueSize];
	queue.length = queueSize;
	}
	};

	function far(x, y) {
	var i = x / cellSize \| 0,
	j = y / cellSize \| 0,
	i0 = Math.max(i - 2, 0),
	j0 = Math.max(j - 2, 0),
	i1 = Math.min(i + 3, gridWidth),
	j1 = Math.min(j + 3, gridHeight);

	for (j = j0; j < j1; ++j) {
	var o = j * gridWidth;
	for (i = i0; i < i1; ++i) {
	if (s = grid[o + i]) {
	var s,
	dx = s[0] - x,
	dy = s[1] - y;
	if (dx * dx + dy * dy < radius2) return false;
	}
	}
	}

	return true;
	}

	function sample(x, y) {
	var s = [x, y];
	queue.push(s);
	grid[gridWidth * (y / cellSize \| 0) + (x / cellSize \| 0)] = s;
	++sampleSize;
	++queueSize;
	return s;
	}
	}
	}());
	</script>
	</body>