@ducky-violin

It seems there is more to it than meets the eye…

-added space-themed background (credits: NASA)
-added 4 “secret text” boxes, each with different dimensions
-moved around the boxes and fit them into the screen without too much overlap
–> exception: box below “main box” is overlapping (intentional), but will be hidden on-enter and summoned through a different interaction
-hid secret text in the boxes by making the font color the same as the background color
-hid hints about where to find the “water vault” in the boxes
-added a clock to the bottom-right corner of the screen
-clock is functional and displays current time
-clock will make cursor: pointer on hover
-added draggable + openWindow + closeWindow functions to the js file

Formatting the boxes and customizing the background was annoying. I couldn’t just copy-paste everything because the boxes were in different dimensions and different positions, and the background was difficult to find because I kept finding backgrounds that were the wrong dimensions (and it would just copy-paste itself on the screen, making it look like a grid of images instead of one image). Also, I was planning to add duck app icons, but since this is technically part 2 of Spaceship (and not a “main” page), I thought that adding duck icons wouldn’t be as fitting in this situation.

clock-vault-summon interaction is under way…

Final polishing on the Spaceship page: part 1!

-changed passcode to not be case-sensitive
-edited transition page (Matrix –> Spaceship)
–> changed text to match spaceship-specific advice
-made new newspaper box draggable
-added “selected app” look
-compiled devlog updates into README
-added hints for spaceship in README
-removed cursor: pointer in non-clickable areas (even if draggable)
–> reduces confusion on what opens links/events

-updated passcode barrier to react if the correct answer is inputted
-edited the formatting of the application passcode window
-updated soda duck interaction
-added a receive/decline soda action
-added a reminder to recycle the soda can when done
-added aluminum recycling Wikipedia to post-soda-interaction interaction
-changed interaction with studious duck to include soda task
-added secret hint window, given by studious duck
-secret hint window is only accessible after giving studious duck the soda
-changed “reparier” job to “engineer” job
-changed water-carrying-duck interaction
-implemented a function to add a delay before alert() so that alert() interactions aren’t as in-your-face
-added a transition message for entering new area
-added a conclusion message to inform user that the new update is not yet finished

I did a bit of researching on water pollution and coal mining to make sure the context for this made sense, and I also spent a while trying to figure out how to give the user the hint on how to unlock the application portal without making it too easy or too difficult. I’ve finally finished part 1 of the Spaceship realm, though! :3

-added duck interruption to Newspaper
-added closebutton for duck interruption notif
-merged duck image and duck notif into the same div
-added stolen newspaper text / /new newspaper
-linked coal mining Wikipedia to new newspaper
-changed querySelector() to getElemendById() in the is() function
-added waterbottleduck interaction
-added sodaduck interaction
-added studiousduck interaction
-added application portal interaction (passcode-locked)

silly dev moments:
-I kept forgetting to add “” when using my is() function
-when I did remember to add “”, I sometimes forgot the is() part and just put the element name
-sometimes I’d forget both
… and then I’d wonder why my code wasn’t running. I’d run through all the js line-by-line, trying to catch an error, when the answer was right in front of me-

-edited Newspaper details and formatting
-added [Read more] for Newspaper
-added [Apply here] for Job Postings
-added 3 duck icons:
–> carefree soda-carrying duck
–> studious duck
–> jubilant water-carrying duck
-added fade-in transition to all 3 duck icon apps
-changed timings of Spaceship elements
-updated moveable windows to “cursor: pointer” to indicate draggability
-updated Matrix level headers (dark green headers) to have “cursor: pointer” to make draggability clearer
–> feedback from previous ship told me that I should make it clearer if it’s draggable; hopefully this makes it better!
-added a duck agent interruption to reading the newspaper

silly dev moment:
I reused the “notif” css class for the duck interruption message, but the text was white because in the tag, I had defined all text to be white. However, I didn’t notice that; all I saw was that the “notif” css class didn’t specifically define text color. I kept trying to find where the white text color was coming from, and ended up copy-pasting the notif class and adding a “color: black” to override whatever was changing the text color. After I had changed the newspaper notif to a new space notif class, I realized I could’ve just kept the notif class and made the text black (since all the notif text was black anyways so it wouldn’t have mattered). I’m going insane ;-;

-added favicon to pages (prologue, intro, curious duck, spaceship)
-added names to pages (noted above)
-rearranged images into a folder, and organized images per page (intro page vs space page, etc.)
-defined a function to get element instead of using document.getElementById() every time
-added two new windows to Spaceship
-made Spaceship windows draggable
-added a delay to Spaceship typing intro
-added a delay to Spaceship windows appearance (to appear after the text finished typing)
-added a delay to Curious Duck appearance (movement makes it easier to spot; less likely to miss)
a particularly silly mistake I found funny:
I defined the location for the Spaceship div windows in the html file, but I forgot about it and started defining the location with the css file. I was really confused as to why editing the css file didn’t affect the location (it was being overridden by the html one the whole time)

-changed index.html into a redirect to prologue
-added prologue page for story/context + instructions
–> took feedback from previous ship stating that the instructions were unclear and the site was confusing; hopefully this clears things up!
-added curious duck to the conclusion of the first level
-curious duck redirects to a transition/instructions page, which then redirects into the next level
-space-themed level! made the “welcome” sign fade in and added typing transition

silly mistakes I found funny:
-I linked the prologue script to the curious duck transition page instead of the transition script and was frustrated that nothing on the transition script was running
-I tried to put a tag inside of another tag and was wondering why the id assignment wasn’t working

-added a goal vs attempt recording
–> “goal” is what you want to play (you can play a recording of what you want to play to the mic), while “attempt” is what you’re actually playing (live)
-added a feature to compare accuracy of goal vs attempt (and create an “accurate notes” list)
-added a small delay to checking the notes so that it would reduce ghost harmonics
-raised the note-neighbors number for the program to be more resistant to background noise, ghost harmonics, and vibrato

This program works pretty well for playing on digital pianos, since the frequency stays consistent and the computer can pick up the sound better. I’ve been trying to make this work for string instruments (which aren’t always in tune), but it’s very difficult since making the program too resistant to vibrato could make it less accurate overall.

Nonetheless, I’m pretty proud of this project because it was difficult for me to learn and understand all about using the wave and pyaudio packages :D

I hope this is useful to anyone trying to learn an instrument!

-no longer spams the same note over and over again for a continuous long note
-waits for a new frequency (or a silence) before printing a new note
-fixed the issue where the recording saves in x2 speed
-increased number of note-neighbors considered when the program “votes” on which note is the main one (to cancel out ghost harmonics / vibrato)

I noticed that my program works better on piano (since the notes’ frequencies are more consistent), but I’m working on adjusting this to work for other instruments as well (especially those that can vibrato). I found that my recording was saving at x2 speed because I forgot to update the sample width parameter when I was changing from a width of 4 to a width of 2.

-made a recording system
-created a note-mapping function
-added a delay to let microphone initialize before recording
-used a rolling buffer for more accuracy in identifying notes
-prints note and frequency in Hz

First time working with audio in software! It was hard to get a functional audio file output and to ensure accuracy in note tracking; the recording kept sounding distorted and it was all static noise.

A lot of my time was spent on trying to get a decent recording; however, it’s still not accurate because while the static noise is gone, the audio is playing at a higher speed than recorded. Still, my program’s main function is to identify notes, so for now I’ll just focus on that. (Also, that recording thing is driving me insane.)

I learned a lot about audio processing from random blogs and videos on the Internet, so coding this was really confusing and I kept messing around with the code to test what each one does. Still, this is really interesting! :D

Final stretch!
-added leafduck quest (task)
-added icon-selection change (app becomes circular when clicked) to puzzle and leaf task
-coded the “locked door” to become functional
-locked door will now open if you have solved all the puzzles
-updated README to have clearer instructions and a story

silly mistake I found funny: I spent a long time trying to figure out why the leaf duck wasn’t updating its leafsolve variable, and then I realized I had put == instead of = :’)

New puzzle and escape-room-like format! I’m excited for this project :)
-added app icons
-coded a hints button (hidden)
-added a secret door… somewhere ;)
-gave the secret door hints (if the user clicks it, it’s locked and says nothing; if the user clicks it a second time without completing the first task, the door gives a hint); this is to prevent users from getting frustrated!

The formatting for everything took so long, and fixing the code was difficult since there were so many lines and I had to test each line step-by-step to find out why the alert() wasn’t working or why the user-typed input didn’t go through D:

There are two puzzles available so far, but I will add a third one to complete it! After that, I’m planning to redesign the welcome page completely to bring an escape-room-esque vibe ;)

-added 3 new duck image windows (draggable + click to disappear), can be summoned using header
-organized CSS and JS scripts to another folder (for organization)
-formatted so that time says “launching welcome page” when loading (it’s a hint that you can click it to show the welcome window!)

goal is to add more easter eggs and make this more interesting!

the MATRIX?!
(plot twist: it’s not the matrix. it’s a duck.)
-added header
-added background
-added time clock
-reformatted a lot of the page

it’s a duck website!
-welcome message
-intro text
-duck image
-Wikipedia page to the damaging environmental actions of humans
-duckOS defined as a duck website made by a duck
-compos mantis

new slackbot called duckquack