Amber Kong

In this recitation,  I did a lot of things. I firstly create the “bubbles” in this example posted in the recitation cite:

Here is my code:

float r,g,b;
int ran;
int [] cw;
int [] ch;

void setup(){
  cw = new int[10];
  ch = new int[10];
  size(600,600);
  background(0);
}

void draw(){
  if (mousePressed == true){
    drawCircle();
  }
  fill(255);
  textSize(20);
  text("Press UP arrow to clear",50,50);
}

void drawCircle(){
  ran = int(random(1,4));
  r = map(mouseX,0,width,0,255);
  g = map(mouseY,0,width,0,255);
  noStroke();
  fill(r,g,255,random(100,255));
  circle(mouseX,mouseY,int(random(20,35)));
  for (int i = 1; i <= ran; i++){
    //fill(r,g,255);
    cw[i] = int(random(-50,51));
    ch[i] = int(random(-50,51));
    circle(mouseX+cw[i],mouseY+ch[i],int(random(5,20)));
  }
}

void keyPressed(){
  if (key == CODED){
    if (keyCode == UP){
      background(0);
    }
  }
}

And this is the video of my final result:

And then I finished the additional homework. I put two different tasks into two parts and use “button” to open it. I think maybe I can add another “back button” but I didn’t put it there. Here’s my code:

int d1 = 100;
int d2 = 70;
int i = 0;
int timesI = 1;
boolean check1 = false,
        check2 = false;
int speedX, speedY;
int posX,posY;

void setup(){
  size(600,600);
  speedX = 5;
  speedY = 3;
  posX = int(random(150,width-150));
  posY = int(random(150,height-150));
}

void draw(){
  if (mousePressed == true && (mouseX>250 && mouseX<350 && mouseY>200 && mouseY<260)){
    check1 = true;
   }else if(mousePressed == true && (mouseX>250 && mouseX<350 && mouseY>300 && mouseY<360)){
     check2 = true;
   }
  if (check1 == false && check2 == false){
    colorMode(HSB, 100);
    background(0,0,100);
    fill(0,0,100);
    rect(250,200,100,60);
    rect(250,300,100,60);
    fill(0,0,0);
    textSize(15);
    text("Additional", 262, 235);
    text("Bonus",278,335);
  }else{
    if (check1 == true){
    Additional();
   }else if(check2 == true){
     Bonus();
   }
  }
}

void Additional(){
  background(0,0,100);
  ring1(300,300);
}

void Bonus(){
  background(0,0,100);
  posX+=speedX;
  posY+=speedY;
  if(posX+d1/2>width || posX-d1/2<0){
    speedX = -speedX;
  }
  if(posY+d1/2>height || posY-d1/2<0){
    speedY = -speedY;
  }
  ring2(posX,posY);
  fill(0,0,0);
  text("push UP and DOWN arrow to change the size",50,50);
  
  if (keyPressed && key == CODED){
    if (keyCode == UP && d1<=150){
      d1 = d1+5;
      d2 = d2+5;
    }
    if (keyCode == DOWN && d2 >=10){
      d1 = d1-5;
      d2 = d2-5;
    }
  }
}

void ring1(int x,int y){
  i = i + timesI;
  if (i < 0 || i > 100){
    timesI = -timesI;
  }
  push();
  noStroke();
  fill(i,100,100);
  circle(x,y,d1 + i);
  fill(0,0,100);
  circle(x,y,d2 + i);
  pop();
}

void ring2(int x,int y){
  i = i + timesI;
  if (i < 0 || i > 100){
    timesI = -timesI;
  }
  noStroke();
  fill(i,100,100);
  circle(x,y,d1);
  fill(0,0,100);
  circle(x,y,d2);
}

This is the final result: 

I further more tried to use object to create a bunch of “bouncing bubbles” with random size, alpha and original speed and here’s my code: 

Bug[] bugs;

void setup() {
  size(600, 600);
  bugs = new Bug[50];
  for (int i = 0; i < 50; i++) {
    bugs[i] = new Bug();
  }
}

void draw() {
  background(255, 240, 245);
  //if (mouseIsPressed){
  for (Bug bug : bugs) {
    bug.move();
    bug.display();
    bug.bounce();
  }
}


class Bug {
  float x;
  float y;
  float speedx;
  float speedy;
  int dia;
  int t;
  float ran1,ran2;

  Bug() {
    x = random(25,width-25);
    y = random(25,height-25);
    speedx = random(1, 3);
    speedy = random(1, 3);
    dia = int(random(20, 50));
    t = int(random(0, 100));
    ran1 = random(-1,1);
    ran2 = random(-1,1);
    
    if(ran1 < 0){
      speedx = -speedx;
    }
    if(ran2 < 0){
      speedy = -speedy;
    }
    
  }

  void bounce() {
    if (x - dia/2 < 0 || x + dia/2 > width) {
      speedx = -speedx;
    }
    if (y - dia/2 < 0 || y + dia/2 > height) {
      speedy = -speedy;
    }
  }
  void move() {
    x += speedx;
    y += speedy;
  }
  void display() {
    noStroke();
    fill(250, 128, 144, t);
    circle(x, y, dia);
  }
}

This is the result video:

I think I can add more interactions to this project like every time I clicked the mouse, there will be a new “bubble” or something like this.

Among all these functions, I think mousePressed() and keyPressed() are the most useful because our class is called “interaction lab” so these two functions are very obvious with interaction identity. So I think these two function would must be very useful for our further project making.

This is the picture I chose. I saw this picture from a blogger I follow on the social media account but this mills wall really impresses me a lot. So I wanted to draw a mills wall myself using processing.

This is what  I drew during recitation:

This is my code:

float [] angle;
int [] r;
int [] g;
int [] b;
int m = 0, c=100;
float v = 1;

void setup() {
  size(600, 600);
  angle = new float[50];
  r = new int[50];
  g = new int[50];
  b = new int[50];
    r[1] = int(random(255));
    g[1] = int(random(230,255));
    b[1] = int(random(230,255));
  for (int i = 2; i < 30; i = i + 1) {
    r[i] = r[i-1];
    g[i] = g[i-1]-10;
    b[i] = r[i-1]-10;
  }
  for (int j=1;j<26;j=j+1){
    angle[j]=0;
  }
}

void draw() {
  // fill(255);
  // textFont('Georgia');
  background(255);
  
  for (int a=0;a<height;a++){
    push();
    stroke(map(a,0,height,100,255));
    line(0,a,width,a);
    pop();
  }
  for (int x = 0; x < width + 10; x = x + 100) {
    for (int y = 0; y < height + 10; y = y + 100) {
      m = m + 1;
      triRotate(x, y, m);
    }
  }
  m=0;
  fill(c);
  textSize(30);
   text("Click the mouse to blow the wind",45,550); 
  c=c+1;
  if (c>255){
    c=100;
  }
}

void triRotate(int x, int y, int k) {
  if (mousePressed == true && v <= 10){
    v = v+0.01;
  }else if(v > 1){
    v = v-0.01;
  }
  push();
  float posX = map(mouseX, 0, width, -10, 10);
  float posY = map(mouseY, 0, width, -10, 10);
  translate(x + posX, y + posY);
  rotate(radians(angle[k]));
  angle[k] = angle[k] + v;
  //console.log(angle[k])
  Tri();
  pop();
}

void Tri() {
  for (int i = 0; i < 9; i = i + 1) {
    fill(r[i],g[i],b[i]);
    triangle(0, 0, -30, 0, -30, -30);
    rotate(radians(45 * i));
  }
}

void mousePressed(){
    r[1] = int(random(255));
    g[1] = int(random(230,255));
    b[1] = int(random(230,255));
  for (int i = 2; i < 30; i = i + 1) {
    r[i] = r[i-1];
    g[i] = g[i-1]-10;
    b[i] = r[i-1]-10;
  }
}

Reflection  

I think basically, the picture drawn by processing is not as real as the photo and was monotonous. But by using “rotate” function, I can create a mill by only drawing one triangle. Then using two “for” loops, I can create a wall of mills. So compared to drawing by hand, coding by processing is a much faster and convenient way. Maybe with more advanced knowledge, I can have my drawing in processing much more beautiful.

A poster of our project in the beginning:

poster

A. Process of making our project

1. Determine what we want to do

We got our inspiration from a “paper, scissors and stone” device which could play paper scissors and stone game with the one who put his/her hands in front of the machine. And we also think about the little crocodile we played in our childhood. That is a toy that when the user put their hand into the mouth of the crocodile and push its tough, the crocodile would bite his/her fingers. But that device is mechanically driven, not electronically driven. Then we come up with a biting skull that if the user put their hand into its mouth, he/she would get bitten. And in our original expectation, this would be detected by a light sensor.

2. Print out 3D model of a skull

There are two parts of the skull model: the lower jaw and the rest (including upper jaw). We found the original skull stl file  in thingiverse (https://www.thingiverse.com/thing:518109).

Here are some pictures/videos when we printed the lower jaw. For this part, we didn’t have much difficulties. But we learned how to use the 3D printer outside the fabrication lab. It is quite different from the small one in 826.

For the upper part, it was more complex. As we wanted to leave some spaces to put the elements like servo motor, LEDs in this part, we used tinkercad to “dig” some spheres in the skull as the original model is solid.

Then we used 3D printer in 826 to print this out. This is such a big model that it took about 24 hours to print this. We started this printing on Monday morning and when we went to see it on Tuesday morning, we were desperate to find that the printer ran out of material and our project hadn’t finished yet (as you can see in the pictures below). We asked Andy about this and decided to adjust our model and reprint the upper part later but we found later that this unfinished printing actually brought us much convenience. With holes on both side of the skull, it was much easier for us to dismantle the support and put elements in to the skull.

3. Build the basic structure of the circuit.

I was in creative coding lab last semester so that I had relevant experience of coding. So this  part was mainly my responsibility. I firstly wrote an outline for our circuit and made some experiment and used analogRead to get all the statistics I need.

Then without putting all the things into the model, I built the basic circuit that could realize our expectation.

For the LED part I would just skip and I would like to talk something about DY player chips. With the reference from Rudi (https://github.com/ima-nyush/interaction-lab/tree/main/DYplayer), we made it to play out music. But we found that even though we follow the instruction to change the format of the mp3 file, some files could still not be played and we haven’t figured out why is it yet.

About how we put all the components into out 3D model, I would talk about this in the next part. In this part, I would just show our final code here.

#include <Servo.h>

#include <Arduino.h>
#include "DYPlayerArduino.h"
#include <SoftwareSerial.h>

SoftwareSerial SoftSerial(11, 12);  
DY::Player player(&SoftSerial);   
int count = 0;

Servo myservo;  
int lightSensor;
int jawVal;
int startButton,state;
int pre_state = 0;
boolean Check = false; 
int a = 0, b = 0;
int timesA = 1, timesB = 5;
boolean checkCase = false;
int ran;

void setup() {
  Serial.begin(9600);
   myservo.attach(9); 
   pinMode(13,OUTPUT);
   pinMode(8,OUTPUT);
   ran = random(0,2);
   Serial.println("Starting the Player...");

   player.begin();
   player.setPlayingDevice(DY::Device::Sd); 
   player.setVolume(30); 
}

void loop() {
  lightSensor = analogRead(A0);
  startButton = analogRead(A1);
  check();
  Serial.println(lightSensor);
//  player.play();
//  Serial.println(startButton);
//  delay(1);  
//  jawVal=map(lightSensor,900,1023,0,90);
//  myservo.write(jawVal);

  if (Check == true){
    if (timesA == 1){
      myservo.write(60);
    }
   if (lightSensor >= 1010){
    if (ran <= 1){
      digitalWrite(8,LOW);
//      fade();
      jawClose();
      if (count == 0) {
          player.play();
          count = 1;
        }
    }
   }
  }

  if (Check == false){
    count = 0;
    ran = random(0,3);
    if(timesA == 1){
     myservo.write(35);
    }else{
     myservo.write(60);
    }
    blink();
  }
  //Serial.println(b);
}

void jawOpen() {
  myservo.write(60);
}

void jawClose(){
  myservo.write(35);
}

void check(){
  startButton = analogRead(A1);
  if (startButton>1000){
    state = 1;
  }else{
    state = 0;
  }
  
  if (state == 1 && !state == pre_state){
    Check = !Check;
  }

  pre_state=state;
  //Serial.println(Check);
}

void blink(){
    timer();
    if(timesA == 1){
      analogWrite(6,255);
    }else{
      analogWrite(6,0);
    }
}

void timer(){
  a = a + 1*timesA;
  if (a>=250){
    timesA = -1;
  }else if (a<=0){
    timesA = 1;
  }
}

void fade(){
  analogWrite(6,b);
  b = b + timesB;
  if (b <= 0 || b >= 255){
    timesB = -timesB;
  }
  delay(100);
  //Serial.println(b);
}

4. Put everything together

We made some efforts and tried several position and ways to connect servo motor and lower jaw. I would talk about this specifically in the challenge part and this is the final structure of it. We didn’t have any reference when building this structure. This was come up by ourselves.

For the places to put LED and light sensor, I drilled 3 holes to plug them in.

To connect the lower jaw with the rest part of the skull, we drilled two holes on the “bone” at the cheek and used iron wire to connect.

During circuit test, we used flashlight from our phone and find that this input is very unstable as even a little move of either phone or the skull would cause the light from the flashlight could not directly illuminate on the light sensor. So we decided to install LED in the mouth (tips from Eric) to make sure that the light won’t be block out. Originally  we only used one LED but found that as long as the light was not directly illuminate on the light sensor, the input would change. And the LED attached on the jaw would move as the jaw changes its angle so that I added another LED to make sure that whether the jaw is open or closed, there would be a direct light that illuminate on the light sensor.

5. Final beautification

We made some final beautification like hiding the wire, building the background board, hanging the “head”, etc.

This is what our final project look like.

B.Context and significance

My definition of interaction is a process when a person/device(I call it A) do something and is detected by another people/device(I call it B), B could react and A is able to know that reaction. Or this can be concluded as a mutual input and output process. It’s like communication between two items. So I think this project could reach my definition of interaction. I put my hand into its mouth and it reacts with movement, light and sound and this could be received by the users. This project is mainly designed for kids and could be used during Halloween and some other festivals or could be put in the haunted house.

In this project, I was mainly responsible for building the circuit and code and design some connecting/stabilizing structure. I learned some knowledge about structure during high school theoretically so this was a chance for me to apply theory into practice. And I am also more familiar with all the functions and how the code works after writing the code. For building the circuit, I think this is less challenging compared to other two.

C. Conception and design

We mainly used the words written on the background board to let the users know how to use our device and use the background color, horrible appearance, red paint and sound effect to create the atmosphere.

We used PLA material to print the 3D model and iron wire to connect. And we use a wooden stick to connect the servo motor and the jaw. The background board we used are a cardboard from laser cutting and we used acrylic paint to paint.The glue we mainly used is hot glue.

We didn’t have other confusion about the choice of material except for the glue. We originally afraid that the hot glue would be hard to separate after presentation. But later we found that hot glue is easy to use, good to stable and easy to split as well.

D. Fabrication and production

The most challenging thing we find during the making process is to connect to servo  motor and jaw and let the jaw move naturally. 

We decided to use a wooden stick to attach the servo motor to we cut on our 3D model.

Originally we were afraid that the hot glue would be hard to teat apart so that our servo motor would be damaged,  so we only use tape to stick motor and stick together and found that it was not stable. Later we decided to use hot glue.

And the first position we found for the servo motor was not very suitable and the motor was not attached to the skull so that the movement of the jaw was very random (Sometimes it would move a little bit and sometimes it wouldn’t move and the movement is very small. And the jaw even got dislocated.)

Then after user testing, we changed the position of the servo motor to keep it on the center of rotation and use hot glue to stick it to the skull. So the movement become very stable later on.

Besides, here are some tips we got from user testing/in class that help us get our project advanced.

1. Eric thought that we must give the user a motivation to put their hand into the mouth as no one would like to put their hand into an unknown horrible skull. So we put a candy in his mouth and ask the user to get the candy in our instruction.
2. Rudi and Andy advised that we’s better put our skull on a stand so that its eyes could look directly into the users eye to create a much more horrible atmosphere. So we abandoned the original plan of using a box to support. Instead, we found a cylinder to hang the skull and use some right angled cardboard to support the cylinder.
3. Almost everyone advised us to glue the servo motor to the skull to make the movement of jaw more stable and we just did so.
4. During our presentation, we got some advice from our classmate that we could add more sound effect to make this project more interesting and less confusing.

E. Conclusions

I think this project is basically consistent with my definition of interaction. Through this process, I am more familiar with how to create a useful thing from none. I should get everything planned in the beginning or there would be much trouble. Like I didn’t have spaces for servo motor when building the 3D model so that we took a lot more time to think about how to attach servo motor to the jaw. And I also learned that we should consider the use of final project and its value. These are all the thing I should take into account in the very beginning and I’m sure this would be helpful to my final project.

Some pictures of drawing machine:

Question 1

The drawing machine we made this week gave me some inspiration on my midterm project. I also watched a video that is called “paper, scissors and stone machine”. It introduces a device with ultrasonic distance sensor and servo motor to play paper, scissors and stone game with people who put their hands in front of the machine. I wanted to make a biting toy for Halloween and some other events for children. When I put my hand into the mouth of the skull, it would just bite and scare the person. The core of this device is a servo motor connected to the computer that its angle could be accurately controlled by computer. For the furthermore details about this device to make it more horrible/interactive/interesting, I still need some time to figure and ask for others opinions and ideas.

Question 2

In this example, author introduced a dancing “robot”.This machine is mainly used for imitate human’s dance. It is quite different in function compared to the drawing machine we built during recitation-one is used for drawing and one is used for imitate dancing. But this machine must be more accurate than the one we built during recitation as this could perform a dance correctly/perfectly but the paintings we got from our drawing machine are kind of ugly(abstract). I think this machine used servo motors (much bigger and stiffer than the one in our kit) or stepper motor as its angles are fined according to the instructions of computer to perform certain dance movement and is stiff and stable enough to support the heavy steal arms/legs.

I used infrared distance sensor to build the circuit. This is actually the same as what we’ve built in class but I think about where could it be used. Here’s the code:

#include <Servo.h>

Servo myservo;  

int potpin = 0;  
int val;    

void setup() {
  myservo.attach(9);  
}

void loop() {
  val = analogRead(potpin);            
  val = map(val, 0, 1023, 0, 180);     
  myservo.write(val);                  
  print(val);
  delay(15);                           
}


The video:

Question 1:

Actually I didn’t know how infrared distance sensor works exactly. I though it just change its output when something move in front of it (Now I know this is actually the function of light sensor: Output and electronic potential when there’s light and another when there’s no light). Now I know that the output of infrared distance sensor would constantly changing with the change of the distance of items in front of the sensor. I think this could be used as automatic garage gate. When the car get close to the gate, the sensor would receive the signal and another camera connected to computer would detect whether it is the right car. Then the door would gradually open as the car getting close.

Question 2:

According to the code, we can build our circuit (though sometimes these two should work together). For example, I set D9 as output. So when I’m building the circuit, I should make sure that I use output from D9, not others like D1,D2, … So the place where each pin should put is strictly confined by code or terrible thing would happen.

Question 3: 

1. Computer definitely brings much convenience to people’s life. Originally, it greatly increased the speed of calculating, saving a lot of times for people. And then, after the technology getting more advanced, people use computers to work (like us student) and for daily amusement like playing game and watching videos.
2. But since the function of computer is so great, people might just get addicted to it. Not only their time is wasted, their health is also challenged because they are looking at the screen and sitting on the chair or sofa for too long.