hyin9412-blog

[hyin9412-blog]

WK15 OpenCV

[hyin9412-blog]

WK13 Particle system

Particles diffuse firstly. Then if the user presses the mouse,  an attracting point will appear, and particles around the point will gather together. If the user presses the “z” key, then the attracting point will disappear and particles surrounding the point will diffuse in different directions.

[hyin9412-blog]

WK 11_OF

[hyin9412-blog]

Yin Hu

Jane Mitchell

Creative Coding Lab

9 November 2017

                                                   JavaScript Final

Background:

With a strong feeling of listening to some music, but I just don’t know which song to listen to. Sometimes such circumstance happens. So I’m thinking about creating a new way of recommending music.

Concept:

I’ m exploring emotion detection to create a new way of recommending music to help users listen to music which is appropriate to users’ current mood.  At the same time, the background color also changes. The happier the warmer of the background color.

How to make it?

Use web camera to detect the current the user’s facial expression.

Use Emotion API by Microsoft Azure to analyze emotion data presented by the user’s face. ( I need to register the account of the website and apply the subscription key first.)

According to the value of parameter happiness to decide which kinds of music to play.

For the same type of mood, it plays music randomly.

Library I used:

jQuery

particles.js  (http://vincentgarreau.com/particles.js/)

API I used:

Emotion API by Microsoft Azure

Description: The Emotion API takes a facial expression in an image as an input, and returns the confidence across a set of emotions for each face in the image, as well as bounding box for the face, using the Face API. If a user has already called the Face API, they can submit the face rectangle as an optional input.

The emotions detected are anger, contempt, disgust, fear, happiness, neutral, sadness, and surprise. These emotions are understood to be cross-culturally and universally communicated with particular facial expressions.

https://azure.microsoft.com/en-us/services/cognitive-services/emotion/

the subscription key:

Endpoint: https://westus.api.cognitive.microsoft.com/emotion/v1.0

Key 1: 33f4cea0a887400c86603788a8fb9b94

Key 2: cc1cfcf49dd9433781ce13a72d7587e9

Challenges I met:

1. Html not allowed to load local resource webcam

Reference:

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

Add “--allow-file-access-from-files” at the chrome app terminal

2. The emotion API doesn’t accept data URLs for images, I need to convert it into binary blob.

Reference:

https://stackoverflow.com/questions/36361350/emotion-api-project-oxford-base64-image

https://stackoverflow.com/questions/34047648/how-to-post-an-image-in-base64-encoding-via-ajax/34064793#34064793

[hyin9412-blog]

Yin Hu

Jane Mitchell

Creative Coding Lab

2 November 2017

                                          Week10 jQuery&libraries

Basic info:

I made a simple game called “The Mouse Maze”. The rule of this game is that player is supposed to move the mouse from “S” to “E” without touching boundaries. 

Texts on the top vary based on players’ actions.

I used the pushIn library to make the effect of showing the maze. When the player scrolls down the screen, the maze will show.

Other libraries I used:

pushIn.js

A simple library to add the dolly-in or push-in effect to any element that works when a user scrolls through the page. It’s easy to implement: just add the start, stop and speed parameters to data-params to your HTML element.

Dependencies: none | Size: 4.94kb | Licence: N/A

Coding:

index.html

maze.js

maze.css

style.css

jquery.min.js (library)

plushin.js (library)

[hyin9412-blog]

Yin Hu

Jane Mitchell

Creative Coding Lab

26 October 2017

                                                    Week9 API

I used New York Times API. Firstly I need to request an NYT API Key when I need to choose the type of API. And I chose the article search. I used “GET” request to interact with it and pull information from it with the parameter “China”.

I just chose to show the headline of the second passage in the web if the user clicks the button “click to check”.

Actually, it took me a long time to figure out how to use API. And before using NYT API, I tried to use web audio API to visualize a song, but I failed.

Here is the code. I wrote js in the HTML document.

[hyin9412-blog]

Yin Hu

Jane Mitchell

Creative Coding Lab

12 October 2017

                                            Arduino Final

Background:

My mother loves growing flowers that are delicate and sensitive to watering. But she always forgets to water them. So, I think about designing a flowerpot for lazy fellows to raise flowers more conveniently.

Concept:

I would like to create a smart flowerpot. The flowerpot is made of transparent waterproof materials to absorb the sunlight. It detects the moisture of soil contained in the flowerpot. If the humidity is below a value which is suitable for the growth of the flower, the pump will operate to water the flower automatically. And the pump stops drawing water based on the value of soil moisture automatically. Besides, if the user goes to see the conservatory at night, the light will be on automatically.

Materials I used:

1      Soil moisture sensor (input)

2      Photocell (input)

3      Ultrasonic Sensor (input)

4      LED (output)

5      Pump(output)

6      Transistor, diode, 10K ohms resistor, 220 ohms resistor, 330 ohms resistor, wires, Arduino Uno R3 Controller board, bread board

7      Acrylic sheet 18*24 1/8inch, super glue, glue gun

Coding:

void loop(){

 // detect the moisture in the soil

 humidityRaw = analogRead(A0); //1023 to 0 ===> 0 to 100%

 humidityReal = map(humidityRaw, 1023, 0, 0, 100);

 Serial.println("Moist: ");

 Serial.println(humidityReal);

 Serial.println("%");

 delay(100);

 // control the watering operation through moisture value

 if (humidityReal < 20){

   digitalWrite(waterPump, HIGH);

   }else{

     digitalWrite(waterPump, LOW);

   }

 // read the value of photocell

 sensorValue = analogRead(A1);

 Serial.println(sensorValue);

 // read the ultrasonic value

 digitalWrite(TrigPin, LOW);

 delayMicroseconds(2);

 digitalWrite(TrigPin, HIGH);

 delayMicroseconds(10);

 digitalWrite(TrigPin, LOW);

 tm = pulseIn(EchoPin, HIGH);

 // control the LED. if it's dark and user is close to the flower, the LED will be on.

 if(tm <= 3000 & sensorValue < 500){

 digitalWrite(ledPin, HIGH);

 delay(100);

  }else{

    digitalWrite(ledPin, LOW);

  }

   delay(300);

 Serial.println("tm");

 Serial.println(tm);

 Serial.println("brightness");

 Serial.println(sensorValue);

 }

Documentation:

[hyin9412-blog]

Major Stuido1_Ideas In Form_Yin Hu

1D

See the slides on the google drive

tools: sketch, ppt

2D

Some main interface of the product

sketch

1. chatting

2.switching hats

3. checking comments

tools: sketch, paper, pencil

3D

I made paper prototypes to show the user experience of some main functions.

I classified the response I got for 2D& 3D

4D

I add more interfaces of main functions to make the product more clearly. And I made a video of imitating the usage.

the URL of the video on Youtube

https://www.youtube.com/watch?v=ki2AqYZtWlM&feature=youtu.be

or see it on the google drive

tools: principle, sketch

Responses I got for 4D

5D

I’m thinking about how to reduce the learning cost of this product. 

I chose to reduce the number of hats since the frequencies of usage are different. So I cut the red hat, and only the leader of the meeting could wear the blue hat. If the leader wants to say anything which belongs to the blue hat, he just types it in the “issue” box. And others will see the change of the “issue” box.

I recorded the screen when I use the demo.

the URL of the video on Youtube

https://www.youtube.com/watch?v=f6HUGXVjld4&feature=youtu.be

or see it on the google drive

And you can see the demo which is interactive on the google drive

tools: principle, sketch, keynote

Responses I got for 5D

[hyin9412-blog]

CC Lab WK5_Yin Hu

(Having problem in code)

Concept: I want to create a small smart cooling fan. Its operation depends on the temperature of the environment and the user’s presence.

Operation: If the temperature of the surrounding is high and the user is just in front of the fan, the fan will work. If the user is in front of it, but the temperature is not high, the fan won’t work.

Materials:

Use Thermistor to detect the temperature of the environment

Use LCD to display the temperature of the environment

Use Ultrasonic Sensor to detect the presence and absence of the user

Use DC Motor to make the fan spins

Code:

I don’t know why if I use the correct formula(Tc = T - 273.15) to calculate the temperature, the temperature detected will be much higher than the actual temperature of the environment. 

[hyin9412-blog]

CC Lab WK3 Yin Hu（ enclosed）

/*Use one digital and one analog sensor that’s not covered in class. */

Description:

I use the ultrasonic sensor to detect the distance and different LEDs to notifying the range of the distance.

Concept:

I would like to make a simple reversing arrangement. If the distance between the car and the obstacle/wall is small but it’s still in the safe range, the yellow LED produces light to notify the driver. If the distance is too small, the red LED produces light to warn the driver to stop reversing. If the car is far from the obstacle/wall, both LEDs don’t produce light. In the video, I use my hand to imitate the moving car.

Further steps:

I would like to add buzzer. When the red LED is on, the buzzer produces warning sound at the same time.

[hyin9412-blog]

CC Lab WK3 Yin Hu

/*Use one digital and one analog sensor that’s not covered in class. */

Description:

I use the ultrasonic sensor to detect the distance and different LEDs to notifying the range of the distance.

Concept:

I would like to make a simple reversing arrangement. If the distance between the car and the obstacle/wall is small but it’s still in the safe range, the yellow LED produces light to notify the driver. If the distance is too small, the red LED produces light to warn the driver to stop reversing. If the car is far from the obstacle/wall, both LEDs don’t produce light. In the video, I use my hand to imitate the moving car.

Further steps:

I would like to add buzzer. When the red LED is on, the buzzer produces warning sound at the same time.

[hyin9412-blog]

5-in-5

Project1 Dream the Dream

date：09/01/2017

Shooting Script

Scene1: Bed, Sleeping

line: I dreamed myself back to when I was young,

Scene2: School

Scene3: Classroom

line: In the class, the teacher asked me what do you want to do in the future?

(I raised my hand)

line: I want to be a ballet-dancer

(ballet, stage blingbling)

bed

video youtube link

Project2 Watch out your steps

date：09/02/2017

smartphone addiction

advertising video

video youtube link

software/ app:

keynote, quicktime, imovie, PS

sounds effects:

car crashing

notification

Project3 Secret Talk

date：09/03/2017

video youtube link

software/ app:

imovie, PS, VoiceChanger

lines version1:

Bunny! I’m back. (开心的语气）

Do you feel lonely today?

摸摸兔子的头

I had a great time today.

Went to the market, bought food for next week, had dinner at a fancy restaurant, watched the broadway opera. （回忆的语气）

And I took the dance class , it feels nice to dance. （小兴奋，享受）

I’ve done a lot of things today, but I haven’t  prepare for the statistic test. A little anxious. （有点焦虑）

well, let it go.  it’s time for bed!

lines version2:

Bunny! I’m back. (happy）

What did my roommate Yin do to you?

I had a great time today.

Went to the market, bought food for next week, had dinner at a fancy restaurant, watched the broadway opera. （memorizing）

And I took the dance class , it feels nice to dance. （excited）

Project4 shadow dance

date：09/04/2017

paper-cut, shadow

form:gif

project5 Chewing chewing

date：09/05/2017

video youtube link

game, stimulate the appetite

further steps: 

add the scent of food, make it into a physical installation

[hyin9412-blog]

CC LAB WK1 HW

/*LED stays on when you press the button and turns off when you press it again

*/

 const int buttonPin = 2;

const int ledPin =  13;

 int buttonState = 0;

int buttonPushCounter = 0;

int lastButtonState = 0;

  void setup() {

 pinMode(ledPin, OUTPUT);

 pinMode(buttonPin, INPUT);

 Serial.begin(9600);

}

 void loop() {

 buttonState = digitalRead(buttonPin);

if (buttonState !=lastButtonState) {

   if (buttonState == HIGH) {

     buttonPushCounter++;

     Serial.println("on");

     Serial.print("number of button pushes:  ");

     Serial.println(buttonPushCounter);

   } else {

     Serial.println("off");

   }

   delay(50);

 }

 lastButtonState = buttonState;

 if (buttonPushCounter % 2 == 0) {

   digitalWrite(ledPin, LOW);

 } else {

   digitalWrite(ledPin, HIGH);

 }

}