Created
March 15, 2023 20:12
-
-
Save gui25/941322813a9c55b1355a25dcf6b82116 to your computer and use it in GitHub Desktop.
Donut 3D animation script, Copy and paste the provided script into your Browser Console in any page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
const canvas = document.createElement('canvas'); | |
canvas.id = 'canvasDonut'; | |
canvas.width = window.innerWidth; | |
canvas.height = window.innerHeight; | |
canvas.style.position = 'fixed'; | |
canvas.style.zIndex = 1000; | |
canvas.style.top = '0'; | |
canvas.style.left = '0'; | |
document.body.innerHTML = ''; | |
document.body.appendChild(canvas); | |
window.addEventListener('resize', function() { | |
canvas.width = window.innerWidth; | |
canvas.height = window.innerHeight; | |
}); | |
let angleA = 1; | |
let angleB = 1; | |
const outerRadius = 1; | |
const innerRadius = 2; | |
const distanceFactor1 = 150; | |
const distanceFactor2 = 5; | |
let animationInterval; | |
let hue = 0; | |
function renderFrame() { | |
const ctx = canvas.getContext('2d'); | |
ctx.fillStyle = '#000'; | |
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); | |
angleA += 0.07; | |
angleB += 0.03; | |
hue += 2; | |
const cosA = Math.cos(angleA); | |
const sinA = Math.sin(angleA); | |
const cosB = Math.cos(angleB); | |
const sinB = Math.sin(angleB); | |
for (let j = 0; j < 6.28; j += 0.3) { | |
const cosJ = Math.cos(j); | |
const sinJ = Math.sin(j); | |
for (let i = 0; i < 6.28; i += 0.1) { | |
const sinI = Math.sin(i); | |
const cosI = Math.cos(i); | |
const offsetX = innerRadius + outerRadius * cosJ; | |
const offsetY = outerRadius * sinJ; | |
const x = offsetX * (cosB * cosI + sinA * sinB * sinI) - offsetY * cosA * sinB; | |
const y = offsetX * (sinB * cosI - sinA * cosB * sinI) + offsetY * cosA * cosB; | |
const depthFactor = 1 / (distanceFactor2 + cosA * offsetX * sinI + sinA * offsetY); | |
const screenX = (canvas.width / 2 + distanceFactor1 * depthFactor * x); | |
const screenY = (canvas.height / 2 - distanceFactor1 * depthFactor * y); | |
const lightIntensity = 0.7 * (cosI * cosJ * sinB - cosA * cosJ * sinI - sinA * sinJ + cosB * (cosA * sinJ - cosJ * sinA * sinI)); | |
if (lightIntensity > 0) { | |
ctx.fillStyle = `hsla(${hue % 360}, 100%, 50%, ${lightIntensity})`; | |
ctx.fillRect(screenX, screenY, 1.5, 1.5); | |
} | |
} | |
} | |
} | |
function toggleAnimation() { | |
if (animationInterval === undefined) { | |
animationInterval = setInterval(renderFrame, 50); | |
} else { | |
clearInterval(animationInterval); | |
animationInterval = undefined; | |
} | |
} | |
toggleAnimation(); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment