Experimental Type

let newText;

let w, h, sW, newCol;

let col = ['#010b0e', '#a286ef', '#f0be36', '#1cbb7c', '#0D47D2'];

let maxC = 12;

​

let alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z","0","1","2","3","4","5","6","7","8","9","_"];

​

​

let active = true;

let input;

let sliderC;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  input = createInput("abcdefghijklmnopqrstuvwxyz0123456789");

​

  sliderC = createSlider(1, maxC, maxC-5);

  sliderC.style('width', '120px');

  newCol = Math.floor(random(1,col.length));

}

​

function draw() {

  background(col[0]);

  strokeJoin(ROUND);

  noFill();

​

  type();

  // allLetters()

  // stroke(col[4]);

  // letter5(0,0,width,height);

​

}

​

​

​

function colorDots(){

  strokeWeight(20);

  for (let i=1; i<5; i++) {

    stroke(col[i]);

    console.log(i);

    point(200 + i*30,40);

  }

}

​

function type() {

  // colorDots();

  input.position(30, 30);

  sliderC.position(30, 60);

  let columns = maxC+1-sliderC.value();

​

  newText = input.value();

  newText = newText.toUpperCase();

  newText = newText.replace(/\s/g , "_"); //change and space to an underscore

​

  let textArray = newText.split("");

​

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

    if (alphabet.includes(textArray[i]) == false) {

      textArray.splice(i, 1);

      i = 0;

    }

  }

​

  let x = Math.ceil(textArray.length / columns);

  textAlign(CENTER, CENTER);

​

  let i, j, temparray;

  for (i = 0, j = textArray.length; i < j; i += columns) {

    temparray = textArray.slice(i, i + columns);

    for (let k = 0; k < temparray.length; k++) {

      // rect(width / columns * k, i * height / x / columns, width / columns, height / x)

      // text(temparray[k], width / columns * k, i * height / x / columns, width / columns, height / x)

      stroke(col[newCol]);

      let drawLetter = 'letter' + temparray[k];

      eval(drawLetter)(width / columns * k, i * height / x / columns, width / columns, height / x);

    }

  }

​

}

​

function allLetters() {

  stroke(col[1]);

  letterA(0, 0, width / 7, height / 5);

  stroke(col[2]);

  letterB(width / 7, 0, width / 7, height / 5);

  stroke(col[3]);

  letterC(width / 7 * 2, 0, width / 7, height / 5);

  stroke(col[4]);

  letterD(width / 7 * 3, 0, width / 7, height / 5);

  stroke(col[1]);

  letterE(width / 7 * 4, 0, width / 7, height / 5);

  stroke(col[2]);

  letterF(width / 7 * 5, 0, width / 7, height / 5);

  stroke(col[3]);

  letterG(width / 7 * 6, 0, width / 7, height / 5);

  stroke(col[4]);

  letterH(0, height / 5, width / 7, height / 5);

  stroke(col[1]);

  letterI(width / 7, height / 5, width / 7, height / 5);

  stroke(col[2]);

  letterJ(width / 7 * 2, height / 5, width / 7, height / 5);

  stroke(col[3]);

  letterK(width / 7 * 3, height / 5, width / 7, height / 5);

  stroke(col[4]);

  letterL(width / 7 * 4, height / 5, width / 7, height / 5);

  stroke(col[1]);

  letterM(width / 7 * 5, height / 5, width / 7, height / 5);

  stroke(col[2]);

  letterN(width / 7 * 6, height / 5, width / 7, height / 5);

  stroke(col[3]);

  letterO(0, height / 5 * 2, width / 7, height / 5);

  stroke(col[4]);

  letterP(width / 7, height / 5 * 2, width / 7, height / 5);

  stroke(col[1]);

  letterQ(width / 7 * 2, height / 5 * 2, width / 7, height / 5);

  stroke(col[2]);

  letterR(width / 7 * 3, height / 5 * 2, width / 7, height / 5);

  stroke(col[3]);

  letterS(width / 7 * 4, height / 5 * 2, width / 7, height / 5);

  stroke(col[4]);

  letterT(width / 7 * 5, height / 5 * 2, width / 7, height / 5);

  stroke(col[1]);

  letterU(width / 7 * 6, height / 5 * 2, width / 7, height / 5);

  stroke(col[2]);

  letterV(0, height / 5 * 3, width / 7, height / 5);

  stroke(col[3]);

  letterW(width / 7, height / 5 * 3, width / 7, height / 5);

  stroke(col[4]);

  letterX(width / 7 * 2, height / 5 * 3, width / 7, height / 5);

  stroke(col[1]);

  letterY(width / 7 * 3, height / 5 * 3, width / 7, height / 5);

  stroke(col[2]);

  letterZ(width / 7 * 4, height / 5 * 3, width / 7, height / 5);

​

​

}

​

function letter_(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 4, h * 9);

  strokeWeight(sW);

  push();

  translate(x, y);

​

​

  pop();

}

​

function letterA(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 4, h * 9);

  strokeWeight(sW);

  push();

  translate(x, y);

  // text('a',wid/2,hei/2);

​

  beginShape();

  vertex(w, h * 9);

  vertex(w, nH);

  vertex(w * 5, h);

  vertex(w * 9, h * 4);

  vertex(w * 9, h * 9);

  endShape();

  line(w, nH, w * 9, h * 4);

  pop();

}

​

function letterB(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 4, h * 9);

  let nW = map(mouseY, 0, height, w * 7, w);

  strokeWeight(sW);

  push();

  translate(x, y);

​

  beginShape();

  vertex(w, h);

  vertex(w, h * 9);

  vertex(w * 9, h * 9);

  vertex(w * 9, nH);

  vertex(w, h * 4);

  vertex(nW, h * 3);

  vertex(nW, h);

  vertex(w, h);

  endShape();

  // line(w,h,nW,nH);

  pop();

}

​

function letterC(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h, h * 5);

  let nW = map(mouseY, 0, height, w, 0);

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w * 8 + nW, h / 2 + nH / 2);

  vertex(w * 8 + nW, h);

  vertex(nW, nH);

  vertex(nW, h * 10 - nH);

  vertex(w * 8 + nW, h * 9);

  vertex(w * 8 + nW, h * 9 + h / 2 - nH / 2);

  endShape();

  pop();

}

​

function letterD(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH1 = map(mouseY, 0, height, h * 2, h * 4);

  let nH2 = map(mouseY, 0, height, h, h * 9);

  let nH3 = map(mouseY, 0, height, h * 2, h);

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w * 9, nH1);

  vertex(w, nH2);

  vertex(w, h * 9);

  vertex(w * 9, h * 5 + nH1);

  vertex(w * 9, nH3);

  endShape();

  pop();

}

​

function letterE(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h, h * 4);

  let nW = map(mouseY, 0, height, w * 9, w * 7);

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(nW, nH);

  vertex(w, h);

  vertex(w, h * 10 - nH);

  vertex(w * 9, h * 9);

  endShape();

  line(w, h * 4, w * 7, h * 4);

  pop();

}

​

function letterF(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  // let nH = map(mouseY,0,height,h,h*4);

  let nW = map(mouseY, 0, height, w, w * 6);

  strokeWeight(sW);

  push();

  translate(x, y);

​

  beginShape();

  vertex(w * 9, h);

  vertex(nW, h);

  vertex(w, h * 9);

  endShape();

  line(w, h * 4, w * 7, h * 4);

  pop();

}

​

function letterG(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH1 = map(mouseY, 0, height, h * 4, 0);

  let nH2 = map(mouseY, 0, height, h * 7, h * 5);

  let nW = map(mouseY, 0, height, w * 9, w);

  strokeWeight(sW);

  push();

  translate(x, y);

​

  beginShape();

  vertex(w * 9, h);

  vertex(w, h);

  vertex(w, h * 3 + nH1);

  vertex(w * 9, h * 5 + nH1);

  vertex(w * 9, h + nH1);

  vertex(w * 5, h + nH1);

  endShape();

​

  beginShape();

  vertex(w * 5, h * 4 + nH1);

  vertex(w, nH2);

  vertex(w * 9, h * 2 + nH2);

  vertex(nW, h * 9);

  vertex(nW, h * 2 + nH2);

​

  endShape();

​

  pop();

}

​

function letterH(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH1 = map(mouseY, 0, height, h * 4, h * 3);

  let nH2 = map(mouseY, 0, height, h * 4, h * 9);

  let nH3 = map(mouseY, 0, height, h, h * 4);

  strokeWeight(sW);

  push();

  translate(x, y);

​

  beginShape();

  vertex(w, h);

  vertex(w, h * 9);

  vertex(w, nH2);

  vertex(w * 6, nH1);

  vertex(w * 9, h * 4);

  vertex(w * 9, nH3);

  vertex(w * 9, h * 9);

  endShape();

  pop();

}

​

function letterI(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH1 = map(mouseY, 0, height, h, h * 4);

  let nH2 = map(mouseY, 0, height, h, h * 2);

  let nW1 = map(mouseY, 0, height, w * 9, w * 4);

  let nW2 = map(mouseY, 0, height, w * 9, w * 5);

​

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, nH1);

  vertex(w * 5, nH1);

  vertex(nW2, nH1);

  vertex(w * 5, nH1);

  vertex(w * 5, h * 9);

  vertex(w * 9, h * 9);

  vertex(w, h * 9);

  endShape();

  beginShape();

  vertex(nW1, h);

  vertex(w * 10 - nW1, h);

  vertex(w * 10 - nW1, nH2);

  vertex(nW1, nH2);

  vertex(nW1, h);

  endShape();

  pop();

}

​

function letterJ(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h, h * 4);

  let nH2 = map(mouseY, 0, height, h, h * 2);

  let nW1 = map(mouseY, 0, height, w * 5, w * 4);

  let nW2 = map(mouseY, 0, height, w * 7, w * 9);

​

​

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w * 9 - nW1, nH);

  vertex(w * 5, nH);

  vertex(w * 9, nH);

  vertex(nW2, nH);

  vertex(nW2, h * 9);

  vertex(w, h * 6);

  endShape();

​

  beginShape();

  vertex(nW2 - 2 * w, h);

  vertex(nW2, h);

  vertex(nW2, nH2);

  vertex(nW2 - 2 * w, nH2);

  vertex(nW2 - 2 * w, h);

  endShape();

  pop();

}

​

function letterK(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH1 = map(mouseY, 0, height, h * 4, h * 5);

  let nH2 = map(mouseY, 0, height, h, h * 3);

  let nW = map(mouseY, 0, height, w * 4, w);

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(w, h * 9);

  vertex(w, nH1);

  vertex(nW, nH1);

  vertex(w * 5 + nW, nH2)

  vertex(nW, nH1);

  vertex(w * 9, h * 9);

  endShape();

  pop();

}

​

function letterL(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 4, h * 9);

  let nH2 = map(mouseY, 0, height, h * 9, h * 8);

  let nW = map(mouseY, 0, height, w, w * 5);

  let nW2 = map(mouseY, 0, height, w, w * 4);

  let nW3 = map(mouseY, 0, height, w*9, w * 6);

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(nW2, h);

  vertex(nW, h * 2);

  vertex(nW, nH2);

  vertex(nW3, h * 9);

  endShape();

  pop();

}

​

function letterM(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 5, h * 6);

  let nH2 = map(mouseY, 0, height, h, h * 2);

  let nW = map(mouseY, 0, height, w, w * 3);

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(w, h * 9);

  vertex(w, h * 5);

  vertex(nW, h);

  vertex(w * 5, nH);

  vertex(w * 10 - nW, h);

  vertex(w * 9, h * 5);

  vertex(w * 9, h * 9);

  endShape();

  pop();

}

​

function letterN(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH1 = map(mouseY, 0, height, h, h * 9);

  let nH2 = map(mouseY, 0, height, h * 9, h * 4);

  let nW = map(mouseY, 0, height, w, w * 5)

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(w, h * 9);

  vertex(w, nH1);

  vertex(nW, h);

  vertex(w * 9, nH2);

  vertex(w * 9, h * 9);

  vertex(w * 9, nH1);

​

  endShape();

  pop();

}

​

function letterO(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH1 = map(mouseY, 0, height, h * 5, h * 3);

  let nH2 = map(mouseY, 0, height, h * 5, h * 7);

  let nW1 = map(mouseY, 0, height, w*2 , w * 5);

  let nW2 = map(mouseY, 0, height, w*8 , w * 5);

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(nW1, h);

  vertex(nW2, h);

  vertex(w * 9, nH1);

  vertex(w * 9, nH2);

  vertex(nW2, h * 9);

  vertex(nW1, h * 9);

  vertex(w, nH2);

  vertex(w, nH1);

  vertex(nW1, h);

  endShape();

  pop();

}

​

function letterP(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 4, h);

  strokeWeight(sW);

  push();

  translate(x, y);

​

  beginShape();

  vertex(w, h);

  vertex(w, h * 9);

  vertex(w, h * 5);

  vertex(w * 9, nH);

  vertex(w * 9, h);

  vertex(w, h);

  endShape();

  // line(w,h,nW,nH);

  pop();

}

​

function letterQ(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 9, h);

  let nH2 = map(mouseY, 0, height, h * 5, h * 5.5);

  let nH3 = map(mouseY, 0, height, h * 9, h * 5.5);

  let nH4 = map(mouseY, 0, height, h * 9, h * 7);

  let nW2 = map(mouseY, 0, height, w * 5, w * 8);

  let nW3 = map(mouseY, 0, height, w * 9, w * 8);

​

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(nW3, h);

  vertex(nW3, nH3);

  vertex(w, nH);

  vertex(w, h);

  endShape();

  line(nW3, h * 9, nW2, nH2);

  line(nW3, h * 9, w*9, nH4);

  pop();

}

​

function letterR(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY,0,height,h*4,h*9);

  let nH2 = map(mouseY,0,height,h*4,h);

  let nH3 = map(mouseY,0,height,h*3,h);

  let nW = map(mouseY, 0, height, w*6, w);

  let nW2 = map(mouseY, 0, height, w*6, w*4);

  let nW3 = map(mouseY, 0, height, w, w*4);

  let nW4 = map(mouseY, 0, height, w*9, w);

​

  strokeWeight(sW);

  push();

  translate(x, y);

​

  beginShape();

  vertex(w, h);

  vertex(w, h * 9);

  vertex(nW3, h);

  vertex(w * 9, h);

  vertex(w * 9, h*3);

  vertex(w * 9, nH3);

  vertex(nW2, nH2);

  vertex(w, nH);

  endShape();

  line(nW2, nH2, nW4, h * 9);

  pop();

}

​

function letterS(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 4, h * 5);

  let nH2 = map(mouseY, 0, height, h * 5, h * 7);

  let nH3 = map(mouseY, 0, height, h, h * 3);

  let nW = map(mouseY, 0, height, w, w * 5);

  let nW2 = map(mouseY, 0, height, w*2, w *5);

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w*9, nH3);

  vertex(w*10-nW, h);

  vertex(nW, h);

  vertex(w, h*3);

  vertex(nW2 , nH);

  vertex(w*10-nW2, nH);

  vertex(w*9, nH2);

  vertex(w*10-nW, h*9);

  vertex(nW, h*9);

  vertex(w, h*10-nH3);

​

  endShape();

  pop();

}

​

function letterT(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH1 = map(mouseY, 0, height, h, h * 3);

  let nW = map(mouseY, 0, height, w*5, w * 8);

  let nW2 = map(mouseY, 0, height, 0, w );

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w+nW2, nH1);

  vertex(w*9, nH1);

  vertex(w*5, nH1);

  vertex(w*5, h);

  vertex(w * 5, h * 7);

  vertex(nW, h * 9);

  endShape();

  pop();

}

​

function letterU(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 7, h * 9);

  let nH2 = map(mouseY, 0, height, h * 7, h);

  let nW = map(mouseY, 0, height, w, w * 5);

  let nW2 = map(mouseY, 0, height, 0, w);

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(w, h * 7);

  vertex(nW, h * 9);

  vertex(w * 6-nW2, h * 9);

  vertex(w * 9, nH2 );

  vertex(w * 9, h);

  vertex(w * 9, nH);

  endShape();

  pop();

}

​

function letterV(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 4, h);

  let nW = map(mouseY, 0, height, w*5, w);

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(w,nH);

  vertex(nW, h * 9);

  vertex(w * 9, nH);

  vertex(w * 9, h);

  endShape();

  pop();

}

​

function letterW(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 5, h);

  let nH2 = map(mouseY, 0, height, h, h*5);

  let nH3 = map(mouseY, 0, height, h*5, h*4);

  let nW = map(mouseY, 0, height, w, w*3);

  let nW2 = map(mouseY, 0, height, w*9, w*7);

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(w,nH2);

  vertex(nW, h * 9);

  vertex(w * 5, nH3);

  vertex(w * 5, nH);

  vertex(w * 5, nH3);

  vertex(nW2, h * 9);

  vertex(w*9, nH2);

  vertex(w * 9, h);

  endShape();

  pop();

}

​

function letterX(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h, h * 3);

  let nW = map(mouseY, 0, height, w, w*2);

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(w, nH);

  vertex(w * 5,  h * 5);

  vertex(w * 9, nH);

  vertex(w * 9, h);

  endShape();

  beginShape();

  vertex(w, h * 9);

  vertex(w, h * 10-nH);

  vertex(w * 5,  h * 5);

  vertex(w*9, h * 10-nH);

  vertex(w * 9, h * 9);

  endShape();

  pop();

}

​

function letterY(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 4, h * 5);

  let nH2 = map(mouseY, 0, height, h * 9, h * 5);

  let nW = map(mouseY, 0, height, w * 5, w * 9);

  let nW2 = map(mouseY, 0, height, w * 5, w);

​

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(nW, nH);

  vertex(w * 9, h);

  vertex(nW, nH);

  vertex(nW, h * 9);

  vertex(nW2, nH2);

  endShape();

  pop();

}

​

function letterZ(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nW1 = map(mouseY, 0, height, w * 5, w * 4);

  let nW2 = map(mouseY, 0, height, w * 5, w * 6);

  let nW3 = map(mouseY, 0, height, w * 9, w * 8);

  let nH1 = map(mouseY, 0, height, h, h*2);

  let nH2 = map(mouseY, 0, height, h*5, h*4.75);

  strokeWeight(sW);

  push();

  translate(x, y);

  beginShape();

  vertex(w, h);

  vertex(nW3, nH1);

  vertex(w*9, h);

  vertex(w,h*9);

  vertex(w*10-nW3, h*10-nH1);

  vertex(w*9, h*9);

  endShape();

  line(nW1,nH2,nW2,h*5)

  pop();

}

function letter0(x, y, wid, hei) {

  w = wid / 10;

  h = hei / 10;

  let sW = map(mouseX, 0, width, 1, w * 1.5);

  let nH = map(mouseY, 0, height, h * 9, h * 7);

  let nH2 = map(mouseY, 0, height, h * 9, h * 5);