Computational Media 9.26.19

PUNCH OUT!!!

This week I figured I could use for loops to recreate a scene from the NES video game, Punch Out. I downloaded a sprite sheet from Spriter’s Resource because I did not want to draw out a whole 8-bit scene in p5, I was mainly concerned with making the parts move accordingly. I then cut the sprites out into individual pieces based on how they moved. I couldn’t quite wrap my head around the movement in ways that I could translate into p5, so I had to put it together in After Effects just to get a sense of the step-by-step. Once I had that down, it was easier for me to focus on getting them individual assets in order.

The Sprite Sheet that I pulled from with different elements of the Punchout animation

I figured the for loop would be helpful in creating a constant stream of background for the two characters to travel through. I had some trouble with this, and ended up using very exaggerated numbers to get the result that I wanted. I imagine there’s a better way to go about this.

Before I called it a night, I decided to add music as a function of MousePressed.

To view the animation properly, the assets must be added to p5. Here is a shared google folder for that.

Link to the project page

Punchout p5 project screen recording. Code and demo