4.3 Experiment Crafting Electronics Swatchbook


img_1387 img_1388

Group 13: Doris GAO 3175995

Digital Switch

  • Arduino
  • Jump wires
  • Led lights
  • Resistors (330)
  • Foam
  • Glass bottle
  • Gloves
  • Photoshop – to draw initial idea and design
  • Paper cutter
  • Cutting machine
  • Woodcut Knife
  • Tape
  • Hot glue gun

3 main parts 


In the initial design idea, I planed to 3D print all parts but I didn’t find a place to print them. Finally, I kept the foam draft to finish the project. Also, in the first design, it should include potentiometers on the side of the body, but I didn’t test out a solution for this yet.

(test parts)




(Circuit Diagram)


Code: https://gist.github.com/YueGAO3175995/55b56bcfbc2f8a985fc8a957e6b8eb24

Video: https://ocadu.techsmithrelay.com/BKdq

Inspiration: https://m.zcool.com.cn/work/ZMzkwNDU5MzI=.html

Additional Notes:

The mian objective is developing switch from my experiment 4.2, bringing it into a new look. Users can interact whole project by crafted gloves. I was looking for a new way to craft conductive material into the gloves, and new way to connect wires in this assignment, I change the conductive ink to copper tape for better conducting.

Interview with MacKenzie Marquessa


Overall Comment

It provides me a new photo experience. I feel as if I had really gone to a maple leaf forest instead of my own little garden. These photos also capture the unique beauty of Marple leaves in Ontario. Art and design from daily life are attravtive to me, and I am enjoying in it. This unique electronic album is also presented in a special and unique way just like film photo.

What was your original idea for this project?

I wanted to interact with the changing season in a way that was meaningful and unique. I really love the fall season that happens in Ontario and felt as though the best way to encapsulate it was through an AR experience that could be taken anywhere. It then brought up the idea of being able to share this album with friends and family who want to experience the fall in Ontario. The idea began to grow beyond simply one roll of film. What if I was able to create many unique AR experiences with a multimedia approach? This is what drove me to create this album and will continue to inspire me to create more.

What’s inspired you?

In October, I took a trip to a beautiful lake and was surrounded by rolling hills or red, orange, and yellow trees. This was my first full fall in Ontario and my first time leaving the city to actually experience it. So, what inspired me to create this AR project was to take the film photos that I took on this trip and bring them to life through an AR experience. I was also really attracted to the juxtaposition of using film photos in such a digital way.

How’s the process of creating your AR project?

The process began with me taking photos, videos, and audio clips over the last month and gathering them into Adobe Aero or linking to external media. I have some experience with UX/UI principles and was able to find time to create a very short onboarding flow with Adobe Xd to inform the user what to expect. I chose to use audio and video to enhance the experience of the photos because this allows the user to visualize the imagery in a more engaging and impactful way. I got a lot of pleasure out of creating this idea. Although I found the constraints of Aero limiting at times, it helped to guide me for my first time building in the AR space. Overall the process was exciting and challenging, also a little bit frustrating but that always seems to be the case when working with tech.

If you had more time to complete your project; how would you design? Would you use the same software?

I would change the images into 3D objects where the user is able to enter the environment and the sounds of the leaves being stepped on plays automatically. It would also be ideal if the videos were embedded and played when the user enters the proximity. I tried to communicate the idea of a multisensory experience, but I would definitely improve it with later iterations.

Well if I knew how to build an open sources WebXr experience I absolutely would. The original idea was so exciting to me because I have so many photos from other trips with family and friends and if I could send them an interactive photo album that acts as a time capsule, it would bring everyone involved great joy!





Doris GAO 3175995



  • Draw a canvas with a restriction of 900*900
  • Draw circles, circle srokes, rhombus, polygon and special strokes
  • Set random coordinate for all shapes except polygon
  • Set random colors for circles, rhombus and special strokes

The image will be random generated when the page refreshed.

Code link:



I named this work as “wonder”, the polygon is positioning in
same coordinate, the position won’t change everytime I refresh the page, but lines inside are changing. Other shape will be randomly generated around it. I want to express that time goes by, although things will change around us, we are exactly what we are, we shouldn’t lose ourselves when everything changed by our side .


Initial idea

– from https://ocaduniversity-my.sharepoint.com/:p:/g/personal/3166051_ocadu_ca/EQi3YBjysjFDoV5WBUI4lDUBAgWZiH_gGHbhkBk39u7a4A?e=cSU6jw page 22

-comments from second assignmen

-plan to add more shapes, colors into canvas


Set global variable


Set up canvas


Draw shapes


Set random color


Duplicate shapes



The Condor



The Condor is a new method for communicating. Our goal is to present an offering that is geared toward taking time to slow down and connect with others through symbolism and poetry. Users can experience the joy of poetry and abstract thinking while being gently persuaded to take a breath and enjoy the present moment.

Watch the walkthrough.  Or visit the website.

Our influence comes from the Birds on the Wing  a Victorian children’s book  about birds. The book references the strength and freedom of the Condor, who battles the storm to get to it’s nest. By applying this theme to our own experience, not as birds but as artists and designers, we concluded that the Condor is a good representation of expecting to have to work hard to get where we are going and constantly push ourselves to do better than we were before.

Our multiplayer experience had many iterations and we had to pivot the functionality to better suit our time constraints and coding abilities. Tae has been instrumental in organizing the home page of our site, and performing an exploratory foray into Unity. Doris’s talents as an artist gave her the confidence to take on responsibility for all the graphics, diagrams and characters from the book. Marquessa has built the in-game code, future projection prototype in XD, and the copy.

The Book

screen-shot-2020-09-28-at-9-46-46-pm screen-shot-2020-09-28-at-9-47-17-pm screen-shot-2020-09-28-at-9-47-07-pm screen-shot-2020-09-28-at-9-46-55-pm

Player Interaction Diagram


We simplified the interaction for this project. We do believe that it is possible to incorporate many users into the experience. 


Iterative Process

To start the experiment we decided that it would be good to at least try to explore different avenues of what is possible.

Unity Experiments:

team1 team2
During this experiment, Tae focused on  creating a mechanism to move a bird character with the arrow keys. Although we quickly found that the time constraint was to restrictive to build a matching character to our book.
We thought that Unity would integrate with Javascript in a way that more suitable to our level of coding experience, but that proved to be an incorrect assumption. However, we still took the opportunity to experiment with Unity as a direct result of this assignment. We still consider this to valuable experience regardless of failure.



HTML, JS, CSS Experiments:

The group decided that we were going to go with the 3rd concept from our previous assignment, a slow communication experience. We started out with something that looked like this:



We took the bird characters from the book and linked them to the individual canvases. (With a moderate amount of success.)





In this photo, we are beginning to organize the canvas and background.



Our initial work in progress looked something like this video. While we appreciated the abstract birds, the location, pace of the scrolling text, and a few other tweaks weren’t quite right.



After the feedback, we modified the canvas to be more aesthetically positioned. We also played with the grid, size, and pattern.




It took the full experiment to get here. But through much discussion, videos, phone-a-friends, and successes – we made it!

We are very proud of the result. It has a very strong visual language and relates to our own experience through this experiment. We are all the Condor.

Quick demo video here.


Future Projections



Our goal was to create a shared canvas that users could bring sections of the poem into the experience, which could then be reordered to create a new meaning and message to an old poem.

As of right now, we were not able to accomplish this goal. With more time and a better understanding of how to express our ideas in code – we believe that we could produce something like this XD prototype.


P5 Web Editor Link for Experience:

Pastebin Link for Homepage:


Made by:

Tae Nim (3170229)
Marquessa MacKenzie (3174722)
Doris Gao (3175995)