# How to do a animated colored Keyboard?

**URL:** <https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763>\
**Category:** Coding Questions\
**Created:** [June 1, 2019, 8:50pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763 "2019-06-01T20:50:17Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Moiizez](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moiizez/32/5427_2.png) [@Moiizez](https://discourse.processing.org/u/Moiizez)\
**Post date:** [June 1, 2019, 8:50pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/1 "2019-06-01T20:50:18Z")

</div>

Hey, I need some help with this thing I’m trying to do.  
I wanna create a keyboard in Processing, that when you press a key, it selects a random color and a cub “grow up” on the screen (in the place that the rect is placed), like go forward until the infinite.  
This is what I got so far (some words are in Portuguese):

```auto
int keyholder;
int teclaX, teclaY;

void setup()
{
  size(1200, 550);
}

void draw()
{
  fill(0);
  noStroke();

  teclaX=50;
  teclaY=50;
  

  for (int t=0; t<10; t++)
  {
    if (keyholder=='q' && t==0)
      teclaCores();
    else if (keyholder=='w' && t==1)
      teclaCores();
    else if (keyholder=='e' && t==2)
      teclaCores();
    else if (keyholder=='r' && t==3)
      teclaCores();
    else if (keyholder=='t' && t==4)
      teclaCores();
    else if (keyholder=='y' && t==5)
      teclaCores();
    else if (keyholder=='u' && t==6)
      teclaCores();
    else if (keyholder=='i' && t==7)
      teclaCores();
    else if (keyholder=='o' && t==8)
      teclaCores();
    else if (keyholder=='p' && t==9)
      teclaCores();
    else
      fill(0);
    rect(teclaX, teclaY, 100, 100);
    teclaX+=110;
  }

  teclaX=50;
  teclaY=175;

  for (int t=0; t<10; t++)
  {
    if (keyholder=='a' && t==0)
      teclaCores();
    else if (keyholder=='s' && t==1)
      teclaCores();
    else if (keyholder=='d' && t==2)
      teclaCores();
    else if (keyholder=='f' && t==3)
      teclaCores();
    else if (keyholder=='g' && t==4)
      teclaCores();
    else if (keyholder=='h' && t==5)
      teclaCores();
    else if (keyholder=='j' && t==6)
      teclaCores();
    else if (keyholder=='k' && t==7)
      teclaCores();
    else if (keyholder=='l' && t==8)
      teclaCores();
    else if (keyholder=='ç' && t==9)
      teclaCores();
    else
      fill(0);
    rect(teclaX, teclaY, 100, 100);
    teclaX+=110;
  }
  
  teclaX=200;
  teclaY=300;

  for (int t=0; t<7; t++)
  {
    if (keyholder=='z' && t==0)
      teclaCores();
    else if (keyholder=='x' && t==1)
      teclaCores();
    else if (keyholder=='c' && t==2)
      teclaCores();
    else if (keyholder=='v' && t==3)
      teclaCores();
    else if (keyholder=='b' && t==4)
      teclaCores();
    else if (keyholder=='n' && t==5)
      teclaCores();
    else if (keyholder=='m' && t==6)
      teclaCores();
    else
      fill(0);
    rect(teclaX, teclaY, 100, 100);
    teclaX+=110;
  }
  
  teclaX=125;
  teclaY=425;

  for (int i=0; i<1; i++)
  {
    if (keyholder==' ' && i==0)
      teclaCores();

    else
      fill(0);
    rect(teclaX, teclaY, 925, 100);
  }
}

void teclaCores() {
  int cores = color(random(255), random(255), random(255));
  fill (cores);
}

void keyPressed() 
{
  keyholder=key;
}

void keyReleased()
{
  keyholder=0;
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 2, 2019, 5:22am UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/2 "2019-06-02T05:22:04Z")

</div>

Why do you have a for loop with t ?

What is your intention?

---

<div class="post-metadata">

**Author:** ![Moiizez](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moiizez/32/5427_2.png) [@Moiizez](https://discourse.processing.org/u/Moiizez)\
**Post date:** [June 2, 2019, 2:01pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/3 "2019-06-02T14:01:49Z")

</div>

It creat the number of keys in each line.

Should I write it out of the for loop?

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 2, 2019, 2:08pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/4 "2019-06-02T14:08:19Z")

</div>

Hey There!

That alot of hardcoding ! Every time you press a key it corresponds to a number called the ASCII value pair with key pressed and keyCode and your method will be way simplified !

---

<div class="post-metadata">

**Author:** ![Moiizez](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moiizez/32/5427_2.png) [@Moiizez](https://discourse.processing.org/u/Moiizez)\
**Post date:** [June 2, 2019, 2:35pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/5 "2019-06-02T14:35:50Z")

</div>

Hey, thanks for the answer, but I don’t understand what you are telling me to do. Should I write the ASCII value of the key I want to be pressed?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 2, 2019, 2:57pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/6 "2019-06-02T14:57:01Z")

</div>

At the moment, all your ifs do the same…

int value=int(keyholder)-48;

gives you a value between 0 and 9

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 2, 2019, 3:01pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/7 "2019-06-02T15:01:42Z")

</div>

Not currently home but whenever you press a key on your keyboard it a number using this you can make whatever your doing with the keys way easier. When I get home I have an example that I can show you fully what I mean.

---

<div class="post-metadata">

**Author:** ![Moiizez](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moiizez/32/5427_2.png) [@Moiizez](https://discourse.processing.org/u/Moiizez)\
**Post date:** [June 2, 2019, 3:02pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/8 "2019-06-02T15:02:13Z")

</div>

okay… but where should I put “int value=int(keyholder)-48;”?

---

<div class="post-metadata">

**Author:** ![Moiizez](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moiizez/32/5427_2.png) [@Moiizez](https://discourse.processing.org/u/Moiizez)\
**Post date:** [June 2, 2019, 3:03pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/9 "2019-06-02T15:03:06Z")

</div>

okay man haha I’ll wait

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 2, 2019, 3:38pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/10 "2019-06-02T15:38:44Z")

</div>

> [@Chrisir](#):
>
> At the moment, all your ifs do the same…

It’s not really clear what you want to achieve

You can just choose a random number when a key is clicked

Also set a boolean variable to true in this case.

When it’s true let the cub grow (increase its height when it’s a rectangle)

The ifs are not clear. What do you want to achieve with them? A different color per key or a different cub??

---

<div class="post-metadata">

**Author:** ![Moiizez](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moiizez/32/5427_2.png) [@Moiizez](https://discourse.processing.org/u/Moiizez)\
**Post date:** [June 2, 2019, 5:12pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/11 "2019-06-02T17:12:59Z")

</div>

When some key is pressed, I want a diferente color for it and that a cub or a rect grow where the key is placed.  
The if’s are there only to create the nunbers of keys in each line of the screen, like: “qwertyuiop”, “asdfghjklç”,“zxcvbnm” and spacebar.

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 2, 2019, 5:28pm UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/12 "2019-06-02T17:28:20Z")

</div>

It’s me again !

Taking an OOP way allows you to let the computer do the heavy loading and you just get to enjoy doing all the cool stuff. Here you programmed every key yourself in a super hacky way. That any change in functionality in your code means having to modify a lot of it or worst case scenario re-write the whole thing. Not fully sure still what you would like to achieve but my example showcases you an easy get to way to place each button give it some color value and make a keyboard out of it without hassle. You just have to make so many button objects you want assign each of them to which key to react to and there you go ! That is what I was talking about with keyPressed and ASCII’s that you pass in the character ( of the key ) and your pc will handle the rest in keyPressed and keyReleased. By picking up and checking was it the key you programmed that was clicked !. ( I added a small delay if the right key is hit as the colors will cycle through quickly as draw exectues 60 frames per second ).

Any further questions lemme know !  
P.S. Always format your code(Highlight your code and **CTRL + SHIFT + C** ). We quietly die inside if you don’t 😃

```auto
Button b1;
void setup(){
  size(600,600);
  b1 = new Button(width/2,height/2,50,'Q');
}
void draw(){
  background(0);
  b1.show();
}
void keyPressed(){
  b1.clickedKey(keyCode,true);  
}
void keyReleased(){
 b1.clickedKey(keyCode,false); 
}

```

```auto
public class Button{
  PVector pos;
  int size;
  boolean pressed;
  int keyValue;
  Button(float x , float y,int size,char keyValue){
    pos = new PVector(x,y);    
    this.size = size;
    pressed = false;
    this.keyValue = (int)keyValue;
  }
  void show(){
    if(pressed){ colorChange(); delay(200);} 
    rect(pos.x,pos.y,size,size);
  }
  void colorChange(){
    int random = color(random(0,255) , random(0,255) , random(0,255) );
    fill(random);
  }
  boolean clickedKey(int k,boolean clicked){
    if(k == keyValue) return pressed = clicked;
    return false; 
  }
  
  
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 6, 2019, 9:52am UTC](https://discourse.processing.org/t/how-to-do-a-animated-colored-keyboard/11763/13 "2019-06-06T09:52:34Z")

</div>

I agree, with a class it’s easier

In this version the key grows

also make an ArrayList instead of b1 and store the buttons inside it

```auto
Button b1;

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

  b1 = new Button(width/2, height/2, 50, 'Q');
}

void draw() {
  background(0);
  fill(255); 
  text("Click q", 100, 100); 
  b1.show();
}

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

void keyPressed() {
  b1.clickedKey(keyCode, true);
}

void keyReleased() {
  b1.clickedKey(keyCode, false);
}

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

public class Button {

  PVector pos;
  int size;
  boolean pressed;
  int keyValue;
  float delta=0; 

  Button(float x, float y, 
    int size, 
    char keyValue) {
    pos = new PVector(x, y);    
    this.size = size;
    pressed = false;
    this.keyValue = (int)keyValue;
  }

  void show() {
    if (pressed) { 
      colorChange(); 
      delay(2);
    } 
    rect(pos.x, pos.y, size, size);

    // small growing rect
    rect(pos.x, pos.y-delta, size/3, size/3+delta);
    if (pressed) {
      delta += 1;
    }
  }//method

  void colorChange() {
    int random = color(random(0, 255), random(0, 255), random(0, 255) );
    fill(random);
  }

  boolean clickedKey(int k, boolean clicked) {
    if (k == keyValue) {
      pressed = clicked;
      return pressed;
    }
    return false;
  }
  //
}//class
//

```