Developed a visual art piece using p5.js while learning programming concepts.
Duration: 2 weeks
Context: HCDE 524 Programming Concepts - Individual Project
My Role: Engineer and Artist
CONTEXT
This project involved using all of the founding principles of programming covered during the course, including variables, functions, parameters, conditionals, loops, arrays, and objects.
DESIGN
The Piano Garden
I created a digital representation of a piano, where viewers can click on different sections of the canvas that correspond to the different keys (C-G) on the piano. When pressed, each key will display a different moving pattern, and their computer will make the sound of a chord that corresponds to that note.
Full code alongside visual display can be found here.
p5.js
p5.js is an open-source JavaScript library for “creative coding” created by Lauren Lee McCarthy.
“Like making a mark on paper, a single line of code puts a circle on the screen, another changes its color, and a third makes it animate.” - Lauren Lee McCarthy
“p5.js is a project that emphasizes inclusivity and access in its community of users and contributors. Historically, there has been a lack of representation of women and people of color in both the arts and in technology, and too often efforts to remedy come as afterthoughts. By contrast, p5.js holds diversity and inclusion as core values upon which the software is built.” - Lauren Lee McCarthy
REFLECTION
This was my first time coding, and I had so much fun using p5.js, particularly because of how much visual feedback I received for each change I made to the code. This course and project had a huge impact on my comfort level when it comes to coding. I really enjoyed incorporating one of my hobbies (music and piano) with a new skill I was learning.