1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[408],{3408:function(n,t,o){o.r(t),o.d(t,{INDEX_KEY:function(){return g},SEED_KEY:function(){return f},TIME_KEY:function(){return w},default:function(){return view}});var e=o(1664),a=o.n(e),s=o(7294),i=o(5893);function Flex(){return(0,i.jsx)("div",{className:"flex-1"})}var r=o(5770),p=o(89),l=o(9595),d=o(3672),c=o(102),h=o(5192),m=o(1157),u=JSON.parse('{"advanced-apis.ts":{"Compound Path":"const compoundPath = (p: SCanvas) => {\\n p.background(45, 80, 75)\\n p.setFillColor(220, 9, 45, 0.4)\\n // To remove a shape from another shape the path winding order must be opposite (hence the reversed)\\n p.times(4, (n) => {\\n p.fill(\\n CompoundPath.withPaths(\\n new RegularPolygon({ at: p.meta.center, r: 0.3 + n * 0.05, n: 8 }).path,\\n new Star({ at: p.meta.center, r: 0.3 + n * 0.05, n: 4 }).path.reversed\\n )\\n )\\n })\\n}\\n\\n","Compound Path 2":"const compoundPath2 = (p: SCanvas) => {\\n p.background(45, 20, 95)\\n p.forTiling({ n: 3, type: \\"square\\" }, (at, [dX], c, i) => {\\n p.setFillColor(220 - i * 40, 30, 45, 0.4)\\n const s = 1 + 0.5 * p.random()\\n p.times(4, (n) => {\\n p.fill(\\n CompoundPath.withPaths(\\n new RegularPolygon({\\n at: c,\\n r: dX / 4 + dX * n * 0.05,\\n n: 2 * (i + 3),\\n }).path,\\n new Star({\\n at: c,\\n r: (s * dX) / 4 + dX * n * 0.05,\\n n: i + 3,\\n }).path.transformed((at) => p.perturb({ at, magnitude: 0.05 }))\\n .reversed\\n )\\n )\\n })\\n })\\n}\\n\\n","Transforming Paths":"const transformingPaths = (p: SCanvas) => {\\n p.background(30, 80, 40)\\n const { center, bottom, right } = p.meta\\n const [cX, cY] = center\\n const r = 0.3 * Math.min(bottom, right)\\n const path = Path.startAt([cX + r * Math.cos(p.t), cY + r * Math.sin(p.t)])\\n p.times(33, (n) => {\\n path.addCurveTo(\\n [\\n cX + (n % 2 === 0 ? 1 : 0.8) * r * Math.cos(p.t + (n * Math.PI) / 16),\\n cY + (n % 2 === 0 ? 1 : 0.8) * r * Math.sin(p.t + (n * Math.PI) / 16),\\n ],\\n {\\n polarlity: n % 2 === 0 ? 1 : -1,\\n }\\n )\\n })\\n\\n p.times(4, (sc) => {\\n const scale = (sc ** 1.5 + 1) * 0.22\\n p.lineWidth = (sc + 1) * 0.002\\n\\n p.setStrokeColor(0, 0, 0, 0.9)\\n p.draw(path.scaled(scale))\\n p.setStrokeColor(0, 0, 0, 0.3)\\n p.draw(path.rotated(0.234234 + p.t / 10).scaled(scale))\\n })\\n}\\n\\n","Ordering of Tiles":"const orderedTiles = (p: SCanvas) => {\\n p.background(0, 0, 20)\\n p.forTiling(\\n { n: 10, type: \\"square\\", margin: 0.1, order: \\"columnFirst\\" },\\n (_, [dX], c, i) => {\\n p.setFillColor(i * 3, 80, 60, 0.6)\\n p.fill(new Circle({ at: v.subtract(c, [dX / 8, 0]), r: dX / 3 }))\\n }\\n )\\n p.forTiling(\\n { n: 10, type: \\"square\\", margin: 0.1, order: \\"rowFirst\\" },\\n (_, [dX], c, i) => {\\n p.setFillColor(i * 3, 80, 60, 0.6)\\n p.fill(new Circle({ at: v.add(c, [dX / 8, 0]), r: dX / 3 }))\\n }\\n )\\n}\\n\\n","Dashes":"const dashes = (p: SCanvas) => {\\n p.background(0, 0, 5)\\n p.forTiling({ n: 5, margin: 0.1, type: \\"square\\" }, (_pt, [dX], at, i) => {\\n p.lineWidth = 0.005\\n p.dash = { offset: p.t / 20, pattern: [0.001 * (5 + i), 0.002 * (5 + i)] }\\n p.setStrokeColor(45 + i * 10, 100, 70, 0.9)\\n p.draw(new RegularPolygon({ at, n: 6, r: dX / 3 }))\\n })\\n}\\n\\n","Shadows":"const shadows = (p: SCanvas) => {\\n p.background(10, 30, 95)\\n p.forTiling(\\n { n: 6, type: \\"square\\", order: \\"rowFirst\\", margin: 0.05 },\\n (pt, [dX], _c, t) => {\\n const i = t % 6\\n const j = Math.floor(t / 6)\\n\\n p.setFillColor(t, 90, 40, 0.75)\\n p.shadow = { size: t * 0.001, dX: (i - 2.5) * 0.01, dY: j * 0.01 }\\n p.fill(\\n new Rect({\\n at: v.add([dX / 6, dX / 6], pt),\\n w: (dX * 2) / 3,\\n h: (dX * 2) / 3,\\n })\\n )\\n }\\n )\\n}\\n\\n","Shadow Animation":"const shadowAnimation = (p: SCanvas) => {\\n p.background(10, 30, 95)\\n p.forTiling({ margin: 0.05, n: 6, type: \\"square\\" }, (_pt, [dX], at, i) => {\\n const sc = Math.cos(p.t + i)\\n p.setFillColor(198 + i, 60, 40)\\n p.shadow = {\\n size: 0.05 + 0.05 * sc,\\n dY: 0,\\n dX: 0,\\n color: { h: 210, s: 90, l: 30, a: 0.9 },\\n }\\n p.fill(\\n new Square({\\n at,\\n s: dX * 0.5 + sc * 0.005,\\n align: \\"center\\",\\n })\\n )\\n })\\n}\\n\\n","Glow":"const glow = (p: SCanvas) => {\\n p.background(0, 0, 5)\\n p.forTiling(\\n { n: 5, type: \\"square\\", order: \\"rowFirst\\", margin: 0.05 },\\n (pt, [dX], c, t) => {\\n const i = t % 5\\n const j = Math.floor(t / 5)\\n\\n p.setFillColor(t + 150, 90, 40, 0.75)\\
1n p.shadow = {\\n dX: 0,\\n dY: 0,\\n size: t * 0.0025 * p.oscillate({ from: 0.5, to: 1.5 }),\\n color: {\\n h: t + 150,\\n s: 50,\\n l: 100,\\n a: 0.9,\\n },\\n }\\n p.fill(\\n new RegularPolygon({\\n at: c,\\n r: dX / 3,\\n n: p.sample([3, 5, 7]),\\n })\\n )\\n }\\n )\\n}\\n\\n","Segments":"const segments = (p: SCanvas) => {\\n p.background(35, 5, 20)\\n p.forTiling(\\n { n: 12, type: \\"square\\", margin: 0.05, order: \\"rowFirst\\" },\\n (_pt, [dX], at, i) => {\\n p.doProportion(0.6, () => {\\n p.setFillColor(5 + i, 90, 40)\\n p.shadow = {\\n size: 0.05,\\n dY: 0,\\n dX: 0,\\n color: { h: 45, s: 80, l: 30, a: 0.9 },\\n }\\n p.fill(\\n new RoundedRect({\\n at,\\n align: \\"center\\",\\n w: dX / 1.3,\\n h: dX / 1.3,\\n r: dX / 8,\\n })\\n )\\n })\\n }\\n )\\n}\\n\\n","Hex":"const hex = (p: SCanvas) => {\\n p.background(35, 30, 10)\\n const r = 0.1\\n const vertical = true\\n const h = hexTransform({ r, vertical })\\n p.withTranslation(p.meta.center, () => {\\n p.times(50, () => {\\n p.setFillColor(p.sample([35, 40, 45]), 60, 60, 0.4)\\n p.fill(\\n new Hexagon({\\n at: h(\\n p.uniformGridPoint({\\n minX: -3,\\n maxX: 3,\\n minY: -3,\\n maxY: 3,\\n })\\n ),\\n r,\\n vertical,\\n })\\n )\\n })\\n })\\n}\\n\\n","Hex (Horizontal)":"const hexH = (p: SCanvas) =>
1 {\\n p.background(215, 40, 30)\\n const r = 0.075\\n const vertical = false\\n const h = hexTransform({ r, vertical })\\n p.withTranslation(p.meta.center, () => {\\n p.times(250, () => {\\n p.setFillColor(p.sample([135, 140, 145]), 60, 60, 0.4)\\n p.fill(\\n new Hexagon({\\n at: h(\\n p.uniformGridPoint({\\n minX: -5,\\n maxX: 5,\\n minY: -5,\\n maxY: 5,\\n })\\n ),\\n r: r * 0.9,\\n vertical,\\n })\\n )\\n })\\n })\\n}\\n\\n","Triangles":"const tri = (p: SCanvas) => {\\n p.background(215, 40, 30)\\n p.lineWidth = 0.005\\n p.setStrokeColor(0, 0, 90, 0.5)\\n const s = 0.14\\n const tt = triTransform({ s })\\n const area = {\\n minX: -8,\\n maxX: 8,\\n minY: -5,\\n maxY: 5,\\n } as const\\n p.withTranslation(p.meta.center, () => {\\n p.forGrid(area, (gp) => {\\n const ta = new EquilateralTriangle({\\n ...tt(gp),\\n s,\\n })\\n p.setFillColor(p.sample([215, 195]), 60, 60, 0.2)\\n p.fill(ta)\\n p.draw(ta)\\n })\\n\\n p.times(100, (n) => {\\n p.setFillColor(n / 2, 90, 60, 0.45)\\n p.fill(\\n new EquilateralTriangle({\\n ...tt(p.uniformGridPoint(area)),\\n s: s * p.gaussian({ mean: 1.5, sd: 0.4 }),\\n })\\n )\\n })\\n })\\n}\\n\\n"},"advanced-paths.ts":{"Dividing 3":"const dividing3 = (p: SCanvas) => {\\n p.background(0, 0, 5)\\n new RegularPolygon({ at: p.meta.center, r: 0.4, n: 20 }).path.segmented\\n .flatMap((s) => s.exploded({ scale: 0.75, magnitude: 1.1 }))\\n .map((s, i) => s.rotated((i * Math.PI) / 2))\\n .forEach((s, i) => {\\n p.setFillColor(i * 5, 80, 60, 0.9)\\n p.fill(s)\\n })\\n}\\n\\n","Dividing 4":"const dividing4 = (p: SCanvas) => {\\n p.background(45, 20, 95)\\n new RegularPolygon({ at: p.meta.center, r: 0.4, n: 24 }).path.segmented\\n .flatMap((s) => s.exploded({ scale: 0.8, magnitude: 1.1 }))\\n .map((s, i) =>\\n s\\n .rotated((i * Math.PI) / 4)\\n .moved([p.gaussian({ sd: 0.06 }), p.gaussian({ sd: 0.04 })])\\n )\\n .forEach((s, i) => {\\n p.setFillColor(210 + (i % 40), 80, 60, 0.8)\\n p.fill(s)\\n })\\n}\\n\\n","Dividing 5":"const dividing5 = (p: SCanvas) => {\\n p.background(210, 20, 95)\\n p.setFillColor(215, 95, 20, 0.8)\\n p.forMargin(0.1, (at, [w, h]) => {\\n new Rect({ at, w, h })\\n .split({ orientation: \\"horizontal\\", split: arrayOf(10, () => 1) })\\n .flatMap((r) =>\\n r.split({ orientation: \\"vertical\\", split: arrayOf(10, () => 1) })\\n )\\n .flatMap((r) => r.path.exploded({ scale: 0.85, magnitude: 1.0 }))\\n .map((s) => s.rotated(p.gaussian({ sd: Math.PI / 8 })))\\n .forEach((s) => p.fill(s))\\n })\\n}\\n\\n","Dividing 7":"const dividing7 = (p: SCanvas) => {\\n p.background(90, 20, 95)\\n p.lineWidth = 0.004\\n const explosionSize = 2 + Math.cos(p.t)\\n\\n p.forMargin(0.1, (at, [w, h]) => {\\n new Rect({ at, w, h })\\n .split({ orientation: \\"horizontal\\", split: arrayOf(8, () => 1) })\\n .flatMap((r) =>\\n r.split({ orientation: \\"vertical\\", split: arrayOf(8, () => 1) })\\n )\\n .map((r) => r.path)\\n .flatMap((s) => s.exploded({ scale: 0.9, magnitude: 1 }))\\n .filter((_) => p.random() > 0.2)\\n .map((s) =>\\n s\\n .scaled(p.gaussian({ mean: 1, sd: 0.2 }))\\n .rotated(p.gaussian({ sd: Math.PI / 4 }))\\n )\\n .flatMap((s) =>\\n s.exploded({\\n scale: 0.6 + 0.3 * explosionSize,\\n magnitude: explosionSize,\\n })\\n )\\n .forEach((s, i) => {\\n p.setFillColor(0 + (i % 60), 90, 50)\\n p.draw(s)\\n p.fill(s)\\n })\\n })\\n}\\n\\n","Dividing 8":"const dividing8 = (p: SCanvas) => {\\n p.background(0, 0, 85)\\n p.setFillColor(0, 0, 20)\\n p.fill(new RegularPolygon({ n: 6, at: p.meta.center, r: 0.44 }))\\n new RegularPolygon({ n: 6, at: p.meta.center, r: 0.4 }).path\\n .subdivide({ m: 1, n: 5 })\\n .forEach((s, i) => {\\n p.setFillColor(i * 20, 50, 50)\\n p.fill(s)\\n })\\n new RegularPolygon({ n: 6, at: p.meta.center, r: 0.4 }).path\\n .subdivide({ m: 0, n: 3 })\\n .forEach((s, i) => {\\n p.setFillColor(i * 20, 50, 50, 0.5)\\n p.fill(s)\\n }
1)\\n\\n p.setFillColor(60, 50, 20, 0.1)\\n p.fill(\\n new RegularPolygon({ n: 6, at: p.meta.center, r: 0.4 }).path.subdivide({\\n m: 2,\\n n: 5,\\n })[0]\\n )\\n}\\n\\n","Dividing 9":"const dividing9 = (p: SCanvas) => {\\n p.background(45, 20, 85)\\n p.setFillColor(0, 0, 20)\\n const hue = p.sample([160, 0, 190])\\n\\n p.downFrom(2, (n) => {\\n const s = n / 2\\n new Star({ at: p.meta.center, r: s * 0.4, r2: s * 0.2, n: 12 }).path\\n .subdivide({ m: 0, n: 12 })\\n .forEach((s, i) => {\\n p.setFillColor(hue + i * 40, 90, 40)\\n p.fill(s)\\n })\\n p.setFillColor(45, 20, 70 + 5 * n)\\n p.fill(new Star({ at: p.meta.center, r: s * 0.3, r2: s * 0.15, n: 12 }))\\n })\\n}\\n\\n","Dividing 10":"const dividing10 = (p: SCanvas) => {\\n p.background(0, 0, 85)\\n p.setFillColor(0, 0, 0, 0.5)\\n const points: Point2D[] = []\\n new RegularPolygon({ n: 24, r: 0.4, at: p.meta.center }).path\\n .exploded({ scale: 0.95, magnitude: 1 })\\n .flatMap((s) => s.exploded({ scale: 0.95, magnitude: 1 }))\\n .map((s) => s.rotated(p.gaussian({ sd: Math.PI / 2 })))\\n .forEach((s) => {\\n p.fill(s)\\n points.push(s.centroid)\\n })\\n\\n p.lineWidth = 0.01\\n p.setStrokeColor(0, 0, 0, 0.2)\\n p.draw(SimplePath.withPoints(p.shuffle(points)))\\n}\\n\\n","Advanced Divisions 2":"const advancedDivisions2 = (p: SCanvas) => {\\n p.background(215, 90, 10)\\n const points: Point2D[] = []\\n p.forMargin(0.1, ([x, y], [dX, dY]) => {\\n p.times(10, (n) => {\\n points.push([x + (n * dX) / 10, y])\\n })\\n p.times(10, (n) => {\\n points.push([x + dX, y + (n * dY) / 10])\\n })\\n p.times(10, (n) => {\\n points.push([x + dX - (n * dX) / 10, y + dY])\\n })\\n p.times(10, (n) => {\\n points.push([x, y + dY - (n * dY) / 10])\\n })\\n })\\n\\n const path = Path.startAt(points[0])\\n for (let i = 1; i < points.length; i++) {\\n path.addCurveTo(points[i], {\\n curveSize: p.gaussian({ mean: 0.6, sd: 0.15 }),\\n })\\n }\\n path.addCurveTo(points[0])\\n\\n path.exploded().forEach((s) => {\\n p.setFillColor(0, 0, 95, p.sample([0.2, 0.4]))\\n p.fill(s)\\n })\\n\\n path.subdivide({ m: 5, n: 25, curve: { curveSize: 0.5 } }).forEach((s) => {\\n p.fill(s.scaled(0.8))\\n p.fill(s.rotated(Math.PI / 2))\\n })\\n\\n path.subdivide({ m: 5, n: 25, curve: { curveSize: -0.5 } }).forEach((s) => {\\n p.fill(s.scaled(0.8))\\n p.fill(s.rotated(Math.PI / 2))\\n p.fill(s.rotated(-Math.PI / 2))\\n })\\n\\n path\\n .exploded()\\n .flatMap((s) => s.exploded())\\n .filter((_) => p.random() < 0.4)\\n .forEach((s) => {\\n p.setFillColor(0, 0, 95, p.sample([0.1, 0.2]))\\n p.fill(s)\\n })\\n}\\n\\n","Paths to Curves":"const curvify = (p: SCanvas) => {\\n p.background(150, 90, 30)\\n p.setStrokeColor(0, 0, 95, 0.4)\\n p.times(20, () => {\\n p.draw(\\n new RegularPolygon({ at: p.meta.center, r: 0.3, n: 11 }).path.curvify(\\n () => ({\\n curveSize: p.gaussian({ mean: 2, sd: 0.5 }),\\n polarlity: p.randomPolarity(),\\n })\\n )\\n )\\n })\\n}\\n\\n","Paths to Curves 2":"const curvify2 = (p: SCanvas) => {\\n p.background(150, 20, 20)\\n p.setStrokeColor(0, 0, 95)\\n new RegularPolygon({ at: p.meta.center, r: 0.3, n: 12 }).path\\n .exploded({ magnitude: 1.2, scale: 0.8 })\\n .map((sp, i) => sp.curvify(() => ({ curveSize: -0.25 })))\\n .forEach((s) => p.draw(s))\\n const middle = new RegularPolygon({\\n at: p.meta.center,\\n r: 0.25,\\n n: 12,\\n }).path.curvify((i) => (i % 2 === 0 ? { curveSize: -0.9 } : null))\\n p.setFillColor(0, 0, 75, 0.4)\\n p.fill(middle)\\n p.setStrokeColor(0, 0, 75)\\n p.draw(middle)\\n}\\n\\n","Spirals":"const spirals = (p: SCanvas) => {\\n p.background(195, 30, 95)\\n p.lineWidth = 0.0025\\n new Spiral({\\n at: p.meta.center,\\n l: 0.05,\\n n: 400,\\n rate: p.oscillate({ from: 0.004, to: 0.005, rate: 0.15 }),\\n }
1).path.edges.forEach((edge, i) => {\\n p.setStrokeColor(i / 3, 70, 30)\\n p.draw(edge.rotated(Math.PI / 4 + (i * Math.PI) / 2))\\n })\\n}\\n\\n","Spirals 2":"const spirals2 = (p: SCanvas) => {\\n p.background(195, 10, 95)\\n p.lineWidth = 0.0025\\n p.setStrokeColor(0, 50, 20, 0.9)\\n new Spiral({\\n at: p.meta.center,\\n l: 0.04,\\n n: 500,\\n rate: p.oscillate({ from: 0.004, to: 0.005, rate: 0.15 }),\\n }).path.edges.forEach((edge) => {\\n const offsetA = 2 * Math.PI * perlin2(...edge.points[0])\\n const offset = v.scale([Math.cos(offsetA), Math.sin(offsetA)], 0.1)\\n p.draw(edge.rotated(Math.PI / 4).moved(offset))\\n })\\n}\\n\\n"},"animated.ts":{"Blob":"const blob = (p: SCanvas) => {\\n p.background(205, 55, 95)\\n const paths = p.build(p.times, 3, (n) =>\\n SimplePath.withPoints(\\n p.build(p.aroundCircle, { n: 12, at: [0, 0] }, (pt, i) =>\\n add(\\n pt,\\n scale([perlin2(i / 12, 1 + n + p.t), perlin2(-i / 12, n + p.t)], 0.25)\\n )\\n )\\n )\\n .close()\\n .chaiken({ n: 3, looped: true })\\n )\\n\\n paths.forEach((pt) => {\\n p.withTranslation([0.5, 0.5], () => {\\n p.withScale([1.2, 1.2], () => {\\n p.setFillColor(205, 75, 90)\\n p.fill(pt)\\n })\\n })\\n })\\n\\n paths.forEach((pt) => {\\n p.withTranslation([0.5, 0.5], () => {\\n p.setFillColor(205, 75, 45)\\n p.fill(pt)\\n })\\n })\\n}\\n\\n","Lissajous":"const lissajous = (p: SCanvas) => {\\n p.background(140, 20, 10)\\n p.lineWidth = 0.005\\n p.setStrokeColor(140, 80, 60, 0.5)\\n\\n const a = 1\\n const b = 2.4\\n\\n const sp = SimplePath.withPoints([])\\n\\n for (let t = 0; t < 50; t += 0.1) {\\n sp.addPoint([\\n 0.5 + 0.4 * Math.sin(a * t),\\n p.meta.bottom * (0.5 + 0.4 * Math.sin(b * t + p.t)),\\n ])\\n }\\n\\n p.draw(sp.chaiken({ n: 3 }))\\n}\\n\\n","Low Resolution":"const lowResAnimation = (p: SCanvas) => {\\n const scaleX = scaler({\\n minDomain: 0.1,\\n maxDomain: 0.9,\\n minRange: -2 * Math.PI,\\n maxRange: Math.PI,\\n })\\n\\n const scaleY = scaler({\\n minDomain: 0.1,\\n maxDomain: p.meta.bottom - 0.1,\\n minRange: -1,\\n maxRange: 1,\\n })\\n const d = 0.001\\n p.background(215, 20, 20)\\n p.forTiling({ n: 35, type: \\"square\\", margin: 0.1 }, ([x, y], [w, h]) => {\\n if (scaleY(y) > Math.cos(p.t * 2 + scaleX(x))) {\\n p.setFillColor(215 - y * 40, 90, 40)\\n p.fill(new Rect({ at: [x + d, y + d], w: w - 2 * d, h: h - 2 * d }))\\n }\\n })\\n}\\n\\n","Low Resolution 2":"const lowResAnimation2 = (p: SCanvas) => {\\n const scaleXY = scaler2d(\\n {\\n minDomain: 0.1,\\n maxDomain: 0.9,\\n minRange: -2 * Math.PI,\\n maxRange: Math.PI,\\n },\\n {\\n minDomain: 0.1,\\n maxDomain: p.meta.bottom - 0.1,\\n minRange: -1.6,\\n maxRange: 1.6,\\n }\\n )\\n const d = 0.001\\n p.background(215, 20, 20)\\n p.forTiling({ n: 35, type: \\"square\\", margin: 0.1 }, ([x, y], [w, h]) => {\\n const [sX, sY] = scaleXY([x, y])\\n if (sY > Math.cos(p.t + sX) + 0.5 * Math.sin(p.t * 2.23 + sX)) {\\n p.setFillColor(5 + y * 40, 90, 40)\\n p.fill(new Rect({ at: [x + d, y + d], w: w - 2 * d, h: h - 2 * d }))\\n }\\n })\\n}\\n\\n","Low Resolution 3":"const lowResAnimation3 = (p: SCanvas) => {\\n const scaleXY = scaler2d(\\n {\\n minDomain: 0.1,\\n maxDomain: 0.9,\\n minRange: -2 * Math.PI,\\n maxRange: Math.PI,\\n },\\n {\\n minDomain: 0.1,\\n maxDomain: p.meta.bottom - 0.1,\\n minRange: -1.5,\\n maxRange: 1.5,\\n }\\n )\\n p.background(p.t * 20 + 95, 15, 10)\\n p.forTiling({ n: 35, type: \\"square\\", margin: 0.05 }, ([x, y], [w], at) => {\\n const [sX, sY] = scaleXY([x, y])\\n const eqn = Math.cos(p.t / 1.2 + sX)\\n const alpha = clamp({ from: 0.15, to: 1 }, 1 - Math.abs(sY - eqn))\\n p.setFillColor(p.t * 20 + 120 + y * 40, 90, 50, alpha)\\n p.fill(new Circle({ at, r: w / 2.1 }))\\n })\\n}\\n\\n"},"api-samples.ts":{"Rainbow Drips":"const rainbow = (p: SCanvas) => {\\n p.withRandomOrder(\\n p.forTiling,\\n { n: 20, type: \\"square\\", margin: 0.1 },\\n ([i, j], [di, dj]) => {\\n p.doProportion(0.6, () => {\\n p.setStrokeColor(i * 100, 80, 30 + j * 30, 0.9)\\n p.lineWidth = 0.02 + 0.02 * (1 - i)\\n p.draw(\\n new Line(\\n [i + di / 4, j + dj / 4],\\n [\\n i + (di * 3 * j * p.randomPolarity()) / 4,\\n j + (dj * 5 * (1 + p.random())) / 4,\\n ]\\n )\\n )\\n })\\n }\\n )\\n}\\n\\n","Horizontal":"const horizontal = (p: SCanvas) => {\\n p.backgroundGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [1, 0],\\n colors: [\\n [0, { h: 0, s: 0, l: 95 }],\\n [1, { h: 0, s: 0, l: 85 }],\\n ],\\n })\\n )\\n p.forHorizontal({ n: 20, margin: 0.1 }, ([x, y], [dX, dY]) => {\\n p.setStrokeColor(x * 360, 90, 40)\\n p.draw(new Line([x, y], [x + dX, y + dY]))\\n })\\n}\\n\\n","Vertical":"const vertical = (p: SCanvas) => {\\n p.backgroundGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [0, 1],\\n colors: [\\n [0, { h: 50, s: 40, l: 95 }],\\n [1, { h: 30, s: 40, l: 90 }],\\n ],\\n })\\n )\\n p.forVertical({ n: 20, margin: 0.1 }, ([x, y], [dX, dY]) => {\\n const points = p.build(p.range, { from: x, to: x + dX, n: 20 }, (vX) => {\\n return p.perturb({ at: [vX, y + dY / 2], magnitude: dY / 4 })\\n })\\n p.lineWidth = 0.01 / p.meta.aspectRatio\\n p.setStrokeColor(y * 60, 90, 40)\\n p.draw(SimplePath.withPoints(points))\\
1n })\\n}\\n\\n","Curves Demo":"const curves1 = (p: SCanvas) => {\\n p.backgroundGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [0, 1],\\n colors: [\\n [0, { h: 215, s: 20, l: 90 }],\\n [1, { h: 140, s: 20, l: 90 }],\\n ],\\n })\\n )\\n p.forTiling({ n: 12, margin: 0.1 }, ([x, y], [dX, dY]) => {\\n p.setStrokeColor(20 + x * 40, 90 - 20 * y, 50)\\n p.draw(\\n Path.startAt([x, y + dY]).addCurveTo([x + dX, y + dY], {\\n polarlity: p.randomPolarity(),\\n curveSize: x * 2,\\n curveAngle: x,\\n bulbousness: y,\\n })\\n )\\n })\\n}\\n\\n","Flower":"const flower = (p: SCanvas) => {\\n const horizonOffset = p.random() * 0.25\\n p.backgroundGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [0, p.meta.bottom],\\n colors: [\\n [0, { h: 215, s: 90, l: 90 }],\\n [0.59 + horizonOffset, { h: 215, s: 100, l: 70 }],\\n [0.61 + horizonOffset, { h: 150, s: 90, l: 30 }],\\n [1, { h: 140, s: 90, l: 40 }],\\n ],\\n })\\n )\\n\\n const { right, bottom } = p.meta\\n\\n const midX = right / 2\\n const midY = bottom / 2\\n const ir = p.random() * 0.025 + midX / 5\\n const da = Math.PI / 10\\n\\n const start = p.perturb({ at: [midX, bottom * 0.95] })\\n const end: Point2D = [midX, midY]\\n const second = p.perturb({ at: pointAlong(start, end, 0.4) })\\n\\n p.setStrokeColor(140, 50, 25)\\n p.lineWidth = 0.02\\n p.draw(\\n SimplePath.startAt(start).addPoint(second).addPoint(end).chaiken({ n: 3 })\\n )\\n\\n p.lineWidth = 0.01\\n let path = Path.startAt([midX + ir, midY])\\n for (let a = 0; a < Math.PI * 2; a += da) {\\n const pt: Point2D = [\\n midX + ir * Math.cos(a + da),\\n midY + ir * Math.sin(a + da),\\n ]\\n\\n path.addCurveTo(pt, {\\n curveSize: 12,\\n bulbousness: 2,\\n curveAngle: p.random() / 6,\\n })\\n }\\n const baseHue = p.random() * 290\\n p.setFillGradient(\\n new RadialGradient({\\n start: [midX, midY],\\n end: [midX, midY],\\n rStart: 0,\\n rEnd: 2,\\n colors: [\\n [0, { h: 10 + baseHue, s: 90, l: 50, a: 0.95 }],\\n [0.3, { h: 70 + baseHue, s: 90, l: 40, a: 0.95 }],\\n ],\\n })\\n )\\n p.fill(path)\\n p.lineWidth = 0.005\\n\\n p.setFillColor(40, 90, 90)\\n p.fill(\\n new Arc({\\n at: [midX, midY],\\n r: ir / 1.4,\\n a: 0,\\n a2: Math.PI * 2,\\n })\\n )\\n}\\n\\n","Tiled Curves":"const tilesOfChaiken = (p: SCanvas) => {\\n p.forTiling({ n: 6, type: \\"square\\", margin: 0.1 }, ([x, y], [dX, dY]) => {\\n const midX = x + dX / 2\\n const midY = y + dY / 2\\n const ir = dX / 4\\n const da = Math.PI / 10\\n\\n p.times(3, (n) => {\\n let points: Point2D[] = []\\n for (let a = 0; a < Math.PI * 2; a += da) {\\n const rr = 2 * p.random() + 1\\n points.push([\\n midX + ir * rr * Math.cos(a + da),\\n midY + ir * rr * Math.sin(a + da),\\n ])\\n }\\n const sp = SimplePath.startAt(points[0])\\n points.slice(1).forEach((p) => sp.addPoint(p))\\n sp.close()\\n sp.chaiken({ n: 2 + n, looped: true })\\n p.lineWidth = 0.005\\n p.setStrokeColor(190 + x * 100, 90, 40 + y * 10, 0.75 * ((n + 3) / 5))\\n p.draw(sp)\\n })\\n })\\n}\\n\\n","Around a Circle":"const circle = (p: SCanvas) => {\\n p.times(10, (n) => {\\n p.setStrokeColor(0, 0, n + 10, (0.75 * (n + 1)) / 10)\\n const points = p.build(p.aroundCircle, { n: 20 }, (at) => p.perturb({ at }))\\n const sp = SimplePath.withPoints(points)\\n .close()\\n .chaiken({ n: n + 1, looped: true })\\n p.draw(sp)\\n })\\n}\\n\\n","Arcs":"const arcs = (p: SCanvas) => {\\n const { bottom, right } = p.meta\\n\\n const cX = right / 2\\n const cY = bottom / 2\\n\\n p.times(19, (n) => {\\n p.setFillColor(n * 2.5, 90, 50, 0.5)\\n p.fill(\\n new Arc({\\n at: [cX, cY],\\n r: (0.3 * Math.sqrt(n + 1)) / 3,\\n a: (n * Math.PI) / 10,\\n a2: ((n + 2) * Math.PI) / 10,\\n })\\n )\\n })\\n}\\n\\n","Noise":"const noise = (p: SCanvas) => {\\n p.forTiling({ n: 12, margin: 0.1 }, ([x, y], [dX, dY]) => {\\n const v = perlin2(x, y) * Math.PI * 2\\n p.setFillColor(p.t * 10 + 120 + v * 20, 80, 40)\\n p.fill(\\n new Arc({\\n at: [x + dX / 2, y + dY / 2],\\n r: dX / 2,\\n a: p.t + v,\\n a2: p.t + v + Math.PI / 2,\\n })\\n )\\n })\\n}\\n\\n","Rectangles Divided":"const rectanglesDivided = (p: SCanvas) => {\\n p.lineWidth = 0.005\\n const { right, bottom } = p.meta\\n\\n new Rect({ at: [0.1, 0.1], w: right - 0.2, h: bottom - 0.2 })\\n .split({ orientation: \\"vertical\\", split: [1, 1.5, 2, 2.5] })\\n .forEach((r, i) => {\\n p.setFillGradient(\\n new LinearGradient({\\n from: r.at,\\n to: [r.at[0], r.at[1] + r.h],\\n colors: [\\n [0, { h: i * 10, s: 90, l: 60 }],\\n [1, { h: i * 10, s: 60, l: 40 }],\\n ],\\n })\\n )\\n p.fill(r)\\n p.draw(r)\\n })\\n}\\n\\n","Hello World":"const helloWorld = (p: SCanvas) => {\\n const { bottom, aspectRatio } = p.meta\\n p.range(\\n {\\n from: 0.1,\\n to: bottom - 0.1,\\n n: 10,\\n },\\n (n) => {\\n p.setStrokeColor(n * aspectRatio * 50, 20, 20, 0.75)\\
1n for (let align of [\\"right\\", \\"center\\", \\"left\\"] as const) {\\n p.drawText(\\n {\\n at: [n * aspectRatio, n],\\n size: 0.2,\\n align,\\n weight: \\"600\\",\\n },\\n \\"Hello\\"\\n )\\n }\\n p.setFillColor(n * aspectRatio * 50, 80, 50, 0.9)\\n\\n p.fillText(\\n {\\n at: [n * aspectRatio, n],\\n size: 0.2,\\n align: \\"center\\",\\n weight: \\"600\\",\\n },\\n \\"Hello\\"\\n )\\n }\\n )\\n}\\n\\n","Circle Labels":"const circleText = (p: SCanvas) => {\\n p.aroundCircle({ r: 0.25, n: 12 }, ([x, y], i) => {\\n p.times(5, (n) => {\\n p.setFillColor(i * 5 + n, 75, 35, 0.2 * n)\\n p.fillText(\\n {\\n at: p.perturb({ at: [x, y] }),\\n size: 0.05,\\n align: \\"left\\",\\n },\\n (i + 1).toString()\\n )\\n })\\n })\\n}\\n\\n","Circles":"const circles = (p: SCanvas) => {\\n p.background(120, 5, 95)\\n p.forTiling({ n: 10, type: \\"square\\", margin: 0.1 }, (pt, delta) => {\\n p.setFillColor(pt[0] * 100, 80, 50)\\n const r = Math.sqrt(1.2 * pt[0] * pt[1])\\n p.fill(\\n new Ellipse({\\n at: add(pt, scale(delta, 0.5)),\\n align: \\"center\\",\\n w: delta[1] * r,\\n h: delta[1] * r,\\n })\\n )\\n })\\n}\\n\\n","Ellipses Demo":"const ellipses = (p: SCanvas) => {\\n p.background(0, 0, 100)\\n p.withRandomOrder(\\n p.forTiling,\\n { n: 15, type: \\"square\\", margin: 0.1 },\\n (pt, delta) => {\\n const [x, y] = pt\\n p.setFillColor(150 + perlin2(x * 10, 1) * 50, 80, 50, 0.9)\\n p.setStrokeColor(150, 40, 100)\\n p.lineWidth = 0.005\\n const r = Math.sqrt(\\n 1.8 * (0.1 + Math.abs(x - 0.5)) * (0.1 + Math.abs(y - 0.5))\\n )\\n const e = new Ellipse({\\n at: add(pt, scale(delta, 0.5)),\\n align: \\"center\\",\\n w: delta[1] * r * 3,\\n h: delta[1] * 1.2,\\n })\\n p.fill(e)\\n p.draw(e)\\n }\\n )\\n}\\n\\n","Gradient Demo 1":"const gradients1 = (p: SCanvas) => {\\n const { right, bottom } = p.meta\\n p.setFillGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [right, bottom],\\n colors: [\\n [0, { h: 210 + p.t * 100, s: 80, l: 60 }],\\n [0.5, { h: 250 + p.t * 100, s: 80, l: 60 }],\\n [1.0, { h: 280 + p.t * 100, s: 80, l: 60 }],\\n ],\\n })\\n )\\n p.fill(new Rect({ at: [0, 0], w: right, h: bottom }))\\n}\\n\\n","Gradient Demo 2":"const gradients2 = (p: SCanvas) => {\\n const { right, bottom, center } = p.meta\\n\\n p.setFillGradient(\\n new RadialGradient({\\n start: center,\\n end: [right, bottom],\\n rStart: 0.0,\\n rEnd: 2 * Math.max(bottom, right),\\n colors: [\\n [0, { h: 0 + p.t * 40, s: 80, l: 60 }],\\n [0.7, { h: 50 + p.t * 20, s: 90, l: 60 }],\\n [1.0, { h: 1000 + p.t * 20, s: 80, l: 60 }],\\n ],\\n })\\n )\\n p.fill(new Rect({ at: [0, 0], w: right, h: bottom }))\\n}\\n\\n","Gradient Demo 3":"const gradients3 = (p: SCanvas) => {\\n const { right, bottom, center } = p.meta\\n p.setFillGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [0, bottom],\\n colors: [\\n [0, { h: 215, s: 80, l: 60 }],\\n [0.5, { h: 215, s: 80, l: 60 }],\\n [0.55, { h: 240, s: 80, l: 60 }],\\n [1.0, { h: 240, s: 80, l: 60 }],\\n ],\\n })\\n )\\n p.fill(new Rect({ at: [0, 0], w: right, h: bottom }))\\n\\n p.setFillGradient(\\n new RadialGradient({\\n start: center,\\n end: center,\\n rStart: 0.0,\\n rEnd: 2 * bottom,\\n colors: [\\n [0, { h: 0, s: 80, l: 60 }],\\n [0.02, { h: 0, s: 80, l: 60 }],\\n [0.1, { h: 0, s: 80, l: 60, a: 0.3 }],\\n [0.15, { h: 0, s: 80, l: 60, a: 0.05 }],\\n [1.0, { h: 0, s: 80, l: 60, a: 0.03 }],\\n ],\\n })\\n )\\n p.fill(new Rect({ at: [0, 0], w: right, h: bottom }))\\n}\\n\\n","Gradient Demo 4":"const gradients4 = (p: SCanvas) => {\\n const { right, bottom }
1 = p.meta\\n const corners: Point2D[] = [\\n [0, 0],\\n [right, 0],\\n [right, bottom],\\n [0, bottom],\\n ]\\n const hues = [10, 215, 50, 190]\\n\\n p.background(0, 0, 5)\\n for (let i = 0; i < 4; i++) {\\n const from = corners[i]\\n const to = corners[(i + 2) % 4]\\n\\n p.setFillGradient(\\n new LinearGradient({\\n from,\\n to,\\n colors: [\\n [0, { h: hues[i], s: 90, l: 90, a: 0.01 }],\\n [0.4, { h: hues[i], s: 90, l: 90, a: 0.1 }],\\n [0.5, { h: hues[i], s: 90, l: 90, a: 0.9 }],\\n [0.5, { h: hues[i], s: 90, l: 90, a: 0.1 }],\\n [1, { h: hues[i], s: 90, l: 90, a: 0.01 }],\\n ],\\n })\\n )\\n p.fill(new Rect({ at: [0, 0], w: right, h: bottom }))\\n }\\n}\\n\\n","Gradient Demo 5":"const gradients5 = (p: SCanvas) => {\\n const { right, bottom } = p.meta\\n const corners: Point2D[] = [\\n [0, 0],\\n [right, 0],\\n [right, bottom],\\n [0, bottom],\\n ]\\n const hues = [10, 215, 50, 190]\\n\\n p.background(0, 0, 5)\\n p.forHorizontal({ n: 30 }, (from, [dX, _]) => {\\n const to = add(from, [dX * p.poisson(3), 0])\\n const l = 60\\n p.setFillGradient(\\n new LinearGradient({\\n from,\\n to,\\n colors: [\\n [0, { h: 40, s: 90, l, a: 0.0 }],\\n [0, { h: 40, s: 90, l, a: 0.7 }],\\n [1, { h: 0, s: 80, l, a: 0.01 }],\\n [1, { h: 0, s: 90, l, a: 0.0 }],\\n ],\\n })\\n )\\n p.fill(new Rect({ at: [0, 0], w: right, h: bottom }))\\n })\\n}\\n\\n","Gradient Demo 6":"const sunsetThroughBlinds = (p: SCanvas) => {\\n const { right, bottom, center } = p.meta\\n\\n p.setFillGradient(\\n new RadialGradient({\\n start: add(center, [0, 0.2]),\\n end: add(center, [0, 0.4]),\\n rStart: 0.0,\\n rEnd: 2 * bottom * right,\\n colors: [\\n [0, { h: 0, s: 80, l: 60 }],\\n [0.6, { h: 215, s: 80, l: 60 }],\\n [1.0, { h: 230, s: 80, l: 60 }],\\n ],\\n })\\n )\\n p.fill(new Rect({ at: [0, 0], w: right, h: bottom }))\\n\\n p.forVertical({ n: 15 }, (pt, [w, h]) => {\\n p.setFillGradient(\\n new LinearGradient({\\n from: pt,\\n to: add(pt, [0, h]),\\n colors: [\\n [0, { h: 40, s: 40, l: 90, a: 0.9 }],\\n [0.5, { h: 40, s: 40, l: 50, a: 0.8 }],\\n [0.55, { h: 40, s: 40, l: 50, a: 0.1 }],\\n [1, { h: 40, s: 40, l: 90, a: 0.1 }],\\n ],\\n })\\n )\\n p.fill(new Rect({ at: pt, w, h }))\\n })\\n}\\n\\n","Transforms Demo":"const transforms = (p: SCanvas) => {\\n p.forTiling({ n: 8, type: \\"square\\", margin: 0.1 }, ([x, y], [dX, dY]) => {\\n p.setFillColor(120 + x * 100, 90, 50)\\n p.withTranslation([x + dX / 2, y + dY / 2], () =>\\n p.withRotation(x + y + p.t, () => {\\n p.fill(new Rect({ at: [-dX / 4, -dY / 4], w: dX / 2, h: dY / 2 }))\\n })\\n )\\n })\\n}\\n\\n","Transforms Demo 3":"const transforms3 = (p: SCanvas) => {\\n const { bottom: h } = p.meta\\n const a = Math.sin(p.t)\\n p.forHorizontal({ n: 20, margin: 0.3 }, ([x, y], [dX, dY]) => {\\n p.range({ from: 0, to: 2 * Math.PI, n: 12 }, (n) =>\\n p.withTranslation([x + dX / 2, (h * n) / 6 + dY / 6], () => {\\n p.withRotation(x - n + a, () => {\\n p.setFillColor(360 - n * 20, 90, 30, 0.5)\\n p.fill(new Rect({ at: [-dX / 2, -dY / 2], w: dX / 4, h: 2 * dY }))\\n })\\n })\\n )\\n })\\n}\\n\\n","Clipping Demo":"const clipping = (p: SCanvas) => {\\n const { center, bottom, right } = p.meta\\n const size = Math.min(bottom, right) * 0.8\\n p.background(120 + p.t * 50, 40, 90)\\n p.lineWidth = 0.005\\n p.range({ from: 1, to: 4, n: 4 }, (n) =>\\n p.withTranslation([0.037 * n * n, bottom * 0.037 * n * n], () =>\\n p.withScale([0.1 * n, 0.1 * n], () =>\\n p.withClipping(new Ellipse({ at: center, w: size, h: size }), () =>\\n p.forTiling(\\n { n: 60 / (8 - n), type: \\"square\\" },\\n ([x, y], [dX, dY]) => {\\n p.setStrokeColor(120 + x * 120 + p.t * 50, 90 - 20 * y, 40)\\n p.proportionately([\\n [1, () => p.draw(new Line([x, y], [x + dX, y + dY]))],\\n [2, () => p.draw(new Line([x + dX, y], [x, y + dY]))],\\n [1, () => p.draw(new Line([x, y], [x, y + dY]))],\\n ])\\n }\\n )\\n )\\n )\\n )\\n )\\n}\\n\\n","Rounded Rectangles Demo":"const roundedRects = (p: SCanvas) => {\\n p.forTiling(\\n { n: 5, type: \\"proportionate\\", margin: 0.1 },\\n ([x, y], [dX, dY]) => {\\n p.setFillColor(p.t * 50 + 150 + x * 100, y * 40 + 60, 40)\\n p.fill(\\n new RoundedRect({\\n at: [x + dX / 6, y + dY / 6],\\n w: (dX * 2) / 3,\\n h: (dY * 2) / 3,\\n r: dX / 8,\\n })\\n )\\n }\\n )\\n}\\n\\n","Cards":"const cards = (p: SCanvas) => {\\n p.forTiling({ n: 6, type: \\"square\\", margin: 0.05 }, ([x, y], [dX, dY]) => {\\n p.withClipping(\\n new RoundedRect({\\n at: [x + dX / 6, y + dX / 4],\\n w: (dX * 2) / 3,\\n h: dY / 2,\\n r: dX / 12,\\n }),\\n () => {\\n p.setFillColor(175 + x * 60 + y * 100, y * 40 + 60, 40)\\n p.fill(\\n new Rect({\\n at: [x + dX / 6, y + dX / 4],\\n w: (dX * 2) / 3,\\n h: dY / 2,\\n })\\n )\\n\\n p.setFillColor(0, 0, 100, 0.4)\\n p.times(5, () =>\\n p.fill(\\n new Ellipse({\\n at: p.perturb({ at: [x + dX / 2, y + dY / 2] }),\\n w: dX / 2,\\n h: dX / 2,\\n })\\n )\\n )\\n }\\n )\\n })\\n}\\n\\n","Polygons":"const polygons = (p: SCanvas) => {\\n p.background(330, 70, 30)\\n let n = 3\\n p.forTiling({ n: 4, type: \\"square\\", margin: 0.1 }, ([x, y], [dX, dY]) => {\\n p.setFillColor(180 + 40 * x, 50 + 50 * y, 60)\\n p.fill(\\n new RegularPolygon({\\n at: [x + dX / 2, y + dY / 2],\\n n,\\n r: dX / 2.1,\\n a: p.t,\\n })\\n )\\n n++\\n })\\n}\\n\\n","Polygons 3":"const polygons3 = (p: SCanvas) => {\\n p.background(210, 70, 90)\\n p.forHorizontal({ n: 4, margin: 0.1 }, (_pt, [dX], c, i) =>
1 {\\n p.setFillColor([215, 225, 235, 245][i], 90, 30)\\n p.fill(\\n new RegularPolygon({\\n at: c,\\n n: 6,\\n r: dX / 2,\\n a: (i * Math.PI) / 6 + p.t * (i % 2 === 0 ? 1 : -1),\\n })\\n )\\n })\\n}\\n\\n","Stars":"const stars = (p: SCanvas) => {\\n let n = 3\\n p.background(30, 20, 80)\\n p.forTiling({ n: 4, type: \\"square\\", margin: 0.1 }, ([x, y], [dX, dY]) => {\\n p.setFillColor(20 + 30 * x, 25 + 75 * y, 45 + 5 * (1 + Math.sin(p.t + x)))\\n p.fill(\\n new Star({\\n at: [x + dX / 2, y + dY / 2],\\n n,\\n r: (dX * (2.2 + Math.cos(x + y + p.t))) / 6.1,\\n a: p.t,\\n })\\n )\\n n++\\n })\\n}\\n\\n","Hatching Demo 1":"const hatching = (p: SCanvas) => {\\n p.lineWidth = 0.001\\n p.range({ from: 1, to: 0.2, n: 4, inclusive: true }, (n) => {\\n p.setStrokeColor(215 - n * 75, 90, 10 + n * 30)\\n const s = (1.5 + Math.cos(p.t)) / 2\\n p.draw(\\n new Hatching({\\n at: p.meta.center,\\n r: n * s,\\n delta: 0.01,\\n a: (n * 16) / Math.PI,\\n })\\n )\\n })\\n}\\n\\n","Even More Arcs":"const evenMoreArcs = (p: SCanvas) => {\\n p.background(30, 50, 90)\\n p.times(24, () => {\\n const a = p.random() * Math.PI * 2\\n const r = p.sample([0.2, 0.25, 0.3, 0.35, 0.4])\\n p.setFillColor(p.sample([20, 30, 35, 40]), 90, 60, 0.8)\\n p.fill(\\n new HollowArc({\\n at: p.meta.center,\\n a,\\n a2: a + p.gaussian({ mean: 0.5, sd: 0.2 }),\\n r,\\n r2: r - 0.1,\\n })\\n )\\n })\\n\\n p.times(48, () => {\\n const a = p.random() * Math.PI * 2\\n const r = p.sample([0.325, 0.375, 0.425])\\n p.setFillColor(p.sample([20, 30, 35, 40]), 80, 30, 0.95)\\n p.fill(\\n new HollowArc({\\n at: p.meta.center,\\n a,\\n a2: a + Math.PI / 96,\\n r,\\n r2: r - 0.3,\\n })\\n )\\n })\\n}\\n\\n","Curls":"const curls = (p: SCanvas) => {\\n const baseColor = p.uniformRandomInt({ from: 150, to: 250 })\\n p.background(baseColor, 20, 90)\\n p.lineStyle = {\\n cap: \\"round\\",\\n }\\n p.setFillColor(baseColor, 60, 30)\\n p.setStrokeColor(baseColor - 40, 80, 35, 0.9)\\n p.times(p.uniformRandomInt({ from: 20, to: 100 }), () => {\\n const c = p.randomPoint()\\n let tail = p.perturb({ at: c, magnitude: 0.2 })\\n while (distance(c, tail) < 0.1) {\\n tail = p.perturb({ at: c, magnitude: 0.2 })\\n }\\n p.fill(\\n new Circle({\\n at: c,\\n r: 0.015,\\n })\\n )\\n p.fill(\\n new Circle({\\n at: tail,\\n r: 0.015,\\n })\\n )\\n p.draw(\\n Path.startAt(c).addCurveTo(tail, {\\n curveSize: p.gaussian({\\n mean: 2,\\n sd: 1,\\n }),\\n })\\n )\\n })\\n}\\n\\n","Color Palette Generator":"const colorPaletteGenerator = (p: SCanvas) => {\\n const baseColor = p.uniformRandomInt({ from: 0, to: 360 })\\n\\n p.proportionately([\\n [1, () => p.background(0, 0, 10)],\\n [1, () => p.background(0, 0, 90)],\\n ])\\n\\n const colors = [\\n baseColor + 90,\\n baseColor + 45,\\n baseColor,\\n baseColor - 45,\\n baseColor - 90,\\n baseColor + 180,\\n ]\\n\\n p.forVertical({ n: 6, margin: 0.1 }, ([x, y], [dX, dY], _c, i) => {\\n const c = colors[i]\\n p.range({ from: x, to: x + dX, n: 6, inclusive: false }, (xV) => {\\n p.setFillColor(c, 80, 10 + xV * 70)\\n p.fill(\\n new Rect({\\n at: [xV + 0.01, y + 0.01],\\n w: (dX - 0.02 * 6) / 6,\\n h: dY - 0.02,\\n })\\n )\\n })\\n })\\n}\\n\\n","Stack Polygons":"const stackPolys = (p: SCanvas) => {\\n p.background(320, 10, 90)\\n p.lineWidth = 0.0025\\n const v = p.uniformRandomInt({ from: 5, to: 8 })\\n const m = p.uniformRandomInt({ from: 30, to: 80 })\\n\\n p.times(m, (n) => {\\n p.setStrokeColor(p.uniformRandomInt({ from: 320, to: 360 }), 80, 50)\\n p.draw(\\n new RegularPolygon({\\n at: p.meta.center,\\n n: v,\\n r: clamp(\\n { from: 0, to: 0.45 * Math.min(p.meta.bottom, p.meta.right) },\\n (n / m) * 0.35 + p.gaussian({ sd: 0.1 })\\n ),\\n })\\n )\\n })\\n}\\n\\n","Another Tiling":"const anotherTiling = (p: SCanvas) => {\\n p.background(240, 20, 90)\\n p.forTiling({ n: 25, margin: 0.1, type: \\"square\\" }, (at, [dX, dY]) => {\\n p.withTranslation(add(at, scale([dX, dY], 0.5)), () =>\\n p.withRotation(p.sample([0, Math.PI / 2, Math.PI]), () => {\\n p.setFillColor(p.sample([160, 175, 220]), 80, 40)\\n p.fill(\\n SimplePath.withPoints([\\n [-dX / 2, -dY / 2],\\n [dX / 2, -dY / 2],\\n [-dX / 2, dY / 2],\\n ]).close()\\n )\\n })\\n )\\n })\\n}\\n\\n","Shading In":"const shading = (p: SCanvas) => {\\n const delta = 0.005\\n p.background(50, 80, 85)\\n p.lineWidth = 0.0005\\n p.forTiling({ n: 8, type: \\"square\\", margin: 0.1 }, (at, [dX], c, i) => {\\n p.withClipping(\\n new Rect({ at: add(at, [dX / 10, dX / 10]), w: dX * 0.8, h: dX * 0.8 }),\\n () => {\\n p.draw(new Hatching({ at: c, r: dX, a: 0, delta }))\\n p.draw(new Hatching({ at: c, r: dX, a: (Math.PI * i) / 64, delta }))\\n }\\n )\\n })\\n}\\n\\n","Shading Again":"const shading2 = (p: SCanvas) => {\\n const delta = 0.005\\n p.background(0, 80, 85)\\n p.lineWidth = 0.001\\n p.forTiling({ n: 12, margin: 0.1, type: \\"square\\" }, (at, [dX, dY], c, i) => {\\n p.withClipping(new Rect({ at, w: dX, h: dY }), () => {\\n p.setStrokeColor(220, 90 - i / 4, 20)\\n p.draw(\\n new Hatching({\\n at: c,\\n r: Math.max(dY, dX),\\n a: (i * Math.PI) / 16,\\n delta: (delta * p.sample([3, 5])) / Math.sqrt(12 + i),\\n })\\n )\\n })\\n })\\n}\\n\\n","Shaded Arcs":"const shadingArcs = (p: SCanvas) => {\\n const { center } = p.meta\\n p.backgroundGradient(\\n new RadialGradient({\\n start: center,\\n end: center,\\n rStart: 0,\\n rEnd: 1,\\n colors: [\\n [0, { h: 50, s: 0, l: 40 }],\\n [1, { h: 50, s: 0, l: 0 }],\\n ],\\n })\\n )\\n p.lineWidth = 0.005\\n p.times(20, () => {\\n p.setStrokeColor(p.sample([20, 40, 50]), 30, 80, 0.85)\\n const a = p.random() * Math.PI * 2\\n const r = p.random() * 0.4 + 0.2\\n const dR = p.random() * 0.1 + 0.1\\n p.withClipping(\\n new HollowArc({\\n at: p.meta.center,\\n r,\\n r2: r - dR,\\n a,\\n a2: a + p.random() * 0.2 + Math.PI / 4,\\n }),\\n () => {\\n p.draw(new Hatching({ at: p.meta.center, r: 1, a, delta: 0.01 }))\\n }\\n )\\n })\\n}\\n\\n","Arc Chart":"const arcChart = (p: SCanvas) => {\\n p.background(30, 30, 20)\\n const { center: at } = p.meta\\n p.range({ from: 0, to: Math.PI * 2, inclusive: false, n: 32 }, (n) => {\\n p.setFillColor((180 * n) / Math.PI, 100, 60)\\n p.fill(\\n new HollowArc({\\n at,\\n a: n,\\n a2: n + Math.PI / 32,\\n r: 0.1 + p.poisson(4) * 0.04 + Math.cos(p.t + n
1) * 0.025,\\n r2: 0.05,\\n })\\n )\\n })\\n}\\n\\n","Bars":"const bars = (p: SCanvas) => {\\n p.background(150, 30, 20)\\n p.forHorizontal({ n: 32, margin: 0.1 }, (at, [dX, dY]) => {\\n const v = (dY * (1 + perlin2(at[0] + p.t, at[1]))) / 2\\n p.setFillColor(p.sample([190, 170]), 40 + v * 40, 80)\\n p.fill(\\n new Rect({\\n at: [at[0] + dX / 10, at[1] + (dY - v) / 2],\\n h: v,\\n w: dX * 0.8,\\n })\\n )\\n })\\n}\\n\\n","Discs":"const scaled = (p: SCanvas) => {\\n p.withTranslation(add([0, 0.1], p.meta.center), () => {\\n p.times(16, (n) => {\\n p.withRotation((Math.PI * n) / 8, () => {\\n p.withScale([1, 1 - 0.05 * n], () => {\\n p.withTranslation([n * 0.02, 0], () => {\\n p.setFillColor(90, 80, 40 + 3 * n, 0.75)\\n const c = new Circle({ at: [0, 0], r: p.meta.bottom / 5 })\\n p.fill(c)\\n p.draw(c)\\n })\\n })\\n })\\n })\\n })\\n}\\n\\n","Colour Themes":"const colourThemes = (p: SCanvas) => {\\n p.background(0, 10, 80)\\n const g = simpleLinearGradient(\\n { h: 10, s: 90, l: 50, a: 1 },\\n { h: 50, s: 70, l: 60, a: 1 },\\n 100\\n )\\n const g2 = simpleLinearGradient(\\n { h: 210, s: 90, l: 50, a: 0.6 },\\n { h: 350, s: 70, l: 60, a: 0.7 },\\n 100\\n )\\n p.forTiling(\\n { n: 10, type: \\"square\\", margin: 0.05, order: \\"rowFirst\\" },\\n (_p, [dX], c, i) => {\\n p.setFillColorFromSpec(g(i))\\n p.fill(new Square({ at: c, align: \\"center\\", s: dX / 2 }))\\n\\n p.setFillColorFromSpec(g2(i))\\n p.fill(\\n new Square({\\n at: v.add(c, [(i * dX) / 500, (-i * dX) / 500]),\\n align: \\"center\\",\\n s: dX / 2,\\n })\\n )\\n }\\n )\\n}\\n\\n","Colour Themes 2":"const colourThemes2 = (p: SCanvas) => {\\n const N = 70\\n p.background(0, 0, 20)\\n p.times(N, () => {\\n const s = p.uniformRandomInt({ from: 0, to: 100 })\\n const delta = p.gaussian({ sd: 0.1 })\\n const delta2 = p.gaussian({ sd: 0.1 })\\n\\n const g1 = hueRange({ h1: 0, h2: 360, s, l: 50, a: 0.7, steps: 12 })\\n p.forHorizontal({ n: 12 }, (pt, [dX, dY], c, i) => {\\n p.setFillColorFromSpec(g1(i))\\n p.fill(\\n new Square({\\n at: v.add(c, [delta, delta2]),\\n align: \\"center\\",\\n s: dX / 3,\\n })\\n )\\n })\\n })\\n\\n const h = p.uniformRandomInt({ from: 0, to: 100 })\\n p.times(N, () => {\\n const l = p.uniformRandomInt({ from: 0, to: 100 })\\n const delta = p.gaussian({ sd: 0.1 })\\n const delta2 = p.gaussian({ sd: 0.1 })\\n const g2 = saturationRange({\\n h,\\n s1: 30,\\n s2: 100,\\n l,\\n a: 0.6,\\n steps: 12,\\n })\\n p.forHorizontal({ n: 12 }, (pt, [dX, dY], c, i) => {\\n p.setFillColorFromSpec(g2(i))\\n p.fill(\\n new Square({\\n at: v.subtract(c, [delta, delta2 + dY / 4]),\\n align: \\"center\\",\\n s: dX / 3,\\n })\\n )\\n })\\n })\\n\\n p.times(N, () => {\\n const h = p.uniformRandomInt({ from: 0, to: 360 })\\n const delta = p.gaussian({ sd: 0.1 })\\n const delta2 = p.gaussian({ sd: 0.1 })\\n const g3 = lightnessRange({\\n h,\\n l1: 30,\\n l2: 100,\\n s: 100,\\n a: 0.7,\\n steps: 12,\\n })\\n p.forHorizontal({ n: 12 }, (pt, [dX, dY], c, i) => {\\n p.setFillColorFromSpec(g3(i))\\n p.fill(\\n new Square({\\n at: v.add(c, [delta, delta2 + dY / 4]),\\n align: \\"center\\",\\n s: dX / 3,\\n })\\n )\\n })\\n })\\n}\\n\\n","Colour Themes 3":"const colourThemes3 = (p: SCanvas) => {\\n const hr = hueRange({\\n h1: 215,\\n h2: 360,\\n s: 80,\\n l: 50,\\n a: 1,\\n steps: 10,\\n })\\n p.background(25, 60, 15)\\n p.forTiling({ n: 20, type: \\"square\\", margin: 0.1 }, (pt, [dX], at) => {\\n p.setFillColorFromSpec(hr(p.uniformRandomInt({ from: 0, to: 10 })))\\n p.fill(new Square({ at, align: \\"center\\", s: dX * 0.8 }))\\n })\\n}\\n\\n","Colour Themes 4":"const colourThemes4 = (p: SCanvas) => {\\n p.backgroundFromSpec({ h: 215, s: 50, l: 90 })\\n\\n const hr = hueRange({\\n h1: 160,\\n h2: 240,\\n s: 80,\\n l: 30,\\n a: 0.8,\\n steps: 20,\\n })\\n\\n const {\\n bottom: b,\\n right: r,\\n center: [cX, cY],\\n }
1 = p.meta\\n const u: Point2D = [cX - r / 3.5, cY - b / 3.5]\\n const v: Point2D = [cX + r / 3.5, cY + b / 3.5]\\n\\n p.range({ from: -10, to: 10, n: 21 }, (n) => {\\n p.setStrokeColorFromSpec(hr(n))\\n p.draw(\\n Path.startAt(u).addCurveTo(v, {\\n curveSize: n / 10,\\n curveAngle: p.gaussian(),\\n bulbousness: 1 + Math.cos(p.t / 2 + n),\\n })\\n )\\n })\\n}\\n\\n","Colour Palettes":"const colourPalettes = (p: SCanvas) => {\\n p.background(30, 20, 90)\\n\\n // Generate palettes from a preset name and number of colours:\\n const cs1 = palettePreset(\\"rusty\\", 12)\\n const cs2 = palettePreset(\\"autumnal\\", 12)\\n const cs3 = palettePreset(\\"rainbow\\", 12)\\n const cs4 = palettePreset(\\"warmth\\", 12)\\n\\n p.forHorizontal({ n: 12, margin: 0.1 }, (pt, [dX, dY], c, i) => {\\n const [h, s, l] = cs1[i]\\n p.setFillColor(h, s, l, 0.9)\\n p.fill(\\n new Rect({ at: p.perturb({ at: pt, magnitude: 0.05 }), w: dX, h: dY / 4 })\\n )\\n\\n const [h2, s2, l2] = cs2[i]\\n p.setFillColor(h2, s2, l2, 0.9)\\n p.fill(\\n new Rect({\\n at: p.perturb({ at: add(pt, [0, dY / 4]), magnitude: 0.05 }),\\n w: dX,\\n h: dY / 4,\\n })\\n )\\n\\n const [h3, s3, l3] = cs3[i]\\n p.setFillColor(h3, s3, l3, 0.9)\\n p.fill(\\n new Rect({\\n at: p.perturb({ at: add(pt, [0, dY / 2]), magnitude: 0.05 }),\\n w: dX,\\n h: dY / 4,\\n })\\n )\\n\\n const [h4, s4, l4] = cs4[i]\\n p.setFillColor(h4, s4, l4, 0.9)\\n p.fill(\\n new Rect({\\n at: p.perturb({ at: add(pt, [0, (dY * 3) / 4]), magnitude: 0.05 }),\\n w: dX,\\n h: dY / 4,\\n })\\n )\\n })\\n}\\n\\n"},"highlights.ts":{"Tiling":"const tiling = (p: SCanvas) => {\\n p.forTiling({ n: 20, margin: 0.1, type: \\"square\\" }, ([x, y], [dX, dY]) => {\\n p.setStrokeColor(120 + x * 120 + p.t * 50, 90 - 20 * y, 40)\\n p.proportionately([\\n [1, () => p.draw(new Line([x, y], [x + dX, y + dY]))],\\n [2, () => p.draw(new Line([x + dX, y], [x, y + dY]))],\\n ])\\n })\\n}\\n\\n","Chaiken":"const chaiken = (p: SCanvas) => {\\n const { right, bottom } = p.meta\\n\\n const midX = right / 2\\n const midY = bottom / 2\\n const ir = midX / 4\\n const da = Math.PI / 10\\n\\n p.times(30, (n) => {\\n let points: Point2D[] = []\\n for (let a = 0; a < Math.PI * 2; a += da) {\\n const rr = 2 * p.random() + 1\\n points.push([\\n midX + ir * rr * Math.cos(a + da),\\n midY + ir * rr * Math.sin(a + da),\\n ])\\n }\\n const sp = SimplePath.startAt(points[0])\\n points.slice(1).forEach((p) => sp.addPoint(p))\\n sp.close()\\n sp.chaiken({ n: 4, looped: true })\\n p.lineWidth = 0.005\\n p.setStrokeColor(190 + n, 90, 40, 0.75)\\n p.draw(sp)\\n })\\n}\\n\\n","Mondrianish":"const mondrian = (p: SCanvas) => {\\n const { right, bottom } = p.meta\\n\\n let rs = [new Rect({ at: [0.1, 0.1], w: right - 0.2, h: bottom - 0.2 })]\\n p.times(4, () => {\\n rs = rs.flatMap((r) => {\\n if (r.w > 0.1 && r.h > 0.1) {\\n return p.proportionately([\\n [0.6, () => [r]],\\n [\\n 1,\\n () =>\\n r.split({\\n orientation: \\"horizontal\\",\\n split: p.samples(3, [1, 2, 2.5, 3]),\\n }),\\n ],\\n [\\n 1,\\n () =>\\n r.split({\\n orientation: \\"vertical\\",\\n split: p.samples(3, [1, 1.2, 1.5, 2]),\\n }),\\n ],\\n ])\\n } else {\\n return [r]\\n }\\n })\\n })\\n\\n rs.map((r) => {\\n p.doProportion(0.3, () => {\\n p.setFillColor(p.sample([10, 60, 200]), 80, 50)\\n p.fill(r)\\n })\\n p.draw(r)\\n })\\n}\\n\\n","Script-ish":"const scriptLike = (p: SCanvas) => {\\n const { bottom, aspectRatio } = p.meta\\n\\n p.range({ from: 0.1, to: bottom - 0.1, n: 5 }, (m) => {\\n let points: Point2D[] = []\\n p.setStrokeColor(215, 40, 30 - 30 * m)\\n p.range({ from: 0.1, to: 0.9, n: 60 }, (n) => {\\n points.push([\\n n + perlin2(n * 45 + m * 67, 20) / 12,\\n m + perlin2(n * 100 + m * 100, 0.1) / (6 * aspectRatio),\\n ])\\n })\\n p.draw(SimplePath.withPoints(points).chaiken({ n: 4 }))\\n })\\n}\\n\\n","Doodles":"const doodles = (p: SCanvas) => {\\n p.forTiling({ n: 7, type: \\"square\\", margin: 0.1 }, ([x, y], [dX, dY]) => {\\n const center = add([x, y], scale([dX, dY], 0.5))\\n let path = Path.startAt(center)\\n p.setStrokeColor(100 * x + y * 33, 60 + 45 * y, 40)\\n p.lineWidth = 0.005\\n p.withRandomOrder(p.aroundCircle, { at: center, r: dX / 2.8, n: 7 }, (pt) =>\\n path.addCurveTo(pt)\\n )\\n path.addCurveTo(center)\\n p.draw(path)\\n })\\n}\\n\\n","Bubbles":"const circles2 = (p: SCanvas) => {\\n p.background(220, 30, 90)\\n p.withRandomOrder(\\n p.forTiling,\\n { n: 10, type: \\"square\\", margin: 0.1 },\\n (pt, delta) => {\\n p.setFillColor(150 + pt[0] * 50, 80, 50, 0.9)\\n p.setStrokeColor(150, 40, 20)\\n p.lineWidth = 0.005\\n const r = Math.sqrt(1.2 * pt[0] * pt[1]) * p.sample([0.7, 1.1, 1.3])\\n const e = new Circle({\\n at: add(pt, scale(delta, 0.5)),\\n align: \\"center\\",\\n r: delta[1] * r,\\n })\\n\\n p.fill(e)\\n p.draw(e)\\n }\\n )\\n}\\n\\n","Gaussian":"const randomness1 = (p: SCanvas) => {\\n const { bottom } = p.meta\\n p.forHorizontal(\\n {\\n n: 100,\\n margin: 0.1,\\n },\\n ([x, y], [dX, dY]) => {\\n p.setFillGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [0, bottom],\\n colors: [\\n [0, { h: 245, s: 80, l: 40 }],\\n [0.45, { h: 180, s: 80, l: 40 }],\\n [0.55, { h: 40, s: 80, l: 40 }],\\n [1, { h: 0, s: 80, l: 40 }],\\n ],\\n })\\n )\\n\\n const v = p.gaussian()\\n p.fill(\\n new Rect({\\n at: [x, y + dY / 2],\\n w: dX,\\n h: (dY * v) / 5,\\n })\\n )\\n }\\n )\\n}\\n\\n","Poisson":"const randomness2 = (p: SCanvas) => {\\n p.background(320, 10, 90)\\n p.forTiling({ n: 50, margin: 0.1 }, (pt, delta) => {\\n const v = p.poisson(4)\\n p.times(v, (n) => {\\n p.setFillColor(40 - n * 20, 80, 50, 1 / n)\\n p.fill(\\n new Ellipse({\\n at: add(pt, scale(delta, 0.5)),\\n w: (n * delta[0]) / 5,\\n h: (n * delta[0]) / 5,\\n })\\n )\\n })\\n })\\n}\\n\\n","Curves":"const curves = (p: SCanvas) => {\\n p.background(215, 30, 20)\\n p.forHorizontal({ n: 75 }, ([x, y], [dX, dY]) => {\\n const vPts = [0, 0, 0, 0].map((_) => p.poisson(5) + 2)\\n const total = sum(vPts)\\n let nVPts = vPts.map((p) => (dY * p) / total)\\n nVPts = [y - 0.1].concat(\\n [3, 2, 1, 0].map((i) => y + 1.2 * sum(nVPts.slice(i)))\\n )\\n const nHPts = nVPts.map((p) => x + dX * 12 * perlin2(10 + p * 60, x * 20))\\n const points = zip2(nHPts, nVPts)\\n const path = SimplePath.withPoints(points)\\n path.
1chaiken({ n: 4 })\\n p.setStrokeColor(p.uniformRandomInt({ from: -40, to: 60 }), 90, 60, 0.95)\\n p.draw(path)\\n })\\n}\\n\\n","Transforms Demo 2":"const transforms2 = (p: SCanvas) => {\\n p.background(0, 0, 0)\\n const baseSize = (1 + Math.sin(2 * p.t)) / 2\\n const { bottom: h } = p.meta\\n p.forTiling({ n: 32, type: \\"square\\" }, ([x, y], [dX, dY]) => {\\n p.setFillColor(320 - x * 100 + p.t * 10, 90, 50, 0.8)\\n p.withTranslation([x + dX / 2, y + dY / 2], () =>\\n p.withRotation(x + y + p.t * 2, () =>\\n p.withScale(\\n [\\n baseSize + 6 * Math.abs(0.5 - x),\\n baseSize + 12 * Math.abs(0.5 - y / h),\\n ],\\n () => {\\n p.fill(new Rect({ at: [-dX / 4, -dY / 4], w: dX / 2, h: dY / 2 }))\\n }\\n )\\n )\\n )\\n })\\n}\\n\\n","Time":"const time = (p: SCanvas) => {\\n p.background(50, 20, 90)\\n const times = 4\\n p.forHorizontal({ n: 20, margin: 0.1 }, ([x, y], [dX, dY]) => {\\n p.times(times, (n) => {\\n const h = dY * 0.5 * (1 + perlin2(x, 100 + n + p.t / 4))\\n p.setFillColor((n * 60) / times, 80, 60)\\n p.fill(\\n new Rect({\\n at: [x + (dX / times) * n, y + dY - h],\\n h,\\n w: dX / times,\\n })\\n )\\n })\\n })\\n}\\n\\n","Polygons 2":"const polygons2 = (p: SCanvas) => {\\n p.background(330, 70, 10)\\n p.times(5, (n) => {\\n const sides = 10 - n\\n const r = 0.4 - n * 0.05\\n p.setFillColor(330, 70, 10 + n * 12)\\n p.fill(\\n new RegularPolygon({\\n at: p.meta.center,\\n n: sides,\\n r,\\n })\\n )\\n })\\n}\\n\\n","Hatching Demo 2":"const hatching2 = (p: SCanvas) => {\\n p.background(0, 0, 10)\\n p.lineWidth = 0.005\\n const { center } = p.meta\\n const count = p.uniformRandomInt({ from: 5, to: 35 })\\n const points = p.build(p.times, count, (n) => {\\n return p.perturb({ at: center, magnitude: 0.1 * n })\\n })\\n points.forEach((pt) => {\\n p.setStrokeColor(15 + pt[0] * 50, 90, 40, 0.9)\\n const r = 0.1 + 0.15 * p.random()\\n p.withClipping(new Circle({ at: pt, r }), () =>\\n p.draw(\\n new Hatching({\\n at: pt,\\n r: 1,\\n delta: 0.01,\\n a: (pt[1] * Math.PI) / 12,\\n })\\n )\\n )\\n })\\n}\\n\\n","More Arcs":"const moreArcs = (p: SCanvas) => {\\n const s = p.meta.right / 4\\n p.times(100, () => {\\n const a = p.random() * 2 * Math.PI\\n const a2 = a + p.random()\\n p.setFillColor(a * 30, 90, 30, 0.2)\\n p.fill(\\n new HollowArc({\\n at: p.meta.center,\\n r: s + (p.random() * s) / 2,\\n r2: s - (p.random() * s) / 2,\\n a,\\n a2,\\n })\\n )\\n })\\n}\\n\\n","Color Wheel":"const colorWheel = (p: SCanvas) => {\\n const dA = Math.PI / 20\\n const dR = 0.05\\n for (let a = 0; a < Math.PI * 2; a += dA) {\\n for (let r = 0.1; r < 0.4; r += dR) {\\n p.doProportion(0.6, () => {\\n p.setFillColor((180 * a) / Math.PI, r * 220, 50)\\n p.fill(\\n new HollowArc({\\n at: p.meta.center,\\n r,\\n r2: r - dR,\\n a,\\n a2: a + dA,\\n })\\n )\\n })\\n }\\n }\\n}\\n\\n","Sunburst":"const sunburst = (p: SCanvas) => {\\n p.background(0, 0, 10)\\n\\n const nextLayer = (\\n layer: { start: number; end: number; depth: number }[]\\n ): { start: number; end: number; depth: number }[] => {\\n return layer\\n .flatMap(({ start, end, depth }) => {\\n const prop = 0.1 + 0.8 * p.random()\\n return p.proportionately([\\n [\\n 10,\\n () => [\\n { start, end: (end - start) * prop + start, depth: depth + 1 },\\n { start: (end - start) * prop + start, end, depth: depth + 1 },\\n ],\\n ],\\n [\\n depth,\\n () => [\\n { start, end: (end - start) * prop + start, depth: depth + 1 },\\n ],\\n ],\\n [\\n depth,\\n () => [\\n { start: (end - start) * prop + start, end, depth: depth + 1 },\\n ],\\n ],\\n ])\\n })\\n .filter((l) => l.end - l.start > 0.01)\\n }\\n\\n const layerZero: { start: number; end: number; depth: number }[] = [\\n {\\n start: 0,\\n end: Math.PI * 2,\\n depth: 1,\\n },\\n ]\\n\\n const layers: { start: number; end: number; depth: number }
1[][] = [layerZero]\\n const n = p.uniformRandomInt({ from: 5, to: 8 })\\n for (let i = 1; i < n; i++) {\\n layers.push(nextLayer(layers[i - 1]))\\n }\\n\\n const prop = (1.2 + Math.cos(p.t / 2)) / 2.2\\n layers.flat().forEach(({ start, end, depth }, i) => {\\n p.setFillColor(i, 90, 60)\\n p.fill(\\n new HollowArc({\\n at: p.meta.center,\\n r: (0.35 * (depth + 1)) / n - 0.005,\\n r2: (0.35 * depth) / n,\\n a: start * prop,\\n a2: end * prop,\\n })\\n )\\n })\\n}\\n\\n","Fancy Tiling":"const fancyTiling = (p: SCanvas) => {\\n const baseHue = p.uniformRandomInt({ from: 0, to: 360 })\\n\\n const generateTile = (): ((\\n x: number,\\n y: number,\\n dX: number,\\n dY: number\\n ) => void) => {\\n const color: [number, number, number] = [\\n p.uniformRandomInt({ from: baseHue, to: baseHue + 60 }),\\n p.uniformRandomInt({ from: 60, to: 90 }),\\n p.uniformRandomInt({ from: 30, to: 60 }),\\n ]\\n const lw = clamp(\\n { from: 0.005, to: 0.02 },\\n p.gaussian({ mean: 0.01, sd: 0.01 })\\n )\\n\\n return p.proportionately([\\n [\\n 1,\\n () => (x: number, y: number, dX: number, dY: number) => {\\n p.lineWidth = lw\\n p.setStrokeColor(...color)\\n p.draw(new Line([x, y], [x + dX, y + dY]))\\n },\\n ],\\n [\\n 1,\\n () => (x: number, y: number, dX: number, dY: number) => {\\n p.lineWidth = lw\\n p.setStrokeColor(...color)\\n p.draw(new Line([x + dX, y], [x, y + dY]))\\n },\\n ],\\n [\\n 1,\\n () => (x: number, y: number, dX: number, dY: number) => {\\n p.lineWidth = lw\\n p.setStrokeColor(...color)\\n p.draw(new Line([x, y], [x, y + dY]))\\n },\\n ],\\n [\\n 1,\\n () => (x: number, y: number, dX: number, dY: number) => {\\n p.lineWidth = lw\\n p.setStrokeColor(...color)\\n p.draw(new Line([x, y], [x + dX, y]))\\n },\\n ],\\n ])\\n }\\n\\n const rules = arrayOf(\\n p.uniformRandomInt({ from: 2, to: 5, inclusive: true }),\\n generateTile\\n )\\n\\n p.forTiling(\\n {\\n n: p.uniformRandomInt({ from: 15, to: 25 }),\\n margin: 0.1,\\n type: \\"square\\",\\n },\\n ([x, y], [dX, dY]) => {\\n p.proportionately(\\n rules.map((r) => [p.poisson(3) + 1, () => r(x, y, dX, dY)])\\n )\\n }\\n )\\n}\\n\\n","Sketching Curves":"const sketchingCurves = (p: SCanvas) => {\\n p.background(30, 30, 95)\\n p.lineWidth = 0.005\\n p.setStrokeColor(230, 90, 25, 0.6)\\n\\n const points = p.build(\\n p.forHorizontal,\\n { n: 40, margin: 0.05 },\\n (_pt, [dX, dY], [x, y]): Point2D => {\\n return [x, y + dY / 2.2 + 0.1 * perlin2(x * 4, 0)]\\n }\\n )\\n\\n let curve = SimplePath.withPoints(points).chaiken({ n: 2 })\\n for (let i = 1; i < 200; i += i / 4) {\\n p.draw(curve)\\n curve = curve\\n .moved([0, (-i * p.meta.bottom) / 1024])\\n .transformed((pt) => [\\n pt[0],\\n pt[1] + 0.017 * p.meta.bottom * perlin2(pt[0] * 4, pt[1] + p.t),\\n ])\\n }\\n}\\n\\n","Record Cover":"const recordCoverish = (p: SCanvas) => {\\n const baseHue = p.uniformRandomInt({ from: 0, to: 360 })\\n p.background(baseHue, 80, 10)\\n p.withClipping(\\n new Circle({\\n at: p.meta.center,\\n r: Math.min(p.meta.bottom, p.meta.right) / 2.8,\\n }),\\n () => {\\n p.forVertical({ n: 9 }, (at, [w, h], _c, i) => {\\n p.setFillColor(\\n baseHue + i * 10 + p.uniformRandomInt({ from: -5, to: 5 }),\\n 90,\\n 50,\\n 0.9\\n )\\n p.fill(new Rect({ at, w, h }))\\n })\\n }\\n )\\n p.times(20, () => {\\n const x = p.random()\\n p.setFillColor(baseHue, 80, 10)\\n p.fill(new Rect({ at: [x, 0], w: 0.01, h: p.meta.bottom }))\\n })\\n}\\n\\n","Record Cover 2":"const recordCoverish2 = (p: SCanvas) => {\\n const { bottom, right } = p.meta\\n const mainRect = new Rect({\\n at: [right / 10, bottom / 10],\\n w: right * 0.8,\\n h: bottom * 0.8,\\n })\\n\\n p.background(30, 10, 95)\\n p.setFillGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [0, bottom],\\n colors: [\\n [0, { h: 215, s: 80, l: 60 }],\\n [1, { h: 215, s: 80, l: 20 }],\\n ],\\n })\\n )\\n p.fill(mainRect)\\n\\n p.withClipping(mainRect, () => {\\n p.times(40, () => {\\n p.setFillColor(p.uniformRandomInt({ from: 180, to: 225 }), 80, 40, 0.3)\\n p.fill(\\n new Rect({\\n at: [0, p.gaussian({ mean: bottom * 0.6, sd: bottom * 0.15 })],\\n w: right,\\n h: bottom * 0.1,\\n })\\n )\\n })\\n p.lineWidth = 0.005\\n p.times(20, () => {\\n p.setStrokeColor(0, 0, 100, 0.2)\\n const y = p.gaussian({ mean: bottom * 0.8, sd: bottom * 0.1 }
1)\\n p.draw(new Line([0, y], [right, y]))\\n })\\n })\\n}\\n\\n","Paint Strokes":"const painting = (p: SCanvas) => {\\n p.backgroundGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [0, p.meta.bottom],\\n colors: [\\n [0, { h: 45, s: 30, l: 95 }],\\n [1, { h: 55, s: 30, l: 90 }],\\n ],\\n })\\n )\\n p.forVertical({ n: 100, margin: 0.15 }, ([x, y], [dX, dY]) => {\\n const h = p.gaussian({ mean: dY, sd: (1.5 * dY) / p.meta.bottom })\\n const curveSize = p.gaussian({ sd: 0.35 * p.meta.right })\\n const xOffset = p.gaussian({ sd: dX / 20 })\\n\\n const h1 = p.uniformRandomInt({ from: 180, to: 240 })\\n const h2 = p.uniformRandomInt({ from: 0, to: 40 })\\n\\n p.setFillGradient(\\n new LinearGradient({\\n from: [x + xOffset, y],\\n to: [x + dX + xOffset, y + dY],\\n colors: [\\n [0, { h: h1, s: 60, l: 65, a: 0 }],\\n [0.05, { h: h1, s: 60, l: 65, a: 0 }],\\n [0.1, { h: h1, s: 60, l: 65, a: 0.9 }],\\n [\\n 0.5,\\n {\\n h: p.gaussian({ mean: 10 }) + (h1 + h2) / 2,\\n s: 60,\\n l: 65,\\n a: 0.8,\\n },\\n ],\\n [0.9, { h: h2, s: 60, l: 65, a: 0.9 }],\\n [0.95, { h: h2, s: 60, l: 65, a: 0 }],\\n [1, { h: h2, s: 60, l: 65, a: 0 }],\\n ],\\n })\\n )\\n p.fill(\\n Path.startAt([x, y])\\n .addCurveTo([x + dX, y], { curveSize })\\n .addLineTo([x + dX, y + h])\\n .addCurveTo([x, y + h], { curveSize, polarlity: -1 })\\n .addLineTo([x, y])\\n )\\n })\\n}\\n\\n","Round Paint Strokes":"const painting2 = (p: SCanvas) => {\\n const bh = p.uniformRandomInt({ from: 0, to: 360 })\\n p.backgroundGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [0, p.meta.bottom],\\n colors: [\\n [0, { h: bh + 15, s: 30, l: 95 }],\\n [1, { h: bh + 25, s: 30, l: 90 }],\\n ],\\n })\\n )\\n p.forVertical({ n: 100, margin: 0.1 }, ([x, y], [dX, dY], _c, i) => {\\n const h = p.gaussian({ mean: dY, sd: (1.5 * dY) / p.meta.bottom })\\n const curveSize = p.gaussian({ sd: 0.35 * p.meta.right })\\n const xOffset = p.gaussian({ sd: dX / 20 })\\n\\n const h1 = p.uniformRandomInt({ from: bh, to: bh + 40 })\\n const h2 = p.uniformRandomInt({ from: bh + 30, to: bh + 70 })\\n\\n p.withTranslation(p.meta.center, () => {\\n p.withRotation((i * Math.PI) / 50, () => {\\n p.setFillGradient(\\n new LinearGradient({\\n from: [x + xOffset, y],\\n to: [x + dX + xOffset, y + dY],\\n colors: [\\n [0, { h: h1, s: 60, l: 65, a: 0 }],\\n [0.05, { h: h1, s: 60, l: 65, a: 0 }],\\n [0.1, { h: h1, s: 60, l: 65, a: 0.9 }],\\n [\\n 0.5,\\n {\\n h: p.gaussian({ mean: 10 }) + (h1 + h2) / 2,\\n s: 60,\\n l: 65,\\n a: 0.4,\\n },\\n ],\\n [0.9, { h: h2, s: 60, l: 65, a: 0.9 }],\\n [0.95, { h: h2, s: 60, l: 65, a: 0 }],\\n [1, { h: h2, s: 60, l: 65, a: 0 }],\\n ],\\n })\\n )\\n p.fill(\\n Path.startAt([0, 0])\\n .addCurveTo([dX, 0], { curveSize })\\n .addLineTo([dX, h])\\n .addCurveTo([0, h], {\\n curveSize: curveSize + p.gaussian({ sd: 0.1 }),\\n polarlity: -1,\\n })\\n .addLineTo([0, 0])\\n )\\n })\\n })\\n })\\n}\\n\\n","Minis 2":"const minis2 = (p: SCanvas) => {\\n p.background(215, 60, 10)\\n p.forTiling(\\n { n: 6, type: \\"square\\", margin: 0.1 },\\n ([x, y], [dX, dY], [cX, cY], i) => {\\n p.withClipping(new Rect({ at: [x, y], w: dX, h: dY }), () => {\\n p.background(i * 27, 20, 10)\\n let nPt: Point2D = [cX, cY]\\n p.times(6, (j) => {\\n p.setFillColor(i * 27 + j * 12, 90, 40, 0.3)\\n nPt = p.perturb({ at: nPt, magnitude: dX / 1.5 })\\n p.fill(new Circle({ at: nPt, r: dX / 2 }))\\n })\\n })\\n\\n let frame: Point2D = [x, y]\\n p.lineWidth = 0.001\\n p.setStrokeColor(0, 0, 90)\\n p.times(3, () => {\\n p.draw(new Rect({ at: frame, w: dX, h: dY }))\\n frame = p.perturb({ at: frame, magnitude: 0.015 })\\n })\\n }\\n )\\n}\\n\\n","Contoured 3":"const contoured3 = (p: SCanvas) => {\\n let e = 0.01\\n let s = 3\\n p.lineWidth = 0.005\\n p.background(190, 80, 80)\\n\\n p.times(20, (n) => {\\n const sPerlin = (x: number, y: number) =>\\n perlin2(p.random() + x * s + n / 50, y * s + n / 100)\\n p.setFillColor(\\
1n p.sample([220, 170]),\\n p.sample([50, 80]),\\n p.sample([50, 40, 30]),\\n 0.25\\n )\\n let spt = p.randomPoint()\\n let pt: Point2D = [spt[0], spt[1]]\\n const points: Point2D[] = [spt]\\n while (p.inDrawing(pt)) {\\n let newPt = add(pt, [\\n e * Math.cos(sPerlin(...pt)),\\n e * Math.sin(sPerlin(...pt)),\\n ])\\n points.push(newPt)\\n pt = newPt\\n }\\n pt = [spt[0], spt[1]]\\n while (p.inDrawing(pt)) {\\n let newPt = add(pt, [\\n -e * Math.cos(sPerlin(...pt)),\\n -e * Math.sin(sPerlin(...pt)),\\n ])\\n points.unshift(newPt)\\n pt = newPt\\n }\\n\\n const { right, left } = p.meta\\n if (points[0][0] < left && points[points.length - 1][0] > right) {\\n points.unshift([right, 0], [0, 0])\\n p.fill(SimplePath.withPoints(points).close())\\n } else if (points[0][0] > right && points[points.length - 1][0] < left) {\\n points.unshift([right, 0], [0, 0])\\n p.fill(SimplePath.withPoints(points).close())\\n }\\n })\\n}\\n\\n","Centrality":"const central = (p: SCanvas) => {\\n const N = 80\\n p.background(220, 90, 10)\\n p.setFillGradient(\\n new RadialGradient({\\n start: [0, 0],\\n end: [0, 0],\\n rStart: 0,\\n rEnd: 0.8,\\n colors: [\\n [0, { h: 0, s: 0, l: 100 }],\\n [0.25, { h: 220, s: 10, l: 50 }],\\n [0.35, { h: 0, s: 0, l: 100 }],\\n [0.45, { h: p.sample([0, 45, 170, 215]), s: 50, l: 50 }],\\n [0.8, { h: 0, s: 0, l: 100 }],\\n ],\\n })\\n )\\n p.withTranslation(p.meta.center, () => {\\n p.aroundCircle({ at: [0, 0], r: 0.1, n: N }, (pt, i) => {\\n if ((i + 2) % 20 > 2) {\\n p.fill(\\n Path.startAt(pt)\\n .addCurveTo(scale(pt, p.gaussian({ mean: 4, sd: 0.1 })), {\\n curveSize: 0.05,\\n })\\n .addCurveTo(pt, { curveSize: 0.05 })\\n )\\n }\\n })\\n })\\n}\\n\\n","Central Curves":"const centralCurves = (p: SCanvas) => {\\n const N = 80\\n p.background(20, 90, 10)\\n p.setFillGradient(\\n new RadialGradient({\\n start: [0, 0],\\n end: [0, 0],\\n rStart: 0,\\n rEnd: 0.8,\\n colors: [\\n [0, { h: 0, s: 0, l: 100 }],\\n [0.25, { h: 220, s: 10, l: 50 }],\\n [0.35, { h: 0, s: 0, l: 100 }],\\n [0.45, { h: p.sample([0, 45, 215, 340]), s: 50, l: 50 }],\\n [0.8, { h: 0, s: 0, l: 100 }],\\n ],\\n })\\n )\\n p.withTranslation(p.meta.center, () => {\\n p.aroundCircle({ at: [0, 0], r: 0.1, n: N }, (pt, i) => {\\n if ((i + p.uniformRandomInt({ from: 4, to: 16 })) % 20 > 2) {\\n const r = p.gaussian({ mean: 0.4, sd: 0.04 })\\n const a = ((i + 2) * Math.PI * 2) / N\\n const t: Point2D = [r * Math.cos(a), r * Math.sin(a)]\\n p.fill(\\n Path.startAt(pt)\\n .addCurveTo(t, {\\n curveSize: 0.8,\\n })\\n .addCurveTo(pt, { curveSize: -0.75 })\\n )\\n }\\n })\\n })\\n}\\n\\n","Line of Curves":"const lineOfCurves = (p: SCanvas) => {\\n p.background(170, 90, 10)\\n p.forHorizontal({ n: 120, margin: 0.2 }, ([x, y], [dX, dY], [cX, cY]) => {\\n const height = p.gaussian({ mean: 0.5 * p.meta.bottom, sd: 0.1 })\\n const dH = p.gaussian({ sd: 0.1 })\\n const cS = p.gaussian({ mean: 0.3, sd: 0.1 })\\n const pol = p.randomPolarity()\\n const yBase = y + dY + 0.2\\n p.setFillColor(p.sample([45, 55, 60, 65]), 30, 85, 0.6)\\n p.fill(\\n Path.startAt([x, yBase])\\n .addCurveTo([cX + dH, y + dY - height + 0.1], {\\n curveSize: cS * pol,\\n })\\n .addCurveTo([x + dX + 0.02, yBase], {\\n curveSize: (cS - 0.05) * pol * -1,\\n })\\n .addLineTo([x - 0.1, yBase])\\n )\\n })\\n}\\n\\n","Dividing 1":"const dividing = (p: SCanvas) => {\\n p.background(40, 25, 95)\\n const ss = new RegularPolygon({\\n at: p.meta.center,\\n n: 14,\\n r: 0.4,\\n }).path.segmented.flatMap((s) => s.segmented)\\n ss.forEach((s, i) => {\\n p.setFillColor(i * 5, 70, 60)\\n p.fill(s)\\n })\\n p.lineWidth = 0.005\\n ss.forEach((s) => {\\n p.draw(s)\\n })\\n}\\n\\n","Dividing 2":"const dividing2 = (p: SCanvas) => {\\n p.background(0, 0, 5)\\n new RegularPolygon({ at: p.meta.center, r: 0.4, n: 20 }).path.segmented\\n .flatMap((s) => s.exploded({ scale: 0.75, magnitude: 1.1 }))\\n .flatMap((s) => s.exploded({ scale: 0.75, magnitude: 1.3 }))\\n .forEach((s, i) => {\\n p.setFillColor(i * 5, 80, 60, 0.9)\\n p.fill(s)\\n })\\n}\\n\\n","Dividing 6":"const dividing6 = (p: SCanvas) => {\\n p.background(175, 20, 95)\\n\\n new Star({ at: p.meta.center, n: 16, r: 0.4 }).path\\n .exploded({ magnitude: 1.05, scale: 0.99 })\\n .flatMap((s) => s.exploded({ magnitude: 1.05, scale: 0.99 }))\\n .forEach((s, i) => {\\n p.setFillColor(215 - i * 3, 90, 40)\\n p.fill(s.rotated(p.gaussian({ sd: Math.PI / 12 })))\\n })\\n}\\n\\n","Bokeh":"const bokeh = (p: SCanvas) => {\\n p.backgroundGradient(\\n new LinearGradient({\\n from: [0, 0],\\n to: [0, p.meta.bottom],\\n colors: [\\n [0, { h: 0, s: 0, l: 30 }],\\n [1, { h: 0, s: 0, l: 0 }],\\n ],\\n })\\n )\\n p.forTiling({ n: 20, type: \\"square\\", margin: 0.2 }, (_pt, [dX], c) => {\\n const hue = p.sample([5, 25, 210])\\n const loc = p.perturb({ at: c, magnitude: 0.4 })\\n p.setFillGradient(\\n new RadialGradient({\\n start: loc,\\n end: loc,\\n rStart: 0,\\n rEnd: dX * 2.2,\\n colors: [\\n [0, { h: hue, s: 80, l: 70 }],\\n [p.sample([0.1, 0.2, 0.3, 0.5]), { h: hue, s: 80, l: 70, a: 0 }],\\n ],\\n })\\n )\\n p.fill(new Circle({ at: loc, r: dX }))\\n })\\n}\\n\\n","Advanced Divisions":"const advancedDivisions = (p: SCanvas) => {\\n p.background(45, 100, 94)\\n const path = Path.startAt([0.5, p.meta.center[1] - 0.3])\\n p.aroundCircle({ at: p.meta.center, r: 0.3, n: 20 }, (pt, i) => {\\n path.addCurveTo(pt, { curveSize: p.gaussian({ mean: 1.5, sd: 0.2 }) })\\n })\\n\\n path.subdivide({ m: 0, n: 10 }
1).forEach((part, i) => {\\n p.setFillColor(10 + i * 40, 90, 60, p.sample([0.4, 0.5]))\\n p.fill(part)\\n })\\n\\n path.exploded().forEach((part, i) => {\\n p.setFillColor(10 + i * 2, 90, 60, p.sample([0.4, 0.5]))\\n p.fill(part)\\n })\\n\\n path\\n .exploded()\\n .flatMap((part) => part.exploded())\\n .forEach((part, i) => {\\n p.setFillColor(10 + (i * 2) / 3, 90, 60, p.sample([0.2, 0.3]))\\n p.fill(part)\\n })\\n}\\n\\n"},"isometric.ts":{"Isometric":"const isometricExample = (p: SCanvas) => {\\n const { bottom, right } = p.meta\\n p.background(0, 0, 95)\\n // make origin a point centred horizontally, but near bottom\\n p.withTranslation([right / 2, bottom * 0.8], () => {\\n // 1/200 of width = height of 1 unit\\n const iso = isoTransform(0.005)\\n p.times(10, (n) => {\\n const sp = SimplePath.withPoints([])\\n p.times(100, (m) => {\\n // adjust all x,y,z for vertical size: as in isometric all get scaled linearly in vertical direction\\n sp.addPoint(\\n iso([\\n bottom * (10 - n) * 10,\\n bottom * 20 * Math.cos(p.t + (n * 4 + m) / 10),\\n bottom * m,\\n ])\\n )\\n })\\n p.setStrokeColor(0, 0, 95)\\n p.lineWidth = 0.015\\n p.draw(sp)\\n p.setStrokeColor(215 - n * 3, 90, 60)\\n p.lineWidth = 0.005\\n p.draw(sp)\\n })\\n })\\n}\\n\\n","Isometric 2":"const isometricExample2 = (p: SCanvas) => {\\n const { bottom, right } = p.meta\\n p.lineWidth = 0.01 * bottom\\n p.background(30, 20, 85)\\n p.withTranslation([right / 2, bottom * 0.9], () => {\\n const iso = isoTransform(0.05 * bottom)\\n p.downFrom(10, (n) => {\\n p.downFrom(10, (m) => {\\n let sp = SimplePath.withPoints([])\\n const h = clamp({ from: -3, to: 6 }, p.poisson(4) - 3)\\n sp.addPoint(iso([n, h, m]))\\n sp.addPoint(iso([n + 1, h, m]))\\n sp.addPoint(iso([n + 1, h, m + 1]))\\n sp.addPoint(iso([n, h, m + 1]))\\n sp.close()\\n p.setFillColor(10 + h * 10, 100, 70)\\n p.fill(sp)\\n\\n sp = SimplePath.withPoints([])\\n sp.addPoint(iso([n, h, m + 1]))\\n sp.addPoint(iso([n, h - 1, m + 1]))\\n sp.addPoint(iso([n, h - 1, m]))\\n sp.addPoint(iso([n, h, m]))\\n sp.close()\\n p.setFillColor(10 + h * 10, 75, 60)\\n p.fill(sp)\\n\\n sp = SimplePath.withPoints([])\\n sp.addPoint(iso([n, h, m]))\\n sp.addPoint(iso([n + 1, h, m]))\\n sp.addPoint(iso([n + 1, h, m + 1]))\\n sp.addPoint(iso([n, h, m + 1]))\\n sp.addPoint(iso([n, h - 1, m + 1]))\\n sp.addPoint(iso([n, h - 1, m]))\\n sp.addPoint(iso([n, h, m]))\\n sp.close()\\n p.draw(sp)\\n })\\n })\\n })\\n}\\n\\n","Isometric 3":"const isometricExample3 = (p: SCanvas) => {\\n const { bottom, right } = p.meta\\n p.lineWidth = 0.01 * bottom\\n p.background(210, 70, 30)\\n p.setStrokeColor(30, 10, 30)\\n p.withTranslation([right / 2, bottom * 0.9], () => {\\n const iso = isoTransform(0.05 * bottom)\\n p.downFrom(10, (n) => {\\n p.downFrom(10, (m) => {\\n const sp = SimplePath.withPoints([])\\n const h = clamp(\\n { from: -2, to: 5 },\\n p.poisson(4) - 3 + Math.cos(p.t + n + m)\\n )\\n sp.addPoint(iso([n, h, m]))\\n sp.addPoint(iso([n + 1, h, m]))\\n sp.addPoint(iso([n + 1, h, m + 1]))\\n sp.addPoint(iso([n, h, m + 1]))\\n sp.addPoint(iso([n, h - 1, m + 1]))\\n sp.addPoint(iso([n, h - 1, m]))\\n // sp.addPoint(iso([n + 1, h - 1, m + 1]))\\n sp.close()\\n\\n p.setFillColor(h * 10 + 10 * Math.cos(h * 3), 95, 65, 0.9)\\n p.fill(sp)\\n p.draw(sp)\\n })\\n })\\n })\\n}\\n\\n","Isometric 4":"const isometricExample4 = (p: SCanvas) => {\\n const { bottom, right } = p.meta\\n p.lineWidth = 0.005 * bottom\\n p.background(340, 100, 40)\\n p.setStrokeColor(30, 5, 20)\\n p.withTranslation([right / 2, bottom * 0.9], () => {\\n const iso = isoTransform(0.05 * bottom)\\n p.downFrom(10, (n) => {\\n p.downFrom(10, (m) => {\\n const h = perlin2(n / 5, m / 10) * 5 + 4\\n\\n const sp = SimplePath.withPoints([])\\n sp.addPoint(iso([n, 0, m]))\\n sp.addPoint(iso([n + 1, 0, m]))\\n sp.addPoint(iso([n + 0.5, h, m + 0.5]))\\n sp.close()\\n\\
1n p.setFillColor(h * 10, 100, 75, 0.95)\\n p.fill(sp)\\n p.draw(sp)\\n\\n const sp2 = SimplePath.withPoints([])\\n sp2.addPoint(iso([n, 0, m]))\\n sp2.addPoint(iso([n, 0, m + 1]))\\n sp2.addPoint(iso([n + 0.5, h, m + 0.5]))\\n sp2.close()\\n\\n p.setFillColor(h * 10, 60, 75, 0.95)\\n p.fill(sp2)\\n p.draw(sp2)\\n })\\n })\\n })\\n}\\n\\n","Isometric 5":"const isometricExample5 = (p: SCanvas) => {\\n const { bottom, right } = p.meta\\n p.lineWidth = 0.005 * bottom\\n p.background(40, 40, 90)\\n p.setStrokeColor(30, 5, 20)\\n // make origin a point centred horizontally, but near bottom\\n p.withTranslation([right / 2, bottom * 0.95], () => {\\n const iso = isoTransform(0.05 * bottom)\\n\\n const h = (x: number, y: number) =>\\n 2 + 5 * perlin2(x / 5 + p.t, y / 10 + p.t * 0.5)\\n\\n p.downFrom(11, (n) => {\\n p.downFrom(11, (m) => {\\n p.doProportion(0.8, () => {\\n const sp = SimplePath.withPoints([])\\n\\n sp.addPoint(iso([n, h(n, m), m]))\\n sp.addPoint(iso([n + 1, h(n + 1, m), m]))\\n sp.addPoint(iso([n + 1, h(n + 1, m + 1), m + 1]))\\n sp.addPoint(iso([n, h(n, m + 1), m + 1]))\\n sp.close()\\n\\n p.proportionately([\\n [1, () => p.setFillColor(210, 100, 55 + 2.5 * h(n, m), 0.95)],\\n [1, () => p.setFillColor(0, 80, 50 + 2.5 * h(n, m), 0.95)],\\n ])\\n\\n p.fill(sp)\\n p.draw(sp)\\n })\\n })\\n })\\n })\\n}\\n\\n","Isometric 6":"const isometricExample6 = (p: SCanvas) => {\\n const { bottom, right } = p.meta\\n p.lineWidth = 0.005 * bottom\\n p.background(0, 0, 90)\\n p.setStrokeColor(30, 5, 20)\\n // make origin a point centred horizontally, but near bottom\\n p.withTranslation([right / 2, bottom * 0.95], () => {\\n const iso = isoTransform(0.05 * bottom)\\n p.downFrom(11, (n) => {\\n p.downFrom(11, (m) => {\\n p.times(3, (k) => {\\n p.doProportion(1 - (k + 1) / 6, () => {\\n const h = (x: number, y: number) =>\\n k * 2 + 2 * perlin2(x / 5 + p.t, y / 10 + p.t * 0.5)\\n\\n const sp = SimplePath.withPoints([])\\n\\n sp.addPoint(iso([n, h(n, m), m]))\\n sp.addPoint(iso([n + 1, h(n + 1, m), m]))\\n sp.addPoint(iso([n + 1, h(n + 1, m + 1), m + 1]))\\n sp.addPoint(iso([n, h(n, m + 1), m + 1]))\\n sp.close()\\n\\n p.proportionately([\\n [\\n 1,\\n () =>\\n p.setFillColor(210, 100, 55 + 2.5 * h(n, m), 0.95 - k / 8),\\n ],\\n [\\n 1,\\n () =>\\n p.setFillColor(340, 100, 45 + 2.5 * h(n, m), 0.95 - k / 8),\\n ],\\n ])\\n\\n p.fill(sp)\\n p.draw(sp)\\n })\\n })\\n })\\n })\\n })\\n}\\n\\n","Isometric Tapes":"const isometricExample7 = (p: SCanvas) => {\\n const { bottom, right } = p.meta\\n p.lineWidth = 0.005 * bottom\\n p.background(0, 0, 90)\\n p.setStrokeColor(30, 5, 20)\\n // make origin a point centred horizontally, but near bottom\\n p.withTranslation([right / 2, bottom * 0.95], () => {\\n const iso = isoTransform(0.05 * bottom)\\n\\n p.times(7, (hr) => {\\n const h = hr + Math.cos(p.t)\\n p.setFillColor(h * 10, 90, 50, 0.95)\\n const sp = SimplePath.withPoints([])\\n\\n p.proportionately([\\n [\\n 1,\\n () => {\\n sp.addPoint(iso([5, h, 0]))\\n sp.addPoint(iso([0, h, 0]))\\n sp.addPoint(iso([0, h, 1]))\\n sp.addPoint(iso([0, 5, 3]))\\n sp.addPoint(iso([1, 5, 3]))\\n sp.addPoint(iso([1, h, 1]))\\n\\n sp.addPoint(iso([4, h, 1]))\\n },\\n ],\\n [\\n 1,\\n () => {\\n sp.addPoint(iso([8, h, 1]))\\n sp.addPoint(iso([8, h, 0]))\\n sp.addPoint(iso([8, 0, -2]))\\n sp.addPoint(iso([7, 0, -2]))\\n sp.addPoint(iso([7, h, 0]))\\n sp.addPoint(iso([4, h, 0]))\\n sp.addPoint(iso([4, h, 1]))\\n },\\n ],\\n ])\\n\\n sp.addPoint(iso([4, h + 1, 3]))\\n\\
1n p.proportionately([\\n [\\n 1,\\n () => {\\n sp.addPoint(iso([4, h + 1, 7]))\\n sp.addPoint(iso([0, h, 7]))\\n sp.addPoint(iso([-2, 0, 7]))\\n sp.addPoint(iso([-2, 0, 8]))\\n sp.addPoint(iso([0, h, 8]))\\n sp.addPoint(iso([5, h + 1, 8]))\\n },\\n ],\\n [\\n 1,\\n () => {\\n sp.addPoint(iso([4, h + 1, 10]))\\n sp.addPoint(iso([5, h + 1, 10]))\\n sp.addPoint(iso([9, h + 2, 10]))\\n sp.addPoint(iso([11, 7, 10]))\\n sp.addPoint(iso([11, 7, 9]))\\n sp.addPoint(iso([9, h + 2, 9]))\\n sp.addPoint(iso([4, h + 2, 8]))\\n },\\n ],\\n ])\\n\\n sp.addPoint(iso([5, h + 1, 3]))\\n sp.addPoint(iso([5, h, 1]))\\n sp.close()\\n p.fill(sp)\\n p.draw(sp)\\n })\\n })\\n}\\n\\n","Isometric Fragments":"const isometricExample8 = (p: SCanvas) => {\\n p.backgroundGradient(\\n new RadialGradient({\\n start: p.meta.center,\\n rStart: 0,\\n end: p.meta.center,\\n rEnd: 0.6,\\n colors: [\\n [0, { h: 0, s: 0, l: 90 }],\\n [1, { h: 215, s: 80, l: 30 }],\\n ],\\n })\\n )\\n\\n const { bottom, right } = p.meta\\n p.lineWidth = 0.005 * bottom\\n p.setStrokeColor(30, 5, 20)\\n // make origin a point centred horizontally, but near bottom\\n p.withTranslation([right / 2, bottom * 0.95], () => {\\n const iso = isoTransform(0.05 * bottom)\\n\\n const top = (x: number, y: number, z: number) => [\\n iso([x + 0, y, z + 0]),\\n iso([x + 1, y, z + 0]),\\n iso([x + 1, y, z + 1]),\\n iso([x + 0, y, z + 1]),\\n ]\\n\\n const left = (x: number, y: number, z: number) => [\\n iso([x, y, z + 0]),\\n iso([x, y - 0.5, z + 0]),\\n iso([x, y - 0.5, z + 1]),\\n iso([x, y, z + 1]),\\n ]\\n p.times(7, (y) => {\\n p.times(7, () => {\\n const x = p.uniformRandomInt({ from: 0, to: 10 })\\n const z = p.uniformRandomInt({ from: 0, to: 10 })\\n\\n p.setFillColor(200, 40, 50)\\n const sp = SimplePath.withPoints(top(x, y, z)).close()\\n p.fill(sp)\\n p.draw(sp)\\n\\n p.setFillColor(180, 40, 50, 0.8)\\n const sp2 = SimplePath.withPoints(left(x, y, z)).close()\\n p.fill(sp2)\\n p.draw(sp2)\\n\\n p.setFillColor(350, 40, 50, 0.8)\\n const sp3 = SimplePath.withPoints(left(x + 1, y + 0.5, z)).close()\\n p.fill(sp3)\\n p.draw(sp3)\\n })\\n })\\n })\\n}\\n\\n","Isometric Cube Examples":"const isometricExample9 = (p: SCanvas) => {\\n p.background(215, 80, 10)\\n const { bottom, right: r } = p.meta\\n p.lineWidth = 0.005 * bottom\\n p.setStrokeColor(0, 0, 90)\\n p.withTranslation([r / 2, bottom * 0.5], () => {\\n const iso = isoTransform(0.1 * bottom)\\n\\n // Experimenting with helper functions... probably want to include in framework or as helpers somehow?\\n const top = (x: number, y: number, z: number, s: number) => [\\n iso([x, y, z]),\\n iso([x + s, y, z]),\\n iso([x + s, y, z + s]),\\n iso([x, y, z + s]),\\n ]\\n\\n const left = (x: number, y: number, z: number, s: number) => [\\n iso([x, y, z]),\\n iso([x, y - s, z + 0]),\\n iso([x, y - s, z + s]),\\n iso([x, y, z + s]),\\n ]\\n\\n const right = (x: number, y: number, z: number, s: number) => [\\n iso([x, y, z]),\\n iso([x + s, y, z]),\\n iso([x + s, y - s, z]),\\n iso([x, y - s, z]),\\n ]\\n\\n const shade = (\\n fn: (a: number, b: number, c: number, d: number) => Point2D[],\\n x: number,\\n y: number,\\n z: number,\\n s: number,\\n h: number,\\n sat = 40,\\n l = 50\\n ) => {\\n p.setFillColor(h, sat, l, 0.95)\\n const sp = SimplePath.withPoints(fn(x, y, z, s)).close()\\n p.fill(sp)\\n p.draw(sp)\\n }\\n\\n const cube = (x: number, y: number, z: number, s: number) => {\\n shade(top, x, y, z, s, 200)\\n shade(left, x, y, z, s, 180)\\n shade(right, x, y, z, s, 350)\\n }\\n\\n shade(top, -1.5, -2, -1.5, 5, 30, 20, 50)\\n\\n cube(0, 0, 0, 2)\\n cube(1, -1, -1, 1)\\n cube(0.5, -1.5, -0.5, 0.5)\\n cube(-1, -1, 1, 1)\\
1n cube(-0.5, -1.5, 0.5, 0.5)\\n })\\n}\\n\\n","Isometric Rotation":"const isometricExample10 = (p: SCanvas) => {\\n p.background(175, 60, 10)\\n const { bottom, right: r } = p.meta\\n p.lineWidth = 0.005 * bottom\\n p.setStrokeColor(0, 0, 90)\\n const tracePoints = (points: Point2D[]) => {\\n const sp = SimplePath.withPoints(points).close()\\n p.draw(sp)\\n }\\n\\n const sub3 = (\\n [a, b, c]: [number, number, number],\\n [d, e, f]: [number, number, number]\\n ): [number, number, number] => [a - d, b - e, c - f]\\n\\n p.withTranslation([r / 2, bottom * 0.5], () => {\\n const iso = isoTransform(0.2 * bottom)\\n\\n const a: [number, number, number] = [\\n Math.cos(p.t) + Math.sin(p.t),\\n 1,\\n -Math.sin(p.t) + Math.cos(p.t),\\n ]\\n const b: [number, number, number] = [\\n Math.cos(p.t) - Math.sin(p.t),\\n 1,\\n -Math.sin(p.t) - Math.cos(p.t),\\n ]\\n const c: [number, number, number] = [\\n -Math.cos(p.t) - Math.sin(p.t),\\n 1,\\n Math.sin(p.t) - Math.cos(p.t),\\n ]\\n const d: [number, number, number] = [\\n -Math.cos(p.t) + Math.sin(p.t),\\n 1,\\n Math.sin(p.t) + Math.cos(p.t),\\n ]\\n\\n const dH: [number, number, number] = [0, 2, 0]\\n\\n tracePoints([\\n iso(sub3(a, dH)),\\n iso(sub3(b, dH)),\\n iso(sub3(c, dH)),\\n iso(sub3(d, dH)),\\n ])\\n tracePoints([iso(a), iso(b), iso(sub3(b, dH)), iso(sub3(a, dH))])\\n tracePoints([iso(b), iso(c), iso(sub3(c, dH)), iso(sub3(b, dH))])\\n tracePoints([iso(c), iso(d), iso(sub3(d, dH)), iso(sub3(c, dH))])\\n tracePoints([iso(d), iso(a), iso(sub3(a, dH)), iso(sub3(d, dH))])\\n tracePoints([iso(a), iso(b), iso(c), iso(d)])\\n })\\n}\\n\\n","Lorenz Attractor":"const lorenz = (p: SCanvas) => {\\n const { bottom, right: r, center } = p.meta\\n p.backgroundGradient(\\n new RadialGradient({\\n start: center,\\n end: center,\\n rStart: 0,\\n rEnd: 0.65,\\n colors: [\\n [0, { h: 215, s: 80, l: 40 }],\\n [1, { h: 215, s: 80, l: 10 }],\\n ],\\n })\\n )\\n p.lineWidth = 0.005 * bottom\\n\\n const points: Point2D[] = []\\n p.withTranslation([r / 2, bottom * 0.2], () => {\\n const iso = isoTransform(0.01 * bottom)\\n\\n let x = 0.82\\n let y = 0.12\\n let z = 0\\n let a = 10.0\\n let b = 30.0\\n let c = 8.0 / 3.0\\n let t = 0.01\\n const N = 3000\\n\\n for (let i = 0; i < N; i++) {\\n points.push(iso([x, y - 35, z - 25]))\\n const x_ = x + t * a * (y - x)\\n const y_ = y + t * (x * (b - z) - y)\\n const z_ = z + t * (x * y - c * z)\\n x = x_\\n y = y_\\n z = z_\\n }\\n\\n for (let j = 0; j < N / 10; j++) {\\n p.setStrokeColor(30 * Math.cos(j / 10), 100, 70)\\n p.draw(SimplePath.withPoints(points.slice(j * 10, (j + 1) * 10 + 1)))\\n }\\n })\\n}\\n\\n"},"randomness.ts":{"Noise Field":"const noiseField = (p: SCanvas) => {\\n const delta = 0.01\\n const s = 8\\n p.lineWidth = 0.0025\\n\\n p.times(250, (n) => {\\n p.setStrokeColor(195 + n / 12.5, 90, 30, 0.7)\\n let pt = p.randomPoint()\\n const sp = SimplePath.startAt(pt)\\n while (true) {\\n const a = Math.PI * 2 * perlin2(pt[0] * s, pt[1] * s)\\n const nPt = add(pt, [delta * Math.cos(a), delta * Math.sin(a)])\\n if (p.inDrawing(nPt)) {\\n pt = nPt\\n sp.addPoint(nPt)\\n } else {\\n break\\n }\\n }\\n p.draw(sp.chaiken({ n: 2 }))\\n })\\n}\\n\\n","Rectangles":"const rectangles = (p: SCanvas) => {\\n p.lineWidth = 0.005\\n\\n p.forTiling({ n: 12, margin: 0.1 }, ([x, y], [dX, dY]) => {\\n p.setFillColor(214 * x, 100, 35 + 10 * y, 0.7)\\n p.fill(\\n new Rect({\\n at: [x + dX / 8, y + dY / 8],\\n w: dX * p.random() * 0.75,\\n h: dY * p.random() * 0.75,\\n })\\n )\\n })\\n}\\n\\n","Gaussian 2":"const randomness1b = (p: SCanvas) => {\\n p.times(25, (n) => {\\n p.setFillColor(175 + n, 80, 50, 0.4)\\n const values = p\\n .build(p.times, 50, () => p.gaussian())\\n .sort((a, b) => (a > b ? -1 : 1))\\n const min = Math.min(...values)\\n const max = Math.max(...values)\\n const range = max - min\\n p.forHorizontal(\\n {\\n n: values.length,\\n margin: 0.1,\\n },\\n ([x, y], [dX, dY], _c, i) => {\\n const h = dY * ((values[i] - min) / range)\\n p.fill(\\n new Rect({\\n at: [x + n * 0.04 * dX, y + dY / 2 - h / 2],\\n w: dX * 0.2,\\n h,\\n })\\n )\\n }\\n )\\n })\\n}\\n\\n","Gaussian 3":"const randomness1c = (p: SCanvas) => {\\n p.background(205, 20, 85)\\n p.forTiling({ n: 20, type: \\"square\\", margin: 0.1 }, (_pt, [w], at) => {\\n p.setFillColor(195, 70, 40)\\n p.fill(new Circle({ at, r: w * 0.45 }
1))\\n\\n p.setFillColor(205, 70, 80)\\n p.fill(new Circle({ at: p.perturb({ at, magnitude: w / 3 }), r: w * 0.3 }))\\n })\\n}\\n\\n","Little Abstracts":"const littleAbstracts = (p: SCanvas) => {\\n p.background(200, 10, 20)\\n p.forTiling({ n: 8, margin: 0.1, type: \\"square\\" }, (at, d, c, i) => {\\n p.setFillColor(p.uniformRandomInt({ from: 200, to: 260 }), 50, 50)\\n const rect = new Rect({\\n at: add(at, scale(d, 0.1)),\\n w: d[0] * 0.8,\\n h: d[1] * 0.8,\\n })\\n p.fill(rect)\\n p.withClipping(rect, () => {\\n p.setFillColor(0, 0, 100, 0.2)\\n const h = (p.random() * 0.5 + 0.1) * d[1] * 0.8\\n p.fill(\\n new Rect({\\n at: add(add(at, scale(d, 0.1)), [0, d[1] * 0.8 - h]),\\n w: d[0] * 0.8,\\n h,\\n })\\n )\\n\\n p.times(3, () => {\\n p.setFillColor(200, p.sample([20, 40]), 90, 0.4)\\n p.fill(\\n new RegularPolygon({\\n at: p.perturb({ at: c, magnitude: d[0] / 1.5 }),\\n n: p.poisson(4) + 3,\\n r: d[0] / 6,\\n })\\n )\\n })\\n })\\n })\\n}\\n\\n","Record Cover 3":"const recordCoverish3 = (p: SCanvas) => {\\n p.background(30, 20, 5)\\n p.lineWidth = 0.0015\\n p.withTranslation(p.meta.center, () => {\\n p.times(100, () => {\\n const a = p.gaussian({ mean: Math.PI, sd: Math.PI / 12 })\\n p.withRotation(a, () => {\\n p.setStrokeColor(a * 12, 100, 70, 0.9)\\n p.draw(new Line([-1, 0], [1, 0]))\\n })\\n })\\n })\\n}\\n\\n","Record Cover 4":"const recordCoverish4 = (p: SCanvas) => {\\n p.background(30, 10, 20)\\n p.lineWidth = 0.001\\n p.setStrokeColor(0, 0, 90)\\n p.forTiling({ n: 10, type: \\"square\\", margin: 0.15 }, (at, d, c) => {\\n p.draw(\\n new Rect({\\n at,\\n w: d[0],\\n h: d[1],\\n })\\n )\\n p.withClipping(\\n new Rect({\\n at,\\n w: d[0],\\n h: d[1],\\n }),\\n () => {\\n p.setFillColor(30, 20, p.uniformRandomInt({ from: 60, to: 80 }))\\n const a = p.gaussian({ sd: Math.PI / 8 })\\n const fY = p.gaussian({ mean: 0.04, sd: 0.01 })\\n p.withTranslation(add(c, [0, fY]), () => {\\n p.withRotation(a, () => {\\n p.fill(new Rect({ at: scale(d, -0.5), w: d[0], h: d[1] }))\\n })\\n })\\n }\\n )\\n })\\n}\\n\\n","Stacked Curves":"const stackedCurves = (p: SCanvas) => {\\n p.background(210, 40, 15)\\n p.withRandomOrder(\\n p.forHorizontal,\\n { n: 20, margin: 0.1 },\\n ([x, y], [dX, dY], c, i) => {\\n let sp = SimplePath.withPoints([])\\n p.times(10, (n) => {\\n sp.addPoint([x + dX / 2 + p.gaussian({ sd: 0.01 }), y + (n * dY) / 10])\\n })\\n p.downFrom(10, (n) => {\\n sp.addPoint([x - dX / 2 - p.gaussian({ sd: 0.01 }), y + (n * dY) / 10])\\n })\\n sp.close()\\n p.setFillColor(120 + i * 5, 60, 50, 0.85)\\n\\n p.fill(sp.chaiken({ n: 5, looped: true }))\\n }\\n )\\n}\\n\\n","Stacked Curves 2":"const stackedCurves2 = (p: SCanvas) => {\\n const M = 0.075\\n const N = 20\\n const HUES = [190, 195, 200, 210, 215, 220, 170, 30, 40]\\n p.background(40, 80, 95)\\n let sp = SimplePath.withPoints([])\\n p.times(p.meta.bottom * 13, (n) => {\\n sp.addPoint([-0.2 + p.gaussian({ sd: 0.01 }), n / 10])\\n }
1)\\n p.draw(sp)\\n\\n const paths: SimplePath[] = [sp]\\n for (let i = 0; i < N; i++) {\\n paths.push(paths[i].transformed(([x, y]) => [x + 0.02 * p.poisson(4), y]))\\n }\\n\\n p.withClipping(\\n new Rect({ at: [M, M], w: p.meta.right - 2 * M, h: p.meta.bottom - 2 * M }),\\n () => {\\n for (let i = 0; i < N - 1; i++) {\\n p.proportionately([\\n [1, () => p.setFillColor(p.sample(HUES), 95, 50)],\\n [1, () => p.setFillColor(p.sample(HUES), 40, 80)],\\n ])\\n\\n p.fill(\\n paths[i]\\n .withAppended(\\n paths[i + 1].reversed.transformed(([x, y]) => [x + 0.01, y])\\n )\\n .chaiken({ n: 4 })\\n )\\n }\\n }\\n )\\n}\\n\\n","Minis":"const minis = (p: SCanvas) => {\\n p.background(45, 20, 10)\\n p.forTiling({ n: 7, margin: 0.075 }, ([x, y], [dX, dY], [cX, cY], i) => {\\n p.withClipping(new Rect({ at: [x, y], w: dX, h: dY }), () => {\\n p.background(i * 27, 20, 65)\\n let nPt: Point2D = [cX, cY]\\n p.times(6, (j) => {\\n p.setFillColor(i * 27 + j * 12, 90, 30, 0.3)\\n nPt = p.perturb({ at: nPt, magnitude: dX / 1.5 })\\n p.fill(new Circle({ at: nPt, r: dX / 2 }))\\n })\\n })\\n })\\n}\\n\\n","Weave":"const weave = (p: SCanvas) => {\\n const s = 0.01\\n const h2 = 220\\n p.background(45, 50, 75)\\n p.forTiling(\\n { n: 20, type: \\"square\\", margin: 0.1 },\\n ([x, y], [dX, dY], [cX, cY]) => {\\n p.proportionately([\\n [\\n 1,\\n () => {\\n p.setFillColor(0, 0, 50)\\n p.fill(new Rect({ at: [x, cY - s], w: dX, h: 2 * s }))\\n p.setFillColor(h2, 80, 10)\\n p.fill(new Rect({ at: [cX - s, y], w: 2 * s, h: dY }))\\n },\\n ],\\n [\\n 1,\\n () => {\\n p.setFillColor(h2, 80, 10)\\n p.fill(new Rect({ at: [cX - s, y], w: 2 * s, h: dY }))\\n p.setFillColor(0, 0, 50)\\n p.fill(new Rect({ at: [x, cY - s], w: dX, h: 2 * s }))\\n },\\n ],\\n ])\\n }\\n )\\n}\\n\\n","Weave 2":"const weave2 = (p: SCanvas) => {\\n const s = 0.01\\n const h1 = 220\\n const h2 = 0\\n p.background(35, 80, 65)\\n p.forTiling(\\n { n: 15, type: \\"square\\", margin: 0.1 },\\n ([x, y], [dX, dY], [cX, cY]) => {\\n p.proportionately([\\n [\\n 1,\\n () => {\\n p.setFillColor(h1, 60, 30)\\n p.fill(new Rect({ at: [x, cY - s], w: dX, h: 2 * s }))\\n },\\n ],\\n [\\n 1,\\n () => {\\n p.setFillColor(h1, 60, 30)\\n p.fill(new Rect({ at: [x, cY - s], w: dX, h: 2 * s }))\\n p.setFillColor(h2, 80, 50)\\n p.fill(new Rect({ at: [cX - s, y], w: 2 * s, h: dY }))\\n },\\n ],\\n [\\n 1,\\n () => {\\n p.setFillColor(h2, 80, 50)\\n p.fill(new Rect({ at: [cX - s, y], w: 2 * s, h: dY }))\\n p.setFillColor(h1, 60, 30)\\n p.fill(new Rect({ at: [x, cY - s], w: dX, h: 2 * s }))\\n },\\n ],\\n [\\n 1,\\n () => {\\n p.setFillColor(h2, 80, 50)\\n p.fill(new Rect({ at: [cX - s, y], w: 2 * s, h: dY }))\\n },\\n ],\\n ])\\n }\\n )\\n}\\n\\n","Explosion":"const explosion = (p: SCanvas) => {\\n p.background(355, 70, 32)\\n const N = 45\\n p.withTranslation(p.meta.center, () => {\\n p.times(5, (m) => {\\n const sp = SimplePath.withPoints([])\\n p.aroundCircle({ at: [0, 0], r: 0.1 + 0.08 * m, n: 30 }, ([x, y]) => {\\n sp.addPoint(p.perturb({ at: [x, y] }))\\n })\\n sp.close()\\n p.setFillColor(210, 45, 90, 0.2)\\n p.fill(sp.chaiken({ n: 2, looped: true }))\\n })\\n\\n p.setFillColor(45, 90, 100)\\n p.times(N, (n) => {\\n p.withRotation((2 * Math.PI * n) / N, () => {\\n const start = p.perturb({\\n at: [0.1 + p.random() * 0.2, 0],\\n magnitude: 0.03,\\n })\\n const end = p.perturb({ at: [0.4, 0], magnitude: 0.1 })\\n p.fill(\\n Path.startAt(start)\\n .addCurveTo(end, { curveSize: 0.05 })\\n .addCurveTo(start, { curveSize: 0.05, polarlity: 1 })\\n )\\n })\\n })\\n })\\n}\\n\\n","Contoured":"const contoured = (p: SCanvas) => {\\n let e = 0.01\\n let s = 3\\n p.lineWidth = 0.005\\n p.background(0, 30, 96)\\n const sPerlin = (x: number, y: number) => perlin2(x * s, y * s)\\n p.times(40, () =>
1 {\\n p.setStrokeColor(\\n p.sample([215, 200, 0]),\\n p.sample([50, 80]),\\n p.sample([40, 20, 10])\\n )\\n let spt = p.randomPoint()\\n let pt: Point2D = [spt[0], spt[1]]\\n let p1 = SimplePath.withPoints([spt])\\n while (p.inDrawing(pt)) {\\n let newPt = add(pt, [\\n e * Math.cos(sPerlin(...pt)),\\n e * Math.sin(sPerlin(...pt)),\\n ])\\n p1.addPoint(newPt)\\n pt = newPt\\n }\\n p.draw(p1)\\n\\n let p2 = SimplePath.withPoints([spt])\\n pt = [spt[0], spt[1]]\\n while (p.inDrawing(pt)) {\\n let newPt = add(pt, [\\n -e * Math.cos(sPerlin(...pt)),\\n -e * Math.sin(sPerlin(...pt)),\\n ])\\n p2.addPoint(newPt)\\n pt = newPt\\n }\\n p.draw(p2)\\n })\\n}\\n\\n","Contoured 2":"const contoured2 = (p: SCanvas) => {\\n let e = 0.01\\n let s = 3\\n p.lineWidth = 0.005\\n p.background(170, 40, 95)\\n\\n p.times(30, (n) => {\\n const sPerlin = (x: number, y: number) =>\\n perlin2(x * s + n / 50, y * s + n / 100)\\n p.setStrokeColor(\\n p.sample([150, 170, 75]),\\n p.sample([50, 80]),\\n p.sample([40, 20, 10]),\\n 0.75\\n )\\n let spt = p.randomPoint()\\n let pt: Point2D = [spt[0], spt[1]]\\n let p1 = SimplePath.withPoints([spt])\\n while (p.inDrawing(pt)) {\\n let newPt = add(pt, [\\n e * Math.cos(sPerlin(...pt)),\\n e * Math.sin(sPerlin(...pt)),\\n ])\\n p1.addPoint(newPt)\\n pt = newPt\\n }\\n p.draw(p1)\\n\\n let p2 = SimplePath.withPoints([spt])\\n pt = [spt[0], spt[1]]\\n while (p.inDrawing(pt)) {\\n let newPt = add(pt, [\\n -e * Math.cos(sPerlin(...pt)),\\n -e * Math.sin(sPerlin(...pt)),\\n ])\\n p2.addPoint(newPt)\\n pt = newPt\\n }\\n p.draw(p2)\\n })\\n}\\n\\n","Night":"const night = (p: SCanvas) => {\\n p.background(0, 0, 5)\\n p.forTiling({ n: 15, type: \\"square\\" }, (_pt, [dX], c) => {\\n const hue = p.sample([45, 55, 60])\\n const loc = p.perturb({ at: c, magnitude: 0.4 })\\n p.setFillGradient(\\n new RadialGradient({\\n start: loc,\\n end: loc,\\n rStart: 0,\\n rEnd: dX,\\n colors: [\\n [0, { h: hue, s: 80, l: 70 }],\\n [p.sample([0.1, 0.2, 0.3, 0.5]), { h: hue, s: 80, l: 90, a: 0 }],\\n ],\\n })\\n )\\n p.fill(new Circle({ at: loc, r: dX }))\\n })\\n}\\n\\n","Noise Glow":"const noiseGlow = (p: SCanvas) => {\\n p.background(0, 0, 10)\\n p.forTiling({ n: 50, type: \\"square\\" }, ([x, y], [dX], at) => {\\n const maxR = dX / 1.8\\n const value = clamp(\\n { from: 0.2, to: 1 },\\n 1.5 * perlin2(x * 6 + 0.3, y * 15 + 0.5)\\n )\\n const h = 120 - 120 * value\\n p.setFillColor(h, 80, 50, 0.2)\\n p.fill(new Circle({ at, r: maxR * value * 1.5 }))\\n p.setFillColor(h, 90, 50)\\n p.fill(new Circle({ at, r: maxR * value }))\\n })\\n}\\n\\n","Perturbed Spiral":"const perturbedSpiral = (p: SCanvas) => {\\n let r = 0.001\\n let a = 0\\n const {\\n center: [cX, cY],\\n } = p.meta\\n\\n p.background(45, 85, 97)\\n p.lineWidth = 0.001\\n p.times(800, (n) => {\\n p.setStrokeColor(p.sample([220, 190, 215]), 50, p.sample([20, 40]))\\n const pA = a + p.gaussian({ sd: Math.PI })\\n p.draw(\\n new Line(\\n [cX + Math.cos(pA) * r, cY + Math.sin(pA) * r],\\n [cX + Math.cos(pA) * (r + 0.1), cY + Math.sin(pA) * (r + 0.1)]\\n )\\n )\\n r += 0.001\\n a += 0.1\\n })\\n}\\n\\n","Perturbed Spiral 2":"const perturbedSpiral2 = (p: SCanvas) => {\\n p.background(25, 40, 95)\\n p.lineWidth = 0.002\\n p.setStrokeColor(205, 70, 40)\\n p.withTranslation(p.meta.center, () => {\\n const path = SimplePath.withPoints([])\\n let a = 0\\n let l = 0.05\\n let r = l\\n path.addPoint([r * Math.cos(a), r * Math.sin(a)])\\n p.times(400, () => {\\n const dA = 2 * Math.asin(l / (r * 2))\\n r += 0.005 * dA\\n a += dA\\n path.addPoint(\\n p.perturb({\\n at: [r * Math.cos(a), r * Math.sin(a)],\\n magnitude: 0.0125 * (1.1 + Math.
1cos(p.t)),\\n })\\n )\\n })\\n p.draw(path)\\n })\\n}\\n\\n","Perturbed Spiral 3":"const perturbedSpiral3 = (p: SCanvas) => {\\n p.background(0, 0, 95)\\n p.lineWidth = 0.002\\n p.setStrokeColor(165, 70, 30)\\n\\n new Spiral({ at: p.meta.center, l: 0.05, n: 400 }).path.edges.forEach(\\n (edge) => {\\n p.draw(\\n edge.rotated(p.gaussian({ sd: Math.PI / (10 + Math.cos(p.t * 2) * 8) }))\\n )\\n }\\n )\\n}\\n\\n"},"text.ts":{"Basics":"const basicSketch = (s: SCanvas) => {\\n s.background(210, 90, 80)\\n\\n s.setFillColor(210, 80, 30)\\n\\n s.fillText(\\n {\\n at: s.meta.center,\\n size: 0.19999,\\n align: \\"center\\",\\n font: \\"sans-serif\\",\\n },\\n \\"Hi there!\\"\\n )\\n}\\n\\n","Positions":"const positions = (s: SCanvas) => {\\n s.background(50, 30, 90)\\n\\n s.setFillColor(110, 80, 30)\\n\\n s.times(11, (i) => {\\n s.times(11, (j) => {\\n s.fillText(\\n {\\n at: [i / 10, j / 10],\\n size: 0.015,\\n align: \\"center\\",\\n font: \\"times\\",\\n },\\n `${i / 10},${j / 10}`\\n )\\n })\\n })\\n}\\n\\n","Measure":"const measure = (s: SCanvas) => {\\n s.background(220, 30, 90)\\n\\n s.setFillColor(310, 80, 30)\\n\\n const m = s.measureText({ size: 0.2, font: \\"sans\\" }, \\"Hi there!\\")\\n\\n s.fillText(\\n { at: s.meta.center, size: 0.1, font: \\"sans\\" },\\n `w: ${m.width.toFixed(2)} bba: ${m.fontBoundingBoxAscent}`\\n )\\n}\\n\\n","Custom Font":"const customFont = (s: SCanvas) => {\\n s.background(40, 40, 90)\\n s.setFillColor(340, 80, 30)\\n s.fillText(\\n { at: s.meta.center, size: 0.17, font: \\"Josefin Sans\\" },\\n `Josefin Sans`\\n )\\n\\n s.setFillColor(210, 80, 30)\\n s.fillText(\\n {\\n at: v.add(s.meta.center, [0, 0.2]),\\n size: 0.1,\\n font: \\"Josefin Sans\\",\\n },\\n `A web font`\\n )\\n}\\n\\n"}}'),g="play-ts.index",f="play-ts.seed",w="play-ts.time",view=function(){var n=(0,c.Oc)(),t=(0,c.Q_)()||"Highlights",o=(0,c.Dx)(g),e=null!==n?n:o||0,w=(0,s.useState)(!1),b=w[0],C=w[1],v=(0,s.useState)(!1),P=v[0],y=v[1],x=(0,s.useState)(l.$v),S=x[0],X=x[1],k=(0,s.use
1State)((0,c.Dx)(f)||1),R=k[0],M=k[1];return(0,i.jsxs)("div",{className:"flex flex-col w-screen h-screen",children:[(0,i.jsx)(r.Z,{}),(0,i.jsxs)("div",{className:"bg-sky-800 px-2 py-4 flex flex-row",children:[(0,i.jsx)("button",{className:"bg-gray-200 hover:bg-sky-400 focus:outline-none focus:shadow-outline px-2 py-1 rounded ml-2",onClick:function(){var n=R+1;(0,c.Gy)(f,n),M(n)},title:"Refresh",children:"â»"}),(0,i.jsx)("button",{className:"".concat(P?"bg-sky-200":"bg-gray-200"," hover:bg-sky-400 focus:outline-none focus:shadow-outline px-2 py-1 rounded ml-2 items-center w-20"),onClick:function(){return y(!P)},title:P?"Pause":"Play",children:P?"Pause":"Play"}),(0,i.jsx)(Flex,{}),(0,i.jsx)(p.Z,{value:S,choices:l.Bz,onSelect:X}),(0,i.jsx)(Flex,{}),(0,i.jsx)("button",{className:"".concat(b?"bg-sky-200":"bg-gray-200"," hover:bg-sky-400 focus:outline-none focus:shadow-outline px-2 py-1 rounded ml-2 items-center"),onClick:function(){return C(!b)},title:"Toggle Source Code",children:"Source Code"}),(0,i.jsx)(a(),{href:"/export?sketch=".concat(e,"&category=").concat(t),legacyBehavior:!0,children:(0,i.jsx)("a",{className:"bg-gray-200 hover:bg-sky-400 focus:outline-none focus:shadow-outline px-2 mr-2 py-3 rounded ml-2",children:"Export"})})]}),(0,i.jsxs)("div",{className:"flex-1 flex flex-row items-stretch",children:[(0,i.jsx)(m.Xz,{aspectRatio:S,sketch:d.Z[t].sketches[e].sketch,seed:R,playing:P}),b&&(0,i.jsxs)("div",{className:"fixed shadow-md bg-gray-700 overflow-scroll inset-y-0 right-0",style:{backgroundColor:"hsla(218,17%,20%,0.9)",maxWidth:"95vw"},children:[(0,i.jsxs)("div",{className:"text-gray-100 px-8 pt-8 flex flex-row justify-between items-center",children:[(0,i.jsx)("h2",{className:"text-gray-100 font-bold text-xl",children:d.Z[t].sketches[e].name}),(0,i.jsx)("button",{className:"bg-gray-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline px-2 py-1 rounded",onClick:function(){return C(!b)},title:"Toggle Source Code",children:"Close"})]}),(0,i.jsx)("div",{className:"p-8 text-gray-300",children:(0,i.jsx)(h.Z,{language:"typescript",useInlineStyles:!1,children:u[d.Z[t].fileName][d.Z[t].sketches[e].name]})})]})]})]})}},1157:function(n,t,o){o.d(t,{Xz:function(){return Canvas}});var e=o(6835),a=o(2777),s=o(2262),i=o(9499),r=o(7294),p=o(5173),l=o(102),d=o(1672),c=o(5893),h="play-ts.time",m=function(){function CanvasPainterService(){var n=this;(0,a.Z)(this,CanvasPainterService),(0,i.Z)(this,"ctx",void 0),(0,i.Z)(this,"canvas",void 0),(0,i.Z)(this,"sketch",void 0),(0,i.Z)(this,"seed",0),(0,i.Z)(this,"playing",!1),(0,i.Z)(this,"time",void 0),(0,i.Z)(this,"width",100),(0,i.Z)(this,"height",100),(0,i.Z)(this,"aspectRatio",100),(0,i.Z)(this,"af",null),(0,i.Z)(this,"updateTime",function(){n.playing&&(n.time+=.01666666666,n.af=requestAnimationFrame(n.updateTime)),n.draw()}),(0,i.Z)(this,"draw",function(){if(n.ctx){n.ctx.clearRect(0,0,n.width,n.height);var t=new p.Z(n.ctx,{width:n.width,height:n.height},n.seed,n.time);n.sketch&&n.sketch(t)}}),this.time=(0,l.Dx)(h)||0}return(0,s.Z)(CanvasPainterService,[{key:"configure",value:function(n){var t=n.width,o=n.height,e=n.aspectRatio,a=n.sketch,s=n.seed,i=n.playing,r=n.noShadow;t&&o&&(t/o>e?(this.height=o-(r?0:20),this.width=this.height*e):(this.width=t-(r?0:20),this.height=this.width/e)),this.sketch=a,this.seed=s,this.playing&&!i&&(0,l.Gy)(h,this.time),this.playing=i,this.canvas.height=this.height,this.canvas.width=this.width,this.af&&cancelAnimationFrame(this.af),this.updateTime()}}]),CanvasPainterService}();function Canvas(n){var t=n.aspectRatio,o=n.sketch,a=n.seed,s=n.playing,i=void 0!==s&&s,p=n.noShadow,l=void 0!==p&&p,h=n.onClick,u=void 0===h?function(){}:h,g=(0,d.Z)(),f=(0,e.Z)(g,2),w=f[0],b=f[1],C=b.width,v=b.height,P=(0,r.useRef)(null),y=(0,r.useRef)(null),x=(0,r.useState)(new m)[0];return(0,r.useLayoutEffect)(function(){var n;if(y.current)n=y.current;else{var e=P.current;e&&(n=e.getContext("2d"),x.canvas=e)}x.ctx=n,x.configure({width:C,height:v,aspectRatio:t||C/v,sketch:o,seed:a,playing:i,noShadow:!!l})},[i,a,o,t,C,v,x,l]),(0,c.jsx)("div",{className:"flex-1 self-stretch flex items-center justify-center",ref:w,onClick:function(n){var t=P.current.getBoundingClientRect(),o=t.top,e=t.left;u([n.clientX-e,n.clientY-o],[C,v])},children:(0,c.jsx)("canvas",{id:"myCanvas",ref:P,className:"".concat(l?"":"shadow-md")})})}},5770:function(n,t,o){o.d(t,{Z:function(){return Header}});var e=o(1664),a=o.n(e),s=o(1163);o(7294);var i=o(5893),r=[{href:"/main",name:"Examples"},{href:"/viewAll",name:"Slides"},{href:"/quickstart",name:"Start"}];function Header(){var n=(0,s.useRouter)();return(0,i.jsxs)("div",{className:"bg-rose-700 px-8 flex flex-row items-center",children:[(0,i.jsx)(a(),{href:"/",legacyBehavior:!0,children:(0,i.jsx)("a",{className:"text-white font-bold hover:text-sky-100 p-4 text-xl",children:"Solandra"})}),r.map(function(t,o){return n.asPath.includes(t.href)?(0,i.jsx)("div",{className:"text-amber-200 font-bold p-4",children:t.name},o):(0,i.jsx)(a(),{href:t.href,legacyBehavior:!0,children:(0,i.jsx)("a",{className:"text-white font-bold hover:text-rose-200 p-4",children:t.name})},o)})]})}},89:function(n,t,o){o.d(t,{Z:function(){return SelectFromChoice}}),o(7294);var e=o(5893);function SelectFromChoice(n){var t=n.value,o=n.choices,a=n.onSelect;return(0,e.jsx)("div",{className:"flex flex-row flex-wrap gap-2",children:o.map(function(n,o){var s=n.label,i=n.value;return(0,e.jsx)("button",{className:i==t?"bg-sky-200 p-2 rounded-lg ":"bg-gray-200 p-2 rounded-lg hover:bg-sky-400",onClick:function(){return a(i)},children:s},o)})})}},9595:function(n,t,o){o.d(t,{$v:function(){return i},Bz:function(){return s},vx:function(){return e},zm:function(){return a}});var e=[{label:"S",value:1200},{label:"M",value:1920},{label:"L",value:3200},{label:"XL",value:4096},{label:"XXL",value:6e3},{label:"XXXL",value:8192}],a=e[1].value,s=[{label:"3:4",value:3/4},{label:"1:1",value:1},{label:"4:3",value:4/3},{label:"3:2",value:1.5},{label:"16:9",value:16/9}],i=s[1].value},102:function(n,t,o){o.d(t,{Dx:function(){return getNumber},Gy:function(){return setNumber},Oc:function(){return getSketchIdx},Q_:function(){return getSketchCategory}});var e=o(3672),getNumber=function(n){var t=o.g.localStorage&&localStorage.getItem(n);if(t)try{var e=JSON.parse(t);if("number"==typeof e)return e}catch(n){}return null},setNumber=function(n,t){o.g.localStorage&&localStorage.setItem(n,JSON.stringify(t))},getSketchIdx=function(){try{var n=new URL(document.location).searchParams;return parseInt(n.get("sketch"),10)}catch(n){return null}},getSketchCategory=function(){try{var n=new URL(document.location).searchParams.get("category");if(e.C.includes(n))return n;return"Highlights"}catch(n){return"Highlights"}}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.