createCanvas(1000, 500);

}

​

const gridSize = 40

​

var posX = 0

var posY = 0

​

var placing = "NONE"

var grid = []

for(let i = 0; i < gridSize; i++){

  grid[i] = []

  grid[i].length = gridSize

}

​

var cpf = 0

​

var buttonsCreated = false

​

var buttons = []

​

// button system

{

  // button functions

function newButton(

  name,

  displayText,

  textsize,

  X,

  Y,

  W,

  H,

  Col1,

  Col2,

  ColP1,

  ColP2,

  bWidth,

  func,

  alx,

  aly,

  pad) {

  // Col inputs should be arrays or color()s

  buttons[buttons.length] = [];

  buttons[buttons.length - 1][0] = false;

  buttons[buttons.length - 1][1] = name;

  buttons[buttons.length - 1][2] = displayText ?? "";

  buttons[buttons.length - 1][3] = textsize ?? 10;

  buttons[buttons.length - 1][4] = X ?? 50;

  buttons[buttons.length - 1][5] = Y ?? 50;

  buttons[buttons.length - 1][6] = W ?? 50;

  buttons[buttons.length - 1][7] = H ?? 50;

  buttons[buttons.length - 1][8] = Col1 ?? color(255);

  buttons[buttons.length - 1][9] = Col2 ?? color(0);

  buttons[buttons.length - 1][10] = ColP1 ?? color(255);

  buttons[buttons.length - 1][11] = ColP2 ?? color(0);

  buttons[buttons.length - 1][12] = bWidth ?? 1;

  buttons[buttons.length - 1][13] = func ?? function () {};

  buttons[buttons.length - 1][14] = alx ?? CENTER;

  buttons[buttons.length - 1][15] = aly ?? CENTER;

  buttons[buttons.length - 1][16] = pad ?? 0;

}

​

function removeButton(name) {

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

    if (buttons[i][1] == name) {

      for (let a = i; a < buttons.length; a++) {

        buttons[a] = buttons[a + 1];

      }

      buttons.length = buttons.length - 1;

      break;

    }

  }

}

​

function setButtonAlign(name, alx, aly) {

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

    if (buttons[i][1] == name) {

      buttons[i][14] = aly;

      buttons[i][15] = alx;

    }

  }

}

​

function toggleButton(name) {

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

    if (buttons[i][1] == name) {

      buttons[i][0] = !buttons[i][0];

    }

  }

}

​

function setButtonEnabled(name, value) {

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

    if (buttons[i][1] == name) {

      buttons[i][0] = value;

    }

  }

}

​

function setButtonPos(name, X, Y) {

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

    if (buttons[i][1] == name) {

      buttons[i][4] = X;

      buttons[i][5] = Y;

    }

  }

}

​

function setButtonSize(name, W, H) {

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

    if (buttons[i][1] == name) {

      buttons[i][6] = W;

      buttons[i][7] = H;

    }

  }

}

​

function setButtonColors(name, Col1, Col2, ColP1, ColP2) {

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

    if (buttons[i][1] == name) {

      buttons[i][8] = Col1;

      buttons[i][9] = Col2;

      buttons[i][10] = ColP1;

      buttons[i][11] = ColP2;

    }

  }

}

​

function setButtonText(name, Text, Size) {

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

    if (buttons[i][1] == name) {

      buttons[i][2] = Text;

      buttons[i][3] = Size ?? buttons[i][3];

    }

  }

}

​

function setButtonBorder(name, b) {

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

    if (buttons[i][1] == name) {

      buttons[i][12] = b;

    }

  }

}

​

function setButtonPadding(name, p) {

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

    if (buttons[i][1] == name) {

      buttons[i][16] = p;

    }

  }

}

​

function setButtonFunction(name, func) {

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

    if (buttons[i][1] == name) {

      buttons[i][13] = func;

    }

  }

}

​

function runButton(name) {

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

    if (buttons[i][1] == name) {

      buttons[i][13]();

    }

  }

}

​

function clearButtons() {

  buttons = [];

}

}

​

​

function mouseReleased() {

  pressed = false;

​

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

    if (

      buttons[i][0] &&

      mouseX > buttons[i][4] &&

      mouseX < buttons[i][4] + buttons[i][6] &&

      mouseY > buttons[i][5] &&

      mouseY < buttons[i][5] + buttons[i][7] &&

      !pressed

    ) {

      buttons[i][13]();

      pressed = true;

    }

  }

}

​

function draw() {

  cursor(ARROW)

  background(80,160,90);

  fill(0,5,5)

  noStroke()

  rect(600,0,400,500)

  fill(230)

  stroke(30)

  strokeWeight(2)

  rect(125,25,450,450)

  if(!buttonsCreated){

    // newButton(name,displayText,textsize,X,Y,W,H,Col1,Col2,ColP1,ColP2,bWidth,func,alx,aly,pad)

    newButton("Wire Button", "wire",20,25,25,75,25,color(100),color(230),color(230),color(100),2,function(){

      placing = "wire"

    })

    setButtonEnabled("Wire Button",true)

    buttonsCreated = true

  }

  // button drawer

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

    if (buttons[i][0]) {

      let Hover =

        mouseX > buttons[i][4] &&

        mouseX < buttons[i][4] + buttons[i][6] &&

        mouseY > buttons[i][5] &&

        mouseY < buttons[i][5] + buttons[i][7];

      strokeWeight(buttons[i][12]);

      textAlign(buttons[i][14], buttons[i][15]);

      if (!Hover) {

        stroke(buttons[i][8]);

        fill(buttons[i][9]);

        rect(

          buttons[i][4] + 0.5,

          buttons[i][5] + 0.5,

          buttons[i][6],

          buttons[i][7]

        );

        noStroke();

        fill(buttons[i][8]);

        textSize(buttons[i][3]);

        text(

          buttons[i][2],

          buttons[i][4] + 0.5 + buttons[i][16],

          buttons[i][5] + 0.5 + buttons[i][16],

          buttons[i][6] - buttons[i][16] * 2,

          buttons[i][7] - buttons[i][16] * 2

        );

      } else if (Hover) {

        stroke(buttons[i][10]);

        fill(buttons[i][10]);

        rect(

          buttons[i][4] + 0.5,

          buttons[i][5] + 0.5,

          buttons[i][6],

          buttons[i][7]

        );

        noStroke();

        fill(buttons[i][11]);

        textSize(buttons[i][3]);

        text(

          buttons[i][2],

          buttons[i][4] + 0.5 + buttons[i][16],

          buttons[i][5] + 0.5 + buttons[i][16],

          buttons[i][6] - buttons[i][16] * 2,

          buttons[i][7] - buttons[i][16] * 2

        );

        cursor(HAND);

      }

    }

  }

  textAlign(LEFT,TOP)

  strokeWeight(0.75)

  stroke(100)

  for(i = 0; i < gridSize; i++){

    line(125 + (450/gridSize)*i,25,125 + (450/gridSize)*i,475)

    line(125, 25 + (450/gridSize)*i, 575, 25 + (450/gridSize)*i)

  }

  if(mouseX > 125 && mouseX < 575 && mouseY > 25 && mouseY < 475){

    posX = round( (mouseX - 130)/(450/gridSize) )

    posY = round( (mouseY - 30)/(450/gridSize) )

    fill(100,100,200)

    rect(125 + posX*(450/gridSize), 25 + posY*(450/gridSize), 450/gridSize, 450/gridSize)

  }

  textSize(15)

  noStroke()

  fill(30)

  text("X: "+posX+" Y: "+posY, 125, 480)

  if(mouseX > 125 && mouseX < 575 && mouseY > 25 && mouseY < 475){

    noCursor()

    stroke(0,20,100)

    strokeWeight(2)

    line(mouseX + 5,mouseY,mouseX + 10,mouseY)

    line(mouseX - 5,mouseY,mouseX - 10,mouseY)

    line(mouseX,mouseY + 5,mouseX,mouseY + 10)

    line(mouseX,mouseY - 5,mouseX,mouseY - 10)

  }

}