pencils-hd.js

import {
  Command,
  GUI,
  String,
  Float,
  Key,
  Control
} from '../libraries/gui/gui.js'

import {
  getLargeCanvas
} from '../libraries/misc.js'

import {
  oldieHD
} from '../libraries/effects.js'

// Base to avoid writing always the same

const sketch = (s) => {

  let gui, canvas, inner = 57,
    outer = 74,
    innerH, outerH
  let hd = 1.0
  innerH = inner * hd
  outerH = outer * hd
  let largeCanvas
  s.setup = () => {
    let {
      w,
      h
    } = getLargeCanvas(s, 1600)
    s.pixelDensity(1)
    canvas = s.createCanvas(w, h)
    canvas.mousePressed(() => {})
    s.frameRate(20)
    gui = createGUI()
    gui.toggle(() => {
      gui.spin(() => {
        plot();
        gui.spin();
      });
    });
  }

  function pencil(scene, x, y, inner, outer, leadColor) {
    // Draws a pencil bottom with these parameters. Leadcolor is used
    // for the outer color, lead proper uses a darker shade via color
    // lerping.
    //console.log(`Pencil at ${x}, ${y} (${inner}, ${outer})`)
    let center = {
      x: x,
      y: y
    }
    const [r, g, b] = [s.noise(x, y), s.noise(y, x), s.noise(x + y, y * x)]
    let lightBrown = s.color(224 + 30 * r, 158 + 30 * g, 64 + 30 * b, 100)
    const darkBrown = s.color(151, 95, 49)
    // Outer shell, filled in noised brown-ish
    // Possible improvement: very subtle (1-2 px) curve
    scene.beginShape()
    scene.stroke(leadColor)
    scene.strokeWeight(hd * 4)
    scene.fill(darkBrown)
    for (let i = 0; i < 6; i++) {
      let hex = center.x + outer * s.cos(i * 2.0 * s.PI / 6)
      let hey = center.y + outer * s.sin(i * 2.0 * s.PI / 6)
      scene.vertex(hex, hey)
    }
    scene.endShape(s.CLOSE)
    // Color veins from outside to simulate color bleed from the 
    // outer shell.
    let density = 10
    let factor = 10
    scene.stroke(leadColor)
    for (let i = 0; i <= 5; i++) {
      let x1 = center.x + outer * s.cos(i * 2.0 * s.PI / 6)
      let y1 = center.y + outer * s.sin(i * 2.0 * s.PI / 6)
      let x2 = center.x + outer * s.cos((i + 1) * 2.0 * s.PI / 6)
      let y2 = center.y + outer * s.sin((i + 1) * 2.0 * s.PI / 6)
      scene.strokeWeight(hd * 3 * s.noise(x1, y1))
      for (let j = 0; j < density; j++) {
        let startx = x1 + j * (x2 - x1) / density
        let starty = y1 + j * (y2 - y1) / density
        let dx = center.x - startx
        let dy = center.y - starty
        let norm = Math.sqrt(dx * dx + dy * dy)
        let length = hd * s.noise(startx, starty)
        let endx = startx + dx * length * factor / norm
        let endy = starty + dy * length * factor / norm
        scene.line(startx, starty, endx, endy)
      }
    }
    // Simulating wood grain using a similar trick to what I did
    // in Iris. Lines from out to in, lighter brown with transparency
    density = hd * 30
    factor = 35 * hd
    let shift = 3 * hd
    for (let i = 0; i <= 5; i++) {
      let x1 = center.x + outer * s.cos(i * 2.0 * s.PI / 6)
      let y1 = center.y + outer * s.sin(i * 2.0 * s.PI / 6)
      let x2 = center.x + outer * s.cos((i + 1) * 2.0 * s.PI / 6)
      let y2 = center.y + outer * s.sin((i + 1) * 2.0 * s.PI / 6)
      scene.strokeWeight(hd * 2 * s.noise(x1, y1))
      for (let j = 0; j < density; j++) {
        lightBrown.setAlpha(50 + 10 * s.noise(i, j))
        scene.stroke(lightBrown)
        let squish = s.noise(i, j)
        let startx = x1 + (j + squish) * (x2 - x1) / density
        let starty = y1 + (j + squish) * (y2 - y1) / density
        let dx = center.x - startx
        let dy = center.y - starty
        let norm = Math.sqrt(dx * dx + dy * dy)
        let length = s.noise(startx, starty)
        let endx = startx + dx * length * factor / norm
        let endy = starty + dy * length * factor / norm
        scene.line(startx + dx * shift / norm, starty + dy * shift / norm, endx, endy)
      }
    }
    // Same but coming from inside
    density = hd * 150
    factor = outer
    shift = 0
    for (let i = 0; i <= 5; i++) {
      const x1 = center.x + outer * s.cos(i * 2.0 * s.PI / 6)
      const y1 = center.y + outer * s.sin(i * 2.0 * s.PI / 6)
      const x2 = center.x + outer * s.cos((i + 1) * 2.0 * s.PI / 6)
      const y2 = center.y + outer * s.sin((i + 1) * 2.0 * s.PI / 6)
      scene.strokeWeight(hd * s.noise(y1, x1))
      for (let j = 0; j < density; j++) {
        lightBrown.setAlpha(30 + 10 * s.noise(i * x, j))
        scene.stroke(lightBrown)
        const endx = x1 + j * (x2 - x1) / density
        const endy = y1 + j * (y2 - y1) / density
        const dx = endx - center.x
        const dy = endy - center.y
        const norm = Math.sqrt(dx * dx + dy * dy)
        const length = s.noise(i, j)
        scene.line(center.x + dx * shift / norm, center.y + dy * shift / norm, center.x + dx * length / norm * factor, center.y + dy * length / norm * factor)
      }
    }
    // Wiggly inner lead, similar to the main color in iris, using
    // a poorly closed curve
    const black = s.color(0)
    const darkLead = s.lerpColor(leadColor, black, 0.2)
    const evenDarkerLead = s.color(leadColor, black, 0.4)
    const adjustedLength = inner / 20
    scene.beginShape()
    for (let i = 0; i < 50; i++) {
      const angle = i * s.TWO_PI / 50
      const colour = s.lerpColor(darkLead, evenDarkerLead, s.random())
      scene.fill(darkLead)
      scene.stroke(evenDarkerLead)
      const r = inner / 2 + adjustedLength * s.noise(x * y * i)
      scene.curveVertex(x + r * Math.cos(angle), y + r * Math.sin(angle))
    }
    scene.endShape(s.CLOSE)
  }
  
  function plot() {
    outer = outerH * hd
    inner = innerH * hd

    let scene = s.createGraphics(hd * s.width, hd * s.height)
    scene.background(s.color(0))
    let arch = outer - outer * Math.sqrt(3) / 2;
    const hgap = outer + 2 * outer + 6 * hd
    const vgap = outer - arch + 2 * hd
    // Set up for an hexagonal grid with a very mild gap between
    // each pencil
    for (let i = 0; i <= scene.width / hgap + 1; i++) {
      for (let j = 0; j <= scene.height / vgap + 1; j++) {
        const hshift = j % 2 == 0 ? -2 * hd : outer / 2 + outer + 1 * hd
        const vshift = j % 2 != 0 ? 0 : 0
        pencil(scene, i * hgap + hshift, j * vgap + vshift, inner, outer, s.color(200 * s.noise(i * j), 200 * s.noise(i, j), 200 * s.noise(j, i)))
      }

    }
    // This granulate is based on a blog post, link in the source.
    // Granulating improves the wooden feeling by a lot. This is the 
    // same effect I used for the "old cloth feel" in 80s. It's super
    // slow though
    oldieHD(s, scene, 0.1 * hd, hd, s.MULTIPLY)
    largeCanvas = scene
    let c = scene.get()
    c.resize(s.width, 0)
    s.image(c, 0, 0)
  }

  s.draw = () => {
    s.noLoop()
  }

  function createGUI() {
    let info =
      "Inspired by <a href=\"https://twitter.com/meezwhite/status/1611791711969181697?s=12&t=ym-awO5tGUYR8G03Ua4bww\">this</a> Genuary entry by <a href=\"https://twitter.com/meezwhite\">meezwhite</a>"
    let subinfo = "Tap the canvas to enable the controls below<br/>Very high resolutions can fail depending on the browser"
    let S = new Key("s", () => {
      largeCanvas.save("img.png")
    })
    let saveCmd = new Command(S, "save the canvas")
    let R = new Key("r", () => {
      gui.spin(() => {
        canvas.clear()
        largeCanvas.clear()
        s.noiseSeed(s.random(-100, 100))
        plot();
        gui.spin();
      });
    });
    let resetCanvas = new Command(R, "redraw")

    let incR = new Key(")", () => {
      innerH += 5
      outerH += 7
    })
    let decR = new Key("(", () => {
      if (innerH > 5) {
        innerH -= 5
        outerH -= 7
      }
    })
    let rInner = new String(() => innerH + "/" + outerH)
    let rInnerControl = new Control([decR, incR],
      "+/- inner/outer radius", rInner)
    let decH = new Key(",", () => {
      if (hd > 0) {
        hd -= 0.1
      }
    })
    let incH = new Key(".", () => {
      if (hd < 10) {
        hd += 0.1
      }
    })
    let hdInfo = new Float(() => hd)
    let hdControl = new Control([decH, incH],
      "+/- resolution export factor", hdInfo)

    let gui = new GUI("Pencils, RB 2023/03", info, subinfo, [saveCmd,
        resetCanvas
      ],
      [rInnerControl, hdControl])

    let QM = new Key("?", () => gui.toggle())
    let hide = new Command(QM, "hide this")

    gui.addCmd(hide)
    gui.update()
    return gui
  }

  s.keyReleased = () => {
    gui.dispatch(s.key)
  }
}

p5.disableFriendlyErrors = true
let p5sketch = new p5(sketch)