diff --git a/about/index.html b/about/index.html index ae993f0..6a37e6c 100644 --- a/about/index.html +++ b/about/index.html @@ -18,6 +18,8 @@ $(document).ready(function(){ +
+
diff --git a/css/colormaticstudios.css b/css/colormaticstudios.css index 44083c8..3f93b10 100644 --- 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 { diff --git a/css/style.css b/css/style.css index 057b7ec..9e2c093 100644 --- 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 { diff --git a/index.html b/index.html index 6612f31..1f68508 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,8 @@ $(document).ready(function(){ +
+
diff --git a/js/bg.js b/js/bg.js new file mode 100644 index 0000000..cc57ded --- /dev/null +++ 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); diff --git a/studios/index.html b/studios/index.html index f64341f..5f13e99 100644 --- a/studios/index.html +++ b/studios/index.html @@ -19,6 +19,8 @@ $(document).ready(function(){ +
+
diff --git a/video/css/style.css b/video/css/style.css index a9c03d0..bce7b7e 100644 --- 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; diff --git a/video/index.html b/video/index.html index b91b4f5..0a19e3c 100644 --- a/video/index.html +++ b/video/index.html @@ -19,7 +19,8 @@ $(document).ready(function(){ - +
+
diff --git a/video/js/main.js b/video/js/main.js index 850bd3c..ee3fe48 100644 --- 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); diff --git a/zakarya/index.html b/zakarya/index.html index 0fcf00e..146ec6f 100644 --- a/zakarya/index.html +++ b/zakarya/index.html @@ -19,6 +19,8 @@ $(document).ready(function(){ +
+
@@ -39,11 +41,11 @@ $(document).ready(function(){

Featured Videos: