We were given a project with the HTML-CSS frame of a Psychic Duck and we needed to add in all the Javascript elements to it and create an interaction. The program aim was to add in the text input, read the input and output an expression for the duck, by changing the voice, text displayed and the eyes.

Firstly, I changed the Duck to a Monkey! I like ducks, but I dunno, I guess I just wanted to monkey around!Haha. I proceeded to add a change to the mouth as well as part of the varying output. The varying output for the speech text, voice sound, eyes, and mouth was achieved by using jQuery and pulling the corresponding elements from arrays. I wanted to give a cleaner more easy interaction to this and I went on to make additional updates:

  • I removed the text input completely and added voice input using a voice recognition API
  • I matched the voice recognition commands to generate certain replies for the money. Example: Saying “Hey Monkey, Banana” would generate only positive replies and “Hey Monkey, are you a real monkey” would generate ignorant replies.
  • I added a readme file so that the user can try these limited commands. For all other commands, the monkey gives a random reply.
  • All commands must start with “Hey Monkey” otherwise the monkey won’t respond.
  • These commands can be expanded into an array and matched with patterns so that more language and words can be understood by the monkey, leading to a Monkey AI.
  • Finally, I removed the mouth changing its image with the eyes and added a p5.js element. Here,  the monkey’s mouth moves accordingly to the volume level that is read by the p5 microphone input.

There you have it! My Psychic Monkey! Enjoy!