eesur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Testing out Tadashi Tokieda's examples in his Moiré Patterns video applied to poisson-disc sampling
A duplicated pattern can be rotated to reveal Freaky Dot Patterns
code sources:

mbostock’s Poisson-Disc block
d3noob’s text rotation


## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<body>

<style type='text/css'>
  body{
    background-color:  #FDBB30;
    color: #130C0E;
    width: 700px;
    margin: 0 auto;
    padding: 20px;
    font-family: Consolas, monaco, monospace;
    line-height: 1;
  }
  header {
    padding-left: 80px;
  }
  label {
    font-size: 13px;
    letter-spacing: 2px;
  }
</style>

<header>
  <label for='nAngle'>
     angle: <span id='nAngle-value'>&hellip;</span>
  </label>
  <input type='range' min='0' max='360' id='nAngle'>
</header>
<section id="vis"></section>

<script src='//d3js.org/d3.v3.min.js'></script>

<script>

var width = 600,
    height = 560,
    viewPort = 400;

var sample = poissonDiscSampler(viewPort, viewPort, 10);

var svg = d3.select('#vis').append('svg')
    .attr('width', width)
    .attr('height', height);

var g1 = svg.append('g')
    .attr({
        id: 'holder1',
        transform: 'translate(80, 80) rotate(0)'
     });

var g2 = svg.append('g')
    .attr({
        id: 'holder2',
        transform: 'translate(80, 80) rotate(0)'
     });

// when the input range changes update the angle
d3.select('#nAngle').on('input', function() {
  update(+this.value);
});

// initial starting angle of overlap
update(0);

// update the element
function update(nAngle) {

  d3.select('#nAngle-value').text(nAngle);
  d3.select('#nAngle').property('value', nAngle);
  // rotate
  svg.select('#holder2')
    .attr('transform', 'translate(80, 80) rotate('+nAngle+', ' + viewPort/2 + ',' + viewPort/2 + ')');
}

d3.timer(function() {
  for (var i = 0; i < 10; ++i) {
    var s = sample();
    if (!s) return true;
    g1.append('circle')
        .attr('cx', s[0])
        .attr('cy', s[1])
        .attr('r', 2)
        .attr('fill', '#130C0E')
      .transition()
        .attr('r', 2);

    g2.append('circle')
        .attr('cx', s[0])
        .attr('cy', s[1])
        .attr('r', 2)
        .attr('fill', '#130C0E')
      .transition()
        .attr('r', 2);
  }
});

// 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;
  }
}

d3.select(self.frameElement).style('height', '700px');

</script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<body>

	<style type='text/css'>
	body{
	background-color: #FDBB30;
	color: #130C0E;
	width: 700px;
	margin: 0 auto;
	padding: 20px;
	font-family: Consolas, monaco, monospace;
	line-height: 1;
	}
	header {
	padding-left: 80px;
	}
	label {
	font-size: 13px;
	letter-spacing: 2px;
	}
	</style>

	<header>
	<label for='nAngle'>
	angle: <span id='nAngle-value'>…</span>
	</label>
	<input type='range' min='0' max='360' id='nAngle'>
	</header>
	<section id="vis"></section>

	<script src='//d3js.org/d3.v3.min.js'></script>

	<script>

	var width = 600,
	height = 560,
	viewPort = 400;

	var sample = poissonDiscSampler(viewPort, viewPort, 10);

	var svg = d3.select('#vis').append('svg')
	.attr('width', width)
	.attr('height', height);

	var g1 = svg.append('g')
	.attr({
	id: 'holder1',
	transform: 'translate(80, 80) rotate(0)'
	});

	var g2 = svg.append('g')
	.attr({
	id: 'holder2',
	transform: 'translate(80, 80) rotate(0)'
	});

	// when the input range changes update the angle
	d3.select('#nAngle').on('input', function() {
	update(+this.value);
	});

	// initial starting angle of overlap
	update(0);

	// update the element
	function update(nAngle) {

	d3.select('#nAngle-value').text(nAngle);
	d3.select('#nAngle').property('value', nAngle);
	// rotate
	svg.select('#holder2')
	.attr('transform', 'translate(80, 80) rotate('+nAngle+', ' + viewPort/2 + ',' + viewPort/2 + ')');
	}

	d3.timer(function() {
	for (var i = 0; i < 10; ++i) {
	var s = sample();
	if (!s) return true;
	g1.append('circle')
	.attr('cx', s[0])
	.attr('cy', s[1])
	.attr('r', 2)
	.attr('fill', '#130C0E')
	.transition()
	.attr('r', 2);

	g2.append('circle')
	.attr('cx', s[0])
	.attr('cy', s[1])
	.attr('r', 2)
	.attr('fill', '#130C0E')
	.transition()
	.attr('r', 2);
	}
	});

	// 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;
	}
	}

	d3.select(self.frameElement).style('height', '700px');

	</script>

	</body>
	</html>