if (mouseIsPressed) & mousePressed() issue

trink

I'm running into an issue with my code. There is an image on the screen (duck, with an animation of eyeWink). If the mouse is pressed I want the duck image to change to quacky and for a quack to sound (quacky image is the same as the duck image except it's beak/bill is open). My issue is I am trying to get this to happen if the mouse is pressed in a specific area (clickable area in mousePressed). At the moment the quack only sounds when the mouse is in the area (yay that's what I wanted!), but the quacky image is triggered wherever the mouse is pressed on the screen. I understand why this is happening from my code but I cannot figure out what do do to get both of these to happen at the same time as long as the user clicks within the bounds of the clickable area. Can anyone point me in the right direction pretty please (I think I'm going quackers!!)

var bathroom;
var ducky;
var quacky;

var eyeX = 721.295;
var eyeY = 303.29;

var area = {
  x: 322,
  y: 208,
  w: 547,
  h: 461
};

var waves = [];


function preload() {

  bathroom = loadImage("images/bathroom.png");
  duck = loadImage("images/duck.png");
  eyeWink = loadAnimation("images/eye_01.png", "images/eye_20.png");
  quacky = loadImage("images/quack_04.png");

  quack = loadSound('sounds/quack.mp3');
}


function setup() {

  createCanvas(1024, 768);
  frameRate(30);

  for (var i = 0; i < 6; i++) {
    waves[i] = new Wave(random(width), random(580, height), random(200, 400), random(20, 45), random(2, 5), random(200, 255));
  }
}


function draw() {

  image(bathroom, 0, 0, width, height); //background image

  fill(84, 161, 224); //water

  noStroke();
  rect(0, 550, width, height);
  for (var i = 0; i < waves.length; i++) {
    waves[i].move();
    waves[i].display();
  }


  if (mouseIsPressed) {

    image(quacky, 0, 0, width, height);

  } else {

    image(duck, 0, 0, width, height);

    scale(0.5); //png images made at double the size, have to be scaled to fit
    animation(eyeWink, eyeX * 2, eyeY * 2);
  }
}

function mousePressed() {
  //clickable area
  if ((mouseX > area.x) && (mouseX < area.x + area.w) && (mouseY > area.y) && (mouseY < area.y + area.h)) {

    if (quack.isPlaying() == false) {

      quack.play();
    }
  }
}

function Wave(tempX, tempY, tempW, tempH, tempXspeed, tempC) {

  this.xpos = tempX;
  this.ypos = tempY;
  this.w = tempW;
  this.h = tempH;
  this.xspeed = tempXspeed;
  this.c = tempC;
}

Wave.prototype.display = function() {
  rectMode(CENTER);
  noStroke();
  fill(this.c, 50); //transparency
  rect(this.xpos, this.ypos, this.w, this.h, 30); //fifth parameter radius valu for all 4 corners
};

Wave.prototype.move = function() {
  this.xpos = this.xpos + this.xspeed;
  if (this.xpos > width + this.w / 2) {
    this.xpos = -this.w / 2;
  }
};

trink

Trying many different ways to fix my problem here and I'm just not getting it :( I can toggle the sequence but that makes the image duck with animation eyeWink disappear after the single (mouseIsPressed)...I have managed to get both images to disappear if the mouse is not in the clickable area...but I just cannot seem to figure out how to make it work properly...if anyone can point me in the right direction I would greatly appreciate it! Thank you for looking!

trink

Ok, after a long time looking at this and trying out many, many, many different solutions I have one that works. I was looking at it all wrong. If the mouse is pressed and it is in the right area then have duck_2 if not show duck_1...the && made it all better! Posting code below to show what I have done. Only one minor issue is as I have said if the sound is not playing then play it, the sketch waits until the sound has ended before playing it again...if the mouse is pressed repeatedly quickly the sound does not keep up (but if I take away this ducky sounds like a robot!). It's only minor but it means on occasion ducky opens his mouth and nothing comes out until the next mouse press.

var bathroom, ducky, quacky;

var eyeX = 721.295; //eye position
var eyeY = 303.29;

var area = { //clickable area
  x: 322,
  y: 208,
  w: 547,
  h: 461
};

var waves = []; //wave array

function preload() {

  bathroom = loadImage("images/bathroom.png");
  duck = loadImage("images/duck.png");
  eyeWink = loadAnimation("images/eye_01.png", "images/eye_20.png");

  quacky = loadImage("images/quack_04.png");
  quack = loadSound('sounds/quack.mp3');
}


function setup() {

  createCanvas(1024, 768);
  frameRate(30);

  for (var i = 0; i < 6; i++) {
    waves[i] = new Wave(random(width), random(580, height), random(200, 400), random(20, 45), random(2, 5), random(200, 255));
  }
}


function draw() {

  image(bathroom, 0, 0, width, height); //background image

  water();

  if ((mouseIsPressed) && ((mouseX > area.x) && (mouseX < area.x + area.w) && (mouseY > area.y) && (mouseY < area.y + area.h))) {

    duck_2();

  } else {

    duck_1();
  }

}


function water() {

  fill(84, 161, 224); //water

  noStroke(); //moving water
  rect(0, 550, width, height);
  for (var i = 0; i < waves.length; i++) {
    waves[i].move();
    waves[i].display();
  }

}

function duck_1() { //wink duck

  image(duck, 0, 0, width, height);
  animation(eyeWink, eyeX, eyeY);

}

function duck_2() { //quack duck

  image(quacky, 0, 0, width, height);

  if (quack.isPlaying() === false) { //if sound not playing then play

    quack.play();
  }

}

GoToLoop

Combine mousePressed() + mouseReleased() for play() or pause():

1. http://p5js.org/reference/#/p5/mousePressed
2. http://p5js.org/reference/#/p5/mouseReleased
3. http://p5js.org/reference/#/p5.SoundFile/play
4. http://p5js.org/reference/#/p5.SoundFile/pause

trink

Thank you @GoToLoop!

I have put quack.play() into it's own mousePressed function, it works better :)