Connected levers
How do I make an connected levers?
What is a connected levers? How do you make a connected levers? This script and codes were developed by Findoff on 03 October 2022, Monday.
Connected levers - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>connected levers</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Connected levers - Script Codes JS Codes
console.clear();
document.addEventListener('DOMContentLoaded', function(){ /* i love DOM */ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); document.body.style.padding = '0px'; document.body.style.margin = '0px'; document.body.style.overflow = 'hidden'; /* i love full screen */ var w = canvas.width = window.innerWidth; var h = canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); /* i love bad short opts ^__^ like q or qwe */ var opts = { }; var gui = new dat.GUI(); function opt(name, value, min, max){ opts[name] = value; return gui.add(opts, name, min, max); } /* if code.before > ugly -> just.dont.read(below) // below worse... ==== let's begin. ==== */ class Lever{ constructor(pos, input, len){ this.pos = pos.slice(0); this.input = input; this.len = len; this.b = [0,0]; } process(){ if(this.input.slice) [...this.a] = this.input; else this.a = this.input.b; let x = this.a[0] - this.pos[0]; let y = this.a[1] - this.pos[1]; let l = this.len/Math.hypot(x,y) - 1; this.b[0] = -x*l*opts.mul + this.pos[0]; this.b[1] = -y*l*opts.mul + this.pos[1]; } render(){ ctx.strokeStyle = '#aaf'; if(opts.showCenters){ ctx.beginPath(); ctx.arc(this.pos[0], this.pos[1], 3, 0,Math.PI*2, 0); ctx.stroke(); } ctx.beginPath(); ctx.moveTo(this.a[0], this.a[1]); ctx.lineTo(this.b[0], this.b[1]); ctx.stroke(); } static genFromParent(parent){ let angle = Math.random()*Math.PI*2; let pos = [ parent.pos[0] + Math.cos(angle) * parent.len/2, parent.pos[1] + Math.sin(angle) * parent.len/2, ]; return new Lever(pos, parent.b, parent.len); } } function spread(parent, limit){ if(--limit < 0) return; for(let i=0; i<opts.spread; ++i){ let t = Lever.genFromParent( parent ); levers.push( t ); spread(t, limit); } } function gen(){ levers.length = 0; levers.push(new Lever([w/2, h/2], mouse, opts.len)); spread(levers[0], opts.limit); } opt('showCenters', false); opt('mul', 1.1, 0.5, 2).step(0.1); opt('len', Math.min(w,h)/4, 10, Math.max(w,h)).onChange(gen); opt('limit', 4, 0, 5).step(1).onChange(gen); opt('spread', 2, 1, 4).step(1).onChange(gen); opt('clear', 0.3, 0, 1).step(0.1); opt('autoMove', false); let mouse = [w/2, h/2]; let mouseVel = [-4, 1]; let mouseLeave = true; let levers = []; gen(); /* for(let i=0; i<20; ++i) levers.push( Lever.genFromParent( levers[levers.length*Math.random()>>0] ) ); */ //levers.push(new Lever([w/2+50, h/2], levers[0].b, 150)); function loop(){ ctx.fillStyle = `rgba(0,0,0, ${opts.clear*opts.clear})`; ctx.fillRect(0,0, w,h); if(mouseLeave || opts.autoMove){ let x = mouse[0] + mouseVel[0]; let y = mouse[1] + mouseVel[1]; if( x < 0 || x > w ) mouseVel[0] *= -1; if( y < 0 || y > h ) mouseVel[1] *= -1; mouse[0] += mouseVel[0]; mouse[1] += mouseVel[1]; } for(let lever of levers) lever.process(); for(let lever of levers) lever.render(); requestAnimationFrame(loop); } loop(); canvas.addEventListener('mousemove', (e)=>{ if( opts.autoMove ) return; mouse[0] = e.layerX; mouse[1] = e.layerY; }, false); canvas.addEventListener('mouseleave', (e)=>{ mouseLeave = true; }, false); canvas.addEventListener('mouseenter', (e)=>{ mouseLeave = false; }, false);
}, false);
Developer | Findoff |
Username | findoff |
Uploaded | October 03, 2022 |
Rating | 3.5 |
Size | 2,758 Kb |
Views | 26,312 |
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!
Name | Size |
Curved fractal | 2,430 Kb |
Ant | 2,365 Kb |
The vortex | 3,730 Kb |
Flawed text | 2,280 Kb |
Insect builder v0 | 3,425 Kb |
Let it snow | 2,600 Kb |
Linear-feedback shift register | 3,009 Kb |
Lightning | 2,284 Kb |
Screeps body calculator | 6,315 Kb |
Deflectors vs asteroids | 3,565 Kb |
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!
Name | Username | Size |
Minimelephant | Smashlee | 2,507 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Alumni ECA | MatheusLima92 | 3,777 Kb |
Responsive slide | Thorien | 2,400 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!