New DoCument body, html { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } canvas { position: absolute; width: 100%; height: 100%; background: #000; cursor: pointer; } #node { dISPlay: none; }"use strict"; { const TentACLe = class { constructor() { this.length = 40 + Math.round(80 * Math.random()); this.vel = 2; this.amp = 0.2 + 0.4 * Math.random(); this.freq = 0.05 + 0.3 * Math.random(); this.dir = 2 * Math.PI * Math.random(); this.frame = 0; this.free = true; this.vDir = 0; this.nodes = []; for (let i = 0; i canvas.width) { head.x--; this.dir += 0.1; } else if (head.x canvas.height) { head.y--; this.dir += 0.1; } else if (head.y 0 ? tentacle.nodes[i - 1] : null; this.pprev = i > 1 ? tentacle.nodes[i - 2] : null; this.size = 6 + s * s / tentacle.length; this.x = x; this.y = y; this.a = 0; this.img = document.getElementById("node"); } move() { const dx = this.x - this.pprev.x; const dy = this.y - this.pprev.y; this.a = Math.atan2(dy, dx); const d = Math.sqrt(dx * dx + dy * dy); this.x = this.prev.x + dx * 10 / d; this.y = this.prev.y + dy * 10 / d; ctx.SAve(); ctx.translate(this.x, this.y); ctx.rotate(this.a + 0.4); ctx.drawImage( this.img, -this.size * 0.5, -this.size * 0.5, this.size, this.size ); ctx.restore(); } }; const canvas = { init() { this.elem = document.createElement("canvas"); document.body.appendChild(this.elem); this.resize(); window.addeventlistener("resize", () => this.resize(), false); return this.elem.getContext("2d"); }, resize() { this.width = this.elem.width = this.elem.offsetWidth; this.height = this.elem.height = this.elem.offsetHeight; } }; const pointer = { init(canvas) { this.x = -1000; this.y = 0; ["mousemove", "touchstart", "touchmove"].forEach((event, touch) => { document.addEventListener( event, e => { if (touch) { e.preventDefault(); this.x = e.targetTouches[0].clientX; this.y = e.targetTouches[0].clientY; } else { this.x = e.clientX; this.y = e.clientY; } }, false ); }); } }; const ctx = canvas.init(); pointer.init(canvas); const tentacles = []; for (let i = 0; i { requestANimationFrame(run); ctx.clearRect(0, 0, canvas.width, canvas.height); for (const tentacle of tentacles) { tentacle.move(); } }; run(); }