Month: November 2022

Hanwen Hu

28/11/2022

In this Recitation, we mainly learned how to build a model and cut it out with Laser Cut. Finally, we were also asked to use a motor to make the cut model into a rotating trinket. And I’m in a group with Haowei(Harrison) Ding.

Step 1

In the first step, we were asked to design our pattern on Cuttle. I was in charge of the design of part B in the group. The drawing of the basic graphics was not difficult. The drawing of the base was completed quickly, and the drawing of the Pattern was also successfully completed after I was proficient in Rotational Repeat.

Here is the patern I drawed:

 

The drawn results will then be uploaded to Google Drive. Here’s proof of a successful upload:

 

Step 2:

In the second step, we need to use the uploaded results to use Laser Cut. Professor Andy who is in charge of the machine is very responsible, and also helped me solve some small flaws that I didn’t find when drawing，for example, the inner diameter is too small and may not be connected to the motor.

Here is the video about the laser cut:

The last part is assembly and program operation. The overall process is smooth and smooth. This production experience is very interesting. I should be able to design more interesting works next time.

Here is the final work and the code:

#include <Servo.h>

Servo myservo;  // create servo object to control a servo
// twelve servo objects can be created on most boards

int pos = 0;    // variable to store the servo position

void setup() {
  myservo.attach(9);  // attaches the servo on pin 9 to the servo object
}

void loop() {
  for (pos = 0; pos <= 180; pos += 1) { // goes from 0 degrees to 180 degrees
    // in steps of 1 degree
    myservo.write(pos);              // tell servo to go to position in variable 'pos'
    delay(15);                       // waits 15 ms for the servo to reach the position
  }
  for (pos = 180; pos >= 0; pos -= 1) { // goes from 180 degrees to 0 degrees
    myservo.write(pos);              // tell servo to go to position in variable 'pos'
    delay(15);                       // waits 15 ms for the servo to reach the position
  }
}

24/11/2022

professor Gottfried

Ocean Struggle – Coast Guard vs. Whalers

After thinking about it for a while, I decided to cancel my previous survival-themed project. Because I want a more realistic theme, and at the same time, I have always been interested in marine animal protection. At the same time, after being inspired by Crawford’s The Art of Interaction Design, I decided to adopt the form of a two-player battle, because I think this can better let the audience feel the difficulty of the struggle for ocean protection, and appreciate the people who have served for it. In this process, the main challenge I face is probably how to make the movement of the two ships as free as possible while making differentiation, which requires a relatively advanced understanding of motors and related procedures.

My main goal of this project is to perfect a complete confrontation mechanism game, the whaler needs to hunt at least 3 whales and escape successfully, and the coast guard needs to hit the whaler at least twice before the time limit expires or the whaler escapes to capture him. In order to complete this project, I roughly made a plan. First of all, before November 29th, I have to complete the physical framework of the project, which includes the overall “map” and obstacles in the field, as well as the “track” driven by the boat. In the next week, I will finish writing the program, and finish the final debugging and assembly before the last two classes. Finally, during step 1, I will ask others for their opinions and suggestions for improvement in the form of a questionnaire.

From The-Art-of-Interactive-Design, I realized that the interaction between two people is a great improvement to the interaction, and emotional reflection and clear themes are also necessary, so the confrontation competition with the theme of protecting whales is practical should be able to clarify the nature of the interaction. In addition, the motor-driven sports items I learned and contacted before can also help me to complete this project to a large extent. In the end, 3D printing also helped me a lot – it made my maps more realistic, and the printed obstacles were more stable and natural than directly placed objects such as boxes.

Finally, to sum up, this project is a small game designed for players who are interested in protecting whales. Of course, if you are not interested in the theme, you can also experience it as a simple pursuit game. I will also add music and Countdown and other elements to enhance the fun of the game. Finally, if there is a chance to improve in other projects in the future, I may consider adding variables, such as the location of the whaling ship is unknown at the beginning but it will take a certain amount of time to catch the whale, the coast guard ship is faster, and there are certain ships on the field that can trap the ship. The vortex of time and more, hope to have the opportunity to implement these improvements and further refine them in the future.

Hanwen Hu

22/11/2022

In this Recitation, due to the number of people and the configuration of props. I, Chen Ruiyang, and Zhuang Ruiqi formed a team to complete this task.

Step 1

First of all, in task 1, we were asked to make a simplified version of Processing drawing software according to the Etch-A-Sketch project. The first step is to make a circle that can control the position by using two potentiometers. I first built the circuit according to the instructions, and then made some changes according to the reference program, and this step was completed quickly.

The second part is to change the program from controlling circle movement to controlling line drawing. This process is not difficult, just use the line() function to replace it, and rewrite it a little bit. After spending some time, this step was completed relatively smoothly.

Step 2

Task 2 is a relatively advanced operation. First of all, we are asked to make a small ball that can “bounce” on the screen. This step is actually to set the ball to bounce back by itself when it touches the left and right boundaries of the screen. This step is not difficult to do after we carefully observe the teaching of the corresponding program. The problem came at the very last step – we needed to design a pair of motor driven rigs that would “hit” the ball on either side of the screen to match the motion of the ball, this procedure stuck our group for a while – either the rig was out of sync with the ball, or The ball is stuck at the starting point and cannot go out. Finally, we asked the professor for help, and the professor pointed out that there was a problem with our myservo() program, and after the modification, our project finally ran successfully. This was a fun collaborative challenge for our group.

Here is first step of task 2:

Here is our group’s final result:

Here is the code in Processing:

import processing.serial.*;
import osteele.processing.SerialRecord.*;
Serial serialPort;
SerialRecord serialRecord;
int x;
int add=10;
void setup(){
fullScreen();
String serialPortName = SerialUtils.findArduinoPort();
serialPort = new Serial(this, serialPortName, 115200);
serialRecord = new SerialRecord(this, serialPort,1);
}

void draw(){
background(0);
fill(255);
stroke(0);
circle(x,height/2,50);
if (x>=width){
add=-add;
serialRecord.values[0]=0;
serialRecord.send();
} else if (x<0){
add=-add;
serialRecord.values[0]=1;
serialRecord.send();
}
x=x+add;

}

Here is the code in Arduino:

#include <Servo.h>
#include "SerialRecord.h"
SerialRecord reader(1);
Servo myservo;
Servo myservo2;
int value;
void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  myservo.attach(8);
  myservo2.attach(7);
}

void loop() {
  // put your main code here, to run repeatedly:
  if (reader.read()){
  value=reader[0];
  if (value==0){
    myservo.write(100);
    delay(250);
    myservo.write(0);
  } else if (value==1){
    myservo2.write(100);
    delay(250);
    myservo2.write(0);
  }
}
}

11/21/2011

Hanwen Hu

Professor Gottfried

Proposal 1

My first idea was based on an adventure story I saw a while ago with two monsters that breached containment. One will attack anyone who sees it, and the other can only stop it by looking at it. At the same time, inspired by the famous “Escape” series of games, I decided to set the game scene as a room. The character manipulated by the player must survive in the room for enough time. After enough time, the door will open. At this time, the player can win by bypassing the monster and reaching the door. At the same time, as a variable, I set up a generator room. When the player’s character stands in the machine room, the countdown will speed up, but the noise of starting the machine room for a long time will also attract the monster’s attention, requiring the challenger to make a choice.

This project will be presented on Cardboard, using Audrino and motor to control the movement of people and monsters, but the movement of monsters has a path, and the people are determined by the controller. Additionally, the timer will be represented by Processing as a web page, while the control movement will be represented as a button.

Proposal 2

My second thought is based on laws against illegal whaling. This is designed as a head-to-head match, with two players at the helm of a whaler and a Coast Guard ship. The goal of the whaler is to catch at least three whales within three minutes while escaping from the wrong way. Hit the whaling ship at least twice before reaching the three whales and escaping (coast guard ships attack in a straight line and have a distance limit). Of course, if the coast guard ship fails to hit the whaling ship twice within three minutes, it is also counted as a victory for the whaling ship.

This project is also built on the Cardboard, and uses the Processing timer, Arduino and motor to control the direction and movement. Note that obstacles in the field will block the movement and attack of the ship. This Proposal is mainly an idea I tried for confrontational interactions. If the first Proposal proves to be unfeasible, then this idea will be the top priority.

Proposal 3

The third idea came from an introduction about wreckers, my vision was to create an environment with many virtual obstacles. First of all, the wrecker is dispatched. When it passes through an area with “obstacles”, it will eliminate the judgment of the obstacle and reduce its own durability. When the durability returns to zero or the wrecker drives out of the terminal, the wrecker ends. Afterwards, the player will drive the ordinary car to pass through the road section. If there are more than three side collisions or a frontal collision, the player will fail directly. After successfully passing, the score will be calculated based on the time-consuming, remaining durability and the number of collisions.

I plan to use Cardboard to build the frame, and use Arduino and motor to control the movement, but this time I need sensors to detect whether the car has bumps, and the timing and scoring pages will be completed by Processing. In fact, the concept of this project is relatively less mature than the first two, but given my experience in making Arduino cars, it is not impossible. All in all, this project is more of an experience than a game.

15/11/2022

In this Recitation, we mainly learned the interactive project of using Processing and Arduino to carry out music and light strips. I think this recitation helped me understand the possible interaction between Processing and Arduino, which is a very beneficial attempt.

Step 1：

Task 1 is relatively simple, and I quickly completed the installation of the library and the construction of the circuit under the instructions. In Task 2, I also quickly finished lighting the NeoPixels.

Here is my working record:

Step 2：

In task3, I went well at first, and quickly completed the song analysis program, but when the step entered the combination of Processing and Arduino to analyze the songs I chose, and was asked to make innovations, I encountered two problems , the first is that the program cannot run after chimera, which was solved when the teaching assistant instructed me to re-embed it step by step; the second is the NullpointerException I found after class, and after asking the professor, I found that it was because the name in the program was still pointing to the original music file, and when I replaced the file, the problem went away.

The innovation I have made is mainly to design a corresponding light strip according to the tone. When the tone changes in the four ranges I set from low to high, the light strip will give four different lights according to these four ranges. Variations, meanwhile, I chose “Cruel Angel’s Program of Action” as the sample song because I was so impressed with it and Eva, who used it as the theme song.

Here is the result of step 4 in task 2:

And here is my code in Processing:

import processing.sound.*;

SoundFile sample;
Amplitude analysis;
import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;

int W; //width of the tiles
int NUM = 60; //amount of pixels
int[] r = new int[NUM]; //red of each tile
int[] g = new int[NUM]; //red of each tile
int[] b = new int[NUM]; //red of each tile
boolean wasLoud;

void setup() {
size(640, 480);
W = width/NUM;


// You can use this syntax and change COM3 for your serial port
// printArray(Serial.list());
// serialPort = new Serial(this, "COM3", 9600);
// in MacOS it looks like "/dev/cu.usbmodem1101"
//or you can try to use this instead:

String serialPortName = SerialUtils.findArduinoPort();
serialPort = new Serial(this, serialPortName, 9600);
serialRecord = new SerialRecord(this, serialPort, 4);
serialRecord.logToCanvas(false);
rectMode(CENTER);
// load and play a sound file in a loop
sample = new SoundFile(this, "cg.aiff");
sample.loop();

// create the Amplitude analysis object
analysis = new Amplitude(this);
// analyze the playing sound file
analysis.input(sample);
}

void draw() {
println(analysis.analyze());
background(125, 255, 125);
noStroke();
fill(255, 0, 150);
for (int i=0; i<NUM; i ++) {
//fill(r[i], g[i], b[i]);
//rect(i * W + W/2, height/2, 10, 10);
}
// analyze the audio for its volume level
float volume = analysis.analyze();

// volume is a number between 0.0 and 1.0
// map the volume value to a useful scale
float diameter = map(volume, 0, 1, 0, width);
// draw a circle based on the microphone amplitude (volume)
circle(width/2, height/2, diameter);
int n = floor(constrain(map(volume, 0, 1, 0, 60), 0, NUM-1));

r[n] = floor(random(255));
g[n] = floor(random(255));
b[n] = floor(random(255));
if (volume > 0.6) {
wasLoud=true;
for (int i=0; i < 59; i++) {
serialRecord.values[0] = i; // which pixel we change (0-59)
serialRecord.values[1] = 255; // how much red (0-255)
serialRecord.values[2] = 0; // how much green (0-255)
serialRecord.values[3] = 0; // how much blue (0-255)
serialRecord.send(); // send it!
}
} else if(volume>0.4 && volume<0.6){
wasLoud=true;
for (int i=0; i < 59; i++) {
serialRecord.values[0] = i; // which pixel we change (0-59)
serialRecord.values[1] = 245; // how much red (0-255)
serialRecord.values[2] = 150; // how much green (0-255)
serialRecord.values[3] = 20; // how much blue (0-255)
serialRecord.send(); // send it!
}
}
else if(volume>0.2 && volume<0.4){
wasLoud=true;
for (int i=0; i < 59; i++){
serialRecord.values[0] = i; // which pixel we change (0-59)
serialRecord.values[1] = 145; // how much red (0-255)
serialRecord.values[2] = 90; // how much green (0-255)
serialRecord.values[3] = 99; // how much blue (0-255)
serialRecord.send(); // send it!
} 
}else wasLoud=false;
}

Overall, I am excited to try new methods and hope to have more opportunities like this in future classes.

15/11/2022

In this final sresearch, two projects inspired me and formed my initial vision.

The first one is the Pac-Man project on processing. This seemingly simple small game actually embodies the essence of the interaction. Players have obvious goals, high participation, and a strong purpose. This also prompted me to decide to make a project on the theme of avoidance and survival.

The second is the maze project on Arduino. The map and motion logic it uses are also reflected in Pac-Man. This project is actually teaching me how to implement my small game with Cardboard. Of course, I plan to use a new form – one room, two monsters, one must be facing directly, one cannot be facing directly, the monster moves randomly, and the player must use the obstacles in the room and the self-generated characteristics of the monster to survive for long enough until The door opens.

After the midterm, I also thought about the definition of interaction for a while. As Edmond mentioned in his article, interaction must first have a reaction, and then it must have an impact.（https://doi.org/10.1109/iv.2011.73 ）That is to say, participants need to get feedback on interactive projects, and this feedback needs to be purposeful, preferably with a certain period of staying power. In the middle of the term, my music box project should have no obvious feedback, so the interactivity is not strong. The participants do not know the purpose of their interaction, so naturally they cannot judge the interactivity of the project. So, combined with the Processing-related courses in the second half of the semester, I decided to try new themes and new methods, and at the same time add new interesting devices such as light strips. I believe that I will not let myself down again.

1.Edmonds, Ernest. “Art, Interaction and Engagement.” 2011 15th International Conference on Information Visualisation, 2011. https://doi.org/10.1109/iv.2011.73.

6/11/2022

In recitation 6, our task is to use Processing to create interactive animated web pages. In this task, my first consideration is how the graphics should be styled and moved. Of course, I didn’t make up my mind at first until I saw an introduction to the Vortex function on the Processing’s tutorial site, which I thought was relatively in line with my vision, so after going through the introduction, I decided to use the Vortex function to make a movable rose.

Here is where I found the introduction of Vortex:

https://processing.org/reference/vertex_.html

Later, when writing the code, I thought that if I could control the color of the rose through the buttons, it might be able to effectively increase the interactivity of the web page, but I encountered certain problems in the actual operation – I designed a random number, when it is selected in the Different colors appear in different ranges. However, when I press the keys, the screen does not respond. After I asked the professor for help, it turned out that the code was in the wrong place, so I put it behind the Draw code. The screen then runs smoothly and responds to key controls.

Finally, I added a title that also changes color, and the production is almost complete. Although my design this time is just a simple animation, as the first animation I made myself, I still have a special feeling for it. After all, “the nine-story tower starts from the earth”. Hopefully in the future I will have more opportunities to show my interest in programming.

Here is my code and video:

void setup() {
  size(1024, 768);
}

void draw() {

  strokeWeight(15);
  stroke(255,113,113,64);

  background(255);
  for (int i=0; i<299; i=i+45) {
    int vertexCount = int(map(i, 0, 299, 40, 100));
    mPolygon(width/2, height/2, vertexCount, i, i/10);
  } {
    textSize(100);
    text("IMA ROSE", 320, 100);
  }
}
void keyPressed() {
  noStroke();
  float value = random(1, 10);
  println(value);
  if (value < 2) {
    fill(0, 66);
    println(value);
  } else if (value > 9) {
    fill(255, 113, 113, 64);
  } else if (2 < value && value < 3) {
    fill(72, 65, 72, 49);
  } else if ( 3 < value && value < 4) {
    fill(113, 255, 113, 89);
  } else if ( 4 < value && value < 5) {
    fill(113, 113, 255, 75);
  } else if ( 5 < value && value < 6) {
    fill(113, 75, 113, 55);
  } else if ( 6 < value && value < 7) {
    fill(20, 155, 173, 93);
  } else if ( 7 < value && value < 8) {
    fill(245, 255, 45, 85);
  } else if ( 8 < value && value < 9) {
    fill(255, 0, 0, 47);
  }
}

//where????
void mPolygon(int x, int y, int numOfVertex, int br, int rOff) {
  beginShape();
  for (int i=0; i<numOfVertex; i++) {
    float pingPong = sin(radians(millis()/6.0+20*i));
    float r = br+map(pingPong, -1, 1, -rOff, rOff);
    vertex(x+cos(radians(i*360/numOfVertex))*r, y+sin(radians(i*360/numOfVertex))*r);
  }
  endShape(CLOSE);
}

Step 1:choose picture:

I choose Bungie’s Destiny 2 Year 6’s concept picture as my source because I think it’s really cool and the picture shows the conflict between light and dark really well, also the dark triangle battleship (the one in the middle of the picture) and the mostly black background shows the topic “light fall” really well, also, I kinda like Bungie’s art, which is the main reason for me to choose this picture.

Step2: Drafting

I tried to make a draft firstly on the graph paper, but since I didn’t bring my compass with me, the draft tured out to be very “abstract”, in that case, I choose to sign the important points on the ellipse so that I can directly draw them in the Processing.

Here is the confusing draft:

Step 3: Working on Processing:

I mainly used the background, border, circle and triangle programs, and also used the Text program. In general, I successfully built the frame and the main body in Processing, but the picture still has some shortcomings: First, I can’t draw the triangle battleship The three-dimensional effect of the original image – this is a very important part of the original image; the second is the rendering of the bright white in the original image with some halos, which is quite difficult for me, and finally I failed to write a rendering program.

All in all, although there are still many regrets in this program, Recitation 5 taught me the initial application of Processing. I think this is a rare experience, and procedural painting is indeed a very romantic thing.

And here is my code:

void setup() {
  size(700, 1000);
}
void draw() {
  // Your drawing code goes here
  background(0);




fill(255);
ellipse(520,160,40,40);
fill(255);
ellipse(580,80,120,120);



textSize(100);
text("D e s t i n y 2",100,500);
textSize(60);
text("Lightfall",250,600);
noFill();
text("2 0 2 2",270,850);

float w=10;
stroke(255);
strokeWeight(w);
ellipse(350,500,350,350);

float s=2;
stroke(255);
strokeWeight(s);
ellipse(350,500,375,375);
ellipse(350,500,400,400);
ellipse(350,500,425,425);
ellipse(350,500,450,450);
ellipse(350,500,475,475);
ellipse(350,500,500,500);
line(0,0,350,500);
line(0,554,350,500);
line(0,1000,350,500);
line(525,0,350,500);
line(500,1000,350,500);
line(700,540,350,500);
triangle(350,325,200,600,500,600);
line(350,325,350,600);



}