aztec_diamond/aztec_diamond.js

188 lines
4.8 KiB
JavaScript

console.log("aztec_diamond")
const size = Math.min(innerWidth, innerHeight)
const canvas = document.querySelector("canvas")
canvas.width = size
canvas.height = size
const ctx = canvas.getContext("2d")
function tile_board(n, tiles) {
let board = []
// i tracks x, j tracks y. row major, so j is the outer loop.
// That's a bit unusual, but I think more intuitive than the
// alternative.
for (let j = 0; j < 2*n; j++) {
board[j] = []
for (let i = 0; i < 2*n; i++) {
board[j][i] = undefined
}
}
for (let ti = 0; ti < tiles.length; ti++) {
t = tiles[ti]
for (let part = 0; part < 2; part++) {
i = t[part].x + n - 0.5
j = t[part].y + n - 0.5
board[j][i] = ti
}
}
return board
}
function ad_1() {
console.log("ad_1")
const n = 1
let tiles;
if (Math.random() >= 0.5) {
// split vertically
tiles = [[{x: 0.5, y: 0.5}, {x: 0.5, y: -0.5}],
[{x: -0.5, y: -0.5}, {x: -0.5, y: 0.5}]]
} else {
tiles = [[{x: -0.5, y: 0.5}, {x: 0.5, y: 0.5}],
[{x: 0.5, y: -0.5}, {x: -0.5, y: -0.5}]]
}
const board = tile_board(n, tiles)
return {n, tiles, board, shrink: 0, phase: "shrink"}
}
function x2sx(x, scale, size) {
const sx = (x - 0.5) * scale + size/2
return sx
}
function y2sy(y, scale, size) {
const sy = size/2 - (y + 0.5) * scale
return sy
}
function color(t) {
if (t[0].x == t[1].x && t[0].y > t[1].y) {
return "#F008"
}
if (t[0].x == t[1].x && t[0].y < t[1].y) {
return "#FF08"
}
if (t[0].y == t[1].y && t[0].x < t[1].x) {
return "#0F08"
}
if (t[0].y == t[1].y && t[0].x > t[1].x) {
return "#00F8"
}
throw("impossible direction")
}
function draw(state) {
console.log("draw", state)
const n = state.n
const scale = size / (2 * (n + state.shrink/8))
ctx.fillStyle = "#FFF8"
ctx.fillRect(0, 0, size, size)
ctx.beginPath()
for (y = 0.5 - n; y < n; y += 1) {
for (x = 0.5 - n; x < n; x += 1) {
if (Math.abs(x) + Math.abs(y) <= n) {
sx = x2sx(x, scale, size)
sy = y2sy(y, scale, size)
console.log(x, y, sx, sy)
ctx.rect(sx, sy, scale, scale)
}
}
}
ctx.strokeStyle = "#CCCCCC"
ctx.stroke()
for (const t of state.tiles) {
console.log(t)
const sx0 = Math.min(x2sx(t[0].x, scale, size), x2sx(t[1].x, scale, size))
const sx1 = Math.max(x2sx(t[0].x, scale, size), x2sx(t[1].x, scale, size))
const sy0 = Math.min(y2sy(t[0].y, scale, size), y2sy(t[1].y, scale, size))
const sy1 = Math.max(y2sy(t[0].y, scale, size), y2sy(t[1].y, scale, size))
console.log(sx0, sx1, sy0, sy1)
ctx.beginPath()
ctx.rect(sx0, sy0, sx1 - sx0 + scale, sy1 - sy0 + scale)
ctx.fillStyle = color(t)
ctx.strokeStyle = "#000000"
ctx.fill()
ctx.stroke()
}
}
function expand(state) {
const n = state.n + 1
const board = tile_board(n, state.tiles)
state = {...state, n, board, shrink: 0}
return state
}
function sanitize(state) {
console.log("sanitize", state)
let tiles = []
const n = state.n
for (let ti = 0; ti < state.tiles.length; ti++) {
const t = state.tiles[ti];
console.log(ti, t)
const direction = {x: t[0].y - t[1].y, y: t[1].x - t[0].x}
const i = t[0].x + n - 0.5
const j = t[0].y + n - 0.5
const oi = i + direction.x
const oj = j + direction.y
const oti = state.board[oj][oi]
if (oti === undefined) {
// no neighbour
tiles.push(t)
} else {
const ot = state.tiles[oti]
const odirection = {x: ot[0].y - ot[1].y, y: ot[1].x - ot[0].x}
if (odirection.x == -direction.x && odirection.y == - direction.y) {
// Omit this tile. ot will also be omitted
} else {
tiles.push(t)
}
}
}
state = {...state, tiles, phase: "move", move: 0}
return state
}
function move_tiles(state) {
console.log("move_tiles", state)
let tiles = []
for (t of state.tiles) {
const direction = {x: t[0].y - t[1].y, y: t[1].x - t[0].x}
tiles.push([{x: t[0].x + direction.x / 8, y: t[0].y + direction.y / 8},
{x: t[1].x + direction.x / 8, y: t[1].y + direction.y / 8}, ])
}
state = {...state, tiles, move: state.move + 1}
return state
}
function step(state) {
draw(state)
if (state.phase == "shrink") {
if (state.shrink < 8) {
state = {...state, shrink: state.shrink + 1}
} else {
state = {...state, phase: "sanitize"}
}
} else if (state.phase == "sanitize") {
state = expand(state)
state = sanitize(state)
} else if (state.phase == "move") {
if (state.move < 8) {
state = move_tiles(state)
} else {
state = {...state, phase: "fill"}
}
} else if (state.phase = "fill") {
state = fill_gaps(state)
} else {
throw("impossible state " + state.phase)
}
window.setTimeout(step, 100, state)
}
initial_state = ad_1()
window.setTimeout(step, 100, initial_state)