mapcat(c => {
						const n1 = nodes[c[0]]
						const n2 = nodes[c[1]]
						const vDiff = normalize(sub(n2.pos, n1.pos))
						const normal = [vDiff[1], -vDiff[0]]
						const p1 = add(n1.pos, mul(lineWidth / 2, normal))
						const p2 = add(n1.pos, mul(-lineWidth / 2, normal))
						const p3 = add(n2.pos, mul(lineWidth / 2, normal))
						const p4 = add(n2.pos, mul(-lineWidth / 2, normal))
						return flatten([p3, p2, p1, p2, p3, p4])
					}, connections),

			box.map((side, i) => flatten(side).map(() => faceNormals[i])),

	return randomDivide(q, count).map(q => flatten(subdivide(horzDiv(q))))

function subdivide(quads: Quad[], times = 1): Quad[] {
	for (let i = 0; i < times; i++) {
		quads = flatten(quads.map(q => flatten(vertDiv(q).map(horzDiv))))
	}
	return quads
}

	const rt = extrudeRight([0, 0, 20], right(bk))
	const ft = extrudeRight([-20, 0, 0], right(rt))
	const lf = extrudeRight([0, 0, -20], right(ft))
	return [
		makeSideSegments(bk, count),
		makeSideSegments(rt, count),
		makeSideSegments(ft, count),
		makeSideSegments(lf, count),
	]
})()

export const faceNormals = box.map(q => normal(q[1]))

export const wallsForm = getForm(painter, 'wallsForm').update(
	convertStackGLGeometry({
		position: flatten(flatten(box)),
		// color: flatten(b.map((side) => flatten(side.map((slice) => flatten(slice.map((q) => (q as any[]).map(() => pickRandom(c)))))))),
		color: flatten(
			box.map((side, i) =>
				flatten(
					side.map((slice, j) =>
						slice.map(() => colors[i * boxSliceCount + j]),
					),
				),
			),
		),
		normal: flatten(
			box.map((side, i) => flatten(side).map(() => faceNormals[i])),
		),
		cells: triangulate(4 * boxSliceCount * 4 * 2),
	}),

import sideFrag from './shaders/side.frag'

// ===== shaders =====

const pointsShade = getShade(painter, 'point').update({
	vert: pointVert,
	frag: pointFrag,
})

// ===== geometries =====

const pointsForm = getForm(painter, 'points').update({
	drawType: 'POINTS',
	attribs: {
		position: {
			buffer: new Float32Array(flatten(nodes)),
			storeType: 'DYNAMIC',
		},
	},
	itemCount: nodes.length,
})

// ===== objects =====

const pointsSketch = getSketch(painter, 'points').update({
	form: pointsForm,
	shade: pointsShade,
})

// ===== layers =====

		id: i,
		pos: [Math.random() * canvas.width, Math.random() * canvas.height],
		ns: randInt(nameSpaceCount),
		force: [0, 0],
	}),
	nodeCount,
)

export const connections = flatten(
	times(i => {
		if (i < nodeCount - 3) {
			const i1 = randIntInRange(i + 1, nodeCount - 1)
			const cs = [[i, i1] as [number, number]]
			const i2 = randIntInRange(i + 1, nodeCount - 1)
			if (i2 !== i1) {
				cs.push([i, i2])
			}
			return cs
		} else {
			return []
		}
	}, nodeCount),
)

function updateForces(force: M<number>, dir: M<number[]>, from: any, to: any) {
	const update = (f: M<number>) => (v: number[]) =>
		f.combine(mul, dir).pull(add, v).value

	alter(from, 'force', update(force))
	alter(to, 'force', update(force.map(f => -f)))
}