Bezier generator for Processing and p5.js

mySketch.js
style.css
index.html
 
let points = [];
let prevHandles = [];
let nextHandles = [];
​
let pointsOgLocation = [];
let prevHandlesOgLocation = [];
let nextHandlesOgLocation = [];
​
let coordinates = [];
let topPoint;
let bottomPoint;
let leftPoint;
let rightPoint;
​
let centerPoint;
let centerPointPos;
​
let GRAB = 0;
let CREATE = 1;
let MIDDLE = 2;
let mode = CREATE;
​
let mousePress = false;
let handlePos = false;
​
let singlePoint = [];
let singleSelectedPoint = false;
let selectedPoints = [];
let selectedPrev = [];
let selectedNext = [];
let selectionKey = false;
let selectionFull = false;
​
let selectionSquareOrigin;
let showSquare = false;
let squareWidth;
let squareHeight;
let squareTopCorner;
​
let altKey = false;
let showGrid = true;
​
let plusKey = false;
let lastAdded;
​
let offsetOriginX = 0;
let offsetOriginY = 0;
let offsetX = 0;
let offsetY = 0;
​
let P5 = 0;
let PROCESSING = 1;
let functionType = PROCESSING;
​
let DOMLoaded = false;
let canvasLoaded = false;
​
let grabedPointId;
​
let toggleTracker = [];
​
let printCode = "";
​
//----------------------------------------------- SETUP ----------------------------------------------
​
function setup() {
  createCanvas(1280, 720);
​
  canvasLoaded = true;
​
  centerPointPos = createVector(0, 0);
  selectionSquareOrigin = createVector(0, 0);
​
  squareTopCorner = createVector(0, 0);
​
  topPoint = height;
  bottomPoint = 0;
  leftPoint = width;
  rightPoint = 0;
}
​
//----------------------------------------------- DRAW ----------------------------------------------
​
function draw() {
  background(200);
  
  //Draws the grid
  if(showGrid){
    let gridSize = 30;
    //Vertical
    for(let i = 0; i <= width; i += gridSize){
      stroke(180);
      strokeWeight(2);
      line(i, 0, i, height);
    }
    //Horizontal
    for(let i = 0; i <= height; i += gridSize){
      stroke(180);
      strokeWeight(2);
      line(0, i, width, i);
    }
  }
​
  //Draws the blue guides
  for (let i = 0; i < points.length; i++) {
​
    if (grabedPointId == i) {
      continue;
    }
​
    stroke("
#1C6ED6");
    strokeWeight(2);
    if (mouseX == points[i].x) {
      line(points[i].x, 0, points[i].x, height);
    }
    if (mouseY == points[i].y) {
      line(0, points[i].y, width, points[i].y);
    }
  }
​
  //Basic stroke
  stroke(0);
  strokeWeight(5);
  noFill();
​
  if (points.length > 0) {
    if (points.length < 2) {
      beginShape();
      vertex(points[0].x, points[0].y);
      endShape();
    } else {
      beginShape();
      vertex(points[0].x, points[0].y);
      for (let i = 0; i < points.length - 1; i++) {
        bezierVertex(
          nextHandles[i].x, nextHandles[i].y,
          prevHandles[i + 1].x, prevHandles[i + 1].y,
          points[i + 1].x, points[i + 1].y
        );
      }
      endShape();
    }
​
    if (mode == CREATE && !handlePos && !plusKey) {
      stroke(150);
      strokeWeight(2);
      bezier(points[points.length - 1].x, points[points.length - 1].y, nextHandles[nextHandles.length - 1].x, nextHandles[nextHandles.length - 1].y, mouseX, mouseY, mouseX, mouseY);
    }
​
    if (mode == GRAB && selectionKey && mouseButton == RIGHT && showSquare) {
      rectMode(CORNERS);
      fill(0, 0, 255, 100);
      noStroke();
      rect(selectionSquareOrigin.x, selectionSquareOrigin.y, mouseX, mouseY);
​
      squareWidth = dist(mouseX, 0, selectionSquareOrigin.x, 0);
      squareHeight = dist(0, mouseY, 0, selectionSquareOrigin.y);
​
      if (selectionSquareOrigin.x <= mouseX) {
        squareTopCorner.x = selectionSquareOrigin.x;
      } else {
        squareTopCorner.x = mouseX;
      } if (selectionSquareOrigin.y <= mouseY) {
        squareTopCorner.y = selectionSquareOrigin.y;
      } else {
        squareTopCorner.y = mouseY;
      }
    }
​
​
​
    //Shows a blue circle when the handle is selected
    fill(0, 0, 255);
    noStroke();
    if (selectionKey && mode == GRAB) {
      for (let i = 0; i < selectedPoints.length; i++) {
        ellipse(points[selectedPoints[i]].x, points[selectedPoints[i]].y, 25, 25);
      }
    }
​
    //Show the handle when the point is created
    if (handlePos) {
      noFill();
      stroke(255, 0, 0);
      strokeWeight(3);
      line(points[lastAdded].x, points[lastAdded].y, prevHandles[lastAdded].x, prevHandles[lastAdded].y);
      line(points[lastAdded].x, points[lastAdded].y, nextHandles[lastAdded].x, nextHandles[lastAdded].y);
    }
​
    //Draw the handles and activates the GRAB mode
    for (let i = 0; i < points.length; i++) {
      noStroke();
      fill(0);
      circle(points[i].x, points[i].y, 10);
​
      if (singlePoint[0] != undefined) {
        singlePoint[0].x = mouseX;
        singlePoint[0].y = mouseY;
      }
​
      if (mode == GRAB) {
​
        noFill();
        stroke(255, 0, 0);
        strokeWeight(3);
        line(points[i].x, points[i].y, prevHandles[i].x, prevHandles[i].y);
        line(points[i].x, points[i].y, nextHandles[i].x, nextHandles[i].y);
​
        if (mousePress && mouseButton == LEFT) {
          if (!selectionFull) {
            if (mouseX >= points[i].x - 5 && mouseX <= points[i].x + 5 && mouseY >= points[i].y - 5 && mouseY <= points[i].y + 5) {
              singlePoint[0] = points[i];
              selectionFull = true;
              grabedPointId = i;
​
            } else if (mouseX >= prevHandles[i].x - 5 && mouseX <= prevHandles[i].x + 5 && mouseY >= prevHandles[i].y - 5 && mouseY <= prevHandles[i].y + 5) {
              singlePoint[0] = prevHandles[i];
              selectionFull = true;
​
            } else if (mouseX >= nextHandles[i].x - 5 && mouseX <= nextHandles[i].x + 5 && mouseY >= nextHandles[i].y - 5 && mouseY <= nextHandles[i].y + 5) {
              singlePoint[0] = nextHandles[i];
              selectionFull = true;
            }
          }
        } else {
          selectionFull = false;
          grabedPointId = undefined;
        }
​
        if (singlePoint[0] == points[i]) {
          prevHandles[i].x = points[i].x + (prevHandlesOgLocation[i].x - pointsOgLocation[i].x);
          prevHandles[i].y = points[i].y + (prevHandlesOgLocation[i].y - pointsOgLocation[i].y);
​
          nextHandles[i].x = points[i].x + (nextHandlesOgLocation[i].x - pointsOgLocation[i].x);
          nextHandles[i].y = points[i].y + (nextHandlesOgLocation[i].y - pointsOgLocation[i].y);
        }
​
        if (singlePoint[0] == prevHandles[i]) {
          if (altKey) {
            nextHandles[i].x = points[i].x - (mouseX - points[i].x);
            nextHandles[i].y = points[i].y - (mouseY - points[i].y);
          }
        }
​
        if (singlePoint[0] == nextHandles[i]) {
          if (altKey) {
            prevHandles[i].x = points[i].x - (mouseX - points[i].x);
            prevHandles[i].y = points[i].y - (mouseY - points[i].y);
          }
        }
​
      }
    }
​
    //Manages the selected points
    if (selectionKey && mode == GRAB && mousePress) {
      for (let i = 0; i < selectedPoints.length; i++) {
        points[selectedPoints[i]].x = pointsOgLocation[selectedPoints[i]].x + offsetX;
        points[selectedPoints[i]].y = pointsOgLocation[selectedPoints[i]].y + offsetY;
​
        prevHandles[selectedPoints[i]].x = points[selectedPoints[i]].x + (prevHandlesOgLocation[selectedPoints[i]].x - pointsOgLocation[selectedPoints[i]].x);
        prevHandles[selectedPoints[i]].y = points[selectedPoints[i]].y + (prevHandlesOgLocation[selectedPoints[i]].y - pointsOgLocation[selectedPoints[i]].y);
  
        nextHandles[selectedPoints[i]].x = points[selectedPoints[i]].x + (nextHandlesOgLocation[selectedPoints[i]].x - pointsOgLocation[selectedPoints[i]].x);
        nextHandles[selectedPoints[i]].y = points[selectedPoints[i]].y + (nextHandlesOgLocation[selectedPoints[i]].y - pointsOgLocation[selectedPoints[i]].y);
      }
    }
  }
​
  //Manages the middle mode
  if (mode == MIDDLE) {
    fill("
#46B774");
    noStroke();
    ellipse(centerPointPos.x, centerPointPos.y, 20, 20);
​
    if (mousePress && mouseX >= centerPointPos.x - 10 && mouseX <= centerPointPos.x + 10 && mouseY >= centerPointPos.y - 10 && mouseY <= centerPointPos.y + 10) {
      singlePoint[0] = centerPointPos;
    }
  }
​
  //Check the type of the code
  if (DOMLoaded) {
​
    toggleTracker[0] = toggleTracker[1];
    toggleTracker[1] = document.querySelector('input:checked');
​
    if (document.querySelector('input:checked') !== null) {
      functionType = PROCESSING;
      if (document.querySelector('.type').innerText != 'PROCESSING')
        document.querySelector('.type').innerText = 'PROCESSING';
​
      document.querySelector('.type').classList.add("processing");
      document.querySelector('.type').classList.remove("p5js");
​
      document.querySelector('button').classList.add("processing");
      document.querySelector('button').classList.remove("p5js");
    } else {
      functionType = P5;
      if (document.querySelector('.type').innerText != 'P5.JS')
        document.querySelector('.type').innerText = 'P5.JS';
​
      document.querySelector('.type').classList.add("p5js");
      document.querySelector('.type').classList.remove("processing");
​
      document.querySelector('button').classList.add("p5js");
      document.querySelector('button').classList.remove("processing");
    }
  }
​
  if (toggleTracker[0] != toggleTracker[1]) {
    updateCode();
  }
​
  if (DOMLoaded && canvasLoaded) {
    document.querySelector("main").addEventListener('contextmenu', (e) => {
      e.preventDefault();
    });
  }
}
​
//----------------------------------------------- FUNCTIONS ----------------------------------------------
​
function keyPressed() {
  if (key == 'a' || key == 'A') {
    mode = GRAB;
  } else if (key == 's' || key == 'S') {
    mode = CREATE;
  } else if (key == 'd' || key == 'D') {
    mode = MIDDLE;
  }
​
  if (keyCode === SHIFT) {
    selectionKey = true;
  }
​
  if (keyCode === ALT) {
    altKey = true;
  }
​
  if (key == '=' || key == '+') {
    plusKey = true;
  }
  
  if(key == 'g' || key == 'G'){
    if(showGrid){
      showGrid = false;
    } else {
      showGrid = true;
    }
  }
}
​
function keyReleased() {
  if (keyCode === SHIFT) {
    selectionKey = false;
​
    selectedPoints = [];
    selectedPrev = [];
    selectedNext = [];
  }
​
  if (keyCode === ALT) {
    altKey = false;
  }
​
  if (key == '=' || key == '+') {
    plusKey = false;
  }
}
​
function mousePressed() {
  mousePress = true;
​
  offsetX = 0;
  offsetY = 0;
  offsetOriginX = mouseX;
  offsetOriginY = mouseY;
​
  if (mouseButton == RIGHT && selectionKey) {
    selectionSquareOrigin.x = mouseX;
    selectionSquareOrigin.y = mouseY;
    showSquare = true;
  }
​
  if (plusKey) {
    addPoint();
  } else {
    lastAdded = points.length;
  }
​
  coordinates = [];
​
  //Adds new points
  if (!plusKey && mouseX <= width && mouseY <= height) {
    if (mode == CREATE) {
      if (mouseButton === LEFT) {
        points.push(createVector(mouseX, mouseY));
        prevHandles.push(createVector(mouseX - 50, mouseY));
        nextHandles.push(createVector(mouseX + 50, mouseY));
​
        pointsOgLocation.push(createVector(mouseX, mouseY));
        prevHandlesOgLocation.push(createVector(mouseX - 50, mouseY));
        nextHandlesOgLocation.push(createVector(mouseX + 50, mouseY));
​
        handlePos = true;
      }
    }
    updateCode();
  }
​
  //Resets points og locations
  for (let i = 0; i < points.length; i++) {
    pointsOgLocation[i].x = points[i].x;
    pointsOgLocation[i].y = points[i].y;
​
    prevHandlesOgLocation[i].x = prevHandles[i].x;
    prevHandlesOgLocation[i].y = prevHandles[i].y;
​
    nextHandlesOgLocation[i].x = nextHandles[i].x;
    nextHandlesOgLocation[i].y = nextHandles[i].y;
  }
​
  //Delete point
  if (mode == CREATE) {
    if (mouseButton === RIGHT) {
      for (let i = points.length - 1; i >= 0; i--) {
        if (mouseX >= points[i].x - 5 && mouseX <= points[i].x + 5 && mouseY >= points[i].y - 5 && mouseY <= points[i].y + 5) {
          points.splice(i, 1);
          prevHandles.splice(i, 1);
          nextHandles.splice(i, 1);
          break;
        }
      }
      updateCode();
    }
  }
}
​
function mouseDragged() {
  if (mouseButton == LEFT) {
    if (handlePos) {
      if (selectionKey) {
        if (dist(mouseX, 0, points[lastAdded].x, 0) <= dist(0, mouseY, 0, points[lastAdded].y)) {
          nextHandles[lastAdded].x = points[lastAdded].x;
          nextHandles[lastAdded].y = mouseY;
​
          prevHandles[lastAdded].x = points[lastAdded].x;
          prevHandles[lastAdded].y = points[lastAdded].y - (mouseY - points[lastAdded].y);
        } else {
          nextHandles[lastAdded].x = mouseX;
          nextHandles[lastAdded].y = points[lastAdded].y;
​
          prevHandles[lastAdded].x = points[lastAdded].x - (mouseX - points[lastAdded].x);
          prevHandles[lastAdded].y = points[lastAdded].y;
        }
      } else {
        nextHandles[lastAdded].x = mouseX;
        nextHandles[lastAdded].y = mouseY;
​
        prevHandles[lastAdded].x = points[lastAdded].x - (mouseX - points[lastAdded].x);
        prevHandles[lastAdded].y = points[lastAdded].y - (mouseY - points[lastAdded].y);
      }
    }
​
    offsetX = mouseX - offsetOriginX;
    offsetY = mouseY - offsetOriginY;
​
    selectionFull = true;
  }
}
​
function mouseReleased() {
  mousePress = false;
  handlePos = false;
  singlePoint[0] = 0;
​
  //Multiple selection
  if (selectionKey && mode == GRAB) {
    for (let i = 0; i < points.length; i++) {
      //If the points are clicked
      if (mouseX >= points[i].x - 5 && mouseX <= points[i].x + 5 && mouseY >= points[i].y - 5 && mouseY <= points[i].y + 5) {
        if (selectedPoints.includes(i)) {
          selectedPoints.splice(selectedPoints.indexOf(i), 1);
        } else {
          selectedPoints.push(i);
        }
      }
​
      //If the points are touching the square
      if (showSquare) {
        if (squareTopCorner.x + squareWidth >= points[i].x - 5 && squareTopCorner.x <= points[i].x + 5 && squareTopCorner.y + squareHeight >= points[i].y - 5 && squareTopCorner.y <= points[i].y + 5) {
          if (!selectedPoints.includes(i)) {
            selectedPoints.push(i);
          }
        }
      }
    }
  }
​
  showSquare = false;
  selectionSquareOrigin.x = 0;
  selectionSquareOrigin.y = 0;
​
  checkDimentions();
  updateCode();
}
​
function checkDimentions() {
  for (let i = 0; i < points.length - 1; i++) {
    for (let t = 0; t < 1; t += 0.01) {
      let x = bezierPoint(points[i].x, nextHandles[i].x, prevHandles[i + 1].x, points[i + 1].x, t);
      let y = bezierPoint(points[i].y, nextHandles[i].y, prevHandles[i + 1].y, points[i + 1].y, t);
      coordinates.push(createVector(x, y));
    }
  }
​
  for (let i = 0; i < coordinates.length; i++) {
    let value = coordinates[i];
    topPoint = min(value.y, topPoint);
    bottomPoint = max(value.y, bottomPoint);
    leftPoint = min(value.x, leftPoint);
    rightPoint = max(value.x, rightPoint);
  }
}
​
function addPoint() {
  for (let i = 0; i < coordinates.length; i++) {
    if (mouseX >= coordinates[i].x - 5 && mouseX <= coordinates[i].x + 5 && mouseY >= coordinates[i].y - 5 && mouseY <= coordinates[i].y + 5) {
​
      let previous = (i - (i % 100)) / 100;
      let next = previous + 1;
​
      if (mode == CREATE) {
        if (mouseButton === LEFT) {
          points.splice(next, 0, createVector(mouseX, mouseY));
          prevHandles.splice(next, 0, createVector(mouseX - 50, mouseY));
          nextHandles.splice(next, 0, createVector(mouseX + 50, mouseY));
​
          pointsOgLocation.splice(next, 0, createVector(mouseX, mouseY));
          prevHandlesOgLocation.splice(next, 0, createVector(mouseX - 50, mouseY));
          nextHandlesOgLocation.splice(next, 0, createVector(mouseX + 50, mouseY));
​
          lastAdded = next;
          handlePos = true;
​
          break;
        }
      }
    }
  }
}
​
function updateCode() {
  printCode = "";
​
  if (points.length > 1) {
​
    if (functionType == PROCESSING) {
      document.querySelector(".codeText").classList.add("processing");
      document.querySelector(".codeText").classList.remove("p5js");
      printCode += "<span class='noWrap'><span class='darkBlue'>void</span> <span class='
yellow'>myShape</span>(<span class='
orange'>float</span> <span class='lightBlue'>shapePosX</span>, <span class='
orange'>float</span> <span class='lightBlue'>shapePosY</span>, <span class='
orange'>float</span> <span class='lightBlue'>shapeWidth</span>, <span class='
orange'>float</span> <span class='lightBlue'>shapeHeight</span>) { </span><br>";
    } else {
      document.querySelector(".codeText").classList.add("p5js");
      document.querySelector(".codeText").classList.remove("processing");
      printCode += "<span class='noWrap'><span class='darkBlue'>function</span> <span class='
yellow'>myShape</span>(<span class='lightBlue'>shapePosX</span>, <span class='lightBlue'>shapePosY</span>, <span class='lightBlue'>shapeWidth</span>, <span class='lightBlue'>shapeHeight</span>) { </span><br>";
    }
​
    printCode += "<span class='offset'>"
​
    printCode += "<span class='
yellow'>push</span>();<br>";
    printCode += "<span class='
yellow'>translate</span>(<span class='lightBlue'>shapePosX</span>, <span class='lightBlue'>shapePosY</span>);<br>";
    printCode += "<span class='
yellow'>scale</span>(<span class='lightBlue'>shapeWidth</span>/<span class='
green'>" + (rightPoint - leftPoint) + "</span>, <span class='lightBlue'>shapeHeight</span>/<span class='
green'>" + (bottomPoint - topPoint) + "</span>);<br>";
​
    printCode += "<span class='
yellow'>beginShape</span>();<br>";
    printCode += "<span class='
yellow'>vertex</span>(<span class='
green'>" + (points[0].x - centerPointPos.x) + "</span>, <span class='
green'>" + (points[0].y - centerPointPos.y) + "</span>);<br>";
    for (let i = 0; i < points.length - 1; i++) {
      printCode += "<span class='
yellow'>bezierVertex</span>(<span class='
green'>" + (nextHandles[i].x - centerPointPos.x) + "</span>, <span class='
green'>" + (nextHandles[i].y - centerPointPos.y) + "</span>, <span class='
green'>" + (prevHandles[i + 1].x - centerPointPos.x) + "</span>, <span class='
green'>" + (prevHandles[i + 1].y - centerPointPos.y) + "</span>, <span class='
green'>" + (points[i + 1].x - centerPointPos.x) + "</span>, <span class='
green'>" + (points[i + 1].y - centerPointPos.y) + "</span>);<br>";
    }
    printCode += "<span class='
yellow'>endShape</span>();<br>";
    printCode += "<span class='
yellow'>pop</span>();<br>";
​
    printCode += "</span>"
​
    printCode += "}";
  }
​
  document.querySelector(".codeText").innerHTML = printCode;
​
}
​
function copyToClipBoard() {
  var copyText = document.querySelector(".codeText").innerText;
  var elem = document.createElement("textarea");
  document.body.appendChild(elem);
  elem.value = copyText;
  elem.select();
  document.execCommand("copy");
  document.body.removeChild(elem);
}
​
document.addEventListener("DOMContentLoaded", () => {
​
  DOMLoaded = true;
​
  document.querySelector("body").addEventListener('keyPressed', (e) => {
    e.altKey.preventDefault();
  });
});