NoC – W12/13/14 Final, Jingyi Sun

Download here:[LINK]

Video: (disclaimer: screen shooting makes the sketch really slow, the speed of the fireflies are actually faster than shown)

For my final I wanted to simulate a system of fireflies. This was a very vague idea in the beginning, but based on the feedback I received during my final project idea presentation, I also wanted to incorporate what some of my peers suggested into the final, such as the idea of creating a forest of trees as an environmental aspect for the fireflies.



I used two separate sketches for the fireflies, and the trees to make sure that the separate components were working on their own first. The fireflies are adapted from the flocking system we did in class, and I added a slight trail behind the firefly by changing the alpha of the background, and added a “blinking” effect by attaching a sin wave to the radius of the ellipse that made up the firefly. I also added a bigger and more transparent ellipse to create a glow for the firefly.




For the trees, I adapted the fractal tree sketch we created in class. I created five layers of trees with different branch length, color, and position. By creating taller and thicker trees in lower down on the canvas, shorter and thinner trees higher up, this creates an illusion of depth on a flat canvas. I then added a gradient, and adjusted the color of the trees. Since the stroke caps of the trees are rounded, this was very distracting and “un-tree” like, but this problem was solved more or less by blending the tree color into the background gradient, which help disguise the round stroke cap. I consulted this image (below) from the book Foundations of Digital Art and Design by Xtine Burrough.



Although it was relatively straightforward to create these two separate components, combining the two systems was a challenge for me. In order to create an environment that looked realistic, I would need to create “depth”, and aside from graphically drawing the trees to fake depth, depth in a 2d sketch can be faked by the order of which objects are drawn on the screen.

I had three issues: how to make sure that creating fractal trees in the draw loop does not crash everything/make the sketch really slow, how to sort the arrays to be ordered by the random depthValue assigned in the constructor, and how to draw the different elements of two arrays according to the order that I wanted (for example, the trees’ depthValue would be tied to the shape of the tree, while the fireflies’ depthValue would be random).

  1. I used pGraphic image buffers to store each “layer” of trees, and they was displayed onto the sketch as images.
  2. After searching online, sorting the array turned out to be relatively easy since javascript has a built-in function that allows you to sort an array according to an attribute of the objects in an array. Here is the related documentation: [LINK]. Thus, I could sort the order of the firefly array according to the random depthValue assigned. Thank you Moon for helping troubleshoot!!
  3. My first attempt at displaying things according to depth was really messy and bulky. Since I knew what the tree depthValues were (I assigned them to be 1/10 of their branch length), I looped through the firefly array in multiple places in the draw loop, and only displayed them if their depthValue were within a certain range. Although this worked, and created the effect I wanted, the code was messy. Moon suggested that I use polymorphism and inheritance and both trees and fireflies could be in the same array. Some issues I encountered were:
    • I named my parent object “Object,” which clashed with p5’s Object class. Changed the name to depthObject instead.
    • I did not call super() in the constructor of firefly and trees.
    • Although the tree array had only one function to display, the firefly object had update(), checkEdges(), etc… before display(),  but the display function had to be consistent between children and parent. Moon helped me with this problem by suggesting that I could create an array of boids, where boids[i] = depthObject[i] when creating fireflies. This creates a path that links to the depthObject, and I could do update(), checkEdges() in the boids array, but the changes would be applied to the objects and displayed in depthObject array.

Further improvements:

  1. Changed the gradient from black to white, to from black to blue to create a nighttime effect.
  2. Instead of circles, I used an image for the fireflies.

Next steps:

  1. Adding an effect where the area is dark, and lights up/is shown around the firefly.
  2. Add more interactivity with user. However, since I was trying to simulate an environment, I don’t know how I could add interactivity on screen that feels natural and organic.


Jingyi Sun Week 14: Final Project

Download code here: [LINK]

Video: (disclaimer: for the purpose of this video, and to show everything clearer, I made the background black consistently)

For my final project, I am creating a light/lamp controlled by a processing sketch via bluetooth communication.

My original idea was to create a processing sketch where users can input three numbers (rgb values) to change the color of the rgb leds, but I received feedback from Scott and classmates encouraged me to think carefully about the way I wanted the user to interact with the lamp.


For my first iteration I used very basic sliders, where three lines were tracks and three small squares were the toggle for the slider, and the lamp color would be changed every time the user released the mouse. I consulted this instructable: [LINK]. However, during user testing, it seemed that this was not an organic way to change the color, nor was the interface intuitive enough upon first interaction. It was easy to use once you realized how to move around, but many users either expected a fluid change, or didn’t know what the interface was at all.


I then moved to controlp5, which is a library that helps you create controls with processing. I used their built-in sliders, changing the background and foreground to reflect the rgb value that the slider would be changing, as well as changing the background of the sketch to reflect the combined/mixed effect fluidly. I feel like this is a better designed interface that would allow more intuitive interaction.


For the physical component, I used three well-sanded rgb leds attached to an arduino with a bluetooth module. This was relatively straightforward, and the bluetooth connection was reliable and stable. Once I was sure that the circuit worked, I moved it to a perf board for a cleaner and more compact circuit, and used an external battery to power the arduino.



I also worked on the exterior shape of the lamp by first experimenting with paper, but the paper was too thick to let the light shine through. I then used white acrylic to create a exterior shape for the light. I tested the design with cardboard, and made small adjustments (e.g. size of the shape, size and placement for the small tabs used to attach the panels) and made a couple of prototypes before cutting the shape in white acrylic.


During testing it was clear to see that there was a discrepancy in the color mixed on the screen and the color of the led. I didn’t really think this was an issue that could be fixed (like when different computer screens display the same colors slightly differently), but then Scott introduced “gamma correction”  in class, which helps color correct the visuals of the LEDS to what our eyes would expect them to look like.

Link to article:

slightly better calibrated lights:


NoC – W11 Flocking, Jingyi Sun

Download here: [LINK]

For this week’s flocking assignment I completed part of my final, which was a flocking firefly system. The fireflies are tiny ellipses that “blink” on and off as they fly across the screen. I changed the neighboring distance to be lower than the separating distance since fireflies don’t seem to gather together as much.




Jingyi Sun Week 11: Networked Project 

Maybe I typed in the wrong keywords or something, but I didn’t actually find any projects on the Internet out there, so I returned to the first project I thought of when Scott mentioned this in class.

Lumens is Matt and Marianne’s project where they collected lamps from two towns, and displayed them in two separate physical spaces, and a person coming close to one light would illuminate another light in the other space. Visiting the accompanying website and looking at the information of a light would also cause that light to be lit in the physical space.

NoC – W10 Flowfield, Jingyi Sun

Download files here: LINK

For this week’s assignment I played with drawing with a flow field, and instead of having the flow field be attracted to the mouse, I wanted it to repel the mouse, like this:

Although this looks the same as the attraction to mouse grid, the lines are pointing out (FIRST IMG) from the center of each rect instead of in (SECOND IMG))





However, once the dots left the canvas, they were not able to come back onto the canvas because of the checkEdges function, so I wrote a reverse goToCenter function instead.g

Playing with numbers led me to this: I really like this movement now, but I didn’t like it so much at the time I made it so I didn’t save the code, and now I can’t seem to be able to replicate this 🙁

a b

I also realized that I could create lines/boundaries with the dots depending on where your mouse is, and how long you keep your mouse at a certain place. (see code below)

c And also like this:






This week Dave and I worked on to get tweets with the hashtag #makeamericagreatagain, passing the relative information to the serial monitor and printing out the text of the tweet.

We started by looking at Temboo’s “latest tweet” example. We used this to search for the hashtag and get the latest tweet someone posted with this hashtag.

http 200

At first this worked out relatively well and we were successful in printing things out to the serial monitor, but then we kept receiving a HTTP CODE 0, which I think a lot of the other groups got as well.

work then no work

We then tried the wifi shield with the uno (which we realized we can’t do because the library takes up too much memory), then we tried the wifi shield with the 101, and we weren’t successful in getting the arduino program to recognize the shield. In the end, we simulated a successful connection by creating a fake_connection boolean which we set to true, and started working on parsing through the data we had previously received, which we just saved in a string in the sketch.

We used indexOf() to search for the word “text” and then used a string to store the 140 characters after that to print out the tweet.

Although the adafruit thermal printer can be used with the Software Serial library to transmit data, the MKR1000 does not have a Software Serial library, but pins 13 and 14 could be programmed to be another set of hardware serial, and it printed out in the end.


In the end we managed to get two parts of the process working separately but both of us would be much happier if it worked entirely.



Capstone Documentation: Jingyi Sun

Graphics PDF download: LINK

Presentation slides: LINK

Video demonstration: (the speed is fastened)


My capstone is an interactive pop up book recording a brief and selective history of artificial lighting. I wanted to combine paper engineering methods with circuits, and I also wanted to learn more about how lights have developed throughout the years. Lights are incredibly power devices. However, the abundance of lights in our everyday life make them seem mundane, and I realized that although I have always been interested in lights, I knew relatively little about them.

My original idea, proposed last semester, was originally an LED screen that I would make, that users could text to, and would display some sort of information or message in response to the user. However, I was not too enthusiastic about this idea, and realized that I would not enjoy working on this particular project. But I was set on the topic of doing a project about lights, even if I was not entirely sure what yet. I thought about classes I liked taking, and remembered having a lot of fun making paper cuts and books in Paper Arts. I like using my hands to make things, so I thought this was a format I would be interested in and have fun working with. I settled on a history of lights because I realized I really didn’t know too much about them, and wanted to do use this opportunity to learn about the topic.

Research process:

I started by looking at general timelines, and the decision of which lights to include was highly subjective. I picked lights the mechanisms of which I found interesting, or thought was important. Once I decided on which lights to include, I started by looking at general images of them online. My image references come from photos from collectors (generally with older lights, these images were really helpful in understanding the working of these lights), old photos (also mainly of older lights, especially street lights), and diagrams/cutaway views of lights (mostly of newer models of lights).

arcLamp1 97fcdf3b9e54c6e6fc64a019e4c2ebc6

(I made a slight mistake when referencing the top left photo in my presentation, I referred to it as a kerosene lamp, but it is actually a carbon arc lamp).


For text, I looked at encyclopedias (mostly the online version of encyclopedia britannica), news articles, as well as patents, and writings of the inventors themselves (interesting read here: The Smithsonian also had a very helpful (albeit ugly) website containing valuable information:

I learned a lot about the lighting fixtures along the way, and the people working on them. Often, it was a collaborative effort, or one invention would pave the way for further improvements. Sometimes, it was a discovery in another field, like the discovery of petroleum and the relative ease of extracting kerosene from petroleum (as opposed to coal) helped move the invention along.

I tried to include some information about the way the lights worked, because I thought that was an important, but often overlooked, part of a light, as well as key people and dates relating to the lighting.

Graphics: (download link at the beginning of post)

I kept the design of the page simple, with text on one side, and the graphics big on the other side. During the user testing, my peers agreed that simple graphics would serve the purpose of the book well since the book would have LEDs. I experimented with shading and colors a little bit, but ultimately decided I liked clean cut lines better.


^first design


^ discontinuity between the exterior (right) and the interior (left)


^ further reference for exterior and interior that matched better.

I consulted my reference photos for this process, combining elements of different photos to create my graphics, since some photos showed the exterior of the lamp, but not necessarily the inner works of the lamp. One of the harder parts was combining the two into one design that made sense. For example, for the carbon arc lamp, my original design was really hard to understand, so I looked at more photos so that the exterior and the interior looked more harmonious.

Prototype and Preparation:

IMG_7615 IMG_7616 IMG_7617

I started out by drawing out the circuits I wanted on scratch paper, writing notes to myself as I went along. This was mainly a process where I put all the ideas I had on paper, and to see what worked and what didn’t.

For materials, I bought 400 gram paper, LED stickers, conductive ink, paint and tape. I also bought EL wire and the relative converters and cords, as well as batteries and a portable power bank. Although I originally intended to use conductive paint, the paint took a long time to dry, and was very messy. The ink did not work well at all, so for the most part I ended up using conductive tape as the major conductive material for the book.


IMG_7619 IMG_7643

IMG_7620 IMG_7646

IMG_7621 IMG_7622


I then did my first full prototype on very thin (mead composition notebook) paper with conductive tape and actual leds. During this process, my main goal was to test out the circuits, and the reliability of the conductive tape, as well as figuring out how to join the circuit with the pop up techniques I wanted to implement.

This was really helpful because it was a relatively quick way to see if everything worked, and I could scribble notes on the side when I needed to write down the adjustments I wanted to make.


I also figured out during this stage that I could control all of the circuits with one battery by extending everything to the back of the pages. Once I figured out how to accomplish the circuits, and figured out if and how they worked, I moved on to printing.

To my surprise, printing was the one of the harder stages because I originally assumed that this could be done at the big printers available in school.


However, the printers did not take my paper (they were too thick), and when it did allow my paper to go through, the ink did not stick to the paper well enough, or the ink would create drag marks on the paper.

IMG_7626 IMG_7627

^smudged lines with epson

I then went to ATS, hoping they could help me print with the epson printers they had, but the quality of the print was not great (the lines were not clean), and the paper they offered was way too thin. I then turned to a print shop near school, and they did not allow customers to bring in their own paper, and they did not have black paper. Although this was a slight problem since they didn’t have paper as thick as I would have liked, they had a wide range of paper I could chose from. In the end, I ended up using their 330 gram paper, which worked out well, and they printed a piece of “black” paper for me.


^correcting unfortunate typos

I had to go back to the print shop several times to print out more materials because I either needed more copies, or found a typo and had to reprint. 

Putting it together:

I first laser cut holes running down the middle of the page, which would act as points for where I could sew my pages together.

I then went on to my second prototype, using the actual 330 gram paper and led stickers. I did not make a complete prototype this time, but testing out paper mechanisms and circuits as I moved along each page.

With some pages, everything worked out really well on the first try, (for example, the gas street light page, the carbon arc lamp page, fluorescent light page). With others, I had to reinforce the circuit, but was not that difficult either (for example, kerosene lamp).

IMG_7630 IMG_7631 IMG_7632

(developments of the neon page)

Some pages took more time, such as the neon light page, which was not difficult in design, but I had to wait overnight to see if taping the EL wire down would make it hold the shape of the spiral I wanted, and to be careful not to ruin the ink on the paper. I also needed to work out where to cut holes in the page, and had to be extra careful not to cut too much or too little.


IMG_7638 IMG_7639

Pages where there are pop ups included, such as the lightbulb page, the HPS lamp page, and the led page, took many many tests to figure out.

IMG_7634 IMG_7636IMG_7635

Although I am pretty happy overall with the effect created by the led stickers, their brightness limits the area of the paper that shows light, and so in some cases, such as neon and fluorescents, I substituted EL wire to have a better consistency of the light.

Next Steps:

Overall, I accomplished what I wanted to do, and I learned a lot about the topic in the process. However, there is always room for improvement, and in this case, I would like to have more precise laser cuts, since I did most of the cutting by hand as I was figuring out the specifics at the same time, and it was faster to just measure and cut by hand. I would like to improve the cover of the book, as well as the binding. I want to figure out how to further decrease bulkiness of the book, especially eliminating the bulkiness of the EL wire usb cord.

I asked some friends to test out interactions by placing the pages in front of them without any instructions, and most of the time they played with the pages in the correct and straightforward way, but sometimes it was hard for them to understand what to do, so I adjusted some circuits accordingly. I would like to do some more user testing, and improve on the interactions as well.

Diana Xu & Jingyi Sun Week 10: Arduino server

Diana and I were talking about what to do for this week’s assignment and we wanted to try and control a circuit with a something on a html page instead of the other way around. We decided to control leds by clicking links on a html page, and we originally wanted to use a form and store the values from the form to control the leds, but when we looked at other people’s examples, we realized that there was a much easier way to do this.

When the links change, the request sent back changes, and therefore LEDS can be controlled from by parsing through the string sent back.

We also changed the css so that the links looked a bit more intuitive. It took us a while to get used to the way it had to be written in arduino, but worked out well in the end.



Video demo:

Our references: