Constellations
How do I make an constellations?
What is a constellations? How do you make a constellations? This script and codes were developed by Nick Walsh on 06 November 2022, Sunday.
Constellations - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Constellations</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="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>
Constellations - Script Codes CSS Codes
body { background: #160026 -webkit-radial-gradient(33% 33% circle, #160026 25%, rgba(255, 128, 152, 0.5)); background: #160026 radial-gradient(circle at 33% 33%, #160026 25%, rgba(255, 128, 152, 0.5)); display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh;
}
canvas { left: 0; position: absolute; top: 0;
}
Constellations - Script Codes JS Codes
'use strict';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var height = window.innerHeight;
var width = window.innerWidth;
canvas.height = height;
canvas.width = width;
var particles = [];
var count = 100;
var origin = { x: width / 2, y: height / 2 };
for (var i = 0; i < count; i++) { var particle = { decay: Math.ceil(100 * Math.random() + 20), hue: 90 * Math.random(), radius: 2 * Math.random() + 1, velocity: 0.003 * Math.random(), x: width * Math.random(), y: height * Math.random() }; particles.push(particle);
}
function draw() { particles.forEach(function (particle) { var newCoords = lerp(particle, origin); particle.x = newCoords.x; particle.y = newCoords.y; ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2, true); ctx.fillStyle = 'hsla(' + particle.hue + ', 50%, 75%, ' + particle.decay / 60 + ')'; ctx.shadowBlur = Math.random() * 30; ctx.shadowColor = 'hsla(' + particle.hue + ', 70%, 75%, ' + particle.decay / 60 + ')'; ctx.fill(); particle.decay -= 1; if (particle.decay === 0) { particle.decay = Math.ceil(100 * Math.random() + 20); particle.x = width * Math.random(); particle.y = height * Math.random(); } });
}
function lerp(start, end) { var dx = end.x - start.x; var dy = end.y - start.y; return { x: start.x + dx * start.velocity, y: start.y + dy * start.velocity };
}
function loop() { ctx.clearRect(0, 0, width, height); ctx.translate(origin.x, origin.y); ctx.rotate(0.1 * Math.PI / 180); ctx.translate(-origin.x, -origin.y); draw(); requestAnimationFrame(loop);
}
loop();
Developer | Nick Walsh |
Username | nickawalsh |
Uploaded | November 06, 2022 |
Rating | 3 |
Size | 3,361 Kb |
Views | 16,192 |
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 |
Mapping - 1 | 2,863 Kb |
Mapping - 3 | 2,984 Kb |
Mapping - 2 | 2,925 Kb |
Mapping - 4 | 3,316 Kb |
Sliding Tiles | 2,978 Kb |
Random Geometries | 2,846 Kb |
Rollins | 6,753 Kb |
Animations without d3-timer | 2,803 Kb |
Mapping - Final | 3,755 Kb |
Airline Noise | 3,484 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 |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Flex layout example | Mofny | 1,663 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 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!