​

let cnt = 0;

let btn;

let font;

let conversation;

​

let margin;

​

let chars = [];

let dividedChar = [];

let points = [];

let pointsChar = [];

​

function preload() {

  font = loadFont("KodeMono-Regular.ttf");

}

​

function setup() {

  createCanvas(canvasSize, canvasSize);

  // colorMode(HSB);

  btn = createButton("Talk to me.");

  // console.log(btn.size());

  btn.position(

    width / 2 - btn.size().width / 2,

    height + btn.size().height / 6

  );

  btn.mousePressed(question);

}

​

function draw() {

  var sf = constrain(map(mouseX, 0, width, 0.2, 0.01), 0.01, 0.2);

​

  if (conversation) {

    background(255);

​

    if (cnt == 1) {

      // background(255);

    } else {

      // When the user entered the new words.

      // Reset is needed.

      // let dividedChar = [];

      let points = [];

      let chars = [];

      // let pointsChar = [];

    }

​

    communication(sf);

    saying();

  } else {

    background(255);

    // Nothing happened after the execution

    // PASS

  }

}

​

function setMargin(arr, longest, big) {

  /*

  let wM = width / longest.length; // How long is the longest letter?

  let hM = height / arr.length; // How many letters does it have?

  if (wM > hM) {

    return wM * 0.4;

  }

  else {

    return hM * 0.4; // wM = hM or wM < hM

  }

  */

  let wM = width - longest.length * big;

  return wM;

}

​

function setSize(arr, longest) {

  let temp;

  let w = (width / longest.length) * 0.7;

  let h = (height / arr.length) * 0.7;

  if (w < h) {

    temp = w;

  } else {

    temp = h; // w = h or w < h

  }

​

  // console.log(`*** fontSize: ${temp} ***`);

  margin = textAscent() + temp * 1.25;

  // console.log(`*** Margin: ${margin} ***`);

​

  return temp;

}

​

function question() {

  cnt = 1;

  conversation = prompt("Anything you want to say: ");

}

​

// The importante """setup""" for this project

function communication(factor) {

  // console.log(conversation);

  if (conversation) {

    chars = conversation.split(" ");

    // console.log(chars);

​

    let prevC = ""; // initialisation

    let longestC;

​

    chars.forEach((c) => {

      let currentC = c;

      if (currentC.length > prevC.length) {

        prevC = currentC;

        longestC = currentC;

      } else {

        longestC = prevC;

      }

    });

​

    let cSize = setSize(chars, longestC);

    // console.log(cSize);

​

    let prevYEnd;

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

      // **** Each words ****

      let word = chars[i];

      if (conversation.length == 1) {

        points.push(

          font.textToPoints(word, width / 2, height / 2, cSize, {

            sampleFactor: factor,

          })

        );

      } else {

        // console.log(word);

        if (i == 0) {

          points.push(

            font.textToPoints(word, margin, margin, cSize, {

              sampleFactor: factor,

            })

          );

          prevYEnd = textAscent() + cSize * 1.25;

          // console.log(prevYEnd);

        } else {

          if (prevYEnd + cSize * 1.25 >= height - cSize) {

            prevYEnd = 0;

            margin += cSize;

          }

​

          points.push(

            font.textToPoints(word, margin, prevYEnd + cSize * 1.25, cSize, {

              sampleFactor: factor,

              simplifyThreshold: 0.0, // increase to remove collinear points

            })

          );

          prevYEnd += textAscent() + cSize * 1.25;

          // console.log(prevYEnd);

        }

      }

    }

​

    /*

  chars.forEach((word) => {

    // **** Just in case (divided by characters) ****

    let temp = word.split(""); // e.g. ['T', 'h', 'e']

    let temp2 = [];

    dividedChar.push(temp);

    temp.forEach((ch) => {

      temp2 = font.textToPoints(ch, 0, 0, cSize, {

        sampleFactor: 0.03 // 0.01: Very abstract

      });

      pointsChar.push(temp2);

    });

  });

  */

​

    // Important factors of this artwork

    // console.log(divided);

    // console.log(points);

    // console.log(pointsChar);

  }

}

​

function saying() {

  push();

  background(255);

  // noStroke();

  strokeWeight(map(mouseY, 0, windowHeight, 1.5, 0.3));

  // stroke(0);

​

  // console.log(points);

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

    for (let j = 0; j < points[i].length - 3; j++) {

      stroke(random(0, 255), random(0, 255), random(0, 255));

      // console.log(points[i][j].x, points[i][j].y, points[i][j + 3].x, points[i][j + 3].y);

      // vertex(points[i][j].x, points[i][j].y);

      // vertex(points[i][j + 3].x, points[i][j + 3].y);

      line(

        points[i][j].x,

        points[i][j].y,

        points[i][j + 3].x,

        points[i][j + 3].y

      );

    }

  }

​

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

    for (let j = 0; j < points[i].length - 3; j++) {

      let nx = noise(j * random(0, 10) + frameCount * 0.01) - 0.5;

      let ny = noise(j * random(0, 10) + frameCount * 0.01) - 0.5;

      points[i][j].x += nx;

      points[i][j].y += ny;

​

      if (

        points[i][j].x >= width ||

        points[i][j].y >= height ||

        points[i][j].x <= 0 ||

        points[i][j].y <= 0

      ) {

        nx *= -1;

        ny *= -1;

      }

    }

  }

​

  /*

  points.forEach((cha) => {

    cha.forEach((pt) => {

      circle(pt.x, pt.y, 2);

    });

  });

  */

  pop();

​

  points = [];

}

​