website style and circuits art
parent
d1fa37524d
commit
a541740a29
@ -0,0 +1,316 @@
|
||||
const $canvas: HTMLCanvasElement = document.querySelector('#circuits-art')!
|
||||
|
||||
interface Grid<T> extends Iterable<[number, number, T]> {
|
||||
has(point: [number, number]): boolean
|
||||
get(point: [number, number]): T
|
||||
set(point: [number, number], value: T): void
|
||||
}
|
||||
|
||||
function createGrid<T>(): Grid<T> {
|
||||
const cells: Record<string, T> = {}
|
||||
|
||||
return {
|
||||
has([x, y]) {
|
||||
return cells[`${x},${y}`] !== undefined
|
||||
},
|
||||
get([x, y]) {
|
||||
return cells[`${x},${y}`]
|
||||
},
|
||||
set([x, y], value) {
|
||||
cells[`${x},${y}`] = value
|
||||
},
|
||||
*[Symbol.iterator]() {
|
||||
for (const [coord, value] of Object.entries(cells)) {
|
||||
const [x, y] = coord.split(',').map(s => parseInt(s))
|
||||
yield [x, y, value]
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
type WireCell = 'down' | 'down-left' | 'down-right' | 'dot'
|
||||
|
||||
type WireDirection = 'down' | 'down-left' | 'down-right'
|
||||
|
||||
type WireSteps = { position: Point2; direction: WireCell }[]
|
||||
|
||||
type Point2 = [number, number]
|
||||
|
||||
type State = {
|
||||
grid: Grid<WireCell>
|
||||
queuedWire: {
|
||||
index: number
|
||||
steps: WireSteps
|
||||
} | null
|
||||
badTries: 0
|
||||
}
|
||||
|
||||
type Renderer = {
|
||||
timer: number
|
||||
}
|
||||
|
||||
let renderer: Renderer | null = null
|
||||
|
||||
const RENDERER_FPS = 30
|
||||
|
||||
function setup() {
|
||||
console.log('Setting up circuits art...')
|
||||
|
||||
$canvas.width = $canvas.clientWidth
|
||||
$canvas.height = $canvas.clientHeight
|
||||
|
||||
const g = $canvas.getContext('2d')!
|
||||
const state: State = {
|
||||
grid: createGrid(),
|
||||
queuedWire: null,
|
||||
badTries: 0,
|
||||
}
|
||||
|
||||
const startTime = new Date()
|
||||
|
||||
const handle = setInterval(() => {
|
||||
const time = new Date().getTime() - startTime.getTime()
|
||||
|
||||
update(state, g.canvas.width, g.canvas.height, time)
|
||||
render(g, state, time)
|
||||
}, 1000 / RENDERER_FPS)
|
||||
|
||||
renderer = { timer: handle }
|
||||
}
|
||||
|
||||
function update(state: State, width: number, height: number, time: number) {
|
||||
const w = (width / CELL_SIZE) | 0
|
||||
// const h = (height / CELL_SIZE) | 0
|
||||
|
||||
if (state.badTries > 1000) {
|
||||
console.log('finished')
|
||||
clearInterval(renderer!.timer)
|
||||
}
|
||||
|
||||
if (!state.queuedWire) {
|
||||
const sx = randomInt(0, w)
|
||||
if (!state.grid.has([sx, 0])) {
|
||||
const steps = generateWire(state.grid, [sx, 0])
|
||||
if (steps.length < 7) {
|
||||
state.badTries++
|
||||
return
|
||||
}
|
||||
|
||||
state.queuedWire = {
|
||||
index: 0,
|
||||
steps,
|
||||
}
|
||||
|
||||
state.grid.set(state.queuedWire.steps[0].position, 'dot')
|
||||
return
|
||||
}
|
||||
|
||||
state.badTries++
|
||||
} else {
|
||||
const wire = state.queuedWire
|
||||
|
||||
const step = wire.steps[wire.index]
|
||||
state.grid.set(step.position, step.direction)
|
||||
|
||||
if (wire.index + 1 < wire.steps.length) {
|
||||
state.grid.set(wire.steps[wire.index + 1].position, 'dot')
|
||||
}
|
||||
|
||||
wire.index++
|
||||
|
||||
if (wire.index >= wire.steps.length) {
|
||||
state.queuedWire = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const CELL_SIZE = 27
|
||||
|
||||
const BACKGROUND_COLOR = '#ecffe3'
|
||||
const WIRE_COLOR = '#a6ce94'
|
||||
|
||||
const RENDER_CELL: Record<WireCell, (g: CanvasRenderingContext2D) => void> = {
|
||||
'down': g => {
|
||||
g.strokeStyle = WIRE_COLOR
|
||||
g.beginPath()
|
||||
g.moveTo(0, 0)
|
||||
g.lineTo(0, 1)
|
||||
g.stroke()
|
||||
},
|
||||
'down-left': g => {
|
||||
g.strokeStyle = WIRE_COLOR
|
||||
g.beginPath()
|
||||
g.moveTo(0, 0)
|
||||
g.lineTo(-1, 1)
|
||||
g.stroke()
|
||||
},
|
||||
'down-right': g => {
|
||||
g.strokeStyle = WIRE_COLOR
|
||||
g.beginPath()
|
||||
g.moveTo(0, 0)
|
||||
g.lineTo(+1, 1)
|
||||
g.stroke()
|
||||
},
|
||||
'dot': g => {
|
||||
g.fillStyle = BACKGROUND_COLOR
|
||||
g.beginPath()
|
||||
g.ellipse(0, 0, 0.15, 0.15, 0, 0, 2 * Math.PI)
|
||||
g.fill()
|
||||
|
||||
g.strokeStyle = WIRE_COLOR
|
||||
g.beginPath()
|
||||
g.ellipse(0, 0, 0.15, 0.15, 0, 0, 2 * Math.PI)
|
||||
g.stroke()
|
||||
},
|
||||
}
|
||||
|
||||
function render(g: CanvasRenderingContext2D, state: State, time: number) {
|
||||
g.clearRect(0, 0, g.canvas.width, g.canvas.height)
|
||||
g.resetTransform()
|
||||
g.scale(CELL_SIZE, CELL_SIZE)
|
||||
g.lineWidth = 3 / CELL_SIZE
|
||||
|
||||
const w = (g.canvas.width / CELL_SIZE) | 0
|
||||
const h = (g.canvas.height / CELL_SIZE) | 0
|
||||
for (let y = 0; y <= h + 1; y++) {
|
||||
for (let x = 0; x <= w + 1; x++) {
|
||||
if (!state.grid.has([x, y])) continue
|
||||
|
||||
const cell = state.grid.get([x, y])
|
||||
|
||||
g.save()
|
||||
g.translate(x, y)
|
||||
|
||||
// g.fillStyle = '#f008'
|
||||
// g.beginPath()
|
||||
// g.rect(-0.25, -0.25, 0.5, 0.5)
|
||||
// g.fill()
|
||||
|
||||
RENDER_CELL[cell](g)
|
||||
g.restore()
|
||||
}
|
||||
}
|
||||
|
||||
// if (state.queuedWire) {
|
||||
// for (const step of state.queuedWire.steps) {
|
||||
// const [x, y] = step.position
|
||||
|
||||
// g.fillStyle = '#00f8'
|
||||
// g.save()
|
||||
// g.translate(x, y)
|
||||
|
||||
// g.beginPath()
|
||||
// g.rect(-0.25, -0.25, 0.5, 0.5)
|
||||
// g.fill()
|
||||
// g.restore()
|
||||
// }
|
||||
// }
|
||||
|
||||
const [mx, my] = state.mouse
|
||||
g.save()
|
||||
g.fillStyle = '#0008'
|
||||
g.translate(Math.floor(mx / CELL_SIZE), Math.floor(my / CELL_SIZE))
|
||||
g.beginPath()
|
||||
g.rect(0, 0, 1, 1)
|
||||
g.fill()
|
||||
g.restore()
|
||||
}
|
||||
|
||||
setup()
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (renderer) {
|
||||
clearInterval(renderer.timer)
|
||||
}
|
||||
setup()
|
||||
})
|
||||
|
||||
function randomInt(from: number, to: number) {
|
||||
return Math.floor(Math.random() * (to - from + 1))
|
||||
}
|
||||
|
||||
function randomChoice<T>(choices: T[]): T {
|
||||
return choices[randomInt(0, choices.length - 1)]
|
||||
}
|
||||
|
||||
function randomWeightedChoice<T>(choices: [T, number][]) {
|
||||
return
|
||||
}
|
||||
|
||||
// 3 + 4 + 5 + 6
|
||||
randomWeightedChoice([
|
||||
['a', 3],
|
||||
['b', 4],
|
||||
['c', 5],
|
||||
['d', 6],
|
||||
])
|
||||
|
||||
const DIR_TO_VEC: Record<WireDirection, Point2> = {
|
||||
['down']: [0, 1],
|
||||
['down-left']: [-1, 1],
|
||||
['down-right']: [+1, 1],
|
||||
}
|
||||
|
||||
type ShortCircuitBoolean = boolean | (() => boolean)
|
||||
|
||||
const callOrBoolean = (v: ShortCircuitBoolean): boolean => (typeof v === 'boolean' ? v : v())
|
||||
const implies = (a: ShortCircuitBoolean, b: ShortCircuitBoolean) => !callOrBoolean(a) || callOrBoolean(b)
|
||||
|
||||
/**
|
||||
* Tells whether a given direction is not blocked by some other cell in a given grid and starting position
|
||||
*/
|
||||
const DIR_AVAILABLE_PREDICATE: Record<WireDirection, (pos: Point2, grid: Grid<WireCell>) => boolean> = {
|
||||
['down']: ([x, y], grid) =>
|
||||
!grid.has([x, y + 1]) &&
|
||||
implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) !== 'down-right') &&
|
||||
implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) !== 'down-left'),
|
||||
['down-left']: ([x, y], grid) => !grid.has([x - 1, y + 1]) && implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) === 'down-left'),
|
||||
['down-right']: ([x, y], grid) =>
|
||||
!grid.has([x + 1, y + 1]) && implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) === 'down-right'),
|
||||
}
|
||||
|
||||
function pruneDirections(grid: Grid<WireCell>, position: Point2, directions: WireDirection[]): WireDirection[] {
|
||||
return directions.filter(dir => DIR_AVAILABLE_PREDICATE[dir](position, grid))
|
||||
}
|
||||
|
||||
function generateWire(grid: Grid<WireCell>, startingPoint: Point2): { position: Point2; direction: WireCell }[] {
|
||||
const segmentLength = Math.floor(1 - Math.random() ** 2) * 10 + 30
|
||||
let currentPosition = startingPoint
|
||||
let currentDirection: WireDirection = randomChoice(['down', 'down', 'down', 'down-left', 'down-right'])
|
||||
|
||||
const steps: { position: Point2; direction: WireCell }[] = []
|
||||
|
||||
for (let i = 0; i < segmentLength; i++) {
|
||||
const availableDirections = pruneDirections(grid, currentPosition, ['down', 'down-left', 'down-right'])
|
||||
if (availableDirections.length === 0) {
|
||||
break
|
||||
} else {
|
||||
const dir =
|
||||
availableDirections.includes(currentDirection) && Math.random() < 0.25
|
||||
? currentDirection
|
||||
: randomChoice(availableDirections)
|
||||
|
||||
if ((currentDirection === 'down-left' && dir === 'down-right') || (currentDirection === 'down-right' && dir === 'down-left')) {
|
||||
break
|
||||
}
|
||||
|
||||
const [x, y] = currentPosition
|
||||
const [dx, dy] = DIR_TO_VEC[dir]
|
||||
|
||||
steps.push({
|
||||
position: [x, y],
|
||||
direction: dir,
|
||||
})
|
||||
|
||||
currentPosition = [x + dx, y + dy]
|
||||
currentDirection = dir
|
||||
}
|
||||
}
|
||||
|
||||
const last = steps.at(-1)
|
||||
if (last) {
|
||||
last.direction = 'dot'
|
||||
}
|
||||
|
||||
return steps
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"compilerOptions": {
|
||||
// Enable top-level await, and other modern ESM features.
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
// Enable node-style module resolution, for things like npm package imports.
|
||||
"moduleResolution": "node",
|
||||
// Enable JSON imports.
|
||||
"resolveJsonModule": true,
|
||||
// Enable stricter transpilation for better output.
|
||||
"isolatedModules": true,
|
||||
// Astro directly run TypeScript code, no transpilation needed.
|
||||
"noEmit": true,
|
||||
"strictNullChecks": true,
|
||||
// Report an error when importing a file using a casing different from the casing on disk.
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
// Properly support importing CJS modules in ESM
|
||||
"esModuleInterop": true,
|
||||
// Skip typechecking libraries and .d.ts files
|
||||
"skipLibCheck": true,
|
||||
// Add alias for assets folder for easy reference to assets
|
||||
"baseUrl": ".",
|
||||
"paths": {},
|
||||
// TypeScript 5.0 changed how `isolatedModules` and `importsNotUsedAsValues` works, deprecating the later
|
||||
// Until the majority of users are on TypeScript 5.0, we'll have to supress those deprecation errors
|
||||
"ignoreDeprecations": "5.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue