Merge branch 'main' of github.com:polylux-typ/jotter

README.md

···
 [Fantastque Sans Mono](https://github.com/belluzj/fantasque-sans/releases).
 Either make sure you have them installed or specify other fonts in the template.
 
+This is an opinionated template on purpose.
+However, if you like the overall handwritten asthetic but prefer not to have the
+spiral binding to the left and/or the dots in the background, you can disable
+them by setting the `binding` and `dots` keyword arguments to `false` in the
+`setup` function.
+
 ![thumbnail](thumbnail.png)
 
 

lib.typ

···
 
 #let highlight-color-state = state("jotter-highlight-color", red)
 
-#let setup(header: none, highlight-color: red, body) = {
+#let setup(
+  header: none,
+  highlight-color: red,
+  binding: true,
+  dots: true,
+  body,
+) = {
   highlight-color-state.update(highlight-color)
   set page(
     paper: "presentation-16-9",
     margin: (left: 2.3cm, top: 1cm, rest: 1cm),
-    fill: tiling(
-      spacing: (5mm, 5mm),
-      {
-        place(square(width: 6mm, stroke: none, fill: white))
-        circle(radius: 1pt, fill: white.darken(10%))
-      },
-    ),
-    background: {
+    fill: if dots {
+      tiling(
+        spacing: (5mm, 5mm),
+        {
+          place(square(width: 6mm, stroke: none, fill: white))
+          circle(radius: 1pt, fill: white.darken(10%))
+        },
+      )
+    },
+    background: if binding {
       set align(top + left)
       let gap = 1.5cm
       let color = rgb("8aa")
···
       context box(
         curve(
           stroke: (thickness: .05em, cap: "round", paint: text.fill),
-          curve.move((0em, 0em)),
           curve.quad((.8em, -.9em), (1em, -2em)),
         ),
       )
···
         let w = measure(header).width
         curve(
           stroke: (thickness: .05em, cap: "round", paint: text.fill),
-          curve.move((0em, 0em)),
           curve.quad((.25 * w, -.3em), (1.2 * w, 0em)),
         )
       }
···
     move(
       dy: -.8em,
       curve(
-        stroke: (thickness: .05em, cap: "round", paint: text.fill),
-        curve.move((0em, 0em)),
+        stroke: (thickness: .04em, cap: "round", paint: text.fill),
+        fill: text.fill,
         curve.quad((.75 * w, -.5em), (w, 0em)),
+        curve.quad((w + .05em, .03em), (w, .06em)),
+        curve.quad((.75 * w, -.495em), (0em, 0em)),
       ),
     )
   })
···
 
 #let len2int(l) = int.from-bytes(l.pt().to-bytes())
 #let hasher(acc, val) = acc.bit-xor(val)
+#let hashed-position() = {
+  let (x, y) = here().position()
+  let n = counter("logical-slide").get()
+  (len2int(x), len2int(y), ..n).reduce(hasher)
+}
 
 #let framed-block(
   body,
···
   let (width: w, height: h) = measure(..sz, blocked-body)
   let deflect = sloppiness * (w + h) / 2
 
-  let pos = here().position()
-  let hash-components = (
-    pos.page,
-    len2int(pos.x),
-    len2int(pos.y),
-    len2int(w),
-    len2int(h),
-  )
-  let hash = hash-components.reduce(hasher)
+  let hash = (hashed-position(), len2int(w), len2int(h)).reduce(hasher)
   let rng = suiji.gen-rng-f(hash)
   let (rng, c1) = suiji.random-f(rng)
   let (rng, c2) = suiji.random-f(rng)
···
 
   let c(p) = curve(
     stroke: stroke(thickness: .1em, cap: "round", paint: p),
-    curve.move((0pt, 0pt)),
     curve.quad((c1 * w, s1 * deflect), (w + deflect / 3, 0pt)),
     curve.move((w - deflect / 3, -deflect / 3)),
     curve.quad((w + s2 * deflect, c2 * h), (w - deflect / 3, h + deflect / 3)),
···
   blocked-body
 })
 
-#let post-it(body, fill: rgb("#FDE85F"), angle: -10deg) = rotate(
-  angle,
-  reflow: true,
-  {
-    place(
-      dx: .0em,
-      dy: .0em,
-      umbra.shadow-path(
-        (1cm, 1cm),
-        (1cm, 5cm),
-        (5cm, 5cm),
-        (5cm, 4.9cm),
-        (4cm, 1cm),
-        correction: 10deg,
-        closed: false,
-      ),
-    )
-    place(
-      curve(
-        fill: fill,
-        curve.line((5cm, 0cm)),
-        curve.quad((5cm, 2.5cm), (5.2cm, 5cm)),
-        curve.quad((2.5cm, 5.2cm), (.1cm, 5cm)),
-        curve.quad((0cm, 2.5cm), (0cm, 0cm)),
-      ),
-    )
-    box(inset: .5em, width: 5cm, height: 5cm, clip: true, body)
-  },
-)
+#let post-it(
+  body,
+  fill: rgb("#FDE85F"),
+  angle: -10deg,
+  sloppiness: .2,
+) = context {
+  let hash = hashed-position()
+  let rng = suiji.gen-rng-f(hash)
+  let (rng, angle-deviation) = suiji.uniform-f(rng, low: -1, high: 1)
+  let angle = (1 + sloppiness * angle-deviation) * angle
+  let (rng, color-deviation) = suiji.uniform-f(rng, low: -1, high: 1)
+  let fill = fill.darken(sloppiness * color-deviation * 40%)
+
+  rotate(
+    angle,
+    reflow: false,
+    {
+      place(
+        dx: .0em,
+        dy: .0em,
+        umbra.shadow-path(
+          (1cm, 1cm),
+          (1cm, 5cm),
+          (5cm, 5cm),
+          (5cm, 4.9cm),
+          (4cm, 1cm),
+          correction: 10deg,
+          closed: false,
+        ),
+      )
+      place(
+        curve(
+          fill: fill,
+          curve.line((5cm, 0cm)),
+          curve.quad((5cm, 2.5cm), (5.2cm, 5cm)),
+          curve.quad((2.5cm, 5.2cm), (.1cm, 5cm)),
+          curve.quad((0cm, 2.5cm), (0cm, 0cm)),
+        ),
+      )
+      box(inset: .5em, width: 5cm, height: 5cm, clip: true, body)
+    },
+  )
+}

template/slides.typ

···
 
 #show raw: set text(font: "Fantasque Sans Mono")
 
-#show: setup.with(header: [A short title], highlight-color: red)
+#show: setup.with(
+  header: [A short title],
+  highlight-color: red,
+  binding: true,
+  dots: true,
+)
 
 #title-slide[My interesting title][
   A subtitle
···
 
 #slide[
   = Highlighting content
+
+  // #framed-block and #post-it accept a sloppiness parameter that determine how
+  // randomized they are.
+  // #framed-block also accepts inset, width, and height like the standard
+  // #block.
 
   #toolbox.side-by-side[
     #grid(