Processing Piano Help

edited May 2015 in Library Questions

Hi, so I've just recently learned how to program and I'm trying to make a project that you can play a piano with the keyboard.. I don't know much about processing but whenever i run the code, I can only play each note once and nothing else will work. Could someone please tell me what I'm doing wrong?

Many Thanks

(here's my code)

import ddf.minim.*; int notes = 0; int i = 0; int x = 25; int y = 25; int size = 20; int xspeed = 1; int yspeed = 1; AudioPlayer c; AudioPlayer csharp; AudioPlayer d; AudioPlayer dsharp; AudioPlayer e; AudioPlayer esharp; AudioPlayer f; AudioPlayer fsharp; AudioPlayer g; AudioPlayer gsharp; AudioPlayer a; AudioPlayer asharp; AudioPlayer b; AudioPlayer bsharp; AudioPlayer c2; AudioPlayer csharp2; AudioPlayer d2; AudioPlayer dsharp2; AudioPlayer e2;

Minim minim;//audio context

void setup() { frameRate (10); size (380, 89); minim = new Minim(this); c = minim.loadFile("c.mp3", 2048); csharp = minim.loadFile("csharp.mp3", 2048); d = minim.loadFile("d.mp3", 2048); dsharp = minim.loadFile ("dsharp.mp3", 2048); e = minim.loadFile ("e.mp3", 2048); f = minim.loadFile ("f.mp3", 2048); fsharp = minim.loadFile ("fsharp.mp3", 2048); g = minim.loadFile ("g.mp3", 2048); gsharp = minim.loadFile ("gsharp.mp3", 2048); a = minim.loadFile ("a.mp3", 2048); asharp = minim.loadFile ("asharp.mp3", 2048); b = minim.loadFile ("b.mp3", 2048); c2 = minim.loadFile ("c2.mp3", 2048); csharp2 = minim.loadFile ("csharp2.mp3", 2048); d2 = minim.loadFile ("d2.mp3", 2048); }

void draw() {
if (notes < 20); { PImage img; img = loadImage("keyboard.jpg"); size (380, 89); background(img); if (keyPressed && key == 'a') //c { c.play (); notes ++;

  text("c", 12, 60);
} else if (keyPressed && key == 'w') //csharp
{
  notes ++;
  csharp.play ();
} else if (keyPressed && key == 's')  //d
{
  notes ++;
  d.play ();
} else  if (keyPressed && key == 'e') //dsharp
{
  notes ++;
  dsharp.play ();
} else  if (keyPressed && key == 'd') //e
{
  notes ++;
  e.play ();
} else if (keyPressed && key == 'f') //f
{
  notes ++;
  f.play ();
} else  if (keyPressed && key == 't') //fsharp
{
  notes ++;
  fsharp.play ();
} else if (keyPressed && key == 'g') //g
{
  notes ++;
  g.play ();
} else if (keyPressed && key == 'y') //gsharp
{
  notes ++;
  gsharp.play ();
} else if (keyPressed && key == 'h') //a
{
  notes ++;
  a.play ();
} else if (keyPressed && key == 'u') //asharp
{
  notes ++;
  asharp.play ();
} else if (keyPressed && key == 'j') //b
{
  notes ++;
  b.play ();
} else  if (keyPressed && key == 'k') //c
{
  notes ++;
  c2.play ();
} else if (keyPressed && key == 'o') //csharp
{
  notes ++;
  csharp2.play ();
} else if (keyPressed && key == 'l') //d
{
  notes ++;
  d2.play ();
}

} }

Answers

  • read the first 2 tutorials after the video tutorial:

    • setup() runs only once (hence the name)

    • draw() runs on and on

    Hence, please

    • use size() only once at the beginning of setup() - and never in draw()

    • also, load all images in setup() and not in draw()

    Best wishes....

    ;-)

  • edited May 2015 Answer ✓

    In Processing, we implement 2 functions: setup() & draw():

    This tutorial will get ya in right right track:

    https://processing.org/tutorials/overview/

  • edited May 2015

    this must be before setup():

    PImage img;
    

    you use the internal variable keyPressed in draw() now - this can cause that you hear one note a few times

    to avoid this (when this is a problem for you), use the function keyPressed() instead, see reference

    ;-)

  • Thanks so much! When I put all the if statements under a void keyPressed (), I can't hear anything anymore. Also, is it possible for me to change the background without having PImage img; etc before setup and under an if statement instead?

  • edited May 2015

    Now that I've fixed these things, sound won't come out when I press the keys. (sorry...I sound a bit stupid at the moment)

    import ddf.minim.*;
    int notes = 0; 
    int i = 0;
    int x = 25;
    int y = 25;
    int size = 20;
    int xspeed = 1;
    int yspeed = 1;
    AudioPlayer c;
    AudioPlayer csharp;
    AudioPlayer d;
    AudioPlayer dsharp;
    AudioPlayer e;
    AudioPlayer esharp;
    AudioPlayer f;
    AudioPlayer fsharp;
    AudioPlayer g;
    AudioPlayer gsharp;
    AudioPlayer a;
    AudioPlayer asharp;
    AudioPlayer b;
    AudioPlayer bsharp;
    AudioPlayer c2;
    AudioPlayer csharp2;
    AudioPlayer d2;
    AudioPlayer dsharp2;
    AudioPlayer e2;
    Minim minim;//audio context
    PImage img;
    
    void setup()
    {  
    
      frameRate (10); 
      minim = new Minim(this);
      c = minim.loadFile("c.mp3", 2048);
      csharp = minim.loadFile("csharp.mp3", 2048);
      d = minim.loadFile("d.mp3", 2048);
      dsharp = minim.loadFile ("dsharp.mp3", 2048); 
      e = minim.loadFile ("e.mp3", 2048); 
      f = minim.loadFile ("f.mp3", 2048); 
      fsharp = minim.loadFile ("fsharp.mp3", 2048); 
      g = minim.loadFile ("g.mp3", 2048); 
      gsharp = minim.loadFile ("gsharp.mp3", 2048); 
      a = minim.loadFile ("a.mp3", 2048); 
      asharp = minim.loadFile ("asharp.mp3", 2048); 
      b = minim.loadFile ("b.mp3", 2048); 
      c2 = minim.loadFile ("c2.mp3", 2048); 
      csharp2 = minim.loadFile ("csharp2.mp3", 2048); 
      d2 = minim.loadFile ("d2.mp3", 2048);
      img = loadImage("keyboard.jpg");
      size (380, 89);
      background(img);
    }
    
    void keyPressed()
    {  
      if (notes < 20);
      {  
        if (keyPressed && key == 'a') //c
        {
          c.play ();
          notes ++;
    
          text("c", 12, 60);
        } else if (keyPressed && key == 'w') //csharp
        {
          notes ++;
          csharp.play ();
        } else if (keyPressed && key == 's')  //d
        {
          notes ++;
          d.play ();
        } else  if (keyPressed && key == 'e') //dsharp
        {
          notes ++;
          dsharp.play ();
        } else  if (keyPressed && key == 'd') //e
        {
          notes ++;
          e.play ();
        } else if (keyPressed && key == 'f') //f
        {
          notes ++;
          f.play ();
        } else  if (keyPressed && key == 't') //fsharp
        {
          notes ++;
          fsharp.play ();
        } else if (keyPressed && key == 'g') //g
        {
          notes ++;
          g.play ();
        } else if (keyPressed && key == 'y') //gsharp
        {
          notes ++;
          gsharp.play ();
        } else if (keyPressed && key == 'h') //a
        {
          notes ++;
          a.play ();
        } else if (keyPressed && key == 'u') //asharp
        {
          notes ++;
          asharp.play ();
        } else if (keyPressed && key == 'j') //b
        {
          notes ++;
          b.play ();
        } else  if (keyPressed && key == 'k') //c
        {
          notes ++;
          c2.play ();
        } else if (keyPressed && key == 'o') //csharp
        {
          notes ++;
          csharp2.play ();
        } else if (keyPressed && key == 'l') //d
        {
          notes ++;
          d2.play ();
        }
      }
      if (notes >= 20)
      {
        PImage backgroundReplace;
        size (427, 240);
        backgroundReplace = loadImage ("Front view.jpg");   
        background (backgroundReplace);
    
        ellipse (x, y, size, size);
      }
    }
    
  • When I put all the if statements under a void keyPressed (), I can't hear anything anymore.

    can you post this entire code ?

    Also, is it possible for me to change the background without having PImage img; etc before setup and under an if statement instead?

    yes. but you still have to use img and load it in setup() ?

    you can use background with a color instead of an image

  • no ; here please!!!!!!!!!!!!!!!!!!

    if (notes < 20); {

    common mistake

  • Oh, thanks! With the whole background change, I need the 2nd picture for the next stage of the code :/

  • edited May 2015

    what is this!?

    PImage backgroundReplace; 
    size (427, 240); 
    backgroundReplace = loadImage ("Front view.jpg");
    background (backgroundReplace);
    
    
    ellipse (x, y, size, size);
    

    as said - no size in draw() !!!!!!!!!!!!!!!!!!!!!!

    no loading in draw()

    this belongs in setup():

    backgroundReplace = loadImage ("Front view.jpg");

    you can just load it on startup without showing in

    • to load stuff in draw() slows things down a lot

    instead in draw()

    if (notes >= 20) 
    { 
    background (backgroundReplace);
    }
    else {
     background(img); 
    }
    

    YOU STILL NEED draw() !!!!!!!!!!!!!!!!!!!!!!

    why frameRate (10); ?

  • I fixed the whole background thing, but now it's telling me that the background image must be the same as the application. I mean, I put the size in setup but how do I switch from one to the other?

  • you have to resize your images so that they have the same size as your window that you have set using size()

    just resize them with a normal graphics program

  • edited May 2015

    sorry for taking up so much of your time :/ I'm kind of clueless when it comes to programming. The code runs now, but the background won't change and i can only play each note once.

    import ddf.minim.*;
    int notes = 0; 
    int i = 0;
    int x = 25;
    int y = 25;
    int size = 20;
    int xspeed = 1;
    int yspeed = 1;
    AudioPlayer c;
    AudioPlayer csharp;
    AudioPlayer d;
    AudioPlayer dsharp;
    AudioPlayer e;
    AudioPlayer esharp;
    AudioPlayer f;
    AudioPlayer fsharp;
    AudioPlayer g;
    AudioPlayer gsharp;
    AudioPlayer a;
    AudioPlayer asharp;
    AudioPlayer b;
    AudioPlayer bsharp;
    AudioPlayer c2;
    AudioPlayer csharp2;
    AudioPlayer d2;
    AudioPlayer dsharp2;
    AudioPlayer e2;
    Minim minim;//audio context
    PImage img;
    PImage backgroundReplace;
    
    
    void setup()
    { 
      img = loadImage ("keyboard.jpg");
      size (380, 89);
      PImage backgroundReplace;
      backgroundReplace = loadImage ("2.jpg");
      minim = new Minim(this);
      c = minim.loadFile("c.mp3", 2048);
      csharp = minim.loadFile("csharp.mp3", 2048);
      d = minim.loadFile("d.mp3", 2048);
      dsharp = minim.loadFile ("dsharp.mp3", 2048); 
      e = minim.loadFile ("e.mp3", 2048); 
      f = minim.loadFile ("f.mp3", 2048); 
      fsharp = minim.loadFile ("fsharp.mp3", 2048); 
      g = minim.loadFile ("g.mp3", 2048); 
      gsharp = minim.loadFile ("gsharp.mp3", 2048); 
      a = minim.loadFile ("a.mp3", 2048); 
      asharp = minim.loadFile ("asharp.mp3", 2048); 
      b = minim.loadFile ("b.mp3", 2048); 
      c2 = minim.loadFile ("c2.mp3", 2048); 
      csharp2 = minim.loadFile ("csharp2.mp3", 2048); 
      d2 = minim.loadFile ("d2.mp3", 2048);
    }
    void draw ()
    {
      if (notes >= 20) 
      { 
        background (backgroundReplace);
      } else {
        background(img);
    
      }
    }
    void keyPressed()
    {  
      if (notes < 20)
      {  
        if (keyPressed && key == 'a') //c
        {
          c.play ();
          notes ++;
    
          text("c", 12, 60);
        } else if (keyPressed && key == 'w') //csharp
        {
          notes ++;
          csharp.play ();
        } else if (keyPressed && key == 's')  //d
        {
          notes ++;
          d.play ();
        } else  if (keyPressed && key == 'e') //dsharp
        {
          notes ++;
          dsharp.play ();
        } else  if (keyPressed && key == 'd') //e
        {
          notes ++;
          e.play ();
        } else if (keyPressed && key == 'f') //f
        {
          notes ++;
          f.play ();
        } else  if (keyPressed && key == 't') //fsharp
        {
          notes ++;
          fsharp.play ();
        } else if (keyPressed && key == 'g') //g
        {
          notes ++;
          g.play ();
        } else if (keyPressed && key == 'y') //gsharp
        {
          notes ++;
          gsharp.play ();
        } else if (keyPressed && key == 'h') //a
        {
          notes ++;
          a.play ();
        } else if (keyPressed && key == 'u') //asharp
        {
          notes ++;
          asharp.play ();
        } else if (keyPressed && key == 'j') //b
        {
          notes ++;
          b.play ();
        } else  if (keyPressed && key == 'k') //c
        {
          notes ++;
          c2.play ();
        } else if (keyPressed && key == 'o') //csharp
        {
          notes ++;
          csharp2.play ();
        } else if (keyPressed && key == 'l') //d
        {
          notes ++;
          d2.play ();
        }
      }
    }
    
  • edited May 2015

    this belongs before setup()

     PImage backgroundReplace; 
    

    and NOT (a second time) in setup()

  • size (380, 89); should be at the beginning / first line of setup()

  • now it should work

    in keyPressed you don't need keyPressed (it's a given there)

  • when the sketch crashes you see an error message - always post it here when you got one please

    ;-)

  • Thank you so much! the code runs now. Do you have any idea how to enable the keys to play sound more than once? It's fine if you don't, just wondering

  • does it crash?

    can you play each note once and only once?

    you have to rewind it..........

    when it's finished

    use c2.rewind();

    I think

    maybe with a timer to not cut off the sound at the end

    ;-)

  • such things would be a lot easier if you had all notes in an array

    then we could for-loop over it etc.

  • oh, ok my code finally works :) thanks again!

  • great!

  • next step

    play the keyboard with the mouse

    how would you do that?

    ;-)

Sign In or Register to comment.