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

HTML CSS Login Form

HTML Login Page

Snake Game HTML CSS

HTML

CSS

JS

Recommended

HTML CSS Login Form

HTML Login Page

Snake Game HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS