Wave-pendulum

Developer
Not Important
Size
3,399 Kb
Views
50,600
  1. Wave-pendulum Previews
  2. Wave-pendulum HTML Codes
  3. Wave-pendulum CSS Codes
  4. Wave-pendulum JS Codes

How do I make an wave-pendulum?

Attempting to remake this gif from Bees & Bombs. What is a wave-pendulum? How do you make a wave-pendulum? This script and codes were developed by Not Important on 13 July 2022, Wednesday.

Wave-pendulum Previews
IQ Test

Wave-pendulum - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>wave-pendulum</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas height="240" id="js-canvas" width="480"
></canvas> <script src="js/index.js"></script>
</body>
</html>

Wave-pendulum - Script Codes CSS Codes

canvas { display: block; margin: 0 auto;
}

Wave-pendulum - Script Codes JS Codes

'use strict';
setTimeout(function () { var canvasEl = document.getElementById('js-canvas'); var ctx = canvasEl.getContext('2d'); var width = canvasEl.width; var height = canvasEl.height; var interpolator = createInterpolator(0, Math.PI, 1); animate(0, ctx, width, height, interpolator);
});
function animate(iteration, ctx, width, height, interpolator) { ctx.fillStyle = 'rgba(255, 255, 255, 0.95)'; ctx.fillRect(0, 0, width, height); var halfWidth = width / 2; var centerX = halfWidth; var trackCount = 12; var trackSizeStep = (halfWidth - 5) / trackCount; var baseDuration = trackCount * 25; for (var trackIndex = 0; trackIndex < trackCount; trackIndex++) { var startPhase = trackIndex % 2 ? 0 : 1; var radius = trackIndex * trackSizeStep + 15; var duration = baseDuration * (60 / (60 * (trackCount - trackIndex))); drawTrack(ctx, centerX, 5, radius, duration, startPhase, interpolator, iteration + duration / 2); } requestAnimationFrame(function () { animate(iteration + 1, ctx, width, height, interpolator); });
}
function drawTrack(ctx, xPos, yPos, radius, duration, startPhase, interpolator, iteration) { drawPath(ctx, xPos, yPos, radius); drawPendulum(ctx, xPos, yPos, radius, duration, startPhase, interpolator, iteration);
}
function drawPendulum(ctx, xPos, yPos, distance, duration, startPhase, interpolator, iteration) { var t = iteration % duration / duration; var currentPhase = startPhase + Math.floor(iteration / duration) % 2; ctx.fillStyle = 'rgba(16, 16, 16, 0.95)'; ctx.strokeStyle = 'none'; ctx.beginPath(); var angle = interpolator(t); if (currentPhase === 1) { angle = Math.PI - angle; } var x = xPos + Math.cos(angle) * distance; var y = yPos + Math.sin(angle) * distance; ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fill(); ctx.closePath();
}
function drawPath(ctx, xPos, yPos, radius) { ctx.fillStyle = '#111'; ctx.strokeStyle = '#111'; ctx.beginPath(); ctx.arc(xPos, yPos, radius, 0, Math.PI); ctx.stroke(); ctx.closePath();
}
function createInterpolator(valueStart, valueDelta, duration) { return function (t) { t /= duration / 2; if (t < 1) { return valueDelta / 2 * (t * t) + valueStart; } t--; return -valueDelta / 2 * (t * (t - 2) - 1) + valueStart; };
}
Wave-pendulum - Script Codes
Wave-pendulum - Script Codes
Home Page Home
Developer Not Important
Username clindsey
Uploaded July 13, 2022
Rating 4.5
Size 3,399 Kb
Views 50,600
Do you need developer help for Wave-pendulum?

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!

Not Important (clindsey) Script Codes
Name
Terrain-generator-canvas
Spiral
Learning-shader-passes-1.0.0
SectorFlow
Flame-view-1.0.0
FluxTabulate
BubbleCache
PokerCheck
Uber-vs-zadvorsky-1.0.0
FlowField
Create amazing web content 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!