update

gates/gate.js

@@ -1,25 +1,36 @@
 class Gate {
-    constructor(x, y, type) {
+    constructor(x, y, type, image) {
         this.x = x;
         this.y = y;
+        this.image = image;
         this.types = new Types(type);
         this.selected = false;
 
+        this.width = 50;
+        this.height = 50;
+
         this.inputs = [];
         this.outputs = [];
-        for(var i = 0; i < this.types.type.inputs; i++){
+        for (var i = 0; i < this.types.type.inputs; i++) {
             //TODO calculate postions for ankors based on this.x and this.y
             this.inputs.push(new Ankor(this.x - 10, this.y));
         }
-        for(var i = 0; i < this.types.type.outputs; i++){
+        for (var i = 0; i < this.types.type.outputs; i++) {
             //TODO calculate postions for ankors based on this.x and this.y
             this.outputs.push(new Ankor(this.x + 10, this.y));
         }
     }
 
     draw() {
-        //todo draw gate and ankors and use type to resolve image
+        //TODO draw ankors add exception for light and switch
+        //draw gate and load image
+        fill(255);
+        image(this.image, this.x, this.y);
+        noFill();
+        noStroke();
+        rect(this.x, this.y, this.width, this.height);
 
+        //draw ankors
     }
 
     calculate() {
@@ -27,17 +38,31 @@ class Gate {
 
     }
 
+    onGate(x, y) {
+        if (
+            x > this.x &&
+            x < this.x + this.width &&
+            y > this.y &&
+            y < this.y + this.height
+        ) {
+            return true;
+        }
+        return false;
+    }
+
     returnOnAnkor(x, y) {
+        //todo add actual onankor that works with renderd circles
         this.inputs.forEach(ankor => {
-            if(x == ankor.x && y == ankor.y){
+            if (x == ankor.x && y == ankor.y) {
                 return ankor;
             }
         });
         this.outputs.forEach(ankor => {
-            if(x == ankor.x && y == ankor.y){
+            if (x == ankor.x && y == ankor.y) {
                 return ankor;
             }
         });
+
         return false;
     }
 }

sketch.js

@@ -14,15 +14,33 @@ function preload() {
 
 function setup() {
     createCanvas(displayWidth, displayHeight);
-    var gate = new Gate(1, 2, "light");
-    console.log(gate)
+    gates = [];
+    gate1 = new Gate(150, 150, "not", not);
+    gate2 = new Gate(250, 250, "not", not);
+    gates.push(gate1);
+    gates.push(gate2);
 }
 
 function draw() {
-    background(0);
-    stroke(255);
+    background(255);
+    stroke(0);
+    gates.forEach(gate => {
+        gate.draw();
+    });
 }
 
 function mousePressed() {
-
+    gates.forEach(gate => {
+        if(gate.onGate(mouseX, mouseY)){
+            gate.selected = true;
+        }
+    });
+}
+
+function mouseReleased() {
+    gates.forEach(gate => {
+        if(gate.onGate(mouseX, mouseY)){
+            gate.selected = false;
+        }
+    });
 }