Galactic Orbitals
How do I make an galactic orbitals?
Galaxy clusters orbiting galaxy clusters, orbiting galaxy clusters...After a short while of orbiting, smaller clusters travel to the centers of larger galaxies && connections are formed . What is a galactic orbitals? How do you make a galactic orbitals? This script and codes were developed by Tiffany Rayside on 13 June 2022, Monday.
Galactic Orbitals - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Galactic Orbitals</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>
Galactic Orbitals - Script Codes CSS Codes
body{ width:100%; margin:0; overflow:hidden; background:hsla(0,0%,0%,1);
}
Galactic Orbitals - Script Codes JS Codes
var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
window.addEventListener('resize', function(){ c.width = w = window.innerWidth; c.height = h = window.innerHeight;
}, false);
var num = w * h / 810;
var arr = [];
var i = 0;
while (arr.length < num) { arr.push({ x: (Math.random() * w) | 0, y: (Math.random() * h) | 0, vx: 0, vy: 0 });
}
function _X(foo) { return Math.sin(foo.y / 45 ) / 0.3;
}
function _Y(foo) { return Math.sin(foo.x / 45 ) / 0.3;
}
function upd(bar) { var n = arr[i]; n.x += n.vx; n.y += n.vy; if (n.x < 0) { n.x = w + n.x; } else if (n.x >= w) { n.x -= w; } if (n.y < 0) { n.y = h + n.y; } else if (n.y >= h) { n.y -= h; } n.vy = _Y(n); n.vx = _X(n);
}
function draw(bar) { var n = arr[i]; var col = 'hsla(' + i + ',90%, 60%, 1)'; //outer rings $.beginPath(); $.fillStyle = col; $.globalAlpha = .1; $.arc(n.x, n.y, 15 / Math.max((n.vx * n.vx + n.vy * n.vy), 0.5), 0, 2 * Math.PI, 0); $.closePath(); $.fill(); //inner rings $.beginPath(); $.globalAlpha = 1; $.fillStyle = col; $.arc(n.x, n.y, 8 / Math.max((n.vx * n.vx + n.vy * n.vy), 0.8), 0, 2 * Math.PI, 0); $.closePath(); $.fill();
}
function go() { $.fillStyle = 'hsla(0,0%,0%,1)'; $.fillRect(0, 0, w, h); for (i = 0; i < num; i++) { upd(i); draw(i); }
};
run();
function run() { window.requestAnimationFrame(run); go();
}
Developer | Tiffany Rayside |
Username | tmrDevelops |
Uploaded | June 13, 2022 |
Rating | 4.5 |
Size | 2,428 Kb |
Views | 56,672 |
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 |
Retro Fractal | 2,685 Kb |
Gradiance 2 | 3,931 Kb |
GOOey | 5,088 Kb |
Quantum Free | 4,171 Kb |
Detour | 4,004 Kb |
Moirai | 2,855 Kb |
Verlet | 3,763 Kb |
Hyperstellar | 2,872 Kb |
Whizzzer | 5,048 Kb |
Breakout | 2,618 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 |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Fading gradient button | Insprd | 1,713 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
CSS Colors | Alexpate | 2,232 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
LDE old privacy page | Jasonangle | 2,339 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!