Embedded API

I almost forgot about publishing this one exercise!

The exercise is in this site:

In this particular exercise, I tried to find an appropriate API to make a simple webpage with it. However, I tried with tumblr API, SoundCloud API, and twitter API, but I failed miserably to use those API’s since the key required some time (half a year) to be received or the documentation of the site does not explicitly show you the steps to embed such and must become a development member. Hence, I decided to use our trusty Google Map API, since that was what we learned in class. I implemented this API in my midterm project website, and I found that the positioning of the map was a bit challenging to place, such that it does not look quite cramped. I believe it can look better than it is now, but for the most part I am glad that I successfully placed the API inside.


Monkey Business – Final Project

For this final project, I paired up with Sidra and started working together with some ideas in mind. Some ideas we suggested were using the limited edition cards from the Bai Qi pockies to make a game, using them to report the weather’s situation of the week, or making an automaton monkey using servos. We decided to do the latter, since we would need to buy many pockies in order to get the cards, which would be somewhat expensive. Regarding on the project, the automaton monkey will move its limbs according to the commands given through a webapp, such commands are dancing, jumping, waving, etc. Since we do not have much time, we decided to break the workload into two parts: the overall skeleton of the monkey connected to the arduino yun, and the code behind the framework of the monkey.

Sidra decided to do the latter, while I did the design for the monkey, even though we ended helping each other in our tasks afterwards. We agreed that the design will be laser cut rather than 3D printed, since that process takes less time. At that time, I pondered how should the monkey “stand” on a surface while it is showing its moves. I thought of some iterations: a pole stuck on the surface connected in the back of the monkey, and a base that connects with the monkey’s tail. I decided to do the latter and made a wooden framework similar to those wooden “do-it-yourself” toys. The monkey would be hanging on its tail on a triangular base with consideration of the monkey’s center of mass. The design is the following: Monkey

After finishing designing the monkey’s framework, I helped Sidra a bit in coding the javascript and arduino for the project. I specifically coded for the words input in the textbox that Sidra has created for the site. The code is meant to read all the text that the user has inputted and to find the relevant words that suggest a command. For example, if the user writes “monkey dance!”, then the code will only identify the word “dance”. Then, the code further encrypts this word into a series of commands for the yun with a switch and case function, such that “dance” will activate pins #13 and #12 (for example) for the yun.

We found out that outputting a combination of digital high and lows to the yun with the javascript can increase the amount of commands that we can code for the monkey; specifically 2^(x), in which x is the amount of digital pins set as an input. Since we were using only 3 pins as an input, the monkey can only recognize a total of 8 commands. However, we only made three commands for the monkey: dance, jump, and wave. How does the yun translates the inputs into movements for the monkey? This translation is done with conditionals, such that a high, low, low combination will activate the different servos in the monkey.

Overall, we had some difficulties such as using non-working servos, having unexpected errors that we later fixed, and burning oneself with hot glue. However, this final project was a great experience to understand how a webapp can communicate with a device outside of its local connection. Here’s the LINK for the site.



Midterm Project – Responsive website

For the midterm project, I used bootstrap to code my website. The website’s main theme is a mobile phone accessory store for people to customize their cellphones. The website has a total of three main links, without including the login function, and these links are the store, about, and registration site. They are all responsive, and the navigation bar transform into a hamburger for smaller devices. The images are the following:

屏幕截图(50) 屏幕截图(51) 屏幕截图(52)


As for the code, I needed to learn what are the main functions in bootstrap. They have different classes and javascript functions that are provided in their website: http://getbootstrap.com/

The functional aspect of the website still needs some progress, but the overall look of the store is mostly developed.


You can access the website in this link:

Assignment 3 – Embedded video

In this assignment, I used MediaElement.js to embed a video inside my fanpage, you can view here:

At first, I struggled a bit to use iframe along with the media element, but it takes a few steps to make the code work. First, you need to follow the guidelines that MediaElement.js website tells you: input the CSS link inside the head and JS script in the body. Then, you can use an iframe with the class “mejs__player” to link an online source for the video. Note that when you are inputting the video source, especially if it’s a youtube link, you need to place the “/embed/” tag inside the address as well as “?rel=0” at the end of the address. If not, the media player will give you an error when playing the video.

屏幕截图(32) 屏幕截图(33)

Assignment 1 – Fanpage

You can check out my fanpage herehttp://

It is about 2012 Playstation’s game “Journey”.

This webpage took me a while to finish, because I did not have any relevant understanding about HTML and CSS. I took my time to learn the format and the different elements and attributes of the CSS and HTML, so I am very sorry for turning this late. The first homework, although each exercise seems simple and straightforward, took most of my time as I was understanding what really each line of code is about. However, this fanpage is my first to make, and I feel happy to have a better understanding of the overall situation.

I did encounter some difficulties making this fanpage regardless. For example, I had no idea that the reset.css file from Meyer was actually super important to re-format the visualizations in my website. I know it was taught in class but did not really comprehend what really it is about. Thanks from my classmate’s help (Richard Huang), I finally can get every block inside the html in order. The second problem was some functions that I really wanted to use for my website but did not understand how to apply it in the code. Hence, I used W3Schools to search for answers. In this case, I learned some new tricks as well.

I really need time…


Final Reflection – TechnoNature

In the making of this animation, I decided to convey a message between the relationship of nature and technology. Since this project is my last one, I wanted to put quite a lot of effort into it. Thus, I learned a lot of new methods to animate not only through Prof. Marianne classes in Adobe After Effects but also through Youtube videos about cinematic effects, partial 3D facial animations, and walking cycles. Additionally, I found the twelve principles of animation very useful during the making. This project took my photoshop, premiere, audacity, and after effects skills to the limits.

I began with the creation of my scenes through simple sketchy panels telling where, what, and how the main character (which I called S4M or “SAM”) moves around the animation. Basically, the main character is a robot that wanders around the corners of a city, finding an unusual item never seen before, a leaf. After the panels, I started with my character design through photoshop and separated each movable part into layers; I have done the character sketch in a small notebook. S4M was divided into 3 sides: front, sides, and rear. The background of S4M was also divided into those three. What I have found very convenient is that After Effects allows the conversion of 2D space into 3D space, simplifyng the creation of the front and back background scenes. Then, I began tediously animating the scene according to what I have learned overall in After Effects. In the beginning, S4M’s walking cycles were quite horrible (it seemed like he was flying on the ground), so I did the scene all over again. The second time, I noticed a pattern in walking cycles — the time that one leg takes to reach the opposite end is the same as when the other leg moves towards the other end. Although this idea seems very obvious, I see that forgeting it is quite usual. After finishing all my scenes and compiling them in premiere with music and sounds, I noticed that my final animation looks drastically different from what I sketched in thepanels before, but I am still quite happy with it.

I had quite a lot of fun in making this project regardless of the fact that it took days to make, and I think everyone as well. Sometimes, I animated S4M doing some hilarious movements that can bring a smile to anyone. However, as I will not have any IMA’s classes next year during study away, it saddens me a bit. Nonetheless, I hope that everyone in IMA has a wonderful time, and I will be looking forward to the senior year.