From 731046d1f7598ae6cea8d86e978354326201b183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=AA=E3=82=AD=E8=90=8C?= Date: Mon, 30 Jun 2025 23:54:50 +0200 Subject: [PATCH] update example brushes; add builtin/dashes --- static/brush-box.js | 96 ++++++++++++++++++++++++++++----------------- 1 file changed, 59 insertions(+), 37 deletions(-) diff --git a/static/brush-box.js b/static/brush-box.js index e995e0a..92d01d7 100644 --- a/static/brush-box.js +++ b/static/brush-box.js @@ -11,8 +11,8 @@ export const builtInPresets = [ code: ` -- Try playing around with the values -- and see what happens! -color = #000 -thickness = 8 +color: #000 +thickness: 8 withDotter \\d -> stroke thickness color (line (d From) (d To)) @@ -23,20 +23,42 @@ withDotter \\d -> id: "builtin/thick", name: "Thick", code: ` -color = #000 -thickness = 48 +color: #000 +thickness: 48 withDotter \\d -> stroke thickness color (line (d From) (d To)) `.trim(), }, + { + id: "builtin/dashes", + name: "Dashes", + code: ` +color: #000 +thickness: 4 +length: 5 +duty: 0.5 + +or_: \\a, b -> + if (a) a + else b + +withDotter \\d -> + visible = mod (d Num) length < length * duty + if (visible) + stroke thickness color (line (d From) (d To)) + else + () + `.trim(), + }, + { id: "builtin/pencil", name: "Pencil", code: ` -color = #0003 -thickness = 6 +color: #0003 +thickness: 6 withDotter \\d -> stroke thickness color (line (d From) (d To)) @@ -47,16 +69,16 @@ withDotter \\d -> id: "builtin/woobly", name: "Woobly", code: ` -color = #000 -minThickness = 8 -maxThickness = 20 -wavelength = 1 +color: #000 +minThickness: 8 +maxThickness: 20 +wavelength: 1 withDotter \\d -> - let pi = 3.14159265 - let a = (sin (d Num * wavelength / pi) + 1) / 2 - let range = maxThickness - minThickness - let thickness = minThickness + a * range + pi = 3.14159265 + a = (sin (d Num * wavelength / pi) + 1) / 2 + range = maxThickness - minThickness + thickness = minThickness + a * range stroke thickness color (line (d From) (d To)) `.trim(), }, @@ -65,28 +87,28 @@ withDotter \\d -> id: "builtin/wavy", name: "Wavy", code: ` -color = #000 -thickness = 4 -amplitude = 50 -wavelength = 1 +color: #000 +thickness: 4 +amplitude: 50 +wavelength: 1 -mag = \\v -> +mag: \\v -> hypot (vecX v) (vecY v) -norm = \\u -> - let l = mag u +norm: \\u -> + l = mag u u / vec l l -perpClockwise = \\v -> +perpClockwise: \\v -> vec (vecY v) (-(vecX v)) withDotter \\d -> - let pi = 3.14159265 - let a = sin (d Num * wavelength / pi) * amplitude - let direction = (d To) - (d From) - let clockwise = norm (perpClockwise direction) * vec a a - let from = d From + clockwise - let to = d To + clockwise + pi = 3.14159265 + a = sin (d Num * wavelength / pi) * amplitude + direction = (d To) - (d From) + clockwise = norm (perpClockwise direction) * vec a a + from = d From + clockwise + to = d To + clockwise stroke thickness color (line from to) `.trim(), }, @@ -95,19 +117,19 @@ withDotter \\d -> id: "builtin/rainbow", name: "Rainbow", code: ` -wavelength = 0.1 -thickness = 8 +wavelength: 0.1 +thickness: 8 -colorCurve = \\n -> +colorCurve: \\n -> abs (cos n) withDotter \\d -> - let pi = 3.14159265 - let l = wavelength - let r = colorCurve (d Num * l) - let g = colorCurve (d Num * l + pi/3) - let b = colorCurve (d Num * l + 2*pi/3) - let color = rgba r g b 1 + pi = 3.14159265 + l = wavelength + r = colorCurve (d Num * l) + g = colorCurve (d Num * l + pi/3) + b = colorCurve (d Num * l + 2*pi/3) + color = rgba r g b 1 stroke thickness color (line (d From) (d To)) `.trim(), },