Interactive Comic Project-(Chen)

Name: Mehr Un Nisa Javed

Professor: Ann Chen

Date: 13th October ’2018

Partner: Amanda Williams

Objective: Make a comic project using the skills learnt in class.

Project Title: “Choose your Curry”

Project Link:

Idea: Amanda and I both wanted to present our cultures/best cuisine to the class. Also, we wanted to show how we come from different parts of the worlds but share commonalities.

Coding: I think coding was bit hard initially for me as I had to put in a lot of things together. However, after playing around with it and watching a few tutorials and class notes I was able to figure out most of the stuff. When the errors appeared on the code I usually copied them and put them on google and usually other people had already posted a solution to it so I was able to easily figure it out (thanks to my professors advice on this).

Link to a few pages I made:

(I wish I could’ve made a better use of these visuals)

Visual Assets: I worked on half of the visual assets and Amanda worked on the other half. I made use of photoshop and adobe illustrator to work out the visuals. Moreover, I made use of a few online websites to help me fix the resolution and for some effects. Overall, I spent a lot of time to figure out the right kind of visuals and to amend them in order to make best fit for the project.Also, it was my first time to work on such visuals so it did take a lot of time as I had to first learn how to make and then check if it worked.

PhotoShop: As the PhotoShop is not free so I had to be mostly in the AB to use school computers in order to complete my work.

How it was working with my partner? I think I really enjoyed working with her since, we both worked on the same pace and shared certain similarities. We both agreed to most of the things we wanted to do do specifically and respected each other’s ideas. However, I feel like at times its a bit difficulty to work with partners instead of working individually because sometimes a situation of panic does come and when you don’t get to meet everyday you can’t share your progress with your partner and then, it gets a bit difficult to figure out if we are on the same page or not.


Overall, I really enjoyed working on this project because it was a great opportunity for me to learn more about coding. I feel like after this project I will be more confident to code and make use of in class exercises. However, one thing about which I am still not confident is that by the end of the semester will I be able to go for a more ambitious project or we would start learning new things instead of adding on the previously learnt skills.

Future improvements:

  • Make something more interactive as my initial idea was to start with an hour glass or birds flying but the fellows recommended not to go for it as it would be too ambitious.
  • I would also want to do something like interactive cooking session where the users would get a chance for a hands on experience i.e. would get a chance to cut onions, put oil, peel tomatoes himself/herself.
  • More communication with my partner in terms of the project as I would definitely want to figure out first after the completion of the entire project that who would do the compilation of the work as it does lead to hassle.
  • Add more CSS and Java content to the code as it would lead to better flow of the story and would also, add to the users experience.
  • Next time, I would definitely want to do more work on the visuals of the projects as I saw tool with my previous roommate which helps to draw the comics (it looks pretty much fun)..




Lab 4-Documentation

Recitation 4 – Animation in Processing

professor:Marcela Godoy. Session: Tue/Thur 11:15-12:30

Name: Yiyu (Nora) Yang

Step 1: Choose an image or a theme that inspires you.

I chose Agnes Martin’s work. In this piece of artwork, there are two large triangles and two yellow small triangles. I love the simplicity and the complete parallel lines inside the picture.

Step 2: Considering the image you chose as a starting point or inspiration to create an animation with Processing using any 2D primitive or vertex shapes. Using the functions that were covered in class, create an animation with Processing. Using paper to sketch your idea may help.

I use Processing to create the same triangles and lines. Then, I tried to add the rect and ellipse we learned in class, where the objects could be traced by the mouseX and mouseY. However, because there are several layers in the picture, and I don’t want the traces of the rect and the ellipse, I created a “void Triangle()” to set apart the background of the picture, and the objects themselves. This way, wherever the objects move, their traces would not be shown on the board, makes it more beautiful and clearer.

Step 3: Please find my code with comments in the code box and my final sketch here.

Step 4: Write a short reflection based on the results you just created and the content discussed in class. Some questions to orient you in this reflection are:

  • What are the differences and similarities between the image you chose in Step 1 and the image you created in Step 2?

Answer: The similarities are easy to see. They have the same background. I add new objects into the picture, and turned them into animation that can be controlled using mouse.

  • Do you think that drawing in Processing is different than drawing/painting by hand? How is it different? Why is it different?

Answer: Definitely yes. It is very different when using Processing to draw things. You have to think about every little detail, that’s why I found the sketch paper very helpful. I calculated several times using the sketch paper, just to find the correct position of certain points of the triangles. User could have more interaction with the animation. But in hand drawings, I am afraid the audience could not do anything about it except looking at the drawing.

  • Is there any value in recreating an existing image/drawing/graphic using computational media? What is it?

Answer: Yes, by adding the reflection of users. Computational media could be explained as new layers to the original drawing/graphic. Also, computational media analyze the original/existing image first, and then translate the image into data and numbers, so the new animation is more complex and accurate, whereas original pictures have more room for creativity and freedom.

  • Do you think that both drawings cause the same feelings in the viewer?

Answer: I think they create very different feelings. The animation on the computer would make the user want to experience.

  • If you were to create multiple variations of your drawing, what would these variations be and how would they differ?

Answer: I would try to add more functions to the drawing, and obviously the functions would be more engaging and fun. I will create several copies of the animation, and let the user choose the one that entertain him/her the most.


void setup(){


void draw(){

//adding animation for mouse
float opacity = 100;
opacity = map(mouseX,0, width,0,255);
fill(163,85,101, opacity);
ellipse(width/2, height/2, mouseX,mouseY);



void Triangle(){
//drawing the basic three lines
//drawing the two big black triangles
//drawing the two small yellow triangles


[PS4]Granturismo Sport

GranTurismo Sport

The scene in this game is so cute. When I was looking around, I actually can see what’s outside the window, where my legs and my feet are, even the back of the car! Every time when I hit the wall, there will be a vibration on the controller. I have to say this game requires very good driving skill lol cuz I literally hit the wall every time when I was about to turn the car around. The headset is very easy to be positioned on the head and there’s a part which the user can adjust the distance between his or her eyes and the screen, which I think is really considerate. Whereas, the game is a bit too long for the user and I got really bored during the last half of the game because there was nothing special anymore. The headset is super dizzy, and also the controller vibrates when I hit the wall, and I felt dizzy for a while after I took the headset off.


Field Trip to Maker Carnival – Xiaoyan

Documented by: Xiaoyan Kong

Participate date: Oct 14, 2017

Documented date: Oct 15, 2017

Instructure: Professor Moon


Yesterday afternoon, I went to the 2017 Shanghai Making Carnival which takes place in Yangpu district. It was my first time going there and I really enjoyed it. There were so many inspiring projects that worth spending time seeing and exploring.







I took pictures of some projects that I am interested in. They are the followings:

This keyboard, instead of using the English alphabet, the creator uses Chinese characters represent each of the letter. For the technique part, they improved the flexibility and the touching sense of each bottom.

Those projects on the table are made by the deaf-mute students, they don’t have that much technology includes, but you can still see their creativity through these amazing and delicate jobs!

I saw pretty much 3D print projects in the Carnival which were really cool. They were using different materials and different kinds of machines. There was even one for kids to play and explore. I saw lots of parents took their kids playing this which I believe this must be very inspiring for kids.

This project has almost the same concept of how Apple wireless chargers working. You put wires around the insulator and the items that you want them to work, connect the insulator wire to the power supply. When you put it on the insulator, the items will get to work. When you remove it, it doesn’t work anymore.

To conclude, I appreciate that I got the chance to participate the carnival, got surprised and inspired by so many impressive works. But at the same time, I am also considering about with the same tools we all have, what differences can I make? I think I should take step by step, pay more attention to the basic knowledge, and be more creative.



Recitation-5 Interaction Lab : Animation in Processing


Student Name:Angelina Ye

Project:How A Cat Becomes A Lion

Instructor: Moon


This is the first time for me to processing to create animation. My aim is to create a colorful cat who will transform into a lion by the interaction of the “mouse”.

The Paper Draft

  1. The big-face cat-> 

2. My original plan was to make cat’s eyes move from closing to looping circle, but later decided to give up this part and focused on how the cat could transform into the lion.

3. Mark the position of each point in order to facilitate the drawing of animation in processing, which later turned out to be very helpful to do so

4. Process

I first drew the cat face in processing and fill its face with random color, which makes it pretty dynamic. But when I run it, I found: Ooops. I used the line to draw cats’ ears instead of triangle, so there is no way to fill the color of area surrounded by lines. Therefore, I need to find a way to fill the color of the ears. I thought of two possible ways: 1) Redraw the triangle on the existing ears and fill them with random color; 2)put a bigger rectangle beneath the cat’s face

After trying the both ways, I found the first has better visualization effect so I chose the first one.

This shows how I fill in the first ear of the cat. “Patient, Kitty, your another ear will be ready soon:)”

Now the two ears are all filled in random colors. This cat is so cool to have three colors on its face for the most of the time.

Now is the critical step to turn a cat into lion. What is it? YES! Lions have far more hair than cat, and every time the “mouse” moves, the cat will grow gradually into a hairy lion(๑•̀ㅂ•́)و✧

But the cat does not like black and hopes its hair to have the some magical effects as its colorful face, so now its hair has also changed to the random color.

When the cat encounters the “mouse” of different speed and different escaping path, the hair shape will also change:)

Now,  this cat has frightened all the “mouses” in the town and it is pretty lonely and play with its own hair:)))

What I learned from this class:

  1. When drawing the animation in processing, it is really important where to set the origin, because the position of it will change the whole thing, so I need to considerate whether to stick it in the original position(which is on the up left corner) or set it to be at the center of the shape I created (for example the rectangle in this case)
  2. As long as I need to fill the color of a shape later, it is a better idea to create the image with eclipse, rectangle, triangle instead of the combination of the lines. The example of no-color cat ears can be referred to as an example.


  int x;
  int y;
void setup( ) {
  size(500, 500);


void draw() {
  //background face
  //big face
  rect(width/2, height/2, x*12, y*8, 7);

Bafang is the last thing I see–Marjorie’s Final Animation

“Bafang is the last thing I see”
The Unity Build
The Idea

Most of my work is integrated into virtual reality. Especially in the past semester, I have found that integrating different technologies results in a more immersive, more compelling experience for the user. Thus, when our class was given our final animation assignment, I knew that I wanted to combine two mediums I enjoy creating in–animation and virtual reality and see what would come out.
My favorite technique of animation is drawing frame-by-frame animation with a computer mouse using Adobe Animate. My artwork generally lacks polish, but retains some sort of charm, which lends well to my preferred style of animation. I wanted to stray away from my usual VR environment design style: low-poly 3D models, brightly colored textures, and relatively detailed to increase user realism. Thus, I decided to use a minimalistic black-and-white, 2D style for my loops and place the animations around the player at differing distances, to give a sense of depth.
The narrative is as follows: I am on the roof of my apartment, 27 stories up. When I look down, I see and hear the city of Shanghai below me. When I look up, I see twinkling stars. Timed with the music, the stars begin to form constellations in the shape of flowers. The flowers become more and more dense, until the sky is filled.

The Process
Movie Texture

To achieve this, I used Unity3D, C#, HTC Vive, Adobe Animate, and Adobe Photoshop.
The technical aspect of the project changed quite a bit, as I found that many techniques I thought would work, looked absolutely horrendous.
To add the animated loops, I converted my video clips into .ogg format, imported them into Unity, and created a movie texture. Then, I added a plane gameObject to the scene, and placed the movie texture on the plane as the material. There is a short script required to play the video, that I attached onto each plane.

My original idea was to create three different scenes in Unity3D, one for the city, one for the stars, and one for the flowers. However, I ran into problems of scene load and audio. When the user is in the headset, and the scene changes, they see a navy loading screen that breaks the immersion. Furthermore, the audio would cut abruptly. To combat this, I put all the animations into a single scene. The animations would be instantiated with a timer.

C# Script
Now that I was only dealing with one scene, I wrote a C# script to manage the instantiation of the different clips. The script did a few jobs. I wanted the user to begin by looking at the city, and then once they turned their head up to look at the stars, or turned around, it would trigger the instantiation of the music and the flowers as synced with the audio. To achieve this, I (with the help of Sean) turned the user into a unicorn. (This is because I’m not good at scripting and I didn’t want to learn how to raycast properly). I parented an elongated rectangular prism onto the user’s HTC Vive headset, and set it as a trigger. Then, I placed a cube above and behind the player. Because the objects were colliders, once the player’s unicorn horn hit either cubes, the timer would begin.
The timer begins to run. At certain intervals of time, transform objects would be instantiated. To ensure that the script did not instantiate objects infinitely at a given time, I created a boolean that would set as true after the object instantiates.

For the city animation, I thought I would be able to take a photo from my rooftop, trace over it, and have a somewhat 3D-looking scene, as the perspective would be correct. Oh boy was I wrong. Once I placed the image onto a plane into Unity, it was clear that the city was a flat image. After a consultation with Tim, we decided to try to take the four foreground buildings out of the image onto separate planes and have them be transparent images. This worked really nicely, as user testers were no longer distracted by the obvious 2D-ness of my city.

Chroma Key
At this point, I was facing a major problem that took three weeks to resolve. My original idea was to use transparent videos for my animated loops so I could give a sense of depth to my stars and to place the flowers on top of the stars without obscuring them. However, Unity3D personal edition does not support transparent videos (the software does support transparent images) so I attempted to chroma key out the black in my videos, leaving just the white, resulting in a transparent video. This proved very difficult, as I was unfamiliar with using shaders in unity. I created a standard shader, put in my chroma key shader script, and proceeded to attach the shader in the wrong menu for three weeks. It was only two days before the project was due, that I realized my error, rendering the rest of the project smooth sailing.

Did I achieve what I sought out to?
Through this process, I learned a lot about Unity, about designing for virtual reality, using layers and animation loops, and C# scripting, which was my goal in creating a 2D, frame-by-frame animation in virtual reality. I wanted to test whether 2D placed in 3D could give a sense of immersive 3D. In the end, feedback that I received give the impression that the project was successful.

What would I do differently?
If I had more time, I would place more stars in the scene, having them further away, drawing more variety of constellations. I would put the stars and flowers more carefully around the player, to minimize overlap errors. I see now why Unity is trying so hard to create a platform for creating VR in VR. It is tedious to constantly move an object, play the scene, and put on the headset to check if it’s placed correctly.
I would also like to focus more on the transitions between the elements on the scene, fading away from the city to the stars, and giving more indication to the user that the narrative is changing.
Next steps for the concept: Playing around with having animations as the textures of 3D modeled objects; removing the unicorn and recording a 360 video in Unity for the animation to be viewable on mobile VR; using the loops I have now to create a traditional animation.

Thanks to:
Lei Ban for the incredible soundtrack.
Sean Kelly for endless technical support.
Tim Szetela for fixing nearly all my non-scripting problems.


1) Title of Short: Barco
2) Screen Shot 2017-05-21 at 10.59.12 PM


4) Barco is a 2D hand drawn animation that blends in the 3D world as well. It is a story about discovery and about encountering something that you have never encountered before.
5) Ben Lei Sound Design
7) My story for animation was first inspired by a book that i was reading called sapiens, It’s a book about human evolution, I was fascinated by thinking of the moments that humans learned or realized that doing things differently could bring new discoveries. For example the first person who ever thought about floating something on water and therefore being able to travel on water, I was planning on creating a short about this moment how I imagined it would be like for the first ever homo sapien. My plan ended up shifting at the end and i took it more bear bones and made it abstract a discovery among two worlds the 2D and 3D mediums representation of the discovery between man and water.
8) The technique used to make this animation was hand drawn frame by frame animation with pencil and then scanned into after effects. Also an eraser might have been used lol. After effects was a huge player and i used trapcode form to create the 3D assets and particles.
9) Learned so much but the best thing was learning how to take something that exist in our world like a pencil drawing and giving it life, i had only previously done 3D animations before but never more “Artistic” explorations like pencil animation in 2D.

Week14: Final Film – “Dinner” by Tian (Tim)


by Jingtian Zong


Description: Escape into a world of imagination from the dinner table.

Credit to: Yaming Xu & Jingyi Wang for acting in original footages, Jianghao Hu for piano.


The Story:

The story is about diving into a world of fantasy while having dinner with alcoholics. I originally wanted to present how depressed one can be when he/she cannot be part of others who are all having fun, but it ended up open why the person has that fantasy since I didn’t include the sound of other people talking. I kind of like it to be open but I know that some audience might be confused. In the future it might be better to find a balance between leaving space for audience and making the story clear. The structure of the film didn’t change much, still traveling from real world to imagination and back to the real world.


The softwares I used were Animate, Illustrator, After Effects, Reaper and Premiere. Most pre-production was completed in Animate, drawn frame by frame and they took a very long time. Some of the stills were drawn separately in Illustrator. I applied rotoscope partly for drawing and referred to some tutorial on motion when drawing the bird and the feather. After that I imported swf and ai files into After Effects and made more timeline animation, adding masks and inverting color. My audios were a mix of recorded foley sounds (for example the bird’s wing was created with a flag) and sounds I found online. I recorded the piano piece with my friend Jianghao playing. I edited and manipulated some sounds in Reaper, cutting them to the length I want, adjusting the speed, adjusting the pitch so it would fit in with my clip and atmosphere. Finally I imported the integrated clips and audio file into Premiere to do final editing.

And More:

I learnt a lot about drawing frame by frame, especially about motion and transformation. I learnt different softwares especially After Effects which allow me to loop, invert, and time remap footages. It was my first time to edit a whole film (although short) by myself, I think I learnt also a lot about how to pacing the film, how to edit creatively and how to utilize audio to expand the world of my film and present things not in the frame. There are still a lot I want to explore in animation such as design, color, the movement of frame and different strategy to tell a story. Looking forward to creating more animation in the future!

Animation – Final Project: Photoshop Tool Basics (feat. Pacman)

Title: Photoshop Tool Basics (feat. Pacman)



Link to my animation:

Description: Learn how to use tools in Adobe Photoshop with Pacman!

Credit: music: Rags 2 Riches Rag – Audionautix on Youtube audio library
sound effects: all from, public domain

My blog:


Actually my idea changed a lot throughout the second half semester. Initially I wanted to simulate a side-scrolling game, but extra actor of the main character would be needed to help me finish the animation and having someone that wasn’t enrolled in this class spend much time for my animation seemed to be impractical. Therefore, I changed my mind and decided to do an animation about color mismatch, but due to a property accident there wasn’t enough time left for me to shoot some scenes, and I also found that it was hard to keep consistency between different takes of the same scene because they were filmed in different days and time (and I didn’t use dragonframe). So I kind of kept the idea of doing something interesting as well as having a weird/mismatch feeling and finalized my idea —  to do a photoshop tutorial with paper cutouts simulating effects of different photoshop tools. I expected that after a short time of normal demo, things will go wild and become funny. I received feedback that I could use pacman as the character fighting against the cursor in order not to be photoshoped. I didn’t mean to let pacman interact with cursor, but I thought it would be really funny to do so, so I took this idea and developed my final story.

IMG_1427 (I can’t rotate it 🙁 )

For my animation I mainly used Dragon Frame to shoot frame by frame stop motion animation (the canvas) and scanned the paper collage Photoshop UI as the workspace. I used Premiere to edit, stabilize and merge Dragon Frame video clips, Photoshop to draw cursors and tool icons, crop out useful items (such as mac close buttons) from photos, and do other photo editing, and After Effects to composite my final animation and add sounds to it. I thought shooting photos would take up the most time, but the fact is I spent several times more time on After Effects. I need to take care of many subtle changes and details to make it look like what we actually do when we are using photoshop. For example, cursor is different when it’s on the canvas or on the workspace. Every time I switch to another tool, the tool bar should be replaced to the version where this tool is selected.

One of the most important thing I learned is to try to look at the bigger picture from the very beginning of a huge project. I changed my idea twice because I found new problems as I did the animation. If I could think over the potential obstacles and problems beforehand, some of the unnecessary trials could be avoided. Apart from that, I really learned a lot about AE. Before this course I knew nothing about it. But now I start to get familiar with it and learned how to organize files / compositions for a big project so that I won’t mess up when I want to modify only part of it. The last but not least thing I learned is sound really helps a lot tell the story in animation. In my animation if there were no sound effects, mouse clicking and character actions would not be highlighted, and audience wouldn’t have that strong immersive feeling.