Jingran Zhang

Pioneer Plaque

February 25, 2024 by Jingran Zhang Leave a Comment

Pioneer Plaque-Magnifying Glass

by Yixi & Jean

An important tool in the human world is the magnifying glass, a small and simple-structured optical instrument that helps people to a great extent in daily life. The device is so deceptively simple in its design, yet profoundly transformative in its function.

The need for this tool arises from inherent limitations in human vision and the necessity to perceive and comprehend intricate details that are otherwise imperceptible to the naked eye. In the human world, unfortunately, most people only have limited eyesight. We human beings can neither see things far away clearly nor catch the details of tiny things. To meet the demand for tasks requiring a clear view of distant things, close inspection of small objects, and fine details, the magnifying glass then came into existence to compensate for human visual limitations.

Magnifying glasses typically employ a convex lens made of glass or plastic as the main body, and add some plastic frame to make it holdable. Usually, a magnifying glass is as large as the size of a human being’s hand, which is easy to take and use. We used the difference between the eye of a young person and the one of an elderly to show the limited eyesight and the necessity of a magnifying glass.

The key part that backs up the function of a magnifying glass is the convex lens, shown in the plaque as well. A piece of convex lens is usually curved outwards, like a little bump in the middle. This shape is key because it helps bend light in just the right way. When light passes through the lens, it gets bent or refracted, making things look different. When an object is placed within the focal length of the lens, which is the distance between the lens and the point where the light converges, the lens bends the light rays coming from the object. Light rays emitted or reflected by the object navigate through the convex lens, converging at a focal point situated on the opposite side. It is at this juncture that the scattered beams coalesce into a unified entity, laying the foundation for the subsequent magnified imagery.

Then, on the same side as the object being looked at, a magnified image appears. It’s like a virtual copy of the thing that is being observed, but bigger and clearer. This wondrous virtual image materializes a larger-than-life representation that captures the essence of the original in exquisite detail. It is as if the magnifying glass possesses the power to unveil hidden dimensions of reality, revealing patterns, textures, and intricacies that elude the unaided eye.This trick works because of the way the lens curves and bends the light. Typically, greater curvature and shorter focal lengths yield higher magnification. Magnification is often quantified by comparing the size of the virtual image to that of the actual object.

In human beings’ everyday life, the portability and simplicity of magnifying glasses render them invaluable tools in countless scenarios. Magnifying glasses find myriad applications across diverse domains, enabling us to overcome the limitations of human vision and delve deeper into the mysteries of existence. It is a symbol of our insatiable curiosity, our relentless pursuit of knowledge, and our unwavering commitment to unraveling the secrets of the cosmos.

Sound Visualization

February 23, 2024 by Jingran Zhang Leave a Comment

Jingran Zhang

A Million Dreams (Reprise)

By Hugh Jackman, Austyn Johnson, Cameron Seely
From the Movie The Greatest Showman

Music Soundtrack
Movie Clip Version

Concept and Design

The song has two cute girls’ voices singing and a low man’s voice singing at the end, and there are the elements of violin and piano with a gentle flow. The song mainly gives the audience a dreamy and emotional feeling. Also, as the girls’ voices are singing together, I used similar and overlapping black and white “S” to show the echoing feeling in the sound. Also, from my perspective, though this song sounds pretty emotional, it is still powerful and curable with the use of low voice, and the girls’ sounds are committed.

By using the theories including similarity, closure, proximity, and continuity, I think the work applied the Gestalt theory well. The uses of different sizes and orientations of “S”s used the principle of similarity and good figures and can bring a neat image, the curved letters matching with the flow in the song as well. Also, with the “f”s connecting with each other on a curve, we can feel the continuity and the gentle flow in the song being represented. Also, with the use of black and white in the design, we can view the closure parts of the work. In the figure and ground relationship, I used the white color as my background and used the black color and color contrast to give the work more depth.

Process and Conclusion

In the process of the design, I had my first draft before the mid-critique. In this work, I used the comparison between black and white to show the difference between the sounds. Also, I wanted to build the feeling of the words bursting out from the dark side to the bright side. However, the results didn’t go well. The image gave the audience a realistic imagination of something growing from the ground as there was a straight separation between the colors, but the whole composition did not seem nice. Also, the dreamy and emotional feelings could not be shown as there were too many angles in the image.

(In Progress Work)

Therefore, in my adjustment to the work, I thought of the advice from the professor and my peers about using curves and creating a dreamy feeling in the work. I started over and kept the dreamy, magical, and emotional feeling with the long flow of the song. I started with the white background and S as my main figures and got them connected to show the feeling of echoing. Also, for the violin and piano played, I used typing on the path to use a lot of f on the way and create the feeling of flow with the principle of continuity. Then, I added the part of black to create depth in the image and show contradiction and closure in the image. I adjusted a lot on the color contradiction part to make it seem more balanced.

(In Progress Work)

If I had more time, I would consider adjusting the black part to make the figure and background clearer to be distinguished as the professor advised. Also, the change in the main figures can be shown more clearly to highlight the main part of the work.

Project Presentation

Reading Response—Story of Your Life

February 2, 2024 by Jingran Zhang Leave a Comment

How do the aliens’ language and communication styles in the story differ from human language (oral, pictographic, phonetic, etc.)?

Human beings communicate with oral language that each word has its pronunciation and the word has its own meaning. Words can be grouped and these combinations have their new meanings and can build up sentences. In oral communication, language is highly dynamic, allowing for nuances such as tone, pitch, and rhythm.
According to the reading, the oral language is quite similar between human and alien languages. The aliens’ language also has certain words with certain meanings based on their own lingual system. But the pronunciation of the words sounds more vague for us humans to recognize.

For written communications, human beings commonly use an alphabetic script. These alphabetic writing systems represent individual sounds or phonemes with symbols and can build words with different symbols or letter combinations. Also, logographic writing languages like Chinese use symbols to represent entire words or morphemes and arrange the words in lines to create sentences.
The aliens’ writing appeared to be logographic. They use images to indicate different meanings, but these images look more like a bunch of intricate graphic designs. For the combination of the words or sentences, the different graphic designs seem as if they had been melted together, and actually, some parts of the logographic writings were rotated and distorted to show the combined groups in words. The logograms weren’t arranged in rows, a spiral, or any linear fashion. Instead, the aliens would write a sentence by sticking together as many logograms as needed into a giant conglomeration without punctuation. According to the linguist, it’s a complex semasiographic writing system. It appeared that a semagram corresponded roughly to a written word in human languages: it was meaningful on its own, and in combination with other semagrams could form endless statements.

According to the reading, the aliens’ language didn’t follow the pattern of human languages, as expected, but it was comprehensible so far: free word order, even to the extent that there was no preferred order for the clauses in a conditional statement, in defiance of a human language “universal.” It also appeared that the heptapods had no objection to many levels of center-embedding of clauses, something that quickly defeated humans. Peculiar, but not impenetrable. The heptapods didn’t write a sentence one semagram at a time; they built it out of strokes irrespective of individual semagrams.

In human language, our speaking and writing of the language are corresponded. But aliens have two systems for writing and speaking. For the alien heptapods, all language was performative. Instead of using language to inform, they used language to actualize. It has its own system of rules for constructing sentences, like a visual syntax that’s unrelated to the syntax for their spoken language.

How does the physical structure of our body inform the way we communicate? How about the aliens?

As human beings, we use our larynx to make sounds and pronounce different words with tones and rhythms. Also, we use gestures and body language to express our moods or relate to the content spoken. Humans also use their auditory system to recognize the sounds that a human larynx makes to communicate. Human beings also use writing to communicate, using the alphabetic and logographic systems to represent the languages.

The heptapod aliens probably used their bodies to speak as the linguist heard brief fluttering sounds and saw a puckered orifice at the top of its body vibrating, possibly showing that it was talking. The aliens have an orifice on the underside of their body, lined with articulated bony ridges: probably used for eating, while the one at the top was for respiration and speech. For writing, they did semasiographic writing by inserting limbs into a large socket in the pedestal and creating a doodle of the script.

Also, the reason why the logograms are rotated can be related to their body structure. The aliens’ script isn’t word-divided as a sentence is written by joining the logograms for the constituent words. They join the logograms by rotating and modifying them. Since their bodies have radial symmetry, they don’t have a concept of forward direction, so they can read a word with equal ease no matter how it’s rotated.

One Black Square

January 31, 2024 by Jingran Zhang Leave a Comment

In the first assignment One Black Square, we applied Gestalt Theory to designing black-and-white compositions. With a 13*13cm black square, we created a design on a white background.

For my first work, I used a circle that was separated into parts and assembled the parts into a main pattern. Using the principles of closure, I created several circles and semicircular shapes. Also, I used the symmetry principle to make the composition seem more arranged. I placed this main structure at the one-third point of the canvas to make it more stressed and make the composition more balanced.
For the materials left, I used the principle of similarity to cut the pieces into certain groups of shapes and placed them on the other part of the composition. With the pieces paving the way to the left-up corner, there is a continuity can be seen in the image. Most of the elements are round on the bottom side and the angles are sharp on the upper side. I tried to create a comparison and make the composition more balanced in this way.

For the second piece, I used the similarity principle and cut the square into several isosceles right triangles. To make the work more creative, I cut some of the triangles into pieces and use proximity principle to arrange them and make some intersections between the triangles.
By removing some small triangles between the crossover part, I created closure also. For the leftover triangles, I used symmetry and continuity principles to arrange them to the two sides of the composition. Also, when attaching them to the background, I used the one-third rule to place the beginning and ends of the triangles to make it more balanced. From the composition, I hope the audience can find the feeling of flowing in the image.

For the additional piece, I still used circles as the main element in my composition. I tried cutting the circle into pieces and arranging them based on the symmetry principle. Then I separate them into smaller rectangular shapes and arrange them based on the proximity principle, giving the sense of movements. With making a space between the central circle and the edges of the piece, I created a closure there. Also, I followed the continuity rule for the central circle edition and symmetry for the other parts approaching the edges.

Interaction Lab Final Project

December 11, 2023 by Jingran Zhang Leave a Comment

Have A Cuppa Tea!

–Interaction Lab Final Project

Jean Zhang
Instructor: Eric Parren

CONCEPTION AND DESIGN

This project aimed to give the participants an experience of making a cup of British tea in a playing-house game with great visuals in the form of a hands-on interactive game and also to teach the participants the manners of British tea culture. The participants can use the props within the whole 3D-printed tea set and follow the instructions on the screen to complete the game. With different sensors on the props, the movements of the props can be detected and the game will move on to the later steps. We did quite a lot of research on British tea culture and Luna wrote the script for the game and produced short videos for different steps, showing the process moving on in the game. (The full script is in the appendix.)

In the User Testing session, I found that most of the steps moving on controlled by the stages in the codes worked well, but some of the sensors were too sensitive and some not sensitive enough, and some more interesting interactions could be added. For example, the teapot was useless as it did not bring to another step. Therefore, with the advice of the users and learning from Ninj and Audury’s project, I decided to add a tilt sensor to allow the pouring movement of the teapot and the creamer. I replaced some other sensors to make the sensing of the movements more appropriate and accurate. Also, we found the suggestion of adding more sound effects and having the lines on the screen read out loud with a British accent very helpful. I’ve also simplified and removed some of the unnecessary steps in the flowchart in favor of more concise and clear steps after the session. For example, after a failure, the participants can proceed to the next step by pressing a certain button instead of starting over.

FABRICATION AND PRODUCTION

Fabrications

For the props, with the help of Thingiverse.com, I found the pretty tea set model and printed them with the 3D printer. It took more than 40 hours in total to print the whole tea set, but it was a significant result to be seen. Getting rid of the support printed required great patience, and I learned how to use the BambuStudio. Great thanks to Dalin, Freddie, and the 3D printer! And Luna then painted them into a more adorable tea set with colors.

To attach the sensor to the prop, Dalin taught me to use a drill to create small holes in the tea set to get the wires through. (Using drill is really a stress-relieving work :))

Also, laser cutting was used in the project. For the tray of tea sets, Luna did the design part, and I did calculations according to the size of the props and got it cut. Also, I used makercase.com to design the box to hide the electronics. I drew some circles on the board and carved some words on the board. With the woodworking glue and hot glue, I assembled the box and the tray. Also, I cut some holes on the board to give the way for the wires to get out.

Cuttle Design:

Electronics

For the electronics part, I tested different sensors for detecting different movements upon the props.
I used sensors including light sensors, touch sensors, tilt sensors, force sensors, and an ultrasonic distance sensor. I tried these sensors for different functions needed in the game. For example, I originally used a light sensor to detect if the teabag was placed in the teacup. However, it turned out that it was kind of hard to control the data as it was the analog input, and the teabag was not always put in the perfect position. Therefore, I chose the magnet sensor as the digital reading is easier and I can stick some magnets to the teabag (which was also laser-cut). Also, the other sensors were used for detecting different movements. (The diagram of the circuit and the comments in the codes show details.)

Sensor Testing:

Also, I met the problem of the tilt sensor being too sensitive and there was chance that when there is no relevant movement and then other factors intervene and lead to the wrong detection. Gohai helped me with this problem by providing me the circuit used in the recitation in the previous semesters and taught me how to add the capacitors in the circuit to make the tilt sensor work more stable.

To make sure the wires are long enough for being connected to the props, I soldered the sensors to longer wires.

I put a lot of pull-down sensors to make sure the sensing work well. Here is the simplified diagram for the circuits. (Some of the sensors cannot be found in Tinkercad, so I simply drew them by myself.)

Codes

The coding part is the most important thing making the whole project work. For the different steps, I used stage function to show the steps. With the sensors detected and the serial communication, I used if structure to lead the stages into the later steps. With the basic function of playing movies, the certain video would be played in the certain stage. With the int of stage, boolean of stageX and changing the stage in the process of the game, the problem of the errors recur incorrectly or won’t jump correctly from one step to the next. I met quite a lot problems in the process of coding, and I would like to list a few most interesting and major problems I met as follows.

Problem 1: Sounds

As I input the videos in setup, the sounds are automatically played at the beginning and won’t be played again. The visuals also get stuck due to this problem of the videos looping in the very first place. Therefore, I replaced those with putting only one loop before the certain video have to be played.

When the audio goes crazy:

Problem 2: Time count

Time count was used a lot in this design. For the most important part that the participants should remove the teabag from the teacup, the time count would decide which stage the game is going to enter. With Kevin and Andy’s help, I revised my prevVal int and make the time count in the stage statement instead of letting it count itself and use the data afterwards. In this way, the time is only counted once, and the results can lead the game into the other stages, moving on in the steps of interactions.

  if (stage == 3) {
    if (D1Looped == false) {
      D1.loop();
      D1Looped = true;
    }
    image(D1, 0, 0, width, height);//if water poured, start time count
    C1.stop();

    val1 = arduino_values[7];

    if (stage3 == true) {
      //if water poured, start timecount

      if (waterfirst==false) {
        startTime1 = millis();
        waterfirst = true;
      }
    }
    if (prevVal1 ==1 && val1 == 0) {
      print("Teabag Removed after ");
      println(millis() - startTime1);
      timecount1 =millis()-startTime1; //timecount for picking teabag out

      if (timecount1 > 10000 && timecount1 < 12000) {
        stage = 7;
        stage7 = true;//if succeed in timecount, add milk
      }

      if (timecount1 > 12000) {
        stage = 8;
        stage8 = true;//slow
      }

      if (timecount1 < 10000) {
        stage = 9;
        stage9 = true;
      }
    }
    prevVal1 = val1;
  }

Problem 3: Stages

The stages must be the most important part in the game like this with different steps. I initailly put the if functions that are related to the sensors in Arduino out of the stage and that makes the sensing and stage defining all at the very beginning. With the help of Gohai, I decided to put these if functions that decide the stages in the previous stages to make sure they are deciding after one certain step is finished. In this way, the process is moving on step by step and the movements in different stages would not intervene each other.

CONCLUSIONS

For the project itself, I believe it achieved the initial goal of giving the audience a great experience of interactive game. There are multiple steps the audience can do (even more than the amount expected) being detected in the game and the interaction varies from each other. In terms of improvement, I think I can include more interesting steps and make the sensing of the movements more accurate. For myself, I did not expect that I can complete such complicated codes (at least they are complex enough for me). I felt the serial communication is really interesting and I could even play a lot more with the sensors and steps in the game for improvement if time permitted.

DISASSEMBLY

I returned all of the items I borrowed from ER. And the other stuff are all from the kits, therefore I just brought the project home 🙂

FULL VIDEO DOCUMENTATION

(cr. Jean)

Product Trailer (cr. Luna)

APPENDIX

Full Scripts (Early version):

START: Have a cuppa tea ->a1

A1: Boil the water. Kettle or microwave oven? Kettle->b1; Microwave oven->a2

A2: For crying out loud, never microwave your brew. It will taste like anything but tea. (Failed)

B1: Bloody brilliant choice. Warm the cup and teapot by swirling boiling water around them. ->c1

C1: Put water and teabags into the teapot. Loose tea is recommended though. ->d1

D1: Wait for 5 minutes. Watch out for the time…you can still be faffing around though.

In time->e1; Fast->d2; Slow->d3

D2: Oh…Hold your horses! (Failed)

D3: Too slow! (Failed)

E1: Add the milk from the creamer or milk jug, whatever you call it. ->f1

F1: Though it’s horses, of course, add some sugar if you’d like to. ->g1

G1: Stir the tea gently.

Proper->h1; Improper->g2

G2: Oh…Naff noise. It should be in a back-and-forth, up-and-down manner, and remember to keep the spoon away from touching the cup. (Failed)

H1: Hunky-dory! One more step. Place the spoon back to the saucer.

Proper->i1; Improper->h2

H2: Lad…Stop throwing a wobbly and leave it out. Put it behind the cup. (Failed)

I1: Take the cup and sip the tea.

Proper->fin; Improper->i2

I2: Mate, you are throwing a spanner in the works again…No cradling the cup and raising your little finger. Use your thumb and forefinger to hold, never hook them under the handle. (Failed)

FIN: That’s a cracking cuppa, innit? Enjoy it, and Cheers!

References

First-step research (British tea culture):

https://www.oxfordinternationalenglish.com/dictionary-of-british-slang/

https://twinings.co.uk/blogs/news/tea-etiquette

https://www.huffpost.com/entry/british-tea-etiquette-how-to-drink-it-downton-abbey-style_b_8656634

https://www.wikihow.com/Hold-a-Teacup

Narrations: https://ondoku3.com/en/

BGMs: https://pixabay.com/music/

Box Design: https://en.makercase.com/#/basicbox

3D Printing (Tea set): https://www.thingiverse.com/thing:5913112

Props

Additional Visuals

IMA Show🤩

Full Codes

Arduino:

const int trigPin = 9;
const int echoPin = 10;
int val;
int prevVal;
long startTime;
float duration, distance;

void setup() {
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
  Serial.begin(9600);
}

void loop() {
  // to send values to Processing assign the values you want to send
  // this is an example:
  int sensor0 = digitalRead(13);  //button, control if the game starts
  int sensor1 = analogRead(A1);   //light, if the teabag is placed correctly
  int sensor2 = digitalRead(12);  //tilt1, teapot movement
  int sensor3 = digitalRead(8);   //tilt2, creamer movement
  int sensor4 = analogRead(A0);   //fsr1, if the spoon touch the cup when stir
  int sensor5 = digitalRead(2);   //touch1, if the spoon is put back to the sauser correctly
  int sensor6 = digitalRead(7);   //magnet1, putting the teabag to the certain position
  int sensor7 = analogRead(A2);   //fsr2
  int sensor8 = analogRead(A3);   //fsr3
  int sensor9 = digitalRead(4);   //touch2, if the spoon is put back in wrong ways
  // int sensor10 = digitalRead(3);  //tilt3, teacup movement

  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);  //ultrasonic

  duration = pulseIn(echoPin, HIGH);
  distance = (duration * .0343) / 2;

  // send the values keeping this format
  Serial.print(sensor0);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor1);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor2);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor3);
  Serial.print(",");  // put comma between sensor values
  Serial.print(distance);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor4);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor5);
  Serial.print(",");
  Serial.print(sensor6);
  Serial.print(",");
  Serial.print(sensor7);
  Serial.print(",");
  Serial.print(sensor8);
  Serial.print(",");
  Serial.print(sensor9);
  // Serial.print(",");
  // Serial.print(sensor10);
  Serial.println();
  delay(20);

  // too fast communication might cause some latency in Processing
  // this delay resolves the issue
  // end of example sending values
}

Processing:

import processing.serial.*;
import processing.video.*;

Serial serialPort;
int NUM_OF_VALUES_FROM_ARDUINO = 11;  /* CHANGE THIS ACCORDING TO YOUR PROJECT */

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

Movie start;
Movie A1;
Movie A2;
Movie B1;
Movie C1;
Movie D1;
Movie D2;
Movie D3;
Movie E1;
Movie F1;
Movie G1;
Movie G2;
Movie H1;
Movie H2;
Movie I1;
Movie I2;
Movie fin;

boolean jumped = false;

boolean stage1 = false;
boolean stage2 = false;
boolean stage3 = false;
boolean stage4 = false;
boolean stage5 = false;
boolean stage6 = false;
boolean stage7 = false;
boolean stage8 = false;
boolean stage9 = false;
boolean stage10 = false;
boolean stage11 = false;
boolean stage12 = false;
boolean stage13 = false;

int stage = 0;

int val1;
int prevVal1;
int val2;
int prevVal2;
int val3;
int prevVal3;
long startTime1;
float timecount1;
int startTime2;
float timecount2;
int startTime3;
float timecount3;
int startTime4;
float timecount4;
int startTime5;
float timecount5;
boolean firstVideoPlayed = false;

void setup() {
  fullScreen();
  size(1000, 700);
  printArray(Serial.list());
  // put the name of the serial port your Arduino is connected
  // to in the line below - this should be the same as you're
  // using in the "Port" menu in the Arduino IDE
  serialPort = new Serial(this, "/dev/cu.usbmodem1101", 9600);


  start = new Movie(this, "start.mp4");
  //don't play audio
  //start.loop();
  A1 = new Movie(this, "A1.mp4");
  //A1.loop();
  A2 = new Movie(this, "A2.mp4");
  //A2.loop();
  B1 = new Movie(this, "B1.mp4");
  //B1.loop();
  C1 = new Movie(this, "C1.mp4");
  //C1.loop();
  D1 = new Movie(this, "D1.mp4");
  //D1.loop();
  D2 = new Movie(this, "D2.mp4");
  //D2.loop();
  D3 = new Movie(this, "D3.mp4");
  //D3.loop();
  E1 = new Movie(this, "E1.mp4");
  //E1.loop();
  F1 = new Movie(this, "F1.mp4");
  //F1.loop();
  G1 = new Movie(this, "G1.mp4");
  //G1.loop();
  G2 = new Movie(this, "G2.mp4");
  //G2.loop();
  H1 = new Movie(this, "H1.mp4");
  //H1.loop();
  H2 = new Movie(this, "H2.mp4");
  //H2.loop();
  I1 = new Movie(this, "I1.mp4");
  //I1.loop();
  I2 = new Movie(this, "I2.mp4");
  //I2.loop();
  fin = new Movie(this, "fin.mp4");
  //fin.loop();
}

boolean startLooped = false;
boolean A1Looped = false;
boolean A2Looped = false;
boolean B1Looped = false;
boolean C1Looped = false;
boolean D1Looped = false;
boolean D2Looped = false;
boolean D3Looped = false;
boolean E1Looped = false;
boolean F1Looped = false;
boolean G1Looped = false;
boolean G2Looped = false;
boolean H1Looped = false;
boolean H2Looped = false;
boolean I1Looped = false;
boolean finLooped = false;
boolean waterfirst=false;
boolean stirfirst=false;
boolean pourfirst=false;
boolean milkfirst=false;

void draw() {

  println("stage: " + stage);

  getSerialData();

  if (start.available()) {
    start.read();
  }
  if (A1.available()) {
    A1.read();
  }
  if (A2.available()) {
    A2.read();
  }
  if (B1.available()) {
    B1.read();
  }
  if (C1.available()) {
    C1.read();
  }
  if (D1.available()) {
    D1.read();
  }
  if (D2.available()) {
    D2.read();
  }
  if (D3.available()) {
    D3.read();
  }
  if (E1.available()) {
    E1.read();
  }
  if (F1.available()) {
    F1.read();
  }
  if (G1.available()) {
    G1.read();
  }
  if (G2.available()) {
    G2.read();
  }
  if (H1.available()) {
    H1.read();
  }
  if (H2.available()) {
    H2.read();
  }
  if (I1.available()) {
    I1.read();
  }
  if (I2.available()) {
    I2.read();
  }
  if (fin.available()) {
    fin.read();
  }



  if (stage == 0) {
    if (startLooped == false) {
      start.loop();
      startLooped = true;
    }
    image(start, 0, 0, width, height);//play start

    if (arduino_values[0] == 1) {
      stage = 1;
      stage1 = true;
    }//if button pressed, choose k/m
  }


  if (stage == 1) {
    if (A1Looped == false) {
      A1.loop();
      A1Looped = true;
    }
    image(A1, 0, 0, width, height);//if button pressed, choose k/m
    start.stop();

    if (key == 'm' || key == 'M') {
      if (A2Looped == false) {
        A2.loop();
        A2Looped = true;
      }
      image(A2, 0, 0, width, height);
      A1.stop();
    }//if choose microwave, fail the game, tell on the screen to press K

    if (key == 'k' || key == 'K') {
      if (B1Looped == false) {
        B1.loop();
        B1Looped = true;
      }
      image(B1, 0, 0, width, height);
      A1.stop();
      A2.stop();
    }//if choose kettle, go on to put teabag

    if (arduino_values[7] ==1) {
      println("Teabag detected");
      stage = 2;
      stage2 = true;
    }//if teabag put to the certain position in the cup, start to pour water
  }


  if (stage == 2) {
    if (C1Looped == false) {
      C1.loop();
      C1Looped = true;
    }
    image(C1, 0, 0, width, height);
    B1.stop();

    val2 = arduino_values[2];

    if (prevVal2 == 0 && val2 == 1) {
      if (pourfirst==false) {
        startTime4 = millis();
        pourfirst = true;
        println("water start pouring");
      }
    }
    if (prevVal2 == 1 && val2 == 0) {
      timecount4=millis()-startTime4;
      print("water pouring stops after");
      println(timecount4);
    }

    if (timecount4 > 5000) {
      stage = 3;
      stage3 = true;
    }//if water poured and pot put back, start time count
    prevVal2=val2;
  }


  if (stage == 3) {
    if (D1Looped == false) {
      D1.loop();
      D1Looped = true;
    }
    image(D1, 0, 0, width, height);//if water poured, start time count
    C1.stop();

    val1 = arduino_values[7];

    if (stage3 == true) {
      //if water poured, start timecount

      if (waterfirst==false) {
        startTime1 = millis();
        waterfirst = true;
      }
    }
    if (prevVal1 ==1 && val1 == 0) {
      print("Teabag Removed after ");
      println(millis() - startTime1);
      timecount1 =millis()-startTime1; //timecount for picking teabag out

      if (timecount1 > 10000 && timecount1 < 12000) {
        stage = 7;
        stage7 = true;//if succeed in timecount, add milk
      }

      if (timecount1 > 12000) {
        stage = 8;
        stage8 = true;//slow
      }

      if (timecount1 < 10000) {
        stage = 9;
        stage9 = true;
      }
    }
    prevVal1 = val1;
  }

  if (stage == 7) {
    if (E1Looped == false) {
      E1.loop();
      E1Looped = true;
    }
    image(E1, 0, 0, width, height);//if succeed in timecount, add milk
    D1.stop();
    D2.stop();
    D3.stop();


    val3 = arduino_values[3];
    
      if (prevVal3 == 0 && val3 == 1) {
      if (milkfirst==false) {
        startTime5 = millis();
        milkfirst = true;
        println("milk start pouring");
      }
    }
    if (prevVal3 == 1 && val3 == 0) {
      timecount5=millis()-startTime4;
      print("milk pouring stops after");
      println(timecount5);
    }

    if (timecount5 > 5000) {
      stage = 4;
      stage4 = true;
    }//if water poured and pot put back, start time count
    prevVal3=val3;
    
  }

  if (stage == 8) {
    if (D3Looped == false) {
      D3.loop();
      D3Looped = true;
    }
    image(D3, 0, 0, width, height);//too slow
    D1.stop();

    if (key == ENTER) {
      stage = 7;
      stage7 = true;
    }
  }

  if (stage == 9) {
    if (D2Looped == false) {
      D2.loop();
      D2Looped = true;
    }
    image(D2, 0, 0, width, height);//too fast
    D1.stop();

    if (key == ENTER) {
      stage = 7;
      stage7 = true;
    }
  }


  if (stage == 4) {
    if (F1Looped == false) {
      F1.loop();
      F1Looped = true;
    }
    image(F1, 0, 0, width, height);//if creamer moves, go on to add sugar
    E1.stop();

    if (arduino_values[4] < 7) {
      stage = 5;
      stage5 = true;
    }//if sugar added, go on to stir
  }


  if (stage == 5) {
    if (G1Looped == false) {
      G1.loop();
      G1Looped = true;
      startTime2 = millis();
    }
    image(G1, 0, 0, width, height);//if sugar added, go on to stir
    F1.stop();

    if (arduino_values[5] > 4) {
      stage = 13;
      stage13 = true;
    } else if (arduino_values[8] > 4) {
      stage = 13;
      stage13 = true;
    } else if (arduino_values[9] > 4) {
      stage = 13;
      stage13 = true;
    }


    if (millis() - startTime2 > 9500) {
      stage = 10;
      stage10 = true;//stir ends, go on to put down spoon
    }
  }
  // }

  //backup plan for getting to the next step
  //if (arduino_values[7] == 1) {
  //  stage = 10;
  //  stage10 = true;
  //}//if time up (use magnet sensor here), go on to put the spoon
  // }

  //else if(arduino_values[5] == 0){
  // image(H1, 0, 0, width, height);
  //}
  ////if the spoon doesn't touch the cup, continue to put back the spoon

  if (stage == 13) {
    if (G2Looped == false) {
      G2.loop();
      G2Looped = true;
    }
    image(G2, 0, 0, width, height);
    G1.stop();
    //if the spoon touch the cup(pressure on the sensor-fsr), fail the game

    if (key == 'g' || key == 'G') {
      stage = 10;
      stage10 = true;
    }
  }

  if (stage == 10) {
    if (H1Looped == false) {
      H1.loop();
      H1Looped = true;
    }
    image(H1, 0, 0, width, height);//if stir well, put back the spoon
    G1.stop();
    G2.stop();


    if (arduino_values[6]==1) {
      stage = 6;
      stage6 = true;//put back spoon correctly
    } else if (arduino_values[10]==1) {
      stage = 11;
      stage11 = true;//put back spoon incorrectly
    }
  }


  if (stage == 11) {
    if (H2Looped == false) {
      H2.loop();
      H2Looped = true;
    }
    image(H2, 0, 0, width, height);//put the spoon wrong, fail
    G1.stop();
    G2.stop();
    H1.stop();

    if (key == 's' || key == 'S') {
      stage = 6;
      stage6 = true;
    }
  }

  if (stage == 6) {
    if (I1Looped == false) {
      I1.loop();
      I1Looped = true;
      startTime3 = millis();
    }
    image(I1, 0, 0, width, height);//put the spoon correctly, move on to drink

    G1.stop();
    G2.stop();
    H1.stop();
    H2.stop();

    if (millis() - startTime3 > 8000) {
      stage = 12;
      stage12 = true;//teacup movement, drink tea
    }
  }


  if (stage == 12) {
    if (finLooped == false) {
      fin.loop();
      finLooped = true;
    }

    image(fin, 0, 0, width, height);//drink tea, to the end
    I1.stop();
  }


  //still have to make the whole thing work step by step
}

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]);
        }
      }
    }
  }
}

Credits to

Andy Garcia
Eric Parren
Gottfried Haider
Kevin Xu
Shengli Wen
Dalin Zang

Rachel Li
Amelia Shao
Anya Zhukova
Freddie Yang
Sophia Wan

Yanran Deng
Tina Liu
Ting Yang
Lareina Chen
Matsa Sun

Greatest gratitude also to all the friends and testers who helped or gave comments during the whole process!!!

Trick-or-Treat!

October 21, 2023 by Jingran Zhang Leave a Comment

Midterm Project By Jean Zhang & Luna Zhang
Instructor: Eric Parren

Trick-or-Treat! is a mini theater that gives the participants a chance to pick a Halloween character by themselves and to interact with the character through interactions including sound and light effects, and receiving trick or treat, giving the participants a full Halloween spirit.

Inspiration

From the Group Research project, we created a prototype for a machine that can heal people’s emotions with high-tech power and music and visuals. In this project, we used a box that can be imagined as a mini-TV that shows the visuals and sounds. It to some degree inspired the idea of a mini theater for Halloween. Through the group projects, interactions happen between the participants and certain artifacts made in the performance, through the ways of visuals, sounds, or other more direct feelings. Actually, we first considered the project of a horror doll that can terrorize the participants in interaction. However, sensing different interactions and designing various ways of scaring people can be too complicated. By the way, for a wuss like me, doing this project was overly scary. Therefore, as Halloween is approaching, we wanted to keep the horror elements by using the theme of Halloween and turned it into a project of Halloween trick-or-treat mini theater, which may be more interesting and cuter.

Concept and Design

The concept of trick-or-treat theater is that when participants push the button of a lucky draw, they would have a chance to randomly pick a Halloween classic character. In the mini-theater, the chosen character would show up with its lines and lightning and sound effects. Also, a more direct interaction would be delivered as the participants would randomly get candy or a fake spider model which represents the treat and the trick. It is totally about the festival theme, giving the audience a Halloween spirit and having a simple variant form of trick-or-treat activity.

The user’s interactions with the project include picking a character with a random choice of their own, enjoying the visuals and sound of the characters, and getting the trick or the treat. Under this setting, we used the lucky wheel draw controlled by a push button and a servo motor. Also, we used a stepper motor to control the turntable display stand which is like a merry-go-round. We found some friends to record the lines of the characters and mix those with sound effects and creepy music. For all the different light and sound effects, we used a Neo pixel LED stripe and speakers to play them, by which we can achieve super cool effects. Also, for the candy/spider giver, we used a stepper motor to create a device like a waterwheel that sweeps out the candy as they were the easiest one to control and can achieve many goals in the project. In the codes, we give the push button the whole control of the system that a random number is picked from the six characters, and then the lucky wheel, the display stand, the sound and light effects, and the distribution of the tricks and treats will all work according to the certain character (correlated random number) picked as we used the command of different states.

cr. Luna

As the project is a construction including various forms of spinning mechanisms, we struggled with the choice of motor for a long time. From DC motors, stepper motors, servo motors, linear motors, we finally chose stepper motors and servo motor for the spinning stand, candy giver wheel and lucky pick wheel. Also, our project was simplified in some ways. In the proposal, we thought of using a small LCD screen to display selected character every time after lucky wheel pick. But as the characters would simply be shown “on stage”, we removed this part to make it less complicated.

Fabrication and Production

For the project, we used cardboard and fabric most of the time. We initially made a mini theater box as a base, a wheeling display like a carousel to hold our characters, a fortune wheel and other accessories. After that we made the project initially easy to run by connecting the various motors and devices.

We bought some of the electronic components ourselves, such as mp3 decoders, but we couldn’t get them to work correctly in the circuits due to mismatches in the code and the system. But we explored a lot about the other electronics to make the whole project work very well. We did encounter some problems such as the connection of whole structure, servos not working or codes going wrong, but we also overcame them.

Crazy servos ⬇️

As partners, Luna and I worked well together, we quickly agreed on the topic and production style. In terms of division of labor, I was mainly in charge of crafting, lighting and production, she was mainly in charge of art, sounds and decoration, and we always worked together on the code and circuitry part of the project. Also, the learning assistants, lab assistants and fellows were very kind to help. Moreover, we invited our friends to record the sounds effect of the characters, which was a really interesting task for us to do. Fortunately, we got a lot of positive feedback on the user test, but we also got a lot of valid comments, such as the clarity of the sound effects, the layout of the decorations and circuits, the indication of the role of each device, the variety of lights and a more direct form of interaction. So, one by one, we improved these aspects, and thus added the color changing of the Neo pixel LED stripe and the device of sugar or fake spiders. These suggestions and the changes we ended up using were very helpful and made our project more interactive.

During Testing Session:

First time the NeoPixel LED stripe worked successfully

Saving the code with my super favorite LA Rachel! 😘

During the Presentation

Conclusions

Our project did a good job of accomplishing the plan inside the proposal. We have varied interactions, such as sound and light effects and trick-or-treat delivery. At the same time, the setup and running of our installation went very well, and the audience gave us a lot of positive comments after participating in the activity. If we had more time, we might consider improving and merging some of our code, setting up where the audience stands or sits when interacting, designing the initialization of lights and curtains, and corresponding the relationship of candy and trick-or-treating to the characters to have better interactions.

Appendix

Documentation Visuals

Our Cute Characters

Other Props

Material Lists

Arduino UNO

(Breadboard)

Servo Motor
(connected to the lucky wheel)

Push Button (resistor within)
(With larger button)

Capacitive (Touch) Sensor

Mini DY-SV5W MP3 Player Module Trigger

Stepper Motor (42STH33-0404AC)

12 Volt Power Supply

Stepper Motor Driver Module with Barrel Jack Connector pre-connected

Speakers

Neopixel Strip

“Waterwheel” Built with Stepper Motor

Wires (Including MM&FM)

Lines

Witch: “Brewing up some magic tonight.”

Corpse Bride: “Love, it is a flower, and you, its only seed.”

Mermaid Skeleton: “Beneath the waves, where bones now rest, a mermaid’s tale, of love confessed.”

Ghost: “I’m here for the haunting.”

Mummy: “Wrapped up in ancient secrets.”

Spider: “Weave a web of spooky fun!”

Line Recordings/Sound Effects

Witch:

Corpse Bride:

Mermaid Skeleton:

Ghost:

Mummy:

Spider:

Full Codes

1) For Main Arduino


```cpp
#include 
#include 
#include "DYPlayerArduino.h"
SoftwareSerial SoftSerial(10, 11);  //RX and TX from Arduino
DY::Player player(&SoftSerial);     //should connect them to io0 and io1
// Simple demonstration on using an input device to trigger changes on your
// NeoPixels. Wire a momentary push button to connect from ground to a
// digital IO pin. When the button is pressed it will change to a new pixel
// animation. Initial state has all pixels off -- press the button once to
// start the first animation. As written, the button does not interrupt an
// animation in-progress, it works only when idle.

#include 
#ifdef __AVR__
#include <avr/power.h>  // Required for 16 MHz Adafruit Trinket
#endif
#include 
int DIR_PIN1 = 2;
int STEP_PIN1 = 3;
int EN_PIN1 = 4;
//for characters wheel
AccelStepper stepper1(AccelStepper::DRIVER, STEP_PIN1, DIR_PIN1);
// Digital IO pin connected to the button. This will be driven with a
// pull-up resistor so the switch pulls the pin to ground momentarily.
// On a high -> low transition the button press logic will execute.

int DIR_PIN2 = 12;
int STEP_PIN2 = 9;
int EN_PIN2 = 13;
//for the candy waterwheel
AccelStepper stepper2(AccelStepper::DRIVER, STEP_PIN2, DIR_PIN2);

#define BUTTON_PIN 7
#define PIXEL_PIN 8  // Digital IO pin connected to the NeoPixels.
#define PIXEL_COUNT 60  // Number of NeoPixels
// Declare our NeoPixel strip object:
Adafruit_NeoPixel strip(PIXEL_COUNT, PIXEL_PIN, NEO_GRB + NEO_KHZ800);
// Argument 1 = Number of pixels in NeoPixel strip
// Argument 2 = Arduino pin number (most are valid)
// Argument 3 = Pixel type flags, add together as needed:
// NEO_KHZ800 800 KHz bitstream (most NeoPixel products w/WS2812 LEDs)
// NEO_KHZ400 400 KHz (classic 'v1' (not v2) FLORA pixels, WS2811 drivers)
// NEO_GRB Pixels are wired for GRB bitstream (most NeoPixel products)
// NEO_RGB Pixels are wired for RGB bitstream (v1 FLORA pixels, not v2)
// NEO_RGBW Pixels are wired for RGBW bitstream (NeoPixel RGBW products)


boolean oldState = HIGH;
int mode = 0;  // Currently-active animation mode, 0-9

void setup() {
  Serial.begin(9600);
  player.begin();
  player.setPlayingDevice(DY::Device::Sd);  //SD card, USB storage volume is
  player.setVolume(30);                     // 30 is 100% of Volume; with 15 you get 50% Volume
  //player.play();//play the random m

  pinMode(EN_PIN1, OUTPUT);
  digitalWrite(EN_PIN1, LOW);
  pinMode(EN_PIN2, OUTPUT);
  //digitalWrite(EN_PIN1, LOW);
  // The run() function will accelerate up to
  // the speed set here
  stepper1.setMaxSpeed(1000);
  // Set the desired constant speed for use with
  // runSpeed()
  stepper1.setSpeed(3);
  stepper1.setAcceleration(100);
  stepper2.setMaxSpeed(1000);
  stepper1.setSpeed(25);
  stepper2.setAcceleration(100);

  pinMode(BUTTON_PIN, INPUT_PULLUP);
  strip.begin();  // Initialize NeoPixel strip object (REQUIRED)
  strip.show();   // Initialize all pixels to 'off'
}

void loop() {
  // Get current button state.
  boolean newState = digitalRead(BUTTON_PIN);
  // Check if state changed from high to low (button press).
  if ((newState == LOW) && (oldState == HIGH)) {
    // Short delay to debounce button.
    delay(20);
    // Check if button is still low after debounce.
    newState = digitalRead(BUTTON_PIN);
    if (newState == LOW) {
      mode = random(1, 6);
      int angle = map(mode, 1, 6, -200, 0);
      Serial.println(mode);  // Yes, still low
      switch (mode) {        // Start the new animation...
        case 0:
          colorWipe(strip.Color(225, 225, 225), 50);  // white/off
          break;
        case 1:
          stepper1.runToNewPosition(0);
          theaterChase(strip.Color(138, 43, 226), 50);  // violet-corpse
          player.playSpecified(1);                      //play the random mp3
          stepper1.runToNewPosition(angle);
          // int position = 0;
          stepper2.runToNewPosition(40);
          break;

        case 2:
          stepper1.runToNewPosition(0);
          theaterChase(strip.Color(0, 0, 127), 50);  // Blue-mermaid
          player.playSpecified(2);                   //play the random mp3
          stepper1.runToNewPosition(angle);
          stepper2.runToNewPosition(80);
          break;

        case 3:
          stepper1.runToNewPosition(0);
          rainbow(10);  // witch-rainbow
          player.playSpecified(3);
          stepper1.runToNewPosition(angle);
          stepper2.runToNewPosition(120);
          break;

        case 4:
          stepper1.runToNewPosition(0);
          theaterChase(strip.Color(255, 153, 18), 50);  // mummy-yellow
          player.playSpecified(4);
          stepper1.runToNewPosition(angle);
          stepper2.runToNewPosition(160);
          break;

        case 5:
          stepper1.runToNewPosition(0);
          theaterChase(strip.Color(255, 0, 0), 50);  // red-ghost
          player.playSpecified(5);
          stepper1.runToNewPosition(angle);
          stepper2.runToNewPosition(200);
          break;
      }

      // stepper2.runToNewPosition(50);
      //   delay(1000);
    }
  }

  // Set the last-read button state to the old state.
  oldState = newState;
}

// Fill strip pixels one after another with a color. Strip is NOT cleared
// first; anything there will be covered pixel by pixel. Pass in color
// (as a single 'packed' 32-bit value, which you can get by calling
// strip.Color(red, green, blue) as shown in the loop() function above),
// and a delay time (in milliseconds) between pixels.
void colorWipe(uint32_t color, int wait) {
  for (int i = 0; i < strip.numPixels(); i++) {  // For each pixel in strip...
    strip.setPixelColor(i, color);               // Set pixel's color (in RAM)
    strip.show();                                // Update strip to match
    delay(wait);                                 // Pause for a moment
  }
}

// Theater-marquee-style chasing lights. Pass in a color (32-bit value,
// a la strip.Color(r,g,b) as mentioned above), and a delay time (in ms)
// between frames.
void theaterChase(uint32_t color, int wait) {
  for (int a = 0; a < 10; a++) {   // Repeat 10 times...
    for (int b = 0; b < 3; b++) {  // 'b' counts from 0 to 2...
      strip.clear();               // Set all pixels in RAM to 0 (off)
      // 'c' counts up from 'b' to end of strip in steps of 3...
      for (int c = b; c < strip.numPixels(); c += 3) {
        strip.setPixelColor(c, color);  // Set pixel 'c' to value 'color'
      }
      strip.show();  // Update strip with new contents
      delay(wait);   // Pause for a moment
    }
  }
}

// Rainbow cycle along whole strip. Pass delay time (in ms) between frames.
void rainbow(int wait) {
  // Hue of first pixel runs 3 complete loops through the color wheel.
  // Color wheel has a range of 65536 but it's OK if we roll over, so
  // just count from 0 to 3*65536. Adding 256 to firstPixelHue each time
  // means we'll make 3*65536/256 = 768 passes through this outer loop:
  for (long firstPixelHue = 0; firstPixelHue < 3 * 65536; firstPixelHue += 256) {
    for (int i = 0; i < strip.numPixels(); i++) {  // For each pixel in strip...
      // Offset pixel hue by an amount to make one full revolution of the
      // color wheel (range of 65536) along the length of the strip
      // (strip.numPixels() steps):
      int pixelHue = firstPixelHue + (i * 65536L / strip.numPixels());
      // strip.ColorHSV() can take 1 or 3 arguments: a hue (0 to 65535) or
      // optionally add saturation and value (brightness) (each 0 to 255).
      // Here we're using just the single-argument hue variant. The result
      // is passed through strip.gamma32() to provide 'truer' colors
      // before assigning to each pixel:
      strip.setPixelColor(i, strip.gamma32(strip.ColorHSV(pixelHue)));
    }
    strip.show();  // Update strip with new contents
    delay(wait);   // Pause for a moment
  }
}

// Rainbow-enhanced theater marquee. Pass delay time (in ms) between frames.
void theaterChaseRainbow(int wait) {
  int firstPixelHue = 0;           // First pixel starts at red (hue 0)
  for (int a = 0; a < 30; a++) {   // Repeat 30 times...
    for (int b = 0; b < 3; b++) {  // 'b' counts from 0 to 2...
      strip.clear();               // Set all pixels in RAM to 0 (off)
      // 'c' counts up from 'b' to end of strip in increments of 3...
      for (int c = b; c < strip.numPixels(); c += 3) { // hue of pixel 'c' is offset by an amount to make one full // revolution of the color wheel (range 65536) along the length // of the strip (strip.numPixels() steps): int hue = firstPixelHue + c * 65536L / strip.numPixels(); uint32_t color = strip.gamma32(strip.ColorHSV(hue)); // hue -> RGB
        strip.setPixelColor(c, color);                        // Set pixel 'c' to value 'color'
      }
      strip.show();                 // Update strip with new contents
      delay(wait);                  // Pause for a moment
      firstPixelHue += 65536 / 90;  // One cycle of color wheel over 90 frames
    }
  }
}
```

2) For Servo Support

#include 
Servo servo0;
#define SERVO_PIN_0 5
const int optionsCount = 6;
int SENSOR_PIN = 13;
int sensorVal;
int sensorprevVal;

void setup() {
 servo0.attach(SERVO_PIN_0);
 Serial.begin(9600);
 pinMode(SENSOR_PIN, INPUT);
}

void loop() {
sensorVal = digitalRead(SENSOR_PIN);
Serial.println(sensorVal);
delay(100);  // delay in between reads for stability

if (sensorVal == HIGH && sensorprevVal == LOW) {
int optionIndex = random(0, optionsCount);
Serial.print("option:");
Serial.println(optionIndex);
servo0.write(optionIndex * 60);
delay(200);
}
}

Credits to

Andy Garcia
Eric Parren
Gottfried Haider
Kevin Xu
Shengli Wen

Rachel Li
Freddie Yang
Yanran Deng
Angela
Grace Zhang
Xiangyi Zhong
Amelia Shao
Tina Liu

Greatest gratitude also to all the friends and testers who helped us or gave us comments during the whole process…

HAPPY HALLOWEEN!!!!!

Group Research Project–Droodz Manifest Visualizer

September 26, 2023 by Jingran Zhang Leave a Comment

GENERAL INFO

The title of the performance is DROODZ Manifest Visualizer.

Droodz is a medicine mentioned in the second fiction The Ones Who Walk Away from Omelas, which can cure people’s emotions. We visualized the process of the medicine healing the emotions into a machine that can sense the emotions and fix them to peaceful moods with healing visuals and music.

Although the performance seemed a bit embarrassing for us, I considered the whole artifact itself a success. We came up with the idea of using “magical” images and healing music to fix people’s emotions. For the further design, we tried to make the work more interactive. We used body scanning to demonstrate that the machine can read people’s health information and recognize emotions. Also, the information could be shown on a prototype of a TV monitor that we slide the sheets in and out to show the change of information on the TV. To show that the machine is interactive and actually working on the patients, we connected the people to the machine with a wristband and glasses. In the performance, we used two examples of patients one is well healed by the machine and the other feels that the machine makes no sense, which also shows the importance of the power of believing in technology.

It does agree with the definition of interaction in my research. The machine senses the patients’ emotions with the scanner, which acts as an input. Processing the information, it can recognize the health states and emotions. Also, it outputs the results and gives the patients treatment. In this process, the patients and the machine are continuously interacting. I think we showcased quite clearly the detailed interaction of the artifact.

For improvement, maybe the illustration of the healing process may be a bit abstract and oversimplified now. Probably better music can be included (maybe adding a music instrument and making it into a duet can work) and the switch for the visuals can be elevated. Also, we should make it clearer that the saxophone player is defined as a robot, which is a part of the machine. The explanation of the different influences on patients should be clear that it can also be understood that the outsider of a certain town (probably the town in the fiction) cannot be cured.

PEERs’ PROJECT

I’m quite interested in the project of The Mirror.

Using the mirror and having visuals (even a 3D one!) on the back of it to demonstrate the hidden emotions of people is really impressive. Also, I like the horse head made of cardboard as it is so cute to appear with the horse on stage.

The performance was good and there was not much explanation as required, and most things are delivered by actors performing and demonstrated with the prototype. It seems a little bit abstract as it is just a prototype now as the interaction of looking at the mirror and seeing the depressive visuals cannot be shown really clearly. In the performance, the audience has to rely on the performance and lines to understand the concept.

For suggestion, I think the idea is great to have this mirror as a reminder for people to know about their depressive emotions and accept them. But if it is possible to get one step further than people just feeling shocked about the reality, it would be more interactive. For example, the mirror can let people also express their feelings and deal with these emotions instead of just seeing them, probably with simple healing or just giving a chance to talk about it.

OUR SCRIPTS

(Ellen) Patient 1- sad

(Jean) Patient 2-anxious/angry

(Sylvia) Doctor 1-monitor controller

(CJ) Doctor 2-scanner

(Luna) Doctor 3-panel controller

(Fred) Saxophone Robot

*The doctors at their positions and the saxophone robot heading down*

*Patient 1 walks into the room*

Doctor 1: “Good morning, how can we assist you today? How are you feeling?”

P1: “I’ve been having the worst week, I got an F on my assignment and I don’t know what to do. I can’t focus, and I can’t study through these tears!” *cries*

Doctor 1: “I see. No worries, we can fix that. Just step over here and we can see how to treat you”

*directs person 1 to the scanning area*

Doctor 2: “I’ll just scan you real quick, so we can better assess what you need.”

P1: “Okay. . . “

*doctor 2 scans patient 1*

*everyone turns their heads to the TV monitor*

*doctor 1 flips the cover of the TV to reveal the poster*

Doctor 1: “Um. . .”

Doctor 3: “Oops! Sorry, I was watching something. You can just switch the channel”

*Doctor 1 flips the card on the monitor to loading and then to the first vitals card*

Doctor 2: “Hm, it does seem that your vitals are a bit unstable, the machine has determined that you are suffering from sadness.”

*Doctor 1 put the SAD brick on the TV monitor*

Doctor 1: “Not a problem though, we can treat this easily! Follow me and have a seat.”

*Patient 1 sits down. Doctors 1 and 3 put glasses and wristbands on Patient 1*

Doctor 3: “Now just listen, watch and relax.”

Patient 1: “Listen?”

*Doctor 3 shows the blue panel*

*The Saxophone Robot stands up straight and starts playing soothing music*

*Music stops and the doctors take the glasses and wristband off of patient 1.”

Doctor 2: “How are you feeling now?”

Patient 1: (Acting healed and curious) “This is amazing its so relaxing! I don’t feel like crying anymore! Thank you!”

*Doctor 2 scans P1 again and Doctor 1 flips the brick into peaceful*

Doctor 3: “It seems you are all fixed. Have a nice day!”

*P1 exits stage*

*P2 enters stage feeling stressed*

Doctor 1: “Good morning, how can we assist you today? How are you feeling?”

Patient 2: “I just came to visit a friend in this town, and she said you were able to fix the emotions. I‘m having 5 assignment dues today, and I’ve been so stressed lately. I was hoping that you could help me out. ”

Doctor 2: “Of course! Come stand over here, so we can scan you to better understand how your body is feeling.”

*Doctor 2 scans patient 2*

*everyone turns their heads to the TV monitor*

*Doctor 1 flips the card on the monitor to loading and then to the next vitals card*

Doctor 3: “Hmmm… you seem very stressed. Come sit here and listen so you can relax.”

Patient 2: “Listen? What is all this?? What are you putting on my wrists? These glasses are weird. I don’t want to wear them.”

Doctor 3: “Just calm down, so we can help you.”

*Robot stands up straight and starts playing as panel shows gray*

*Doctor 3 switches the gray panel into the red one in the middle of the process*

Patient 2: takes glasses off* “I don’t think this is working. I feel really strange. It’s like the images are making me feel worse”

Doctor 1: Maybe there was a mistake in your reading. It’s also weird that the panels switched automatically. Why don’t we scan you again?

*Doctor 2 scans patient again – P2 is now angry – P2 looks at the monitor that says angry*

Doctor 2: See, that was the problem. It might have misread how you feel at the beginning. It seems you’re actually angry. Let’s try one more time.

They sit the patient down again and put the glasses and wristband on them

*music starts playing normally but then starts sounding strange, notes are off*

Doctor 1: “Hmmm…that’s never happened before”

*patient 2 angrily throws glasses and wristband”

Patient 2: I knew this wasn’t going to work! I told my friend this was stupid.

Doctor 3: don’t blame us. This machine fixes people every day, but you are the first that has caused this kind of reaction.

*Patient 2 runs out and meets P1*

P1: What’s wrong? Why do you look so angry? Didn’t you go to the healing machine?

P2: I did. But I don’t know what’s wrong! I even feel worse after that. That machine totally makes no sense.

P1: What do you mean?

P2: It just messes your emotions up. I don’t think it’s good to forcefully change people’s minds like that.”

P1: I don’t know, I like it. I already have an appointment with them for next week!

The End.

OUR PROPS

Main Machine

TV Monitor+Emotion Bricks

Scanner

Other Visuals

SKETCHES

This is the first version of the whole system of the interactive machine.

cr. Sylvia

These are the sketches for the visuals.

cr. Luna

PERFORMANCE

TEAMWORK

In my group, I participated in every part of the project. It’s a bit like I’m holding the group together like the link for most communication.

For the roles, Luna came up with the general idea of the visualizer and she was the main art designer who took charge of our visual panels and decorations. Luna and I started with the basic construction of the machine box itself. Then, Sylvia and I designed the interactive system for the machine and worked on it. Yuxing, Sylvia and I, dealt with most of the crafting, including the whole prototype and detailed revision. Also, Fred offered help with crafting, and he practiced a lot to bring us the impressive music part. In the performance part, Sylvia, Ellen, and I worked on the scriptwriting, and everyone in the group gave ideas on the plots and performance. Everyone had their own role and all helped with adjusting performance and lines in rehearsals.

Our team worked well together. We always found a time that worked for everyone and built the artifact together in the studio instead of allocating the jobs and working alone. We did argue a little bit when it came to details or some concepts, but we always quickly voted to reach a consensus or integrated the ideas into a better one. Our communication was usually successful and we had a lot of fun in the process!

Hello world!

September 22, 2023 by Jingran Zhang 1 Comment

Welcome to Web Publishing @ NYU. This is your first post. Edit or delete it, then start creating your site!

Online help is available via the Web Publishing Knowledge Site (wp.nyu.edu/knowledge) and the ServiceLink knowledge base (www.nyu.edu/servicelink). Through ServiceLink, you can find step-by-step instructions, as well as tutorials.

Digital Accessibility

As content creators who create and publish text, images, video, and audio, you must adhere to the NYU Website Accessibility Policy (https://www.nyu.edu/digitalaccessibility/policy) when creating and publishing digital content.

Web Publishing-specific Digital Accessibility Best Practices and examples of how to ensure your content are compliant are available at https://wp.nyu.edu/digitalaccessibility

If you have additional questions, contact the IT Service Desk for assistance. Support is available 24/7/365. For more details, visit www.nyu.edu/it/servicedesk.

Jingran Zhang

Pioneer Plaque-Magnifying Glass

Jingran Zhang

A Million Dreams (Reprise)

By Hugh Jackman, Austyn Johnson, Cameron Seely From the Movie The Greatest Showman

Concept and Design

Process and Conclusion

Project Presentation

How do the aliens’ language and communication styles in the story differ from human language (oral, pictographic, phonetic, etc.)?

How does the physical structure of our body inform the way we communicate? How about the aliens?

Have A Cuppa Tea!

Jean Zhang Instructor: Eric Parren

CONCEPTION AND DESIGN

FABRICATION AND PRODUCTION

Fabrications

Electronics

Codes

CONCLUSIONS

DISASSEMBLY

FULL VIDEO DOCUMENTATION

APPENDIX

Full Scripts (Early version):

References

Props

Additional Visuals

IMA Show🤩

Full Codes

Arduino:

Processing:

Credits to

Midterm Project By Jean Zhang & Luna Zhang Instructor: Eric Parren

Trick-or-Treat! is a mini theater that gives the participants a chance to pick a Halloween character by themselves and to interact with the character through interactions including sound and light effects, and receiving trick or treat, giving the participants a full Halloween spirit.

Inspiration

Concept and Design

Fabrication and Production

During Testing Session:

First time the NeoPixel LED stripe worked successfully

Saving the code with my super favorite LA Rachel! 😘

During the Presentation

Conclusions

Appendix

Documentation Visuals

Our Cute Characters

Other Props

Material Lists

Lines

Line Recordings/Sound Effects

Full Codes

Credits to

HAPPY HALLOWEEN!!!!!

GENERAL INFO

PEERs’ PROJECT

OUR SCRIPTS

OUR PROPS

Main Machine

TV Monitor+Emotion Bricks

Scanner

Other Visuals

SKETCHES

PERFORMANCE

TEAMWORK

Digital Accessibility

By Hugh Jackman, Austyn Johnson, Cameron Seely
From the Movie The Greatest Showman

Jean Zhang
Instructor: Eric Parren

Midterm Project By Jean Zhang & Luna Zhang
Instructor: Eric Parren