Studio Project 3: Networked Fashion “A Midsummer Night’s Dream”

In this week, we have been introduced to the light emitting diodes including the Dotstars and the Neopixels. This time, we have a team assignment in which we need to use light emitting diodes to create a live-coding skirt. We chose a long, black, gauze skirt to work with. Finally, we decided to create a midsummer night scene through neopixels and live coding on the dress. From the above videos and images, you could see it. If you are interested in how we made it, please read the following steps:

At first, we didn’t have much idea about what to make. Therefore, we researched to see some other examples online. One of the interesting examples we found is this one: https://www.instructables.com/Constellation-Skirt/. We were inspired by this example. Since our dress was black which was similar to the sky’s color in the night, we thought it would be a good idea to use light emitting diodes as stars. On the other hand, since our final work should be something that keeps moving, we also had the idea of making shooting stars, birds, or butterflies. We haven’t totally figured out our ideas during this stage.

Last Sunday, we joined the workshop in the Digital Fabrication Lab to learn more about the light emitting diodes and live coding skills. During the workshop, we saw Yuchen testing with the newly arrived neopixels. They looked really beautiful and when Yuchen changed their color into green, they seemed like glowworms. We decided to be brave and use these neopixels instead of the dotstars that we were introduced to in the last class.

When we told Professor Minskey our decision, she asked us to think about whether we wanted to use the wire with 50 neopixels or the one with 100 neopixels. This led us to think about how we should position our neopixels. We first thought about using the wires to wrap around the skirt. However, Professor Minskey told us that the wires may affect the flexibility of the skirt making it difficult for us to wear. We then thought about making the wires to form a large horizontal zigzag on the skirt. However, this form would increase the difficulties in coding. Finally, we decided to do a large vertical zigzag around the dress. The zigzag would leave some space on the backside of the skirt so its flexibility would not be affected. We tested the size of the dress and decided to choose the wire with 100 neopixels.

The next question is, what is our theme? Our current choices include shooting stars, glowworms, and butterflies.etc. Suddenly, we have an idea: why don’t we just use all these elements and make a night scene? Since we should design a 2-3 minutes performance instead of a single picture, maybe having more elements would be a good choice. We decided to separate the skirt into layers and put different elements in different layers. To further explain, the top layer would be the sky with stars and clouds. The middle layer would be the glowworms. Finally, the lower layer would be the flowers and butterflies.

After making sure of our theme, we started to find the music we wanted to use. We searched through music apps and online websites including NetEase Cloud Music, QQ Music and Youtube with keywords such as “night”, “night sky”, “peaceful night”, “stars” and “fireflies” which were all key elements of our theme. Then we found the music “晚星” (Night Stars) which fits our theme quite well. It’s a very beautiful and peaceful piece of absolute music. When listening to the music, we both felt as if we were sitting in a peaceful forest with cute fireworms shining around us on a midsummer night. The clouds give off a faint white light and when they are blown away by the gentle breeze, stars begin to appear and shine brightly as if they are dancing happily in the sky. We are pleased to select it as the background music of our project. From the above pictures, you could see some ones we found on Baidu with the keywork “midsummer” that represents our designed environment well.

After deciding on our theme and our music, we drew our design sketch to further clarify our ideas. From the above sketch, you could see that we not only divided our skirt into three layers from up to down but also think about different designs in the inner and outer layers to create a sense of depth. Moreover, we could prevent the clouds which are made of cotton fluff from covering up the stars and other elements. 

Besides the outlook of the skirt, the other thing we needed to design was the change of lighting patterns along with the music which we would make by coding later. We listened to the music again and again and designed the patterns by the feelings we got from the different sections of the music. Below are our initial designs:

00:00-00:07: Clouds lighting up one by one

00:07-00:13: Flowers lighting up one line by one line

00:13-00:21: Flower gradually glowing and fading

00:21-00:27: Everything goes to darkness

00:27-00:42: Stars lighting up sections by sections and the flowers below the lighting up stars also lights up

00:42-00:50: Flowers and stars glowing and fading

00:50-00:56: Flowers and stars gradually fading

00:56-01:16: The glowworms gradually lighting up and moving

01:16-01:24: Everything (except clouds) lights up

01:24-01:43: Different sections of the flowers and glowworms glowing and fading

01:43-01:51: Everything goes to darkness and then gradually lighting up from left to right

01:51-02:20: Everything sparkling and moving

02:20-02:47: Freestyle time

02:47-03:13: Stars fading one by one

After 03:13: Everything lights up, it’s day time

After making sure of our design, we started to put the neopixels onto our skirt. We failed the first time when we tried to sew it onto the skirt. Then, we thought about using hot glue to stick it onto our skirt. We believed that this method was possible because in the last class, Professor Cossovich had used hot glue to strengthen the soldering part. This showed that hot glue would not hurt the wires. Moreover the top layer of the skirt would cover up the rest layers and make the glue seem less visible.

We started from the waist part of the inner layer, and then went all over to the bottom of this layer. After that, we made a little hole on the middle layer and made the neopixels wire go through the hole. Then, we started sticking the middle layer from the bottom to the top. We perfectly used up all the wires and finished our design. After finishing sticking the neopixels, we made some cotton fluffs and stuck them onto the skirt. They worked well for diffusing the lights and featuring the feeling of nature. We also bought some plastic flowers and butterflies online which could reflect lights and further emphasize the scene we wanted to convey. However, they hadn't arrived that day so we decided to put these decorations on the skirt the next day.

https://github.com/ZishanQIU/Networked-Fashion---A-Mid-summer-Night-s-Dream

Important Notes:

①There are several patterns that need certain lights to light up or go dark one by one, for example, the performance starts with clouds gradually lighting up and at the end of the performance the lights have to go dark one by one. At first I coded several important statuses in the process of them “lighting up/ fading one by one” and put them together in the playlist so that when those functions are played in order, they will create the expected effect. (such as the “Cloud light up one by one” file in the Github) Then Yuchen helped me create a code for “lighting up/ fading the lights one by one”, but that code sometimes have problem controlling certain lights and sometimes all the lights will go up and then fade to dark. 

②The calculation of hue: hues[i] = time(4.6 / 65.536) + 0.2 * triangle(i / 20)

The maximum of “time()” is 1 and the maximum of “triangle()” is also 1. The value of hue can be changed by putting x*time() or x*triangle() and changing the value of “x”.

③Triangle: Just like the shape of a triangle, a “triangle()” function makes the calculated value goes from 0 to 1(in the middle) to 0. 

④”pixelCount” can be used as a set number to help calculate the values such as “time“ and “hue“ in the code.

⑤In the “blinking fade” function, if my code doesn’t mention some of the lights, they will just stay dark and I don’t need to write extra code to control some of the lights to let them stay dark. However, for the “shining” functions that I created (In the picture “shining” attached, if I don’t write extra code to control some of the lights to stay dark, they may light in random colors or light with the color in the previous function. 

Shining.png

①While coding for the fireworms part, I modified the original code “Blinking Fade” which makes all one hundred lights blink and fade in different colors. What I needed to do is to limit the function to certain numbers of lights that represented fireworms. However, the modified code failed to work and I turned to Professor Oliver Steele for help. He told me that when setting the range of variables, I should put “18<=i && i<=39” instead of “18<=i<=39”. That’s because for my wrong input, “18<=i” means “true” and when the code processes to the right, the code becomes “true<=39”, while “true” is not a variable and therefore the code will not work. Oliver also told me that it’s a very common mistake and I should pay attention to checking that part if I make coding errors in the future. 

Debug_1.jpg 

②When coding the part in the picture “Debug_2” attached, I failed to control the color of each groups of light using RGB function. For the “rgb(x,x,x)” part I first put “red=x,green=x,blue=x” and found that it didn’t work. But then after I changed that to “rgb(x,x,x)” it still failed to work. According to Yuchen’s suggestion at first, I added “{}” and it still didn’t make any difference, and then Yuchen suggested adding “else” (changing “if” to “else if”) and that worked well. 

Debug_2.png

Finalization:

In the process of coding, we changed some of our original design either due to code complexity or after seeing the outcome of the code to make it both realizable and create better outcomes. For example, we really enjoyed the outcome of the “blinking fade” function of the codes provided by the Pixelbaze website and the changes we made based on the original code because that gives us the feeling of fireworks flying around freely. And the shining function that we created also worked well. Therefore, we added more patterns based on “blinking fade” and “shining” and removed some parts of “lights fading/lighting up” one by one because that part of the code has some bugs that we haven’t made sure about. 

At the last moment, the other decorations that we bought online such as butterflies and flowers had arrived. We sticked them onto the skirt during the finalization process. Finally, we successfully finished our piece.

At 5pm, the open house started. We showed our live coding skirt with the music to our classmates and some other professors. Many of them liked our skirts and gave us some valuable suggestions. One of the suggestions was that we could add some sounds from nature, such as the sound of cricket, to the music track to further empathize the feeling we wanted to convey. Another suggestion was that since the skirt was 3D instead of 2D, we should add more elements to the back side. We really agree with this suggestion. Initially, we have thought about adding more elements to the back after finishing making our front design, using the remaining neopixels that we have. However, we used up all the neopixels just when we finished making our front design. Therefore, we didn’t add many elements to the back of the skirt.

In the future, if we have more time, we would like to add some sounds from nature into the sound track. Moreover, we could use black color to cover the white wires of the neopixels so they looked better under day lights. In addition, we haven’t made a pocket for placing the PixelBlaze this time, we would like to make one later. The final improvement we could make is adding another wire of neopixels onto the back of the skirt so people could enjoy the performance from different angles.

Together: Ideation, Designing the skirt, Sticking the neopixels and clouds, Finalization.

Angela: Research, Drawing the design sketch, Designing the pattern changes along with the music, Sticking the other decorations, Wearing dress and performing.

Sherry: Finding music, Buying decorations, Coding, Improving the coding patterns’ design, Debug, Controlling the music and live coding.