बिग बैंग एचटीएमएल

314 kevekıbhack

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

24 February 2024

एचटीएमएल आइडिया जेनरेटर

18 December 2023

टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस

27 February 2024

सिम्पल एचटीएमएल सीएसएस बटन

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>

बिग बैंग एचटीएमएल

अनुशंसित

एचटीएमएल आइडिया जेनरेटर

टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस

सिम्पल एचटीएमएल सीएसएस बटन

HTML

CSS

JS

अनुशंसित

एचटीएमएल आइडिया जेनरेटर

टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस

सिम्पल एचटीएमएल सीएसएस बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS