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):
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;
}
1 Like
Why do you have a for loop with t ?
What is your intention?
1 Like
It creat the number of keys in each line.
Should I write it out of the for loop?
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 !
2 Likes
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?
At the moment, all your ifs do the same…
int value=int(keyholder)-48;
gives you a value between 0 and 9
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.
1 Like
okay… but where should I put “int value=int(keyholder)-48;”?
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??
1 Like
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.
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 
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);
}
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;
}
}
2 Likes
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
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
//
1 Like