Webleb - UI Elements - Big bang html

HTML

<!DOCTYPE html>

<head>

<title>Universe Formation Simulation</title>

<style>

html, body {

margin: 0;

overflow: hidden;

background: black;

}

canvas {

display: block;

}

</style>

</head>

<body>

const canvas = document.getElementById('universe');

const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const bodies = [];

const stars = [];

const G = 0.05; // Gravitational constant

const collisionTime = 10 * 1000;

const newBodyDelay = 10 * 1000;

const now = () => performance.now();

function rand(min, max) {

return Math.random() * (max - min) + min;

}

function createStars(count = 300) {

for (let i = 0; i < count; i++) {

stars.push({

x: rand(0, canvas.width),

y: rand(0, canvas.height),

radius: Math.random() * 1.5,

alpha: Math.random()

});

}

function drawStars() {

for (const star of stars) {

ctx.fillStyle = `rgba(255,255,255,${star.alpha})`;

ctx.beginPath();

ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);

ctx.fill();

}

class Body {

constructor(x, y, vx, vy, radius, color) {

this.x = x;

this.y = y;

this.vx = vx;

this.vy = vy;

this.radius = radius;

this.color = color;

this.mass = radius * 2;

this.alive = true;

this.spawnTime = now();

}

applyGravity(others) {

for (const other of others) {

if (this === other || !other.alive) continue;

const dx = other.x - this.x;

const dy = other.y - this.y;

const distSq = dx * dx + dy * dy;

const dist = Math.sqrt(distSq);

if (dist < 2) continue;

const force = G * this.mass * other.mass / distSq;

const ax = force * dx / dist;

const ay = force * dy / dist;

this.vx += ax / this.mass;

this.vy += ay / this.mass;

}

move() {

this.x += this.vx;

this.y += this.vy;

}

draw() {

ctx.fillStyle = this.color;

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);

ctx.fill();

}

collidesWith(other) {

const dx = other.x - this.x;

const dy = other.y - this.y;

return Math.hypot(dx, dy) < this.radius + other.radius;

}

function spawnInitialBodies(count = 8) {

for (let i = 0; i < count; i++) {

bodies.push(new Body(

rand(100, canvas.width - 100),

rand(100, canvas.height - 100),

rand(-1, 1),

rand(10, 20),

`hsl(${rand(0, 360)}, 100%, 70%)`

));

}

function handleCollisions() {

for (let i = 0; i < bodies.length; i++) {

for (let j = i + 1; j < bodies.length; j++) {

const a = bodies[i], b = bodies[j];

if (a.alive && b.alive && now() - a.spawnTime > collisionTime && a.collidesWith(b)) {

a.alive = false;

b.alive = false;

const newX = (a.x + b.x) / 2;

const newY = (a.y + b.y) / 2;

setTimeout(() => {

bodies.push(new Body(

newX,

newY,

rand(-0.5, 0.5),

Math.min(a.radius + b.radius, 40),

`hsl(${rand(0, 360)}, 100%, 80%)`

));

}, newBodyDelay);

}

function animate() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawStars();

handleCollisions();

for (const body of bodies) {

if (!body.alive) continue;

body.applyGravity(bodies);

body.move();

body.draw();

}

requestAnimationFrame(animate);

}

createStars();

spawnInitialBodies();

animate();

</script>

</body>

</html>

Big bang html

Recommended

Neumorphic iPod Player HTML Structure

Simple HTML CSS Button

Miami Bike Rental Website HTML Template

HTML

CSS

JS

Recommended

Neumorphic iPod Player HTML Structure

Simple HTML CSS Button

Miami Bike Rental Website HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS