From 5fa8da39890847e55278ee63c810e08f1b92e098 Mon Sep 17 00:00:00 2001 From: kom-senapati Date: Sun, 18 Feb 2024 17:38:04 +0530 Subject: [PATCH] background: added Abstract-Particle-Swarm-Background --- .../index.html | 16 ++++++ .../script.js | 57 +++++++++++++++++++ .../style.css | 9 +++ assets/html_files/backgrounds.html | 15 +++++ 4 files changed, 97 insertions(+) create mode 100644 Components/Backgrounds/Abstract-Particle-Swarm-Background/index.html create mode 100644 Components/Backgrounds/Abstract-Particle-Swarm-Background/script.js create mode 100644 Components/Backgrounds/Abstract-Particle-Swarm-Background/style.css diff --git a/Components/Backgrounds/Abstract-Particle-Swarm-Background/index.html b/Components/Backgrounds/Abstract-Particle-Swarm-Background/index.html new file mode 100644 index 00000000..1dc83d6b --- /dev/null +++ b/Components/Backgrounds/Abstract-Particle-Swarm-Background/index.html @@ -0,0 +1,16 @@ + + + + + + + Abstract Particle Swarm Background + + + + + + + + + \ No newline at end of file diff --git a/Components/Backgrounds/Abstract-Particle-Swarm-Background/script.js b/Components/Backgrounds/Abstract-Particle-Swarm-Background/script.js new file mode 100644 index 00000000..b8269408 --- /dev/null +++ b/Components/Backgrounds/Abstract-Particle-Swarm-Background/script.js @@ -0,0 +1,57 @@ +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +const colors = ['#FF5733', '#FFBD33', '#33FF57', '#33C5FF', '#7A33FF', '#FF33E9', '#FFE233']; + +class Particle { + constructor() { + this.x = Math.random() * canvas.width; + this.y = Math.random() * canvas.height; + this.vx = Math.random() * 2 - 1; + this.vy = Math.random() * 2 - 1; + this.size = Math.random() * 3 + 1; + this.color = colors[Math.floor(Math.random() * colors.length)]; + } + + update() { + this.x += this.vx; + this.y += this.vy; + + // Bounce off walls + if (this.x < 0 || this.x > canvas.width) { + this.vx *= -1; + } + if (this.y < 0 || this.y > canvas.height) { + this.vy *= -1; + } + } + + draw() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.fillStyle = this.color; // Particle color + ctx.fill(); + } +} + +// Create particles +const particles = []; +for (let i = 0; i < 100; i++) { + particles.push(new Particle()); +} + +// Animation loop +function animate() { + requestAnimationFrame(animate); + ctx.clearRect(0, 0, canvas.width, canvas.height); + + particles.forEach(particle => { + particle.update(); + particle.draw(); + }); +} + +animate(); diff --git a/Components/Backgrounds/Abstract-Particle-Swarm-Background/style.css b/Components/Backgrounds/Abstract-Particle-Swarm-Background/style.css new file mode 100644 index 00000000..5ae4f3b2 --- /dev/null +++ b/Components/Backgrounds/Abstract-Particle-Swarm-Background/style.css @@ -0,0 +1,9 @@ +body { + margin: 0; + overflow: hidden; +} + +canvas { + display: block; + background-color: black; +} \ No newline at end of file diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html index a6565a46..db692cba 100644 --- a/assets/html_files/backgrounds.html +++ b/assets/html_files/backgrounds.html @@ -486,6 +486,21 @@

Interactive Squares Background

+
+

Abstract Particle Swarm Background

+
+ + + +
+
+ + + +
+