//by pressing A-E
//you select a letter
//as you move across the square
//you get a visual pronunciation of the letter.
PFont font; // set font variable
PImage a1; // set image variables
PImage a2;
PImage a3;
PImage a4;
PImage b1;
PImage b2;
PImage b3;
PImage b4;
PImage c1;
PImage c2;
PImage c3;
PImage c4;
PImage d1;
PImage d2;
PImage d3;
PImage d4;
PImage e1;
PImage e2;
PImage e3;
PImage e4;
int mode = 1; //set variable for key input
int x = 120; // main letter locations
int y = 300;
void setup() {
size(400, 400); // window size
smooth();
font = loadFont("HelveticaLT-Bold-120.vlw"); // load in font
textFont(font);
//load in images
a1 = loadImage("a1.png");
a2 = loadImage("a2.png");
a3 = loadImage("a3.png");
a4 = loadImage("a4.png");
b1 = loadImage("b1.png");
b2 = loadImage("b2.png");
b3 = loadImage("b3.png");
b4 = loadImage("b4.png");
c1 = loadImage("c1.png");
c2 = loadImage("c2.png");
c3 = loadImage("c3.png");
c4 = loadImage("c4.png");
d1 = loadImage("d1.png");
d2 = loadImage("d2.png");
d3 = loadImage("d3.png");
d4 = loadImage("d4.png");
e1 = loadImage("e1.png");
e2 = loadImage("e2.png");
e3 = loadImage("e3.png");
e4 = loadImage("e4.png");
}
void draw() {
background(255); // background size
if (mode == 1) { //a
if ((mouseX >= 0) && (mouseX <= 100)) { //scroll over
image(a1, 0, 0);}
else if ((mouseX > 100) && (mouseX <= 200)) {
image(a2, 0, 0);}
else if ((mouseX > 200) && (mouseX <= 300)) {
image(a3, 0, 0);}
else if ((mouseX > 300) && (mouseX <= 400)) {
image(a4, 0, 0);}
text("Aa", x, y); //print the letter A
strokeWeight(15); // UNDERLINE
strokeCap(SQUARE);
stroke(255);
line( x-5, y+20, 280, y+20);
} else if (mode == 2) { //b
if ((mouseX >= 0) && (mouseX <= 100)) { //scroll over
image(b1, 0, 0);}
else if ((mouseX > 100) && (mouseX <= 200)) {
image(b2, 0, 0);}
else if ((mouseX > 200) && (mouseX <= 300)) {
image(b3, 0, 0);}
else if ((mouseX > 300) && (mouseX <= 400)) {
image(b4, 0, 0);}
text("Bb", x, y); //print the letter B
strokeWeight(15); // UNDERLINE
strokeCap(SQUARE);
stroke(255);
line( x-5, y+20, 280, y+20);
} else if (mode == 3) { // c
if ((mouseX >= 0) && (mouseX <= 100)) { //scroll over
image(c1, 0, 0);}
else if ((mouseX > 100) && (mouseX <= 200)) {
image(c2, 0, 0);}
else if ((mouseX > 200) && (mouseX <= 300)) {
image(c3, 0, 0);}
else if ((mouseX > 300) && (mouseX <= 400)) {
image(c4, 0, 0);}
text("Cc", x, y); //print the letter C
strokeWeight(15); // UNDERLINE
strokeCap(SQUARE);
stroke(255);
line( x-5, y+20, 280, y+20);
} else if (mode == 4) { // d
if ((mouseX >= 0) && (mouseX <= 100)) { //scroll over
image(d1, 0, 0);}
else if ((mouseX > 100) && (mouseX <= 200)) {
image(d2, 0, 0);}
else if ((mouseX > 200) && (mouseX <= 300)) {
image(d3, 0, 0);}
else if ((mouseX > 300) && (mouseX <= 400)) {
image(d4, 0, 0);}
text("Dd", x, y); //print the letter D
strokeWeight(15); // UNDERLINE
strokeCap(SQUARE);
stroke(255);
line( x-5, y+20, 280, y+20);
} else if (mode == 5) { // e
if ((mouseX >= 0) && (mouseX <= 100)) { //scroll over
image(e1, 0, 0);}
else if ((mouseX > 100) && (mouseX <= 200)) {
image(e2, 0, 0);}
else if ((mouseX > 200) && (mouseX <= 300)) {
image(e3, 0, 0);}
else if ((mouseX > 300) && (mouseX <= 400)) {
image(e4, 0, 0);}
text("Ee", x, y); //print the letter E
strokeWeight(15); // UNDERLINE
strokeCap(SQUARE);
stroke(255);
line( x-5, y+20, 280, y+20);
}
}
void keyPressed () {
if (key == 'a' || key =='A') {
mode = 1;
} else if (key == 'b' || key == 'B') {
mode = 2;
} else if (key == 'c' || key == 'C') {
mode = 3;
} else if (key == 'd' || key == 'D') {
mode = 4;
} else if (key == 'e' || key == 'E') {
mode = 5;
}
}Exercise F
on Wednesday, Oct 15, 2008 – 3:14 am
One Comment
It took me a long time to figure out the mouse behavior. Visual cues such as changing the cursor to a left/right arrow can help. I wonder if the mouse response is better than playing the frames as animation in this case. I enjoy the piece.