// by Jason Wilkins

// with (major) support from:

// Kevin Yeh, Lynne Yun, and Sam Lavigne

​

// fonts in use:

// TwoType System by MuirMcNeil

// Apercu Mono by Colophon Foundry

​

// created during "Generative Type"

// with Lynne Yun and Kevin Yeh

// summer 2020

​

let inputField,

  inputField2,

  inputShow,

  textSizeCTRL,

  fontSlider1,

  fontSlider2,

  fontSlider3,

  fontSize,

  fontCol1,

  fontCol2,

  fontCol3,

  randomizer,

  selFormat,

  selColor1,

  selColor2,

  selColor3,

  checkbox,

  bgPicker,

  bgVal,

​

  format,

  bgColor,

  fs,

  font1,

  font2,

  font3,

  apercu,

​

  cnv,

  index,

  leading,

  ranFont1,

  ranFont2,

  ranFont3,

  colors,

  white,

  black,

  pink,

  yellow,

  orange,

  warmRed,

  utOrange,

  none,

​

  square = 1080 / 2,

  storyW = 900 / 2,

  storyH = 1600 / 2,

  letterW = 562 / 2,

  letterH = 750 / 2,

  tabH = 1200 / 2,

​

  font,

  bounds,

  bounds1,

  x,

  y,

  x1,

  y1,

  dragging,

  dragging1,

  offsetX = 0,

  offsetY = 0,

  offsetX1 = 0,

  offsetY1 = 0,

​

​

  // storage for preload forLoop

  twoType = []

​

// iterates through fontNames in TwoTypeFonts.js and adds to twoType array

function preload() {

  apercu = loadFont('assets/apercu_mono.otf');

​

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

    let font = loadFont(fontNames[i]);

    twoType.push(font);

  }

}

​

function setup() {

  cnv = createCanvas(windowWidth, windowHeight);

  textFont('Arial');

  //UI

  drawUItext()

  ui = new UserInterface();

  ui.input();

  ui.input2();

  ui.selFormat();

  ui.bgPicker();

  ui.fontSizeSlider();

  ui.twoTypeSlider1();

  ui.selFontColor1();

  ui.twoTypeSlider2();

  ui.selFontColor2();

  ui.twoTypeSlider3();

  ui.selFontColor3();

  ui.randomButton();

  ui.blendButton();

​

  index = fontSlider1.value();

  bounds = twoType[index].textBounds(inputField.value(), x, y, textSizeCTRL.value());

  bounds1 = apercu.textBounds(inputField2.value(), x1, y1, 16);

  x = 25 //- bounds.w / 2;

  y = height / 2 //- bounds.h / 2;

  x1 = 25

  y1 = height - 175

  fontCol1 = orange;

  fontCol2 = yellow;

  fontCol3 = pink;

}

​

function draw() {

  white = color('#fffef5');

  black = color('#303030');

  pink = color('#fac8d6');

  yellow = color('#f9ad1a');

  orange = color('#f4782d');

  warmRed = color('#ff6633');

  bgVal = bgPicker.value();

  blendMode(BLEND);

  background(bgVal);

​

  ui.uiText();

​

  blendEvent();

  drawBodyText();

  drawText1();

  drawText2();

  drawText3();

  index = fontSlider3.value();

  bounds = twoType[index].textBounds(inputField.value(), x, y, textSizeCTRL.value());

  bounds1 = apercu.textBounds(inputField2.value(), x1, y1, 16);

  if (dragging) {

    x = mouseX + offsetX;

    y = mouseY + offsetY;

  } else if (dragging1) {

    x1 = mouseX + offsetX1;

    y1 = mouseY + offsetY1;

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function mousePressed() {

  if (

    mouseX >= bounds1.x &&

    mouseX <= bounds1.x + bounds1.w &&

    mouseY >= bounds1.y &&

    mouseY <= bounds1.y + bounds1.h

  ) {

    dragging1 = true;

    offsetX1 = x1 - mouseX;

    offsetY1 = y1 - mouseY;

  } else if (

    mouseX >= bounds.x &&

    mouseX <= bounds.x + bounds.w &&

    mouseY >= bounds.y &&

    mouseY <= bounds.y + bounds.h

  ) {

    dragging = true;

    offsetX = x - mouseX;

    offsetY = y - mouseY;

  }

}

​

function mouseReleased() {

  dragging = false;

  dragging1 = false;

}

​

function blendEvent() {

  if (checkbox.checked()) {

    blendMode(MULTIPLY);

  } else(blendMode(BLEND));

}

​

function drawText1() {

  index = fontSlider1.value();

  leading = textSizeCTRL.value() * 0.85;

​

  fill(fontCol1);

  textFont(twoType[index]);

  textAlign(LEFT, BASELINE);

  textSize(textSizeCTRL.value());

  textLeading(leading);

  text(inputField.value(), x, y)

}

​

function drawText2() {

  index = fontSlider2.value();

  leading = textSizeCTRL.value() * 0.85;

​

  fill(fontCol2)

  textFont(twoType[index]);

  textAlign(LEFT, BASELINE);

  textSize(textSizeCTRL.value());

  textLeading(leading);

  text(inputField.value(), x, y)

}

​

function drawText3() {

  index = fontSlider3.value();

  leading = textSizeCTRL.value() * 0.85;

​

  fill(fontCol3)

  textFont(twoType[index]);

  textAlign(LEFT, BASELINE);

  textSize(textSizeCTRL.value());

  textLeading(leading);

  text(inputField.value(), x, y)

}

​

function drawBodyText() {

  fill('#303030');

  textFont(apercu);

  textAlign(LEFT);

  textSize(16);

  text(inputField2.value(), x1, y1)

}

​

function drawUItext() {

​

  //left side

  format = createP('select format:');

  format.position(20, 12);

​

  format = createP('headline text');

  format.position(20, 50);

​

  format = createP('body text');

  format.position(20, 140);

​

  format = createP('background color:');

  format.position(20, height - 95);

​

  // right side

​

  fs = createP('headline font size');

  fs.position(width - 190, 12);

​

  font1 = createP('layer 1 font');

  font1.position(width - 190, 82);

​

  font2 = createP('layer 2 font');

  font2.position(width - 190, 152);

​

  font3 = createP('layer 3 font');

  font3.position(width - 190, 222);

}

​

function ranSliders() {

  ranFont1 = int(random(0, twoType.length - 1))

  ranFont2 = int(random(0, twoType.length - 1))

  ranFont3 = int(random(0, twoType.length - 1))

​

  fontSlider1.value(ranFont1);

  fontSlider2.value(ranFont2);

  fontSlider3.value(ranFont3);

}

​

function selCanvas() {

​

  if (selFormat.value() == '1:1') {

    resizeCanvas(square, square);

  } else if (selFormat.value() == '9:16') {

    resizeCanvas(storyW, storyH);

  } else if (selFormat.value() == '8.5 x 11') {

    resizeCanvas(letterW, letterH);

  } else if (selFormat.value() == '11 x 17') {

    resizeCanvas(letterH, tabH);

  } else(resizeCanvas(windowWidth, windowHeight));

​

  let centerX = (windowWidth - width) / 2;

  let centerY = (windowHeight - height) / 2;

  cnv.position(centerX, centerY);

}

​

function changeCol1() {

  val = selColor1.value();

​

  if (val == 'white') {

    fontCol1 = white;

  } else if (val == 'black') {

    fontCol1 = black;

  } else if (val == 'pink') {

    fontCol1 = pink;

  } else if (val == 'yellow') {

    fontCol1 = yellow;

  } else if (val == 'orange') {

    fontCol1 = orange;

  } else if (val == 'warm red') {

    fontCol1 = warmRed;

  }

}

​

function changeCol2() {

  val = selColor2.value();

​

  if (val == 'white') {

    fontCol2 = white;

  } else if (val == 'black') {

    fontCol2 = black;

  } else if (val == 'pink') {

    fontCol2 = pink;

  } else if (val == 'yellow') {

    fontCol2 = yellow;

  } else if (val == 'orange') {

    fontCol2 = orange;

  } else if (val == 'warm red') {

    fontCol2 = warmRed;

  }

}

​

function changeCol3() {

  val = selColor3.value();

​

  if (val == 'white') {

    fontCol3 = white;

  } else if (val == 'black') {

    fontCol3 = black;

  } else if (val == 'pink') {

    fontCol3 = pink;

  } else if (val == 'yellow') {

    fontCol3 = yellow;

  } else if (val == 'orange') {

    fontCol3 = orange;

  } else if (val == 'warm red') {

    fontCol3 = warmRed;

  }

}

​

class UserInterface {

​

  constructor() {

    this.xLeft = 20;

    this.xRight = width - 190;

    this.yTop = 50;

    this.yBottom = height - 50;

​

    this.ranVal1 = int(random(0, twoType.length - 1))

    this.ranVal2 = int(random(0, twoType.length - 1))

    this.ranVal3 = int(random(0, twoType.length - 1))

  }

​

  input() {

    inputField = createElement('textarea', 'Gen\nType');

    inputField.position(this.xLeft, this.yTop + 35);

    inputField.size(160, 50);

  }

​

  input2() {

    inputField2 = createElement('textarea', 'Lynne Yun\nand Kevin Yeh\nThursdays at\n6:30 pm');

    inputField2.position(this.xLeft, this.yTop + 125);

    inputField2.size(160, 50);

  }

​

  selFormat() {

    selFormat = createSelect();

    selFormat.position(115, 25);

    selFormat.option('browser');

    selFormat.option('1:1');

    selFormat.option('9:16');

    // selFormat.option('8.5 x 11');

    // selFormat.option('11 x 17');

    selFormat.changed(selCanvas)

  }

​

  bgPicker() {

    white = color('#fffef5');

    black = color('#303030');

    pink = color('#fac8d6');

    yellow = color('#f9ad1a');

    orange = color('#f4782d');

    warmRed = color('#ff6633');

    // utOrange = color('#bf5700');

​

    bgPicker = createRadio()

    bgPicker.option('white', white);

    bgPicker.option('black', black);

    bgPicker.option('pink', pink);

    bgPicker.option('yellow', yellow)

    bgPicker.option('orange', orange);

    bgPicker.option('warm red', warmRed);

    // bgPicker.option('UT orange', utOrange);

​

    bgPicker.position(this.xLeft, this.yBottom);

    bgPicker.style('margin-right', '100px')

  }

​

  fontSizeSlider() {

    fill(200)

    textSizeCTRL = createSlider(100, 1000, 250);

    textSizeCTRL.position(this.xRight, this.yTop);

    textSizeCTRL.size(160);

  }

​

  twoTypeSlider1() {

    fontSlider1 = createSlider(0, twoType.length - 1, this.ranVal1, 1);

    fontSlider1.position(this.xRight, this.yTop + 70);

    fontSlider1.size(160);

  }

​

  twoTypeSlider2() {

    fontSlider2 = createSlider(0, twoType.length - 1, this.ranVal2, 1);

    fontSlider2.position(this.xRight, this.yTop + 140);

    fontSlider2.size(160);

  }

​

  twoTypeSlider3() {

    fontSlider3 = createSlider(0, twoType.length - 1, this.ranVal3, 1);

    fontSlider3.position(this.xRight, this.yTop + 210);

    fontSlider3.size(160);

  }

  selFontColor1() {

    selColor1 = createSelect();

    selColor1.position(this.xRight + 80, this.yTop + 45);

    selColor1.option('orange');

    selColor1.option('warm red');

    selColor1.option('pink');

    selColor1.option('yellow');

    selColor1.option('white');

    selColor1.option('black');

    selColor1.changed(changeCol1);

  }

  selFontColor2() {

    selColor2 = createSelect();

    selColor2.position(this.xRight + 80, this.yTop + 115);

    selColor2.option('yellow');

    selColor2.option('warm red');

    selColor2.option('pink');

    selColor2.option('orange');

    selColor2.option('white');

    selColor2.option('black');

    selColor2.changed(changeCol2);

  }

  selFontColor3() {

    selColor3 = createSelect();

    selColor3.position(this.xRight + 80, this.yTop + 185);

    selColor3.option('pink');

    selColor3.option('warm red');

    selColor3.option('orange');

    selColor3.option('yellow');

    selColor3.option('white');

    selColor3.option('black');

    selColor3.changed(changeCol3);

  }

​

  randomButton() {

    randomizer = createButton('randomizer');

    randomizer.position(this.xRight, this.yTop + 260);

    randomizer.size(130, 20);

    randomizer.mousePressed(ranSliders)

  }

​

  blendButton() {

    checkbox = createCheckbox('blend', true);

    checkbox.position(this.xRight, this.yTop + 310);

    checkbox.changed(blendEvent)

  }

​

  uiText() {

​

    fill(100);

    textFont('Arial');

    textSize(14);

​

    // textAlign(RIGHT);

    // text(textSizeCTRL.value(), width - 20, this.yTop - 10);

    // text(fontSlider1.value(), width - 20, this.yTop + 60);

    // text(fontSlider2.value(), width - 20, this.yTop + 130);

    // text(fontSlider3.value(), width - 20, this.yTop + 200);

  }

}