Contributing To Monster Mash

Topics on how to make Monster Mash an even better tool.
Post Reply
DarthR2`
Posts: 7
Joined: Thu Sep 22, 2022 12:39 pm

Contributing To Monster Mash

Post by DarthR2` » Fri Oct 20, 2023 1:40 pm

First off, thanks for this wonderful program! I am a K-8 Computer teacher and have used it with my younger students to bring their paint drawings alive. They love it and the project gets them used to importing and exporting files.

I have been beefing up my programming skills recently by taking Havard's CS50, and I would love to put those skills to the test and begin to build a portfolio by adding some features to Monster Mash. I would like to add a few new features:
  • An option to turn the background to a solid color (such as chroma key).
  • An export function to download a video or GIF of the animation.
  • Changing the way animations are drawn to store the animation as an editable bezier curve.
Here are my questions, since I am new to more serious coding projects and contributing to open source:
  • Do these seem like reasonable advanced beginner projects? (I'm guessing the first would be easy but the last would be more complex)
  • Assuming I'm able to accomplish any of these, should I fork the project to make my own version with the features I want, or should I contribute my changes to the main Github?
Thanks again and I hope to contribute soon!

User avatar
dvoromar
Posts: 41
Joined: Tue Apr 20, 2021 2:23 pm

Re: Contributing To Monster Mash

Post by dvoromar » Mon Oct 30, 2023 12:07 am

Hi DarthR2, thanks for the feedback!

Yes, I think you can view those tasks as "advanced beginner" level. The first one is easy, the second one needs you to find a suitable library for GIF/video encoding, and for the last one, you'd need to dive a bit deeper into MM guts. For the last one, please note, that MM is a research project, meaning that some parts may not be optimized for speed and you might need to replace some routines, e.g., for drawing, by faster alternatives.

You should definitelly work in the fork of the project. We can then try to merge it into the main repo, if there's manpower available.

DarthR2`
Posts: 7
Joined: Thu Sep 22, 2022 12:39 pm

Re: Contributing To Monster Mash

Post by DarthR2` » Wed Dec 27, 2023 1:18 pm

Hi dvoromar,
Thanks so much for your reply and advice and sorry I missed it for a couple of months! I'm in the middle of another big coding project right now, but definitely hope to circle back to Monster Mash soon (I would love to be able to use a version with my proposed edits with my students this Spring!).

Now that I understand enough to actually begin to understand what is happening instead of just blindly following the build instructions on Github, I was able to build the web version and get it (mostly) working. However I did run into a couple of problems:
  • My build did not include any of the images and several necessary js files (FileSaver.js, main.js, module.js) . I was able to save the monstermash.zone website to get those static files, but it is rather inconvenient and would be wonderful if those were on the github
  • The build also seemed to be behind the monstermash.zone version, specifically it doesn't have the excellent August 28, 2022 update for creating a layer from a mask image,
  • It works for inflating small, simple shapes, but when I drew larger shapes, I got memory access out of bounds runtime errors. I think it may be a result of a different error:

    Code: Select all

    wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
    I checked the mime time in the response and found that it was this "application/wasm; charset=utf-8" so it seems like the utf-8 may be causing it to not recognize the type which cases it to fall back on ArrayBuffer instantiation which maybe can't handle more complex shapes? This is the relevant code from monstermash.js

    Code: Select all

    return fetch(binaryFile, { credentials: "same-origin" }).then(
          (response) => {
            var result = WebAssembly.instantiateStreaming(response, imports);
            return result.then(callback, function (reason) {
              err(`wasm streaming compile failed: ${reason}`);
              err("falling back to ArrayBuffer instantiation");
              return instantiateArrayBuffer(binaryFile, imports, callback);
            });
          }
        );

Post Reply