* Drawing tool 3D exploded isometric text.

 *

 * MOUSE

 * position x          : path simplification

 * position y          : ribbon width

 *

 * KEYS

 * arrow right         : increase path density

 * arrow left          : decrease path density

 * arrow up            : increase font size

 * arrow down          : decrease font size

 * control             : save png

 *

 */

'use strict';

​

var letters = [];

var density = 2.5;

var ribbonWidth = 92;

var shapeColor;

var fontSize = 150;

var pathSimplification = 0;

var pathSampleFactor = 0.1;

var front = false;

​

var textTyped = 'Design';

​

var textIdeate = 'Ideate';

var textModel = 'Model';

var textSketch = 'Sketch';

​

var font;

var colorOpacity;

var bShape;

​

function preload() {

  font = loadFont('data/NotoSans-Bold.ttf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textAlign(CENTER, CENTER);

  noFill();

  strokeWeight(1);

  shapeColor = color('rgba(255, 255, 255, .25)');

​

  createLetters();

}

​

function draw() {

  background('rgba(0, 0, 0, .08)');

​

  translate(windowWidth/4 - 50, height * 0.45);

  scale(1, 0.866, 1);

  shearX(radians(30));

  rotate(radians(30));

​

  pathSampleFactor = 1 * pow(0.02, mouseX / width);

  //ribbonWidth = map(mouseY, 0, height, 1, 200);

  ribbonWidth= 1;

​

  drawLetters(POINTS, -275);

​

  drawLetters(LINES, 0);

  drawLetters(QUADS, 275);

​

}

​

function drawLetters(dBShape, offSetY) {

  var y1;

  var y2;

  var y3;

  var y4;

  var mouseColor;

  bShape= dBShape;

​

​

  push();

​

    y1 = -25 + offSetY;

    translate(25, y1);

    front = false;

    //bShape= POINTS;

    shapeColor = color('rgba(255, 255, 255, .05)');

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

      letters[i].draw();

    }

  pop();

  push();

    y2 = offSetY;

    translate(0, y2);

    front = true;

    //bShape= POINTS;

    shapeColor = color('rgba(255, 255, 255, 1)');

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

      letters[i].draw();

    }

  pop();

  push();

    y3 = 50 + offSetY;

    translate(-25, y3);

    front = false;

    //bShape= POINTS;

    fill('rgba(161, 90, 255, .5)');

    shapeColor = color('rgba(255, 255, 255, 1)');

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

      letters[i].draw();

    }

  pop();

  push();

    y4 = -50 + offSetY;

    translate(50, y4);

    front = false;

    fill('rgba(26, 187, 254, .5)');

    shapeColor = color('rgba(255, 255, 255, 1)');

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

      letters[i].draw();

    }

  pop();

​

}

​

​

​

function createLetters() {

  letters = [];

  var chars = textTyped.split('');

​

  var x = 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;

    }

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

    letters.push(newLetter);

  }

}

​

function Letter(char, x, y) {

  this.char = char;

  this.x = x;

  this.y = y;

​

  Letter.prototype.draw = function() {

    var path = font.textToPoints(this.char, this.x, this.y, fontSize, {sampleFactor: pathSampleFactor});

    // How to make color fade over time

    stroke(shapeColor);

​

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

​

      beginShape(bShape);

​

      //Opacity based on density

      //colorOpacity = 0.1 + d/100;

      //shapeColor = color('rgba(0, 0, 255, .5)');

​

​

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

        var pos = path[i];

        var nextPos = path[i + 1];

        if (front) {

          push();

          stroke('rgba(255, 255, 255, .15)');

          line(pos.x, pos.y, pos.x + 25, pos.y + -25);

          pop();

        }

​

        if (nextPos) {

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

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

          //line(nextPos.x, nextPos.y, nextPos.x + 25, nextPos.y + -25);

​

          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();

}

​

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();

  }

}

​