Animal Keydom is an interactive keyboard created with p5.js that functions as an educational learning tool that teaches kids to type as well as learn about animals, both visually and audibly.
Starting screen that shows a digital keyboard and instructions: "Let's Begin! Find 'V' to Continue"
Screen interface when key input is correct.
Screen interface when key input is wrong.
Screen showing a final view of completed keyboard.
Separated my code into different files to make it easier to navigate between pages.
One thing I realized during this past week was that pre-existing functions in p5 didn't need to be called in the main sketch.js file. Previously, because I had an understanding that new functions I created needed to be called somewhere, I had assumed that functions such as preload() needed to be called as well.
// How I had before:
function preload() {
preload(); // preload() function being created as a new file elsewhere
}
I minimized keyTyped() by taking out a good chunk of code that could be written outside of the if statement to apply to the rest of the code, or unnecessary comments or lines of code that were not being used. Such as the example below:
Before:
if((key == 'a') || (key == 'A')){
button_line2[0].style('background-color', buttonCol); //Light Green
setTimeout(resetColor(button_line2[0]),1000); //To reset the color to White
imageMode(CENTER);
aardvark.play();
// image(A_i, int(windowWidth/2), int(windowHeight/4, img_wt,img_ht));
// A_s.play();
image(aardvarkI, width/2, height/5+50);
fill(0);
noStroke();
text('AARDVARK', width/2, height/5*2);
}
After:
imageMode(CENTER);
noStroke();
fill(0);
if((key == 'a') || (key == 'A')){
button_line2[0].style('background-color', buttonCol); //Light Green
setTimeout(resetColor(button_line2[0]),1000);
aardvark.play();
image(aardvarkI, width/2, height/5+50);
text('aardvark', width/2, height/5*2);
}