Error in object generation to logic gates simulator in p5.js

in my logic gates simulator I am doing another object to generate to the canvas and I am doing a frequency generator but when I have the onclick function on the button so that it is generated, my frequency does not work and the whole object does not work. Someone would advise me thank you.

The link to the whole project is here in the online p5.js editor: https://editor.p5js.org/jakubmitrega1/sketches/Mg1BGpimz

Entity generation functions:

 function createEntity(type) {
  if (type === "switch") {
    entities.push(new Switch(100, 100));
    console.log("Vytvořil si switch!")
  } else if (type === "light") {
    entities.push(new Light(100, 200));
    console.log("Vytvořil si light!")
  } else if (type === "generator") {
    entities.push(new Generator(100, 300));
    console.log("Vytvořil si light!")
  }
}

JavaScript
​x
 
 function createEntity(type) {
  if (type === "switch") {
    entities.push(new Switch(100, 100));
    console.log("Vytvořil si switch!")
  } else if (type === "light") {
    entities.push(new Light(100, 200));
    console.log("Vytvořil si light!")
  } else if (type === "generator") {
    entities.push(new Generator(100, 300));
    console.log("Vytvořil si light!")
  }
}
​

Generator code:

class Generator extends Entity {
    constructor (x, y, frequency) {
        super(x, y, 32, 32);

        this.frequency = frequency;

        this.state = 0;
        this.output = new Pin(x, y, OUTPUT);
    }
    draw() {
        
        this.output.pos.x = this.pos.x+32;
        this.output.pos.y = this.pos.y;
        this.output.draw();
        
        this.state = millis()%(2000/this.frequency)<(1000/this.frequency) ? 1 : 0;

        push();
        translate(this.pos.x, this.pos.y);

        if (this.mouseOver()) {
            stroke('white');
        } else {
            noStroke();
        }

        fill('#888');
        rectMode(CENTER);
        rect(0, 0, 32, 32);

        noStroke();

        fill(255);
        textAlign(CENTER, CENTER);
        textSize(24);
        text(this.state, 0, 0);
        
        textSize(12);
        textAlign(CENTER, TOP);
        text('Freq: ' + this.frequency + ' hz', 0, 20);

        pop();
    }
    
    mousePressed() {
        this.output.mousePressed();
    }
    mouseReleased() {
        this.output.mouseReleased();
    }
}

JavaScript
 
class Generator extends Entity {
    constructor (x, y, frequency) {
        super(x, y, 32, 32);
​
        this.frequency = frequency;
​
        this.state = 0;
        this.output = new Pin(x, y, OUTPUT);
    }
    draw() {
        
        this.output.pos.x = this.pos.x+32;
        this.output.pos.y = this.pos.y;
        this.output.draw();
        
        this.state = millis()%(2000/this.frequency)<(1000/this.frequency) ? 1 : 0;
​
        push();
        translate(this.pos.x, this.pos.y);
​
        if (this.mouseOver()) {
            stroke('white');
        } else {
            noStroke();
        }
​
        fill('#888');
        rectMode(CENTER);
        rect(0, 0, 32, 32);
​
        noStroke();
​
        fill(255);
        textAlign(CENTER, CENTER);
        textSize(24);
        text(this.state, 0, 0);
        
        textSize(12);
        textAlign(CENTER, TOP);
        text('Freq: ' + this.frequency + ' hz', 0, 20);
​
        pop();
    }
    
    mousePressed() {
        this.output.mousePressed();
    }
    mouseReleased() {
        this.output.mouseReleased();
    }
}
​

HTML code:

<body>
        <div class="menu">
            <button onclick="switchMode('hand')">Hand <i class="far fa-hand-paper"></i></button>
            <button onclick="switchMode('move')">Move <i class="fas fa-arrows-alt"></i></button>
            <button onclick="switchMode('wire')">Wire <i class="fas fa-plug"></i></button>
            <button onclick="switchMode('jsonexport')">JSON export <i class="fas fa-file-export"></i></button>
            <button onclick="createEntity('switch')">Switch</button>
            <button onclick="createEntity('light')">Light</button>
            <button onclick="createEntity('generator')">Generator</button>
        </div>

        <br>
    </body>

JavaScript
 
<body>
        <div class="menu">
            <button onclick="switchMode('hand')">Hand <i class="far fa-hand-paper"></i></button>
            <button onclick="switchMode('move')">Move <i class="fas fa-arrows-alt"></i></button>
            <button onclick="switchMode('wire')">Wire <i class="fas fa-plug"></i></button>
            <button onclick="switchMode('jsonexport')">JSON export <i class="fas fa-file-export"></i></button>
            <button onclick="createEntity('switch')">Switch</button>
            <button onclick="createEntity('light')">Light</button>
            <button onclick="createEntity('generator')">Generator</button>
        </div>
​
        <br>
    </body>
​

Answer

In this line :

entities.push(new Generator(100, 300));

JavaScript
 
entities.push(new Generator(100, 300));
​

you don’t pass the frequency to the generator

entities.push(new Generator(100, 300, 10));

JavaScript
 
entities.push(new Generator(100, 300, 10));
​

should work?

Advertisement

Answer