requirebin sketch

index.js

var Vec2 = require('pex-math/Vec2')

var canvas = document.createElement('canvas')
canvas.width = 900
canvas.height = 600
document.body.appendChild(canvas)

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

function projectPointOnLine (a, b, p) {
  var ab = Vec2.normalize(Vec2.sub(Vec2.copy(b), a))
  var ap = Vec2.sub(Vec2.copy(p), a)
  var d = Vec2.dot(ab, ap)
  var res = Vec2.add(Vec2.scale(ab, d), a)  
  return res
}

function rotate(cx, cy, x, y, angle) {
  var radians = (Math.PI / 180) * angle,
      cos = Math.cos(radians),
      sin = Math.sin(radians),
      nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
      ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
  return [nx, ny];
}

document.onmousemove = function (e) {
	ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  ctx.fillStyle = 'gray'
  ctx.fillRect(0, 0, 400, 400)

  ctx.strokeStyle = 'black'
  ctx.strokeRect(100, 100, 200, 200)

  var angle = (e.clientY / window.innerHeight * 180) - 90
  
  var p = [0, 0]
  var a = [0, 0]
  var b = [0, 0]
  var pLeft = [0, 0]
  var pRight = [0, 0]
  
  if (angle < 0) {
    a = [100, 300]
    p = [300, 100]
    b = rotate(a[0], a[1], 300, 300, angle)
    pLeft = [100, 100]
		pRight = [300, 300]
    
  } else {
    a = [300, 300]
    p = [100, 100]
    b = rotate(a[0], a[1], 100, 300, angle)
   	pLeft = [100, 300]
		pRight = [300, 100]

  }

  ctx.beginPath()
  ctx.moveTo(a[0], a[1])
  ctx.lineTo(b[0], b[1])
  ctx.stroke()

  var middle = projectPointOnLine(a, b, p)
  ctx.beginPath()
  ctx.moveTo(p[0], p[1])
  ctx.lineTo(middle[0], middle[1])
  ctx.stroke()

  var left = projectPointOnLine(a, b, pLeft)

  ctx.beginPath()
  ctx.moveTo(pLeft[0], pLeft[1])
  ctx.lineTo(left[0], left[1])
  ctx.stroke()

  var right = projectPointOnLine(a, b, pRight)

  ctx.beginPath()
  ctx.moveTo(pRight[0], pRight[1])
  ctx.lineTo(right[0], right[1])
  ctx.stroke()

  var numLines = Math.floor(e.clientX / window.innerWidth * 100)
  console.log(window.innerWidth)
  var spacing = Vec2.distance(p, middle) / numLines

  ctx.save()

  var halfWidth = Vec2.distance(right, left) / 2
  var halfHeight = Vec2.distance(p, middle) / 2

  ctx.translate(200 - halfWidth, 
                200 - halfHeight)

  ctx.translate(halfWidth, halfHeight)
  ctx.rotate(-angle * Math.PI/180)
  ctx.translate(-halfWidth, -halfHeight)
  for (var i = 0; i <= numLines; i++) {
    var x1 = 0
    var y1 = Vec2.distance(p, middle) - i * spacing

    var x2 = Vec2.distance(left, right)
    var y2 = y1

    ctx.strokeStyle = 'red'
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.stroke()
  }
	ctx.restore()

}

minified.js

setTimeout(function(){require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"pex-math/Vec2":[function(require,module,exports){function create(){return[0,0]}function set(a,b){a[0]=b[0];a[1]=b[1];return a}function set2(a,x,y){a[0]=x;a[1]=y;return a}function equals(a,b){return a[0]===b[0]&&a[1]===b[1]}function equals2(a,x,y){return a[0]===x&&a[1]===y}function copy(a,out){if(out!==undefined){out[0]=a[0];out[1]=a[1];return out}return a.slice(0)}function add(a,b){a[0]+=b[0];a[1]+=b[1];return a}function add2(a,x,y){a[0]+=x;a[1]+=y;return a}function sub(a,b){a[0]-=b[0];a[1]-=b[1];return a}function sub2(a,x,y){a[0]-=x;a[1]-=y;return a}function scale(a,n){a[0]*=n;a[1]*=n;return a}function dot(a,b){return a[0]*b[0]+a[1]*b[1]}function length(a){var x=a[0];var y=a[1];return Math.sqrt(x*x+y*y)}function lengthSq(a){var x=a[0];var y=a[1];return x*x+y*y}function normalize(a){var x=a[0];var y=a[1];var l=Math.sqrt(x*x+y*y);l=1/(l||1);a[0]*=l;a[1]*=l;return a}function distance(a,b){return distance2(a,b[0],b[1])}function distance2(a,x,y){var dx=x-a[0];var dy=y-a[1];return Math.sqrt(dx*dx+dy*dy)}function distanceSq(a,b){return distanceSq2(a,b[0],b[1],b[2])}function distanceSq2(a,x,y){var dx=x-a[0];var dy=y-a[1];return dx*dx+dy*dy}function limit(a,n){var x=a[0];var y=a[1];var dsq=x*x+y*y;var lsq=n*n;if(lsq>0&&dsq>lsq){var nd=n/Math.sqrt(dsq);a[0]*=nd;a[1]*=nd}return a}function invert(a){a[0]*=-1;a[1]*=-1;return a}function lerp(a,b,n){var x=a[0];var y=a[1];a[0]=x+(b[0]-x)*n;a[1]=y+(b[1]-y)*n;return a}function toMin(a){a[0]=a[1]=-Number.MAX_VALUE;return a}function toMax(a){a[0]=a[1]=Number.MAX_VALUE;return a}function toZero(a){a[0]=a[1]=0;return a}var Vec2={create:create,set:set,set2:set2,copy:copy,equals:equals,equals2:equals2,add:add,add2:add2,sub:sub,sub2:sub2,scale:scale,dot:dot,length:length,lengthSq:lengthSq,normalize:normalize,distance:distance,distance2:distance2,distanceSq:distanceSq,distanceSq2:distanceSq2,limit:limit,invert:invert,lerp:lerp,toMin:toMin,toMax:toMax,toZero:toZero};module.exports=Vec2},{}]},{},[]);var Vec2=require("pex-math/Vec2");var canvas=document.createElement("canvas");canvas.width=900;canvas.height=600;document.body.appendChild(canvas);var ctx=canvas.getContext("2d");function projectPointOnLine(a,b,p){var ab=Vec2.normalize(Vec2.sub(Vec2.copy(b),a));var ap=Vec2.sub(Vec2.copy(p),a);var d=Vec2.dot(ab,ap);var res=Vec2.add(Vec2.scale(ab,d),a);return res}function rotate(cx,cy,x,y,angle){var radians=Math.PI/180*angle,cos=Math.cos(radians),sin=Math.sin(radians),nx=cos*(x-cx)+sin*(y-cy)+cx,ny=cos*(y-cy)-sin*(x-cx)+cy;return[nx,ny]}document.onmousemove=function(e){ctx.clearRect(0,0,canvas.width,canvas.height);ctx.fillStyle="gray";ctx.fillRect(0,0,400,400);ctx.strokeStyle="black";ctx.strokeRect(100,100,200,200);var angle=e.clientY/window.innerHeight*180-90;var p=[0,0];var a=[0,0];var b=[0,0];var pLeft=[0,0];var pRight=[0,0];if(angle<0){a=[100,300];p=[300,100];b=rotate(a[0],a[1],300,300,angle);pLeft=[100,100];pRight=[300,300]}else{a=[300,300];p=[100,100];b=rotate(a[0],a[1],100,300,angle);pLeft=[100,300];pRight=[300,100]}ctx.beginPath();ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);ctx.stroke();var middle=projectPointOnLine(a,b,p);ctx.beginPath();ctx.moveTo(p[0],p[1]);ctx.lineTo(middle[0],middle[1]);ctx.stroke();var left=projectPointOnLine(a,b,pLeft);ctx.beginPath();ctx.moveTo(pLeft[0],pLeft[1]);ctx.lineTo(left[0],left[1]);ctx.stroke();var right=projectPointOnLine(a,b,pRight);ctx.beginPath();ctx.moveTo(pRight[0],pRight[1]);ctx.lineTo(right[0],right[1]);ctx.stroke();var numLines=Math.floor(e.clientX/window.innerWidth*100);console.log(window.innerWidth);var spacing=Vec2.distance(p,middle)/numLines;ctx.save();var halfWidth=Vec2.distance(right,left)/2;var halfHeight=Vec2.distance(p,middle)/2;ctx.translate(200-halfWidth,200-halfHeight);ctx.translate(halfWidth,halfHeight);ctx.rotate(-angle*Math.PI/180);ctx.translate(-halfWidth,-halfHeight);for(var i=0;i<=numLines;i++){var x1=0;var y1=Vec2.distance(p,middle)-i*spacing;var x2=Vec2.distance(left,right);var y2=y1;ctx.strokeStyle="red";ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke()}ctx.restore()}},0);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "pex-math": "1.0.1"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin