Skip to content

Instantly share code, notes, and snippets.

@nicknikolov

nicknikolov/index.js

Last active September 14, 2017 11:10
Show Gist options
  • Save nicknikolov/22ec9814126f2a869e5af7ea3b90831d to your computer and use it in GitHub Desktop.
Save nicknikolov/22ec9814126f2a869e5af7ea3b90831d to your computer and use it in GitHub Desktop.
Download ZIP
requirebin sketch
Raw
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()
}
Raw
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);
Raw
package.json
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"pex-math": "1.0.1"
}
}
Raw
page-body.html
<!-- contents of this file will be placed inside the <body> -->
Raw
page-head.html
<!-- contents of this file will be placed inside the <head> -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment