The Idea:
My idea hinged on claw machines, and how they’re rigged to break. Even for the average person, claw machines are known for being difficult at best. But even beyond that, you would struggle to find someone who believes a claw machine is truly all skill-based. While this may vary from machine to machine, there’s been documented proof that some have deliberate code that varies claw strength relative to sought profit (Edwards).
The Development:
Truthfully, I worked a little backwards when it came to the ideation of this project. After struggling so much with the technical side of my Narrative project, I wanted to ensure that I chose something more proven to be possible. With that in mind, I quickly took advice and scoped away from a real claw machine mechanic towards a simpler drag-and-drop.
Luckily, I found two base code projects online that had the separate components of what I wanted: A project that had working drag-and-drop, and a project that had multiple objects with physics interactions. A quick look at both had me using the latter as my initial template; physics are a lot more complicated.
A lot of initial time was spent clearing out the features I didn’t need from that base, as it used to be a Suika game prototype. After the fat was trimmed, I went about setting up things that would be relevant later (a for loop that spawned multiple balls in the beginning, a special boolean to denote a special pink prize, etc.).
However, a notably difficult process was integrating the drag-and-drop into the physics base. Long story cut shorter, the drag-and-drop hinged on the formula for finding the distance between the center of a circle (the prize), and another point (the mouse cursor). After a lot of nervous troubleshooting and console.log statements, I was able to determine the difference in the initially used formula and the formula I needed to use.
From there, I moved on to adding more collision. This remains as one of the buggier features of the finished project, as I didn’t completely figure out a lot of the nuances to the code detection. However, after adding a color change to the prizes that were successfully collected, it’s hopefully not as much of a readability issue as it used to be.
Lastly, the visual effects were overall quite simple to add. The side of blue glass on the left mirrors the chute that one would drop their prizes into, and the bottom of the machine has some shapes that resemble buttons on a real machine (though I took care to make sure they didn’t look too interactable, on the off chance they confused the player). The text was a fun effect to play with that really sells the rhetoric, especially the low opacity repeated phrase in the background. The claw machine cursor adds a layer of feedback that emphasizes the cruelty of not being able to pick up the pink prize.
If I were to have more time with this project, I would have loved to try and iron out the bugs in the wall collision, as well as adding a counter for every time a ball is picked up so that a player could see how much hypothetical expenses they would rack up with each attempt.
The Final Result:
Ultimately, I’m more pleased with how this project turned out compared to my previous. I think I took a simple idea that has a strong basis and did my best with it, rather than an idea that hinged more heavily on the amount of time placed on the creation of it.
The project is available on the editor. It is highly recommended to try and full-screen the preview and set the browser zoom to 100%.
https://editor.p5js.org/anxzhang/full/7XMj_XSAF
Credit:
Code bases:
https://rabbid76.github.io/graphics-snippets/example/p5.js/p5_js_so/p5js_so_bouncing_ball_1.html
https://editor.p5js.org/ICantRemember/sketches/PcX6ccoI4
Art Assets:
https://thenounproject.com/icon/robotic-claw-4611061
Rhetoric Sources:
Leave a Reply