Spider Spring

Developer
Tiffany Rayside
Size
3,375 Kb
Views
38,456
  1. Spider Spring Previews
  2. Spider Spring HTML Codes
  3. Spider Spring CSS Codes
  4. Spider Spring JS Codes

How do I make an spider spring?

Messing w/Spring Physics [ Hooke's Law | Linear-Elasticity ] Mouse /Touch Drag && Release Large, Center Circle Or Click / Touch Anywhere && Hold . What is a spider spring? How do you make a spider spring? This script and codes were developed by Tiffany Rayside on 08 September 2022, Thursday.

Spider Spring Previews
IQ Test

Spider Spring - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spider Spring</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canv"></canvas> <script src="js/index.js"></script>
</body>
</html>

Spider Spring - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body{ width:100%; margin:0; overflow:hidden; cursor:move; background:hsla(0,0%,10%,1);
}

Spider Spring - Script Codes JS Codes

window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); };
})();
var c = null, $ = null, w, h;
var node = null, _arr = [], _cnt = 1, _s = 40, _ln = [], _num = 6;
var _spr = 0.1, _fric = 0.8, _grav = 0, _drag = 10, _tar = {};
var txt = function() { $.fillStyle = 'hsla(255,255%,255%,.4)'; var t1 = "Spider Spring".split("").join(String.fromCharCode(0x2004)); $.font = "5em Poiret One"; $.fillText(t1, w / 2 - 350, h / 4 - 100); var t2 = "Mouse / Touch Drag && Release".split("").join(String.fromCharCode(0x2004)); $.font = "1.5em Poiret One"; $.fillText(t2, w / 2 - 250, h - 100); var t3 = "OR".split("").join(String.fromCharCode(0x2004)); $.font = "1.5em Poiret One"; $.fillText(t3, w / 2, h - 60); var t4 = "Click / Touch Anywhere && Hold".split("").join(String.fromCharCode(0x2004)); $.font = "1.5em Poiret One"; $.fillText(t4, w / 2 - 260, h - 25);
}
var rndCol = function() { var r = (Math.floor(Math.random() * 255)); var g = (Math.floor(Math.random() * 255)); var b = (Math.floor(Math.random() * 255)); return 'rgba(' + r + ',' + g + ',' + b + ',' + '1)';
}
var go = function() { c = document.getElementById("canv"); $ = c.getContext("2d"); w = c.width = window.innerWidth; h = c.height = window.innerHeight; _tar.x = w / 2; _tar.y = h / 2; node = new Node($); node.r = Math.ceil(Math.random() * _s + 50); node.mass = (node.r - node.minR) / 10; for (var i = 0; i < _num; i++) { var _conn = new Node($); _conn.x = Math.random() * w; _conn.y = Math.random() * h; _conn.r = 20; _conn.mass = 0; _ln.push(_conn); } run();
};
var set = function() { for (var i = 0; i < _num; i++) { var a = _ln[i]; _spring(node, a.x, a.y); } node.vy = node.vy * _fric; node.vx = node.vx * _fric; node.x += node.vx; node.y += node.vy; draw();
};
var _spring = function(node, tx, ty, r) { var dx = tx - node.x; var dy = ty - node.y; var tr = r || 0; var _ang = Math.atan2(dy, dx); var rx = (tr + node.r) * Math.cos(_ang); var ry = (tr + node.r) * Math.sin(_ang); var ax = dx * _spr; var ay = dy * _spr; node.vx += ax; node.vy += ay; node.vy += (_grav + node.mass); if (node._fl) { node.vx += node.daX; node.vy += node.daY; }
};
var Node = function() { this.anim.apply(this, arguments);
};
Node.prototype = { anim: function($, color) { this.$ = $; this.x = 0; this.y = 0; this.r = 20; this.minR = 10; this.beg = 0 * Math.PI / 180; this.fin = 360 * Math.PI / 180; this.color = rndCol(); this.vx = 0; this.vy = 0; this._fl = true; this.daX = 0; this.daY = 0; }, draw: function() { this.$.beginPath(); this.$.shadowColor = 'hsla(0,0%,0%,.85)'; this.$.shadowBlur = 30; this.$.shadowOffsetX = 8; this.$.shadowOffsetY = 8; this.$.fillStyle = this.color; this.$.arc(this.x, this.y, this.r, this.beg, this.fin, true); this.$.fill(); }, drag: function(x, y) { var dx = x - this.x; var dy = y - this.y; var d = Math.sqrt(dx * dx + dy * dy) * 0.009; var _ang = Math.atan2(dy, dx); this.daX = _drag * d * Math.cos(_ang); this.daY = _drag * d * Math.sin(_ang); }, hit: function(x, y) { var dx = x - this.x; var dy = y - this.y; var d = Math.sqrt(dx * dx + dy * dy); if (d > this.r) { this._fl = false; return false; } else { this._fl = true; return true; } }
};
var draw = function(mx, my) { $.clearRect(0, 0, w, h); $.save(); $.fillStyle = 'hsla(0,0%,10%,1)'; $.fillRect(0, 0, w, h); $.fill(); txt(); for (var i = 0; i < _num; i++) { var l = _ln[i]; l.draw(); $.beginPath(); $.moveTo(l.x, l.y); $.lineTo(node.x, node.y); $.lineCap = 'round'; $.lineWidth = 6; $.strokeStyle = 'hsla(255,255%,255%,.7)'; $.stroke(); $.closePath(); } node.draw(); $.restore();
};
var run = function() { window.requestAnimFrame(run); set();
}
window.addEventListener('mousedown', function(e) { _tar.x = e.clientX; _tar.y = e.clientY; node._fl = true; node.drag(e.clientX, e.clientY);
}, false);
window.addEventListener('mousemove', function(e) { node.drag(e.clientX, e.clientY);
}, false);
window.addEventListener('mouseup', function(e) { node._fl = false;
}, false);
window.addEventListener('touchstart', function(e) { _tar.x = e.touches[0].clientX; _tar.y = e.touches[0].clientY; node._fl = true; node.drag(e.touches[0].clientX, e.touches[0].clientY);
}, false);
window.addEventListener('touchmove', function(e) { node.drag(e.touches[0].clientX, e.touches[0].clientY);
}, false);
window.addEventListener('touchend', function(e) { node._fl = false;
}, false);
window.addEventListener('resize', function() { c.width = w = window.innerWidth; c.height = h = window.innerHeight; txt();
}.false);
go();
Spider Spring - Script Codes
Spider Spring - Script Codes
Home Page Home
Developer Tiffany Rayside
Username tmrDevelops
Uploaded September 08, 2022
Rating 4.5
Size 3,375 Kb
Views 38,456
Do you need developer help for Spider Spring?

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!

Tiffany Rayside (tmrDevelops) Script Codes
Name
Enchanted
Verlet
Transference
Fav Wave
Galactic Orbitals
Omega Centauri
Birds of a Feather
Liquid Lights
Psychotomimetic
Words of the Rainbow
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!