Experiment4_3 Crafting Electronics Swatchbook — The Music Box


Add some music to your little things in daily life.
Group #11
Rhepa Kamal
Ziqi Guo
Qinxinrui Zhu
Weiqi Wu

Wrok done by Weiqi Wu (3175842)


This is a Speaker Actuator. This is an interactive music box (speaker) that users could place their cup or anything that has weight. While something is placing on the towel part, the music will on. The inspiration comes from the process of making the speaker actuator in assignment 4-2. In this project, I tried to explore the way that collaborates the speaker with other things. During the exploration, I found out that there is a lot of stuff on my desk, therefore, I decided to combine the speaker with something so that it will save the space on the desk as well as people can have some music playing.


Function purpose: 
- Magnet
- Magnet Wire
- Arduino Uno
- Sponge
- Tin foil
- Adafruit Mono 2.5W Class D Audio Amplifier - PAM8302
- Tape and Glue

Decoration purpose:
- Foam Board
- Acrylic borad 
- Towel

Tool and Techniques

  • Utility Knife: To help to cut the form board and sponge
  • Scissors: Used to cut the magnet wire, tape, and tin foil
  • Double-sided tape: To set the fixed position
  • Glue gun: To construct the box and any other things that need to be glued

Materials and Tools


First Prototype

Construction Stages



(top-left: details of the class-D amplifier; top-right: detail of the Arduino Uno; bottom-left: the overall details; bottom-right: the magnet wire speaker)

This is the very first prototype of the speaker, testing if it is working or not.

Detail Shots



(upper-left: all the components inside the speaker music box; upper-right: the outlook of the music box; bottom-left: the magnet under the cup; bottom-right: the cup place on the music box, and the music box start to play music)

For the next step, I made a box for the speaker, and it became a music box. It connects all the wire and put it inside the box. On top of the music box, it is the magnet wire. The magnet is under the cup. So when the cup place in a specific area, the music will turn on.

Stage of Interaction


This is how the first prototype will interact. Placing the cup on the music box, and the music box will turn on.

Video of the First Prototype:


Circuit Diagram



For the first prototype, the music box could only interact with the cup. I would like to further develop it that no matter what objects people place on the music box, there will be music playing. Therefore, I need to put the magnet in the music box at the beginning. To solve the problem that the music will always be playing, I decided to find a method that can open the circuit before the input of the magnet wire. Therefore, only when something place on the music box and close the circuit, the music box will on.

Second Prototype

Construction Stages


I used Velostat to test whether it will work or not. If it works when the object places on the music box, there is pressure on the Velostat, and the circuit will close, the speaker, which means the music box, will work. However, the Velostat does not really work, there is no sound. So fail to use Velostat as the switch to the circuit.

Final version

Construction Stages

With the inspiration of my group member’s example in assignment 4-2, which called “Three Buttons”. I decided to use sponge and tin foil to create the switch of the circuit. So when the object places on the music box, it will add pressure to the sponge, and two sides of the tin foil will touch each other which closes the circuit.



(top-left: the sponge that cut; top-right: the sponge with two sheets of tin foil; bottom: the sponge with the tin foil in two sides)

Video of Testing:  https://youtu.be/EAUNLButh_E

It does work really well. So I started to construct the music box and make the sponge looks better.



(top-left: foam board of the box; top-right: cover the sponge with a towel and testing whether it works or not; bottom-left and right: finish making the box. The towel is on top of the box, and there is a foam board on top of the sponge, in order to make it looks better.)

These are the construction steps of making the music box. However, it does not work, the foam board on top of the sponge is too supportive. It spread the weight of the object, thus, there was less pressure applied on the sponge, which not allowing tin foil to connect together.


(top-left and right: I decided to leave only the sponge with the towel cover on top of the box since there is no better option for me to do that)

In this way, the speaker will work when there is pressure on the towel area.

Detail Shots


(left: the overall look of the music box; right: the overall looks inside the music box, including the paper speaker, magnet, amplifier, and Arduino Uno)

Stage of Interaction



This is the stage of interaction. I placed a cup and a candle on the music box, and it works properly. The music box will on and play some music.

Final version VIDEO

For the video of the final version, the amplifier experienced damage before the video recording, which made it does not work anymore. There two possible reasons that the amplifier became broke. The first one is that the amplifier experienced a short cut. It was too hot during the testing that burned inside, so the amplifier does not work anymore. Another reason is that I used a glue gun to fix the position of the amplifier and the hot glue was directly applied to the amplifier, and the glue was really hot, which might lead to damage to the amplifier.

Before I found out that the amplifier is broken, I test different parts to check where the problems happen. I made a new paper speaker and used a new wire to connect each part. Then I reupload the code to the Arduino Uno. And after that, I built the basic version of the speaker, and it still did not work. So I think that the problems happened in the amplifier.

Since I only have one amplifier and buy a new one will take at least two weeks to deliver, I could not record the video of the final outcome of the music box. But it worked well when I took the photos of the stage of the interaction. At the interaction stage, I haven’t use the glue gun to fix the position of the amplifier. In the interaction stage, before I put anything on the music box, there is no sound or music, and after I place the candle or cup on the towel area on the music box, the music box started to work and play music.

For the basic working principle understanding, the testing video is basically the same as the testing of the final version, other than the extra towel-covered on the sponge and set on the music box. So please look at the testing video and find out how the music box work.

This is the testing link: https://youtu.be/EAUNLButh_E



Reference Code Link: 

I used the reference code in the project. However, people could change the sound into a song, or connect it to a cloud or Spotify to play a playlist.

Reference Source: 



Due to the accident of the broken in an audio amplifier, I think that it would be better next time to add a resistor in between the speaker and the amplifier. During the testing, the amplifier was hot while using it, so that might be the reason for burning the amplifier and made it doesn’t work. Also, another reminder will do not put anything too hot on the amplifier or other microcontrollers, which might cause some damage because of the high temperature. In addition, in order to allow the project to work smoothly, it is a great idea to prepare at least two sets of materials so that when something is not working, there will be another one for you to continue your project.

For further development of this project, I would like to change the material for making the music box. Instead of foam board, it will have better look in wood, acrylic board, or metal. Also, I would like to change the sound of the music box that makes it into a song instead of only some notes.

Moreover, people could add more colours to the music box if they want to. I like a white and clean look, so I did not add any colours.

EXP. 3-3-3 Review on Karen Quach’s Work

Reviewing Karen Quach’s (3177187) work.

Link to Karen’s work: https://studio.onirix.com/exp/36QVGL 

The project is done by Onirix. However, it does not really work perfectly in my device, so Karen gave me some images of what is supposed to be. There is the scene, assets, and a storyboard.






  • Question 1: What was the process behind making it?

Karen: “The process of making this was, thinking a rough storyline, then drawing each image and crating the gifs of the orb near the pond, and the owl. Then just put it together on Onirix.”

  • Question 2: What challenges did you meet?

Karen: “The first stage of creating a rough story was simple, I wanted to make something similar to the anime/manga puella magi madoka magica, where it’s very cute in the beginning but gets dark after, but I’m not sure if I accomplished that, then drawing the images were simple, the animals changing into different mythical creatures was simple, I just wanted to create something cool. Then I created the gifs using web gif makers, and turning it to AR was the most difficult, because I wanted to use adobe aero, because creating ar scene was very simple and it supported gifs, but it did not work when I tested on an iPhone 6, so I had to do it on something different, which is Onirix.”

  • Question 3: What tool did you use? (I know you used ONIRIX to create the AR scene. Are there any other tools you used to help finish the project?) If there are other tools, did you find any challenges when cooperating with different apps?

Karen: “The drawing software I used painted tool sai, and I used ezgif.com, I also used premiere and after effects to create the videos after switching to Onirix because it did not support gifs.”

  • Question 4: What is your motivation?

Karen: “My motivations for creating the scene were the anime/manga I mentioned before as well as children’s stories/nursery rhymes that have a darker meaning.”

  • Question 4: What would you like to expand on the project if possible?

Karen: “To expand the scene, I would redo the story, but keep the same theme I would also add more animals and forest-y sounds.”

  • Question 5: What potential could you see from an app similar to this?

Karen: “I think manga and webtoons would be very interesting if it were in AR, I would love to see a webtoon like Solo levelling or a manga like one piece. I wouldn’t know how series like those would be implemented in ar, like character-wise but it would be very cool.”

  • Question 6: What did you learn from this project?

Karen: “My biggest takeaway would be that like many other things having a good understanding of the basics is really really helpful, and that creating an ar scene has a lot of testing and really thinking about how a user interacts with it and what the “flow” and transition needs to be for a scene to be effective.”



First of all, I like the concept of the project, creating an anime or manga in AR is a really great idea. And I am excited that one-day anime or manga could have the AR version. Also, I like the way Karen set up the scene. The tree and grass help setting up the environment which could help users to participate. And the animals that are talking in the scene make it look like the movie Alice in Wonderland. Also, the way that the tree and grass put in a different place could create depth in the scene. And users could walk around to explore the story.

My suggestion is that if Karen could arrange the height of the scene, that will be better. For now, it is a little bit low, so I am looking at it in top view. If it is higher, I could look at it horizontally. Moreover, if Karen could make it into an actual scale and in 3D in the future, it could be a wonderful art piece. By putting them into actual scale will allow users to feel participate in the anime or manga like they are actually experiencing the scene. And in 3D mode, it might allow the anime or manga to become more vivid. But overall, I really like Karen’s project and I think that it is a really interesting and great piece.




This is a visual installation that explores the colours, sizes, and shapes. I am interested in how these elements could affect the style of the art piece and the feeling of the viewer. This artwork is inspired by Sol LeWitt’s wall painting #95 as well as the rule that I created in assignment 1 (the detailed will be shown under). Therefore, I combine them and create a new rule. In this rule, I will be changing colours, shapes, and sizes to explore their influence on the art piece.

In Sol LeWitt’s wall painting #95, he used lines to demonstrate the rules. The line is smooth, thus the wall drawing and the colour look very flat. In order to add more diversities to the painting, I try to use different shapes to form the line. Since I created the overlapping circle in assignment 1, I decided to use overlapped circles. While I used the overlapped circle to form a line, and then draw them like rule #95, but at the same time, the line will overlap the previous one as well.  The result is that it creates a different style of painting. The circle adds an irregular feeling to the lines, which creates a sense of flexibility and vivid inside the rules. Moreover, the shadow and the colours that are added to the drawing gives various depth, therefore, the image of the drawing is not flat anymore, it shows the spatial dimension hierarchy. Moreover, changing the size of the circles, it makes the colours more concentrated. Thus, while the circle is big, the viewer will feel fullness. And the big circle style will be cuter compared to the small circle.


  • Select five colours. Put in code, use lerpColor to generate the colours. 
  • Choose a corner or a border (or in the middle) of the canvas to start drawing
  • Draw a bunch of circles (or other shapes) in one colour, form a line. (The circle could be in different sizes and amount)
  • Choose one direction
  • Move a little bit to the direction you choose and then draw the line of shape in the second colour.
  • Move a little bit to the direction you choose and then draw the line of shape in the third colour.
  • Move a little bit to the direction you choose and then draw the line of shape in the fourth colour.
  • Move a little bit to the direction you choose and then draw the line of shape in the fifth colour.
  • Repeat the step that drawing the line of the circle(or other shapes) until the canvas is filled.

Versions that Created
Based on the Rules




  • From left-top corner to right-down corner: Select the left-top corner, draw the circles. At the same time, I changed how quickly the colours change and the drawing number of circles in code. It turns out the effect like the image above with a messier look.
  • Link for this version: https://editor.p5js.org/vickikiwu/sketches/dWDK8tdhE


  • From middle to outside: I choose to start in the middle part. And instead of a straight line going out, I rotate each line a little bit to create a swirl-like structure. Also, I change the shape, which is rectangles
  • Link for this version: https://editor.p5js.org/vickikiwu/sketches/H68xcoe3M




I got the inspiration from assignment1_01 and Sol LeWitt’s wall drawing #95


  • In assignment1_01, I created the rule that the circle overlap each other.


  • In assignment2_02, I modified the rule by Sol LeWitt, which is wall drawing #95.
Sol LeWitt's wall drawing #95: On a wall (paper) divided vertically into fifteen equal parts, vertical lines, (not) straight, using four colours in all one-, two-, three-, and four-part combinations.

Combining them, the developed result becomes the circles form a line on the canvas, and then they will overlap each and fulfill the canvas. (like version 1 above)



  • First, I set the canvas size to window size. The background colour will be black. Draw ellipses with no stroke. Create a for loop. Create two variables x and y. Use noise() to animate by moving through the noise space. And by adding random(), it allows the ellipse to have a line form in Canvas.

screen-shot-2020-10-28-at-3-39-15-am screen-shot-2020-10-28-at-3-39-20-am

  • Second, I add one colour, the shadow, and the blur to the ellipse.

screen-shot-2020-10-28-at-3-42-18-am screen-shot-2020-10-28-at-4-27-10-am

  • Third, add the variable of colours. Put down the five colour hex codes. Set up the cSpan, c1,c2,ratio, and the lerpColor(). Allowing the circle to change colours.

screen-shot-2020-10-28-at-3-41-20-am screen-shot-2020-10-28-at-3-41-27-am

  • Forth, Add push(), pop(), and translate() into the code. Therefore, ellipses could move down and keep drawing.

screen-shot-2020-10-28-at-3-44-24-am screen-shot-2020-10-28-at-3-44-29-am

  • Fifth, add random() to the size of the ellipse.

screen-shot-2020-10-28-at-3-45-11-am screen-shot-2020-10-28-at-3-45-31-am

  • In other versions, it might need to change some values in the elements in order to achieve the ideal result.
    • For example, in the rotate version need to add rotate().


headline-image“The hermit crab always takes for his habitation the shell of another animal, often that of the common whelk.” (Jordan, David, Kellogg, Vernon, 175)

Hermit Grab is a game where players take the role of a tiny hermit crab on a beach. These crabs must first race, then fight over a single shell. The main idea for this game has its roots in a video by the BBC regarding how hermit crabs trade over shells, those unfortunate enough to be the same size as other crabs will find themselves in a sort of fight over a new home. This idea fostered the creation of our game, here we decided to pursue what it would be like to represent the idea of resource scarcity. This theme was inspired by how our pollution has been affecting multiple areas of the Earth, especially in the Ocean; a place where we have not only rising sea levels but also in acidity. This catastrophic change in the Ph of the water as negatively impacted marine life, making it hard for animals that rely on Calcium Carbonate (i.e Mollusks, Crabs, and various Shellfish) for their carapace to thrive and even survive. Hermit Grab places users in this position of survival as these crabs are not only fighting for a home but also their lives.


The Book




interaction-diagram233 23333 2333


Players’ Relationship

sprite-001There are two players that they are in a competitive relationship. They compete to get the only one shell. The player with the shell at the end of the game wins.



sprite-0002.              shelled-crab(From left to right, up to down: Background; Hermit crab; Shell; Hermit crab with shell)




Development Overall



Rules of the game:

  • There will be 2 players
  • Players can move the crabs by pressing the arrow keys
  • When you touch the shell, you will get the shell
  • The player who does not have the shell needs to touch the player who has the shell, in order to get the shell
  • 60s each round, the player who has the shell at the end will win the game

Link to the video: 


Code link

Github: https://github.com/ocadryan/HermitGrab


Wireframe Planned Game


  • We would like to add more players to the game, so the competition will be more complex and interesting.
  • Add more rounds to the game, instead of only one round. Players’ scores will be count on the main page.
  • Add more function keys to the game. For example, set key “D” as grabbing the shell, key “W” as throwing some obstacles, etc.


Submitted by:

Weiqi Wu (3175842)

Ryan Boyd (3180091)

Alfonso Gabriel Benitez (3178921)