Ricky's Documentation Blog

Midterm

Light of Civilization

by Leave a Comment

Part 1

Ruiqi Zhuang: Light of Civilization–Create Your City and Light it up!

Elevator Pitch:

Light of civilization enables you to simply customize a city by drawing the main roads of it and light it up with a click on the key “L”. It aims at mimicking the light effect of a city at night and inform people how great and beautiful human civilization is. 

Abstract:

The project is inspired by a trip on the plane at night, when I was sitting next to the window an look out of it, I was really impressed by the beautiful scenery of the big cities lighten up. At that time, I was totally amazed as how great human civilization is: we totally changed the planet, making night no longer dark, and I wanted to convey this kind of feeling of amazed and surprised to my audience, that’s why I created the project. The users can draw some lines on the canvas, which will act as the main roads of the city, which can also be interpreted as city planning and designing. After they finish designing and press the key, the city gradually light up, and finally create a great picture with the combination of lines and dots, just like a myriad twinkling lights of a city.Upon looking at these, the audience may feel surprised and “wow” at first, and then be amazed at the final picture they “created”. I hope people will know how much great it is to make simple villages into metropolitans, now it’s only some simple manipulation, but it’s actually the work of hundreds of generations of people, we should really appreciate and cherish the beauty nowadays.

 

Part 2

Design and Composition:

When I read the prompt for the first time, I had the idea of drawing the city at night, because that’s what can be presented with particles and lines while considered as beautiful and meaningful. My original idea is to randomly generate lines and dots, but that seems to be lack of interaction, so one way of improvement is to let users decide several dots, and I generate those lines around the dots, but the same, the interaction is not enough: the decision users made didn’t really pose a strong effect on the final work. With these concerns, I finally made the decision of using lines to demonstrate the main road of the city, and generate the rest of the road and the light. Under that circumstance, the users will feel like they are actually drawing, and what they have drawn will bring them a surprise by being converted into some beautiful light effects.

While making the project, at first, I generated horizontal and vertical straight lines like this, which does worked, but not satisfying.

I added some lines that are oblique and make them connect with the vertical or horizontal lines, so that there could be more changes to the lines while not being chaotic. Like this:

Now that the roads resembles the roads in a city, the only problem is the color and the density of light. I did a lot of research of color, including asking Chat GPT, and found the most appropriate value. For the density of light, I tried a lot of values and the range it will generate before make my decision. I tried to let the light somehow blink, but since they are all randomly generated, so its control single ones, meanwhile, letting every light blink will ruin the feeling of looking at a city, so I abandoned this.

Also, I was thinking adding a prototype function, by pressing “p”, one can see the extra generated road in black on the white canvas, but during user testing, Sam said it will ruin the feeling of surprise, which I agree, so I didn’t put this into effect in the final version, but the code was still there, I use “/*”  and “*/” to ignore that.

Then the final version is clear, the users draw lines on the canvas, after drawing, they press the key “L” to generate the city, they can also use the key “A” to add more lights to the city.

Besides, when making this, I developed a follow up project with similar visual effects.They look beautiful and can be further developed. The code of this is: https://editor.p5js.org/zzrrqqq/sketches/B3iBGp891

 

Technical:

The whole coding process went smooth. I first wrote the code of drawing on the canvas and convert it into a different color gradually upon pressing a key, which is the most difficult and important part of my project. I encountered a lot of problems with this including being unable to store the line drawn, failed to change the color of each one. After studying, I found that I can store the value of mouseX, mouseY, pmouseX, pmouseY into one class of an array, so that it can show the line drawn by the user under one case, while changing the color and implementing other changes when it was in another case. For gradually lit up, I used the original function of Draw(){}, which can work repeatedly. I Created a universal variable, let it equals to itself plus one every time, and function the corresponding element in the array. Fortunately, these approaches all worked. After addressing this main problem, the rest of the work is more about polishing and decorate it, together with making it more interactive.

As was addressed before, I changed the mode of the additional lines were generated from generating horizontal and vertical ones to a more complex mode. For this part, I added a random value “this.r” in the class, different values of “this.r” indicates different ways of the generating lines. Working with the “if”code, I managed to let every point of the main road randomly choose a way of generating additional lines.

What I didn’t manage to achieve is to let some of the light to blink so that the whole picture look more like a city’s light. The reason for this is that the lights are totally generated in the class, so I can’t control individual ones, besides, the code of generating lights only function once at a time, so it’s impossible to change the color or the blend value from time to time.

Since now every move is actually in a single class in my code, If I have the chance to do the whole thing over again, I will try to create more objects, and put different modes of changing into different classes, so that I can get better control to every move. With that move, I can have the chance to change the colors of the roads and of course let the lights blink.Also, I can reduce the number of the lights, for now I am only able to generate more lights at random places.

 

Reflection and Future Developement

The whole process went quite well, it mostly presented what I wanted to present, what went well is the coding process and the interaction, I didn’t encounter any problem that is too hard to solve, which means I can stick to my idea and improve it. I solved most of the coding problems myself, and with professor Moon’s help, I managed to find a way of translating the color of the line the users have drawn. Also, the interaction did provided the feeling I want: a surprise change and the gradually lighten up city. 

What still needs to be improved is how the final picture actually resembles the image of a city, although it can be considered as an abstract version of the city at night, it maybe still not that clear. When doing the peer review, Benson said he was quite confused, I think that’s maybe because the light are not blinking and they should be in different shape and color, also the road are more complex, there maybe overpass or other more complex structures. All in all, there should be more specific details to imply that it is a city.

Other suggestions I received during peer review includes change the color of the roads, add more red to it to make it more like the color of road light; add an instruction so that users know what they can do; let the light blink; add the function of editing again. I addressed the first two, failed to let the lights blink, and for the function of editing, my opinion is that its really hard to totally change the overview of the city, so it’s not suitable to enlarge the city after one had already generated one, that is against my initial purpose how great it is to create a big city like this. 

For suggestion from professor Leon(hope I put down the right name), I really appreciate them, especially that instead of pressing the key “L”, the picture should generate automatically, for example, after there is no manipulation for five seconds, this will enhance the feeling of miracle and surprise. I’m with most of Sonny’s suggestions, for that of adding the instruction of “Press ‘A’ to add more light” on the completed canvas, I think that’s not the best way, because that will ruin the beauty of the picture. One way to do this is to follow Anya’s way of showing instruction: when pressing a key the instruction appears and with another press it will disappear.

Besides skills of coding with objects, I also learnt some other things during designing. One of the important one is always think in the user’s shoes, as I said before, I planned to add a prototype function to it, but actually that’s just a good way of adding interaction for me, who is more than familiar with the project, actually that will ruin user’s feeling of surprise. Another thing I learnt is always turn to others for feedback, since I made the project I will always think it’s a good one and may ignore those that are not perfect with it. So I actually ask my parents and my friends who don’t know anything about p5 and my project to judge it, which helped me find a lot of problems. 

Overall, I think my project the civilization is a success, I did learnt a lot during designing and coding

 

 

 

 

Self Leveling Maze – Ruiqi Zhuang- Professor Gottfried Haider

by Leave a Comment

Self Leveling Maze

1. Context and significance

After the  performance of “Crime Detecting Glass” and observing interactive artifacts of other groups, I had some new understanding of Interaction, which is, an interactive thing should apply feedback according to the user instead of just like a machine doing the same thing repeatedly. So, this time the maze we made follows this rule: it will send different feedback according to the user’s performance, that shows interaction. I believe the invention is for every maze lover, as long as we create more complex maze, he can play the maze by tilting the plate,  know his level according to the time he used in the first part and explore the maze that fits his level in the second part. Also, he can try to explore some surprise scenes, which make the whole device more interactive. It is special because it make a physical maze a changing one, which is much more interesting than the ones that already exist. which are totally fixed. 

2.Conception and design

As is mentioned in part one, interaction involves giving feedback according to the user’s performance, therefore, we record the time the player takes to complete the first maze and send feedback through servos to direct them to different mazes of the second part. Also, the only factor that will influence the feedback is the time the player used to tilt the plate and get to the check point, that is to say, it’s all about the user, we, as authors, only design the way of interaction. Also, the whole process involves seeing, feeling and hearing, together with the users controlling it by tilting their body or using hands, with different dimensions of information exchange, the artifact is much more interactive.

We used the cardboard as the main material of the maze, and marbles as the representative of the player to solve the maze. The following is the illustration of the marble we used.

Actually, cardboard is not the most satisfying material for mazes, because they are a bit fragile and ugly. Although  actually it isn’t, cardboard will make the people think of rough workmanship when looking at the maze. However, it is the most suitable for us as an Arduino Creation, in their book <Getting Started with Arduino : The Open Source Electronics Prototyping Platform>, Massimo Banzi and Michael Shilo propose that we should use the simplest and cheapest way to prototype, and I believe card board can fulfill this requirement: they are easy to get, they are cheap, and it’s not hard to cut the and stick them together to create something.  Another choice is plastic, which is actually the material used to make maze commodities, however, it’s hard for us to get access to making plastic prototypes and there’s no need to be that “luxury”. Also, it’s not really environmental-friendly comparing to cardboard. That’s why we abandoned plastic and choose the more economic and efficient way. 

Marbles also adopt the same principle. They are beautiful and cheap, Leon has a collection of them. Also, they serve quite well as the “adventurer” in the maze game. So, they become our first choice without questioning. 

3.Fabrication and Production

The fabrication of the Maze basically consists of three parts: Using cardboard to create the maze; type in the  code and design the circuit for the whole process; and put everything together and complete it. Leon is in charge of the first part, I did the second, and together we completed the third part. 

For Leon’s part, I will make a brief introduction: He designed the whole maze, the following is the sketch. Plus, he decided nearly all of the statistics we used.

He cut the cardboard and stuck them together, making it the whole Maze.

My part is the circuit and the code. For the circuit, I divided it into two parts: Input and output.

The input part consists of two light sensors, which was connected to A0 and A1, they are used to decide whether the ball was at the check point or the end. However, I do encounter some difficulties, the sensorValue of them was only 0 and 1 at first, and is not stable, that is to say, sometimes even it isn’t dark the sensorValue maybe 0 at some point, which makes it impossible to define under what situation the ball reaches the checkpoints. With professor Gottfried’s help, I changed the resistor used to distribute the voltage and added a few line of codes to test the sensorValue(I used the’//’ to keep them in the code while making them invalid) now the sensorValue is around 50 when it’s dark and more than 100 when it’s bright, which is effective. 

The output part used two servos, the first one serves as a “moveable wall” in the maze, it directs the ball to the decided route, and the second servo serves as the “Gate” of the surprising route, it will be open when some special requests are fulfilled. The servos are not working at first, with Professor Gottfried’s reminder, I forgot the “delay” line in the code, which is essential for the servos moving. The reason why we use two servos instead of one to direct is that the maximum angle that a servo can reach is 180, which means one servo can’t direct the ball to three different lanes according to the design of the maze (Please refer to the sketch and the photo of the maze above). Therefore, the second servo is needed. The following is the circuit

Then it’s the coding part. I used 5 States to accomplish our goal. State1 is for time counting and starting. State2,3 and 4 are used to adapt the servo to different situations, they will all lead to State 5. State5 acts as the ending and conclusion, and it will lead to State1 so that we can start the second try.

The following is our final code:

#include <Servo.h> 

Servo myservo;
Servo yourservo;
int sensorValue1;
int sensorValue2;
int state=1;


void setup() {

  Serial.begin(9600);
  myservo.attach(9);
  yourservo.attach(8);
  Serial.println("Game starts, LET'S GO!!!!");
  
}
void loop() {
  if (state==1){
    state1();
  } else if (state==2){
    state2();
  } else if (state==3){
    state3();
  } else if (state==4){
    state4();
  } else if (state==5){
    state5();
  }
  

}

void state1() {
  int sensorValue1= analogRead(A0);

  //Serial.println(sensorValue1);
  myservo.write(120);
  yourservo.write(60);
  delay (500);
  if (sensorValue1<70){
    
    if (millis()<8000){ state=2; } else if (millis()>8000 && millis()<9000){ state=3; } else if (millis()>9000){
      state=4;
    }
  }
}

void state2() {
  Serial.print("First round finished, you spent ");
  Serial.print(millis()/1000.0);
  Serial.println("s, Go to Level 1") ; 
  myservo.write (0);
  delay(1000);
  //yourservo.write(170);
  delay(1000);
  state=5;
}
void state3() {
  Serial.println("Surprise! You've triggered a bonus scene, just go all the way to the end");
  myservo.write (30);
  delay(500);
  yourservo.write(170);
  delay(1000);
  state=5;
}
void state4() {
  Serial.print("First round finished, you spent ");
  Serial.print(millis()/1000.0);
  Serial.println("s, Go to Level 2") ; 
  myservo.write (180);
  delay(1000);
  state=5;
}
void state5() {
  int sensorValue2= analogRead(A1);
  //Serial.println(sensorValue2);
  if (sensorValue2<65) {
    Serial.print("Yeah, you've finished, you spent ");
    Serial.print(millis()/1000.0);
    Serial.println("s") ;   
    //Serial.println(sensorValue2);
    tone(10,440);
    delay(1000);
    noTone(10);   
    state=1;
  }
} 

The lines that have “//” in front of them are used for testing and experiments

I tested the code and the circuit, they worked quite well. The following code shows the effective time count. 

The following video shows the successful processing of the whole system (the light sensors are still on the breadboard when testing)

Together, We completed the third part. We built two boxes to contain the servos. They are as follows.

We created two small holes on the maze where the light sensors rest below them, so that the balls can stop there and occlude the light to trigger the changing process.

 

Then we did some experiments. Leon and me played the first level for some times and decided 8 seconds is the dividing line. So, when the player used less than 8 second, he will go to level one, if he take between 8 to 9 second, then he will trigger the bonus scene, if it is more than 9 second, then he will go to level 2. Also, we adjust the angle the servo should turn for each situation, we chose 120 as starting, 0 for level 1, 30 for level 2 and 180 for level 3 for the first servo: the “moving wall” and 60 for starting and 170 as opening for the second servo: “the Gate of Bonus Scene”.

After these, our works before the user testing is finished. Although we distributed our works, but we helped each other with their parts during the production. Leon helped me to change some codes and I helped to do some cardboard work.

Then comes user testing, we have some positive feedbacks and one lucky player triggered the Bonus Scene.The following are some recording for user testing.

Most of the users understand what they are going to do at the first glance of the project, however, they didn’t notice the interactive part at the first time. But after playing, we have some positive feedbacks together with some suggestions. Some of them are making the whole solving process more smooth as the marble may stuck sometimes; using different methods to display time; applying clear signs of ending, and making the maze more delicate.

With these suggestions, we made some more adaptions to the project. We added a buzzer to show that the player reaches the ending point, which also adds more interaction to the whole process. We tried to decorate the maze, but there’s not enough room since the cardboards were already stuck together and only painting the margin of the maze will make it look really weird. Also, we made some changes to some crossroads so that the marble can move more smoothly. They do make the artifact better. And the final version of the the Maze is as follows.

4.Conclusion

The Self Leveling Maze can adjust the difficulty according to the user’s previous performance. It is interactive for it involves exchange of information from both sides: The users watch the maze and find out the way of solving while sending the information of the time they used, the maze receives the information, process it and gives feedback by leading the player to the chosen route. Also, the designer only designs the method of interacting, all the feedback is applied according to the user, the code and the circuit only play the role of a medium. This aligns my definition of interacting. However, the whole project only involves one time and one method of interacting which is too few. Users can interact with the artifact both physically and mentally, and they will feel they are interacting. However, they can’t experience the interaction very strongly, for what is mentioned above: the way of interacting is too few. So, we can feel the user’s feeling is like:”The maze leads me to a chosen way, how amazing” at first and ends up with:”Wait, that’s all?”. So, I believe we should add more interacting part during the whole process, like more “rewards” at the end or more signs at the start point and the check point. We should show the users how they are interacting, let them know they are interacting without thinking, not make it like a riddle, here by riddle I mean the user’s should guess and try to understand what is the interaction.

Another lesson I really learnt from the midterm project is that the appearance is important, especially for interactive projects, because, it should be attractive, it should make the users feel like they want to try it at first sight. When looking at other projects like “Hit Me If You Can” and “Rock It Ralph”(I’m not sure I put down the right name) people will show great interest in them because they look interesting, but who will really be attracted by a brown cardboard product with messy wires below it. They may also feel uncomfortable when interacting with it. That really arouse my attention and taught me a lesson.

So, if we have more time, the very thing I will do at first is to decorate it. I will add some essential decorations and paint the whole maze, also, I will make a cardboard box that contains all the wires, breadboard and Arduino UNO board. I will add a handle to the maze so that it can be manipulated more easily. I will also add some interactive gadgets to it, like a flag that will rise when the player reaches an end, or a small gate for the starting, etc. All those works are for one goal: Making it more interactive.

To wrap up, through the whole process of making the Self Leveling Maze, I did create a rather interactive thing, it enrich my understanding of interacting by letting me know the role of the designer of the project: He is the designer and only the designer, he can decide what method is used for the interaction, what kind of information to collect and what kind of feedback to release but he can only decide these. What exactly the input and output is has nothing to do with him, it’s only about the player, or the user. The lesson I learnt is that we should consider the feeling of the user when designing interactive artifacts, what I’m saying here is that we should let users feel they are interacting very strongly, let them feel it very interesting during the whole process, to accomplish this, some decoration and rewards or inspirations through from time to time are needed, even though they seem not really necessary. I will apply these rule every time I design something afterwards, and I believe these are important principles for any interactive artifact. All in all, “Users first”.