// Grace Kim 2022

// A tool for generating module types that were inspired by Duomo cathedral gothic architect motifs.

​

let canvas; // create variable for canvas

​

// Text input and fonts

let word;

let font;

let textInput;

​

// Text positioning

let bounds = [];

let ptSize;

​

// Text to points

let pts = [];

let items = [];

​

// Controls for modules

let densitySlider, itemSizeSlider, rotationSlider, nextButton;

let backcolorPicker;

let clickCount = 0;

​

function preload() {

  // Main typography: Marian Black Font

  font = loadFont("Marian-Black-Trial.otf");

​

  // Module images

  items[0] = loadImage("1.png");

  items[1] = loadImage("2.png");

  items[2] = loadImage("3.png");

  items[3] = loadImage("4.png");

  items[4] = loadImage("5.png");

  items[5] = loadImage("6.png");

  items[6] = loadImage("7.png");

  items[7] = loadImage("8.png");

  items[8] = loadImage("9.png");

  items[9] = loadImage("10.png");

  items[10] = loadImage("11.png");

  items[11] = loadImage("12.png");

  items[12] = loadImage("1B.png");

  items[13] = loadImage("2B.png");

  items[14] = loadImage("3B.png");

  items[15] = loadImage("4B.png");

  items[16] = loadImage("6B.png");

  items[17] = loadImage("7B.png");

  items[18] = loadImage("8B.png");

  items[19] = loadImage("9B.png");

  items[20] = loadImage("10B.png");

  items[21] = loadImage("11B.png");

  items[22] = loadImage("12B.png");

}

​

function setup() {

  // Background

  canvas = createCanvas(windowWidth, windowHeight);

  canvas.position(0, 0);

  canvas.style("z-index", "-1");

  imageMode(CENTER);

​

  // Text input box

  textInput = createInput("type here")

    .size(116, 30)

    .style("font-family", "Mausoleum Bold")

    .position(10, windowHeight * 0.82);

  //Sliders got inspired by Co_Dart: https://youtu.be/rSp5iSTXwAY

  // Control bar for module density

  densitySlider = createSlider(0.01, 0.5, 0.25, 0.01)

    .position(10, 65)

    .addClass("mySliders");

​

  // Control bar for module size

  itemSizeSlider = createSlider(1, 200, 10)

    .position(10, 135)

    .addClass("mySliders");

​

  // Control bar for module rotation

  rotationSlider = createSlider(0, 360, 0)

    .position(10, 205)

    .addClass("mySliders");

​

  // Control for bg colors

  backcolorPicker = createColorPicker("#A4A08E")

    .position(10, 360)

    .size(125, 40);

​

  // Control descriptions

  createP("Density").position(12, 5);

  createP("Module Size").position(12, 75);

  createP("Rotation").position(12, 145);

  createP("Background").position(12, 300);

​

  // Button for next module sets inpired by:https://www.w3schools.com/css/css3_buttons.asp

  nextButton = createButton("NEXT")

    .size(123, 40)

    .style("font-size", "20pt")

    .style("font-family", "Mausoleum Bold")

    .style("color", "#FFFFFF")

    .style("background-color", "#2E2E2E")

    .position(10, windowHeight * 0.9);

  nextButton.mousePressed(nextItem);

​

  // Text input

  typeCanvas = createGraphics(windowWidth, windowHeight);

  typeCanvas.textFont(font);

}

​

function draw() {

  // BG color and sizing

  background(backcolorPicker.value());

​

  // Text input values and positions

  word = "   " + textInput.value() + " ";

  ptSize = (itemSizeSlider, 0, 1, 1, windowWidth / 5);

  pts = font.textToPoints(word, 0, 0, windowWidth / 5, {

    sampleFactor: densitySlider.value(),

    simplifyThreshold: 0,

  });

​

  // Code for centering text using bounds from Zeke Wattles:     https://editor.p5js.org/grace951203/sketches/NTHJ-ol_7

  bounds = font.textBounds(word, 50, 0, windowWidth / 5);

  let multiplier = width / bounds.w;

  translate(0, height / 2 - (bounds.h * multiplier) / 2);

  translate(0, bounds.h * multiplier);

​

  // For loop text to points

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

    push();

    translate(pts[i].x * multiplier, pts[i].y * multiplier, ptSize);

    rotate(rotationSlider.value());

    image(

      items[clickCount],

      0,

      0,

      itemSizeSlider.value(),

      itemSizeSlider.value()

    );

    pop();

  }

}

​

// Function for next Button

function nextItem() {

  clickCount++;

  if (clickCount >= items.length) {

    clickCount = 0;

  }

}

​

// Function for window resize

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​