A Pen by Darby Rathbone

Developer
Darby Rathbone
Size
3,190 Kb
Views
52,624
  1. A Pen by Darby Rathbone Previews
  2. A Pen by Darby Rathbone HTML Codes
  3. A Pen by Darby Rathbone CSS Codes
  4. A Pen by Darby Rathbone JS Codes

How do I make an a pen by darby rathbone?

What is a a pen by darby rathbone? How do you make a a pen by darby rathbone? This script and codes were developed by Darby Rathbone on 03 October 2022, Monday.

A Pen by Darby Rathbone Previews
IQ Test

A Pen by Darby Rathbone - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Darby Rathbone</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id='canvas' width=300 height=300></canvas>
<div id='debug'></div> <script src="js/index.js"></script>
</body>
</html>

A Pen by Darby Rathbone - Script Codes CSS Codes

#canvas{ border:solid 3px;
}

A Pen by Darby Rathbone - Script Codes JS Codes

var Vector = (function () { function Vector(x, y) { this.x = x != null ? x : 0; this.y = y != null ? y : 0 } Vector.add = function (v1, v2) { return new Vector(v1.x + v2.x, v1.y + v2.y); }; Vector.sub = function (v1, v2) { return new Vector(v1.x - v2.x, v1.y - v2.y); }; Vector.project = function (v1, v2) { return v1.clone().scale((v1.dot(v2)) / v1.magSq()); }; Vector.prototype.set = function (x, y) { this.x = x; this.y = y; return this; }; Vector.prototype.add = function (v) { this.x += v.x; this.y += v.y; return this; }; Vector.prototype.sub = function (v) { this.x -= v.x; this.y -= v.y; return this; }; Vector.prototype.scale = function (f) { this.x *= f; this.y *= f; return this; }; Vector.prototype.dot = function (v) { return this.x * v.x + this.y * v.y; }; Vector.prototype.cross = function (v) { return (this.x * v.y) - (this.y * v.x); }; Vector.prototype.mag = function () { return Math.sqrt(this.x * this.x + this.y * this.y); }; Vector.prototype.magSq = function () { return this.x * this.x + this.y * this.y; }; Vector.prototype.dist = function (v) { var dx, dy; dx = v.x - this.x; dy = v.y - this.y; return Math.sqrt(dx * dx + dy * dy); }; Vector.prototype.distSq = function (v) { var dx, dy; dx = v.x - this.x; dy = v.y - this.y; return dx * dx + dy * dy; }; Vector.prototype.norm = function () { var m; m = Math.sqrt(this.x * this.x + this.y * this.y); this.x /= m; this.y /= m; return this; }; Vector.prototype.limit = function (l) { var m, mSq; mSq = this.x * this.x + this.y * this.y; if (mSq > l * l) { m = Math.sqrt(mSq); this.x /= m; this.y /= m; this.x *= l; this.y *= l; return this; } }; Vector.prototype.copy = function (v) { this.x = v.x; this.y = v.y; return this; }; Vector.prototype.clone = function () { return new Vector(this.x, this.y); }; Vector.prototype.clear = function () { this.x = 0; this.y = 0; return this; }; Vector.prototype.angle = function () { return Math.atan2(this.y, this.x); }; Vector.prototype.toString = function () { return "[" + this.x + "," + this.y + "]"; }; return Vector;
})();
var Line = (function () { function Line(start, end) { this.start = start.clone(); this.origin = start.clone(); this.end = end.clone(); this.distance = this.start.dist(this.end); this.angle = this.start.clone().sub(this.end).angle(); this.canvas = document.createElement('canvas'); this.canvas.width = this.canvas.height = this.start.x > this.start.y ? this.start.x : this.start.y + this.distance * 2; this.ctx = this.canvas.getContext('2d'); this.context= 0; this.rotation = 0; this.Force = [new Vector(0,0),new Vector(0,0)]; return this; } Line.prototype.addForce = function(f){ this.Force[0].add(f); this.Force[1].add(f); }; Line.prototype.force = function (f) { this.forcepoints = this.points(); this.forcepoints[1].x -= this.forcepoints[0].x + f.x; this.forcepoints[1].y -= this.forcepoints[0].y + f.y; this.rotationchange = Math.sin(this.forcepoints[1].clone().norm().cross(f.clone())); this.rotation += this.rotationchange; this.rotate(this.rotation); return {rotationspeed:this.rotation, rotationspeedchange:this.rotationchange}; }; Line.prototype.draw = function (ctx) { this.context = ctx; this.c = this.ctx; this.c.save(); this.c.translate(this.origin.x, this.origin.y); this.c.rotate(this.angle%(2*Math.PI)); this.c.beginPath(); this.c.moveTo(0, 0); this.c.lineTo(this.distance, 0); this.c.closePath(); this.c.stroke(); this.c.restore(); ctx.drawImage(this.canvas, 0, 0); }; Line.prototype.rotate = function (r) { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.angle += r; this.angle %= 2*Math.PI ; if (this.angle < 0 ) this.angle+=2*Math.PI; //this.angle ; if (this.context) this.draw(this.context); }; Line.prototype.point = function (x, y, draw) { this.t = new Vector((Math.cos(-this.angle) * (x) - Math.sin(-this.angle) * (y)), (Math.sin(-this.angle) * (x) + Math.cos(-this.angle) * (y))); if (draw === true) { this.ctx.save(); this.ctx.rotate(this.angle); this.ctx.beginPath(); this.ctx.arc(this.t.x, this.t.y, 10, 0, Math.PI * 2, true); this.ctx.closePath(); this.ctx.stroke(); this.ctx.restore(); this.context.drawImage(this.canvas, 0, 0); } return t; }; Line.prototype.points = function () { this.a = []; this.a.push(this.start); this.a.push(new Vector( this.start.x + (((Math.cos(this.angle) * this.distance))), this.start.y + ((Math.sin(this.angle)) * this.distance))); return this.a; }; return Line;
})();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var buffer = document.createElement('canvas');
buffer.width = buffer.height = 500;
var bctx = buffer.getContext('2d');
var lines = new Line(new Vector(150, 150), new Vector(100, 0));
lines.draw(bctx);
var count = 0;
var debug = document.getElementById('debug');
var mousepoint = new Vector(100, 0);
canvas.onmousemove = function (e) { mousepoint = new Vector(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop); var p = lines.point();
};
setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height); bctx.clearRect(0, 0, buffer.width, buffer.height); count++; ctx.save(); //lines.draw(bctx); var mousetemp = new Vector(mousepoint.x - lines.start.x, mousepoint.y - lines.start.y); var forcedata = lines.force((mousetemp).scale(1/(2*mousetemp.magSq()))); /*debug.innerHTML = JSON.stringify(forcedata)+('</br>')+" </br> "+lines.angle+"</br>circumfrence: "+Math.PI*2*lines.distance+"</br>velocity of end:"; var temp = (new Vector(-Math.sin(lines.angle),-Math.cos(lines.angle))).scale(lines.distance*forcedata.rotationspeed); debug.innerHTML+=temp+ " "+temp.mag();*/ //debug.innerHTML = lines.points(); ctx.drawImage(buffer, 0, 0); ctx.restore();
}, 1000 / 60);
A Pen by Darby Rathbone - Script Codes
A Pen by Darby Rathbone - Script Codes
Home Page Home
Developer Darby Rathbone
Username blackkbot
Uploaded October 03, 2022
Rating 3
Size 3,190 Kb
Views 52,624
Do you need developer help for A Pen by Darby Rathbone?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Darby Rathbone (blackkbot) Script Codes
Name
3d css transformations
3d hand
JsLint
3d pure javascript 2d canvas
Jigsaw puzzle
Slow Delaunay triangulation
Remote image
Canvas buffer
Pendulum
Ball physics
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!