Cool background animation

2024-12-31 23:09:19 -08:00
parent 05ff4ecc5d
commit bdee81be16
10 changed files with 222 additions and 5 deletions
--- a/about/index.html
+++ b/about/index.html
@ -18,6 +18,8 @@ $(document).ready(function(){
    </script>
  </head>
  <body>
+    <div id="particle-container"></div>
+    <script src="/js/bg.js"></script>
    <header id="navbar"></header>
    <div style="margin-top: 10%;"></div><!-- Separator -->

--- a/css/colormaticstudios.css
+++ b/css/colormaticstudios.css
@ -52,6 +52,8 @@ flex: 1;
  text-align: center;
  min-width: 40%;
  max-width: 50%;
+  background-color: #ffffff44;
+  backdrop-filter: blur(6px);
 }

 div.project-grid-container div.project-grid-box h1 a {
--- a/css/style.css
+++ b/css/style.css
@ -7,12 +7,20 @@ body {
  margin: 0;
 }

+div#particle-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
 nav {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  align-items: center;
  padding: 12px;
  border-bottom: solid 1px #00000033;
+  z-index: 1;

  margin: 0 auto;
  width: 95%;
@ -108,6 +116,8 @@ main div.hero {
  box-shadow: 1px 1px 8px #00000033;
  padding: 16px;
  text-align: center;
+  background-color: #ffffff44;
+  backdrop-filter: blur(6px);
 }

@media screen and (max-width: 800px) {
@ -208,8 +218,9 @@ div.double-linktree ul.linktree {
 ul.videolist {
  list-style-type: none;
  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
  padding-left: 0;
-  width: min-content;
 }

 ul.videolist li {
--- a/index.html
+++ b/index.html
@ -18,6 +18,8 @@ $(document).ready(function(){
    </script>
  </head>
  <body>
+    <div id="particle-container"></div>
+    <script src="/js/bg.js"></script>
    <header id="navbar"></header>
    <div style="margin-top: 10%;"></div><!-- Separator -->

--- a/js/bg.js
+++ b/js/bg.js
@ -0,0 +1,191 @@
+const canvas = document.createElement('canvas');
+const ctx = canvas.getContext('2d');
+document.getElementById('particle-container').appendChild(canvas);
+
+
+function resize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+
+let particlesArray = [];
+
+const clamp = (val, min, max) => Math.min(Math.max(val, min), max)
+
+class Particle {
+    constructor() {
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+        this.size = (Math.random() * 5 + 1) * 1.5;
+        this.originalSize = this.size;
+        this.speedX = (Math.random() - 0.5) * 0.2;
+        this.speedY = (Math.random() - 0.5) * 0.2;
+        this.growthSpeed = (Math.random() * 0.02) + 0.01; // Growth speed for breathing effect
+        this.shape = ['circle', 'square', 'triangle'][Math.floor(Math.random() * 3)]; // Randomly decide shape
+        this.angle = Math.random() * 360; // Initial rotation angle for squares
+        this.rotationSpeed = Math.random() * 2 - 1; // Random rotation speed
+    }
+
+    update() {
+        this.x += this.speedX;
+        this.y += this.speedY;
+
+        // Reverse direction if particle hits edge
+        if (this.x <= 0 || this.x >= canvas.width) {
+            this.speedX = -this.speedX;
+        }
+        this.x = clamp(0, this.x, canvas.width);
+        if (this.y <= 0 || this.y >= canvas.height) {
+            this.speedY = -this.speedY;
+        }
+        this.y = clamp(0, this.y, canvas.height);
+
+        // Breathing effect: oscillate size
+        this.size += this.growthSpeed;
+        if (this.size >= this.originalSize * 1.5 || this.size <= this.originalSize * 0.5) {
+            this.growthSpeed = -this.growthSpeed; // Reverse growth direction
+        }
+
+        // Update rotation angle for squares and triangles
+        if (this.shape !== 'circle') {
+            this.angle += this.rotationSpeed;
+        }
+    }
+
+    draw() {
+        this.update();
+        ctx.fillStyle = '#bbb';
+        ctx.save();
+        ctx.translate(this.x, this.y);
+        if (this.shape === 'circle') {
+            ctx.beginPath();
+            ctx.arc(0, 0, this.size/2, 0, Math.PI * 2);
+            ctx.closePath();
+        } else if (this.shape === 'square') {
+            ctx.rotate(this.angle * Math.PI / 180); // Rotate square
+            ctx.beginPath();
+            this.roundRect(ctx, -this.size / 2, -this.size / 2, this.size, this.size, this.size/5); // Draw rounded square
+            ctx.closePath();
+        } else if (this.shape === 'triangle') {
+            ctx.rotate(this.angle * Math.PI / 180); // Rotate triangle
+            ctx.beginPath();
+            this.roundTriangle(ctx, this.size*2, this.size/5); // Draw rounded triangle
+            ctx.closePath();
+        }
+        ctx.fill();
+        ctx.restore();
+    }
+
+    roundRect(ctx, x, y, width, height, radius) {
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+        ctx.lineTo(x + radius, y + height);
+        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+        ctx.lineTo(x, y + radius);
+        ctx.quadraticCurveTo(x, y, x + radius, y);
+    }
+
+    roundTriangle(ctx, size, radius) {
+        const x1 = 0, y1 = 0;
+        const x2 = size, y2 = 0;
+        const x3 = size / 2, y3 = size / 1.375;
+        const midX1 = (x1 + x2) / 2;
+        const midY1 = (y1 + y2) / 2;
+        const midX2 = (x2 + x3) / 2;
+        const midY2 = (y2 + y3) / 2;
+        const midX3 = (x3 + x1) / 2;
+        const midY3 = (y3 + y1) / 2;
+        ctx.moveTo(midX1, midY1);
+        ctx.arcTo(x2, y2, midX2, midY2, radius);
+        ctx.arcTo(x3, y3, midX3, midY3, radius);
+        ctx.arcTo(x1, y1, midX1, midY1, radius);
+    }
+}
+
+class Gradient {
+    constructor() {
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+        this.radius = (Math.random() * 500) + 300;
+        this.color = getRandomColor();
+        this.speedX = Math.random() - 0.5;
+        this.speedY = Math.random() - 0.5;
+        this.alpha = Math.random() * 0.5 + 0.5; // Initial alpha between 0.5 and 1
+        this.dAlpha = (Math.random() - 0.5) * 0.01;
+    }
+
+    draw() {
+        this.update();
+        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
+        gradient.addColorStop(0, this.color);
+        gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+
+        ctx.globalAlpha = this.alpha;
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.closePath();
+        ctx.fill();
+        ctx.globalAlpha = 1.0;
+    }
+
+    update() {
+        this.x += this.speedX;
+        this.y += this.speedY;
+        this.alpha += this.dAlpha;
+
+        // Reverse the direction of alpha change to keep it within 0.5 and 1
+        if (this.alpha <= 0.5 || this.alpha >= 1) {
+            this.dAlpha = -this.dAlpha;
+        }
+
+        // Bounce off the edges
+        if (this.x > canvas.width || this.x < 0) {
+            this.speedX = -this.speedX;
+        }
+        this.x = clamp(0, this.x, canvas.width);
+        if (this.y > canvas.height || this.y < 0) {
+            this.speedY = -this.speedY;
+        }
+        this.y = clamp(0, this.y, canvas.height);
+    }
+}
+
+let gradients = [];
+
+function getRandomColor() {
+    const r = Math.floor((Math.random() * 100) + 155);
+    const g = Math.floor((Math.random() * 100) + 155);
+    const b = Math.floor((Math.random() * 100) + 155);
+    return `rgba(${r}, ${g}, ${b}, 1)`;
+}
+
+function init() {
+    particlesArray = [];
+    for (let i = 0; i < 100; i++) {
+        particlesArray.push(new Particle());
+    }
+    gradients = [];
+    for (let i = 0; i < 5; i++) {
+        gradients.push(new Gradient());
+    }
+}
+
+function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    gradients.forEach(gradient => gradient.draw());
+
+    particlesArray.forEach(particle => particle.draw());
+
+    requestAnimationFrame(animate);
+}
+
+resize();
+init();
+animate();
+
+window.addEventListener('resize', resize);
--- a/studios/index.html
+++ b/studios/index.html
@ -19,6 +19,8 @@ $(document).ready(function(){
    </script>
  </head>
  <body>
+    <div id="particle-container"></div>
+    <script src="/js/bg.js"></script>
    <header id="navbar"></header>

    <main>
--- a/video/css/style.css
+++ b/video/css/style.css
@ -7,6 +7,8 @@ div.videocontainer {
  border-radius: 8px;
  box-shadow: 1px 1px 8px #00000033;
  padding: 16px;
+  background-color: #ffffff44;
+  backdrop-filter: blur(6px);
 }

 div.videocontainer video#videoplayer {
@ -90,6 +92,7 @@ div.videocontainer div.download-dropdown div.dropdown-content ul li a {
  }
  div.videocontainer video#videoplayer {
    width: 100%;
+    max-width: none;
  }
  div.videocontainer div.download-dropdown {
    display: block;
--- a/video/index.html
+++ b/video/index.html
@ -19,7 +19,8 @@ $(document).ready(function(){
    </script>
  </head>
  <body>
-
+    <div id="particle-container"></div>
+    <script src="/js/bg.js"></script>
    <header class="container" id="navbar"></header>

    <div class="videocontainer">
--- a/video/js/main.js
+++ b/video/js/main.js
@ -1,4 +1,4 @@
-const BASEURL = "https://files.colormatic.org/"
+const BASEURL = "/"

 var videoplayer = document.getElementById("videoplayer");
 var videotitle = document.getElementById("videotitle");
@ -23,6 +23,7 @@ async function getJSON(url) {
 function getVideo(cname, vname) {
  getJSON(BASEURL + cname + "/videos/data/" + vname + ".json").then((data) => {
    videoURL = BASEURL + cname + "/videos/raw/" + data.video_file + "." + data.video_format;
+    videoplayer.setAttribute("poster", BASEURL + cname + "/videos/thumbnail/" + data.thumbnail);
    var videosource = document.createElement("source");
    videosource.setAttribute("src", videoURL);
    videosource.setAttribute("type", "video/" + data.video_format);
--- a/zakarya/index.html
+++ b/zakarya/index.html
@ -19,6 +19,8 @@ $(document).ready(function(){
  </head>
  <body>

+    <div id="particle-container"></div>
+    <script src="/js/bg.js"></script>
    <header class="container" id="navbar"></header>

    <main>
@ -39,11 +41,11 @@ $(document).ready(function(){
        <h1>Featured Videos:</h1>
        <ul class="videolist">
          <li><a href="/video?c=zakarya&v=the-way-forward">
-            <img src="https://files.colormatic.org/zakarya/videos/thumbnail/wayforward.png">
+            <img src="/zakarya/videos/thumbnail/wayforward.png">
            <span class="title">The Way Forward</span>
          </a></li>
          <li><a href="/videoindex.html?c=zakarya&v=hello-world">
-            <img src="https://files.colormatic.org/zakarya/videos/thumbnail/helloworld.png">
+            <img src="/zakarya/videos/thumbnail/helloworld.png">
            <span class="title">Hello World</span>
          </a></li>
        </ul>