nasmak pm - pm recorder

implementation

I used ChatGPT along with resources like W3Schools and MDN Web Docs to help me understand the code's syntax and know what every line was actually doing.

Mila was successful in getting a square to move across a canvas, and so I asked if she could try turning it into a circle by holding the space, which simulated opening and closing the character's mouth.

Once we both completed our tasks, I combined Mila's code with the scrubbed recording code by placing the canvas code into the class declaration.

After changing a few variables and testing, we got it to work. We now had our first working prototype, which we called Prototype 1.0.

feedback and validation

We showed Stan this prototype and he was very pleased to see a working prototype so early into the development project, as it was the first one he'd seen.

He told us to now try adding working images in place of the shapes, and so we got to work.

prototype 1.1

After the first prototype, Mila had already begun experimenting with replacing the shapes with images, putting together Prototype 1.1 soon after. This was a minor iteration on the first prototype where the shape were replaced with images.

We decided that the project would benefit from an overhaul in its code. It was written with shapes in mind, storing each shape in its own variable. Replacing the shapes with images works, but I wanted to find a better approach.

the approach

I wanted to find a way to store all the sprite images in one variable. Using the previously described resources, I found that I could do this by storing them in an object. I also wanted to figure out a way to make the character blink automatically. My idea was to have a blink variable that would toggle on and back off every 3 seconds using timeouts and intervals.

implementation

My first challenge was to retry an getting an image on the canvas again. I found myself very lost doing this as I wasn't sure how or where to declare my object. ChatGPT suggested I create another class within the already existing "PMRecorder" class that the entire project was contained in, but nothing appeared.

What I didn't know until much later was that you couldn't actually do this in JavaScript. I instead declared my object in the already existing method used to declare the canvas, and everything worked.

I used Mila's same movement code but changed the controls from arrow keys to WASD. This allowed me to instead use the arrow keys to test various parameters such as the character's speed and size by assigning those values to variables.

Upon doing this I also noticed that the character's point of origin was in its top left corner, meaning any change in size would happen from that point. I decided to create a variable to offset the character position by its size divided by 2. This ensured that any changes to the character would always happen from its center point.

At first, my code for this didn't work, but upon debugging with the console log I found that the offset variable didn't actually update with changes made to the character. I fixed this by redefining the offset division every time the size was changed.

blinking

Making the character blink was also a slight challenge. I made use of an interval with a timeout within itself that would continue repeating.

Both the interval and the timeout set off a toggleBlink() function that simply changes the state of my blink variable. The interval makes the blink true and the timeout sets it back to false after 100 milliseconds. This repeats within the interval every 2.5 seconds.

features

Mila and I felt that it was more important to keep the scope down and deliver a finished product, and so we chose to keep additional features to a minimum. We did manage to squueze in a few extra things:

• A proper UI with instructions on how to use the application.
• Sliders to control size and speed parameters instead of key presses.
• Switching movement controls back to arrow keys.
• Ability to swap characters.
• Ability to change the background color.
• Record, Stop, Download and Reset buttons.

feedback

Our client was very surprised with how the application turned out, and found it to be very useful, which we were happy to hear. The client also mentioned it would be a fun idea to include something like this on their website, allowing their fans to create their own videos.