let pen_x = 0.7071067811865476;

let pen_y = -0.7071067811865476;

​

let targ;

​

let img;

​

function cline(x1, y1, x2, y2) {

  targ.beginShape();

  targ.vertex(x1 - 0.5 * thickness * pen_x, y1 - 0.5 * thickness * pen_y);

  targ.vertex(x1 + 0.5 * thickness * pen_x, y1 + 0.5 * thickness * pen_y);

  targ.vertex(x2 + 0.5 * thickness * pen_x, y2 + 0.5 * thickness * pen_y);

  targ.vertex(x2 - 0.5 * thickness * pen_x, y2 - 0.5 * thickness * pen_y);

  targ.endShape(CLOSE);

}

​

function ccurve(x1, y1, x2, y2, x3, y3, x4, y4) {

  function eval(t) {

    const d = t * t * t;

    const c = 3 * t * t * (1 - t);

    const b = 3 * t * (1 - t) * (1 - t);

    const a = (1 - t) * (1 - t) * (1 - t);

    return [

      a * x1 + b * x2 + c * x3 + d * x4,

      a * y1 + b * y2 + c * y3 + d * y4,

    ];

  }

​

  let p = eval(0);

  for (let idx = 0; idx < 20; ++idx) {

    const q = eval((idx + 1) / 20.0);

    cline(p[0], p[1], q[0], q[1]);

    p = q;

  }

}

​

function bentLine(x1, y1, x2, y2, bend) {

  if (bend < 0) {

    bentLine(x2, y2, x1, y1, -bend);

  } else if (bend < 1e-7) {

    cline(x1, y1, x2, y2);

  } else {

    const dx = y1 - y2;

    const dy = x2 - x1;

    const cx = 0.5 * (x1 + x2) + bend * dx;

    const cy = 0.5 * (y1 + y2) + bend * dy;

    ccurve(

      x1,

      y1,

      lerp(x1, cx, 0.4),

      lerp(y1, cy, 0.4),

      lerp(x2, cx, 0.4),

      lerp(y2, cy, 0.4),

      x2,

      y2

    );

  }

}

​

function rad(first) {

  const start = random(1);

​

  if (start < 0.2) {

    bentLine(-10, -10, 0, 0, 0.3);

  } else if (start < 0.5) {

    bentLine(-20, 0, -10, -10, 0.3);

    bentLine(-10, -10, 0, 0, 0.3);

  } else if (start < 0.6) {

    bentLine(0, 0, 5, -5, 0.2);

    bentLine(5, -5, 20, 10, 0.4);

  } else if (start < 0.7) {

    bentLine(0, 0, 5, -5, 0.2);

    bentLine(5, -5, 20, 10, 0.4);

    bentLine(20, 10, 0, 30, 0.1);

  } else if (first && start < 0.8) {

    bentLine(0, 25, -20, 0, -0.7);

    bentLine(-20, 0, -10, -10, 0.3);

    bentLine(-10, -10, 0, 0, 0.3);

  } else if (start < 0.9) {

    cline(0, 0, 0, -25);

  } else {

    cline(0, 0, 0, -25);

    bentLine(0, -25, 5, -30, 0.2);

    bentLine(5, -30, 20, -25, 0.2);

  }

​

  if (start < 0.8) {

    const dia = random(1);

    if (dia < 0.05) {

      ccurve(0, -25, 8, -30, 12, -20, 20, -25);

    } else if (dia < 0.1) {

      bentLine(0, -30, 10, -20, 0.2);

      bentLine(10, -30, 20, -20, 0.2);

    }

  }

​

  if (random(1) < 0.05) {

    beginShape();

    vertex(0, 15);

    vertex(30, 15);

    vertex(25, 20);

    vertex(0, 20);

    endShape(CLOSE);

  }

  cline(0, 0, 0, 30);

  targ.push();

  targ.translate(0, -20);

  const end = random(1);

  if (end < 0.2) {

    bentLine(-1, 51, 9, 61, 0.2);

    bentLine(0, 50, 10, 60, 0.2);

  } else if (end < 0.4) {

    bentLine(-1, 51, 9, 61, 0.2);

    bentLine(0, 50, 10, 60, 0.2);

    bentLine(10, 60, 20, 50, 0.2);

  } else if (end < 0.6) {

    cline(0, 50, 0, 75);

  } else if (end < 0.8) {

    cline(0, 50, 0, 75);

    bentLine(-1, 75, 9, 86, 0.2);

    bentLine(0, 75, 10, 85, 0.2);

  } else if (end < 0.9) {

    cline(0, 50, 0, 75);

    ccurve(0, 75, 10, 70, 20, 80, 30, 75);

  } else {

    bentLine(0, 50, 20, 60, 0.2);

  }

  targ.pop();

}

​

function setup() {

  createCanvas(512, 512);

  // https://www.freepik.com/free-photo/vintage-grungy-textured-paper-background_15599867.htm

  img = loadImage( "parchment.jpg" );

}

​

function drawText(g) {

  targ = g;

  g.noStroke();

  g.fill(0);

​

  let y = 70;

  let x = 40;

​

  while (y < height - 100) {

    const lens = [];

    let total = 0;

    let last_short = false;

    let lim = int((width-45) / 20);

​

    while (total < lim) {

      let l = 0;

      if (!last_short && random(1) < 0.2) {

        l = int(random(1, 3));

        last_short = true;

      } else {

        l = int(random(3, 7));

        l = min( l, lim-total )

      }

​

      for (let idx = 0; idx < l; ++idx) {

        targ.push();

        targ.translate(x, y);

        rad(idx == 0);

        targ.pop();

        x += 20;

      }

​

      x += 15;

      total += l + 1;

    }

​

    y += 85;

    x = 40;

  }

}

​

function draw() {

  let gg = createGraphics(width, height);

  gg.background(220);

  gg.noStroke();

  gg.fill(0);

  drawText(gg);

​

  for (let idx = 0; idx < 6000; ++idx) {

    gg.noStroke();

    gg.fill(255, 80);

    gg.ellipse(random(gg.width), random(gg.height), 4, 4);

  }

  blendMode( BLEND );

  image( img, -300, 0 );

  gg.filter(BLUR, 1);

  gg.filter(THRESHOLD);

  gg.filter( ERODE );

  blendMode( MULTIPLY );

  image(gg, 0, 0);

​

  noLoop();

}

​

function keyPressed() {

  if (key == " ") {

    loop();

  } else if( key == 's' ) {

    save( 'output.jpg' );

  }

}

​