import { sketch } from "https://esm.town/v/moe/p5"
import type * as p5 from "npm:@types/p5"
export const title = "Lost Keys 🎹"
export default sketch(import.meta.url, title)
let canvasSize
let numberOfSquares
let gridSize
let canvasGap
let effectiveCanvasSize
let shiftRate
let minInsetFactor
let maxInsetFactor
let hueBase
export function setup() {
canvasSize = 800
numberOfSquares = Math.floor(random(4, 10))
canvasGap = canvasSize * 0.05
effectiveCanvasSize = canvasSize - 2 * canvasGap
gridSize = effectiveCanvasSize / numberOfSquares
createCanvas(canvasSize, canvasSize)
colorMode(HSL, 360, 100, 100)
}
export function draw() {
background(0)
for (let x = 0; x < numberOfSquares; x++) {
for (let y = 0; y < numberOfSquares; y++) {
let x1 = x * gridSize + canvasGap
let y1 = y * gridSize + canvasGap
drawSquare(x1, y1)
}
}
}
function drawSquare(x, y) {
let inset = gridSize * 0.06
let size = gridSize - inset
let centerX = x + size / 2 + inset / 2
let centerY = y + size / 2 + inset / 2
let angles = [0, TWO_PI * 0.5, TWO_PI * 0.25, TWO_PI * 0.75]
let angleNoiseScale = 10
let angleNoise = noise(x * angleNoiseScale, y * angleNoiseScale)
let angle = angles[floor(angleNoise * angles.length)]
push()
translate(centerX, centerY)
rotate(angle)
let noiseScale = 0.002
let shiftNoise = noise(x + frameCount * noiseScale, y + frameCount * noiseScale)
let shift = size * shiftNoise
noStroke()
fill(255)
beginShape()
vertex(-size / 2 + shift + inset / 2, -size / 2)
vertex(size / 2, -size / 2)
vertex(size / 2, size / 2)
vertex(-size / 2 + (size - shift) + inset / 2, size / 2)
endShape(CLOSE)
fill(13)
beginShape()
vertex(-size / 2, -size / 2)
vertex(size / 2 - (size - shift) - inset / 2, -size / 2)
vertex(size / 2 - shift - inset / 2, size / 2)
vertex(-size / 2, size / 2)
endShape(CLOSE)
pop()
}
export function keyPressed() {
if (key == "i") {