Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
document.documentElement.style.height =
document.documentElement.style.width =
document.body.style.height =
document.body.style.width = "100%"
canvas = document.createElement(`canvas`);
canvas.canvasRes = function (){
var {width, height} = document.body.getBoundingClientRect();
var d = document.body.getBoundingClientRect();
canvas = this;
debugger;
canvas.width = width;
canvas.height = height;
};
cursorElem = document.createElement(`span`);
ctx = canvas.getContext('2d');
window.onresize =
window.onload = function(){
canvas.canvasRes();
debugger;
[canvas, cursorElem].forEach((el) => document.body.appendChild(el))
}
coord = function (x = 0,y = 0) {
this.x = x;
this.y = y;
this.mag = function(){
return Math.hypot(this.x, this.y)
}
this.isNear = function(p, r = 5) {
return Math.hypot(p.x - this.x, p.y - this.y) < r;
}
}
mouse = new coord();
canvas.onmousemove = function(e){
const {top, left} = canvas.getBoundingClientRect();
var x = e.clientX - left;;
var y = e.clientY - top;
mouse.x = x;
mouse.y = y;
cursorElem.style.left = x + 25 + `px`;
cursorElem.style.top = y + 15 + `px`;
cursorElem.textContent = `${x} : ${y}`
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
canvas.addEventListener('mousedown', e => {mouse.left = true; })
canvas.addEventListener('mouseup' , e => {mouse.left = false; mouse.captured = void 0; })
B0 = function(t) { return 1 - t };
B1 = function(t) { return Math.pow(t, 3); }
B2 = function(t) { return (3*t*t*B0(t)); }
B3 = function(t) { return (3*t*B0(t)*(1-t)); }
B4 = function(t) { return (Math.pow(B0(t), 3)); }
function getBezier(percent,C1,C2,C3,C4) {
var pos = new coord();
pos.x = C1.x * B1(percent) + C2.x * B2(percent) +C3.x * B3(percent) + C4.x * B4(percent);
pos.y = C1.y * B1(percent) + C2.y * B2(percent) + C3.y * B3(percent) + C4.y * B4(percent);
return pos;
}
//Control Points
var hw = canvas.width / 2, hh = canvas.height / 2;
PR = 5 // Point radius
P1 = new coord(150,350);
P2 = new coord(150, 150)
P3 = new coord(450,150);
P4 = new coord(450,350);
//Control points to find non-linear point on other curve
Q1 = new coord(0,0);
Q2 = new coord(0.2,0.8);
Q3 = new coord(0.8,0.2);
Q4 = new coord(1,1);
points = [P1, P2, P3, P4].map(function (p) {
return p
});
stage=0.5;
dir=0;
Pi2 = Math.PI * 2;
var t = 0;
var t0 = 0;
function loop (dt = 0) {
t0 += dt / 100000;
t = t0 % 1
if(t > 1) { t = 0 }
ctx.fillStyle = `#000000`;
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.fillRect(0,0, canvas.width, canvas.height);
if (mouse.captured) {
var p = mouse.captured;
p.x = mouse.x;
p.y = mouse.y;
ctx.save();
ctx.beginPath();
ctx.moveTo(p.x,p.y)
ctx.arc(p.x,p.y, 7, 0, Pi2)
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
ctx.restore();
}
ctx.fillStyle = `white`;
ctx.strokeStyle = `white`;
ctx.strokeWidth = `1px`;
ctx.beginPath();
ctx.moveTo(P1.x, P1.y);
ctx.lineTo(P2.x, P2.y);
ctx.stroke();
ctx.closePath()
ctx.beginPath();
ctx.moveTo(P4.x, P4.y);
ctx.lineTo(P3.x, P3.y);
ctx.stroke();
ctx.closePath()
for (let i = 0; i < points.length; i++){
var p = points[i];
// Check if mouse is nearby
if (!mouse.captured && mouse.left && p.isNear(mouse, PR)) {
mouse.captured = p;
}
ctx.beginPath();
ctx.arc(p.x,p.y, 5, 0, Pi2)
ctx.stroke();
ctx.closePath()
}
// var speed = getBezier(t,Q1,Q2,Q3,Q4);
//find position on bezier curve
ctx.beginPath();
ctx.moveTo(P4.x, P4.y)
let tn = 0;
while (tn <= 1) {
b = getBezier(tn,points[0],points[1],points[2],points[3]);
tn += 0.01;
ctx.lineTo(b.x, b.y)
ctx.stroke();
}
ctx.closePath();
requestAnimationFrame(loop)
};
loop()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.