kevinfjbecker/pull-block.html

## pull-block.html
<!DOCTYPE html>
<html>
<!--

  Created using JS Bin
  Source can be edited via /uzuzaj/latest/edit

-->
<!DOCTYPE html>
<html>
<!--

  Created using /
  Source can be edited via /uzuzaj/20/edit

-->
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <canvas id="tutorial" width="150" height="150"></canvas>
<script>

$(function(){

  var canvas = document.getElementById('tutorial');
  var ctx = canvas.getContext('2d');

  var WIDTH = $("#tutorial").width();
  var HEIGHT = $("#tutorial").height();

  var disk = {
    cx: 75,
    cy: 50,
    r: 20
  };

  var clear = function() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
  };

  var drawBackground = (function drawBackground() {
    ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.width - 1);
    ctx.beginPath();
    ctx.arc(disk.cx, disk.cy, disk.r, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.stroke();
    return drawBackground;
  }());

  //////////////////////////////////////

  var normalVectorNorth = {
    x: 0,
    y: 1
  };

  var getVectorFromPoints = function(p1, p2) {
    return {
      x: p2.x - p1.x,
      y: p2.y - p1.y
    };
  };

  var getVectorMagnitude = function(v) {
    return Math.sqrt(v.x * v.x + v.y * v.y);
  };

  var getNormalizedVector = function(v) {
    var magnitude = getVectorMagnitude(v);
    return {
      x: v.x / magnitude,
      y: v.y / magnitude
    };
  };

  var getScaledVector = function(v, n) {
    return {
      x: v.x * n,
      y: v.y * n
    };
  };

  var dotProduct = function(v1, v2) {
    return v1.x * v2.x + v1.y * v2.y;
  };

  ///////////////////////////

  $('#tutorial').mousemove(function(e){

    // set stuff up

    var rectHeight = 20;

    var coords = {};
    coords.x = e.clientX - $(this).offset().left;
    coords.y = e.clientY - $(this).offset().top;

    var angle = 0;
    var yScale = 1.0;
    var yTrans = disk.cy;
    var xScale = 1.0;

    var v = getVectorFromPoints(
      {x: disk.cx, y: disk.cy}, {x: coords.x, y: coords.y}
    );
    var distFromDiskCenter = getVectorMagnitude(v);
    v = getNormalizedVector(v);

    if (distFromDiskCenter > disk.r) {
      yScale = (distFromDiskCenter) / rectHeight;
      xScale = yScale; // 2 * (yScale - 1.0) / 3 + 1.0;
    }

    angle = Math.acos(dotProduct(normalVectorNorth, getNormalizedVector(v)));
    angle = coords.x > disk.cx ? -angle : angle;

    // do stuff

    clear();
    drawBackground();

    ctx.save();

    ctx.translate(75, yTrans);
    ctx.rotate(angle);
    ctx.scale(xScale, yScale);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(-4.5, 10);
    ctx.lineTo(-2, 10);
    ctx.lineTo(-4, 20);
    ctx.lineTo(4, 20);
    ctx.lineTo(2, 10);
    ctx.lineTo(4.5, 10);
    ctx.closePath();
    ctx.stroke();

    ctx.restore();
  });

});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<!--

	Created using JS Bin
	Source can be edited via /uzuzaj/latest/edit

	-->
	<!DOCTYPE html>
	<html>
	<!--

	Created using /
	Source can be edited via /uzuzaj/20/edit

	-->
	<head>
	<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style>
	article, aside, figure, footer, header, hgroup,
	menu, nav, section { display: block; }
	</style>
	</head>
	<body>
	<canvas id="tutorial" width="150" height="150"></canvas>
	<script>

	$(function(){

	var canvas = document.getElementById('tutorial');
	var ctx = canvas.getContext('2d');

	var WIDTH = $("#tutorial").width();
	var HEIGHT = $("#tutorial").height();

	var disk = {
	cx: 75,
	cy: 50,
	r: 20
	};

	var clear = function() {
	ctx.clearRect(0, 0, WIDTH, HEIGHT);
	};

	var drawBackground = (function drawBackground() {
	ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.width - 1);
	ctx.beginPath();
	ctx.arc(disk.cx, disk.cy, disk.r, 0, 2 * Math.PI, true);
	ctx.closePath();
	ctx.stroke();
	return drawBackground;
	}());

	//////////////////////////////////////

	var normalVectorNorth = {
	x: 0,
	y: 1
	};

	var getVectorFromPoints = function(p1, p2) {
	return {
	x: p2.x - p1.x,
	y: p2.y - p1.y
	};
	};

	var getVectorMagnitude = function(v) {
	return Math.sqrt(v.x * v.x + v.y * v.y);
	};

	var getNormalizedVector = function(v) {
	var magnitude = getVectorMagnitude(v);
	return {
	x: v.x / magnitude,
	y: v.y / magnitude
	};
	};

	var getScaledVector = function(v, n) {
	return {
	x: v.x * n,
	y: v.y * n
	};
	};

	var dotProduct = function(v1, v2) {
	return v1.x * v2.x + v1.y * v2.y;
	};

	///////////////////////////

	$('#tutorial').mousemove(function(e){

	// set stuff up

	var rectHeight = 20;

	var coords = {};
	coords.x = e.clientX - $(this).offset().left;
	coords.y = e.clientY - $(this).offset().top;

	var angle = 0;
	var yScale = 1.0;
	var yTrans = disk.cy;
	var xScale = 1.0;

	var v = getVectorFromPoints(
	{x: disk.cx, y: disk.cy}, {x: coords.x, y: coords.y}
	);
	var distFromDiskCenter = getVectorMagnitude(v);
	v = getNormalizedVector(v);

	if (distFromDiskCenter > disk.r) {
	yScale = (distFromDiskCenter) / rectHeight;
	xScale = yScale; // 2 * (yScale - 1.0) / 3 + 1.0;
	}

	angle = Math.acos(dotProduct(normalVectorNorth, getNormalizedVector(v)));
	angle = coords.x > disk.cx ? -angle : angle;

	// do stuff

	clear();
	drawBackground();

	ctx.save();

	ctx.translate(75, yTrans);
	ctx.rotate(angle);
	ctx.scale(xScale, yScale);
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(-4.5, 10);
	ctx.lineTo(-2, 10);
	ctx.lineTo(-4, 20);
	ctx.lineTo(4, 20);
	ctx.lineTo(2, 10);
	ctx.lineTo(4.5, 10);
	ctx.closePath();
	ctx.stroke();

	ctx.restore();
	});

	});
	</script>
	</body>
	</html>