Module 3 Formstorming

Weekly Activities

Lucy Warren

Project 3

Module 3

For these two explorations I wanted to incorperate some sort of dance theme or effect. So for code I looked at things like colour, possible dance floors, translations of shapes, 3D shapes and spaces, etc.
For the physical prototypes I was looking for, ways to hide my wires, orientation of buttons, and recognizable physical features.

Activity 1

This code is from sketch1, I wanted to figure out the basics in movement with the arrow keys. I forgot about the push(); and pop(); function so the circles started stacking on each other.

This is the same code from sketch 1, I adjusted the distance that each dot would be drawn. It made a really cool dotted pattern that I thought looked like a dance floor.

This is the dance floor in question, I think implementing this into my final design might be cool. Adding some sort of automatic function that changes the dot's colours would be pretty cool for a dance floor or for a potential game.

This is from sketch5, I did something simple and just messed with the colours. To be honest I wasn't really interested in messing with the code too much for this one. The main things I manipulated was just the stroke and colour.

This is from sketch2, my goal was to replace the cyan circle with an image. I want to potentially make a dance related thing for my final and messing around with images was something I wanted to test. This is my image before I manipulated the size.

This is the image after I manipulated the size. Potentially what I want to do is attach an image to each arrow key for some sort of dance game.

I tried putting on more that one image for my dog. I found that I couldn't really manipulate it very well. I also added a rainbow thing to my cursor because I wanted to play around with tutorials from P5JS.

This is from sketch2, instead of replacing the circle with an image I replaced it with a 3D model. My goal was to move the 3D model around like I did with the 2D image. I had significant trouble trying to figure out how to move the model. I have a feeling by changing the canvas to WEBGL, the movement doesnt work to same. I still have to figure out how to move the model.

This is from sketch 3, I really liked the camera angles from this sketch in particular. In this gif, I tried to change the colours of the tile to more than one colour. But, unfortunately only one colour showed up.

I took a break from manipulating the plane and decided to mess with the torus. I replaced the torus with an ellipsoid and it made this funny shape. I personally dont think i'll use that model for my final but it was funny to look at.

This is from sketch 4, I replaced the torus with my bug model. I found the camera was super hard to use, in future I want to change it so it's easier to manipulate.

I wanted to create a final with more than one 3D model. I tested out two bug models, a torus, a box, and a cone. Overall it took some time to get them all lined up but it went smoothly. I think my next goal would be to get them off their side.

For movement I messed around with just the bug models first. They were on the same setting as the template. I mainly just wanted to see if they would work at the same time.

I had lots of fun making the models spin. I think for my final I would like them to spin back and fourth.

This is from sketch6, I replaced the 2D shape with my bug 3D model. Noticeably the colour function was missing and was replaced with shades.

One thing I want to add on to ths code is the camera code (in the last photo) I think by combining movement from the models and the camera would create a weird effect.

I want to mesh camera movement and model movement together.

Activity 2

For this initial idea, I wanted to wire up a crochet monkey I had made. My goal was to create some sort of operation type of game with the monkey. I scrapped this idea because I didn't want to destroy my monkey.

This sketch was based off of those old little block holders for children. It's a sound board where the user has to push blocks through to the other side. When the user passes the blocks through, a sound plays.

This was an idea for a Connect 4 type of game. Essentially the user is playing Connect 4 but with an extra control panel.

This idea was for a paparazzi type of installment. The user is the paparazzi and their goal is to take pictures of a celebrity. I really liked this idea, especially with the possibility of building a camera.

This was the idea I was super inspired to pursue. It's just a giant game pad. I originally wanted to do something with twister but I thought having a small amount of buttons wouth be easier to code.

These were the materials I used for my miniature prototypes: Hot glue, cardboard pieces, tape, brown paper bags, copper tape, and a box cutter.

This was my first use of the makey makey with the tiny wires instead of the bigger alligator clips.

This was my first paper prototype regarding the camera sketch. It was just a flat piece of paper bag with some copper tape for some interactability.

This is the paper prototype hooked up to the makey makey. I added little slits for the copper tape so it was easier to use the prototype. The idea behind it is that the prototype goes on top of the makey makey to simulate a moveable camera.

This is the prototype in action. By interacting with the arrow keys, its supposed to simulate movement of the camera in P5. The user moves the camera how they want to, then they take a picture.

I took the camera prototype a step further and created a cardboard prototype. My goal for this was just to see what a proper working prototype would look like.

This is the front of the camera prototype. I put in a lense with some paper bag just for orientation purposes. Also so it looks like a camera.

This is the back of the camera. There are four buttons for movement of the camera, then there is supposed to be a fifth one for taking the picture.

This is the inside look at the camera. It splits open for the makey makey to be placed inside and wired up. In theory the box would be big enough to support both the bread board and the makey makey.

This is the paper bag prototype of a fold out dance floor. All I did was put on some copper tape on the edges.

This is the back of the paper prototype. I put a little slit in the middle for the copper tape to fit in.

This is the hookup for makey makey and the dance floor. The hook up was pretty easy to do all I was testing was how well the prototype hooked up. I was looking at the placement of the clips and seeing if it works.

This was the test for the dance floor. It worked pretty well everything responded correctly. At this point I was unsure about the folding aspect of the pad.

I made a cardboard prototype with a static dancefloor. These were the pieces I cut out.

On the back of the dance floor I punched holes in the bottom so I can filter through my wires for the dance floor.

These are the buttons hooked up on the dancefloor. I cut out a piece of cardboard, hooked some wire around, then wrapped the button in tin foil so it would be easier for the user to press the buttons.

This is the bottom of the dance floor, The wires are poking out from the bottom.

I liked this dancefloor setup more than the paper prototype. I liked the static buttons much more they, felt more reliable and sturdier.

This is a closer look at the wires one of my goals for the project is to try and hide the wires as best as I can. This was a good test to do to see how they behave.

I thought this test was super successful. Main thing I was looking for was how responsive were the buttons as well as looking at how the stand for the pad worked under preassure.

Project 3

Final Project 3: Bee Dancing Arcade

For my final design, I made an interactive arcade dancefloor where to user is a scout bee. The scout bee's job is to inform the workers bees where sources of pollen are (referred to as a "Waggle Dance"). The goal of the user is to dance to the worker bees and inform them where the pollen is.

Powered by w3.css