Bursts of graffiti, a chaotic array of forms and figures.
import helpers from "/scratchpad/_lib/line.asset.mjs"
import sequence from "/scratchpad/_lib/sequence.asset.mjs"
import posterize from "/scratchpad/posterize/posterize.asset.mjs"
import badge from "/scratchpad/_lib/badge.asset.mjs"
import palette from "/scratchpad/_lib/palette.asset.mjs"
import * as random from "/scratchpad/_lib/random.asset.mjs"
const dpi = window.devicePixelRatio || 1
export default (canvas) => {
const scale = dpi
canvas.width = canvas.offsetWidth * scale
canvas.height = canvas.offsetHeight * scale
const ctx = canvas.getContext("2d")
const colors = [palette.dark, palette.canvas, palette.light]
const options = {
grid: random.integer(4, 8),
strokeWidth: random.integer(20, 60),
iterations: random.integer(6, 10),
coverage: random.number(0.02),
}
options.offset = options.strokeWidth * 1.1
options.blurRadius = options.strokeWidth / 8
let points = null
const iteration = (index) => [
() => {
points = []
const ow = canvas.width - options.offset * 2
const oh = canvas.height - options.offset * 2
helpers
.makeGrid(ow, oh, options.grid)
.filter(() => random.maybe(options.coverage))
.forEach((point) => {
const t = random.number(Math.PI)
const x = Math.cos(t) * (options.grid / 3)
const y = Math.sin(t) * (options.grid / 3)
points.push({
x: options.offset + point.x - x,
y: options.offset + point.y - y,
})
points.push({
x: options.offset + point.x + x,
y: options.offset + point.y + y,
})
})
},
() => {
const t = 1 - (options.iterations - index) / (options.iterations * 10)
const strokeWidth = options.strokeWidth * t
const remaining = [points].filter((p) => random.maybe(0.6))
ctx.beginPath()
const fn = function (p0) {
if (remaining.length < 4) return
const [p1, p2] = helpers.nearest(remaining, p0).slice(1)
ctx.moveTo(p1.x, p1.y)
const mx =
p1.x + (p2.x - p1.x) / 2 + (random.wobble(0.5) * canvas.width) / 20
const my =
p1.y + (p2.y - p1.y) / 2 + (random.wobble(0.5) * canvas.width) / 20
ctx.quadraticCurveTo(mx, my, p2.x, p2.y)
}
random.shuffle(points).forEach(fn)
ctx.globalCompositeOperation = "source-atop"
ctx.lineCap = "round"
ctx.lineWidth = strokeWidth * 1.5
ctx.strokeStyle = "rgba(0, 0, 0, 0.2)"
ctx.stroke()
ctx.globalCompositeOperation = "source-over"
ctx.lineWidth = strokeWidth
ctx.strokeStyle = palette.dark
ctx.stroke()
ctx.strokeStyle = palette.canvas
ctx.lineWidth = strokeWidth * 0.4
ctx.stroke()
if (random.maybe(0.9)) {
ctx.save()
ctx.translate(0, 80)
ctx.strokeStyle = palette.dark
ctx.lineWidth = strokeWidth * 0.1
ctx.stroke()
ctx.restore()
}
},
() => {
posterize({
ctx,
radius: options.blurRadius,
colors,
ramp: options.blurRadius * 2,
})
},
]
const steps = Array.from({ length: options.iterations }, (e, i) =>
iteration(i)
)
return sequence([steps.flat(), () => badge(ctx, { colors })])
}