re_capitulating_queer/site/templates/home.php

<?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>

<div class="container" style="padding-left: calc(498px + 22pt)">
    <button id="info_open" aria-label="Info Open" class="menu-button no-button flex font-kobata text-40 uppercase">Info</button>
</div>

<div id="info" class="bg-white-green container">
	<button id="info_close" aria-label="Info Close" class="menu-button no-button flex" style="margin-top: 4px"><div style="transform: rotate(45deg); "></div><div style="transform: translate(0,-6px) rotate(135deg);"></div></button>
	<div class="text-22" style="margin-top: 34pt">
	<?= $page->text() ?>
	</div>
</div>

<script defer>
    const $info = document.getElementById('info')
	document.getElementById('info_open').addEventListener('click', () => {
		$info.classList.add('block')
	})
	document.getElementById('info_close').addEventListener('click', () => {
		$info.classList.remove('block')
	})
</script>

<?php snippet('footer', ['dont_show_footer' => true]) ?>