organizers added & edit popup implemented

canvas.js

@@ -1,41 +1,25 @@
 var mlps = [];
+var ogarganizer;
+var editOrganizer;
 
 function setup() {
   createCanvas(1920, 1080);
+  organizer = new Organizer();
+  editOrganizer = new EditOrganizer(createGraphics(1920, 1080));
 
   mlps.push(new MLP(4, [3, 5, 1], 600, 100));
-  // mlps.push(new MLP(3, [3, 2, 1], 500, 300));
-
-  // xs = [
-  //   [2.0, 3.0, -1.0],
-  //   [3.0, -1.0, 0.5],
-  //   [0.5, 1.0, 1.0],
-  //   [1.0, 1.0, -1.0],
-  // ];
-  // ys = [1.0, -1.0, -1.0, 1.0];
-  //
-  // let k = 0;
-  // let intervalId = setInterval(() => {
-  //   ypred = xs.map((x) => mlp.call(x));
-  //   let loss = new Value(0);
-  //   for (let i = 0; i < ys.length; i++) {
-  //     loss = loss.add(ypred[i].sub(new Value(ys[i])).pow(new Value(2)));
-  //   }
-  //
-  //   m.parameters().forEach((p) => (p.grad = 0.0));
-  //   loss.backprop();
-  //   m.parameters().forEach((p) => (p.data += -0.1 * p.grad));
-  //
-  //   k++;
-  //   if (k >= 20) {
-  //     clearInterval(intervalId);
-  //   }
-  // }, 500);
+  mlps.push(new MLP(4, [3, 5, 1], 600, 100));
+}
+
+function setupPopup() {
+  organizer.disable();
 }
 
 function draw() {
-  background(220);
+  background(255);
   mlps.forEach((m) => m.draw());
+
+  editOrganizer.draw();
 }
 
 function mousePressed() {
@@ -45,3 +29,35 @@ function mousePressed() {
 function mouseReleased() {
   mlps.forEach((mlp) => mlp.handleReleased());
 }
+
+function doubleClicked() {
+  mlps.forEach((mlp) => mlp.handleDoubleClicked());
+}
+
+// mlps.push(new MLP(3, [3, 2, 1], 500, 300));
+//
+// xs = [
+//   [2.0, 3.0, -1.0],
+//   [3.0, -1.0, 0.5],
+//   [0.5, 1.0, 1.0],
+//   [1.0, 1.0, -1.0],
+// ];
+// ys = [1.0, -1.0, -1.0, 1.0];
+//
+// let k = 0;
+// let intervalId = setInterval(() => {
+//   ypred = xs.map((x) => mlp.call(x));
+//   let loss = new Value(0);
+//   for (let i = 0; i < ys.length; i++) {
+//     loss = loss.add(ypred[i].sub(new Value(ys[i])).pow(new Value(2)));
+//   }
+//
+//   m.parameters().forEach((p) => (p.grad = 0.0));
+//   loss.backprop();
+//   m.parameters().forEach((p) => (p.data += -0.1 * p.grad));
+//
+//   k++;
+//   if (k >= 20) {
+//     clearInterval(intervalId);
+//   }
+// }, 500);

draggable.js

@@ -6,36 +6,39 @@ class Draggable {
   }
 
   over() {
-    if (
+    this.rollover =
       mouseX > this.x &&
       mouseX < this.x + this.w &&
       mouseY > this.y &&
-      mouseY < this.y + this.h
-    ) {
-      this.rollover = true;
-    } else {
-      this.rollover = false;
-    }
+      mouseY < this.y + this.h;
   }
 
   pressed(force = false) {
-    if (this.rollover || force) {
+    if (!(this.rollover || force)) return;
+
+    if (!organizer.getDragActive() || force) {
       this.dragging = true;
       this.offsetX = this.x - mouseX;
       this.offsetY = this.y - mouseY;
-      isBusy = this.type == "layer" && !force;
 
-      if (this.type == "mlp") {
-        for (let i = 0; i < this.layers.length; i++) {
-          this.layers[i].pressed(true);
-        }
+      if (this.type === "mlp") {
+        this.layers.forEach((layer) => layer.pressed(true));
       }
+
+      organizer.setDragActive(true);
+    }
+  }
+
+  doubleClicked() {
+    if (this.rollover && !editOrganizer.getSelected()) {
+      editOrganizer.enable();
+      editOrganizer.setSelected(this);
     }
   }
 
   released() {
     this.dragging = false;
-    isBusy = false;
+    organizer.setDragActive(false);
   }
 
   updateCoordinates() {
@@ -45,6 +48,6 @@ class Draggable {
       this.type == "layer" && this.updateNeuronsCoordinates();
     }
 
-    this.type == "mlp" && this.updateLayersCoordinates();
+    this.type == "mlp" && this.updateBorders(); // This is works because when you drag layer you also drag mlp
   }
 }

editOrganizer.js

@@ -0,0 +1,85 @@
+class EditOrganizer {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.enabled = false;
+    this.selected = null;
+    this.selectedCopy = null;
+    this.originX = (width - 500) / 2;
+    this.originY = 150;
+    this.w = 500;
+    this.h = 500;
+    this.setup();
+  }
+
+  setup() {
+    let button = createButton("Click me");
+    button.position(50, 50);
+    button.mousePressed(() => {
+      this.disable();
+    });
+  }
+
+  showSelected() {
+    this.selectedCopy.draw();
+  }
+
+  draw() {
+    this.canvas.fill(255);
+    this.canvas.rect(this.originX, this.originY, this.w, this.h);
+    this.selected && this.showSelected();
+    this.enabled && image(this.canvas, 0, 0);
+  }
+
+  getSelected() {
+    return this.selected;
+  }
+
+  setSelected(layer) {
+    let x = this.originX + (this.w - layer.w) / 2;
+    let y = this.originY;
+
+    this.selected = layer;
+    this.selectedCopy = new Layer(
+      layer.nin,
+      layer.nout,
+      x,
+      y - 100,
+      layer.label,
+      layer.act_func,
+    );
+
+    let cnv = this.canvas;
+    this.selectedCopy.show = () => {
+      let cpy = this.selectedCopy;
+      cnv.fill(255);
+      cnv.rect(cpy.x, cpy.y, 50, cpy.h);
+      cnv.fill(0);
+      cnv.text(cpy.label, cpy.x, cpy.y - 10);
+      cnv.fill(255);
+    };
+
+    this.selectedCopy.neurons.forEach((neuron) => {
+      neuron.show = () => {
+        cnv.fill(255);
+        cnv.circle(neuron.x, neuron.y, 25, 25);
+        cnv.fill(0);
+        cnv.text(neuron.output?.data.toFixed(2), neuron.x + 30, neuron.y);
+        cnv.text(neuron.output?.grad.toFixed(2), neuron.x + 30, neuron.y + 25);
+        fill(255);
+      };
+    });
+  }
+
+  disable() {
+    this.enabled = false;
+    this.selected = null;
+    this.selectedCopy = null;
+    this.canvas.clear();
+  }
+
+  enable() {
+    this.canvas.background(0, 50);
+
+    this.enabled = true;
+  }
+}

index.html

@@ -1,13 +1,20 @@
 <!doctype html>
 <html>
-  <head> </head>
+  <head>
+    <link href="style.css" rel="stylesheet" />
+  </head>
   <body>
+    <div id="disabled-background">
+      <div id="popup-container"></div>
+    </div>
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"
       integrity="sha512-d6sc8kbZEtA2LwB9m/ck0FhvyUwVfdmvTeyJRprmj7Wg9wRFtHDIpr6qk4g/y3Ix3O9I6KHIv6SGu9f7RaP1Gw=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
+    <script src="organizer.js"></script>
+    <script src="editOrganizer.js"></script>
     <script src="draggable.js"></script>
     <script src="js/Value.js"></script>
     <script src="js/ActFunctions.js"></script>

js/MLP.js

@@ -1,5 +1,3 @@
-var isBusy = false;
-
 class Neuron {
   constructor(nin, x, y) {
     this.w = [];
@@ -71,6 +69,7 @@ class Layer extends Draggable {
     super("layer");
     this.act_func = act_func;
     this.nextLayer = null;
+    this.prevLayer = null;
     this.label = label;
     this.x = x;
     this.w = 50;
@@ -118,15 +117,13 @@ class Layer extends Draggable {
     });
   }
 
-  upCoordinates(x, y) {
-    this.x = x;
-    this.y = y;
+  setPrevLayer(layer) {
+    this.prevLayer = layer;
   }
 
   show() {
     fill(255, 255, 255, 0);
     rect(this.x, this.y, 50, this.h);
-    fill(255);
     fill(0);
     text(this.label, this.x, this.y - 10);
     fill(255);
@@ -135,8 +132,9 @@ class Layer extends Draggable {
   draw() {
     this.show();
     this.neurons.forEach((neuron) => neuron.draw());
-    this.over();
-    this.updateCoordinates();
+
+    !organizer.getDragActive() && this.over();
+    (organizer.getDragActive() || this.dragging) && this.updateCoordinates();
   }
 }
 
@@ -161,16 +159,18 @@ class MLP extends Draggable {
       );
 
       if (this.layers.length > 0) {
-        this.layers[this.layers.length - 1].setNextLayer(layer);
+        let prevLayer = this.layers[this.layers.length - 1];
+        prevLayer.setNextLayer(layer);
+        layer.setPrevLayer(prevLayer);
       }
 
       this.layers.push(layer);
     }
 
-    this.updateLayersCoordinates();
+    this.updateBorders();
   }
 
-  updateLayersCoordinates() {
+  updateBorders() {
     let lastX = 0;
     let firstX = width;
     let firstY = height;
@@ -207,7 +207,7 @@ class MLP extends Draggable {
     this.layers.forEach((layer) => {
       layer.pressed();
     });
-    if (isBusy) return;
+    if (organizer.getDragActive()) return;
     this.pressed();
   }
 
@@ -218,10 +218,15 @@ class MLP extends Draggable {
     this.released();
   }
 
+  handleDoubleClicked() {
+    this.layers.forEach((layer) => layer.doubleClicked());
+  }
+
   draw() {
     this.layers.forEach((layer) => layer.draw());
     this.show();
-    !isBusy && this.over();
-    (isBusy || this.dragging) && this.updateCoordinates();
+
+    !organizer.getDragActive() && this.over();
+    (organizer.getDragActive() || this.dragging) && this.updateCoordinates();
   }
 }

organizer.js

@@ -0,0 +1,13 @@
+class Organizer {
+  constructor() {
+    this.dragActive = false;
+  }
+
+  setDragActive(dragActive) {
+    this.dragActive = dragActive;
+  }
+
+  getDragActive() {
+    return this.dragActive;
+  }
+}

style.css

@@ -0,0 +1,15 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+#disabled-background {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.2);
+    display: none;
+    justify-content: center;
+    align-items: center;
+}