top of page

Keyboard Interactions in Coding

String letters = "";
int back = 102;

void setup() {
size(500, 500);
textSize(30);
textAlign(CENTER);
}

void draw() {
background(back);
text(letters, 250, 250);
}

void keyPressed() {
if ((key == ENTER) || (key == RETURN)) {
letters = letters.toLowerCase();
println(letters); // Print to console to see input
if (letters.equals("black")) {
back = 0;

if (letters.equals("blue")) {
back = 1500;
}
if (letters.equals("white")) {
back = 255;
}
if (letters.equals("green")) {
back = 250000;
}
if (letters.equals("pink")) {
back = -505983 ;
}
if (letters.equals("yellow")) {
back = -200;
}
if (letters.equals("orange")) {
back = -15000;
}
if (letters.equals("purple")) {
back = -500000;
}
if (letters.equals("red")) {
back = -515000;
}
else if (letters.equals("gray")) {
back = 204;
}
letters = ""; // Clear the variable
} else if ((key > 31) && (key != CODED)) {
// If the key is alphanumeric, add it to the String
letters = letters + key;
}
}

Code

Video Demonstration

This code demonstrates the idea of interactive technology. The colour of the rectangle will depend on the colour that is typed in by the individual. With this code, you are able to change the range of colours that the program offers as well as the shade shown. This code took me the longest to finish as I was struggling with getting the colours correct. The original code had two colours already declared but I wanted to add more. I ended up adding all the colours of the basic colours that usually come to mind. Through trial and error, I was able to get the colours correct. It took a long time experimenting with the numbers inputted and changing them slightly to get a different shade but it was all worth it. Although simple, the code is very interactive with its audience. It shows how humans and technology can act together. The functions that are used in this exercise include string, textSize() and keyPressed(). However, this code is case sensitive and if the colour is spelled wrong, the screen will not change to the desired colour.

 

(click the functions underlined to learn more about them)

Function

bottom of page