What did you personally accomplish this week on the project? Give files or photos that demonstrate your progress. Prove to the reader that you put sufficient effort into the project over the course of the week (12+ hours).  

This week, in class time was spent viewing and responding to group design presentations. Some of the feedback we received this week was to create better backups in case any of our original plans do not workout. When we were considering a homegrown algorithm for pitch detection, the backups were existing modules. Now that we have moved on to using existing modules, we should flesh out specifics of what our focus should be, as well as what the back ups are.

For the design report, we would also like to spend more time identifying areas that we are unsure about and should focus on developing a backup for. For the web application side specifically, I think the difficult points will be the UI during gameplay. Namely, I am worried about synching data about the song, like lyrics and target notes, with the music playing and the ajax updates. I know that this is something I would like to be able to focus a good amount of time on.

Beyond the presentations and report considerations, most of my progress came from experimenting with Chart.js. I spent a good amount of time reading through the documentation and examples of use of the module to try to familiarize myself with the uses. I think it will be a very helpful tool in providing visual feedback in the results page, and I am interested in using it during the game. I haven’t been able to find any scrolling options, but I think, potentially, the data attribute of the chart can be updated with AJAX, showing a slightly different subsection of the notes as we go. However, there may be some issues with granularity in this case.

Above is an image from a dummy line chart I created with the use of chart.js. A more detailed and granular version of this can be used to show input pitch trends vs target pitch. Using chart.js will also be useful because it could allow users to zoom into parts of the song and view their singing patterns with more granularity.

Is your progress on schedule or behind? If you are behind, what actions will be taken to catch up to the project schedule?  

I am currently on schedule on my deliverables, which include a basic UI and the ability to select and play a song. However, I would have liked to have made more progress on recording user input vocals, which I will prioritize this next week. To do so, I’ll set small deliverables for myself between each group meeting.

Please list the particular ECE courses (if any) that covered the engineering science and mathematics principles your team used to develop your design ? If there are no courses please tells us how you learned those principles over the last week ?

This week, my focus has been more on research and personal development. Next week, I predict the focus will be more on group communication and collaboration, as the bulk of the work next week will be the design report.

15-112: The final project required self guided research and work with existing code.

17-712: This course projects require exploration of new codebases and working with open source code. It has been helpful in figuring out how to divide up my work, and has made me emphasize doing research before starting, rather than trying to make modules you don’t fully understand.

10-615: This class also required work with unfamiliar modules and troubleshooting when it didn’t work as planned.

What deliverables do you hope to complete in the next week?

Next week, my focus will be to continue playing with chart.js modules. I want to explore scrolling and updating chart data with ajax, which will be important in understanding whether or not this module can be used for gameplay or only for results.

Next, I will start working with audio inputs, making sure I understand if there are any difficulties with permissions and with passing audio input information between python and javascript. Before spring break, I want to be able to record the user the whole time the target song plays, and then, once the song is over, take the user to a new page. This page can either contain a dummy graph or, alternatively, a recording of the audio inputs.

Most of next week’s work, however, will likely be work on the design report, which is due on Friday. I expect that most of our class meeting time will consist of discussing the feedback we got, agreeing on what we want to change, and organizing report structure. Outside of class, we will write up our report sections independently.

What did you personally accomplish this week on the project? Give files or photos that demonstrate your progress. Prove to the reader that you put sufficient effort into the project over the course of the week (12+ hours).  

The first focus this week was going over the feedback we had received from our presentation and adjusting our project plan accordingly. We have switched to using an existing module for our pitch detection, which affected work distribution, added more and ordered equipment, and switched focus on only using hard coded songs for now. Most of this did not affect my portion of the work, so it had a smaller impact on my plans, but, as a group, we spent a few hours refining the tasks in our gantt chart and discussing how this will affect all areas of the project. Additionally, a few hours were spent on putting together the design presentation. It can be viewed at this link. These two tasks covered most of our in class time, as well as some time outside of class.

Next, I continued work on integrating Kelly’s Figma designs to the website framework. This consisted of some general adjustments, converting between hardcoded values in Figma to responsive values. More can be done in this case, for example adjusting the fonts with the screen size and providing a minimum value, but currently I have imported the missing fonts and worked a bit on aligning the elements.

I also spent some time this project on adding a template for songs to be played in the game mode. Although the UI for this is not fleshed out, I have added the two current hard coded songs to the homepage as hyper links, which I think will work in the final project, although they should be stylized. Once a song is selected, it autoplays. It is a pretty rudimentary framework, but it works. It supports songs of type mp3, wav, or ogg.

My work on the website can be seen on Github.

Lastly, I worked on researching graphics frameworks. The two main parts of our project that will use graphics is the results page after a song plays, and during the song. For the results after the song, we want to show various statistics, as well as a graph tracking user pitch vs target pitch for the duration of the game. It is still to be determined how the target pitch will be stored, however these values will likely be hardcoded in our project. Statistics will be easy to display, and my current top candidate for the line graph of pitch is Chart.js.

https://www.chartjs.org/docs/latest/

https://pypi.org/project/django-chartjs/

There are a variety of tools to be used for line charts, which are crucial to this project, as well as options for other charts like bar and pie to be used for the remaining statistics, if we think this is helpful. There is also a progressive line option, in which a line graph grows as you go, which I’m hoping could be used in gameplay. I plan to explore this next week further.

As for gameplay, the graphics we want to see consist of scrolling notes for the target pitch, as well as the current (and possibly past) pitch of the user, lyrics, and most likely text feedback for the user. These all can be accomplished with AJAX and javascript, which I am comfortable with. Some of these should be updated in some hard coded small increments. However, when it comes to the user vocal input and text feedback, I think the best course of action is to have the backend trigger changes that are then shown on screen. I think a way this could be achieved is by, in a loop in javascript, sending requests to the python backend, which responds as soon as there is a note change, over and over again, ostensibly making these changes whenever the python backend sees a change in pitch. However, I would need to play around with this to see if this is feasible. If not, I am hoping that the rate of updates that is necessary to make graphics move smoothly will also be enough to update the user pitch on the screen as well.

Is your progress on schedule or behind? If you are behind, what actions will be taken to catch up to the project schedule?  

I am currently on track with regards to the gantt chart. I have begun researching graphics packages, completed basic ui and navigation for the web application, and have some hard coded songs working. This week, we made a lot of changes to the gantt chart, especially when it comes to breaking the web development aspect into smaller tasks (specifically, the gameplay is now split into hardcoded song plays, audio gets recorded, and graphics go alongside the song, and graphics respond to audio input), so this took some focus off of researching graphics, meaning I wasn’t able to focus on that as much as I had planned last week. Nonetheless, we are still on schedule, and I will continue to research graphics next week.

Please list the particular ECE courses (if any) that covered the engineering science and mathematics principles your team used to develop your design ? If there are no courses please tells us how you learned those principles over the last week ?

Since my main focus of this project is web development, the most applicable class to the development of this project this week for me was my web development course at CMU.

• 17-437: In this course, I covered the concepts of web application development, including adjusting the front end with css, building a django framework, how to use object oriented programming, and how to organize navigation. Overall, I learned most about what I know about web development from this course, although I have done more work on my own.

However, other areas of focus for me have been managing work between groups of people, managing large projects over a longer timeframe, and creating compelling presentations.

• 17-437: This course ended in a 4 week end of semester project of substantial complexity. This required practice in splitting work over time and between group members.
• 15-112: This course ended in a multi week solo project that required organization, as well as formulating my goals as MVP and stretch goals.
• 18-341: This class had a multi week lab of substantial difficulty which required consistent communication with a partner, which has been useful in this project when it comes to communicating with my group through changes of plans and scope of the project.
• 18-344: This course consisted of partnered labs, which built team working skills, as well as thorough writeups about our intentions, work, and findings, which has been helpful in writing about and summarizing my work in blogposts, presentations, and reports this week.
• 17-712: This course required a lengthy presentation on a topic I had not been familiar with, which helped me build both researching and presenting skills.
• 10-615: This class required me to choose and use a machine learning tool I was unfamiliar with for multiple projects, which has been helpful in researching and exploring helpful tools.

What deliverables do you hope to complete in the next week?

Next week, I want to continue fleshing out the song pages. A simple addition that I’d like is to skip to a (for now) blank result screen once the song finishes, which requires some more interaction with the audio component. I’d also like to add vocal recordings (that do not get analyzed) to these pages. These both will be good starting blocks to work with and actually analyze the songs as we go.

Next, I’d like to have a simple demo with Chart.js line charts ready, as well as a few with other potential charts we can use. I plan to have these charts read data from another file type, rather than a js data structure.