NOC – Week 1: p5 basics (Wentao)

For this assignment, I mostly focused on the function of mouse position and mouse pressed function.

When moving the mouse around the canvas, you can change the background color according to the position of the mouse.

When you click the mouse, a white ellipse will appear at the position of the mouse and will move around with the moving of the mouse.

When you press the mouse, the size, color, and transparency of the ellipse will change randomly. And when you stop pressing the mouse, the color will change back to white again.


let a, b;

function setup() {
  createCanvas(400, 400);

function draw() {
  background (mouseX*255/width,mouseY*255/height, 0, 12)
  if (mouseIsPressed){
    a = random(10, 60);
    fill(random(0,255), random(150,255))
  else {
  ellipse(mouseX, mouseY, a, b);


  1. Painting the face for the two characters

2. Sculpt out lip position for different sounds. Including the vowels in Japanese (a,e,u,e,o) and consonant position for lip closing

3. Sculpt out some expressions

4. insert into Maya and add their hair

5. adding riggings to the model for doing movements

6. Adjust different lip shape according to the audio, render out the animation and input into after effect

7. Add background, foggy effect and sound to the video and render out. Then input into Premiere to add opening and ending

This is the final video and the presentation




DSFA Assignment 3: Augmented me_ Wentao Wang

These are the 14 facial expressions modeled in Mudbox. The overall feelings are fine but it will be better to have some additional details to make the expressions more realistic. For example wrinkles on the side of the mouth in on the smiling face. In addition to that, I haven’t added the teeth models in them so some expressions might seems weird.

angry face


sticking tongue out



ugly smile









The second step is to send the models in Maya and animate with them.

This is the normal face after sending into Maya, with teeth model added onto it.

I added three spotlights to shine light onto different angles towards the face to achieve a better realistic effect.

I also added another camera to work on camera animation. The left part of the screen is the camera view and the right part shows the actual working view from the perception camera.

This is an example of the working view when making animations with different expressions.

This is the final video. There are still factors that need improvement. One factor is the camera moving. I didn’t have much time to make a more up to rhythm animation, so the camera animation might look a bit messy.



DSFA Assignment 2: Myself_ Wentao Wang

  1. Process

the original file from Maya input into Mudbox

the process for making my hair

adding eyeballs

the final result

2. The 14 images of Myself

The realistic me

my glassess

badminton maniac

food is number 1

a road to the north pole


Dog’s are my favorite

Beijinger’s Peking opera

becoming a cat

Blue sky and beach

One punch man

Why so serious

realistic naruto

As a neuroscientist

Cyborg me

3. Reflections

The first difficulty I encountered was when I imported the model from Maya to Mudbox. There were a few errors occurred due to some mirroring error, but luckily I was able to fix the meshes in Maya according to the error report in Mudbox.

Another obstacle I met was that my sculpting tools weren’t working when I first started sculpting. With the help of the professor, the problem turned out to be that the scale of the model was too small, thus scaling the model bigger helped fix this problem.

For future improvement, I think the sculpting of my hair is not very satisfying. For now, my hair looks fine, but still not as realistic, and it looks separated from my head. For this project, I think I might need more sculpting work since I was too focused on my faces but not other parts of my head. Overall, I am quite satisfied with my work.

This is my poster for the project.

DSFA Assignment 1 Pop-up Me _ Wentao Wang

Pop-up Me

These are the mugshots I used to start modeling my face. 

This is the final product of the model of my face. The top of my head looks a little bit too sharp, and some muscles on my face need further adjustment. But overall, it looks kind of like me.

The following section is how different parts of my face are modeled during the process.

The nose started with seven pieces in the front and adding more structures and details later on. Using face extrusion to make the structure of the inner part of the nose.

This is the structure of my mouth, one important part is to form several layers of the lip to mimic the actual mouth muscle structure of a human.

This is the structure of my eyes. Similar to the mouth structure, the structure of the eyes are also loops of faces to make is similar to the real eyes.

This is the structure of my ears. To make the ears, first form a question mark shape to make the outline of your ear, and then use extrusion tool, append to polygon and multi-cut tool to add details to it.





These are the screenshots of my mandala, and this is the link to my video documentation.



This is the PDF of my presentation.


These are the screenshots of my model after further adjustment, more details are added to the ears and the whole skull is completed.



AE field assignment _ Wentao Wang

I was at the backyard of the academic building when doing the field listening assignment. I used my phone to take down the sounds I heard and some thoughts I had in mind when I was listening, as it shown in the screen shot of my phone. There are several thought I’d like to discuss more about.

First of all, I admit doing this field assignment was indeed a unique experience I haven’t had for a long time. I chose a location that I was familiar with because I thought I might find something different from my daily experience, and I did. Some thought like “attention” and “observer/observant” I wrote down in my note are some thought I want to talk about. During this listening experience, I heard many familiar but unfamiliar sound. We hear the sound of cars passing by every day, but when I started to listen, I could hear more from it. In cognitive psychology, there are theories about how people percepts acoustic signal and use attention to filter out information they need. So when I started to pay attention to the “noise”, I found it became more than that. I heard different cars passing by at different speed; I noticed there was a bump on the road when cars went over it; I even figured out the difference between gasoline powered cars and electric powered cars. It reminded me of Holmes and his deduction. We see or hear things every day, but who could know the information behind it? Even noise became interesting when I started to pay attention to them. For example, I noticed that there were two kinds of regularity of the crickets’ sound; the wind would make different sound when passing through high trees or bushes. Other social context like the sound of the construction site, people’s conversation also came together to construct this huge symphony.

Antonius: Final Project: Ghost Hunter

Final Project: Ghost Hunter

Date: May 18th

Instructor: Antonius

Aim:  Make a project that incorporate processing and Arduino in it.

Material: Processing, Arduino, Arduino kit, conductive tape, sponge, sponge mat, toy sword, accelerometer, wires.


  1. Designing: As I mentioned in my final project essay, I planned to make an interactive game. The user can control the moving of the character in the game by stepping on different part on the mat. The user can also kill enemies in the game by swing the actual sword. Initially I also designed a shield that the user can activate to block the attack from the enemies, but due to time limit and it might be too complicate for the plays to control so many controllers, I abandoned this part.
  2. Making the game:

I started by making the game in Processing first. Instead of using actual physical input, I use keyboard input first when building the game. The game is consisted of two components, the player and the enemies. I used the function keyPressed to control the character to move in four direction, by pressing the four keys “w”, “a”, “s”, “d”.

When making the enemies, at first I created them to let them chase the character. One problem with it is that all the enemies would overlap with each other after following the character for some time. To deal with this problem I tried several approaches, like detecting the distance between each enemy, but failed. In the end, I decided to let the enemies run randomly and let the character to catch them.

The enemies were made using object in processing. I defined all the characteristics for the enemies in a separate class, including color, position, speed, behavior after running into the character, etc. Then I use array list to call the enemies. In that case, each enemy could behave on their own, and when they are supposed to be killed, I could simply remove them from the list.

  1. Creating the input structure

As I mentioned in my design, I planned to let users to use their body movements to control the action of the character. The moving of the character was designed to be controlled by stepping on a stepping board on the ground. To control the character to move un, down, left and right, the players have to step on the front, back, left, right panels on the board. Originally I decided to use force sensor to be the information input, but considering that stepping might cause breaking the force sensor, I changed my mind to use soft button as input. With the help from professor Antonius, I was able to make my own soft button. Two conductive materials slicked on two separated boards, a sponge with a hole in it was used to connect the two boards. In this way, when stepping on the board, the conductive materials will get connected from the hole in the sponge, forming a whole loop that conducts current, which used to send input information to Arduino.


The next step is to control the attack effect of the character. I used the accelerometer as input. When the user is swing the sword, the change in acceleration will be sensed and send to processing to trigger an “attack zone” around the character. And when the enemies overlapping with the “attack zone”, they will be eliminated.


  1. Improving gaming experience

To make my game more playable, I add a time limit to the game. If the player can kill all the enemies in the limiting time, a screen showing “you win” will pop out; and if the enemies are not all killed in the time limit, a screen showing “game over” will pop out. What’s more to make the game more responsive, I also added sound effect when the enemies bounced against the character, and a sword swing effect when the user is swing the sword.

The pictures and actual effects are shown below.





//This is the processing code
import processing.serial.*;
Serial myPort;
int valA, valB, valC, valD;

ArrayList<Car> cars;
int x, y;
int x1, y1, a1, b1;

void setup() {
  myPort = new Serial(this, Serial.list()[2], 9600);
  size(720, 540);
  x = width/2;
  y = height/2;

  cars = new ArrayList<Car>();
  for (int i = 0; i < 10; i++) {
    cars.add(new Car(color(255, 0, 0), random(0, width), random(0, height), 2, 1));

void draw() { 
  while(myPort.available() > 0){
     valA =;
     valB =;
     valC =;
     valD =;
  //rect(x1, y1, a1, b1);
  ellipse(x, y, 50, 50);
  if (valA > 100) {
    x = x - 3;
    x1 = x - 20;
    y1 = y;
   // a1 = 80;
   //b1 = 50;
  if (valB > 100) {
    y = y - 3;
    x1 = x;
    y1 = y - 20;
    //a1 = 50;
    //b1 = 80;
  if (valC > 100) {
    x = x + 3;
    x1 = x + 20;
    y1 = y;
    //a1 = 80;
    //b1 = 50;
  if (valD > 100) {
    y = y + 3;
    x1 = x;
    y1 = y + 20;
    //a1 = 50;
    //b1 = 80;
  if (y < 25){
    y = y + 3;
  if (y > height - 25){
    y = y - 3;
  if (x < 25){
    x = x + 3;
  if (x > width - 25){
    x = x - 3;

  for (int i = 0; i < cars.size(); i++) {
    Car car = cars.get(i);;
    if (dist(car.xpos, car.ypos, x, y) < 35) {

class Car { 
  color c;
  float xpos;
  float ypos;
  float xspeed;
  float yspeed;

  // The Constructor is defined with arguments.
  Car(color tempC, float tempXpos, float tempYpos, float tempXspeed, float tempYspeed) { 
    c = tempC;
    xpos = tempXpos;
    ypos = tempYpos;
    xspeed = tempXspeed;
    yspeed = tempYspeed;

  void display() {
    ellipse(xpos, ypos, 20, 20);

  void drive() {
    xpos = xpos + xspeed;
    if (xpos > width) {
      xspeed = -xspeed;
    } else if (xpos < 0) {
      xspeed = -xspeed;
    ypos = ypos + yspeed;
    if (ypos > height) {
      yspeed = -yspeed;
    } else if (ypos < 0) {
      yspeed = -yspeed;

//This is the Arduino code
int valA, valB, valC, valD, valE;

#include <Wire.h>
#include <ADXL345.h>

ADXL345 adxl;

void setup() {
  // put your setup code here, to run once:

  //set activity/ inactivity thresholds (0-255)
  adxl.setActivityThreshold(75); //62.5mg per increment
  adxl.setInactivityThreshold(75); //62.5mg per increment
  adxl.setTimeInactivity(10); // how many seconds of no activity is inactive?
  //look of activity movement on this axes - 1 == on; 0 == off 
  //look of inactivity movement on this axes - 1 == on; 0 == off
  //look of tap movement on this axes - 1 == on; 0 == off
  //set values for what is a tap, and what is a double tap (0-255)
  adxl.setTapThreshold(50); //62.5mg per increment
  adxl.setTapDuration(15); //625us per increment
  adxl.setDoubleTapLatency(80); //1.25ms per increment
  adxl.setDoubleTapWindow(200); //1.25ms per increment
  //set values for what is considered freefall (0-255)
  adxl.setFreeFallThreshold(7); //(5 - 9) recommended - 62.5mg per increment
  adxl.setFreeFallDuration(45); //(20 - 70) recommended - 5ms per increment
  //setting all interrupts to take place on int pin 1
  //I had issues with int pin 2, was unable to reset it
  adxl.setInterruptMapping( ADXL345_INT_SINGLE_TAP_BIT,   ADXL345_INT1_PIN );
  adxl.setInterruptMapping( ADXL345_INT_DOUBLE_TAP_BIT,   ADXL345_INT1_PIN );
  adxl.setInterruptMapping( ADXL345_INT_FREE_FALL_BIT,    ADXL345_INT1_PIN );
  adxl.setInterruptMapping( ADXL345_INT_ACTIVITY_BIT,     ADXL345_INT1_PIN );
  adxl.setInterruptMapping( ADXL345_INT_INACTIVITY_BIT,   ADXL345_INT1_PIN );
  //register interrupt actions - 1 == on; 0 == off  
  adxl.setInterrupt( ADXL345_INT_SINGLE_TAP_BIT, 1);
  adxl.setInterrupt( ADXL345_INT_DOUBLE_TAP_BIT, 1);
  adxl.setInterrupt( ADXL345_INT_FREE_FALL_BIT,  1);
  adxl.setInterrupt( ADXL345_INT_ACTIVITY_BIT,   1);
  adxl.setInterrupt( ADXL345_INT_INACTIVITY_BIT, 1);

void loop() {
  // put your main code here, to run repeatedly:
int x,y,z;  
  adxl.readXYZ(&x, &y, &z); //read the accelerometer values and store them in variables  x,y,z
  double xyz[3];
  double ax,ay,az;
  ax = xyz[0];
  ay = xyz[1];
  az = xyz[2];
  if (ax < -1.2 || ax > 1.2 || ay < -1.2 || ay > 1.2 || az < -1.2 || az > 1.2){
    valE = 1;
    valE = 0;
  valA = map(analogRead(0), 0, 1023, 0, 255);
  valB = map(analogRead(1), 0, 1023, 0, 255);
  valC = map(analogRead(2), 0, 1023, 0, 255);
  valD = map(analogRead(3), 0, 1023, 0, 255);

Antonius Exercise 9: Media Controller

Exercise 8: Media Controller

Date: May 5th

Instructor: Antonius

Partner: Junan Zhang

Aim:  control the images and audio on a Processing sketch with a controller made with Arduino.

Material: Processing, Arduino, Arduino kit.


  1. We found a funny pet video on YouTube. The link is:
  2. First, we decide to manipulate the speed of the speed of the video. The input that used to manipulate the speed were decided to be different voltage input. To change the voltage, we chose to use the potentiometer. The effect is shown in the video below.



3. Then we decided to make something more. We agreed on adding different color filter to the video, and use the temperature sensor as the input. When the temperature is high, the video will turn red, when the temperature is in the middle, the video will turn green, and when the temperature is low, the video will turn blue. The effect is shown in the video below.




//Procesing Code
import processing.serial.*;
Serial myPort;
Movie mov;
//int newSpeed;
float newSpeed;
float newRed;
float newGreen;
float newBlue;

void setup() {
  myPort = new Serial(this, Serial.list()[2], 9600);
  size(400, 400);
  mov = new Movie(this, "FUNNY PET VIDEOS.mp4");
void movieEvent(Movie movie) {;  
void draw() {    
  image(mov, 0, 0, 400, 400);   
  tint(newRed, newGreen, newBlue, 150);
  while(myPort.available() > 0){
    //newSpeed = map(, 0, 100, 0.1, 2);
    //newRed = map(, 0, 100, 0.1, 2);
    if ( > 60){
      newRed = 255;
      newGreen = 0;
      newBlue = 0;
    else if ( == 60){
      newRed = 0;
      newGreen = 255;
      newBlue = 0;
    else if ( < 60){
      newRed = 0;
      newGreen = 0;
      newBlue = 255;
  //float newSpeed = map(mouseX, 0, width, 0.1, 2);

//Ardunio Code
void setup() {
  // put your setup code here, to run once:

void loop() {
  // put your main code here, to run repeatedly:
  int sensorReading = analogRead(A0);
  //int sensorReading2 = analogRead(A1);
  //int val = map(sensorReading, 0, 1023, 0, 100);

Antonius: Exercise 8: Drawing Machine

Exercise 8: Drawing Machine

Date: Apr 28th

Instructor: Antonius

Partner: Yihui Liu

Aim: Create drawing machines by using an H-bridge to control stepper motors attached to mechanical arms.

Material: Arduino kit, 1 stepper motor, 1 SH75440NE IC chip, 1 5-volt power supply, 1 power plug, 1 potentiometer from your kit, 1 Arduino and USB cable from your kit, Laser-cut mechanisms, Pens that fit the laser-cut mechanisms.



First I connected the Arduino and wires according the image provided. The picture is shown below.


I refer to the sample code for the stepper motor, and we built up the half of the drawing machine together using the laser-cut mechanisms. We also tested it out. The picture and the video is shown below.

IMG_1175 2


Then we cooperated with another group to form a whole drawing machine by connecting two arms together.


We then add a current regulator and adjust the Arduino code accordingly to make the drawing machine changeable when changing the resistance.


//Stepper motor control
#include <Stepper.h>

const int stepsPerRevolution = 200;  // change this to fit the number of steps per revolution
// for your motor

// initialize the stepper library on pins 8 through 11:
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);

void setup() {
  // set the speed at 60 rpm:
  // initialize the serial port:

void loop() {
  // step one revolution  in one direction:

  // step one revolution in the other direction:

//Stepper motor speed control
#include <Stepper.h>

const int stepsPerRevolution = 200;  // change this to fit the number of steps per revolution
// for your motor

// initialize the stepper library on pins 8 through 11:
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);

int stepCount = 0;  // number of steps the motor has taken

void setup() {
  // nothing to do inside the setup
void loop() {
  // read the sensor value:
  int sensorReading = analogRead(A0);
  // map it to a range from 0 to 100:
  int motorSpeed = map(sensorReading, 0, 1023, 0, 100);
  // set the motor speed:
  if (motorSpeed > 0) {
    // step 1/100 of a revolution:
    myStepper.step(stepsPerRevolution / 100);

Antonius: Exercise 7 3D modeling

Exercise 7: 3D Modeling

Date: Apr 21th

Instructor: Antonius

Aim: Using Tinkercad, design a 3D model of a wearable device, a game controller or a security camera that utilizes one of the providing components or equipment.

Grove - 3-Axis Digital Accelerometer


The component I chose to hold in my design is a accelerometer, because I’m using it in my final project, and I might use a small devise to hold the accelerometer and connect it to my project.

I’m dividing my design into two separate parts, the container and the cap. Based on the length and the width of the accelerometer, I decided the inner diameter of the container to be 20mm*20mm. To fit the accelerometer better into the container I add two holes of semicircle at to edges.

屏幕快照 2017-05-04 下午5.51.32


The cap is bigger than the container in order to cover the whole container. Since there’s a plugging port at one side of the accelerometer, I made a rectangle hole on the top so that the wire can go through. To make the connection stronger between the cap and the container, I add two cylinders to the two edges of the container, and then made two holes accordingly for the cylinders to go through to form a stronger connection.

屏幕快照 2017-05-04 下午5.52.10

屏幕快照 2017-05-04 下午5.49.15

These are the pictures of my final design.

屏幕快照 2017-05-04 下午5.48.11



One problem I had was that when I was grouping up all the components in the container, a problem occurred that the rectangle hollow I made in the center will cut out the bottom half of the two cylinders placed on the edges. I was worried that I might need to do it all over again to create differently, instead of creating a hollow in the cube, another approach is to create four walls and a bottom to make the container. Then I consulted Marsela and she helped me solved my problem easily by changing the order of the combination. This impressed me a lot on how doing things in different order would have such a big effect.