Ideas on how to click image to make sound play

gotuhooked

Hi! I would appreciate some help on how to make use of mousePressed to have certain sound play when you click an image. Any response would be appreciated. Thanks in advance

import ddf.minim.*;
import processing.sound.*;

Minim minim;
AudioPlayer winter;
AudioPlayer summer;
AudioPlayer spring;
AudioPlayer autumn;


MyImage flower;
MyImage fire;
MyImage sun;
MyImage snowman;
float xpos, ypos;    // Starting position of shape    

float xspeed = 5;  // Speed of the shape
float yspeed = 15;  // Speed of the shape

int xdirection = 1;  // Left or Right
int ydirection = 1;  // Top to Bottom

color c;

void setup() {
  size(800, 800);
  c = color(random(255), random(255), random(255));
  noStroke();


  xpos = width/1.8;
  ypos = height/3;
  flower=new MyImage("Flower.png");
  fire=new MyImage("Sun.png");
  sun=new MyImage("campfire.png");
  snowman=new MyImage("snowman.png");

  // will play sound
  minim = new Minim(this);
  winter = minim.loadFile("Winter Mix.wav");
  summer = minim.loadFile("Summer Mix.wav");
  spring = minim.loadFile("Spring Mix.wav");
  autumn = minim.loadFile("Autumn Mix.wav");
}   


void draw() {
  background(c);

  flower.update();
  sun.update();
  fire.update();
  snowman.update();

  flower.draw();
  sun.draw();
  fire.draw();
  snowman.draw();
}

class MyImage {

  PImage img;
  float x, y;
  int w, h;
  float xspeed, yspeed;

  MyImage(String flower) {
    w=h=200;   
    x=random(w, width-w);
    y=random(h, height-h);
    xspeed=yspeed=5;
    img=loadImage(flower);
    img.resize(200, 200);
  }

  MyImage() {
    w=h=200;   
    x=random(w, width-w);
    y=random(h, height-h);
    xspeed=yspeed=5;
    img=getMeImage(color(0));
  }

  MyImage(color c) {
    w=h=200;   
    x=random(w, width-w);
    y=random(h, height-h);
    xspeed=random(9, 13);    
    yspeed=random(7, 10);
    img=getMeImage(c);
  }


  PImage getMeImage(color c) {

    PImage img=createImage(w, h, RGB);
    img.loadPixels();
    for (int i=0; i<200*200; i++)
      img.pixels[i]=c;
    img.updatePixels();
    return img;
  }

  void update() {
    if (x > width-w || x < 0) {
      xspeed *= -1;
    }
    if (y > height-h || y < 0) {
      yspeed *= -1;
    }
    x+=xspeed;
    y+=yspeed;
  }

  void draw() {
    image(img, x, y);  //ImageMode corners
  }
  void mousePressed() {
    c = color(random(255), random(255), random(255));
  }
} 

there is a lesser problem too. My random background color only changes when you run the program-- not when mouse is pressed. if someone can help with that too, Id be so grateful.

thanks!

Mel

Chrisir

Your function mousePressed is not called automatically since it’s in the class

So you need a second function mousePressed outside the class and for every image call the function in the class

In the latter function say if(mouseX >x && mouseX<x+w&&mouseY>y&&mouseY<y+h)

Then you know you’re on that image

kfrajer

Please check the following example: https://processing.org/examples/button.html

As you see, [1] you need to check the coordinates of your mouse against the center of each of your figures. If the distance is less than half the length of your figure, then your mouse is inside the figure. Then, when you know this, [2]you need to check for mousePressed. If mouse pointer is inside the figure and mouse is pressed, then generate the sound associated with the figure.

Hint: MyImage class can contain an extra field called soundFileName. This class can also have a function called boolean isMouseOver(int mouseXin, int mouseYin). Fianlly, you call this last function in mouseReleased() for each figure.

For example:

void mouseReleased(){
  if (fire.isMouseOver(mouseX,mouseY)==true){
       fire.playSound();  ///YES, you need to implement this function inside MyImage class
  }
}

Remember you need to modify the constructor of the class so to "also" accept the name of the sound file. This is the sound associated to the defined image.

Kf