​

var letters = [];

var density = 2.5;

var ribbonWidth = 92;

var shapeColor;

var fontSize = 100;

var pathSimplification = 0;

var pathSampleFactor = 0.1;

​

var lineBreak = 0;

​

var textTyped = "a";

var sliderFont;

var sliderWidth;

var sliderDensity;

var sliderPath;

​

var isWidthVoiceControlled = false;

var isRatioVoiceControlled = false;

​

var widthButton;

var pathButton;

var fontSelect;

​

var font1;

var font2;

var font3;

var font4;

var font5;

var currentFont;

var mic;

​

var font1Name = "Evelynus";

var font2Name = "Sarah";

var font3Name = "Sheila";

var font4Name = "MoWA";

var font5Name = "E";

function preload() {

  font2 = loadFont("data/SarahJ-Bold.otf");

  font1 = loadFont("data/Evelynus-Regular.otf");

  font3 = loadFont("data/SheilaBold-Regular.otf");

  font4 = loadFont("data/MoWA-Regular.otf");

  font5 = loadFont("data/EBGaramond08-Regular.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  mic = new p5.AudioIn();

  mic.start();

  noFill();

  strokeWeight(1);

  shapeColor = color(255);

  sliderFont = createSlider(80, 400, 100);

  sliderFont.position(150, 10);

  sliderFont.style("width", "80px");

​

  sliderDensity = createSlider(1, 10, 2.5);

  sliderDensity.position(150, 50);

  sliderDensity.style("width", "80px");

​

  sliderWidth = createSlider(0, windowWidth, 0);

  sliderWidth.position(150, 90);

  sliderWidth.style("width", "80px");

​

  widthButton = createButton("Voice Control");

  widthButton.position(250, 90);

  widthButton.mousePressed(switchWidthControl);

  widthButton.style("background-image", "/data/icon-mic.png");

​

  sliderPath = createSlider(0, windowHeight, 0);

  sliderPath.position(150, 130);

  sliderPath.style("width", "80px");

  pathButton = createButton("Voice Control");

  pathButton.position(250, 130);

  pathButton.mousePressed(switchRatioControl);

  fontSelect = createSelect();

  fontSelect.position(150, 170);

  fontSelect.option(font1Name);

  fontSelect.option(font2Name);

  fontSelect.option(font3Name);

  fontSelect.option(font4Name);

  fontSelect.option(font5Name);

  //fontSelect.changed(loadFont);

  createLetters();

}

​

function draw() {

  background(0);

  //fill(255);

  text("Font Size", 30, 23);

  text("Desnity", 30, 63);

  text("Ribbon Width", 30, 103);

  text("Simplification Ratio", 30, 143);

  text("Font", 30, 183);

  let vol = mic.getLevel();

  if (isWidthVoiceControlled) {

    let h = map(vol, 0, 0.5, 0, windowWidth);

    //console.log(vol);

    text("On", 350, 103);

    sliderWidth.value(h);

    sliderWidth.hide();

  } else {

    sliderWidth.show();

  }

​

  if (isRatioVoiceControlled) {

    let h = map(vol, 0, 0.5, 0, windowHeight);

    text("On", 350, 143);

    sliderPath.value(h);

    sliderPath.hide();

  } else {

    sliderPath.show();

  }

​

  translate(50, height * 0.5);

​

  fontSize = sliderFont.value();

  density = sliderDensity.value();

​

  pathSampleFactor = 0.1 * pow(0.08, sliderPath.value() / width);

  ribbonWidth = map(sliderWidth.value(), 0, height, 10, 70);

​

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

    letters[i].draw();

  }

  createLetters();

}

​

function createLetters() {

  letters = [];

  var chars = textTyped.split("");

​

  var x = 0;

  var lineBreak = 0;

  var y = 0;

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

    if (i > 0) {

      var charsBefore = textTyped.substring(0, i);

      //x = font.textBounds(charsBefore, 0, 0, fontSize).w;

      y = lineBreak * fontSize;

    }

    if (chars[i] == "@") {

      lineBreak++;

      x = 0;

      continue;

    }

​

    var newLetter = new Letter(chars[i], x, y);

    letters.push(newLetter);

    x += fontSize *0.6;

  }

}

​

function Letter(char, x, y) {

  this.char = char;

  this.x = x;

  this.y = y;

​

  Letter.prototype.draw = function () {

    let font = font1;

    currentFont = fontSelect.value();

    if (currentFont == font1Name)

      font = font1;

    if (currentFont == font2Name)

      font = font2;

    if (currentFont == font3Name)

      font = font3;

    if (currentFont == font4Name)

      font = font4;

    if (currentFont == font5Name)

      font = font5;

    var path = font.textToPoints(this.char, this.x, this.y, fontSize, {

      sampleFactor: pathSampleFactor,

    });

    stroke(shapeColor);

​

    for (var d = 0; d < ribbonWidth; d += density) {

      beginShape();

​

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

        var pos = path[i];

        var nextPos = path[i + 1];

​

        if (nextPos) {

          var p0 = createVector(pos.x, pos.y);

          var p1 = createVector(nextPos.x, nextPos.y);

          var v = p5.Vector.sub(p1, p0);

          v.normalize();

          v.rotate(HALF_PI);

          v.mult(d);

          var pneu = p5.Vector.add(p0, v);

          curveVertex(pneu.x, pneu.y);

        }

      }

​

      endShape(CLOSE);

    }

  };

}

​

function keyReleased() {

  if (keyCode == CONTROL) saveCanvas(gd.timestamp(), "png");

​

  if (keyCode == LEFT_ARROW) density *= 1.25;

  if (keyCode == RIGHT_ARROW) density /= 1.25;

​

  if (keyCode == UP_ARROW) {

    fontSize *= 1.1;

    createLetters();

  }

  if (keyCode == DOWN_ARROW) {

    fontSize /= 1.1;

    createLetters();

  }

​

  //if (keyCode == ENTER) createLetters();

  if (keyCode == ENTER) {

    textTyped += "@";

    createLetters();

  }

}

​

function keyPressed() {

  if (keyCode == DELETE || keyCode == BACKSPACE) {

    if (textTyped.length > 0) {

      textTyped = textTyped.substring(0, textTyped.length - 1);

      createLetters();

    }

  }

}

​

function keyTyped() {

  if (keyCode >= 32) {

    textTyped += key;

    createLetters();

  }

}

​

function loadFont() {

  //currentFont = fontSelect.value();

}

​

function switchWidthControl() {

  isWidthVoiceControlled = !isWidthVoiceControlled;

}

​

function switchRatioControl() {

  isRatioVoiceControlled = !isRatioVoiceControlled;

}

​