let nodes = [];

let n;

​

//Utility Variables

let sensor;

let locked;

let acutalRotation;

​

//Styling Variables

let strokeValue = 40;

let typeSize = 80;

let typeSizeSmall = 12;

​

//UI Variables

let miterRound;

let strokeMode;

​

let openClose;

let closedPath;

​

let ui;

let uiActive;

let uiOpacity;

​

let visualBleed;

let v00, v01, v02, v03, v04, v05, v06, v07, v08, v09, v10, v11, v12;

let visualBleedBoolean;

​

function preload() {

  type = loadFont("SuisseIntl-Book.ttf");

}

function setup() {

  createCanvas(1080, 1350);

  closedPath = OPEN;

  strokeMode = ROUND;

  uiActive = true;

  visualBleedBoolean = false;

}

​

function keyPressed(){

  if (key === 's') {

    saveCanvas('Typetool', 'png');

  }

}

​

//BUTTONS FUNCTION

function mouseClicked() {

  //check hovering for OPEN-CLOSE

//   if (openClose.hovering == true && closedPath == OPEN) {

//     closedPath = CLOSE;

//   } else if (openClose.hovering == true && closedPath == CLOSE) {

//     closedPath = OPEN;

//   }

​

//   //check hovering for MITER-ROUND

//   if (miterRound.hovering == true && strokeMode == MITER) {

//     strokeMode = ROUND;

//   } else if (miterRound.hovering == true && strokeMode == ROUND) {

//     strokeMode = MITER;

//   }

​

//   //check hovering for UI

//   if (ui.hovering == true && uiActive == false) {

//     uiActive = true;

//   } else if (ui.hovering == true && uiActive == true) {

//     uiActive = false;

//   }

​

  if (visualBleed.hovering && visualBleedBoolean == false) {

    nodes.splice(0, nodes.length);

    v00 = new Node(201, 337, strokeValue, nodes);

    v01 = new Node(8, 202, strokeValue, nodes);

    v02 = new Node(291, 732, strokeValue, nodes);

    v03 = new Node(479, 724, strokeValue, nodes);

    v04 = new Node(656, 121, strokeValue, nodes);

    v05 = new Node(450, 83, strokeValue, nodes);

    v06 = new Node(404, 621, strokeValue, nodes);

    v07 = new Node(429, 689, strokeValue, nodes);

    v08 = new Node(321, 687, strokeValue, nodes);

    v09 = new Node(367, 569, strokeValue, nodes);

    v10 = new Node(238, 47, strokeValue, nodes);

    v11 = new Node(201, 337, strokeValue, nodes);

​

    nodes.push(v00, v01, v02, v03, v04, v05, v06, v07, v08, v09, v10, v11);

    visualBleedBoolean = true;

  } else if (visualBleed.hovering) {

    nodes.splice(0, nodes.length);

    visualBleedBoolean = false;

  }

}

​

//DELETE POINTS

function doubleClicked() {

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

    if (nodes[i].sensor() == false) {

      nodes.splice(i, 1);

    }

  }

}

​

//ADD NEW POINT

function mousePressed() {

  if (

    // miterRound.hovering == false &&

    // openClose.hovering == false &&

    // ui.hovering == false &&

    visualBleed.hovering == false

  ) {

    if (nodes.length === 0) {

      nodes.push(n);

    } else {

      if (locked === false && isOn(nodes) == true) {

        nodes.push(n);

      }

    }

  }

}

​

function draw() {

  //print(mouseX, mouseY);

  //POINT OBJECT

  n = new Node(mouseX, mouseY, strokeValue, nodes);

​

  //GENERAL STYLING

  textFont(type);

  background(0);

  //strokeValue = map(nodes.length,0,20,40,90)

​

  //INITIALIZE UI ELEMENTS

  //check condition for non-boolean elements

  let openCloseBoolean;

  if (closedPath == OPEN) {

    openCloseBoolean = true;

  } else {

    openCloseBoolean = false;

  }

​

  let miterRoundBoolean;

  if (strokeMode == ROUND) {

    miterRoundBoolean = true;

  } else {

    miterRoundBoolean = false;

  }

​

  //ui ON/OFF functionality

  if (uiActive == true) {

    uiOpacity = 255;

  } else if (uiActive == false) {

    uiOpacity = 0;

  }

​

  //openClose = new uiElement("Open", "Close", 5, 150, openCloseBoolean);

  //miterRound = new uiElement("Round", "Miter", 5, 235, miterRoundBoolean);

  //ui = new uiElement("UI ON", "UI OFF", 5, 320, uiActive);

  visualBleed = new uiElement(

    "from Visual Bleed",

    "from Visual Bleed",

    width / 3,

    625,

    visualBleedBoolean

  );

​

  //LOCKED BEHAVIOUR

  if (isOn(nodes) == false && mouseIsPressed == true) {

    locked = true;

  } else if (mouseIsPressed === false) {

    locked = false;

  }

  if (isOn(nodes)) {

    cursor(CROSS);

  } else if (isOn(nodes) == false || locked == true) {

    cursor(MOVE);

  }

​

  //TEXTS

​

  //General Styling

  push();

  blendMode(EXCLUSION);

  textSize(typeSize);

  textLeading(typeSize);

  fill(255);

  noStroke();

  textAlign(LEFT);

  rectMode();

​

  //CENTER COLUMN

  //Coordinates

  if (nodes.length > 0) {

    text(nodes.map(getCoordinates), width / 3, -15, 600, height);

  }

​

  //RIGHT COLUMN

  //Title

  fill(255, 20);

  text("Typetool", 5, 65);

​

  // ui.show();

  // openClose.show();

  // miterRound.show();

   visualBleed.show();

​

  //LEFT COLUMN

  //Version

  textAlign(RIGHT);

  text("ver 01", width - 5, 65);

​

  //BOTTOM

  textSize(textSize(typeSize));

  textAlign(LEFT, BOTTOM);

  text("Click", 5, 567);

  text("to  draw", width / 3, 567);

  text("2023", width / 3, height+15);

​

  pop();

​

  //MAIN DRAWING

  push();

​

  //Styling

  blendMode(EXCLUSION);

  strokeJoin(strokeMode);

  strokeWeight(strokeValue);

  stroke(255);

  noFill();

​

  //Function

  beginShape();

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

    vertex(nodes[i].x, nodes[i].y);

  }

  endShape(closedPath);

​

  pop();

​

  //NODES DISPLAY, MOVE AND DISTANCE

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

    //Nodes functions

    push();

    blendMode(EXCLUSION);

    nodes[i].display();

    nodes[i].move();

    pop()

    //Display Distance

    if (

      i > 0 &&

      dist(nodes[i].x, nodes[i].y, nodes[i - 1].x, nodes[i - 1].y) > 50

    ) {

      push();

​

      //Styling

      textSize(typeSizeSmall);

      blendMode(EXCLUSION);

      fill(255, uiOpacity);

      noStroke();

​

      //Calculate orientation

      let rot = atan2(nodes[i - 1].y - nodes[i].y, nodes[i - 1].x - nodes[i].x);

​

      //Set orientation

      if (rot > -PI / 2 && rot < PI / 2) {

        actualRotation = atan2(

          nodes[i - 1].y - nodes[i].y,

          nodes[i - 1].x - nodes[i].x

        );

      } else {

        actualRotation =

          atan2(nodes[i - 1].y - nodes[i].y, nodes[i - 1].x - nodes[i].x) - PI;

      }

​

      //translating points

      translate(

        (nodes[i].x + nodes[i - 1].x) / 2,

        (nodes[i].y + nodes[i - 1].y) / 2

      );

      rotate(actualRotation);

      rectMode(CENTER);

      textAlign(CENTER, CENTER);

​

      //Text

      text(

        round(

          dist(nodes[i].x, nodes[i].y, nodes[i - 1].x, nodes[i - 1].y) * 10

        ) / 10,

        0,

        -30

      );

​

      resetMatrix();

​

      pop();

    }

  }

}

​

//Get coordinates for the center Column

function getCoordinates(item) {

  return ["\n", item.x, " ", item.y].join("");

}

​

//check if any object is hovered

function isOn(nodes) {

  return nodes.every((Node) => Node.sensor());

}

​

//check if mouse is on UI elements

​

function isHovering(xStart, xEnd, yStart, yEnd) {

  if (mouseX > xStart && mouseX < xEnd && mouseY > yStart && mouseY < yEnd) {

    return true;

  } else {

    return false;

  }

}

​

//resizing window function

// function windowResized() {

//   resizeCanvas(windowWidth, windowHeight);

// }

​

//button classe

class uiElement {

  constructor(defaultText, altText, x, y, condition) {

    this.defaultText = defaultText;

    this.altText = altText;

    this.x = x;

    this.y = y;

    this.condition = condition;

    this.bboxDefault = type.textBounds(

      this.defaultText,

      this.x,

      this.y,

      typeSize

    );

    this.bboxAltText = type.textBounds(this.altText, this.x, this.y, typeSize);

    this.opacity = 20;

    this.padding = 10;

    this.hovering = false;

  }

  show() {

    push();

​

    textSize(typeSize);

    if (this.condition == true) {

      if (

        isHovering(

          this.x,

          this.x + this.bboxDefault.w + this.padding,

          this.y - this.bboxDefault.h - this.padding / 2,

          this.y + this.padding / 2

        ) &&

        locked == false

      ) {

        this.opacity = 255;

        this.hovering = true;

      } else {

        this.opacity = 20;

        this.hovering = false;

      }

​

      fill(255, this.opacity);

​

      text(this.defaultText, this.x, this.y);

    } else {

      if (

        isHovering(

          this.x,

          this.x + this.bboxAltText.w + this.padding,

          this.y - this.bboxAltText.h - this.padding / 2,

          this.y + this.padding

        ) &&

        locked == false

      ) {

        this.opacity = 255;

        this.hovering = true;

      } else {

        this.opacity = 20;

        this.hovering = false;

      }

      fill(255, this.opacity);

​

      text(this.altText, this.x, this.y);

    }

    pop();

  }

}

​

//Node class

class Node {

  constructor(x, y, size, array) {

    this.x = x;

    this.y = y;

    this.size = strokeValue;

    this.col = 0;

    this.lock = false;

    this.array = array;

  }

​

  //General styling of the node & text

  display() {

    //circle

    push();

    blendMode(BLEND)

    strokeWeight(1);

    stroke(0);

    fill(this.col);

    circle(this.x, this.y, strokeValue);

    pop();

    //text

    push();

​

    // blendMode(EXCLUSION);

    textSize(typeSizeSmall);

    textLeading(typeSizeSmall)

    textAlign(CENTER);

    noStroke(); 

    fill(255, uiOpacity);

    text("" + this.x + ",\n" + this.y + "", this.x, this.y-2);

​

    pop();

  }

​

  //this check if the object is being hovered

  sensor() {

    if (dist(mouseX, mouseY, this.x, this.y) < this.size / 2) {

      return false;

    } else {

      return true;

    }

  }

​

  //this check if the object is clicked and dragged

  internalLock() {

    if (this.sensor() == false && mouseIsPressed == true) {

      this.lock = true;

    }

    if (mouseIsPressed == false) {

      this.lock = false;

    }

  }

​

  checkDoubles() {

    if (

      this.array.some(nodes => nodes.x == this.x) == true &&

      this.array.some(nodes => nodes.y == this.y) == true

    ) {

      return true;

    } else {

      return false;

    }

  }

​

  //this update the position of the object

  move() {

    if (this.sensor() == false) {

      this.col = 255;

    } else {

      this.col = 255;

    }

​

    this.internalLock();

    if (this.lock == true) {

      this.x = mouseX;

      this.y = mouseY;

    }

  }

}

​