How to 'store' previous keyPressed data in the same sketch

mariamalz

I can get one colored bar to expand as I hold down the key. I have another an issue of getting another colored bar to continue where the other one left off? Essentially it continues right after the previous rectangle depending on where it stops. Here's a picture of what I want to achieve (assuming each colored rectangle is a different length).

Here is my code:

int rectWidth=0;
int rectHeight=250;

int x = -rectWidth;  

void setup(){
  size(800,800);
  background(0);
  noStroke();
  smooth();

}

void draw(){

 rect(0, 0, rectWidth, rectHeight);

 if(keyPressed){
   rectWidth++;


  if((key == 'a')) {
   fill(#8fcd9c); }

 if((key == 'b')) {
    fill(#96c6ea); }

 if((key == 'c')) {
    fill(#ef3942); }

 if((key == 'd')) {
    fill(#fdf04d); }

 if((key == 'e')) {
    fill(#c6e9f6); }

 if((key == 'f')) {
    fill(#ef5a7a); }

 if((key == 'g')) {
    fill(#f8971d); } 
 }

TfGuy44

So there are several things you need to keep track of. You need to know what the starting X positions are for all the blocks:

float[] blocks_startingXs;

You need to know the starting Y position for every block:

float[] blocks_startingYs;

And their widths:

float[] blocks_widths;

And their colors, maybe:

color[] blocks_colors;

You could have these four arrays, and when a new block is made, add a new value to each of these arrays. Then the i'th elements in each array is that variable for the i'th block. You could then loop over all of these blocks and draw them.

This is the classic approach, and it will work.

But there is a better way.

---

Define an new kind of thing. The new thing is a Block.

class Block {

}

What do you need to know about just ONE block? Well, we just discussed that. Position, width, and color.

class Block {
  float x, y, w;
  color c;
}

Notice how much less code I have to write for this! Next, we need a way to make a block. That is, we need a function that constructs a Block for us. This is a constructor function, and it has the same name as the class.

class Block {
  float x, y, w;
  color c;
  Block(){
    x = random(width);
    y = random(height);
    w = random(200);
    c = color(255,0,0);
  }
}

Notice that this constructor function is going to create a red Block for us.

Wait, can we see the Block? No. We haven;t told the Block what it looks like yet. Let's give it a way to draw itself.

class Block {
  float x, y, w;
  color c;
  Block(){
    x = random(width);
    y = random(height);
    w = random(200);
    c = color(255,0,0);
  }
  void draw(){
    fill(c);
    stroke(0);
    rect(x,y,w,20);
  }
}

Now we have a new type of thing - a Block. But having a type of a thing isn't the same as having one of those things. This is the difference between having a plan for a house and actually having a house. So let's use the above plan for this type of thing to actually create one of these Blocks:

Block my_first_block;

Well, is that our thing? NO! That is like saying we have SPACE for our thing. It's like saying... there's a house here on the street somewhere. But it's not the house yet. We have to call our constructor to build it.

void setup(){
  size(600,600);
  my_first_block = new Block();
}

This creates the thing. And now we want to see it:

void draw(){
  background(128);
  my_first_block.draw();
}

Got all that? All together now:

class Block {
  float x, y, w;
  color c;
  Block() {
    x = random(width);
    y = random(height);
    w = random(200);
    c = color(255, 0, 0);
  }
  void draw() {
    fill(c);
    stroke(0);
    rect(x, y, w, 20);
  }
}


Block my_first_block;

void setup() {
  size(600, 600);
  my_first_block = new Block();
}

void draw() {
  background(128);
  my_first_block.draw();
}

Try running this. You will see... gasp! ... a block appears!

TfGuy44

So what? What use is one block? We need lots of Blocks!

Okay... that's fine. because we have now defined the Block as a type of thing, it is VERY EASY to make lots of them. We could do this:

class Block {
  float x, y, w;
  color c;
  Block() {
    x = random(width);
    y = random(height);
    w = random(200);
    c = color(255, 0, 0);
  }
  void draw() {
    fill(c);
    stroke(0);
    rect(x, y, w, 20);
  }
}


Block my_first_block;
Block my_second_block;
Block my_third_block;
Block my_fourth_block;


void setup() {
  size(600, 600);
  my_first_block = new Block();
  my_second_block = new Block();
  my_third_block = new Block();
  my_fourth_block = new Block();
}

void draw() {
  background(128);
  my_first_block.draw();
  my_second_block.draw();
  my_third_block.draw();
  my_fourth_block.draw();
}

And now we have FOUR blocks! Notice something important here: The class that defines what a Block is did not change! To make more of these Blocks, we didn't have to redefine -in any way - what one Block is!

Of course we can redefine what a Block is if we like. Maybe each block has a different color:

class Block {
  float x, y, w;
  color c;
  Block() {
    x = random(width);
    y = random(height);
    w = random(200);
    c = color(random(255), random(255), random(255));
  }
  void draw() {
    fill(c);
    stroke(0);
    rect(x, y, w, 20);
  }
}


Block my_first_block;
Block my_second_block;
Block my_third_block;
Block my_fourth_block;


void setup() {
  size(600, 600);
  my_first_block = new Block();
  my_second_block = new Block();
  my_third_block = new Block();
  my_fourth_block = new Block();
}

void draw() {
  background(128);
  my_first_block.draw();
  my_second_block.draw();
  my_third_block.draw();
  my_fourth_block.draw();
}

Notice that by changing what a Block is, all the Blocks I had were changed! Also notice that each Block has it's own copy of each of the variables. That's why there are several different colors, but I only have "one" color variable.

TfGuy44

Now, what if you want MANY blocks? Not four. Four THOUSAND.

Easy. Just put your blocks in an array of Blocks:

class Block {
  float x, y, w;
  color c;
  Block() {
    x = random(width);
    y = random(height);
    w = random(200);
    c = color(random(255), random(255), random(255));
  }
  void draw() {
    fill(c);
    stroke(0);
    rect(x, y, w, 20);
  }
}


Block[] blocks = new Block[4000];

void setup() {
  size(600, 600);
  for( int i = 0; i < blocks.length; blocks[i++] = new Block() );
}

void draw() {
  background(128);
  for( int i = 0; i < blocks.length; blocks[i++].draw() );
}

Again, notice that what a Block is hasn't changed. There are just many of them now.

Or, if you don't know how many Blocks you want, you can have an ArrayList of Blocks:

class Block {
  float x, y, w;
  color c;
  Block() {
    x = random(width);
    y = random(height);
    w = random(200);
    c = color(random(255), random(255), random(255));
  }
  void draw() {
    fill(c);
    stroke(0);
    rect(x, y, w, 20);
  }
}


ArrayList<Block> blocks = new ArrayList();

void setup() {
  size(600, 600);
}

void draw() {
  background(128);
  blocks.add( new Block() );
  for( int i = 0; i < blocks.size(); blocks.get(i++).draw() );
}

This last code should be especially interesting to you, because it's adding more Blocks... which is something you'll need to do.

TfGuy44

Of course, you want to be able to tell each Block where it should be, and how wide to be, and what its color is. So you will need to pass some values into the constructor. That is, when you are making a new Block, you will need that block to not be so randomly placed. You do this with parameters to the constructor function:

class Block {
  float x, y, w;
  color c;
  Block(float ix, float iy, color ic) {
    x = ix;
    y = iy;
    w = 20;
    c = ic;
  }
  void draw() {
    fill(c);
    stroke(0);
    rect(x, y, w, 20);
  }
  void widen(){
    w++;
  }
}


ArrayList<Block> blocks = new ArrayList();

void setup() {
  size(600, 600);
}

void draw() {
  background(128);
  for( int i = 0; i < blocks.size(); blocks.get(i++).draw() );
  if( blocks.size() > 0 ) blocks.get(0).widen();
}

void mousePressed(){
    blocks.add( new Block(mouseX, mouseY, color(255,0,random(255)) ) );
}

Here they are being placed at the mouse's position when the mouse is clicked (so be sure to click a bunch!). The color is a shade of red/purple, determined in mousePressed().

Also notice that I taught the Blocks a new trick: They now have a widen() function. if you call this function on a Block, it will get wider. I made the first Block you create call this function automatically, which is why the first Block you make gets bigger.

Chrisir

I also made a version for you but I need to see some code from you then I will show you my approach

TfGuy44

And finally, with all that mess out of the way, we now have a Block object that we are ready to use in your sketch. Huzzah!

class Block {
  float x, y, w;
  color c;
  Block(float ix, float iy, color ic) {
    x = ix;
    y = iy;
    w = 0;
    c = ic;
  }
  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 20);
  }
  void widen() {
    w++;
  }
}

ArrayList<Block> blocks = new ArrayList();
int cx, cy;
boolean pKeyPressed;

void setup() {
  size(600, 600);
  colorMode(HSB, 255);
}

void draw() {
  background(0);
  for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );
  if ( !pKeyPressed && keyPressed ) {
    blocks.add( new Block( cx, cy, color(map(key, int('a'), int('z'), 0, 255), 255, 255) ) );
  }
  if ( pKeyPressed && ! keyPressed ) {
    cx += blocks.get(blocks.size() - 1).w;
    if ( cx > width ) { 
      cy += 20;
      cx = 0;
    }
    if ( cy > height ) { 
      cy = 0;
    }
  }
  if ( keyPressed && blocks.size() > 0 ) {
    blocks.get(blocks.size() - 1).widen();
  }
  pKeyPressed = keyPressed;
}

Finally, notice how the logic for creating blocks is sort of separate from the problems of dealing with what a block is. Using objects allows you to compartmentalize things like this, allowing for more readable and easier to edit code.

Welcome to the next level.

Chrisir

 for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );

Yikes!

TfGuy44

Yikes!

Quiet, you! :))

Chrisir

Yuk!

;-)

GoToLoop

for (final Block b : blocks) b.draw();

Chrisir

for ( int i = 0; i < blocks.size(); i++ ) {

    blocks.get(i).draw()

}

Chrisir

for (Block b : blocks)  
    b.draw();

mariamalz

@TfGuy44 Thank you so so much, you are my savior haha!

Question though: How can I set my own colors? Green for a, blue for b, etc..

I tried playing with the code but I couldn't quite figure it out.

TfGuy44

You will need a way to specify which color goes with which key. In the above code, this was happening on line 33; the color is the third parameter that is passed to the new Block when the Block is created. The color I am passing in is one that is based on the value of key. I am just mapping this value from the range ['a','z'] to the range [0,255] using the map() function (and then using that as the hue for a color because I'm using the HSB colorMode (line 26)).

Other ways to map the color are possible. Simply work out a way to get a different color based on the different values of key. A function would be PERFECT for this! You can pass in the value of key and have it return a color:

color mapKeyToColor(int inKey){
  // Stupidly ignore value of input and always return red.
  return( color(255,0,0) );
  // TODO: Fix this.
}

Or you could use the value of key as an index into an array or colors:

color[] colors = { color( 255,0,0), color(... ... };
// Then the color you want for the block is just: colors[key]
// Or maybe colors[key-'a']?

Chrisir

I tried playing with the code but I couldn't quite figure it out.

That was to be expected.

Tfguy just threw code at you that was way over your head.

As I said, show your code, and I will show you my approach!

On a level you can really work with....

Chrisir

here is an example with letters a,b,c,d

the widths of the previous (left) bars are added to get the starting position of the bar

int rectWidth1=0;
int rectHeight1=250;

int rectWidth2=0;
int rectHeight2=250;

int rectWidth3=0;
int rectHeight3=250;

int rectWidth4=0;
int rectHeight4=250;

// int x = -rectWidth1;  

void setup() {
  size(800, 800);
  background(0);
  noStroke();
  smooth();
}

void draw() {

  background(0); 

  fill(255);
  text("use a,b,c,d to let rectangles grow\n"
    +"Please note what happens when you press and hold first letter a, then b, then c, then a again etc. ", 
    100, 555);

  fill(#8fcd9c);
  rect(0, 0, rectWidth1, rectHeight1);

  fill(#96c6ea);
  rect(rectWidth1, 0, rectWidth2, rectHeight2);

  fill(#ef3942);
  rect(rectWidth1+rectWidth2, 0, rectWidth3, rectHeight3);

  fill(#fdf04d);
  rect(rectWidth1+rectWidth2+rectWidth3, 0, rectWidth4, rectHeight4);


  if (keyPressed) {
    if ((key == 'a')) {
      rectWidth1++;
    }
    if ((key == 'b')) {
      rectWidth2++;
    }
    if ((key == 'c')) {
      rectWidth3++;
    }
    if ((key == 'd')) {
      rectWidth4++;
    }
  }
}

mariamalz

@Chrisir Thank you for your answer!

mariamalz

@TfGuy44 and @Chrisir: I actually got some help from my professor by showing him your codes, and we figured out a simple way to solve the problem, although I'm sure it's not the most sophisticated way but...

Here it is and I even added sound, yay!

import ddf.minim.*;

Minim minim;
AudioPlayer player;

// define the block
class Block {
  float x, y, w;
  color c;
  Block(float ix, float iy, color ic) {
    x = ix;
    y = iy;
    w = 0;
    c = ic;
  }
  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
  }
  void widen() {
    w++;
  }
}

 // define the array

ArrayList<Block> blocks = new ArrayList();
int cx, cy;
boolean pKeyPressed;

// color Index starting from 0
color[] colors = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66), color(253, 240, 77),
color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) };

// setup
void setup() {
  size(960, 240);
  colorMode(RGB);
}

 // start draw
void draw() {
  background(0);
  for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );
  if ( !pKeyPressed && keyPressed ) {
    int colorIndex = 0;

    // assign keys to color Index
    minim = new Minim(this);
    if(key == 'a'){
      colorIndex = 0;
      player = minim.loadFile("A.mp3");
      player.play();
    }else if(key == 'b'){
      player = minim.loadFile("B.mp3");
      colorIndex = 1;
      player.play();
    }else if(key == 'c'){
      player = minim.loadFile("C.mp3");
      colorIndex = 2;
      player.play();
    }else if(key == 'd'){
      player = minim.loadFile("D.mp3");
      colorIndex = 3;
      player.play();
    }else if(key == 'e'){
      player = minim.loadFile("E.mp3");
      colorIndex = 4;
      player.play();
    }else if(key == 'f'){
      player = minim.loadFile("F.mp3");
      colorIndex = 5;
      player.play();
    }else if(key == 'g'){
       player = minim.loadFile("G.mp3");
      colorIndex = 6;
     player.play();
    } 


// print the color index to check for errors    
    println("colorIndex:" + colorIndex);
    println(player);

// call the block to look at the color index as reference
    blocks.add( new Block( cx, cy, colors[colorIndex]) );
  }

// if key pressed, then something
  if ( pKeyPressed && ! keyPressed ) {
    cx += blocks.get(blocks.size() - 1).w;
    if ( cx > width ) { 
      cy += 20;
      cx = 0;
    }
    if ( cy > height ) { 
      cy = 0;
    }
  }
  if ( keyPressed && blocks.size() > 0 ) {
    blocks.get(blocks.size() - 1).widen();
  }
  pKeyPressed = keyPressed; }

Since we figured out the color-key-sound assignment part out, how would I go about being able to press two keys at the same time to produce gradient of the two colors?

Chrisir

you should load all soundfiles in setup into an array and then just play them instead of loading them every time

mariamalz

@Chrisir Alright, I'll try that. Any idea how to press two keys at the same time to produce a gradient of the two colors?

Chrisir

i guess so

see

https://forum.processing.org/two/discussion/16594/can-multiple-keys-be-pressed-on-the-keyboard

replace isUp, isDown with isA, isB etc.

Calculate gradient

to calculate the color take the average from the two colors that are related to the 2 keys.

so you have colorIndex1 and colorIndex2 independently

and then you say instead of colors[colorIndex] in line 87

something fancy like ...getColor(colorIndex1, colorIndex2 )...

and then the average:

color getColor (int ind1, ind2) {

    color result = color (
        ( red( colors[ind1] )  + red ( colors[ind2] ) )  / 2 ,


        ( green( colors[ind1] )  + green  ( colors[ind2] ) )  / 2 ,

        ( blue ( colors[ind1] )  + blue ( colors[ind2] ) )  / 2 

        );

    return result; 


}

TfGuy44

Of course, that will just get you one color. To do a gradient you will need two colors, and you will need to modify your Block class so that it does a gradient between those colors instead of just drawing a flat color.

Follow Chrisir's advice to detect multiple presses and map them to two colors, and when you have two colors, you can use this modified Block class to do gradients:

class Block {
  float x, y, w;
  color c, k;
  Block(float ix, float iy, color ics, color ice) {
    x = ix;
    y = iy;
    w = 0;
    c = ics;
    k = ice;
  }
  void draw() {
    fill(c);
    noStroke();
    colorMode(RGB,255);
    for( int i = 0; i < w; i++){
      stroke(lerpColor(c,k,i/w));
      line(x+i,y,x+i,y+20);
    }
    colorMode(HSB, 255);
    //rect(x, y, w, 20);
  }
  void widen() {
    w++;
  }
}

ArrayList<Block> blocks = new ArrayList();
int cx, cy;
boolean pKeyPressed;

void setup() {
  size(600, 600);
  colorMode(HSB, 255);
}

void draw() {
  background(0);
  for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );
  if ( !pKeyPressed && keyPressed ) {
    blocks.add( new Block( cx, cy, 
      color(0), // The first color.
      color(map(key, int('a'), int('z'), 0, 255), // The second color. 
      255, 255) ) );
  }
  if ( pKeyPressed && ! keyPressed ) {
    cx += blocks.get(blocks.size() - 1).w;
    if ( cx > width ) { 
      cy += 20;
      cx = 0;
    }
    if ( cy > height ) { 
      cy = 0;
    }
  }
  if ( keyPressed && blocks.size() > 0 ) {
    blocks.get(blocks.size() - 1).widen();
  }
  pKeyPressed = keyPressed;
}

Notice here that the first color being passed in to the Block class is always black, as the code to determine this second color is what I am leaving up to you!

Again, realize how easy it is to modify what a Block is when you have a Block class!

mariamalz

@Chrisir @TfGuy44 I'm a bit lost. I want to make the gradient top to bottom when two keys are pressed, for example green and blue when 'a' and 'b' are pressed, respectively. Otherwise, if only 'a' is pressed, I get a solid green. I tried to make a second Index like mentioned, but i'm not sure which method would be the best way to go with in terms of code.

Chrisir

You have to understand the posts of us and then combine them

Show your entire code

TfGuy44

Right. Break your problem down into smaller problems. How are you detecting key presses and releases? How are you tracking which keys are pressed? How can you determine when a second key is pressed? What do you do if one key is pressed? What if more than one is pressed? Can you draw a gradient?

And without seeing the code of what you have tried, we're at a loss as to what will help you. Is your issue with detecting keys? Drawing gradients? We have no way of knowing. Post your newest code that shows your attempted changes.

mariamalz

@Chrisir @TfGuy44

import ddf.minim.*;
Minim minim;
AudioPlayer player;


// Trying to change axis of gradient to y axis
// int Y_AXIS = 1;

// define the block
class Block {
  float x, y, w;
  color c, k;
  Block(float ix, float iy, color ic, color ics, color ice, int axis) {
    x = ix;
    y = iy;
    w = 0;
    c = ic;
    c = ics;
    k = ice;
  }

  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
    colorMode(RGB, 255);

 //    if (axis == Y_AXIS) {
    for( int i = 0; i < w; i++) {
      stroke(lerpColor(c, k, i/w));
      line(x+i,y,x+i,y+239); //240 made it bigger than the previous one
  }

    colorMode(RGB, 255);
      //rect(x, y, w, 20);
  }
  void widen() {
    w++;
  }
}

 // define the array

ArrayList<Block> blocks = new ArrayList();
int cx, cy;
boolean pKeyPressed;

// color Index starting from 0
color[] colors = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66), color(253, 240, 77),
color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) };

//Not sure of this part, Index2

/* color[] colors2 = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66), color(253, 240, 77),
color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) }; 


// Not sure of this part, how to reference Index2
 color getColor (int colorIndex, colorIndex2) {

    color result = color (
        ( red( colors[colorIndex] )  + red ( colors[colorIndex] ) )  / 2 ,


        ( green( colors[colorIndex] )  + green  ( colors[colorIndex] ) )  / 2 ,

        ( blue ( colors[colorIndex] )  + blue ( colors[colorIndex] ) )  / 2

        );

    return result; 

}  */

// setup
void setup() {
  size(960, 240);
  colorMode(RGB,255);

}

 // start draw
void draw() {
  background(#ffffff);

  for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );


  if ( keyPressed ) {

    println(key);
  }

  if ( !pKeyPressed && keyPressed ) {
    int colorIndex = 0;

    // assign keys to color Index
    minim = new Minim(this);


    if(key == 'a'){
      player = minim.loadFile("A.mp3");
      colorIndex = 0; 
      player.play();
    }else if(key == 'b'){
      player = minim.loadFile("B.mp3");
      colorIndex = 1;
      player.play();
    }else if(key == 'c'){
      player = minim.loadFile("C.mp3");
      colorIndex = 2;
      player.play();
    }else if(key == 'd'){
      player = minim.loadFile("D.mp3");
      colorIndex = 3;
      player.play();
    }else if(key == 'e'){
      player = minim.loadFile("E.mp3");
      colorIndex = 4;
      player.play();
    }else if(key == 'f'){
      player = minim.loadFile("F.mp3");
      colorIndex = 5;
      player.play();
    }else if(key == 'g'){
       player = minim.loadFile("G.mp3");
      colorIndex = 6;
     player.play();
    }



// print the color index to check for errors    
    println("colorIndex:" + colorIndex);
    println(player);

  // modified call block, gradient
  blocks.add( new Block( cx, cy,
      colors[colorIndex], // The first color
      colors[colorIndex], // The second color 
      255, Y_AXIS) );
}

// if key pressed, then something
  if ( pKeyPressed && ! keyPressed ) {
    cx += blocks.get(blocks.size() - 1).w;
    if ( cx > width ) { 
      cy += 20;
      cx = 0;
    }
    if ( cy > height ) { 
      cy = 0;
    }
  }
  if ( keyPressed && blocks.size() > 0 ) {
    blocks.get(blocks.size() - 1).widen();
  }
  pKeyPressed = keyPressed; 

}


void keyReleased() {
  println("released: " + key);


}

kfrajer

The code is working? Question solved?

Kf

mariamalz

@kfrajer Not solved yet.

Chrisir

Not sure how to translate gradient here

Do you mean gradient in that there is different colors in one rect changing from one side to the other like a rainbow OR one fill color (composed from 2 colors)?

mariamalz

@Chrisir

The image above is an example of what I mean, but I want to have the gradient form on the Y axis, and have it give me a fill color (composed of 2 colors) when I press the 2 keys of the colors together. For example, I press 'a' and 'b' and it gives me the first gradient, otherwise if I click 'a' alone, it just gives me one fill color.

I hope that makes sense!

Thanks.

also: I've modified my code to return the correct gradient in the block for every keyPressed on line 114 and so on.

import ddf.minim.*;

Minim minim;
AudioPlayer player;

int Y_AXIS = 1;
PFont f;
color a1, a2, b1, b2, c1, c2, d1, d2, e1, e2, f1, f2, g1, g2;

//define colors

 // setup
void setup() {
  size(960, 240);
  colorMode(RGB,255);
  //fullScreen();
    pixelDensity(2);
    smooth(2);
  f = loadFont("EuclidCircularATrial-Bold-250.vlw");
 // f = loadFont("EuclidCircularATrial-Regular-50.vlw");

  textFont(f); // Applies font

 //define colors
  a1 = color(143, 205, 156);
  a2 = color(143, 205, 156);
  b1 = color(150, 198, 234);
  b2 = color(150, 198, 234);
  c1 = color(239, 57, 66);
  c2 = color(239, 57, 66);
  d1 = color(253, 240, 77);
  d2 = color(253, 240, 77);
  e1 = color(198, 233, 246);
  e2 = color(198, 233, 246);
  f1 = color(239, 90, 122);
  f2 = color(239, 90, 122);
  g1 = color(248, 151, 29);
  g2 = color(248, 151, 29);

}


// define the block
class Block {
  float x, y, w;
  color c, k;
  Block(float ix, float iy, color ic, color ics, color ice) {
    x = ix;
    y = iy;
    w = 0;
    c = ic;
    c = ics;
    k = ice;
  }

  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
    colorMode(RGB, 255);
    for( int i = 0; i < w; i++){
      stroke(lerpColor(c, k, i/w));
      line(x+i,y,x+i,y+239); //240 made it bigger than the previous one
  }

    colorMode(RGB, 255);
      //rect(x, y, w, 20);
  }
  void widen() {
    w++;
  }
}

 // define the array

ArrayList<Block> blocks = new ArrayList();
int cx, cy;
boolean pKeyPressed;


//color[] first = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66),
//color(253, 240, 77), color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) };

// color Index starting from 0
//color[] second = { color(143, 205, 156), color(150, 198, 234) , color(239, 57, 66), //color(253, 240, 77),
//color(198, 233, 246), color(239, 90, 122), color(248, 151, 29) };

 // start draw
void draw() {
  background(#ffffff);
  textSize(50);
    textAlign(CENTER, CENTER);
    fill(0);
    text("Visualizing Sound", width/2, height/9);
    text("Use the keys A, B, C, D, E, F, and G to create your song", width/2, 700);

  for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );

  if ( keyPressed ) {

    println(key);
  }

  if ( !pKeyPressed && keyPressed ) {
    int colorIndex = 0;

    // assign keys to color Index
    minim = new Minim(this);


    if(key == 'a'){
      player = minim.loadFile("A.mp3"); player.play();

    blocks.add( new Block( cx, cy,
      color(a1), // The first color
      color(a1), // The second color 
      color(b1)) );

    }else if(key == 'b'){
      player = minim.loadFile("B.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(b1), // The first color
      color(b1), // The second color 
      color(c1)) );


    }else if(key == 'c'){
      player = minim.loadFile("C.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(c1), // The first color
      color(c1), // The second color 
      color(d1)) );

    }else if(key == 'd'){
      player = minim.loadFile("D.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(d1), // The first color
      color(d1), // The second color 
      color(e1)) );

    }else if(key == 'e'){
      player = minim.loadFile("E.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(e1), // The first color
      color(e1), // The second color 
      color(f1)) );

    }else if(key == 'f'){
      player = minim.loadFile("F.mp3"); player.play();

      blocks.add( new Block( cx, cy,
      color(f1), // The first color
      color(f1), // The second color 
      color(g1)) );

    }else if(key == 'g'){
       player = minim.loadFile("G.mp3"); player.play();

       blocks.add( new Block( cx, cy,
      color(g1), // The first color
      color(g1), // The second color 
      color(a1)) );

    }
     // to code: otherwise, any other key give me a black square


// print the color index to check for errors    
    println("colorIndex:" + colorIndex);
    println(player); 

}

// if key pressed, then something
  if ( pKeyPressed && ! keyPressed ) {
    cx += blocks.get(blocks.size() - 1).w;
    if ( cx > width ) { 
      cy += 20;
      cx = 0;
    }
    if ( cy > height ) { 
      cy = 0;
    }
  }
  if ( keyPressed && blocks.size() > 0 ) {
    blocks.get(blocks.size() - 1).widen();
  }
  pKeyPressed = keyPressed; 

}

void keyReleased() {
  println("released: " + key); 
}

TfGuy44

You have this idea in your head that you can press two keys at the same time. You can't. What happens is that one key is pressed first and then the other key is pressed while the first is still held down. To be clear, this is NOT the process:

- Sketch is running.
- Two keys are pressed at the same time.
- The keyPressed() function is called with information about both keys.

This IS the process:

- Sketch is running.
- User attempts to press two keys at the same time.
- One key is pressed first, because computers are working way faster than the movement of a user's fleshy fingers. The keyPressed() function runs.
- A few milliseconds of time passes.
- The other key is pressed. The keyPressed() function runs again.

Thus, don't try to detect two keys being pressed at the same time. Because there is no such thing. What you need to look for is key presses that happen while another key is already pressed. Basically, you will add steps to the above process so this occurs:

- Sketch is running.
- User attempts to press two keys at the same time.
- One key is pressed first, because computers are working way faster than the movement of a user's fleshy fingers. The keyPressed() function runs.
- Because there were no keys pressed before, we remember that this key is now being pressed.
- Because one key is now being pressed, a solid color Block is created.
- The draw() function will start drawing this Block.
- A few milliseconds of time passes.
- The other key is pressed. The keyPressed() function runs again.
- Because we remembered which keys were pressed from before, we can see that this is a key press while a key is already pressed. Thus the latest Block we are making stops, and a new Block is stated that has a gradient.
- The draw() function will start drawing this Block now.
- A few milliseconds of time passes.
- One of the keys stops being pressed. The keyReleased() function runs.
- We remember that this key is no longer being held down.
- This means that we are back to one key being held down now!
- Thus the last block ends, and a solid color one for the remaining held key starts.
- The draw() function will start drawing this Block now.
- A few milliseconds of time passes.
- The other key is released.
- The keyReleased() function runs.
- We remember that the other key is released. Now no keys are pressed.
- The solid block we were making ends.
- Draw doesn't cause any more blocks to get bigger, because no keys are pressed and we're done.

Of critical importance here is that you need to work out a way to track which keys are held at any given moment. And depending on the change in the number of held keys (which will only change by 1 at a time!), either stop the current block, start a new block, or do both of those things!

Chrisir

Sorry I am not at home and can’t help you really

I think you could just have a boolean array [] each slot represents a letter; false = not pressed, true = pressed

Then you can for loop in a nested for loop over it:

for i....

for i2 = i+1

if both are true, we display a gradient from both colors

Can you show me a gradient code independently from the key pressed stuff, just the gradient thing?

GoToLoop

http://Studio.ProcessingTogether.com/sp/pad/export/ro.9cfU11egvzT6G

mariamalz

@Chrisir

I managed to implement the boolean statement for each key, but now it seems to read only the first key pressed as true...

Also, I am not sure how to get the program to recognize two keys as true, such as on line 140.

Thank you!

    import ddf.minim.*;

    Minim minim;
    AudioPlayer player;

    // int Y_AXIS = 1;
    PFont f;
    color a1, a2, b1, b2, c1, c2, d1, d2, e1, e2, f1, f2, g1, g2;

     // define the array

    ArrayList<Block> blocks = new ArrayList();
    int cx, cy;
    boolean pKeyPressed;
    boolean[] keys = new boolean[7];

     // setup
    void setup() {
      size(960, 240);
      colorMode(RGB, 255);

      keys[0] = false;
      keys[1] = false;
      keys[2] = false;
      keys[3] = false;
      keys[4] = false;
      keys[5] = false;
      keys[6] = false;

     //define colors
      a1 = color(143, 205, 156);
      b1 = color(150, 198, 234);
      c1 = color(239, 57, 66);
      d1 = color(253, 240, 77);
      e1 = color(198, 233, 246);
      f1 = color(239, 90, 122);
      g1 = color(248, 151, 29);

    }

    // define the block
    class Block {
      float x, y, w;
      color c, k;
      Block(float ix, float iy, color ic, color ics, color ice) {
        x = ix;
        y = iy;
        w = 0;
        c = ic;
        c = ics;
        k = ice;
      }

      void draw() {
        fill(c);
        noStroke();
        rect(x, y, w, 240);
        colorMode(RGB, 255);
        for( int i = 0; i < w; i++){
          stroke(lerpColor(c, k, i/w));
          line(x+i,y,x+i,y+239); //240 made it bigger than the previous one
      }
      }
      void widen() {
        w++;
      }
    }

     // start draw
    void draw() {
      background(#ffffff);

      for ( int i = 0; i < blocks.size(); blocks.get(i++).draw() );

      if ( keyPressed ) {

        println(key);
      } }

    // define keys
    void keyPressed() {

      switch (key) {   
      case 'a' : 
        keys[0] = true;
        break;

      case 'b' : 
        keys[1] = true;
        break;

      case 'c' : 
        keys[2] = true;
        break;

         case 'd' : 
        keys[3] = true;
        break;

         case 'e' : 
        keys[4] = true;
        break;

         case 'f' : 
        keys[5] = true;
        break;

         case 'g' : 
        keys[6] = true;
        break;
      }

     // limit keys to a-g
     if((key >= 'a' && key <= 'g')) {


      if ( !pKeyPressed && keyPressed ) {


    minim = new Minim(this);


    // assign keys to colors
        if (keys[0]){
          player = minim.loadFile("A.mp3"); player.play();

        blocks.add( new Block( cx, cy,
          color(a1), // The first color
          color(a1), // The second color 
          color(a1)) );

          keys[1] = false;
          keys[2] = false;
          keys[3] = false;
          keys[4] = false;
          keys[5] = false;
          keys[6] = false;


     /*   }else if (keys[0] && keys[1]){
          player = minim.loadFile("A.mp3"); player.play();

        blocks.add( new Block( cx, cy,
          color(a1), // The first color
          color(a1), // The second color 
          color(b1)) ); */


        }else if (keys[1]) {
          player = minim.loadFile("B.mp3"); player.play();

          blocks.add( new Block( cx, cy,
          color(b1), // The first color
          color(b1), // The second color 
          color(c1)) );

          keys[0] = false;
          keys[2] = false;
          keys[3] = false;
          keys[4] = false;
          keys[5] = false;
          keys[6] = false;


        }else if (keys[2]) {
          player = minim.loadFile("C.mp3"); player.play();

          blocks.add( new Block( cx, cy,
          color(c1), // The first color
          color(c1), // The second color 
          color(d1)) );

          keys[0] = false;
          keys[1] = false;
          keys[3] = false;
          keys[4] = false;
          keys[5] = false;
          keys[6] = false;

        }else if (keys[3]) {
          player = minim.loadFile("D.mp3"); player.play();

          blocks.add( new Block( cx, cy,
          color(d1), // The first color
          color(d1), // The second color 
          color(e1)) );

          keys[0] = false;
          keys[1] = false;
          keys[2] = false;
          keys[4] = false;
          keys[5] = false;
          keys[6] = false;

        }else if (keys[4]) {
          player = minim.loadFile("E.mp3"); player.play();

          blocks.add( new Block( cx, cy,
          color(e1), // The first color
          color(e1), // The second color 
          color(f1)) );

          keys[0] = false;
          keys[1] = false;
          keys[2] = false;
          keys[3] = false;
          keys[5] = false;
          keys[6] = false;

        }else if (keys[5]) {
          player = minim.loadFile("F.mp3"); player.play();

          blocks.add( new Block( cx, cy,
          color(f1), // The first color
          color(f1), // The second color 
          color(g1)) );

          keys[0] = false;
          keys[1] = false;
          keys[2] = false;
          keys[3] = false;
          keys[4] = false;
          keys[6] = false;

        }else if (keys[6]) {
           player = minim.loadFile("G.mp3"); player.play();

           blocks.add( new Block( cx, cy,
          color(g1), // The first color
          color(g1), // The second color 
          color(a1)) );

          keys[0] = false;
          keys[1] = false;
          keys[2] = false;
          keys[3] = false;
          keys[4] = false;
          keys[5] = false;

        }
      }

    // print the color index to check for errors    
     //   println("colorIndex:" + colorIndex);
      //  println(player); }

    // if key pressed, then something
      if ( pKeyPressed && ! keyPressed ) {
        cx += blocks.get(blocks.size() - 1).w;
        if ( cx > width ) { 
          cy += 20;
          cx = 0;
        }
        if ( cy > height ) { 
          cy = 0;
        }
      }
      if ( keyPressed && blocks.size() > 0 ) {
        blocks.get(blocks.size() - 1).widen();
      }
      pKeyPressed = keyPressed; } 

    }


    void keyReleased() {
      println("released: " + key);

       switch (key) {   
      case 'a' : 
        keys[0] = false;
        break;
      case 'b' : 
        keys[1] = false;
        break;
      case 'c' : 
        keys[2] = false;
        break;
        case 'd' :
        keys[3] = false;
        break;
         case 'e' : 
        keys[4] = false;
        break;
         case 'f' : 
        keys[5] = false;
        break;
         case 'g' : 
        keys[6] = false;
        break;
      }
    }

Chrisir

Can you show me a gradient code independently from the key pressed stuff, just the gradient thing?

Chrisir

but now it seems to read only the first key pressed as true...

Reason: In all blocks 132 etc you reset all other keys to false. Don’t do this.

To check which keys are pressed together use a nested for loop.

You now have a lot of redundant lines: 123 to 241. Find a way to unify them. You need to know which color belongs to which key (like a color array which uses the same index as the keys).

Chrisir

I did this now mostly.

import ddf.minim.*;

Minim minim;
AudioPlayer player;

PFont f;

String combination="";
String prevcombination="";

// define the ArrayList
ArrayList<Block> blocks = new ArrayList();
int cx, cy;

boolean[] keys = new boolean[7];

//define colors
color[] colors = { 
  color(143, 205, 156), 
  color(150, 198, 234), 
  color(239, 57, 66), 
  color(253, 240, 77), 
  color(198, 233, 246), 
  color(239, 90, 122), 
  color(248, 151, 29) 
};

// setup
void setup() {

  size(960, 240);
  colorMode(RGB, 255);
  minim = new Minim(this);

  for (boolean currentKey : keys) 
    currentKey=false; 

  println(keys);
}

// start draw
void draw() {
  background(#ffffff);

  for (int i = 0; i < blocks.size(); i++) {
    blocks.get(i).draw();
  }//for

  String result="";
  for (boolean currentKey : keys)
    result+=currentKey+"\n";

  fill(0); 
  text (result
    +"\nTo have an effect: 2 keys required. You can release both keys or one and add another key. ", 
    width-111, 22, 
    100, 900);

  // assign keys to colors
  for ( int i = 0; i < keys.length-1; i++) {
    for ( int i2 = i+1; i2 < keys.length; i2++) {
      if (keys[i] && keys[i2]) {
        combination = str(i) + 
          str(i2);
        if (!combination.equals(prevcombination)) {
          // start new block 
          blocks.add( new Block( cx, cy, 
            colors[i], // The first color
            colors[i2] ) ); // The second color
        } else {
          // widen 
          if ( blocks.size() > 0 ) {
            blocks.get(blocks.size() - 1).widen();
            cx++;
          }
        }
        prevcombination=combination;
      }
    }
  }
  //
}//func 

// define keys
void keyPressed() {

  int indexOfKey = int(key) - 97; 
  println (key
    + " : " 
    + int(key) 
    + " : " 
    + indexOfKey);

  if (indexOfKey>=0 && indexOfKey<=keys.length) // limit keys to a-g
    keys[indexOfKey] = true;
}

void keyReleased() {
  println("released: " + key);
  int indexOfKey = int(key) - 97; 
  if (indexOfKey>=0 && indexOfKey<=keys.length) // limit keys to a-g
    keys[indexOfKey] = false;
}

// =================================================================

// define the block
class Block {

  float x, y, 
    w;
  color c, k;

  Block(float ix, float iy, 
    color ic, color ics) {
    x = ix;
    y = iy;
    w = 0;
    // c = ic; //////////?????
    c = ic; //////////?????
    k = ics;
  }

  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
    colorMode(RGB, 255);
    for ( int i = 0; i < w; i++) {
      stroke(lerpColor(c, k, i/w));
      line(x+i, y, 
        x+i, y+239); //240 made it bigger than the previous one
    }
  }
  void widen() {
    w++;
  }
}
//

Chrisir

new version (better colors in the text field for displaying a false, b true etc. )

you can see, that my code uses a lot ifs less than yours. Colors are also in an array now.

Problem is that the combinations of colors are always alphabetical, so a-c or b-e, never c-a or e-b, so the order in that you press an release letters isn't used. That leads to the fact you don't receive a full gradient over the screen usually.

Unless you do a strict alphabetical letter combination: press a-b, then release both, press b and hold b, press c. Then c-d, d-e, then e-f.

import ddf.minim.*;

Minim minim;
AudioPlayer player;

PFont f;

String combination="";
String prevcombination="";

// define the ArrayList
ArrayList<Block> blocks = new ArrayList();
int cx, cy;

boolean[] keys = new boolean[7];

//define colors
color[] colors = { 
  color(143, 205, 156), 
  color(150, 198, 234), 
  color(239, 57, 66), 
  color(253, 240, 77), 
  color(198, 233, 246), 
  color(239, 90, 122), 
  color(248, 151, 29) 
};

// setup
void setup() {

  size(960, 240);
  colorMode(RGB, 255);
  minim = new Minim(this);

  for (boolean currentKey : keys) 
    currentKey=false; 


  println(keys);
}

// start draw
void draw() {
  background(#ffffff);

  for (int i = 0; i < blocks.size(); i++) {
    blocks.get(i).draw();
  }//for

  textSize(13);
  fill(0);
  text ("\nTo have an effect two keys are required.\n"
    +"You can release both keys or one and add another key. ", 
    width-211, 19, 
    100, 900);

  textSize(24);
  for ( int i = 0; i < keys.length; i++) {
    fill(colors[i]);
    text (char(i+97)+" "+keys[i], 
      width-101, 19+25*i, 
      100, 900);
  }

  // assign keys to colors
  for ( int i = 0; i < keys.length-1; i++) {
    for ( int i2 = i+1; i2 < keys.length; i2++) {
      // Are 2 keys pressed simultaneously? 
      if (keys[i] && keys[i2]) {
        combination = str(i) + str(i2);
        if (!combination.equals(prevcombination)) {
          // start new block 
          blocks.add( new Block( cx, cy, 
            colors[i], // The first color
            colors[i2] ) ); // The second color
        } else {
          // widen 
          if ( blocks.size() > 0 ) {
            blocks.get(blocks.size() - 1).widen();
            cx++;
          }
        }
        prevcombination=combination;
      }
    }
  }
  //
}//func 

// define keys
void keyPressed() {

  int indexOfKey = int(key) - 97; 
  println (key
    + " : " 
    + int(key) 
    + " : " 
    + indexOfKey);

  if (indexOfKey>=0 && indexOfKey<=keys.length) // limit keys to a-g
    keys[indexOfKey] = true;
}

void keyReleased() {
  println("released: " + key);
  int indexOfKey = int(key) - 97; 
  if (indexOfKey>=0 && indexOfKey<=keys.length) // limit keys to a-g
    keys[indexOfKey] = false;
}

// =============================================

// define the block
class Block {

  float x, y, 
    w;
  color c, k;

  Block(float ix, float iy, 
    color ic, color ics) {
    x = ix;
    y = iy;
    w = 0;
    // c = ic; //////////?????
    c = ic; //////////?????
    k = ics;
  }

  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
    colorMode(RGB, 255);
    for ( int i = 0; i < w; i++) {
      stroke(lerpColor(c, k, i/w));
      line(x+i, y, 
        x+i, y+239); //240 made it bigger than the previous one
    }
  }
  void widen() {
    w++;
  }
}
//

mariamalz

@Chrisir Thank you so much for your answer! You really really helped.

How would I go about using only one key now to give me a solid color? I was able to now specify each sound file to a key, but specifying a colorIndex for each did not work, something like this:

int colorIndex = 0;
if (keys[0]){

colorIndex=0;
player = minim.loadFile("A.mp3"); player.play();}

Chrisir

As said, you have whole bunch of lines like

if (keys[0]){

if (keys[1]){

...

that's rather uncool and wouldn't work for all keys A..Z and a..z or would give you very long sketch.

and now you starting with that approach again...

instead

 int indexOfKey = int(key) - 97; 

and then use it for the colors like colors[indexOfKey]

no if involved!

Same principle like with colors we want to use for the player.play();

so load all mp3 in one go in setup() into an array songs (like we have array colors[]) and then just songs[indexOfKey].play();

no if involved!

New Version

Here is my new version, handling 1 or 2 keys.

Implement sound as described. Best in the 1 key section.

(I use if here but in a for loop)

import ddf.minim.*;

Minim minim;
AudioPlayer player;

PFont f;

String combination="";
String prevcombination="";

// define the ArrayList
ArrayList<Block> blocks = new ArrayList();
int cx, cy;

boolean[] keys = new boolean[7];

boolean flagShowMessages=true; 

//define colors
color[] colors = { 
  color(143, 205, 156), 
  color(150, 198, 234), 
  color(239, 57, 66), 
  color(253, 240, 77), 
  color(198, 233, 246), 
  color(239, 90, 122), 
  color(248, 151, 29) 
};

// setup and draw --------------------------------------------

void setup() {

  size(960, 240);
  colorMode(RGB, 255);
  minim = new Minim(this);

  for (boolean currentKey : keys) 
    currentKey=false; 


  println(keys);
}

// start draw
void draw() {
  // delete scene   
  background(#ffffff);

  // show blocks
  for (int i = 0; i < blocks.size(); i++) {
    blocks.get(i).draw();
  }//for

  // show messages 
  showMessages();

  // use keys
  evaluateKeysArray();
  //
}//func

// -----------------------------------------------------

void showMessages() {

  if (!flagShowMessages) {
    return; // leave here
  }
  textSize(13);
  fill(0);
  text ("\nTo have an effect two keys are required.\n"
    +"You can release both keys or one and add another key.\nUse x to toggle this text.", 
    width-241, 19, 
    100, 900);

  textSize(24);
  for ( int i = 0; i < keys.length; i++) {
    fill(colors[i]);
    text (char(i+97)+" "+keys[i], 
      width-101, 19+25*i, 
      100, 900);
  }//for
}

// use keys
void evaluateKeysArray() {
  int count=0; 
  for ( int i = 0; i < keys.length-1; i++) {
    if (keys[i]) {
      count++;
    }
  }

  if (count==0) {
    // do nothing
  } else if (count==1) {
    // assign keys to colors
    for ( int i = 0; i < keys.length-1; i++) {
      // Is 1 key pressed? 
      if (keys[i]) {
        combination = str(i);
        if (!combination.equals(prevcombination)) {
          // start new block 
          blocks.add( new Block( cx, cy, 
            colors[i], // The first color
            colors[i] ) ); // The second color
        } else {
          // widen 
          if ( blocks.size() > 0 ) {
            blocks.get(blocks.size() - 1).widen();
            cx++;
          }
        }
        prevcombination=combination;
        return;
      }
    }
  } else if (count==2) {

    // assign keys to colors
    for ( int i = 0; i < keys.length-1; i++) {
      for ( int i2 = i+1; i2 < keys.length; i2++) {
        // Are 2 keys pressed simultaneously? 
        if (keys[i] && keys[i2]) {
          combination = str(i) + str(i2);
          if (!combination.equals(prevcombination)) {
            // start new block 
            blocks.add( new Block( cx, cy, 
              colors[i], // The first color
              colors[i2] ) ); // The second color
          } else {
            // widen 
            if ( blocks.size() > 0 ) {
              blocks.get(blocks.size() - 1).widen();
              cx++;
            }
          }
          prevcombination=combination;
        }
      }
    }
  }//else if
}//func

// -----------------------------------------------------

// define keys
void keyPressed() {

  if (key=='x') { 
    flagShowMessages= !flagShowMessages;
    return;
  }

  int indexOfKey = int(key) - 97; 
  println (key
    + " : "
    + int(key) 
    + " : "
    + indexOfKey);

  if (indexOfKey>=0 && indexOfKey<keys.length) // limit keys to a-g
    keys[indexOfKey] = true;
}

void keyReleased() {

  println("released: " + key);
  int indexOfKey = int(key) - 97;

  if (indexOfKey>=0 && indexOfKey<keys.length) {// limit keys to a-g
    keys[indexOfKey] = false;
  }
}

// =============================================

// define the block
class Block {

  float x, y, 
    w;
  color c, k;

  Block(float ix, float iy, 
    color ic, color ics) {
    x = ix;
    y = iy;
    w = 0;
    // c = ic; //////////?????
    c = ic; //////////?????
    k = ics;
  }

  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
    colorMode(RGB, 255);
    for ( int i = 0; i < w; i++) {
      stroke(lerpColor(c, k, i/w));
      line(x+i, y, 
        x+i, y+239); //240 made it bigger than the previous one
    }
  }
  void widen() {
    w++;
  }
}
//

mariamalz

@Chrisir

I created an array for my audio:

    AudioPlayer[] songs = { 
      minim.loadFile("A.mp3"), 
      minim.loadFile("B.mp3"), 
      minim.loadFile("C.mp3"), 
      minim.loadFile("D.mp3"), 
      minim.loadFile("E.mp3"), 
      minim.loadFile("F.mp3"), 
      minim.loadFile("G.mp3") 
    };  

and added

songs[indexOfKey].play();

into the code under keyPressed but I'm getting an error for line 38 and 39:

    for (boolean currentKey : keys) 
       currentKey=false; 

where it says: The value of the local variable "currentKey" is not used

GoToLoop

@mariamalz, be careful not to RE-declare global variables as temporary local variables!!! :-SS

Chrisir

The value of the local variable "currentKey" is not used

that's only a warning

I don't receive that warning

post your entire code please

Chrisir

ah, I receive the warning now too.

But I think it's false.

Does the code work for you?

mariamalz

@Chrisir No, it prevents the sketch from running.

Here it is:

    import ddf.minim.*;

    Minim minim;
    AudioPlayer player;

    PFont f;

    String combination="";
    String prevcombination="";

    // define the ArrayList
    ArrayList<Block> blocks = new ArrayList();
    int cx, cy;

    boolean[] keys = new boolean[7];

    boolean flagShowMessages=true; 

    //define colors
    color[] colors = { 
      color(143, 205, 156), 
      color(150, 198, 234), 
      color(239, 57, 66), 
      color(253, 240, 77), 
      color(198, 233, 246), 
      color(239, 90, 122), 
      color(248, 151, 29) 
    };

    AudioPlayer[] songs = { 
      minim.loadFile("A.mp3"), 
      minim.loadFile("B.mp3"), 
      minim.loadFile("C.mp3"), 
      minim.loadFile("D.mp3"), 
      minim.loadFile("E.mp3"), 
      minim.loadFile("F.mp3"), 
      minim.loadFile("G.mp3") 
    }; 

    // setup and draw --------------------------------------------


    void setup() {

      size(960, 240);
      colorMode(RGB, 255);
      minim = new Minim(this);

      for (boolean currentKey : keys) 
       currentKey=false; 


      println(keys);
    }

    // start draw
    void draw() {
      // delete scene   
      background(#ffffff);

      // show blocks
      for (int i = 0; i < blocks.size(); i++) {
        blocks.get(i).draw();
      }

      //for

      // show messages 
      showMessages();

      // use keys
      evaluateKeysArray();
      //

    }//func

    // -----------------------------------------------------

    void showMessages() {

      if (!flagShowMessages) {
        return; // leave here
      }
      textSize(13);
      fill(0);
      text ("\nTo have an effect two keys are required.\n"
        +"You can release both keys or one and add another key.\nUse x to toggle this text.", 
        width-241, 19, 
        100, 900);

      textSize(24);
      for ( int i = 0; i < keys.length; i++) {
        fill(colors[i]);
        text (char(i+97)+" "+keys[i], 
          width-101, 19+25*i, 
          100, 900);
      }//for
    }

    // use keys
    void evaluateKeysArray() {
      int count=0; 
      for ( int i = 0; i < keys.length-1; i++) {
        if (keys[i]) {
          count++;
        }
      }

      if (count==0) {
        // do nothing

      } else if (count==1) {
        // assign keys to colors
        for ( int i = 0; i < keys.length-1; i++) {
          // Is 1 key pressed? 

          if (keys[i]) {
            combination = str(i);
            if (!combination.equals(prevcombination)) {
              // start new block 

              blocks.add( new Block( cx, cy, 
                colors[i], // The first color
                colors[i] ) ); // The second color


            } else {

              // widen 
              if ( blocks.size() > 0 ) {
                blocks.get(blocks.size() - 1).widen();
                cx++;
              }
            }
            prevcombination=combination;
            return;
          }
        }

      } else if (count==2) {

        // assign keys to colors
        for ( int i = 0; i < keys.length-1; i++) {
          for ( int i2 = i+1; i2 < keys.length; i2++) {
            // Are 2 keys pressed simultaneously? 

            if (keys[i] && keys[i2]) {
              combination = str(i) + str(i2);

              if (!combination.equals(prevcombination)) {
                // start new block 

                blocks.add( new Block( cx, cy, 
                  colors[i], // The first color
                  colors[i2] ) ); // The second color
              } else {
                // widen 
                if ( blocks.size() > 0 ) {
                  blocks.get(blocks.size() - 1).widen();
                  cx++;
                }
              }
              prevcombination=combination;
            }
          }
        }
      }//else if
    }//func

    // -----------------------------------------------------

    // define keys
    void keyPressed() {

      if (key=='x') { 
        flagShowMessages= !flagShowMessages;
        return;
      }

      int indexOfKey = int(key) - 97; 
      println (key
        + " : "
        + int(key) 
        + " : "
        + indexOfKey);

      if (indexOfKey>=0 && indexOfKey<keys.length) // limit keys to a-g
        keys[indexOfKey] = true;
        songs[indexOfKey].play();
    }

    void keyReleased() {

      println("released: " + key);
      int indexOfKey = int(key) - 97;

      if (indexOfKey>=0 && indexOfKey<keys.length) { // limit keys to a-g
        keys[indexOfKey] = false;
      }
    }

    // =============================================

    // define the block
    class Block {

      float x, y, 
        w;
      color c, k;

      Block(float ix, float iy, 
        color ic, color ics) {
        x = ix;
        y = iy;
        w = 0;
        // c = ic; //////////?????
        c = ic; //////////?????
        k = ics;
      }

      void draw() {
        fill(c);
        noStroke();
        rect(x, y, w, 240);
        colorMode(RGB, 255);
        for ( int i = 0; i < w; i++) {
          stroke(lerpColor(c, k, i/w));
          line(x+i, y, 
            x+i, y+239); //240 made it bigger than the previous one
        }
      }
      void widen() {
        w++;
      }
    }
    //

Chrisir

you can't use minim before you defined it in setup

import ddf.minim.*;
Minim minim;
AudioPlayer player;

PFont f;

String combination="";
String prevcombination="";

// define the ArrayList
ArrayList<Block> blocks = new ArrayList();
int cx, cy;

boolean[] keys = new boolean[7];

boolean flagShowMessages=true; 

//define colors
color[] colors = { 
  color(143, 205, 156), 
  color(150, 198, 234), 
  color(239, 57, 66), 
  color(253, 240, 77), 
  color(198, 233, 246), 
  color(239, 90, 122), 
  color(248, 151, 29) 
};

AudioPlayer[] songs; 

// setup and draw --------------------------------------------

void setup() {

  size(960, 240);
  colorMode(RGB, 255);

  minim = new Minim(this);

  songs[0]=minim.loadFile("A.mp3"); 
  songs[1]=minim.loadFile("B.mp3");
  songs[2]=minim.loadFile("C.mp3"); 
  songs[3]=minim.loadFile("D.mp3"); 
  songs[4]=minim.loadFile("E.mp3"); 
  songs[5]=minim.loadFile("F.mp3"); 
  songs[6]=minim.loadFile("G.mp3"); 

  for (boolean currentKey : keys) {
    currentKey=false;
  }

  println(keys);
}

// start draw
void draw() {
  // delete scene   
  background(#ffffff);

  // show blocks
  for (int i = 0; i < blocks.size(); i++) {
    blocks.get(i).draw();
  }

  //for

  // show messages 
  showMessages();

  // use keys
  evaluateKeysArray();
  //
}//func

// -----------------------------------------------------

void showMessages() {

  if (!flagShowMessages) {
    return; // leave here
  }
  textSize(13);
  fill(0);
  text ("\nTo have an effect two keys are required.\n"
    +"You can release both keys or one and add another key.\nUse x to toggle this text.", 
    width-241, 19, 
    100, 900);

  textSize(24);
  for ( int i = 0; i < keys.length; i++) {
    fill(colors[i]);
    text (char(i+97)+" "+keys[i], 
      width-101, 19+25*i, 
      100, 900);
  }//for
}

// use keys
void evaluateKeysArray() {
  int count=0; 
  for ( int i = 0; i < keys.length-1; i++) {
    if (keys[i]) {
      count++;
    }
  }

  if (count==0) {
    // do nothing
  } else if (count==1) {
    // assign keys to colors
    for ( int i = 0; i < keys.length-1; i++) {
      // Is 1 key pressed? 

      if (keys[i]) {
        combination = str(i);
        if (!combination.equals(prevcombination)) {
          // start new block 

          blocks.add( new Block( cx, cy, 
            colors[i], // The first color
            colors[i] ) ); // The second color
        } else {

          // widen 
          if ( blocks.size() > 0 ) {
            blocks.get(blocks.size() - 1).widen();
            cx++;
          }
        }
        prevcombination=combination;
        return;
      }
    }
  } else if (count==2) {

    // assign keys to colors
    for ( int i = 0; i < keys.length-1; i++) {
      for ( int i2 = i+1; i2 < keys.length; i2++) {
        // Are 2 keys pressed simultaneously? 

        if (keys[i] && keys[i2]) {
          combination = str(i) + str(i2);

          if (!combination.equals(prevcombination)) {
            // start new block 

            blocks.add( new Block( cx, cy, 
              colors[i], // The first color
              colors[i2] ) ); // The second color
          } else {
            // widen 
            if ( blocks.size() > 0 ) {
              blocks.get(blocks.size() - 1).widen();
              cx++;
            }
          }
          prevcombination=combination;
        }
      }
    }
  }//else if
}//func

// -----------------------------------------------------

// define keys
void keyPressed() {

  if (key=='x') { 
    flagShowMessages= !flagShowMessages;
    return;
  }

  int indexOfKey = int(key) - 97; 
  println (key
    + " : "
    + int(key) 
    + " : "
    + indexOfKey);

  if (indexOfKey>=0 && indexOfKey<keys.length) // limit keys to a-g
    keys[indexOfKey] = true;
  songs[indexOfKey].play();
}

void keyReleased() {

  println("released: " + key);
  int indexOfKey = int(key) - 97;

  if (indexOfKey>=0 && indexOfKey<keys.length) { // limit keys to a-g
    keys[indexOfKey] = false;
  }
}

// =============================================

// define the block
class Block {

  float x, y, 
    w;
  color c, k;

  Block(float ix, float iy, 
    color ic, color ics) {
    x = ix;
    y = iy;
    w = 0;
    // c = ic; //////////?????
    c = ic; //////////?????
    k = ics;
  }

  void draw() {
    fill(c);
    noStroke();
    rect(x, y, w, 240);
    colorMode(RGB, 255);
    for ( int i = 0; i < w; i++) {
      stroke(lerpColor(c, k, i/w));
      line(x+i, y, 
        x+i, y+239); //240 made it bigger than the previous one
    }
  }
  void widen() {
    w++;
  }
}
//

mariamalz

@Chrisir I seem to be getting the same error.

Here's a screenshot:

Chrisir

The error is NOT "the local variable "currentKey" is not used". That is just a warning.

The error is the red NullPointerException.

insert this

  songs = new AudioPlayer[7];

before the first songs[0]=minim.loadFile("A.mp3");

mariamalz

@Chrisir It worked, thank you!

The letter 'g' is not returning a color for some reason.. I couldn't figure out why.

Also, the songs only play once when the key is pressed, how could I make it play every time it is pressed? and play two songs when two keys are pressed?

Thanks again.

Chrisir

The letter 'g' is not returning a color for some reason.. I couldn't figure out why.

Try in line 14 boolean[] keys = new boolean[7]; instead of 7 better 8

the songs only play once when the key is pressed, how could I make it play every time it is pressed?

I think when you say song....play(); better say

song...rewind();song....play();

play two songs when two keys are pressed?

in keyPressed just start a song when a key is pressed?

post your entire code