Le design génératif avec JavaScript

                    


  function scribleLine(segment) {
    const scrible = []
    const l = atan2(segment[1][1] - segment[0][1], segment[1][0] - segment[0][0])
    const s = ceil(Math.hypot(segment[1][0] - segment[0][0], segment[1][1] - segment[0][1]))

    beginShape()
    for (let i = 0; i <= s; i++) {
      const nR = i/s * PI * 2
      const n = noise(cos(nR), sin(nR)) * 0.025
      vertex(
        segment[0][0] + cos(l + n) * i,
        segment[0][1] + sin(l + n) * i
      )
    }
    endShape()
  }


  const rows = 16 + round(random() * 16)
  const diagLinesNum = 48 + round(random() * 56)
  const margin = width * 0.1
  const step = (height * 0.8) /  rows

  strokeWeight(2)

  for (let y = 0; y < rows; y++) {
    const initialLine = [
      [ margin/2 + random() * margin * 2, margin + y*step],
      [ width - (margin/2 * (1+random() * 2)), margin + y*step]
    ]
    const numCuts = round(random() * 6)
    const lineLen = initialLine[1][0] - initialLine[0][0]
    const cutLen = lineLen / numCuts;

    if (numCuts) {
      for (let c = 0; c < numCuts; c++) {
        const subLine = [
          [
            initialLine[0][0] + (cutLen * c),
            initialLine[0][1]
          ], [
            initialLine[0][0] + (cutLen * (c+1)) - random() * cutLen * 0.2,
            initialLine[1][1]
          ]
        ]
        scribleLine(subLine)
      }
    } else {
      scribleLine(initialLine)
    }
  }

  for (let i = 0; i < diagLinesNum; i++) {
    const b = [
      margin + random() * (width - margin * 2.8),
      margin * 2 + random() * (height - margin * 3)
    ]
    const l = PI * random(1.5, 2)
    const s = margin * random() * 2
    const e = [b[0] + cos(l) * s, b[1] + sin(l) * s]
    scribleLine([b, e])
  }