mousePressed inside Constructor Function in JavaScript - p5.js

Question

I am currently working on a Constructor Function in JavaScript - p5.js. My problem is that the mousePressed() function doesn't execute the code in it when I am clicking in on the right spot on the canvas. Basically what I want is that a faction of the content in the cup disappears when I click the mouse on the cup. and when I hit the button I want to fill the cup as originally filled.

Here is my file:

var bierglas;
var füllung;

var xPos = 200;
var yPos = 100;

function setup() {
  createCanvas(650, 450);
  bierglas = new Cup();
  füllung = new Content();
}

function draw() {
  background(51);
  füllung.show();
  füllung.button();
  füllung.move();
  bierglas.square();
  bierglas.henkel();
}

//
// This draws my cup
//
function Cup() {
  this.x = xPos;
  this.y = yPos;
  this.width = 150;
  this.height = 300;

  this.square = function() {
    fill(255, 150);
    rect(this.x, this.y, this.width, this.height);
  };
  this.henkel = function() {
    arc(this.x + this.width, this.y + this.height / 2, 150, 120, 0, HALF_PI);
    arc(this.x + this.width, this.y + this.height / 2, 150, 120, 0, 0);
  };
}

//
// This is for the mousePressed function, the content of the cup and the button
//
function Content() {
  this.x = xPos;
  this.y = yPos;
  this.width = 150;
  this.height = 300;

  this.buttonX = width - width / 4;
  this.buttonY = height - height / 6;
  this.buttonWidth = width / 8;
  this.buttonHeight = height / 6;

  this.show = function() {
    fill(0, 200, 200);
    rect(this.x, this.y * 2, this.width, this.height - this.y);
  };

  this.button = function() {
    fill(255, 0, 0);
    rect(this.buttonX, this.buttonY, this.buttonWidth, this.buttonHeight);
  };

  this.move = function() {
    mousePressed();
  };
}

function mousePressed() {
  if (
    mouseX < this.x + this.width &&
    mouseX > this.x &&
    mouseY < this.y + (this.height - this.y) &&
    mouseY > this.y
  ) {
    this.y * 2;
    console.log("Auf Bierglas getippt");
  }
  if (
    mouseX > this.buttonX &&
    mouseX < this.buttonX + this.buttonWidth &&
    mouseY > this.buttonY &&
    mouseY < this.buttonY + this.buttonHeight
  ) {
    this.y = yPos;
    console.log("Auf Button getippt");
  }
}

score 2 · Accepted Answer · answered Jul 07 '18 at 16:28

You should get into the habit of checking the developer console for errors. You'll see that your mousePressed() function is indeed firing, but it's hitting an error.

Let's look at the first few lines of your mousePressed() function:

function mousePressed() {
  if (
    mouseX < this.x + this.width &&
    mouseX > this.x &&
    mouseY < this.y + (this.height - this.y) &&
    mouseY > this.y
  ) {
    this.y * 2;

You have a few problems here. What do you think this is? I'm guessing that you thought it was an instance of Content, but this is not the case. Therefore, this does not contain variables like x, y, width, or height, which is why you're getting your errors. Also, notice that this.y * 2 doesn't actually do anything with the resulting value.

If I were you, I would break your problem down into smaller steps and take those steps on one at a time. Try to get a very simple sketch that uses mousePressed() working:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function mousePressed(){
    console.log("mouse pressed");
}

Next, try to create a simple sketch that contains one object with a function that you call from the sketch-level mousePressed() function. Here's an example:

var myObject = new MyObject();

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function mousePressed(){
    myObject.mousePressed();
}

function MyObject(){
    this.mousePressed = function(){
        console.log("object mouse pressed");
    };
}

Work your way forward in small steps like this, and remember to always check the developer console for errors. Good luck.

mousePressed inside Constructor Function in JavaScript - p5.js

1 Answers1