Assignment 3

September 28, 2024 by Ruijia Hu Leave a Comment

Questions

Article 1

What is the so called bottom-up and top-down approaches?(I did not quite get it)

Bottom-up Approach:

Attempting to recreate the conditions and processes that led to the origin of life from simpler non-living molecules. It involves studying and simulating the prebiotic chemistry that might have led to the emergence of life. Researchers start with basic chemical building blocks and try to piece together how these could have self-organized into more complex biological systems.

Example: Scientists might simulate conditions in early Earth environments to see how organic molecules, like amino acids or RNA, could have formed and eventually led to life.

Top-down Approach:

The top-down approach works in the opposite direction. It begins with existing life forms and traces their characteristics back in time to understand their origins. This includes studying the Last Universal Common Ancestor (LUCA) and other forms of early life by using genetic, metabolic, or structural data and extrapolating backward to infer what the first life forms might have been like.

Example: Researchers analyze modern DNA and proteins to understand what early molecular systems might have looked like before life as we know it developed.

Article 2

Chemical matter, whether organic or in-organic, is active and dynamic, then why are we still defining them as organic or in-organic? Because what life like is active and dynamic?

At first I was confused about whether organic things have life and in-organic things do not have life, so I came up with this question. However, life could emerge from both, so it doesn’t matter which has life or not. Also if we inspect in a theological way, all matters have life.

Writing

In 3021, we found a planet consists of magnet. What seemed weird was, the ‘creatures’ on the planet are actually controlled by the undercurrent of liquid magnet.

The undercurrent is like . So the current might collide into each other and have interaction with each other. At the same time, there might be some randomness within the current, so small ‘creatures’ will be born.

We named the ‘creature’ mag-worm. The mag-worms have their own life form which appears like the snakes in the sand, but what seemed also weird is they are just condensed solid magnet molecule and gas in molecule state and have the ability of attacking and annexing others. Forgot to mention, this planet was found in a cyber world and we already had the ability of going into the cyber world by putting on a special suit.

Generated by AI(but what I expected was not that solid and the worm is only burried in the magnetic sand)

Just imagine, a small planet, probably hunderds or thousands of them, gather together like a galaxy, has millions of magnetic ‘creatures’ on them. This is like a inner alien world, where, to some extent, artificial but not that artificial.

It’s quite interesting that they have the behaviour like human—-compete and merge. When a mag-worm is much stronger, bigger and more condensed, it will be more likely to absorb the weaker ones into its own body. The digest process is surprising as well, due to the difference of density between the original body and merged one, there might form gas swirls, which would calm down when the worm moved certain distance, so that the current of the swirls will approach the current in the mainstream. Every second, small worms will be born, and every second, hunderds of worms will be eaten. It is also weird that the worms at same size are repulsive to others, so on the surface of the planet it established block-like districts, quite close to small societies. There are slight chances that the biggest worm will form on the planet, because when the worm reaches certain weight or density, it will die out. If there exsists only the biggest worm on the planet, the planet will fade away within seconds.

Reference

Dune

Assignment 2

September 24, 2024 by Ruijia Hu Leave a Comment

Passage 1

How could attractions and repulsions be together?

It’s possible for these attractions and repulsion be together inside the matter, while somehow the exsistence of one might be there to minimize the other. Also, what surrounds the object, the environment, will also use attarctions and repulsions to make matters react. The clearest example is the video shown in class, some small iron balls is put in special oil and triggered by two electrodes, those balls react differently when the electrodes shift. Basically, it really depends on the context.

Passage 2

Can life and consciousness be seen as a higher form of self-assembly in a universe that seems to be tending towards chaos? If so, what does this tell us about our understanding of the nature of consciousness and humanity’s place in the universe?

I think life and consciousness could be regarded as a higher form of self-assembly, the basic example is human. Our social behaviours are quite like what was discussed in class for those materials, because they compete, grow, expand network-like shapes and figure out the best solution, so do us. At the same time, according to the entropy theory, we(or life) emerge from the balance between orders and chaos, so does the materials. In this perspective, we are similar, and in the developing process, we are all tending towards chaos.

As our behaviours are more flexible then the materials, though we all have regularities, from my point of view, our position in the universe might be higher or the highest so far. However, if we regard the similarities in micro and macro scope, the materials and us are on the same level.

Writing

The third world war is coming, and our ‘govrnmt’ decided to use a biochemical weapon to invade other territories. As I made great contribution in biology and chemistry, especially in 2040s, the jellybor, I was asked to R&D the weapon.

It is a virus-like biochemical material that regenerates and self-assembles, akin to a living slime. The molecules of the slime-like virus is in dark red color with the similar shape of blood cell so that they are hard to be discovered. Each of them has suction cups so that they could attach to each other or on the blood vessel, and suck in tissues as well.

Generated by AI

Upon injection, this material exhibits a deadly intelligence, instantly attaching itself to blood vessels at the site of entry. From there, it quickly spreads, flowing seamlessly which is like the root of the tree or stings of fungas toward the heart and brain, where it begins its destruction.

The weapon doesn’t aim to destroy its host immediately. Instead, it invades the brainstem and surrounding tissue, slowly consuming neural structures. This process is horrifyingly stealthy, as the victim experiences only slight, momentary dull pain during the initial stages of infection—small enough to dismiss, perhaps like a fleeting headache. Soon after, the body ‘recovers’, and the individual feels normal again, completely unaware that their brain is being silently eroded.

For about a week, the victim continues with their daily life, appearing perfectly healthy. Meanwhile, the biochemical agent steadily degrades the brain’s essential functions, meticulously consuming brainstem tissue without triggering significant immediate symptoms. The weapon is designed not to cause dramatic death scenes but to induce a seemingly peaceful demise. After approximately a week, the individual dies in their sleep, their brain having been quietly compromised. This slow, deceptive, and regenerating material leaves no obvious trail at all.

Reference

《危險星球》：貨真價實的「喪屍真菌」《國家地理》雜誌 (youtube.com)

The Evolution of Bacteria on a “Mega-Plate” Petri Dish (Kishony Lab) (youtube.com)

This Underground Economy Exists in a Secret Fungi Kingdom (youtube.com)

Homework3 – Personal Space

September 23, 2024 by Ruijia Hu Leave a Comment

For me, light represents the feeling of vibe. Especially the spotlight, which could illuminate the place where I focus on and would love to dive in. When the warm color is applied, it creates a feeling of myself sitting in a sofy couch, drinking hot chocolate, reading my favourite book and receiving the warmth of the stove. How cozy!

When night comes, everthing is quiet, the surroundings are dark except my own lamp giving off its vibe. I like to sit on the bay window, enjoying the lonely night.

So, I scanned my bed and my bay window, shed the spotlight on the mini table I decorated and a book beside. At the same time, illuminating the flower and the butterfly, which carries the most memories in my life.

If you would raise your head, you will find there are some glowing books and a perfumed medicine pouch. In the vibe, my smell become sensitive, smell in some perfumed medicine would help calm myself down and fall asleep. Also, I set the texture of unlit spaces transparent and a little bit mosaic, because when I immerse myself in the vibe, nothing unlit will be noticed and even myself become a vague fog.

And definitely, it’s quite different in the reality, the white light provides no vibe but plain and busy visual elements. While in Unity, it changes.

After all, when the light is on, it becomes the lonely space in imagination where my soul could rest in peace.

Homework2 – Site Specific Photocollage

September 22, 2024 by Ruijia Hu Leave a Comment

The site we chose was along the west bund of Huangpu River, specifically Xuhui Riverside Greenbelt. It is a place where highly connected with the urban city, but could be also regarded as somewhere to escape from the concrete. It is a paradox in combining technology and nature which triggered our thinking towards what we have done right or wrong in shaping the city.

Below are photos and videos we took.

Some Cyberpunk elements, natural elements and modern metalish elements gave us great inspirations. We humans want to create a paradise in industrialized city, but are what we doing right? Are we just seem to be trapped ourslves in the dream and ignoring the essence of life? Unban city itself is a place where peace contains chaos, is our desicion going on the right path or the wrong one? What seem to be true is false, and what seem to be false is true.

In this case, we choose quote 9.

“In a world which really is topsy-turvy, the true is a moment of the false.” Are we doing the right things to make the world a better place?

We create a double-sided tunnel, one head leading to a screen playing video, elaborating on the truth of life and time, the other head lead to the broken roads, invisioned into our fragile world. It seems that we use our hands to support everthing firmly, but always comes to the end of collapse.

The damaged road represents the fractured reality we traverse, whilethe neon light, an artificial and unnatural source of illumination, reflects how society oftenrelies on distorted or superficial truths to guide us. The hands supporting the roads symbolizes the forces attempting to hold up or mask this broken system.
In a topsy-turvy world, the neon light could be seen as a false illumination, creating a facade of progress while the roads (reality) are visibly deteriorating.

Our sculpture embodies this inversion, where what appears to be support (the hands and light) is actually holding up afragile, damaged reality, echoing the essence of this quote.

Assignment 1

September 14, 2024 by Ruijia Hu Leave a Comment

The inspiration was from the Aerobes. The first time I saw it, I think it was like a jellyfish, no matter the shape or movements. According to those, I designed a jellybot in 2040.

There is a soft material so called jelly-tissue, which is consist of glue-ish elements with stomas like a sponge, the connecting part of each stoma is super thin. This kind of material could float above the water when it touches the surface of it and float in the air at the same level of the clouds, right in the middle of troposphere and stratosphere, or ‘hanging’ in the air. Kind of like foam and scrubbed bubble. It could grow by itself, endlessly, because it could transform the water and oxgen in the air into the same components it contains, though artificial. And it could also be compressed into super small arrange.

I put a membrane on the outside to shape them into jellyfish-like bot, also with the tentacles. Once I built it out, surprisingly, the tentacles could autonomously swinging in the air and slowly raise the whole ‘body’ up. To experiment, I shut them in a glass box, and found out that they could change the density and the size of the stomas when the humidity is high, it would be more vague when you look through the texture. I took them out to see how high they could fly, supervised by a drone. It’s interesting that they stuck in the middle of troposphere and stratosphere when the sky is clear, hanging in the air when the humidity climbs high and finally touch the groud, but mostly the surface of the water, when it rains. Also, as the tissues grow, the membrane will split into two to hold more of them, so that they could form their own system in the air and act as a sign like dragonfly. When the membrane reaches the biggest tension, it would shrink into a ball in fist size and slowly land, either be absorbed by the earth or dissolved by water, containing the tissue inside. It could be used to detect the weather and co-exsist with human beings in a friendly way!

This is a picture of the jellybot generated by AI.

Two Questions:
First excerpt
What can we learn from the comparison of behaviours between soft materials and human?

The comparison between the behavior of soft materials and human behavior reveals a dialectic between decentralized and centralized intelligence. Soft materials like Physarum polycephalum showcase how distributed, unconscious processes can yield intelligent, adaptive responses, relying on direct interaction with the environment without the need for a central control system. In contrast, human behavior, though often centralized in the brain, benefits from conscious awareness, memory, and abstract reasoning, allowing for complex problem-solving and deliberate choices. Yet, this dichotomy is not absolute; humans also exhibit embodied cognition, where the body directly influences thought and action, while soft materials highlight the potential for intelligence to emerge through simple, decentralized means. This suggests that both forms of intelligence—distributed and centralized—are complementary rather than opposing, with each having unique advantages depending on the context. The synthesis of these ideas challenges us to reconsider traditional notions of intelligence and autonomy, acknowledging that complex behavior can arise from both conscious deliberation and unconscious, adaptive systems.

Second excerpt
What does it mean to integrate intelligence directly into materials(to be smart), eliminating reliance on external electronic systems? How does this new design concept change our traditional understanding of “machines” and “intelligence”?

The design concept of integrating intelligence directly into materials represents a novel approach to smart technology, eliminating the reliance on external electronic systems and embedding sensing, responding, and adapting capabilities within the material itself. This approach transcends traditional smart models, liberating intelligence from electronic hardware and control systems, and instead embedding it in the physical properties and inherent mechanisms of the material. This decentralized intelligence transforms our traditional understanding of machines and smart technology, blurring the boundaries between machines and materials, and positioning intelligence not only in computation and data processing but also in the natural adaptation and interaction of materials with their environment.

Smart materials offer a more natural and seamless user experience, automatically adjusting their functions in response to environmental changes and reducing dependence on external energy and complex electronic systems. This approach also enhances sustainability and efficiency by lowering energy consumption and reducing electronic waste. Additionally, it broadens the definition of “intelligence,” extending it from traditional logical computation to dynamic physical responses, making intelligence a core characteristic of the material itself rather than an added feature of machinery. Artists and designers can use these materials to create more interactive and creative works, blending traditional elements with modern technology to deliver entirely new artistic experiences.

Interaction Lab Final Report

May 13, 2024 by Ruijia Hu Leave a Comment

TCM Simulator

Arial & Jenny

Instructor: Rudi

CONCEPTION AND DESIGN:

My partner and I are into traditional Chinese culture and we have been exposed to traditional Chinese medicine(TCM) since little. Moreover, according to the ideology people have right now which is science, TCM is ignored under the context. In order to introduce it to a wider range of people and based on our own experience, we decided to make a project to convey the basic knowledge of TCM. The whole interaction process is to prescribe a patient according to his symptoms. We have three pages in total, the starting page, the symptom page, the prescription page. Considering the limited knowledge of the participants, we designed two modes, one is easy mode and the other is hard mode. The easy one would provide you with the direct herbs you need and the weight you should weigh respectively. The hard one would only provide you with the prompt symptoms and the total weight you need, which means you should explore the traits of the herbs by yourself to decide which to use. Once you pull out the drawer, the traits of the herbs will pop up. In this case, we intended to use digitalRead to detect the current in the wire, if the value is 1 then the traits will pop up, otherwise don’t. After picking out the herbs you need(we have one or more bags within a drawer showcasing different weight of the herbs), you weigh it by the steelyard(we have weight inside, 5g, 10g, 30g…) and put them into the furnace one by one to let the RFID detect the genre.

However, during the user testing, the whole system was not that smooth. There was poor connection between the naked wire and the conductive tape, so the traits unexpectedly appear and disappear which leads to our next fabrication revision. Also, as the whole process is complicated, most of the participants were not able to figure out what they should do which means we need a simpler version and a clearer instruction. Whatsmore, most of the participants didn’t know how to use the steelyard which made the interaction much more difficult.

So basically, we need to change the way the computer detects the state of the drawers and provide a more simple instruction. We used reed switches afterwards to make the value more stable. We made a clearer oral instruction. However, when we were presenting our project, the process seemed to be too long and eliminated the interactivity that we expected. It seemed a little bit tedious and unpolished.

In this case, we made another version for the IMA show. Reserving the function of the drawers, we changed the whole interaction form. When participants pull out the drawer, one at each time, the pictures of the traits we composed at first and the educational video we found will pop up at the same time. The video will stay at the center, the picture will stay at the up-left corner. The result turned out to be successful and effective, letting a lot of people know our design and the message we wanted to convey.

FABRICATION AND PRODUCTION:

Fabrication part

The process of making the cabinet is essential. We first laser cut out the 20 drawers and adjusted the grid to it which took me a lot of effort(19 versions of the grid…). I poked 4 holes behind each drawer on the outside box so that I could fit the wires in stably(as you can see in the second picture that there is a contrast).

However, during the user testing, the connection was unstable(probably because of the grid and the backplate of the outside box was not stuck together), so we stuck everywhere we could between the outside box and the grid, and used a reed switch for each. One thing we didn’t notice was that when we stuck everything together, the flexibility of the grid was eliminated, and two of the drawers could not fit in. We used hammers to break some of the glued intersections and the grid became loose and those two drawers went back to their places.

After all the laser cutting was done, we sprayed the cabinet. Due to the damage we caused, we went to facility service to make up for our mistake… After spraying, we used gold ink to color the characters and the bags.

My partner did the 3D printing part and some of the feedback from the user said it was too modern to be matched with the cabinet. By using sander, I sanded out a pot so it would appear more natural and ancient.

Digital production

Because of the poor connection, as the wires could not be evenly plain enough to touch the tape at the same time, professor Rudi suggested we turned to reed switch. It successfully fixed our problem! This is the most important issue in our project, if it could not work perfectly, it will affect participants’ experience.

Another problem is the value that Arduino read is not stable, sometimes it couldn’t detect the change of the current, sometimes it would went wrong when sending values to Processing. Professor Andy helped me with this part, he opened the example code and run the digitalRead inside, afterwards he turned back to the original code and it run smoothly. I didn’t really get it but it’s a great way to fix the problem though.

I used photoshop to edit pictures of the traits.

My partner explored the RFID part, it could not work as truly detecting the right or wrong prescription so we fake it till make it. Also, as we didn’t know there are more than 20 pins on Mega, we seperated the RFID part with the herb chosing part onto two computers which was kind of split. As it made the process too long and was lack of visualization, for better message delivery and experience, we deleted the part and made the IMA show version.

We originally designed the position of the pop up pictures to be random and participants could drag them to anywhere they want, but the outcome was not that easy, the picture would hardly move. Due to the limited time, we didn’t fix the problem and abandoned it in the last version.

CONCLUSIONS:

The message we intended to convey by this project is to popularize TCM and trigger the interests of the mass. I don’t know whether I have reached the goal or not, but from the reactions of those participants during IMA show, I felt greatly encouraged and more confident in my project.

Well, let’s first talk about the setbacks. The visualization was unpolished because we spent too much time finding the materials for the IMA show version, we barely have time to iterate it. The videos were super lagged, we don’t know whether it’s because of their length or the problem of Processing itself. Whatsmore, as the participants could pick the herbs up and smell them, the smells of the herbs themselves were ruined by the plywood. Those are where should improve.

However, there are three groups of participants that impressed me most and they provided me with great insights again and again into my project.

A mother brought her kid to tryout my project, it was obvious that the kid has already been exposed to TCM and his mother encouraged him to try to pull out all the medicine inside. While he was smelling the herbs and watching the introductions, he even talked to his mother that which herbs are good for her and grandma. Also, he was the only one who went over all the drawers. Even though I didn’t introduce much on my project, I felt resonant with the family and was glad that the mother could have such mindset.

A pair of international friend came to discuss about our perception towards TCM and one of them proposed that ‘A thing shouldn’t be regarded as invaluable because of not being scientific, maybe it’s just because people could not understand it!’ What striked me most was when he tapped my shoulder after interact with my project and said ‘I am with you’. That was the moment when I felt the cognitions joint together.

The last one was my last participator, she was the only one who understood my make-up medicine ‘snow’, ‘spring’ and ‘dew’. A Dream of Red Mensions is a classical masterpiece, within the plot, also aligned with TCM idea, a kind of pill is needed to be taken with the first snow in September. She asked me about it and our ideas were the same. This was when I felt finally there is someone who could understand my subtle detail! A lot of people were wondering why these three waters could be regarded as medicine and could be stored in the wooden box, I just explained to them that we designed it as a bridge for easier comprehension. My idea was ‘snow’ is cold in nature, it could calm patients’ inner fire; ‘sping’ is always fluent, it could help patients with their overwhelming maridians; ‘dew’ is fresh, so it could clean up the intestines. These are based on the saying of one of the famous TCM doctors, ‘TCM is using the power from the nature to balance human body and the surroundings.’ It’s good to know there is someone who could read my mind, haha.

The project is just a beginning of the journey, there are way more to explore and develop.

After all, from my personal perspctive, a great project needs to contain profound or thoughful insights in it which could arouse different vioces. Interactivity is just the first step. Only with the notion and idea could we move further in design.

DISASSEMBLY:

APPENDIX

Easy mode

Hard mode

IMA show version

Code

Arduino

Cabinet(each pin is connected to a drawer)

int box1 = 21;
int box2 = 2;
int box3 = 3;
int box4 = 4;
int box5 = 5;
int box6 = 6;
int box7 = 7;
int box8 = 8;
int box9 = 9;
int box10 = 10;
int box11 = 11;
int box12 = 12;
int box13 = 13;
int box14 = 14;
int box15 = 15;
int box16 = 16;
int box17 = 17;
int box18 = 18;
int box19 = 19;
int box20 = 20;

void setup() {
  Serial.begin(9600);
  // pu.t your setup code here, to run once:
  pinMode(box1, INPUT_PULLUP);
  pinMode(box2, INPUT_PULLUP);
  pinMode(box3, INPUT_PULLUP);
  pinMode(box4, INPUT_PULLUP);
  pinMode(box5, INPUT_PULLUP);
  pinMode(box6, INPUT_PULLUP);
  pinMode(box7, INPUT_PULLUP);
  pinMode(box8, INPUT_PULLUP);
  pinMode(box9, INPUT_PULLUP);
  pinMode(box10, INPUT_PULLUP);
  pinMode(box11, INPUT_PULLUP);
  pinMode(box12, INPUT_PULLUP);
  pinMode(box13, INPUT_PULLUP);
  pinMode(box14, INPUT_PULLUP);
  pinMode(box15, INPUT_PULLUP);
  pinMode(box16, INPUT_PULLUP);
  pinMode(box17, INPUT_PULLUP);
  pinMode(box18, INPUT_PULLUP);
  pinMode(box19, INPUT_PULLUP);
  pinMode(box20, INPUT_PULLUP);
}

void loop() {
  // put your main code here, to run repeatedly:
  int state1 = digitalRead(box1);
  int state2 = digitalRead(box2);
  int state3 = digitalRead(box3);
  int state4 = digitalRead(box4);
  int state5 = digitalRead(box5);
  int state6 = digitalRead(box6);
  int state7 = digitalRead(box7);
  int state8 = digitalRead(box8);
  int state9 = digitalRead(box9);
  int state10 = digitalRead(box10);
  int state11 = digitalRead(box11);
  int state12 = digitalRead(box12);
  int state13 = digitalRead(box13);
  int state14 = digitalRead(box14);
  int state15 = digitalRead(box15);
  int state16 = digitalRead(box16);
  int state17 = digitalRead(box17);
  int state18 = digitalRead(box18);
  int state19 = digitalRead(box19);
  int state20 = digitalRead(box20);

  Serial.print(state1);
  Serial.print(",");
  Serial.print(state2);
  Serial.print(",");
  Serial.print(state3);
  Serial.print(",");
  Serial.print(state4);
  Serial.print(",");
  Serial.print(state5);
  Serial.print(",");
  Serial.print(state6);
  Serial.print(",");
  Serial.print(state7);
  Serial.print(",");
  Serial.print(state8);
  Serial.print(",");
  Serial.print(state9);
  Serial.print(",");
  Serial.print(state10);
  Serial.print(",");
  Serial.print(state11);
  Serial.print(",");
  Serial.print(state12);
  Serial.print(",");
  Serial.print(state13);
  Serial.print(",");
  Serial.print(state14);
  Serial.print(",");
  Serial.print(state15);
  Serial.print(",");
  Serial.print(state16);
  Serial.print(",");
  Serial.print(state17);
  Serial.print(",");
  Serial.print(state18);
  Serial.print(",");
  Serial.print(state19);
  Serial.print(",");
  Serial.print(state20);

  Serial.println();

  delay(10);
}

RFID

**-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --*Example sketch / program showing how to read data from a PICC to serial.
  * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --*This is a MFRC522 library example; for further details and other examples see: https://github.com/miguelbalboa/rfid
 * 
 * Example sketch/program showing how to read data from a PICC (that is: a RFID Tag or Card) using a MFRC522 based RFID
 * Reader on the Arduino SPI interface.
 * 
 * When the Arduino and the MFRC522 module are connected (see the pin layout below), load this sketch into Arduino IDE
 * then verify/compile and upload it. To see the output: use Tools, Serial Monitor of the IDE (hit Ctrl+Shft+M). When
 * you present a PICC (that is: a RFID Tag or Card) at reading distance of the MFRC522 Reader/PCD, the serial output
 * will show the ID/UID, type and any data blocks it can read. Note: you may see "Timeout in communication" messages
 * when removing the PICC from reading distance too early.
 * 
 * If your reader supports it, this sketch/program will read all the PICCs presented (that is: multiple tag reading).
 * So if you stack two or more PICCs on top of each other and present them to the reader, it will first output all
 * details of the first and then the next PICC. Note that this may take some time as all data blocks are dumped, so
 * keep the PICCs at reading distance until complete.
 * 
 * @license Released into the public domain.
 * 
 * Typical pin layout used:
 * -----------------------------------------------------------------------------------------
 *             MFRC522      Arduino       Arduino   Arduino    Arduino          Arduino
 *             Reader/PCD   Uno/101       Mega      Nano v3    Leonardo/Micro   Pro Micro
 * Signal      Pin          Pin           Pin       Pin        Pin              Pin
 * -----------------------------------------------------------------------------------------
 * RST/Reset   RST          9             5         D9         RESET/ICSP-5     RST
 * SPI SS      SDA(SS)      10            53        D10        10               10
 * SPI MOSI    MOSI         11 / ICSP-4   51        D11        ICSP-4           16
 * SPI MISO    MISO         12 / ICSP-1   50        D12        ICSP-1           14
 * SPI SCK     SCK          13 / ICSP-3   52        D13        ICSP-3           15
 *
 * More pin layouts for other boards can be found here: https://github.com/miguelbalboa/rfid#pin-layout
 */

#include 
#include 

#define RST_PIN 5  // Configurable, see typical pin layout above
#define SS_PIN 10  // Configurable, see typical pin layout above

MFRC522 mfrc522(SS_PIN, RST_PIN);  // Create MFRC522 instance

void setup() {
  Serial.begin(9600);  // Initialize serial communications with the PC
  while (!Serial)
    ;                                 // Do nothing if no serial port is opened (added for Arduinos based on ATMEGA32U4)
  SPI.begin();                        // Init SPI bus
  mfrc522.PCD_Init();                 // Init MFRC522
  delay(4);                           // Optional delay. Some board do need more time after init to be ready, see Readme
  mfrc522.PCD_DumpVersionToSerial();  // Show details of PCD - MFRC522 Card Reader details
  Serial.println(F("Scan PICC to see UID, SAK, type, and data blocks..."));
}

void loop() {
  // Reset the loop if no new card present on the sensor/reader. This saves the entire process when idle.
  if (!mfrc522.PICC_IsNewCardPresent()) {
    return;
  }

  // Select one of the cards
  if (!mfrc522.PICC_ReadCardSerial()) {
    return;
  }

  // Dump debug info about the card; PICC_HaltA() is automatically called
  mfrc522.PICC_DumpToSerial(&(mfrc522.uid));
}

Processing

RFID

import processing.serial.*;
import processing.sound.*;
SoundFile file1;
SoundFile file2;
//PFont myFont;

Serial myPort;
String val;
boolean card1Detected = false;
boolean card2Detected = false;
boolean card3Detected = false;
boolean card4Detected = false;
boolean card5Detected = false;
boolean card6Detected = false;
boolean card7Detected = false;
boolean card8Detected = false;
boolean card9Detected = false;
boolean card10Detected = false;
boolean card11Detected = false;
boolean card12Detected = false;
boolean card13Detected = false;
boolean card14Detected = false;
boolean card15Detected = false;
boolean card16Detected = false;
boolean card17Detected = false;
boolean card18Detected = false;
boolean card19Detected = false;
boolean card20Detected = false;
boolean card21Detected = false;
boolean card22Detected = false;
boolean card23Detected = false;
boolean card24Detected = false;
boolean card25Detected = false;
boolean card26Detected = false;
boolean card27Detected = false;
boolean card28Detected = false;

boolean card29Detected = false;
boolean card30Detected = false;

//boolean card30Detected = false;

//boolean card31Detected = false;

long lastDetectionTime = 0; // 记录最后一次检测到卡的时间
int timeout = 10000; // 设置超时时间为20秒
boolean timeoutActive = false; // 超时计时器是否激活

int isDetectedValue1 = 0;
int isDetectedValue2 = 0;
int isDetectedValue3 = 0;
int isDetectedValue4 = 0;
int isDetectedValue5 = 0;


PImage image1, image2; // 图像对象

void setup() {
  //size(640, 360);
  fullScreen();
  println("Available serial ports: " + Serial.list());
  myPort = new Serial(this, Serial.list()[5], 9600);
  myPort.bufferUntil('\n');
  background(0);

  file1 = new SoundFile(this, "success-1-6297.mp3");
  file2 = new SoundFile(this, "wah-wah-sad-trombone-6347.mp3");
  // 加载图像，确保图像文件在项目的根目录下或者指定了正确的路径
  image1 = loadImage("success.jpg");
  image2 = loadImage("fail.jpg");

  if (image1 == null) {
    println("Error loading image1");
  } else {
    println("Image1 loaded successfully");
  }

  if (image2 == null) {
    println("Error loading image2");
  } else {
    println("Image2 loaded successfully");
  }
  //resetDetection();
}

void draw(){

  if (card1Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Peony Root 30g ", 50, 100 );
    println("card1Detected");
  }
  if (card2Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Licorice 20g ", 500, 100);
    println("card2Detected");
  }
  if (card3Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Firewood 30g ", 950, 100 );
    println("card3Detected");
  }
  if (card4Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Angelica 30g ", 1400, 100);
    println("card4Detected");
  }
  if (card5Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Wolfiporia 30g ", 50, 250 );
    println("card1Detected");
  }
  if (card6Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Atractylodes 30g ", 500, 250);
    println("card2Detected");
  }
  if (card7Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Spring 100g ", 950, 250 );
    println("card3Detected");
  }
  if (card8Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Milk Vetch root 30g ", 1300, 250);
    println("card4Detected");
  }
  if (card9Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Licorice 10g ", 50, 400 );
    println("card1Detected");
  }
  if (card10Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Firewood 5g ", 500, 400);
    println("card2Detected");
  }
  if (card11Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Angelica 5g ", 950, 400 );
    println("card3Detected");
  }
  if (card12Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Atractylodes 10g ", 1300, 400);
    println("card4Detected");
  }
if (card13Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Dried Orange Peel 5g ", 50, 400 );
    println("card1Detected");
  }
  if (card14Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Jute 5g ", 500, 400);
    println("card2Detected");
  }
  if (card15Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Ginseng 5g ", 950, 400 );
    println("card3Detected");
  }
  if (card16Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Snow 100g ", 1300, 400);
    println("card4Detected");
  }
  if (card17Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Milk Vetch Root 50g ", 50, 550 );
    println("card1Detected");
  }
  if (card18Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Atractylodes 50g ", 500, 550);
    println("card2Detected");
  }
  if (card19Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Wind-Proof Grass 30g ", 950, 550 );
    println("card3Detected");
  }
  if (card20Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Jujube 5g ", 1300, 550);
    println("card4Detected");
  }
  if (card21Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Cinnamon 10g ", 50, 700 );
    println("card1Detected");
  }
  if (card22Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Ginger 10g ", 500, 700);
    println("card2Detected");
  }
  if (card23Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Peony Root 10g ", 950, 700 );
    println("card3Detected");
  }
  if (card24Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Licorice 5g ", 1300, 700);
    println("card4Detected");
  }
  if (card25Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Dew 100g ", 50, 850 );
    println("card1Detected");
  }
  if (card26Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Mid-Summer 10g ", 500, 850);
    println("card2Detected");
  }
  if (card27Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Bitterness 5g ", 950, 850 );
    println("card3Detected");
  }
  if (card28Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Ginseng 10g ", 1300, 850);
    println("card4Detected");
  }
  if (card29Detected) {
    stroke(10);
    fill(255);
    textSize(50);
    text("Scrutellaria 10g ", 50, 1000 );
    println("card1Detected");
  }
  
  checkCardsAndDisplay();
}

void serialEvent(Serial myPort) {
  val = myPort.readStringUntil('\n');
  if (val != null) {
    val = trim(val);
    println("Received UID: " + val);
    if (!timeoutActive && (card1Detected || card2Detected)) {
      lastDetectionTime = millis(); // 在检测到第一张卡后开始计时
      timeoutActive = true; // 激活超时计时器
    }

    if (val.equals("0   0D D3 1E DE  1E 08 04 00  03 D4 57 FA  7B CE 73 90  [ 0 0 0 ]")) {
      card1Detected = true;
      println("Card 1 detected");
      isDetectedValue1 = 1;
    } else if (val.equals("0   1D D3 1E DE  0E 08 04 00  03 94 55 01  EB 4D 46 90  [ 0 0 0 ]")) {
      card2Detected = true;
      println("Card 2 detected");
      isDetectedValue1 = 2;
    } else if (val.equals("0   2D D3 1E DE  3E 08 04 00  03 12 B5 84  9C AB 4B 90  [ 0 0 0 ]")) {
      card3Detected = true;
      println("Card 3 detected");
      isDetectedValue1 = 3;
    } else if (val.equals("0   3D D3 1E DE  2E 08 04 00  03 CC D4 33  12 5A 9E 90  [ 0 0 0 ]")) {
      card4Detected = true;
      println("Card 4 detected");
      isDetectedValue1 = 4;
    } else if (val.equals("0   4D D3 1E DE  5E 08 04 00  03 85 46 73  50 65 E8 90  [ 0 0 0 ]")) {
      card5Detected = true;
      println("Card 5 detected");
      isDetectedValue1 = 5;
    } else if (val.equals("0   5D D3 1E DE  4E 08 04 00  03 0F C2 A6  88 18 14 90  [ 0 0 0 ]")) {
      card6Detected = true;
      println("Card 6 detected");
      isDetectedValue1 = 6;
    } else if (val.equals("0   6D D3 1E DE  7E 08 04 00  03 74 0F F8  7E A5 CB 90  [ 0 0 0 ]")) {
      card7Detected = true;
      println("Card 7 detected");
      isDetectedValue1 = 7;
    }
    //else {
    //  println("Received unknown card UID");
    //}
    //} else {
    //  println("No data received or incomplete data");
  }



  if (val.equals("0   7D D3 1E DE  6E 08 04 00  03 A5 8E F4  33 2E DE 90  [ 0 0 0 ]")) {
    card8Detected = true;
    println("Card 8 detected");
    isDetectedValue2 = 1;
  } else if (val.equals("0   8D D3 1E DE  9E 08 04 00  03 15 9E BA  3C 20 6C 90  [ 0 0 0 ]")) {
    card9Detected = true;
    println("Card 9 detected");
    isDetectedValue2 = 2;
  } else if (val.equals("0   9D D3 1E DE  8E 08 04 00  03 CA 79 7C  E9 BB 3B 90  [ 0 0 0 ]")) {
    card10Detected = true;
    println("Card 10 detected");
    isDetectedValue2 = 3;
  } else if (val.equals("0   AD D3 1E DE  BE 08 04 00  03 A0 6E 95  17 DA C1 90  [ 0 0 0 ]")) {
    card11Detected = true;
    println("Card 11 detected");
    isDetectedValue2 = 4;
  } else if (val.equals("0   BD D3 1E DE  AE 08 04 00  03 1D E7 6D  86 71 4C 90  [ 0 0 0 ]")) {
    card12Detected = true;
    println("Card 12 detected");
    isDetectedValue2 = 5;
  } else if (val.equals("0   CD D3 1E DE  DE 08 04 00  03 22 93 D0  EA FF AF 90  [ 0 0 0 ]")) {
    card13Detected = true;
    println("Card 13 detected");
    isDetectedValue2 = 6;
  } else if (val.equals("0   DD D3 1E DE  CE 08 04 00  03 02 AA F4  48 4A 4C 90  [ 0 0 0 ]")) {
    card14Detected = true;
    println("Card 14 detected");
    isDetectedValue2 = 7;
  } else if (val.equals("0   ED D3 1E DE  FE 08 04 00  03 25 07 05  F0 45 86 90  [ 0 0 0 ]")) {
    card15Detected = true;
    println("Card 15 detected");
    isDetectedValue2 = 8;
  } else if (val.equals("0   FD D3 1E DE  EE 08 04 00  03 4C BB B8  5C 0D 7A 90  [ 0 0 0 ]")) {
    card16Detected = true;
    println("Card 16 detected");
    isDetectedValue2 = 9;
  } else {
    // println("Received unknown card UID");
  }
  //else {
  //  println("No data received or incomplete data");
  //}
  if (val.equals("0   0D D4 1E DE  19 08 04 00  03 3A 5D 4A  0F 28 1E 90  [ 0 0 0 ]")) {
    card17Detected = true;
    println("Card 17 detected");
    isDetectedValue3 = 1;
  } else if (val.equals("0   1D D4 1E DE  09 08 04 00  03 CF 75 A4  E9 22 96 90  [ 0 0 0 ]")) {
    card18Detected = true;
    println("Card 18 detected");
    isDetectedValue3 = 2;
  } else if (val.equals("0   2D D4 1E DE  39 08 04 00  03 73 E1 09  02 EE 63 90  [ 0 0 0 ]")) {
    card19Detected = true;
    println("Card 19 detected");
    isDetectedValue3 = 3;
  } else if (val.equals("0   6D D3 1E DE  7E 08 04 00  03 74 0F F8  7E A5 CB 90  [ 0 0 0 ]")) {
    card7Detected = true;
    println("Card 7 detected");
    isDetectedValue3 = 4;
  } else {
    // println("Received unknown card UID");
  }


  if (val.equals("0   3D D4 1E DE  29 08 04 00  03 77 78 BC  B0 0A 3C 90  [ 0 0 0 ]")) {
    card20Detected = true;
    println("Card 20 detected");
    isDetectedValue4 = 1;
  } else if (val.equals("0   4D D4 1E DE  59 08 04 00  03 E2 4E 7C  D3 A6 5B 90  [ 0 0 0 ]")) {
    card21Detected = true;
    println("Card 21 detected");
    isDetectedValue4 = 2;
  } else if (val.equals("0   6D CA 1E DE  67 08 04 00  03 A8 B2 9F  D9 FE 27 90  [ 0 0 0 ]")) {
    card22Detected = true;
    println("Card 22 detected");
    isDetectedValue4 = 3;
  } else if (val.equals("0   8D CA 1E DE  87 08 04 00  03 E4 08 1B  42 C4 3D 90  [ 0 0 0 ]")) {
    card23Detected = true;
    println("Card 23 detected");
    isDetectedValue4 = 4;
  } else if (val.equals("0   9D CA 1E DE  97 08 04 00  03 94 17 AA  D4 BF F7 90  [ 0 0 0 ]")) {
    card24Detected = true;
    println("Card 24 detected");
    isDetectedValue4 = 5;
  } else if (val.equals("0   AD CA 1E DE  A7 08 04 00  03 2A 22 CB  E7 82 0D 90  [ 0 0 0 ]")) {
    card25Detected = true;
    println("Card 25 detected");
    isDetectedValue4 = 6;
  } else {
    // println("Received unknown card UID");
  }

  if (val.equals("0   3D D4 1E DE  29 08 04 00  03 77 78 BC  B0 0A 3C 90  [ 0 0 0 ]")) {
    card20Detected = true;
    println("Card 20 detected");
    isDetectedValue5 = 1;
  } else if (val.equals("0   6D CA 1E DE  67 08 04 00  03 A8 B2 9F  D9 FE 27 90  [ 0 0 0 ]")) {
    card22Detected = true;
    println("Card 22 detected");
    isDetectedValue5 = 2;
  } else if (val.equals("0   BD CA 1E DE  B7 08 04 00  03 DD 6E C4  09 C8 D9 90  [ 0 0 0 ]")) {
    card26Detected = true;
    println("Card 26 detected");
    isDetectedValue5 = 3;
  } else if (val.equals("0   8D D3 1E DE  9E 08 04 00  03 15 9E BA  3C 20 6C 90  [ 0 0 0 ]")) {
    card9Detected = true;
    println("Card 9 detected");
    isDetectedValue5 = 4;
  } else if (val.equals("0   CD CA 1E DE  C7 08 04 00  03 77 AE 93  10 C6 AB 90  [ 0 0 0 ]")) {
    card27Detected = true;
    println("Card 27 detected");
    isDetectedValue5 = 5;
  } else if (val.equals("0   DD CA 1E DE  D7 08 04 00  03 68 87 32  94 6A 7A 90  [ 0 0 0 ]")) {
    card28Detected = true;
    println("Card 28 detected");
    isDetectedValue5 = 6;
  } else if (val.equals("0   AD CA 1E DE  A7 08 04 00  03 2A 22 CB  E7 82 0D 90  [ 0 0 0 ]")) {
    card25Detected = true;
    println("Card 25 detected");
    isDetectedValue5 = 7;
  } else if (val.equals("0   ED CA 1E DE  E7 08 04 00  03 98 92 4A  7F EB 99 90  [ 0 0 0 ]")) {
    card29Detected = true;
    println("Card 29 detected");
    isDetectedValue5 = 8;
  }
}

void checkCardsAndDisplay() {
  if (card1Detected && card2Detected && card3Detected && card4Detected && card5Detected && card6Detected && card7Detected) {
    //println("Both cards detected, displaying image1");
    image(image1, 0, 0, width, height);

    if (file1.isPlaying() == false) {
      file1.play();
    }

    resetDetection();
    //} else if (card1Detected ^ card2Detected) {
    //  //println("Only one card detected, displaying image2");
    //  image(image2, 0, 0, width, height);
    //  resetDetection();
  } else if (card30Detected) {
    image(image2, 0, 0, width, height);

    if (file2.isPlaying() == false) {
      file2.play();
    }
    //file2.rate(2);
  }

  if (card8Detected && card9Detected && card10Detected && card11Detected && card12Detected && card13Detected && card14Detected && card15Detected && card16Detected) {
    //println("Both cards detected, displaying image1");
    image(image1, 0, 0, width, height);
    if (file1.isPlaying() == false) {
      file1.play();
    }
    resetDetection();
    //} else if (card1Detected ^ card2Detected) {
    //  //println("Only one card detected, displaying image2");
    //  image(image2, 0, 0, width, height);
    //  resetDetection();
  } else if (card30Detected) {
    image(image2, 0, 0, width, height);
    if (file2.isPlaying() == false) {
      file2.play();
    }
  }

  if (card17Detected && card18Detected && card19Detected && card7Detected ) {
    //println("Both cards detected, displaying image1");
    image(image1, 0, 0, width, height);
    if (file1.isPlaying() == false) {
      file1.play();
    }
    resetDetection();
    //} else if (card1Detected ^ card2Detected) {
    //  //println("Only one card detected, displaying image2");
    //  image(image2, 0, 0, width, height);
    //  resetDetection();
  } else if (card30Detected) {
    image(image2, 0, 0, width, height);
  }

  if (card20Detected && card21Detected && card22Detected && card23Detected && card24Detected && card25Detected) {
    //println("Both cards detected, displaying image1");
    image(image1, 0, 0, width, height);
    if (file1.isPlaying() == false) {
      file1.play();
    }
    resetDetection();
    //} else if (card1Detected ^ card2Detected) {
    //  //println("Only one card detected, displaying image2");
    //  image(image2, 0, 0, width, height);
    //  resetDetection();
  } else if (card30Detected) {
    image(image2, 0, 0, width, height);
    if (file2.isPlaying() == false) {
      file2.play();
    }
  }

  if (card20Detected && card22Detected && card26Detected && card9Detected && card27Detected && card28Detected && card25Detected && card29Detected) {
    //println("Both cards detected, displaying image1");
    image(image1, 0, 0, width, height);
    if (file1.isPlaying() == false) {
      file1.play();
    }
    resetDetection();
    //} else if (card1Detected ^ card2Detected) {
    //  //println("Only one card detected, displaying image2");
    //  image(image2, 0, 0, width, height);
    //  resetDetection();
  } else if (card30Detected) {
    image(image2, 0, 0, width, height);
    if (file2.isPlaying() == false) {
      file2.play();
    }
  }
}

void resetDetection() {
  timeoutActive = false;
}

void keyPressed() {
  card30Detected = true;
}

Presentation version

import processing.serial.*;
Serial serialPort;

int NUM_OF_VALUES_FROM_ARDUINO = 20;  /* CHANGE THIS ACCORDING TO YOUR PROJECT */
//int NUM_OF_xBOX = 6;
//int NUM_OF_yBOX = 6;
int NUM_OF_IMG = 20;
int NUM_OF_PATIENT = 5;
int NUM_OF_DOC = 5;
int NUM_OF_PRE = 5;
int NUM_OF_PROMPT=5;
//int NUM_OF_BUTTON = 1;

int numImages = 20; // 图像数量
float spacing = 150; // 图像间距
float imageWidth = 1181/2; // 图像宽度
float imageHeight = 944/2; // 图像高度
float scroll = 0; // 鼠标滚动的偏移量

PFont myFont;

int m_pre;

/* This array stores values from Arduino */
int arduino_values[] = new int[NUM_OF_VALUES_FROM_ARDUINO];
//int arduino_values1[] = new int[NUM_OF_BUTTON];

PImage[] images = new PImage[NUM_OF_IMG];

PImage angelica1;
PImage angelica2;
//PImage[] images_angelica = new PImage[NUM_OF_ANGELICA];
PImage atractylodes1;
PImage atractylodes2;
PImage atractylodes3;
//PImage[] images_atractylodes = new PImage[NUM_OF_ATRACTYLODES];
PImage bitterness;
PImage cinnamon;
PImage dew;
PImage dried_orange_peel;
PImage firewood1;
PImage firewood2;
//PImage[] images_firewood = new PImage[NUM_OF_FIREWOOD];
PImage ginger;
PImage ginseng1;
PImage ginseng2;
//PImage[] images_ginseng = new PImage[NUM_OF_GINSENG];
PImage jujube;
PImage jute;
PImage licorice1;
PImage licorice2;
PImage licorice3;
PImage licorice4;
//PImage[] images_licorice = new PImage[NUM_OF_LICORICE];
PImage midsummer;
PImage milkvetch1;
PImage milkvetch2;
//PImage[] images_milkvetch = new PImage[NUM_OF_MILKVETCH];
PImage peony1;
PImage peony2;
//PImage[] images_peony = new PImage[NUM_OF_PEONY];
PImage scutellaria;
PImage snow;
PImage spring;
PImage wolf;
PImage wpg;


PImage[] images_patient = new PImage[NUM_OF_PATIENT];
PImage img21;
PImage img22;
PImage img23;
PImage img24;
PImage img25;

PImage[] images_doc = new PImage[NUM_OF_DOC];
PImage img26;
PImage img27;
PImage img28;
PImage img29;
PImage img30;

PImage[] images_pre = new PImage[NUM_OF_PRE];
PImage img31;
PImage img32;
PImage img33;
PImage img34;
PImage img35;

PImage patient;
PImage easymode_guizhi;
PImage prompt;
PImage start;
PImage sym;

PImage[] images_prompt = new PImage[NUM_OF_PROMPT];
PImage promptXY;
PImage promptBZYQ;
PImage promptGZ;
PImage promptYPFS;
PImage promptXX;

int mode = 0;

float imgX[]= new float[NUM_OF_IMG];
float imgY[] = new float[NUM_OF_IMG];



void setup() {
  //size(700, 700);
  fullScreen();
  rectMode(CENTER);
  textAlign(CENTER, CENTER);

  printArray(Serial.list());
  serialPort = new Serial(this, "COM5", 9600);

  imageMode(CENTER);
  for (int i=0; i < 20; i++) {
    imgX[i] = random(1754/4.8,width-1754/2.4);
    imgY[i] = random(1240/4.8, height-1240/2.4);
  }

  //load images of the herbs
  angelica1 = loadImage("Angelica_BZYQ.png");
  angelica2 = loadImage("Angelica_xiaoyao.png");

  atractylodes1 = loadImage("Atrac_BZYQ.png");
  atractylodes2 = loadImage("Atrac_xiaoyao.png");
  atractylodes3 = loadImage("Atrac_YPFS.png");

  bitterness = loadImage("bitter.png");
  cinnamon = loadImage("cinnamon.png");
  dew = loadImage("dew.png");
  dried_orange_peel = loadImage("DOP.png");

  firewood1 = loadImage("FW_BZYQ.png");
  firewood2 = loadImage("FW_xiaoyao.png");

  ginger = loadImage("Ginger.png");

  ginseng1 = loadImage("Ginseng_BZYQ.png");
  ginseng2 = loadImage("Ginseng_xiexin.png");

  jujube = loadImage("jujube.png");
  jute = loadImage("Jute.png");

  licorice1 = loadImage("Licorice_BZYQ.png");
  licorice2 = loadImage("Licorice_guizhi.png");
  licorice3 = loadImage("Licorice_xiaoyao.png");
  licorice4 = loadImage("Licorice_xiexin.png");

  midsummer = loadImage("Mid_sum.png");

  milkvetch1 = loadImage("MVR_BZYQ.png");
  milkvetch2 = loadImage("MVR_YPFS.png");

  peony1 = loadImage("PR_guizhi.png");
  peony2 = loadImage("PR_xiaoyao.png");

  scutellaria = loadImage("Scute.png");
  snow = loadImage("snow.png");
  spring = loadImage("spring.png");
  wolf = loadImage("Wolf.png");
  wpg = loadImage("WPG.png");



  img21 = loadImage("patient_1.png");
  img22 = loadImage("doc_1.png");
  img23 = loadImage("patient_2.png");
  img24 = loadImage("doc_2.png");
  img25 = loadImage("patient_3.png");
  img26 = loadImage("doc_3.png");
  img27 = loadImage("patient_4.png");
  img28 = loadImage("doc_4.png");
  img29 = loadImage("patient_5.png");
  img30 = loadImage("doc_5.png");

  img31 = loadImage("Xiao_Y_S.png");
  img32 = loadImage("BZYQ_T.png");
  img33 = loadImage("Cinna_T.png");
  img34 = loadImage("YPFS.png");
  img35 = loadImage("Mid_Sum_T.png");

  patient = loadImage("patient.png");
  easymode_guizhi = loadImage("easymode_guizhi.png");
  prompt = loadImage("prompt.png");
  start = loadImage("start_back.jpg");
  sym = loadImage("sym.jpg");
  
 promptXY = loadImage("xiaoyao_prompt.png");
 promptBZYQ= loadImage("BZYQ_prompt.png");;
 promptGZ= loadImage("guizhi_prompt.png");;
promptYPFS= loadImage("YPFS_prompt.png");;
 promptXX= loadImage("xiexin_prompt.png");;

  images[0]= angelica1;
  images[1]= atractylodes1;
  images[2]= bitterness;
  images[3] = cinnamon;
  images[4]= dew;
  images[5]= dried_orange_peel;
  images[6]= firewood1;
  images[7]= ginger;
  images[8]= ginseng1;
  images[9]= jujube;
  images[10]= jute;
  images[11]= licorice1;
  images[12]= midsummer;
  images[13]= milkvetch1;
  images[14]= peony1;
  images[15]= scutellaria;
  images[16]= snow;
  images[17]= spring;
  images[18]= wolf;
  images[19]= wpg;


  images_patient[0] = img21;
  images_patient[1] = img23;
  images_patient[2] = img25;
  images_patient[3] = img27;
  images_patient[4] = img29;

  images_doc[0] = img22;
  images_doc[1] = img24;
  images_doc[2] = img26;
  images_doc[3] = img28;
  images_doc[4] = img30;

  images_pre[0] = img31;
  images_pre[1] = img32;
  images_pre[2] = img33;
  images_pre[3] = img34;
  images_pre[4] = img35;
  
  images_prompt[0]=promptXY;
  images_prompt[1]=promptBZYQ; 
  images_prompt[2]=promptGZ; 
  images_prompt[3]=promptYPFS; 
  images_prompt[4]=promptXX; 
  
  m_pre= int(random(0, 5));
}

void draw() {
  background(start);

  getSerialData();

  //start page
  if (mode == 0) {
    drawButton(0.5*width, 0.5*height, 0.2*width, 0.15*height, 1, "START!!!");
  }


  if (mode == 1) {
    drawDescription();
  } else if (mode == 2) {
    drawSymptom();
  } else if (mode == 3) {
    drawEasymode();
  } else if (mode == 4) {
    drawHardmode();
  } else if(mode==5){
  drawSuccess();
  
  }
}
void drawDescription() {
  myFont = createFont("隶书", 60);
  textFont(myFont);
  String textDisplay = "You are a CTM(Chinese Traditional Medicine) doctor \n who is working to prescribe medicine to your patients. \n Based on their symptoms and the corresponding remedy, \n please pick the right herbs for the prescription.\n 你是一个中医药大夫，\n需要根据病人的症状或者所给出的药方配出一副药";
  text(textDisplay, 0.5*width, 0.5*height);
  drawButton(0.5*width, 0.7*height, 0.2*width, 0.1*height, 2, "Continue");
  
  
  //if(arduino_values[21] < 100) {
  //mode = 5;
  //}
}

void drawSymptom() {
  image(patient, 0.5*width, 0.5*height, 620, 570);

  //pictures of patients and docs
  image(images_patient[m_pre], 0.2*width, 0.35*height, 1181/1.2, 944/1.2);
  image(images_doc[m_pre], 0.8*width, 0.5*height, 1181/1.2, 944/1.2);

  //buttons easy and hard
  drawButton(0.4*width, 0.85*height, 0.15*width, 0.1*height, 3, "EASY");
  drawButton(0.6*width, 0.85*height, 0.15*width, 0.1*height, 4, "HARD");
  
  
}


void drawEasymode() {
  image(images_pre[m_pre], 0.8*width, 0.5*height, 1417/2, 2125/2);


  for (int i = 0; i<20; i++) {
    if (arduino_values[i] ==1 ) {
      if (m_pre == 0) {
        images[0] = angelica2;
        images[1] =atractylodes2;
        images[6] =firewood2;
        images[11] =licorice3;
        images[14] =peony2;
      } else if (m_pre == 3) {
        images[1]= atractylodes3;
        images[13]=milkvetch2;
      } else if (m_pre == 4) {
        images[8]= ginseng2;
        images[11]= licorice4;
      } else if (m_pre==2) {
        images[11]= licorice2;
      }
      image(images[i], imgX[i], imgY[i], 1754/2.4, 1240/2.4 );


      if (mouseX>imgX[i]-0.05*width && mouseX<imgX[i]+0.05*width && mouseY<imgY[i]+0.05*height&& mouseY>imgY[i]-0.05*height) {
        if (mousePressed) {
          imgX[i] = mouseX;
          imgY[i] = mouseY;
        }
      }
    }
  }
  textSize(40);
  text("You can drag the pictures anywhere you want!", width/2, 24*height/25);
}


void drawHardmode() {
  image(images_prompt[m_pre], 0.8*width, 0.5*height, 1417/1.5, 2125/1.5);
  for (int i = 0; i<20; i++) {
    if (arduino_values[i] ==1) {
      if (m_pre == 0) {
        images[0] = angelica2;
        images[1] =atractylodes2;
        images[6] =firewood2;
        images[11] =licorice3;
        images[14] =peony2;
      } else if (m_pre == 3) {
        images[1]= atractylodes3;
        images[13]=milkvetch2;
      } else if (m_pre == 4) {
        images[8]= ginseng2;
        images[11]= licorice4;
      } else if (m_pre==2) {
        images[11]= licorice2;
      }
      image(images[i], imgX[i], imgY[i], 1754/2.4, 1240/2.4 );
      if (mouseX>imgX[i]-0.05*width && mouseX<imgX[i]+0.05*width && mouseY<imgY[i]+0.05*height&& mouseY>imgY[i]-0.05*height) {
        if (mousePressed) {
          imgX[i] = mouseX;
          imgY[i] = mouseY;
        }
      }
    }
  }

  textSize(40);
  text("You can drag the pictures anywhere you want!", width/2, 24*height/25);
}



void getSerialData() {
  while (serialPort.available() > 0) {
    String in = serialPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII
    if (in != null) {
      print("From Arduino: " + in);
      String[] serialInArray = split(trim(in), ",");
      if (serialInArray.length == NUM_OF_VALUES_FROM_ARDUINO) {
        for (int i=0; i<serialInArray.length; i++) {
          arduino_values[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

void drawButton(float xPosition, float yPosition, float buttonWidth, float bottonHeight, int mode_num, String text) {

  if (mouseX>= xPosition - 0.5*buttonWidth && mouseX<= xPosition+ 0.5*buttonWidth && mouseY>=yPosition-0.5*bottonHeight && mouseY<= yPosition+0.5*bottonHeight) {
    strokeWeight(5);
    fill(#CEAC66);
    rect(xPosition, yPosition, buttonWidth, bottonHeight);
    textSize(100);
    fill(0);
    text(text, xPosition, yPosition);
    if (mousePressed) {
      mode = mode_num;
    }
  } else {
    strokeWeight(5);
    fill(#CEAC66);
    rect(xPosition, yPosition, 2*buttonWidth/3, 2*bottonHeight/3, 50);
    textSize(80);
    fill(0);
    text(text, xPosition, yPosition);
  }
}

IMA show version

import processing.video.*;
import processing.serial.*;
Serial serialPort;
int NUM_OF_VALUES_FROM_ARDUINO = 20;
int arduino_values[] = new int[NUM_OF_VALUES_FROM_ARDUINO];

int NUM_OF_VIDEO = 20;
Movie[] video = new Movie[NUM_OF_VIDEO];

int NUM_OF_IMG = 20;
PImage[] images = new PImage[NUM_OF_IMG];


Movie myMovieAngelica;
Movie myMovieAtract;
Movie myMovieBitterness;
Movie myMovieCinnamon;
Movie myMovieDew;
Movie myMovieDOP;
Movie myMovieFirewood;
Movie myMovieGinger;
Movie myMovieGinseng;
Movie myMovieJujube;
Movie myMovieJute;
Movie myMovieLicorice;
Movie myMovieMidS;
Movie myMovieMVR;
Movie myMoviePR;
Movie myMovieScutellaria;
Movie myMovieSnow;
Movie myMovieSpring;
Movie myMovieWolf;
Movie myMovieWPG;

PImage angelica1;
PImage atractylodes1;
PImage bitterness;
PImage cinnamon;
PImage dew;
PImage dried_orange_peel;
PImage firewood1;
PImage ginger;
PImage ginseng1;
PImage jujube;
PImage jute;
PImage licorice1;
PImage midsummer;
PImage milkvetch1;
PImage peony1;
PImage scutellaria;
PImage snow;
PImage spring;
PImage wolf;
PImage wpg;

PImage start;

void setup() {
 fullScreen();
 // size(2560, 1440, P2D);
  myMovieAngelica = new Movie(this, "Angelicafinal.mp4");
  myMovieAtract = new Movie(this, "Atractylodes1.mov");
  myMovieBitterness = new Movie(this, "Bitternessfinal.mp4");
  myMovieCinnamon = new Movie(this, "Cinnamonfinal.mp4");
  myMovieDew = new Movie(this, "dew.mp4");
  myMovieDOP = new Movie(this, "DOP1.mov");
  myMovieFirewood = new Movie(this, "Firewoodfinal.mp4");
  myMovieGinger = new Movie(this, "Gingerfinal.mp4");
  myMovieGinseng = new Movie(this, "Ginsengfinal.mp4");
  myMovieJujube = new Movie(this, "Jujubefinal.mp4");
  myMovieJute = new Movie(this, "Jutefinal.mp4");
  myMovieLicorice = new Movie(this, "Licoricefinal.mp4");
  myMovieMidS = new Movie(this, "MidS1.mov");
  myMovieMVR = new Movie(this, "MVRfinal.mp4");
  myMoviePR = new Movie(this, "PeonyRootfinal.mp4");
  myMovieScutellaria = new Movie(this, "Scutellaria1.mov");
  myMovieSnow = new Movie(this, "snow.mp4");
  myMovieSpring = new Movie(this, "spring.mp4");
  myMovieWolf = new Movie(this, "Wolf1.mov");
  myMovieWPG = new Movie(this, "WPG1.mov");



  video[0] = myMovieAngelica;
  video[1] = myMovieAtract;
  video[2] = myMovieBitterness;
  video[3] = myMovieCinnamon;
  video[4] = myMovieDew;
  video[5] = myMovieDOP;
  video[6] = myMovieFirewood;
  video[7] = myMovieGinger;
  video[8] = myMovieGinseng;
  video[9] = myMovieJujube;
  video[10] = myMovieJute;
  video[11] = myMovieLicorice;
  video[12] = myMovieMidS;
  video[13] = myMovieMVR;
  video[14] = myMoviePR;
  video[15] = myMovieScutellaria;
  video[16] = myMovieSnow;
  video[17] = myMovieSpring;
  video[18] = myMovieWolf;
  video[19] = myMovieWPG;

  angelica1 = loadImage("Angelica_BZYQ.png");
  atractylodes1 = loadImage("Atrac_BZYQ.png");
  bitterness = loadImage("bitter.png");
  cinnamon = loadImage("cinnamon.png");
  dew = loadImage("dew.png");
  dried_orange_peel = loadImage("DOP.png");
  firewood1 = loadImage("FW_BZYQ.png");
  ginger = loadImage("Ginger.png");
  ginseng1 = loadImage("Ginseng_BZYQ.png");
  jujube = loadImage("jujube.png");
  jute = loadImage("Jute.png");
  licorice1 = loadImage("Licorice_BZYQ.png");
  midsummer = loadImage("Mid_sum.png");
  milkvetch1 = loadImage("MVR_BZYQ.png");
  peony1 = loadImage("PR_guizhi.png");
  scutellaria = loadImage("Scute.png");
  snow = loadImage("snow.png");
  spring = loadImage("spring.png");
  wolf = loadImage("Wolf.png");
  wpg = loadImage("WPG.png");

 start = loadImage("start_back.jpg");
 
  images[0]= angelica1;
  images[1]= atractylodes1;
  images[2]= bitterness;
  images[3] = cinnamon;
  images[4]= dew;
  images[5]= dried_orange_peel;
  images[6]= firewood1;
  images[7]= ginger;
  images[8]= ginseng1;
  images[9]= jujube;
  images[10]= jute;
  images[11]= licorice1;
  images[12]= midsummer;
  images[13]= milkvetch1;
  images[14]= peony1;
  images[15]= scutellaria;
  images[16]= snow;
  images[17]= spring;
  images[18]= wolf;
  images[19]= wpg;
  
  imageMode(CENTER);

  printArray(Serial.list());
  serialPort = new Serial(this, "COM5", 9600);
}

void draw() {
  background(start);

  getSerialData();

  for (int i = 0; i<20; i++) {
    if (arduino_values[i] ==1 ) {
      if (video[i].available()) {
      video[i].read();
    }
      video[i].play();
      image(video[i], width/2, height/2);
      image(images[i], 1754/4.8, 1240/4.8, 1754/2.4, 1240/2.4 );
    }
    else {
      video[i].pause();
    }
  }
}

void getSerialData() {
  while (serialPort.available() > 0) {
    String in = serialPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII
    if (in != null) {
      print("From Arduino: " + in);
      String[] serialInArray = split(trim(in), ",");
      if (serialInArray.length == NUM_OF_VALUES_FROM_ARDUINO) {
        for (int i=0; i<serialInArray.length; i++) {
          arduino_values[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

Interaction Lab Midterm Report

March 18, 2024 by Ruijia Hu Leave a Comment

The Escape Room — You’re Monitored

Instructor: Rodolfo Cossovich

Group members: Arial Hu & Jenny Tan

CONTEXT & SIGNIFICANCE

Before we start our project, we researched a lot using word entry ‘arduino interactive game’ on Youtube. The games that appear the most are target game, speed game, arcade game, maze and using arduino as a controller to play games on computer. Their interactions are engaging, repetitive and they take a short time to understand, which bring people’s attention to a immersive and highly concentrated standard.

According to this previous project Musical Swings by Daily Tous Les Jours, it is what regarded as a positive example of interaction. The object respond to user accoding to users’ behaviour. The ideas here overlapped with my comprehension of interaction. Within a short time, we could attrack participants so that their interest and desire would be mobilized, in this case, the Humen-Computer interaction could be smoother and more multiple. These specifities triggered my thinking towards our own midterm project——How to build a interactive and immersive game? As the games that listed above are common to build, me and my teammate related back to our own interest in immersive scenery. Both of us love to play room escape, the feeling of decryption is what we enjoy and we would like to share the joy with everyone. The uniqueness of this project is the presentation of a miniature form, we minimize the size of a real escape room and try our best to make the inner decoration seems real. This would surprise the participant with their first glimps and arouse their curiosity.

CONCEPTION & DESIGN

Motif

The idea of this room escape is originally from The Trumen Show. Trumen was monitered, but he found out the weirdness in his world and finally escaped. Let’s look at this in a different perspective and put our attention onto the one who is watching the show. It seems like they were monitoring Trumen and it’s true, however, their behaviour when reacting to the show was also recorded. In this case, they were monitored. Here comes the question, when we are monitoring others, are we not monitored? Monitor and monitored is inside a infinit loop, they exist on the same object for the same time.

According to this conceive, we intended to seperate our room escape into three parts. Help Trumen to escape, Trumen discovers himself been monitored, the participants found themselves been monitored. Our purpose is to remind our participants that while you are inspeciting others, you are been survalianced, so, be vortuous to the world and the people around you, and don’t let yourself be the target of criticisms and danger.

As we were going to build three rooms, we set the scene from the room where the character live to the room behind the camera to the monitoring room which monitor the participants.

We made the first room split into two halfs, when the participants trigger the last organ in the room, the two halfs will rotate to the side. For the sequence, there is a light sensor in the hollow bed, when the bed is open, the painting which sticks to a electronicmagnet sensor will fall down. After the participants destroy the journal that provide hint to the bed in the fireplace, a key will drop from the desk controlled by a servo. When using the key to open the wardrobe, a button is waiting to be pressed. After pressing it, the two halfs of the room rotate.

The mission in the second room is to clean up the studio so that the character could finally successfully escape. By catagorizing the stuffs into right place, the pressure sensor will reach certain value which triggers an audio and the rolling shutter door will open.

After the door open, the mirror behind will reveal and the participants could see their own face reflect by it.

Materials

For the rotation of the first room, we tried the blue little servo at first, but it could not stand the gravity, so we change a bigger motor to support the room. Mobilization and power are important factors here.

The back of the third room is a mirror, we decided to write “mirror” on the wall to pretend there is a mirror reflecting te participants’ face. But when considering the visualization and efficacy, we at last bought a mirror to make the project more complete.

FABRICATION AND PRODUCTION

Significant steps

This is the coding part. We divided the first room into three sections, the light sensor with the electromagnet sensor, the reed sensor with the servo and the botton with the motors. The code are seperately written and put together afterwards. It took us a long time to complete the combination of these codes, because they got chances to influence each other.

This is the machenism part. For the position of the two motors which make the halfs of the room rotate, we came up with three ideas. They could be stuck on the outside of the left and right wall of the box, or on the top of the box, or we could cut out the corners of the second room to stuck them in. When we tried the first method, the support rods of the motors were too far from the walls they supposed to connect or else it would be too fragile. If they are stuck on the top, the strength of the motor would easily make themselves rotate, because compared to the cardboard they needed to mobilize, they were too light. In this case, we chose the third way, and their positions could help them perfectily coordinate with other components.

Responsibility allocation and cooperation

I am good at fabrication and my teammate is good at popping up with ideas. So when it comes to cutting the cardboard, gluing the components, making adjustment and soldering, I become the mainforce and my teammate did a really good job in providing assistance. When it comes to link up the whole story and make the connection much smoother, my teammate provide most of the ideas and we filled it up with details together.

After user testing

During user testing, we guided our participants through the whole process. Some mentioned that they would like to clearly understand what their position was when first encountered teh game, a specific context would be better. They proposed that we could add more social issue to the project, for example, my friend is missing and the last place she at was the hotel, when we get into the hotel, we discover the camera and find out the truth. This was a good proposal, however, if we follow this logic, then the link among the three rooms would be not as fluent as it was before. In this case, we made our concept clearer, the participants here are randomly dropped in a room and they might discover something strange in it, soon they will know their mission is to observe the life of the character in the room and help him to escape, at last, they will surprisingly notice that their behaviour is under monitor.

When the tester encounters the second room, they felt a little bit confusing that to what extent they catagorize all the stuffs could the next step happen. We have several miniatures inside including PC, chairs and cameras, and we made three black blocks on the ground as a hint of where they should put them. The hint was not obvious enough, so we adjust the size of the blocks to the size of the stuffs to make it clearer.

For the connection of the three rooms, our ideas iterated a l, ot, so we let participants to make the choice so that we could figure out which is the most convenient for them. The choices are audio in a whole piece, a journal telling the background which is a little bit long and audio instructions after finishing each step. The feedback was, if the audio is not too long, then the participants would be patient enough to listen to it. So, we break down the audio into pieces and make it as short as they could, and turn the journal into the short instruction.

Obstacles

During fabrication, we encountered several obstacles which are as follows.

The first one is the reed switch. Once the value of the reed switch is ‘1,’ the servo it controls will rotate 70 degrees. The problem came as the servo will rotate by itself no matter we trigger the reed switch or not. Thanks to LA, she pointed out that these components should not be in series circuit but parallel circuit, and by reading the value by the pin could the arduino control the servo.

The second one is the rotation of the two motors. We aim to let them rotate simultaneously after the button is pressed, but one of them would automatically rotate right after we push the code and the other will rotate as we wish.

To fix this, we turned to professor Rudi for help and he helped us with coding.

The third one is the machenism of the rolling shutter door. We first decided to use a motor to drive the door(made by the cover of the cardboard) to roll up, but the resistance was too intense and the motor was unable to rotate. So we changed the cardboard cover into paper and use ur hand to roll it up. Hoever, after we rolled it up, the paper door would pop up and was very hard to restore. In this case, we made a funnel-like track at the top of the door to fix the last position of the roll and it turned out to be ok.

The fourth one is the application of the audio to arduino. Since it takes a long time to prepare, Rudi suggested that we could fake it till make it. We then record them in our phone and play them when the participants reach certain steps.

CONCLUSION

Our goal of this project is to bring the joy of escaping from the room by decoding and raise the awareness that we are all under survalliance, and it truly does attracted most of the participants. As I mentioned before, my definition towards interaction is ‘Within a short time, we could attrack participants so that their interest and desire would be mobilized, in this case, the Humen-Computer interaction could be smoother and more multiple.’ Our porject needs to improve is its timing, because it takes long for participants to finish. Additionally, the scale of the project could be larger or else the crowded feeling is not a good sign for user experience. Also, we could learn how to apply audio into coding so that the whole project could be more complete. IMA project never ends and we are looking forward to future development.

APPENDIX

Component list

Reed switch, light sensor, electronicmagnet sensor, servo button, pressure sensor, DIODE, power supply 5v*1
Motor, 10kΩ resistor*2

Sketch

Test for the electronicmagnet sensor

Final version

The code for the first part

#include <Servo.h>

const int lightSensorPin = A0;
const int electromagnetPin = 9;
const int pressurePin = A1;
const int servo1Pin = 5;
const int reedPin = 13;

Servo servo1;

void setup() {
Serial.begin(9600);
pinMode(electromagnetPin, OUTPUT);
pinMode(reedPin, INPUT);
servo1.attach(servo1Pin);
}

void loop() {
int lightSensorValue = analogRead(lightSensorPin);
digitalWrite(electromagnetPin, HIGH);
if (lightSensorValue > 50) {
digitalWrite(electromagnetPin, LOW);
}

int reedValue = digitalRead(reedPin);
Serial.println(reedValue);
if (reedValue == 1){
servo1.write(70);
}

Serial.print(“Light Sensor Value: “);
Serial.println(lightSensorValue);

delay(100);

int pressureValue = analogRead(pressurePin);
Serial.print(“Pressure: “);
Serial.println(pressureValue);
}

The code for the second part

#include <Servo.h>

const int servo2Pin = 6;
const int servo3Pin = 5;

const int buttonPin = 2;

Servo servo2;
Servo servo3;

void setup() {
Serial.begin(9600);

pinMode(buttonPin, INPUT_PULLUP);

servo2.attach(servo2Pin);
servo3.attach(servo3Pin);
servo2.write(0);
servo3.write(90);
delay(1000);
servo2.detach();
servo3.detach();
}

void loop() {
//Serial.println(digitalRead(buttonPin));
if (digitalRead(buttonPin) == LOW) {

servo2.attach(servo2Pin);
servo3.attach(servo3Pin);
servo2.write(90);
servo3.write(00);
delay(1000);
servo2.detach();
servo3.detach();
}

delay(100);
}

PROJECT B REFLECTION

December 8, 2023 by Ruijia Hu Leave a Comment

PROJECT B PREFLECTION

Part I Project description

The Little World

2023

Creative Coding

Arial Ruijia Hu

ELEVATOR PITCH

The Little World enables the participants to get a brief and direct feeling towards the social hierarchy. We all have our own stereotypical attitude towards certain social hierarchy, and we are always seeking for changes. This is why the society is developing——class struggle. But think about another question, are we really breaking the social hierarchy and can we truely break the social hierarchy? Is it possible to stay in chaos or utopia? From the graffiti and the characters’ inner emotions, we may find the answer by ourselves.

ABSTRACT

By clicking on the buttons, you can hear each character’s sound and see their inner expressions in a dialogue box.

This is a collection of different characters in four levels of social hierarchies.

The top-class presents a royal family. Everybody is having great fun and there is no need to worry about anything. The furnitures are luxurious, the dishes are delicate, the clothes are decorated by jewelies, the wine is well brewed, etc. Cashes surround them, mansions lived them… They could reach the best resource and the best quality of life.

The upper-class contains well-off people who have power and money, they are ministers who are receiving bribes, the rich seconds who are enjoying their lives, gangs who unbridledly use underground power, monopoly capitalists who leisurely hold his cigar, etc. Because of the wealth, they may do whatever they want, eat whatever they want, go wherever they want to enjoy their life. This is unreachable for people who are unable to get to economic independence.

The middle-class is closer to our daily life and we can find their shadows on each one of us. The bank clerks, the chefs, the teachers, the guards, etc. They are who we familiar with.

The low-class displays the people who are living at the bottom of our society. The one sleeps alongside the street or under the bridges, the one lives in the slum, the one bagging on the road, the one picking up the bottles and garbages, etc. We can witness their poverty and hunger and unsheltered, but what can we do? This is really what we should think about to improve our society!

However, live a healthy and happy life is what we should do. For social justice, we need to maintain kindness inside everyone and with the effort of everyone, we may be in the harmony.

EXPLORE IT HERE

FIRST PAGE SCREENSHOT

SECOND PAGE SCREENSHOT

THIRD PAGE SCREENSHOT

Part II REFLECTION

1）Process: Design & Composition

The inspiration is from a children’s picture book called A House With A Hundred Floors Underground, so the whole form of my third page is presenting in a scrolling down way. The movie called the Hunger Platform represents the hierarchy in a jail, and it’s obvious especially in a vertical narrative form. In this case, rather than simply telling a story, I can do something profound but easy to understand, just like in my final version, using the graffiti to disclose the standard hierarchy.

What makes my project different is that I made the graffiti into moving motion and there are dialogues and sounds applied aside. So the whole project is somehow complete.

2）Process: Tecnical

·localStorage

This is where I tackled for a long time. At first, I thought the localStorage is used in each of the JS, but as it takes down variables or so called values, we need to understand a parent-chilldren relationship. All the buttons are on the same main page, however they shouldn’t affect each other.In this case, localStorage should be used it the main JS, at the same time be put into the single JS page where the function that each of the button control, so that it could be taken out whenever the button is triggered.

I think this is quite similar to the boolean function, you let something to be true, but when a criteria change, it’ll turn false. The basic sentence should be you let localStorage.setItem(“state”, 0), and by changing the values, you trigger different things.

·iframe

I learnt this when I was finishing my Taichi project, and as I have 16 canvas, I found I could fit it into my final project. But the difficult part, for me, is cancel the frames around the canvas inside the divs. Moon helped me with this and the visualization is definitely better.

·div

By using different css properties, I learnt how to make the divs repeat and varies.

·setTimeout

It’s important to know where to put setTimeout. In the project, I was supposed to let the dialogue box appear for only two seconds, and I put setTimeout into the function that controls the button, as you can imagine, it won’t work. The fault I made it’s actually the same as the one in localStorage, it should be put into the main JS rather than in those single ones.

·use buttons to switch the motions

Because I have more than 4 sketches for one character, and I intended to make an emotion switch using the buttons, so I wrote two functions to present those different states and an additional function for the button which contains the booleans. This doesn’t sound hard, however, it took me a long time to come up with this. Right now, I figured out that whenever it needs to change the mode, boolean could be used.

·css: hover

This element is what the judge pointed out, to make the whole process seem more coherent, when the mouse is on the link, the link should change into color blue and be underlined. So I went to W3school to search for it, then fix it in my css.

3）Reflection and Future Development

The comments during the interaction day and final presentation impressed me a lot.
On the interaction day, since my theme is about hierarchy and the boxes are fixed, someone suggested that it would be better if participants could drag those boxes by mouse to create their own hierarchy while the expressions of those characters would change. This resonant with my idea that we have our own interpretation towards hierarchy, and we could change it to make the better world.
On the final presentation day, I was provided with more perspectives. People may relate to pyramids when talking about hierarchy, then why not use triangular pyramid to illustrate the idea? As 16 canvases together is a huge workload, then why not try to use specific ones so that the project would be more delicate and more focused. Also, when the participants trigger nothing, the first page and the third page are all black and white, it would be better to set the background of the second page to be black and white. The bouncing balls are cute, it would be nice if sounds would be generated when they bounce off. Clicking is necessary, but it could be clicking inside anywhere else in the box.

For future developments, I would seriously take the advice above. I notice that the interactions are too plain, so more chemical reactions could happen between different canvases, they can talk to each other!

All in all, IMA projects never end!!!

4）Credits & References

When I was exploring localStorage, I went to github to find resources, but barely understood them. And here are the references.

jeromegn/Backbone.localStorage: A localStorage adapter for Backbone.js (github.com)

localStorage/storage.js at master · machao/localStorage (github.com)

Mini project 7: Project B Website Draft

November 27, 2023 by Ruijia Hu Leave a Comment

The Little World Web Page Sketch

Arial’s Project B (ruijiahu.github.io)

demo

Description

In the vedio you can see two web pages. The first one is the cover which contains my title and some background designs. The second one is my main web page which contains loads of boxes inside.

The main idea of my project would be revealing hierarchies in cute grafitti. As you can see there are totally 16 boxes on the second page, which means there will be 16 symbolic characters been presented. The boxes are also divided into four categoties, the first three are in the top-class, the second four are in the upper-class, the third nine are in the middle-class and the fourth two are in the lower-class. Aligned with the sketch, I would add more background and interactive motions. So far, I have only figured out how to make a short clip of the cartoon by clicking the buttons (a prototype would be showing below). The next step is to fit the characters inside the boxes and attach sounds and dialogues when clicking the buttons.

Miss demo

Coding

In this part, I asked for Lin’s help. I was confused by cannot add any css into my html and I turned to her to see how she made it. At first, I copied her short example she provided me, however, it still couldn’t work. Just as I checked the console, I figured out that I input the incomplete path of my files. After correcting it, I finally made it.

However, when I was adjusting the position of each box, I found it inefficient and time-consuming to change the margin one by one but I couldn’t come up with a better idea and using class and id may mot be helpful because each of them have subtle differences. I should pursue a better solution……

Refelction

The coding made me be much more familiar with the boxes and css. There are much to explore and it’s a little bit complex to make it into words. I’ll try to make the visulization better and attach more css into my project. Just wait and see!!!

Wait for my furthur exploration!!!

Project B Proposal : The little world

November 9, 2023 by Ruijia Hu Leave a Comment

Description

The whole porject will be presented in a scrolling down visualization and the content is to reveal the social hierarchy. The target readers are adults who have already been invovled into the society.

There are 4 hierarchies in total.

On the top is a party which is held by the royal family or the president’s family. This is the ruling class. Everybody is having great fun and there is no need to worry about anything. The furnitures are luxurious, the dishes are delicate, the clothes are decorated by jewelies, the wine is well brewed, etc. Cashes surround them, mansions lived them… They could reach the best resource and the best quality of life, however, the waste they generated are huge.

The second level contains well-off people who have power and money, they are ministers who are receiving bribes, the rich seconds who are enjoying their lives, gangs who unbridledly use underground power, monopoly capitalists who leisurely hold his cigar, etc. Because of the wealth, they may do whatever they want, eat whatever they want, go wherever they want to enjoy their life. This is unreachable for people who are unable to get to economic independence.

The third level is more closer to our daily life and we can find their shadows on everyone of us. The bank clerks, the chefs, the taxi drivers, the teachers, the guards, etc. They are whom we familiar with and reflect me and you.

The last one displays the people who are living at the bottom of our society. The one sleeps alongside the street or under the bridges, the one lives in the slum, the one bagging on the road, the one picking up the bottles and garbages, etc. We can witness their poverty and hunger and unsheltered, but what can we do? This is really what we should think about to improve our society!

However, live a healthy and happy life is what we should do. For social justice, we need to maintain kindness inside everyone and with the effort of everyone, we may be in the harmony.

For how to interact, when you click on the characters, they may murmur in a cartoony tone and a dialogue blank with letters will appear. At the same time, the character would perform some gestures that are closely related to their identity. When you are not clicking anything, they will continue to do what they are doing.

Inspiration

Scrolling Down

The reason why I wanna use scrolling down as the story-telling way is because of this picture book that I had read before which tells the story of what has happened in the 100 floors underground. The book is designed vertically so that the readers could coherently scan through the pages containing 10 floors at one time. So, to apply the coherency to my project, scrolling down is what I am going to use.

Hierarchy? Levels? Layers?

The hunger platform displays a scene in a verticle hollow jail which has 333 floors where the same amout of food everyday is provided from the top of it and go down floor by floor. However, the more it gets down, the food is lesser and more polluted and the prisoners after 250 floor or so may not have anything to eat. So it not only presents the unfair condition in the jail, but also acts as the shadow of the unjust world. To make the layering of my story stronger, I will add some social issues that reveal the other side of the soiety.