Home Patter

site/templates/home.php

@@ -1,5 +1,164 @@
 <?php snippet('header') ?>
 
+<style>
+	body { display: grid; grid: 1fr auto / 1fr; height: 100dvh; }
+	#bgCanvas { position: fixed; z-index: -1; }
+</style>
+
+<canvas id="bgCanvas"></canvas>
+
+<script>
+  // 22pt = 29px
+  // 37pt = 49px
+  
+  // w: 29 + 49 + 29
+  // h: 29
+  
+  // w: 29 + 49 + 29
+  // h: 49
+
+function setupCanvas(canvas) {
+	const dpr = window.devicePixelRatio || 1
+	const rect = canvas.getBoundingClientRect()
+	canvas.width = rect.width * dpr
+	canvas.height = rect.height * dpr
+	const ctx = canvas.getContext('2d')
+	ctx.scale(dpr, dpr)
+	return ctx
+}
+
+let interval = null
+	
+function resizeCanvas() {
+	clearInterval(interval)
+
+	const canvas = document.getElementById('bgCanvas')
+	canvas.style.width = `${window.innerWidth}px`
+	canvas.style.height = `${window.innerHeight}px`
+	const ctx = setupCanvas(canvas)
+	drawBackground(ctx, canvas)
+
+	// interval = setInterval(() => drawBackground(ctx, canvas), 1000)
+}
+//                      white,     pink,      green,     lila,      orange,    black
+const colors = ["#f1edeb", "#ff00ff", "#48bd8d", "#8200ff", "#ff6700", "#000000"]
+
+function grid(colorIndex, canvas, ctx) {
+	ctx.strokeStyle = colors[colorIndex]
+
+	// w: 29 + 49 + 29
+	for (let x = 0; x < canvas.width; x += 107) {
+		ctx.moveTo(x, 0)
+		ctx.lineTo(x, canvas.height)
+		ctx.moveTo(x + 29, 0)
+		ctx.lineTo(x + 29, canvas.height)
+		ctx.moveTo(x + 29 + 49, 0)
+		ctx.lineTo(x + 29 + 49, canvas.height)
+	}
+	
+	// h: 29 + 49
+	for (let y = 0; y < canvas.height; y += 78) {
+		ctx.moveTo(0, y)
+		ctx.lineTo(canvas.width, y)
+		ctx.moveTo(0, y + 29)
+		ctx.lineTo(canvas.width, y + 29)
+	}
+	
+	ctx.stroke()
+}
+
+function bg(colorIndex, canvas, ctx, randomColors) {
+	const a = colors[(colorIndex + Math.round(Math.random() * (colors.length - 1))) % colors.length]
+	const b = colors[(colorIndex + Math.round(Math.random() * (colors.length - 1))) % colors.length]
+	const c = colors[(colorIndex + Math.round(Math.random() * (colors.length - 1))) % colors.length]
+	const d = colors[(colorIndex + Math.round(Math.random() * (colors.length - 1))) % colors.length]
+	const e = colors[(colorIndex + Math.round(Math.random() * (colors.length - 1))) % colors.length]
+	const f = colors[(colorIndex + Math.round(Math.random() * (colors.length - 1))) % colors.length]
+
+	// w: 29 + 49 + 29
+	// h: 29 + 49
+	for (let x = 0; x < canvas.width; x += 107) {
+		for (let y = 0; y < canvas.height; y += 78) {
+            if (randomColors) ctx.fillStyle = ctx.fillStyle = a
+			ctx.fillRect(x, y, 29, 29)
+			if (randomColors) ctx.fillStyle = ctx.fillStyle = b
+			ctx.fillRect(x + 29, y, 49, 29)
+			if (randomColors) ctx.fillStyle = ctx.fillStyle = c
+			ctx.fillRect(x + 29 + 49, y, 29, 29)
+			
+			if (randomColors) ctx.fillStyle = ctx.fillStyle = d
+			ctx.fillRect(x, y + 29, 29, 49)
+			if (randomColors) ctx.fillStyle = ctx.fillStyle = e
+			ctx.fillRect(x + 29, y + 29, 49, 49)
+			if (randomColors) ctx.fillStyle = ctx.fillStyle = f
+			ctx.fillRect(x + 29 + 49, y + 29, 29, 49)
+		}
+	}
+}
+  
+function font(colorIndex, canvas, ctx) {
+	ctx.font = '195px Kobata'
+
+	const patterns = [
+		[0],
+		[0, 1]
+	]
+
+	const kerningNormal = { R: -12, E: -27, C: -13, A: -13, P: -13, I: -13, T: -13, U: -13, L: -13, N: -13, G: -13 }
+	const kerningWide = { Q: 178.7, U: 178.7, E: 178.7 }
+
+	function word(str, y, colorIndex, pattern, kerning) {
+		let x = -10
+		for (var i = 0; i < str.length; i++) {
+			const t = colorIndex + pattern[i % pattern.length]
+			ctx.fillStyle = colors[t % colors.length]
+
+			const char = str[i]
+			ctx.fillText(char, x, y)
+			x += ctx.measureText(char).width
+
+			if (kerning[char]) {
+				x += kerning[char]
+			}
+
+			if (char == "A" && str[i+1] == "T") {
+				x -= 7
+			}
+		}
+	}
+
+	const a = patterns[Math.round(Math.random() * (patterns.length - 1))]
+	const b = patterns[Math.round(Math.random() * (patterns.length - 1))]
+
+	ctx.letterSpacing = "0"
+	for (var y = 0; y < canvas.height; y += 312) {
+		word('RE CAPITULATING.', y + 156, colorIndex, a, kerningNormal)
+		word('QUEER', y + 156 + 156, colorIndex, b, kerningWide)
+	}
+}
+
+function drawBackground(ctx, canvas) {
+	const colorIndex = Math.round(Math.random() * (colors.length - 1))
+
+	bg(colorIndex, canvas, ctx, true)
+	grid(colorIndex, canvas, ctx)
+	font(colorIndex, canvas, ctx)
+}
+
+async function start() {
+	const font = new FontFace('Kobata', 'url(assets/Kobata-Bold.woff2)')
+	
+	await font.load()
+	
+	document.fonts.add(font)
+
+	window.addEventListener('resize', resizeCanvas)    
+	resizeCanvas()
+}
+
+start()
+</script>
+
 <style>
 #info { display: none; position: absolute; left: 498px; top: 0; bottom: 0 }
 </style>
@@ -25,6 +184,4 @@
 	})
 </script>
 
-
-
 <?php snippet('footer', ['dont_show_footer' => true]) ?>