gilmoreorless/.block

## .block
license: cc-by-4.0

## README.md

      
    Raw
  

              README.md
            
          
    A simple reference for me to remember the trigonometry methods required to draw a given shape between two points. In this case it’s an arrow drawn from the centre of the canvas to wherever the mouse cursor is.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}
.control {
  left: 50%;
  position: absolute;
  top: 2em;
  transform: translateX(-50%);
}
.control input {
  width: 200px;
}
.dot {
  fill: #c30;
}
.path {
  fill: #667;
  fill-opacity: 0.7;
}

</style>
<body>
<script src="//d3js.org/d3.v3.js"></script>
<label class="control">Radius: <input type="range" min="2" max="20" step="1" value="10"></label>
<script>

var width = 960,
    height = 500,
    radius = 10;

var cx = width / 2, cy = height / 2;

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

var dot = svg.append('circle')
  .attr('class', 'dot')
  .attr('cx', cx)
  .attr('cy', cy)
  .attr('r', radius);

var path = svg.append('path')
  .attr('class', 'path');

function trianglePath(xy) {
  var x = xy[0] - cx;
  var y = xy[1] - cy;
  var dist = Math.sqrt(x * x + y * y);
  var angle = Math.atan2(y, x) / Math.PI * 180;
  return function () {
    this.attr('d', 'M0,0 L' + [
      0, radius,
      dist - radius, radius / 3,
      dist - radius, radius,
      dist, 0,
      dist - radius, -radius,
      dist - radius, -radius / 3,
      0, -radius
    ] + 'z');
    this.attr('transform', 'translate(' + [cx, cy] + ') rotate(' + angle + ')');
  }
}

d3.select(document).on('mousemove', function () {
  path.call(trianglePath(d3.mouse(svg.node())));
});

document.querySelector('.control input').addEventListener('input', function (e) {
  radius = +this.value;
  dot.attr('r', radius);
}, false);

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}
	.control {
	left: 50%;
	position: absolute;
	top: 2em;
	transform: translateX(-50%);
	}
	.control input {
	width: 200px;
	}
	.dot {
	fill: #c30;
	}
	.path {
	fill: #667;
	fill-opacity: 0.7;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.js"></script>
	<label class="control">Radius: <input type="range" min="2" max="20" step="1" value="10"></label>
	<script>

	var width = 960,
	height = 500,
	radius = 10;

	var cx = width / 2, cy = height / 2;

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

	var dot = svg.append('circle')
	.attr('class', 'dot')
	.attr('cx', cx)
	.attr('cy', cy)
	.attr('r', radius);

	var path = svg.append('path')
	.attr('class', 'path');

	function trianglePath(xy) {
	var x = xy[0] - cx;
	var y = xy[1] - cy;
	var dist = Math.sqrt(x * x + y * y);
	var angle = Math.atan2(y, x) / Math.PI * 180;
	return function () {
	this.attr('d', 'M0,0 L' + [
	0, radius,
	dist - radius, radius / 3,
	dist - radius, radius,
	dist, 0,
	dist - radius, -radius,
	dist - radius, -radius / 3,
	0, -radius
	] + 'z');
	this.attr('transform', 'translate(' + [cx, cy] + ') rotate(' + angle + ')');
	}
	}

	d3.select(document).on('mousemove', function () {
	path.call(trianglePath(d3.mouse(svg.node())));
	});

	document.querySelector('.control input').addEventListener('input', function (e) {
	radius = +this.value;
	dot.attr('r', radius);
	}, false);

	</script>