Piano Using Processing

ahlecksah

Hi! I need help writing this code on Processing for a functioning piano. This is the instructions I was given. (It's due March 1st) Please help! I am genuinely lost (https://forum.processing.org/two/uploads/imageupload/130/GWX4ZGA7D0Z7.png "Screen Shot 2016-02-25 at 10.30.14 AM")

ahlecksah

.

ahlecksah

to

Eeyorelife

Do you have any code? You are given some stuff for free here. Like the mousePressed() class and the MusicBox.playNote(noteNumber, 1000);

I would use two for loops to draw the piano.

Chrisir

what is MusicBox? Do you have that class??

also you fail to show the image of the keyboard that is on the first pages of the handout!!!!!!!!!!!!!!!!

Chrisir

here is A LOT that you have to do

int[] blackRect = {1, 1, 0, 1, 1, 1, 0, 1};

String[] blackName = {"ais", "cis", "dis", "eis", "fis", "gis", "b", "cis"};
String[] blackNote = {"ais", "cis", "dis", "eis", "fis", "gis", "b", "cis"};

String[] whiteName = {"a", "c", "d", "e", "f", "g", "h", "c", "d", "e"};

// this doesn't make much sense: 0 = ? But color(0) is ok.
color[] couleur = {color(0), color(0), 0, color(0), color(0), color(0), 0, color(0)};

ArrayList<Key> keys = new ArrayList();

void setup() {

  size(1280, 750);


  int width_black = 19; // width 
  int width_white = 38;// width


  // defining all keys  


  // white Rect

  for (int i = 0; i < 9; i++) { 
    // fill(128);
    // stroke(0);
    keys.add ( new Key (30-(i*width_white), 110, width_white, 186, 
      whiteName[i], "C-Note", 
      color(255), color(0), 
      new PVector(103, 100, 150)));
  }//for

  //black Rect
  for (int x = 0; x < 8; x++) {
    // fill(couleur[x]);
    // -1 is for noStroke();
    if (blackRect[x] == 1)
      keys.add ( new Key (30-(2 * x * width_black), 110, width_black, 140, 
        blackName[x], blackNote[x]+"-Note", 
        couleur[x], -1, 
        new PVector(94, 99, 151) ));
  }//for 


  //
}// func 

void mousePressed() {
  // all keys
  for (Key k : keys) {
    /*
    if (k...................) {
     // 
     println(k.name
     +" -> "
     +k.note);
     MusicBox.playNote(k.noteNumber, 1000);
     }//if
     */
  }//for
}//func 

void draw() {
  background(0);

  translate(width/2, 111);

  // box
  stroke(111);
  noFill();
  //box(680, 400, 1000);

  // all keys
  for (Key k : keys) {
    k.display();
  }
}


void keyPressed() {
  //
}

// ===========================================
// the class - a blueprint for one key 

class Key {

  float x;
  float y; 

  float w; 
  float h; 

  String name;
  String note; 

  color colFill;
  color colStroke; 
  color colKey; 

  PVector translatePVector;

  //constr
  Key(float x_, float y_, 
    float w_, float h_, 
    String name_, 
    String note_, 
    color colFill_, 
    color colStroke_, 
    PVector translatePVector_) {
    //
    x=x_;
    y=y_;

    w=w_;
    h=h_;

    name=name_;
    note=note_;

    colFill = colFill_;
    colStroke = colStroke_; 

    translatePVector = translatePVector_;
  }//constr

  void display() {
    pushMatrix();
    translate(translatePVector.x, 
      translatePVector.y   ); 
    fill(colFill);
    if (colStroke==-1) 
      noStroke(); 
    else 
    stroke(colStroke);
    rect(x, y, w, h);
    popMatrix();
  }//method

  //
}
//

ahlecksah

I was given a file called "MusicBox" and it's a Java code. He wants us to use that to create the sounds of each key

ahlecksah

import java.util.Arrays; import javax.sound.midi.*; public class MusicBox { static Synthesizer synthesizer; static MidiChannel[] channels; static boolean noSound = false;

public static void initialize() { try { if (!noSound) { synthesizer = MidiSystem.getSynthesizer(); synthesizer.open();

    channels = synthesizer.getChannels();

    Instrument[] instr = synthesizer.getDefaultSoundbank()
      .getInstruments();
    synthesizer.loadInstrument(instr[0]);
    System.out.println(channels.length);
  }
}
catch (Exception ex) {
  System.out.println("Could not load the MIDI synthesizer.");
}

}

public static void cleanUp() { if (synthesizer != null) synthesizer.close(); }

public static void playNote(final int note, final int milliseconds) { System.out.println("");

Thread t = new Thread() {
  public void run() {
    try {
      if (!noSound && channels != null && channels.length > 0) {
        channels[0].noteOn(note, 120);
        sleep(milliseconds);
        channels[0].noteOff(note);
      }
    } 
    catch (Exception ex) {
      System.out.println("ERROR: " + ex);
    }
  }
};
t.start();

}

public static void playChord(int note1, int note2, int note3, int milliseconds) { playChord(new int[] {note1, note2, note3}, milliseconds); }

public static void playChord(final int[] notes, final int milliseconds) { System.out.println("");

Thread t = new Thread() {
  public void run() {
    try {
      if (!noSound && channels != null && channels.length > 0) {
        int channel = 0;
        for (int n : notes) {
          channels[channel++].noteOn(n, 120);
        }
        sleep(milliseconds);
        for (channel = 0; channel < notes.length; channel++) {
          channels[channel].noteOff(notes[channel]);
        }
      }
    }
    catch (Exception ex) {
      System.out.println("ERROR:" + ex);
    }
  }
};
t.start();

}

public static void playScale(int note1, int note2, int note3, int note4, int note5, int note6, int note7, int note8, int milliseconds) { playScale(new int[] {note1, note2, note3, note4, note5, note6, note7, note8}, milliseconds);
}

public static void playScale(final int[] notes, final int milliseconds) { Thread t = new Thread() { public void run() { try { if (!noSound && channels != null && channels.length > 0) { for (int n : notes) { channels[0].noteOn(n, 120); sleep(milliseconds); channels[0].noteOff(n); } } } catch (Exception ex) { System.out.println("ERROR:" + ex); } } }; t.start(); }

private static void sleep(int length) { try { Thread.sleep(length); } catch (Exception ex) { } } }`

ahlecksah

sorry the way the code posted was all weird

GoToLoop

https://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text

Chrisir

just join the

class MusicBox

with my code above

ahlecksah

void setup(){
  size(800,600);
  background(255);
}
void draw(){
  int keyWidth= 0;
  int whiteWidth= width/8;
  float blackHeight= height*3/5;
  float blackWidth= whiteWidth/2+whiteWidth/4;
  int blackHover= -1;
  
  for (int i=0; i<8; i++){
    float keyHeight= whiteWidth*(i+1)- blackWidth/2;
    if(mouseX> keyHeight && mouseX <= keyHeight*blackWidth && 
    mouseY <= blackHeight && i !=2){
    blackHover = i;
    }
  }
  for( int whiteKey=0; whiteKey < 8; whiteKey++){
    stroke(1);
    strokeWeight(3);
    int keyHeight = whiteKey * whiteWidth;
    if(mouseX> keyHeight && mouseX <=keyHeight+ whiteWidth && blackHover == -1){
      fill(255,250,200);
    } else if(mouseX> keyHeight && mouseX <=keyHeight+ whiteWidth && mouseY<=keyHeight &&
    mousePressed&&blackHover == whiteKey){
      fill(255,0,0);
    }else{
      fill(255);
    }
    rect(keyHeight, keyWidth, whiteWidth, height);
  }
  for(int blackKey=0; blackKey<6; blackKey++){
    float keyHeight= whiteWidth*(blackKey+1)- blackWidth/2;
    if(blackKey==2){
      keyHeight= whiteWidth*(blackKey+1)-blackWidth/2+whiteWidth;
    }
    fill(0);
    blackHover= blackKey;
    noStroke();
    if(mouseX> keyHeight&&mouseX<=keyHeight+blackWidth && mouseY<= blackHeight
    && mousePressed &&blackHover== blackKey){
      stroke(2);
      fill(0,255,255);
    }else if(mouseX>keyHeight&& mouseX

ahlecksah

ahlecksah

<= keyHeight+ blackWidth&& mouseY <= blackHeight&& blackHover== blackKey){ stroke(2); fill(50,255,50); }else{ fill(0); } rect(keyHeight, keyWidth, blackWidth, blackHeight); } }

ahlecksah

That's what I've got and i need help with the white keys changing on mousePressed and then somehow putting the MusicBox class into my code

Chrisir

the posting of your code ends before the function draw() ends....

also you need a way that when the mouse is pressed you call MusicBox.playNote(noteNumber, 1000); for that key.

Also each key needs to know its noteNumber, e.g. in an array :

here you define it the note values:

int [] noteNumbersForBlackKey = [27,28,29 etc. ]; 

then play the note value for the current key

  MusicBox.playNote( noteNumbersForBlackKey[blackKey] , 1000);

ahlecksah

void setup(){
  size(800,600);
  background(255);
}
void draw(){
  int keyWidth= 0;
  int whiteWidth= width/8;
  float blackHeight= height*3/5;
  float blackWidth= whiteWidth/2;
  int blackHover= -1;

  for (int i=0; i<8; i++){
    float keyHeight= whiteWidth*(i+1)- blackWidth/2;
    if(mouseX> keyHeight && mouseX <= keyHeight+blackWidth && 
    mouseY <= blackHeight && i !=2){
    blackHover = i;
    }
  }
  for( int whiteKey=0; whiteKey < 8; whiteKey++){
    stroke(1);
    int keyHeight = whiteKey * whiteWidth;
    if(mouseX >= keyHeight && mouseX <= keyHeight+ whiteWidth && mouseY<= whiteWidth &&
    mousePressed && blackHover == keyHeight){
      fill(255,0,0);
    } else if(mouseX> keyHeight && mouseX <=keyHeight+ whiteWidth && blackHover == -1){
      fill(255,250,200);
    }else{
      fill(255);
    }
    rect(keyHeight, keyWidth, whiteWidth, height);
  }
  for(int blackKey=0; blackKey<6; blackKey++){
    noStroke();
    float keyHeight= whiteWidth*(blackKey+1)- blackWidth/2;
    if(blackKey==2){
      keyHeight= whiteWidth*(blackKey+1)-blackWidth/2+whiteWidth;
    }
    fill(0);
    blackHover= blackKey;
    if(mouseX> keyHeight&&mouseX<=keyHeight+blackWidth && mouseY<= blackHeight
    && mousePressed &&blackHover== blackKey){
      stroke(2);
      fill(0,255,255);
    }else if(mouseX>keyHeight&& mouseX<= keyHeight+ blackWidth&& mouseY <= blackHeight&& 
    blackHover== blackKey){
      stroke(2);
      fill(50,255,50);
    }else{
      fill(0);
    }
    rect(keyHeight, keyWidth, blackWidth, blackHeight);
  }
}

ahlecksah

This is the code that I've come up with. the MusicBox file is a java file and I don't know how to place it into this code. And my mouse pressed function for the white key won't work.

Chrisir

You can just paste the entire musicBox code below your code.

Then call musicbox initialize first

And then playnote as I said above

ahlecksah

this is what pops up when i copy and pasted the MusicBox code.

ahlecksah

//This is the MusicBox code

import java.util.Arrays;
import javax.sound.midi.*;
public class MusicBox {
  static Synthesizer synthesizer;
  static MidiChannel[] channels;
  static boolean noSound = false;

  public static void initialize() {
    try {
      if (!noSound) {
        synthesizer = MidiSystem.getSynthesizer();
        synthesizer.open();

        channels = synthesizer.getChannels();

        Instrument[] instr = synthesizer.getDefaultSoundbank()
          .getInstruments();
        synthesizer.loadInstrument(instr[0]);
        System.out.println(channels.length);
      }
    }
    catch (Exception ex) {
      System.out.println("Could not load the MIDI synthesizer.");
    }
  }

  public static void cleanUp() {
    if (synthesizer != null)
      synthesizer.close();
  }

  public static void playNote(final int note, final int milliseconds) {
    System.out.println("");

    Thread t = new Thread() {
      public void run() {
        try {
          if (!noSound && channels != null && channels.length > 0) {
            channels[0].noteOn(note, 120);
            sleep(milliseconds);
            channels[0].noteOff(note);
          }
        } 
        catch (Exception ex) {
          System.out.println("ERROR: " + ex);
        }
      }
    };
    t.start();
  }

  public static void playChord(int note1, int note2, int note3, int milliseconds) {
    playChord(new int[] {note1, note2, note3}, milliseconds); 
  }
  
  public static void playChord(final int[] notes, final int milliseconds) {
    System.out.println("");

    Thread t = new Thread() {
      public void run() {
        try {
          if (!noSound && channels != null && channels.length > 0) {
            int channel = 0;
            for (int n : notes) {
              channels[channel++].noteOn(n, 120);
            }
            sleep(milliseconds);
            for (channel = 0; channel < notes.length; channel++) {
              channels[channel].noteOff(notes[channel]);
            }
          }
        }
        catch (Exception ex) {
          System.out.println("ERROR:" + ex);
        }
      }
    };
    t.start();
  }
  
  public static void playScale(int note1, int note2, int note3, int note4, int note5,
    int note6, int note7, int note8, int milliseconds) {
    playScale(new int[] {note1, note2, note3, note4, note5, note6, note7, note8}, milliseconds);      
  }

  public static void playScale(final int[] notes, final int milliseconds) {
    Thread t = new Thread() {
      public void run() {
        try {
          if (!noSound && channels != null && channels.length > 0) {
            for (int n : notes) {
              channels[0].noteOn(n, 120);
              sleep(milliseconds);
              channels[0].noteOff(n);
            }
          }
        }
        catch (Exception ex) {
          System.out.println("ERROR:" + ex);
        }
      }
    };
    t.start();
  }

  private static void sleep(int length) {
    try {
      Thread.sleep(length);
    }
    catch (Exception ex) {
    }
  }
}

Chrisir

Yeah

Remove all static from the entire class pls

Chrisir

Also

MusicBox mb;

Before setup

Then in setup()

mb=new MusicBox(); mb.initialize();

then later

mb.playNote(........

Chrisir

Sorry I am on a journey and can't do it for you

ahlecksah

I understand! Thank you for your help! Could you help me with my mousePressed for the white keys? It won't work.

Chrisir

This

mouseY <= blackHeight

In the if

Should be

mouseY <= keyHeight+blackHeight

Chrisir

What time is it in your place?

TryingToProcess

Hi, would like to know if this has been solved, thanks.

ahlecksah

right now it's 5:12pm here. and not solved yet

Chrisir

Don't give up

ahlecksah

//general set up of the window that the program will display on
void setup(){
  size(800,600);
  background(255);
  MusicBox.initialize();
}
void draw(){
  //declaring variables that will make it easier to adjust
  //the parameters as to how to draw the piano.
  int keyWidth= 0;
  int whiteWidth= width/8;
  float blackHeight= height*3/5;
  float blackWidth= whiteWidth/2;
  // Variable for if mouse is over black or white keys
  int blackHover= -1;
  //Without the following code, when the mouse "hovers" over a key, 
  // then the white and black keys will be colored at the same time. 
  // This code singles out each key to change color individually.
  for (int i=0; i<8; i++){
    float keyHeight= whiteWidth*(i+1)- blackWidth/2;
    if(mouseX> keyHeight && mouseX <= keyHeight+blackWidth && 
    mouseY <= blackHeight && i !=2 && i != 6){
    blackHover = i;
    }
  }
  // Draws the white keys.
  for( int whiteKey=0; whiteKey < width/whiteWidth; whiteKey++){
    stroke(1);
    int keyHeight = whiteKey * whiteWidth;
    // When you press the mouse, the White key will change color.
    if(mouseX > keyHeight && mouseX <= keyHeight+ whiteWidth && mouseY<= keyHeight &&
    mousePressed && blackHover == keyHeight){
      fill(155,250,200);
      MusicBox.playNote(whiteKey+60,1000);
      // When the mouse hovers over the key, the white key will be gray.
    } else if(mouseX>keyHeight && mouseX <=keyHeight+ whiteWidth && blackHover == -1){
      fill(150,155,150);
     //if none of the parameters are true, then the keys remain white. 
    }else{
      fill(255);
    }
    rect(keyHeight, keyWidth, whiteWidth, height);
  }
  // Draws the black keys and makes sure there is only 5 keys
  for(int blackKey=0; blackKey<6; blackKey++){
    noStroke();
    float keyHeight= whiteWidth*(blackKey+1)- blackWidth/2;
    if(blackKey==2){
      keyHeight= whiteWidth*(blackKey+1)-blackWidth/2+whiteWidth;
    }
    fill(0);
    blackHover= blackKey;
    // When mouse is pressed, the black key will become light blue in color.
    if(mouseX> keyHeight&&mouseX<=keyHeight+blackWidth && mouseY<= blackHeight
    && mousePressed &&blackHover== blackKey){
      stroke(2);
      fill(0,255,255);
      MusicBox.playNote(blackKey+60,1000);
      // When the mouse hovers, the black key turns gray.
    }else if(mouseX>keyHeight&& mouseX<= keyHeight+ blackWidth&& mouseY <= blackHeight&& 
    blackHover== blackKey){
      stroke(1);
      fill(150,155,150);
      // If none of the parameters are true, the keys remain black.
    }else{
      fill(0);
    }
    rect(keyHeight, keyWidth, blackWidth, blackHeight);
  }
}``

ahlecksah

the black keys kinda work, but they're playing the wrong note. the black key numbers are 61,63,66,68,70. And my white keys still won't work.

Chrisir

rect(keyHeight, keyWidth

the names of the variables are terrible

I mean, rect is rect(x,y, width, height);

So your names should be

rect( keyPositionX, keyPositionY, keyWidthBlack, keyHeightBlack );

you know good names help you understand your own code; bad names will confuse you in the long run

Anyway, like with the black keys the white keys have the same issue :

mouseY<= keyHeight

Must be

<= keyWidth+keyHeight

( using your bad names here )

In your rect you say height ------- you mean keyHeight

ahlecksah

I GOT IT TO WORK! :) THANK YOU SO MUCH EVERYONE FOR HELPING!

Chrisir

Great!

And do the sounds work?

ahlecksah

Yes! everything works!

Chrisir

Great!

Chrisir

Could you post your code please?

Are there Ressources for other free Instrument sounds?

Thank you!