Fix oversights in bg renderer

So it turns out the performance improvements were completelty neglected because my code is bad. The buffer wasn't getting rendered to the canvas in the best way, and there were too many particles for smaller screens. I have now added a simple math equasion to the init function that decides how many particles are needed based on the display size. It still needs a lot of tweaking, and a more complex function is probably necessary for good results. I'm still trying to get this background to not suck and actually look good.
Bump version to v1.2.1
2025-04-02 19:49:37 -07:00 · 2025-04-02 18:56:24 -07:00 · 2025-03-31 20:08:30 -07:00 · 2025-03-31 19:59:16 -07:00 · 2025-03-31 16:36:32 -07:00 · 2025-03-31 16:11:31 -07:00
13 changed files with 321 additions and 89 deletions
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,49 @@
+{
+  "plugins": ["prettier-plugin-svelte"],
+  "singleQuote": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "htmlWhitespaceSensitivity": "ignore",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    },
+    {
+      "files": "*.scss",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    },
+    {
+      "files": "*.json",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    },
+    {
+      "files": "*.svelte",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    },
+    {
+      "files": "*.js",
+      "options": {
+        "useTabs": true
+      }
+    },
+    {
+      "files": "*.ts",
+      "options": {
+        "useTabs": true
+      }
+    }
+  ]
+}
--- a/README.md
+++ b/README.md
@ -1,4 +1,5 @@
 # Colormatic Website
+
 [colormatic.org](https://colormatic.org)

 This project uses SvelteKit along with TypeScript and Sass. It's configured for static site generation (SSG) and prerendering at compile time to create a simple static website for Nginx to serve, with very little client-side rendering (CSR).
@ -6,22 +7,37 @@ This project uses SvelteKit along with TypeScript and Sass. It's configured for
 The Colormatic website is developed with accordance to modern web standards, however a legacy website will be available in the future for older/less capable browsers.

 To download the project, run:
+
 ```
 git clone git@git.colormatic.org:ColormaticStudios/Colormatic-Website.git
 cd Colormatic-Website
 npm install
 ```
+
 You can run the project locally with:
+
 ```
 npm run dev
 ```
+
 Or you can build the project for release with:
+
 ```
 npm run build
 ```
+
 After the project has been built, you can preview the release build with:
+
 ```
 npm run preview
 ```

-Bootstrap Icons are licensed under the [MIT](https://opensource.org/license/MIT) license.
+Before submitting a push or pull request, run:
+
+```
+npm run format
+```
+
+To format your code according to the project code format. Remember to never fight the formatter.
+
+[Bootstrap Icons](https://icons.getbootstrap.com/) are licensed under the [MIT](https://opensource.org/license/MIT) license.
--- a/package.json
+++ b/package.json
@ -1,26 +1,29 @@
 {
-	"name": "colormatic-website",
-	"version": "1.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"sass": "^1.83.4",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^6.0.0"
-	},
-	"dependencies": {
-		"bootstrap-icons": "^1.11.3"
-	}
+  "name": "colormatic-website",
+  "version": "1.2.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "format": "prettier -w .",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.3.3",
+    "sass": "^1.83.4",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
+  },
+  "dependencies": {
+    "bootstrap-icons": "^1.11.3"
+  }
 }
--- a/src/component/bg.svelte
+++ b/src/component/bg.svelte
@ -50,9 +50,11 @@
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (event) => {
        dark_theme = event.matches;
-        gradientsArray.forEach((gradient: Gradient) => {
+        for (let i = 0; i < gradientsArray.length; i++) {
+          let gradient = gradientsArray[i];
          gradient.color = getRandomColor();
-        });
+          gradient.prepareBuffer();
+        }
      });

    resize();
@ -187,7 +189,7 @@
      ctx.save();
      // The source images are black, so we are inverting them
      // different amounts to get different shades of gray
-      ctx.filter = dark_theme ? "invert(0.25)" : "invert(0.75)";
+      ctx.filter = dark_theme ? "invert(0.15)" : "invert(0.8)";

      // Draw center of rotation
      // ctx.beginPath();
@ -219,20 +221,44 @@
    radius: number;
    color: string;
    alpha: number;
+    renderingBuffer: HTMLCanvasElement;
    constructor() {
      super();
      this.radius = Math.random() * 500 + 300;
      this.color = getRandomColor();
      this.alpha = Math.random() * 0.5 + 0.5; // Initial alpha between 0.5 and 1
+      this.renderingBuffer = document.createElement(
+        "canvas",
+      ) as HTMLCanvasElement;
+
+      // One-shot buffer adjustment
+      this.renderingBuffer.width = this.radius * 2;
+      this.renderingBuffer.height = this.radius * 2;
+      // canvasDpiScaler(
+      //   this.renderingBuffer,
+      //   this.renderingBuffer.getContext("2d") as CanvasRenderingContext2D,
+      // );
+      this.prepareBuffer();
    }

-    draw() {
-      const gradient = ctx.createRadialGradient(
-        this.x,
-        this.y,
+    prepareBuffer() {
+      let bctx = this.renderingBuffer.getContext(
+        "2d",
+      ) as CanvasRenderingContext2D;
+
+      bctx.clearRect(
        0,
-        this.x,
-        this.y,
+        0,
+        this.renderingBuffer.width,
+        this.renderingBuffer.height,
+      );
+
+      const gradient = ctx.createRadialGradient(
+        this.radius,
+        this.radius,
+        0,
+        this.radius,
+        this.radius,
        this.radius,
      );
      gradient.addColorStop(0, this.color);
@ -241,19 +267,34 @@
      } else {
        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;
+      bctx.globalAlpha = this.alpha;
+      bctx.fillStyle = gradient;
+      bctx.beginPath();
+      bctx.arc(this.radius, this.radius, this.radius, 0, Math.PI * 2);
+      bctx.closePath();
+      bctx.fill();
+    }
+
+    draw() {
+      ctx.save();
+      ctx.translate(this.x - this.radius, this.y - this.radius);
+      ctx.drawImage(this.renderingBuffer, 0, 0);
+      ctx.restore();
    }
  }

  function init() {
+    /*/
+     * Calculate the proper amount of particles
+     * 25920 is our constant, equal to x in (1080*1920)/x = 80
+     * Because the subjectively correct amount of particles for a 1080p
+     * display is 80, so to calculate the proper amount for any window size,
+     * just do (width * height) / 25920
+    /*/
+    let particleCount = (window.innerWidth * window.innerHeight) / 25920;
+
    particlesArray = [];
-    for (let i = 0; i < 20; i++) {
+    for (let i = 0; i < particleCount; i++) {
      particlesArray.push(new Particle());
    }
    gradientsArray = [];
--- a/src/component/footer.svelte
+++ b/src/component/footer.svelte
@ -1,7 +1,8 @@
 <footer>
  <p>© 2025 Colormatic Studios, All Rights Reserved.</p>
  <p>
-    <a href="mailto:support@colormatic.org">support@colormatic.org</a> |
+    <a href="mailto:support@colormatic.org">support@colormatic.org</a>
+    |
    <a href="mailto:support@colormatic.org">contact@colormatic.org</a>
  </p>
 </footer>
--- a/src/component/navbar.svelte
+++ b/src/component/navbar.svelte
@ -29,11 +29,13 @@
      class="git-icon"
      target="_blank"
      rel="noopener noreferrer"
-      aria-label="Colormatic Git"><i class="bi bi-git"></i></a
-    >
-    <button on:click={toggleModalMenu} class="menu-button" aria-label="menu"
-      ><i class="bi bi-list"></i></button
+      aria-label="Colormatic Git"
    >
+      <i class="bi bi-git"></i>
+    </a>
+    <button on:click={toggleModalMenu} class="menu-button" aria-label="menu">
+      <i class="bi bi-list"></i>
+    </button>
  </div>
 </nav>

@ -46,9 +48,9 @@ Svelte modal example, https://svelte.dev/playground/modal
 <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 <span on:click={modalMenuProcessClick} id="pages" class="modalbg hidden">
  <div>
-    <button on:click={toggleModalMenu} class="close" aria-label="Close"
-      ><i class="bi bi-x"></i></button
-    >
+    <button on:click={toggleModalMenu} class="close" aria-label="Close">
+      <i class="bi bi-x"></i>
+    </button>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/zakarya">Zakarya</a></li>
@ -57,15 +59,19 @@ Svelte modal example, https://svelte.dev/playground/modal
        <a
          href="https://git.colormatic.org"
          target="_blank"
-          rel="noopener noreferrer">Colormatic Git</a
+          rel="noopener noreferrer"
        >
+          Colormatic Git
+        </a>
      </li>
      <li>
        <a
          href="https://auth.colormatic.org"
          target="_blank"
-          rel="noopener noreferrer">Colormatic ID</a
+          rel="noopener noreferrer"
        >
+          Colormatic ID
+        </a>
      </li>
      <li><a href="/about">About</a></li>
    </ul>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -22,6 +22,24 @@

 <svelte:head>
  <title>Colormatic</title>
+  <meta
+    name="description"
+    content="Colormatic is a non-profit project by Zakarya dedicated to creation."
+  />
+  <meta name="keywords" content="Open Source, Non Profit" />
+  <link rel="canonical" href="https://colormatic.org" />
+
+  <meta property="og:title" content="Colormatic" />
+  <meta
+    property="og:description"
+    content="Colormatic is a non-profit project by Zakarya dedicated to creation."
+  />
+  <meta
+    property="og:image"
+    content="https://colormatic.org/img/colormatic_logo.svg"
+  />
+  <meta property="og:url" content="https://colormatic.org" />
+  <meta property="og:type" content="website" />
 </svelte:head>

 <main>
@ -41,8 +59,10 @@
      <a
        href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
        target="_blank"
-        rel="noopener noreferrer">Quality First Person Controller</a
+        rel="noopener noreferrer"
      >
+        Quality First Person Controller
+      </a>
    </h1>
    <p>An actually good first person controller for the Godot Engine.</p>

@ -52,8 +72,10 @@
      <a
        href="https://git.colormatic.org/ColormaticStudios/godot-bson"
        target="_blank"
-        rel="noopener noreferrer">BSON for Godot</a
+        rel="noopener noreferrer"
      >
+        BSON for Godot
+      </a>
    </h1>
    <p>A BSON serializer/deserializer for the Godot Engine</p>
  </div>
@ -69,8 +91,11 @@
      Check up on progress and changes at <a
        href="https://git.colormatic.org/ColormaticStudios/Colormatic-Website"
        target="_blank"
-        rel="noopener noreferrer">ColormaticStudios/Colormatic-Website</a
-      >.
+        rel="noopener noreferrer"
+      >
+        ColormaticStudios/Colormatic-Website
+      </a>
+      .
    </p>
  </div>
 </main>
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -1,5 +1,23 @@
 <svelte:head>
  <title>Colormatic - About</title>
+  <meta
+    name="description"
+    content="Colormatic is a non-profit project by Zakarya dedicated to creation."
+  />
+  <meta name="keywords" content="Open Source, Non Profit" />
+  <link rel="canonical" href="https://colormatic.org/about/" />
+
+  <meta property="og:title" content="Colormatic - About" />
+  <meta
+    property="og:description"
+    content="Colormatic is a non-profit project by Zakarya dedicated to creation."
+  />
+  <meta
+    property="og:image"
+    content="https://colormatic.org/img/colormatic_logo.svg"
+  />
+  <meta property="og:url" content="https://colormatic.org/about/" />
+  <meta property="og:type" content="website" />
 </svelte:head>

 <spacer></spacer>
--- a/src/routes/studios/+page.svelte
+++ b/src/routes/studios/+page.svelte
@ -1,5 +1,32 @@
 <svelte:head>
  <title>Colormatic Studios</title>
+  <meta
+    name="description"
+    content="Colormatic Studios is a creative studio dedicated to giving life to
+    Colormatic's projects. We are currently just a small group of passionate
+    volunteers working to build inspiring, intuitive and innovative creative
+    works."
+  />
+  <meta
+    name="keywords"
+    content="Open Source, Not for Profit, Game Development, World Building"
+  />
+  <link rel="canonical" href="https://colormatic.org/studios/" />
+
+  <meta property="og:title" content="Colormatic Studios" />
+  <meta
+    property="og:description"
+    content="Colormatic Studios is a creative studio dedicated to giving life to
+    Colormatic's projects. We are currently just a small group of passionate
+    volunteers working to build inspiring, intuitive and innovative creative
+    works."
+  />
+  <meta
+    property="og:image"
+    content="https://colormatic.org/img/colormatic_logo.svg"
+  />
+  <meta property="og:url" content="https://colormatic.org/studios/" />
+  <meta property="og:type" content="website" />
 </svelte:head>

 <main>
@ -11,8 +38,10 @@
        <a
          href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
          target="_blank"
-          rel="noopener noreferrer">Quality First Person Controller</a
+          rel="noopener noreferrer"
        >
+          Quality First Person Controller
+        </a>
      </h1>
      <div class="project-grid-box-contents">
        <img
@ -27,8 +56,10 @@
        <a
          href="https://git.colormatic.org/ColormaticStudios/godot-bson"
          target="_blank"
-          rel="noopener noreferrer">BSON for Godot</a
+          rel="noopener noreferrer"
        >
+          BSON for Godot
+        </a>
      </h1>
      <div class="project-grid-box-contents">
        <img
@ -74,22 +105,28 @@
          <a
            href="https://mastodon.social/@colormaticstudios"
            target="_blank"
-            rel="noopener noreferrer">Mastodon</a
+            rel="noopener noreferrer"
          >
+            Mastodon
+          </a>
        </li>
        <li>
          <a
            href="https://www.instagram.com/colormaticstudios/"
            target="_blank"
-            rel="noopener noreferrer">Instagram</a
+            rel="noopener noreferrer"
          >
+            Instagram
+          </a>
        </li>
        <li>
          <a
            href="https://www.youtube.com/@colormaticstudios"
            target="_blank"
-            rel="noopener noreferrer">Youtube</a
+            rel="noopener noreferrer"
          >
+            Youtube
+          </a>
        </li>
      </ul>
      <ul class="linktree">
@ -97,22 +134,28 @@
          <a
            href="https://git.colormatic.org/ColormaticStudios"
            target="_blank"
-            rel="noopener noreferrer">Colormatic Git</a
+            rel="noopener noreferrer"
          >
+            Colormatic Git
+          </a>
        </li>
        <li>
          <a
            href="https://github.com/ColormaticStudios"
            target="_blank"
-            rel="noopener noreferrer">GitHub</a
+            rel="noopener noreferrer"
          >
+            GitHub
+          </a>
        </li>
        <li>
          <a
            href="https://bsky.app/profile/colormaticstudios.bsky.social"
            target="_blank"
-            rel="noopener noreferrer">Bluesky</a
+            rel="noopener noreferrer"
          >
+            Bluesky
+          </a>
        </li>
      </ul>
    </div>
--- a/src/routes/video/+page.svelte
+++ b/src/routes/video/+page.svelte
@ -100,6 +100,7 @@

 <svelte:head>
  <title>Video Player</title>
+  <meta property="og:type" content="video" />
 </svelte:head>

 <spacer></spacer>
--- a/src/routes/zakarya/+page.svelte
+++ b/src/routes/zakarya/+page.svelte
@ -1,5 +1,26 @@
 <svelte:head>
  <title>Colormatic - Zakarya</title>
+  <meta
+    name="description"
+    content="I am a software and game developer, I run Colormatic and Colormatic
+  Studios, and I primarily study computer science, psychology, and
+  linguistics."
+  />
+  <link rel="canonical" href="https://colormatic.org/zakarya/" />
+
+  <meta property="og:title" content="Colormatic - Zakarya" />
+  <meta
+    property="og:description"
+    content="I am a software and game developer, I run Colormatic and Colormatic
+  Studios, and I primarily study computer science, psychology, and
+  linguistics."
+  />
+  <meta
+    property="og:image"
+    content="https://colormatic.org/img/zakarya-icon.svg"
+  />
+  <meta property="og:url" content="https://colormatic.org/zakarya/" />
+  <meta property="og:type" content="website" />
 </svelte:head>

 <main>
@ -30,29 +51,37 @@
          <a
            href="https://mstdn.party/@zakarya"
            target="_blank"
-            rel="noopener noreferrer">Mastodon</a
+            rel="noopener noreferrer"
          >
+            Mastodon
+          </a>
        </li>
        <li>
          <a
            href="https://ko-fi.com/zakarya"
            target="_blank"
-            rel="noopener noreferrer">Ko-fi</a
+            rel="noopener noreferrer"
          >
+            Ko-fi
+          </a>
        </li>
        <li>
          <a
            href="https://www.youtube.com/@czakarya"
            target="_blank"
-            rel="noopener noreferrer">Youtube</a
+            rel="noopener noreferrer"
          >
+            Youtube
+          </a>
        </li>
        <li>
          <a
            href="https://github.com/CZakarya"
            target="_blank"
-            rel="noopener noreferrer">GitHub</a
+            rel="noopener noreferrer"
          >
+            GitHub
+          </a>
        </li>
        <!--<li><a href="https://www.reddit.com/user/CZakarya/" target="_blank" rel="noopener noreferrer">Reddit</a></li>-->
      </ul>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,20 +1,20 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler",
-		"allowImportingTsExtensions": true
-	}
-	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true
+  }
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,6 +1,6 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";

 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
 });
Author	SHA1	Message	Date
Zakarya	4b99a1c26e	Fix oversights in bg renderer So it turns out the performance improvements were completelty neglected because my code is bad. The buffer wasn't getting rendered to the canvas in the best way, and there were too many particles for smaller screens. I have now added a simple math equasion to the init function that decides how many particles are needed based on the display size. It still needs a lot of tweaking, and a more complex function is probably necessary for good results. I'm still trying to get this background to not suck and actually look good.	2025-04-02 19:49:37 -07:00
Zakarya	2ce9e6955f	Bump version to v1.2.1	2025-04-02 18:56:24 -07:00
Zakarya	a3a774b964	Change particle color and ammount	2025-03-31 20:08:30 -07:00
Zakarya	ac3d579254	Massive performance improvement in background rendering Turns out the performance bottleneck was actually rendering the gradients every frame, so they are now rendering to a buffer when the page loads once and that buffer is being rendered as an image every frame. No functionality has been changed; but it runs so much faster and is much more efficient on mobile devices.	2025-03-31 19:59:16 -07:00
Zakarya	db0ed8cb42	Add page metadata for each page and enable prettier-plugin-svelte	2025-03-31 16:36:32 -07:00
Zakarya	2c21504279	Add prettier-plugin-svelte	2025-03-31 16:11:31 -07:00
Zakarya	4b05bb519e	Bump package.json version to the right number	2025-03-31 15:54:51 -07:00
Zakarya	e7aba82655	Welcome, Prettier.	2025-03-31 15:51:57 -07:00