// http://tdctokyo.org/eng/wp/wp-content/uploads/2010/08/375d64aec36b9acd72232efd01c79ee3.jpg

// context: https://rtp.media.mit.edu/

​

// Dev. steps:

// Structure idea: https://editor.p5js.org/CedHon/sketches/0zdiZuCI5X

// 1st font attempt: https://editor.p5js.org/CedHon/sketches/5R_n1oeXQ

// 3d exploration: https://editor.p5js.org/CedHon/sketches/Xjmdljg0O

​

let font;

let fontData;

​

function drawPathOutline(cmds) {

  // current pen position

  let cx = 0;

  let cy = 0;

  // start position of current contour

  let startX = 0;

  let startY = 0;

  for (let cmd of cmds) {

    switch (cmd.type) {

      case 'M':

        startX = cmd.x;

        startY = cmd.y;

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'L':

        line(cx, cy, cmd.x, cmd.y);

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'C':

        bezier(cx, cy, cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'Q':

        beginShape();

        vertex(cx, cy);

        quadraticVertex(cmd.x1, cmd.y1, cmd.x, cmd.y);

        endShape();

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'Z':

        // to complete path

        line(cx, cy, startX, startY);

        break;

    }

  }

}

​

function preload() {

  fontData = loadBytes('MoRiSaWa.ttf');

}

​

let MoRiSaWa = "モリサワ";

let paths = [];

let widths = [];

let offset;

​

function setup() {

  createCanvas(500, 700);

  offset = width / 8;

  font = opentype.parse(fontData.bytes.buffer);

​

  // get each character's vectorized path, and its width

  for (i = 0; i < MoRiSaWa.length; i++) {

    paths[i] = font.getPath(MoRiSaWa[i], 0, 2 * offset / 3, 2 * offset);

    widths[i] = paths[i].getBoundingBox().x2;

  }

}

​

function draw() {

  clear();

  background(255);

  strokeWeight(1);

  let x = 0;

  for (i = 0; i < MoRiSaWa.length; i++) {

    let x_curve = x;

    let letter_rand = random(10.0, 16.0);

​

    for (y = offset; y < height + offset; y += 1) {

      let breeze = sin(2*PI*y/height)/16 + 6 * width / 16;

      x_curve += (4 * y / height) * (breeze - x) / width;

      x_curve += sin(8*PI*y/height) / letter_rand;

​

      let decrescendo = map(y, offset,height+offset, 25, -7);

      stroke(0,0,60, decrescendo);

​

      push();      

      translate(x_curve, y);

      drawPathOutline(paths[i].commands);

      pop();

    }

    x += widths[i];

  }

​

  // final touch: bold MoRiSaWa!

  x = 0;

  for (i = 0; i < MoRiSaWa.length; i++) {

    push();

    translate(x, offset);

    paths[i].draw(drawingContext);

    pop();

    x += widths[i];

  }

​

  noLoop();

}