Experiment #3 “Trump Punch”

By: Kristy Boyce
Code available on Github:
https://github.com/kboyce123/Experiment3

Final version with Trump reaction upon being hit by the right hand boxing glove.
Final version with Trump reaction upon being hit by the right-hand boxing glove.

img_4549

 

 

 

 

 

 

 

Project Description:

Trump Punch is a computer game and peripheral device, it is intended as a stress release aid for liberal newshounds fed up with the antics of those in political office. The current version (for rather obvious reasons) comes with a large, smug Donald Trump face that’s just ripe for the punching. In the spirit of bipartisanship, the  two button classic arcade style controller allows the user “left” and “right” punching abilities. The game will also punch Trump on mouse click.

 

Process Journal:

My process began with taking a day to doodle things and come up with ideas for peripherals that I would do without regard to feasibility or failure. Some ideas were:

  • Left-handed mouse
  • Mouse that works in a 3D space in the air
  • Antique radio but with potentiometer knobs linked to Spotify
  • A classic video game
  • A sensor that detected men and catcalled them

I narrowed it down to the radio concept and the game idea. I figured I could 3D print the vintage radio enclosure or cut an actual old radio, and use some of the Chuck Norris code we played with in class; the dial options would be labelled based on mood and then load up a playlist via Spotify or perhaps an on computer xml playlist.

 

The game I came up with was Trump Punch and based on a simplified version of a PUNCHOUT style classic Nintendo game. I liked the topical hook, my research was looking like it was the more feasible option based on my skillset, and I was interested in animating on the web.

I met with Kate on the 3rd day of the experiment and presented both ideas to her. She seemed to like the radio idea best, but based on my enthusiasm and the fact that I could storyboard out all the steps for the game, she suggested I follow that route.

 

img_3518-2

I spent a good deal of time playing with the p5.play library, animating and creating sprites. I gained a lot of ground initially with the simple example interactions but ended up spending hours and hours attempting to complicate and customize the functions.

screen-shot-2017-11-04-at-3-58-16-pm screen-shot-2017-11-04-at-4-07-57-pm

I started working with a creative commons licensed png drawn from a photo of trump and a red glove.

 

Glove & Trump Interaction:

I could get the glove to move up in a punch like fashion by adjusting its y-axis 50 pixels on mouse click.

I easily got the glove to track the mouse coordinates and follow, but I encountered a lot of trouble in creating the actual ‘hit’ of the glove and Trump’s face. At this point .overlap and .collide became confusing and in the end, I had to use overlap to create my collision. Which was very counter-intuitive.

I was able to  rotate or scale Trump’s face when the two PNGs came into contact, but I had a lot of trouble getting it to swap to a reaction PNG in a convincing way in combination with the mouse click and image overlap.

 

Buttons

I couldn’t figure out how to make things happen on button click rather than mouse, but it turned out all I had to do was make the P5 code listen for mouse or button click as in “||” in the code.

I was able to get 1 button working with communication between P5 and Arduino fairly easily.

 

Testing with buttons
Testing with buttons

img_3445
There was a certain point when I couldn’t seem to get more than a weird “tap” instead of a punch and that I started playing around with a Trump Asteroids game with an angry uterus. I really actually like this concept, but it didn’t seem to require the two button input setup that I was already very committed to at that point.
In the end, it was a good exercise and helpful because the examples I looked at worked with calling and animating sprites.

The angry uterus 1
The angry uterus 1
Angry Uterus 2
Angry Uterus 2

 

 

 

Roxanne Henry went over some array stuff that helped me get the second button up and running along with Nick’s example in the experiment 3 pages. This is where I also learned you really do need to use a ground, really.

Syntax problems
Syntax problems

Once all the cod issues were worked out, I put the PNGs in the right order so the glove wouldn’t float behind Trump, I added a left punch glove and a reaction sound effect for when Trump gets hit.

Peripheral Controller:

Initially, I thought I’d use a big red button you could just smash, but I wanted to create an object that I would actually keep on my desk that wouldn’t take up too much space but that would match my aesthetic (I have a white desk with white peripherals.) So in keeping with the vintage video game feel I went with a white and red Nintendo-ish controller design that would enclose the feather. I followed a 6 button arcade enclosure tutorial on Adafruit and modified the design to suit.

screen-shot-2017-11-04-at-1-31-58-pm screen-shot-2017-11-04-at-1-34-34-pm screen-shot-2017-11-04-at-1-35-17-pm

Fusion 360 design
Fusion 360 design
Fusion 360 mockup
Fusion 360 mockup

 

 

 

 

 

3D printing
3D printing
img_3486
img_3487
Disappointing controllercase

But then disaster hit! The red buttons I had purchased were not the right size for my printed design. I had double checked before purchase, asking the saleman if they were 24mm buttons, but they were actually 30mm. A smart person would measured anyway but I didn’t.

I ended up purchasing a box and keeping everything on the breadboard, which was functionally fine, but I really wanted that slick, white, handheld controller that I spent hours and hours on.

The horrible backup box
The horrible backup box

img_3483

Drilling the horrible backup box
Drilling the horrible backup box

 

 

Final Prototype In Action:

Context:

This project was influenced by my interest in socio-political issues and the classic video game “Mike Tysons’s Punchout” I see Trump as a perfect King Hippo style character. I knew I wanted to make something highly graphic, within my skillset, and with some type of reasonable “why” factor or hook.

Moving forward I would like to involve more motion in Trump, some taunting animation and audio, a bell “ding” sound and have the game cued via API. Perhaps when #Trump is trending in the news, the game opens. An interesting idea I had during crit was that maybe social media mentions would literally grow his head and strengthen him as an opponent, he literally feeds on the online attention, just like in real life! #SAD

References/Sources:

https://www.arduino.cc/en/Tutorial/AnalogReadSerial

http://p5js.org

http://jessiereyes.com/gamepro/group-project/

In class Code from Nick Puckett & Kate Hartman

P5.play.js

http://p5play.molleindustria.org/

 

Code Snippets

Coding Train:

Donkey Hotey via Flickr

Adafruit Industries

 

Leave a Reply