* schultzschultz.com/touchtype

 * https://www.instagram.com/p/Cc3Aav4uJfD/

 *

 * One tap - spawn letter, translate

 * Two tap - scale, rotate

 * Three tap - choose letter (better if paddling)

 * Four tap - distort

 * Five tap - stroke width

 */

​

/*

 * TODO:

 * [ ] rotation needs to be incremental like scale for retouch

 * [X 11/03] first letter doesn't seem to spawn

 * [ ] draw scale helper circle

 * [ ] draw rotation helper circle

 */

​

const backgroundColor = "red";

const LETTER_BASE_SIZE = 24;

const GLYPH_SET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

const GLYPH_SELECTOR_R = 120;

let newTouchSetOccuredOnLastFrame = false;

let letters = [];

let currentlyEditingLetter = null;

let currentlyEditingLetterPrevSize = LETTER_BASE_SIZE;

let currentlyEditingLetterPrevRotation = null;

let prevTouches = [];

let scaleReferenceDistance = null;

let rotationReferenceVec = null;

let glyphSelectionReferenceVec = null;

​

class Letter {

  constructor(character, x, y, size, rotation) {

    this.character = character;

    this.x = x;

    this.y = y;

    this.size = size;

    this.rotation = rotation;

  }

}

​

let spaceMono;

function preload() {

  spaceMono = loadFont("assets/SpaceMono-Regular.ttf");

}

​

function setup() {

  // set canvas to window size

  createCanvas(windowWidth, windowHeight);

  textAlign(CENTER, CENTER);

  textFont(spaceMono);

}

​

function draw() {

  background(backgroundColor);

​

  // add and start editing a letter when a new touch interaction starts

  if (touches.length > 0 && prevTouches.length == 0) {

    newTouchSetOccuredOnLastFrame = true;

    letters = letters.concat(

      new Letter("A", touches[0].x, touches[0].y - 100, LETTER_BASE_SIZE, 0)

    );

    currentlyEditingLetter = letters.length - 1;

  } else {

    newTouchSetOccuredOnLastFrame = false;

  }

  if (touches.length == 0 && prevTouches.length > 0) {

    currentlyEditingLetter = null;

  }

  // when two finger touch starts, enable scale and rotation change

  if (touches.length == 2) {

    if (prevTouches.length == 1) {

      scaleReferenceDistance = dist(touches[0].x, touches[0].y, touches[1].x, touches[1].y);

      rotationReferenceVec = createVector(touches[1].x - touches[0].x, touches[1].y - touches[0].y);

      if (currentlyEditingLetter) {

        currentlyEditingLetterPrevSize = letters[currentlyEditingLetter].size;

        currentlyEditingLetterPrevRotation = letters[currentlyEditingLetter].rotation;

      }

    }

  }

  if (touches.length < 2) {

    scaleReferenceDistance = null;

    currentlyEditingLetterPrevSize = LETTER_BASE_SIZE;

    rotationReferenceVec = null;

    currentlyEditingLetterPrevRotation = null;

  }

  // when three finger touch starts, show glyph picker

  if (touches.length == 3) {

    if (prevTouches.length == 2) {

      glyphSelectionReferenceVec = createVector(touches[2].x - touches[1].x, touches[2].y - touches[1].y);

    }

  }

  if (touches.length < 3) {

    glyphSelectionReferenceVec = null;

  }

​

  // for each touch, draw lines between them

  for (var i = 0; i < touches.length - 1; i++) {

    push();

    stroke("white");

    strokeWeight(1);

    line(touches[i].x, touches[i].y, touches[i + 1].x, touches[i + 1].y);

    pop();

  }

​

  // for each touch, draw an ellipse at its location.

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

    push();

    stroke("white");

    strokeWeight(4);

    fill(backgroundColor);

    ellipse(touches[i].x, touches[i].y, 50, 50);

    pop();

​

    push();

    noStroke();

    fill("white");

    textSize(12);

    text(touches[i].x, touches[i].x - 50, touches[i].y);

    text(`#${i + 1}`, touches[i].x, touches[i].y - 50);

​

    translate(touches[i].x, touches[i].y + 50);

    rotate(radians(90));

    text(touches[i].y, 0, 0);

    pop();

  }

​

  if (

    currentlyEditingLetter != null &&

    (touches.length == 1 || touches.length == 2)

  ) {

    // translate

    if (prevTouches.length >= 1) {

      letters[currentlyEditingLetter].x += touches[0].x - prevTouches[0].x;

      letters[currentlyEditingLetter].y += touches[0].y - prevTouches[0].y;

    }

    // scale & rotate

    if (touches.length == 2) {

      let letterScale = dist(touches[0].x, touches[0].y, touches[1].x, touches[1].y) / scaleReferenceDistance;

      console.log(currentlyEditingLetterPrevSize, letterScale, scaleReferenceDistance, letters[currentlyEditingLetter].size);

      letters[currentlyEditingLetter].size = currentlyEditingLetterPrevSize * letterScale;

      let letterRotation = rotationReferenceVec.angleBetween(createVector(touches[1].x - touches[0].x, touches[1].y - touches[0].y));

      letters[currentlyEditingLetter].rotation = letterRotation;

    }

  }

  if (touches.length == 3) {

    // draw glyph picker

    // TODO: https://editor.p5js.org/mngyuan/sketches/2pS8qWz4h

    push();

    pop();

  }

​

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

    push();

    noStroke();

    fill("white");

    textSize(letters[i].size);

    translate(letters[i].x, letters[i].y);

    rotate(letters[i].rotation);

    text(letters[i].character, 0, 0);

    pop();

  }

​

  prevTouches = Array.from(touches);

​

  // DEBUG

  fill("white");

  textAlign(LEFT);

  text(`newTouch:\t${newTouchSetOccuredOnLastFrame}`, 20, 20);

  text(`letters.length:\t${letters.length}`, 20, 40);

  text(`currentlyEditing:\t${currentlyEditingLetter}`, 20, 60);

  text(`letters[currentlyEditing].size:\t${letters[currentlyEditingLetter]?.size}`, 20, 80);

}

​

// do this prevent default touch interaction

function mousePressed() {

  return false;

}

​

document.addEventListener("gesturestart", function (e) {

  e.preventDefault();

});

​