From d12a7fa400cba6700a2fe4e055370c2d206ab003 Mon Sep 17 00:00:00 2001 From: Zakarya Date: Wed, 1 Jan 2025 09:38:35 -0800 Subject: [PATCH] Fix bad code with less bad code --- about/index.html | 2 +- css/colormaticstudios.css | 4 +-- css/style.css | 15 ++++++----- index.html | 8 +++--- js/bg.js | 52 +++++++++++++++++++++------------------ studios/index.html | 8 +++--- video/css/style.css | 36 +++++++++++++-------------- video/index.html | 2 +- zakarya/index.html | 4 +-- 9 files changed, 69 insertions(+), 62 deletions(-) diff --git a/about/index.html b/about/index.html index 6a37e6c..e70dcfa 100644 --- a/about/index.html +++ b/about/index.html @@ -24,7 +24,7 @@ $(document).ready(function(){
-
+

Colormatic: A non-profit project for creation.

Colormatic is a non-profit project for creating a curated collection of sub-projects that match a high-quality, high attention to detail standard.

Colormatic Studios is a creative studio dedicated to giving life to maximum effort projects.

diff --git a/css/colormaticstudios.css b/css/colormaticstudios.css index 3f93b10..81c43b3 100644 --- a/css/colormaticstudios.css +++ b/css/colormaticstudios.css @@ -52,8 +52,8 @@ flex: 1; text-align: center; min-width: 40%; max-width: 50%; - background-color: #ffffff44; - backdrop-filter: blur(6px); + background-color: #ffffff22; + backdrop-filter: blur(3px); } div.project-grid-container div.project-grid-box h1 a { diff --git a/css/style.css b/css/style.css index 9e2c093..b030d0c 100644 --- a/css/style.css +++ b/css/style.css @@ -101,6 +101,15 @@ nav div.inline { } } +div.container { + color: var(--text-color); + border: solid 1px #00000033; + border-radius: 8px; + box-shadow: 1px 1px 8px #00000033; + background-color: #ffffff22; + backdrop-filter: blur(3px); +} + main div.heading { color: var(--text-color); font-size: 200%; @@ -108,16 +117,10 @@ main div.heading { } main div.hero { - color: var(--text-color); width: 60%; margin: 16px auto 16px auto; - border: solid 1px #00000033; - border-radius: 8px; - box-shadow: 1px 1px 8px #00000033; padding: 16px; text-align: center; - background-color: #ffffff44; - backdrop-filter: blur(6px); } @media screen and (max-width: 800px) { diff --git a/index.html b/index.html index 1f68508..b821a3c 100644 --- a/index.html +++ b/index.html @@ -21,15 +21,15 @@ $(document).ready(function(){
-
+
Featured Colormatic Studios Projects:
-
+

Quality First Person Controller

An actually good first person controller for the Godot Engine.

-
+

ColorQuest

A simple MMORPG in your browser.

Currently in pre-alpha.

@@ -37,7 +37,7 @@ $(document).ready(function(){
-
+
diff --git a/js/bg.js b/js/bg.js index d6fa60b..dcea6f0 100644 --- a/js/bg.js +++ b/js/bg.js @@ -22,7 +22,7 @@ class Particle { 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.angle = Math.random() * 360; // Initial rotation angle for squares and triangles this.rotationSpeed = Math.random() * 2 - 1; // Random rotation speed } @@ -53,7 +53,6 @@ class Particle { } draw() { - this.update(); ctx.fillStyle = '#bbb'; ctx.save(); ctx.translate(this.x, this.y); @@ -116,21 +115,6 @@ class Gradient { 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; @@ -151,15 +135,29 @@ class Gradient { } this.y = clamp(0, this.y, canvas.height); } + + draw() { + 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; + } } -let gradients = []; +let gradientsArray = []; 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)`; + return `rgb(${r}, ${g}, ${b})`; } function init() { @@ -167,18 +165,24 @@ function init() { for (let i = 0; i < 100; i++) { particlesArray.push(new Particle()); } - gradients = []; - for (let i = 0; i < 5; i++) { - gradients.push(new Gradient()); + gradientsArray = []; + for (let i = 0; i < 10; i++) { + gradientsArray.push(new Gradient()); } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); - gradients.forEach(gradient => gradient.draw()); + gradientsArray.forEach((gradient) => { + gradient.update(); + gradient.draw(); + }); - particlesArray.forEach(particle => particle.draw()); + particlesArray.forEach((particle) => { + particle.update(); + particle.draw(); + }); requestAnimationFrame(animate); } diff --git a/studios/index.html b/studios/index.html index 5f13e99..86e5c7c 100644 --- a/studios/index.html +++ b/studios/index.html @@ -27,21 +27,21 @@ $(document).ready(function(){

Colormatic Studios

-
+

Quality First Person Controller

An actually good first person controller for the Godot Engine.

-
+

A Silly Game

This is a silly little game project to get us started.

-
+

ColorQuest

@@ -50,7 +50,7 @@ $(document).ready(function(){
-
+

Links:

    diff --git a/video/css/style.css b/video/css/style.css index bce7b7e..f7329aa 100644 --- a/video/css/style.css +++ b/video/css/style.css @@ -1,4 +1,4 @@ -div.videocontainer { +div.video.container { display: flex; color: var(--text-color); width: 90%; @@ -7,23 +7,23 @@ div.videocontainer { border-radius: 8px; box-shadow: 1px 1px 8px #00000033; padding: 16px; - background-color: #ffffff44; - backdrop-filter: blur(6px); + background-color: #ffffff22; + backdrop-filter: blur(3px); } -div.videocontainer video#videoplayer { +div.video.container video#videoplayer { flex-grow: 1; border-radius: 12px; height: auto; max-width: 55%; } -div.videocontainer div.videoobjects { +div.video.container div.videoobjects { display: grid; padding: 24px; } -div.videocontainer div.videodetails h1#videotitle { +div.video.container div.videodetails h1#videotitle { padding: 0 12px; } @@ -32,7 +32,7 @@ div.dropdown-container { flex-direction: column-reverse; } -div.videocontainer div.download-dropdown { +div.video.container div.download-dropdown { position: relative; display: inline-block; padding: 12px; @@ -44,16 +44,16 @@ div.videocontainer div.download-dropdown { transition-duration: 0.35s; } -div.videocontainer div.download-dropdown:hover { +div.video.container div.download-dropdown:hover { box-shadow: 1px 1px 8px #00000088; } -div.videocontainer div.download-dropdown img { +div.video.container div.download-dropdown img { width: 25px; height: 25px; } -div.videocontainer div.download-dropdown div.dropdown-content { +div.video.container div.download-dropdown div.dropdown-content { display: none; position: absolute; font-size: 80%; @@ -64,37 +64,37 @@ div.videocontainer div.download-dropdown div.dropdown-content { text-align: center; } -div.videocontainer div.download-dropdown:hover div.dropdown-content { +div.video.container div.download-dropdown:hover div.dropdown-content { display: block; } -div.videocontainer div.download-dropdown div.dropdown-content ul { +div.video.container div.download-dropdown div.dropdown-content ul { list-style-type: none; padding-left: 0; } -div.videocontainer div.download-dropdown div.dropdown-content ul li { +div.video.container div.download-dropdown div.dropdown-content ul li { padding: 4px; } -div.videocontainer div.download-dropdown div.dropdown-content ul li:hover { +div.video.container div.download-dropdown div.dropdown-content ul li:hover { background-color: #dcdfdf; } -div.videocontainer div.download-dropdown div.dropdown-content ul li a { +div.video.container div.download-dropdown div.dropdown-content ul li a { text-decoration: none; color: var(--text-color); } @media screen and (max-width: 800px) { - div.videocontainer { + div.video.container { display: block; } - div.videocontainer video#videoplayer { + div.video.container video#videoplayer { width: 100%; max-width: none; } - div.videocontainer div.download-dropdown { + div.video.container div.download-dropdown { display: block; margin-left: auto; margin-right: auto; diff --git a/video/index.html b/video/index.html index 0a19e3c..89ab406 100644 --- a/video/index.html +++ b/video/index.html @@ -23,7 +23,7 @@ $(document).ready(function(){ -
    +
    diff --git a/zakarya/index.html b/zakarya/index.html index 0e9ddde..d3c1391 100644 --- a/zakarya/index.html +++ b/zakarya/index.html @@ -26,7 +26,7 @@ $(document).ready(function(){
    -
    +

    Links:

    • Mastodon
      • @@ -37,7 +37,7 @@ $(document).ready(function(){
    -
    +

    Featured Videos: