Module 3 Formstorming

Emily Revell

Project 3

Module 3

This week we were given the task to look at different code and ways we could interact with said code using a micro controller like a Makey Makey or arduinos. In this case I knew that I wanted to use the Makey Makey I received during my first year as I was familiar with how to use it as well as how I could build around this. In the end, I decided that I would want to create a controller for a game as video games could be considered a living system that people can interact with.

Activity 1

For this first sketch I was just attempting to add a new shape and see its reaction when clicking the buttons. The colours on the circle would seem randomized or even follow the colour of the button previously pressed.

For this sektch I experimented to make it so depending on what button you pressed it would be either a rectangle or and circle.

For this sketch I attempted to add a triangle as it utilizes a different amount of mapped points in comparison to the rectangle and circle. In the end I could not figure out how to move it closer to the middle similar to the other shapes.

Lastly I found a reference on an archived p5js website on how to make a star. I then added this to the code I have been experiementing on to make it so that when a different button is presseed it alternates between a star, circle, and square.

For this sketch I changed the colour of the background and replaced the ellipse with the star code I found from the previous sketches.

For this sketch I replaced the elipse with a png of Nintendo's Mario.

This is an image of the code for the mario png where I learned how to load an image in P5js from a Code Train video.

For this sketch I changed the shape from a torus to a cone as well as changed the colour of the background.

For this sketch I changed the values of the camera movement function to make it feel more intuitive.

For this code I once again changed the torus to a cone and then changed the values of the camera movement function. In this case, I made the values smaller to ensure it felt fast while remaining smooth and not twitchy.

For this sketch I just changed the values of the octive scale to see what it would do. Unfortunatley, due to it utilizing the microphone you cannot hear the change in octive.

This is an image of the code for the previous sketch.

For this sketch I tried to change the values to make it so the colour would shift slightly faster.

This is a screen recording of project 2 as I could modify the code to have the user interact with an outside source rather than just their voice (ex- a remote).

This is a screen recording of a old modeling and materials project where in this case I could create a physical object that could help the user review makeup looks without having to put it on.

This is a screen recording of a 3d model I created last semester. In this project I could create some sort of 3d AR experience where the user utilizes a remote to interact with the digital environment.

This is a starting point of a game that could be played with an external remote. I found this when trying to find games I could complete in the amount of time that was left. This is a link to the p5js sketch https://editor.p5js.org/BarneyCodes/sketches/DHuoT1QDE.

This is another starting point to a connect four game that could be controlled with external controllers. I also found this when trying to find games to code. This is a link to the p5js sketch https://editor.p5js.org/simontiger/sketches/TISsTqZ8D.

This is the code from a code train video where Daniel attempts to make a game similar to the offline Google dinosaur game. This would be similar to the other examples I found where an external controller would be used to play the game. This is a link to the P5js sketch https://editor.p5js.org/codingtrain/sketches/aMNxuhdO6

This is the reference code I found on the p5js website for the classice retro game Pong. This is a link to the page on their website https://p5js.org/examples/games-ping-pong/.

Activity 2

This week we were given the task to come up with ideas and physical prototypes that would interact with our P5js sketches. I mainly sketched my initial ideas before deciding which ones I wanted to physically prototype. Additionally, due to time constraints I really only focused on making a physical prototype that would be used for the design of my final product.

This is a sketch of a possible idea of a glove that plays music notes when the thumb touches the other four fingers.

This is a sketch that shows a board that switches the makeup look on your face. This is connected to the code previously mentioned in acitvity 1.

This is a sketch of four separate buttons that would control the camera movement through a 3d modeled environment.

This is a sketch that shows a cardboard keycap and how it may possibly work.

This is the cardboard cut out of the nets for the keycap prototype.

This is a picture of a top view of the shell that would hold the spring and keycap. This was also my first experiement trying to see if the conductive fabric would work.

This is an image of all the key cap parts together, the shell, the spring and the keycap itself.

This is an image of the working prototype. Unfortunately my original idea was not working possibly due to not enough preassure or contact with my body. In the end I added felt to the top of the keycap and glued conductive thread to the top of the keycap.

This is another angle of the inside of the keycap prototype.

This is a GIF of the prototype in action. If I were to further develop the idea I would find a way to balance the weight of the keycap and how tall I should make the spring.

This is a sketch that explains possible ways to create a button prototype made out of felt and conductive fabric.

This is another sketch of an alternative way to create the same button made out of felt and conductive fabric.

This is a picture of the top/outside of the button prototype.

This is a picture of the bottom/inside of the button prototype.

This is a GIF that shows the button prototype in action.

This is a sketch of an initial idea of how a video game-esque controller may look like.

This was one of the first sketches I made when further developing ways I could interact with the Pong code.

These are the first measurements for my first prototype of my final design.

These are the final measurements I decided on before constructing my final design.

This is a close up image of my first prototype for my joystick. This image in particular shows how the circuit would close by having the copper tape touch the aligator clips and the rim of the opening.

This is an image of the first prototype where it is more apparent on how it would be connected to the Makey Makey.

This is an image of the interal wiring/workings of my first prototype for my joystick.

This is a final shot of my first carboard prototype. Unfortunatley, I forgot to film a demo of it working but it was shown in class to work.

This is an image of my temprorary final stick of my joystick. At first I thought it was the glue ruining my connection and not having separate actions but then I realized I made a rookie mistake. The circuit was closed in three different spots the top, near the bottom, and the rim of the opening.

This is an image of all the parts for my final button that was used in the final design. It was inspired by my earlier prototype but with a circle to fit visual needs.

Project 3

Final Project 3 Design

P5 Two-Player Pong Code

For my final interactive code I created a fun, challenging and faithful two-player recreation of the classic arcade game Pong. For users to interact with this code the user must utilize a retro cardboard joystick that is connected to a micro controller (Makey Makey) which in turn moves their player in game. In general, video games can be considered interactive living systems as the controller you use acts as an appendge and access to unlimited virtual worlds. In this case, I decided to pick Pong as it is considered one of the first commercially available video games. In the end Pong helped pioneer computer programming and introduced video games as a new hobby.

Click here to see it working on my P5js sketch

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

Cardboard Joystick

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit