Dancing Digits – Madeline Shedd – Eric Parren

Conception and Design

When first presented with the final assignment, we decided to go down the game route. We also wanted to create something that was portable and easy to use, something bust students could easily use when they needed a gaming break. The idea a small version Dance Dance Revolution came from my partner, we both thought it would be a fun game to draw inspiration and we both liked the game’s concept as well. Thus the idea for a small and portable version of the ‘stage’ that was a signature piece of DDR. We knew we wanted to make the stage the only thing a player would need to control the game, so we included the buttons in our design for the board. We also wanted to create a visually stimulating experience not just on the screen, but also on the board itself. So we wanted to have a bright color palette and use lights to make it give it a little extra pizazz. We also looked at online videos of others who had created dance boards with similar ideas to ours, we found that capacitive sensors were the most popular option for the type of controller we wanted to . build. For what would appear on the screen, we wanted something that would be enticing to players and be easy to navigate. To do that, we wanted to have some sort of start and end menu that would provide a pause for players when they weren’t playing. This would also have a leader board where users could see and compare scores, a staple of many arcade games. We could’ve just opted for a game that doesn’t even need the stage, in actuality the game totally could work without a stage. But we thought that would loose the nostalgic feeling we were trying to capture by having the stage in the first place. The stage carries more meaning than just a controller and we really wanted to enhance that.

Fabrication and Production

Before I started coding right away, we outlined what we wanted the display of the game to do. We distilled it down to three main components that were the essentials for the game: looping the arrows movement, scoring,  and timing. These were what had to be done before we worried about add ons like a leaderboard and smaller sound effects when points were received. During user testing, we got a lot of feedback pertaining to the aesthetics of the game. These were implemented in the neon-y theme we decided on as well as the speed of the arrow itself. Many people said it was too slow. The scoring and timing elements weren’t too difficult to figure out. Scoring was based on tracking a point on the arrow and using the dist() to check how close it was to another point at the top of the screen. The timing was also a lot easier than i had anticipated, i just modified the rate at which the y values used to draw the arrow were until it matched the music. But getting the arrow to do this:

was a long process of trial and error that proved to be the most difficult part of the code. Either the arrows would randomly change directions every frame, not loop, or not move at all. After asking several fellows and trying different approaches, I found that this set of code worked just how i wanted it to. The biggest thing I think was the problem in figuring out how to do this part was having an ‘original’ arrow for each direction that was the start for an  iteration of the loop if that direction was chosen. After getting this piece to work, most of the other coding related tasks were able to be finished. We were able to modify the final code accordingly so that the timing and scoring aspects worked with the arrows. Unfortunately due to the amount of time this ‘simple’ part took to figure out, we were unable to fully finish the leaderboard aspect of the game. We also were unable to add multiple songs or levels because just one song proved to be much harder than we had anticipated.

Final Code Processing:

           

Arduino Code:

 

For the stage, we had some problems getting the laser cutting just right for the top piece. We ended up having to cut three times , and even then it still wasn’t perfect but we had to move due to time constraints. For the buttons, we first had tried using capacitive sensors. But with how we had designed the top piece, the sensors weren’t able to pick up a hit very accurately. So we changed the sensors to small buttons that worked better at communicating to processing that an arrow was being pressed. Our plans for the lights were unfortunately never fully finished because we ran into a difficult decision close to presentations. Our two buttons on the board had begun switching on and off at random intervals, so we had to decide to focus on fixing those or the lights. We chose the button route, but even after trying to fix them they refused to work for final presentations. But in the end, the key element of the board, the arrows, worked well and were able to provide the players with the experience we were shooting for.

Conclusions

Overall, I was very satisfied with what my partner and I created. Even though the final result of out project wasn’t completely perfect, I think we were able to accomplish the goals we wanted to accomplish with this project. It is portable, easy-ish to play, and from what users said, fun to play. Apart from the small set backs we faced near the end of the project, I think we were able to create a smaller scale version of DDR that captures the elements of the original game we set out to imitate in Dancing Digits. I think being able to take a game on the go is an ever increasing need for gamers, hence the popularity of the Nintendo switch. I think Dancing Digits is able to apply portability of the switch to a game that is pretty unmovable quite well, even if it looses some of the qualities attributed to DDR. However, our goal was not create a tiny DDR rather something that draws inspiration from it. Dancing Digits partially aligns to my definition of interaction, the user input and the reaction in the game is the element that aligns. I think if we were to add an option for another player or making the game harder if the user is doing really well would better align with my own definition. If I were to make this project again, I would definitely add some element that would make the game harder depending on how well the user is playing. I think that would give the user incentive to continue playing as well as challenge those already mastering the basic level. This version of Dancing Digits I believe was able to accomplish the basic goals we set out to accomplish, even if some of the elements we wanted to include failed. I think the portability element of this project is the most important aspect of the project. Being able to connect to anywhere with anyone is what makes games more fun and versatile.

Final Project Essay by Madeline Shedd

Dancing Digits

For this project, me and my partner wanted to create a fun game that was both entertaining and accessible. We thought it would be fun to create a mini version of Dance Dance Revolution because who doesn’t love DDR. Of course it wouldn’t be an exact replica, we plan to make it our own game that is just as fun as the inspiration. The game would strive to appeal to a nostalgic side to players who love arcades and video games in general to provide a fun portable game that can be played with friends. The life of a student is stressful so injecting a little bit of fun in a new way we hope will give the users a memorable experience.

Fabricating the physical components for this project will probably revolved around creating a “stage” that has a set of buttons that the player would press depending on the prompts displayed on the computer screen. The buttons would be made of a relatively transparent material so lights could shine through and correspond to colors displayed on the screen. This “stage” would also house the wires, Arduino, and breadboard so it looks as compact as possible. The screen would be used to display different colors set to a song and depending on how accurate the player presses the buttons, how much would be added to their score would be effected. The coding for this project I think will prove to be very difficult, but I believe me and my partner will be able to use everything we’ve learned to fullest extent to create this project. Since we focused more on the physical fabrication during the midterm project, i think getting more practice with coding will be very beneficial.

My preparatory research essay helped me narrow down what I wanted to create for this project. After discussing other ideas in the game area with my partner,  she had a light bulb moment and we decided to settle on this idea. This project aligns with my definition of interaction because the user is able to input a form of data and the computer uses that information in several ways before returning a result that prompts the user to continue doing something or change. Since we are basing our project off DDR, I think this version will strive to take the huge console that DDR has and make it more accessible for daily use. I think this project will also  bring a smile to the user face even if it’s not exactly the same as the original, the emotional attachment to classic video games is an important part of this project me and my partner wish to capture as well. There have been handheld games for years, I think bringing a new way of interacting with controllers is the next step in handheld games and this project will delve into that area.

Final Project Preparatory Research and Analysis by Madeline Shedd

Looking back on my definition of interaction from earlier in this course, I believe it to be a little too simplistic and vague almost. Of course interaction pertains to what happens when two individual entities come into contact with one another and produce some sort or reaction or result. I think I didn’t completely understand how interaction is more than just that. I skimmed over the idea that there is a special kind of process and ‘logic’ behind what the result is, and it’s that process that makes something interactive or not. There are things that are more interactive than others, but they’re still interactive at the basic level. Determining whether or not something is interactive or not is also a situational kind of decision, its all about something is used and what kind of information is returned.

One processing project I decided to examine was Attractor 0. The project is fairly simple at first glance, which is one of the things I personally like about it. The program tracks the location of the mouse and modifies the location of certain small points while drawing lines of their paths. I think it creates a soothing feeling while also allowing the user to create a pretty picture. I think this project falls on the lesser interactive side since there’s only one thing the user can do to the project, but the output prompts the user to continue using it which is what makes it pretty interactive. The incentive the keep using it is important and I hope to include that same motivation in my final project. 

While The Mario Mushroom Cube is interactive, it doesn’t align with what I want to do in my final project. The process is more than just a yes or no result, but there would be a loss of seamlessness in the project when you’d go back to reset it. That pause the user would have to take to reuse the project would break to connection and lessen the impact the project has on the user. I want to lessen this disconnect as much as possible so that users are able to immerse themselves as much as possible. If a user is constantly thinking about what has to be done to make the project work, then an element of truly interacting with the project would kinda be lost.

After looking back and exploring new projects, my definition of interaction is based in the how something responds to given input. If the output doesn’t come from a yes or no logic or elicits a reaction of some sorts, it cant be really interactive. I will acknowledge the fact that just about anything can be debated on the side of interactive or not, but that is a due to personal definition differences. The take away in defining interaction is that whether or not something is or isn’t really isn’t the problem, how interactive something is qualitative. I think the Attractor 0 is entertaining and interactive, while someone else might not find it as nice as me. But the project is taking the input and is responding to it constantly unlike the Mario block that only can execute once before needing to be reset.

Recitation 6: Processing by Madeline Shedd

Several Circles by Vasily Kandinsky

When picking a picture, I didn’t want to try something too complicated and overwhelm myself while using a new program. So I thought this painting would be good enough and I liked how it looked like a solar system. I planned to use Processing to try and recreate the painting as best I could. In hindsight, I do think I chose something that was a little too simple but I am pleased with how it turned out. I think it’s a nice digital rendition of the painting. There were some aspects of it I wasn’t able to capture, such as the white “glow” around the big blue circle. Overall I think Processing is a pretty good way of designing pieces of art, but due to my lack of experience and familiarity with the program I feel a little restricted. But I think once I learn Processing will become a better option to create regular art and interactive art.

My Design 

Code:

size(600,600);
background(#2E2B2B);

fill(#062F6F);
stroke(254);
strokeWeight(2);
ellipse(250,200,250,250);
stroke(1);
strokeWeight(0);
fill(#0A0A0A);
ellipse(222,180,180,180);
fill(#EAA6DF,120);
ellipse(327,120,90,90);
fill(#FAE592);
ellipse(450,95,50,50);
fill(#CB2D2D);
ellipse(550,70,20,20);
fill(#E58A13);
ellipse(515,125,37,37);
fill(#7DBFB3,120);
ellipse(420,200,130,130);
fill(#1F1F1F);
ellipse(420,200,30,30);
fill(#FFE3FC,120);
ellipse(475,470,160,160);
fill(#182771);
stroke(200);
strokeWeight(1);
ellipse(530,350,20,20);
fill(#050505);
ellipse(498,405,10,10);
noStroke();
fill(#B21724);
ellipse(482,402,15,15);
fill(#B3E3D3,120);
ellipse(300,250,70,70);
fill(#DB9E3C,120);
ellipse(320,300,90,90);
fill(#E8B869,200);
ellipse(270,300,40,40);
fill(#7BDDF0,80);
ellipse(247,258,25,25);
fill(#0F5298,150);
ellipse(310,380,80,80);
fill(#F7BBF3,200);
ellipse(345,330,35,35);
fill(#212121);
ellipse(330,335,10,10);
fill(#EDC869,180);
ellipse(387,430,40,40);
fill(#63C6D6,180);
stroke(#F7C084);
strokeWeight(2);
ellipse(425,450,40,40);
noStroke();
fill(#D8AB4F,200);
ellipse(560,470,20,20);
fill(#D8AB4F);
ellipse(450,560,17,17);
fill(#E5C37F,210);
ellipse(45,50,30,30);
fill(#F5ABB9,200);
ellipse(60,120,50,50);
fill(#F0A544);
ellipse(270,490,20,20);
fill(#F0C5FA,120);
ellipse(215,320,60,60);
fill(#030303);
ellipse(205,350,10,10);
fill(#F0C5FA,120);
ellipse(180,292,10,10);
fill(#BC2E30);
stroke(#0D0C0C);
strokeWeight(2);
ellipse(165,300,10,10);
noStroke();
fill(#B42A2C);
ellipse(110,370,50,50);
fill(#F0E052,180);
ellipse(85,365,50,50);
fill(#F0AED1,80);
ellipse(136,370,51,51);
fill(#E07407,180);
ellipse(150,335,50,50);
fill(#F0C65C,180);
ellipse(130,300,50,50);
fill(#F7B1E0,120);
stroke(#0A0A0A);
ellipse(60,290,60,60);
noStroke();
fill(#0A0A0A);
ellipse(70,280,20,20);
stroke(#E3AE59);
strokeWeight(1);
ellipse(135,250,10,10);
stroke(#B4B4B4);
ellipse(70,495,10,10);
noStroke();
fill(#F2A6B9,200);
ellipse(75,462,12,12);
fill(#153EA2,200);
ellipse(100,480,25,25);

Midterm Documentation: “Chill-Out”, Madeline Shedd, Eric Parren

Context and Significance

In my group project, our device was entirely dependent on user input and could not function without it. From the projects, like the Pulse Room, we discussed and conversation amongst my classmates, my definition of interaction relies on an input and output system that uses more logic than a simple yes or no answer. Interaction requires a step farther, and I believe our project “Chill-Out” meets that criteria. Our project does have a yes or no part of it, but it’s just a part of the system. The entire device constantly checks a variable that is provided by the user, that variable is inspected and if it meets certain parameters it then needs more user input for the “final” goal to be reached. The system of our device is dependent on the input but also takes this input and does something with it. The concept of wearable technology is already out there, both me and my partner knew this from the start. We wanted to create our own version of this idea, and it manifested in the idea of creating something for athletic purposes. There is smart athletic wear already in circulation as well, but I think our design and function would be more appealing to wider general audience and be more affordable.

Concept and Design

When brainstorming idea for our project, both me and my partner wanted to make something that didn’t have to do with a box. This focus on literally thinking outside the box I think helped us think about other ways were could use the materials available to us. Shina was the one to come up with the idea of athletic wear, and after discussion and more brainstorming we developed the headband idea. We decided this would be a good method to get the temperature sensor in the right place while people use the device all while looking “fashionable”. Since we were unable to use wireless sensors, we added the arm band to hold all the computer stuff and so that the wires wound’t be too long and get easily tangled. So we wanted to build off that stylistic choice to implement the fan, so we based it off other headbands that have long strands as well. 

Fabrication and Production

The first step we took in fabrication was making a basic circuit that we would later expand upon and use longer wires in the final design. We looked through several online tutorials and schematics to help us design the circuit. We based our design off these schematics:

https://create.arduino.cc/projecthub/Jasleen1429/temperature-sensor-to-control-servo-motor-b770f9

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

The coding for button proved to be harder than I was expecting. We didn’t want the fan to turn on when the user was just pressing the button, we thought this wouldn’t be good to have to keep holding down the button when active. So we wanted to make it so that when you pressed the button once it would turn on and then when you pressed it again it would turn off. I tried several ways I thought would work before I turned to the internet for help. I ended up using the code from the toggle switch example from this website. It was extremely helpful in helping me understand how the logic behind the “toggle switch” and why my previous attempts weren’t working. Our code for this circuit ended up as:

int pushButton = 2;
// give a name to digital pin 2, which has a pushbutton attached
int motorControl = 9;
// the transistor which controls the motor will be attached to digital pin 9
int tempPin = A0;
// sets the pin for the temp sensor
int ledPin = 13;

boolean oldSwitchState = LOW;
boolean newSwitchState1 = LOW;
boolean newSwitchState2 = LOW;
boolean newSwitchState3 = LOW;

boolean LEDstatus = LOW;

void setup() {
pinMode(pushButton, INPUT);
// make the pushbutton’s pin an input
pinMode(motorControl, OUTPUT);
// make the transistor’s pin an output
pinMode(tempPin, INPUT);
//make the temp sensor an input
//pinMode(ledPin, OUTPUT);

digitalWrite(motorControl, 0);

Serial.begin(9600);

}
void loop() {
int temp = analogRead(tempPin);

newSwitchState1 = digitalRead(pushButton);
delay(1);
newSwitchState2 = digitalRead(pushButton);
delay(1);
newSwitchState3 = digitalRead(pushButton);

if(temp >= 45){
digitalWrite(ledPin, HIGH);
if (( newSwitchState1==newSwitchState2) && (newSwitchState1==newSwitchState3) )
{
if ( newSwitchState1 != oldSwitchState )
{
if ( newSwitchState1 == HIGH )
{
analogWrite(motorControl, 255);
LEDstatus = HIGH;
}
else
{
analogWrite(motorControl, 0);
LEDstatus = LOW;
}
}
}
}
oldSwitchState = newSwitchState1;
}

We also decided to 3D print a buckle for the armband to make it adjustable for all users. The buckle design we used was from this file on Thingverse. But the 3D printers were not very kind to us. We ran into issues dealing with the nozzle detection and the precision of the printing across several printers. In total, we had to print the female side of the buckle around six times before we got a print we were satisfied with. Even this print wasn’t as good as we originally wanted but we didn’t really have another option that would fit into our limited time.

Going back to the circuit, after getting it to work with the code we started on soldering together parts, such as the fan, temperature sensor, and button, with longer wires.  Once we replaced most of the jumper cables with longer wires, we then tested the circuit. Unfortunately, our good luck had ran out and our problems had just begun.

We spent a considerable amount of time trouble shooting the circuit. Checking all connects, reconnecting wires, and replacing “faulty” buttons, diodes, and transistors. We thought we were finally in the clear after we replaced one our batteries because we found it was actually low on power. Replacing this battery allowed the fan to work, but the button was still not working. Not wanting to solder another button, I wanted to make sure the button was actually at fault. Turns out there was nothing wrong with our button so it had to be something else. Getting increasingly frustrated, I asked for guidance in what we could possibly overlooking. With literally an hour till presentation time and unable to find a concrete explanation to what the problem was, we opted for taking everything out of the Arduino and breadboard and starting from scratch. The new circuit was much simpler than our original but it worked almost the same. The code was also  modified and simplified to match the new circuit. These changes finally made the device work with the new wires, and so we placed all the bulky pieces in the sleeve and put together our device presented in class.

Schematic of Final Circuit

Code:

int pushButton = 2;
// give a name to digital pin 2, which has a pushbutton attached
int motorControl = 9;
// the transistor which controls the motor will be attached to digital pin 9
int tempPin = A0;
// sets the pin for the temp sensor

void setup() {
pinMode(pushButton, INPUT);
// make the pushbutton’s pin an input
pinMode(motorControl, OUTPUT);
// make the transistor’s pin an output
pinMode(tempPin, INPUT);
//make the temp sensor an input

}
void loop() {
int temp = analogRead(tempPin);
if(temp >= 40){
digitalWrite(ledPin, HIGH);
if(digitalRead(pushButton) == HIGH) {
analogWrite(motorControl, 255);
} else {
analogWrite(motorControl, 0);
digitalWrite(ledPin, LOW);
}
}
}

Conclusion

In the end, our device interacted with its users in the way we intended but at a less complicated manner we had originally thought of. The biggest changes were in the “background” in relation to the user, so that the project would work just as well for the user. I do think the interaction of the device could be increased, maybe next time we could add another component to the device to further the need of user input in to system. Like the speed of the fan could be higher or lower depending on the users temperature. If I had more time, I would definitely play with the idea if users would truly prefer the armband or just having a hat thing. The wires can be a little annoying, even if they were shorter than they were in early iterations of the project. I’d also change the fabric used in the band and headband to something more breathable to coincide with athletic aesthetics and utilization.With the abundance of problems we ran into, I’ve learned that getting started as soon as possible and getting it done as soon as you can is key. I’ve also learned that getting as many opinions and views on the best way to do something is crucial, I’m also less intimidated by the thought of asking for help when I’m stuck now as well. Overall, I think this project serves more than just a simple fan and temperature sensor. It one shows how a simple piece of regular clothing, like a sweatband, can be expanded upon and used to further it’s functionality. But it also embodies a small, but still relevant start in the world of wearable technology.