Celeste’s Final Present&Report blog

Title: Survive and stop the illegal whalers

Hanwen Hu

Instructor: Professor Gottfried

Design: Originally, what I wanted to do was a survival challenge – survive two monsters for three minutes. But then I thought that if my subject could combine reality and imagination, it might have a different effect, so I chose the anti-whaling event. At the same time, I canceled my original two-player plan and set a goal of surviving on the ocean. It took a moment to find the illegal whaling ship, but before that, the player had to fight with wind waves, eddies, hidden reefs, etc. for a long time, and I set a higher difficulty, hoping to make the audience realize that it is not easy to protect marine life. On the User Test, my Arduino part is not finished, so I don’t have a complete display, but the suggestions from the professor and other classmates inspired me – I decided to add the opening animation and add more variables. For example, in the game, as the intensity of the background music changes, the speed of the bullets fired by the ship and the appearance of dangers at sea will also change. From the point of view of the last run, these changes are effective.

Making:When making the project, I plan to use Lazer Cutting to make the solid part, and control the movement of the boat through the potentiometer. So I used Lazer Cut to make decorations that symbolize swirls and islands, as well as the “rudder” that adorns the potentiometers. The original box was too big to bring back, so it was cleaned up during my quarantine, but fortunately, small decorations such as island reefs and “rudders” have always been with me, and I finally made another one using Cardboard Relatively simple box. The biggest problem I have encountered is that because the program in the Processing part is too complicated, sometimes an error will be reported because the number of parameters is too large. During the final project show, my Project failed once. Maybe next time I will pay more attention to physics. part of the interaction. Of course, the excessive size of the procedural part was also related to my inability to make the physical part while I was isolated. Of course, part of the success of the project is also the program, because when the program runs successfully, it does exhibit many functions and basically meets my requirements.

Here is the sketches:( Some are PDF so I put them as a link.)

Untitled Project – Component A

 

12

Here is the new physical installation:

 

It’s worth mentioning that I chose a particular potentiometer with the joystick pointing up, which I thought would make it easier for the viewer to steer the boat while keeping their eyes on the screen.

Here is the cutscene:

Conclusion: All in all, although there were mistakes in the presentation, and the isolation also prevented the project from living up to the original expectations. I still think this project is a major improvement for me. Since I didn’t reach the field, my roommate completed the experience work. He thought that if the illegal whaling ship could be made into a “BOSS”-experience a battle instead of directly catching it each other, it will be more interesting. I have to admit that’s a good suggestion, but it’s a bit beyond my programming skills. In addition, I also think that there is still room for improvement in the Physicla Installation part, such as coloring and marking, etc. I will improve it next time I have a chance.

Regardless of the final result of this semester, this course has given me great help and good memories. I have learned a lot of programming-related knowledge, and my hands-on ability and independent thinking ability have been greatly improved. Thanks to this course and Professor Gottfried, my interest in IMA has become more determined.

Here is the video about the game:

My dormmate is testing:

Here is the Arduino code:

#include "SerialRecord.h"

SerialRecord writer(1);

void setup() {

  Serial.begin(9600);

}

void loop() {

  int value = Analog(A0)

  writer[0] = value;

  writer.send();

  // This delay slows down the loop, so that it runs less frequently. This can

  // make it easier to debug the sketch, because new values are printed at a

  // slower rate.

  delay(10);

}

Here is Processing code:

import ddf.minim.*;

Minim minim;
import processing.video.*;

Movie movie;
int stage = 1;
AudioPlayer music;
Back back;//背景类
Main main;//主机类
PFont Font1,Font2;//字体
Enemey[] enemey=new Enemey[10];//敌机类
boolean[] keys = new boolean[128];
Bullet bullet;//子弹一
Bullet bullet1;//子弹二
int LF=10;//接收换行符的acsii码
boolean shoot;
int correction=-20;
int alpha=255;
int score=0;
int bestScore;
int life;
int times = 1;
float voice = 0;
boolean gameOver;
boolean regameOver;
int endmillis;
void setup()
{
size(1024,824);//画布大小

minim=new Minim(this);
music=minim.loadFile("music1.mp3",1024);//导入音乐
back = new Back(0,0);//初始化背景
Font1 = createFont("fangsong",50);
Font2 = createFont("fangsong",30);
main = new Main(250,300);//初始化主机
for(int i=0;i<10;i++)
{
enemey[i] = new Enemey(random(0,600),random(-200,-100));
}//初始化敌人
bullet = new Bullet(main.x-20,main.y+20,correction,alpha);
bullet1= new Bullet(main.x+65,main.y+20,correction+85,alpha);
endmillis = millis();
movie = new Movie(this, "Movie1.mp4");
movie.loop();
}

void movieEvent(Movie m) {
m.read();
}
void draw()
{
if (stage==1)
{ 
if (millis()-endmillis > 73000)
{
stage=2;
} 
image(movie, 0, 0, width, height);
}
if (stage == 2)
{
if(gameOver==false)
{
showBegin();
}
if(keyPressed && key=='s' && !gameOver)
{
gameOver=true;
music.loop();
}
if(!gameOver)
{
return;
}
voice=music.mix.level();
regameOver=false;
if(life<=0)
{
showOver();
if(keyPressed && key=='r' && !regameOver)
{
reGame();
}
if(!regameOver)
{
return;
}
}
back.display();//画布流动
main.display();//主机模型和方向
interFace();//显示分数,生命
bullet.update();
bullet.display();
bullet1.update();
bullet1.display();
for(int i=0;i<10;i++)
{
enemey[i].display();
enemey[i].update();
if(enemey[i].bruise())
{
life-=1;
enemey[i].life=0;
enemey[i].die();
}//判断敌机是否撞到主机 如果是主机生命减一
if(enemey[i].check())
{
enemey[i].life-=1;
if(enemey[i].direction==1)
{
bullet.die();//左边击中
}
if(enemey[i].direction==2)
{
bullet1.die();//右边击中
}
enemey[i].die();//判断敌机是否死亡
}//判断敌机是否被击中 如果是敌机生命减一
if(enemey[i].reach())
{
enemey[i].x = random(0,700);
enemey[i].y = random(-50,-30);
enemey[i].life = enemey[i].type+1;
}//判断敌机是否安全到达 如果是初始化其位置
}
}
}
//-----------------------------------------------------------------------按键函数
void keyPressed()
{
keys[key] = true;
}
void keyReleased()
{
keys[key] = false;
}
//-----------------------------------------------------------------------界面
void interFace()
{
int difficulty=0;
for(int i=0; i<10; i++)
{
difficulty = difficulty+enemey[i].type;
}
PImage[] png;
fill(255);
textSize(20);
text("Score:",25,40);
text(score,90,40);
text("DY:",130,40);
text("V:",200,40);
text("Mainlife:",365,40);
png = new PImage[5];
for(int i=0;i<life;i++)
{
int j=i+1;
png[i] = loadImage("Mainlife.png");
png[i].resize(25,25);
image(png[i],425+j*30,22);
}
if(score>100*times)
{
life+=1;
times+=1;
if(life>5)
{
life=5;
}
}
fill(255);
rect(220,27.5,120,10,10);
noStroke();
fill(bullet.v*(255/15),150,0);
rect(220,27.5,bullet.v*(120/15),10,10);
if(difficulty>=13)
{
fill(255,0,0);
}
if(difficulty<13 && difficulty>8)
{
fill(255,255,0);
}
if(difficulty<=8)
{
fill(0,255,0);
}
ellipse(170,33,15,15);
}
//-----------------------------------------------------------------------开始
void showBegin()
{
fill(0);
rect(0,0,width,height);
fill(255);
textFont(Font1);
text("Stop illegal whaler",160,180);
textFont(Font2);
text("Press 's' to begin",230,240);
}
//-----------------------------------------------------------------------结束
void showOver()
{
music.pause();
fill(0);
rect(0,0,width,height);
fill(255);
textFont(Font1);
text("Stop illegal whaler",160,180);
textFont(Font2);
text("You have failed the emperor!",170,300);
text("Press 'R' to Reburn",210,240);
text("Score:",200,90);
text(score,350,90);
if(bestScore<score)
{
bestScore=score;
}
text("bestScore:",200,120);
text(bestScore,350,120);
}
void reGame()
{
main = new Main(250,300);
regameOver=true;
score=0;
life=3;
for(int i=0;i<10;i++)
{
enemey[i] = new Enemey(random(0,700),random(-50,-30));
}
minim=new Minim(this);
music=minim.loadFile("music.mp3",1024);//导入音乐

}
//-----------------------------------------------------------------------背景类
class Back
{
PImage[] background;
int x;
int y;
int y1;
int y2;
Back(int x,int y)
{
background = new PImage[2];
this.y1=y;
this.y2=y-400;
this.x=x;
for (int i=0;i<2;i++)
{ 
background[i] = loadImage("background.jpg");
}
}
void display()
{
y1++;
y2++;
if(y1==400)
{
y1=-400;
}
if(y2==400)
{
y2=-400;
}
tint(255,255);
image(background[0],x,y1);
image(background[1],x,y2); 
}
}
//-----------------------------------------------------------------------主机类
class Main
{
int r;
int x;
int y;
int state;
boolean[] direction;
PImage aircraft;
Main(int x,int y)
{
this.x=x;
this.y=y; 
life = 3;
r=20;
direction = new boolean[4];
aircraft=loadImage("Main.png");
}
void up()
{
if(keys['w'] && y>0)
{
y-=2;
}
}
void down()
{
if(keys['s'] && y<824)
{
y+=2;
}
}
void left()
{
if(keys['a'] && x>0)
{
x-=2;
}
}
void right()
{
if(keys['d'] && x<1024)
{
x+=2;
}
}
void display()
{
up();
down();
left();
right();
tint(255,255);
image(aircraft,x,y);
}
}
//-----------------------------------------------------------------------子弹类
class Bullet
{
int x;
int y;
int r;
int v;
boolean shoots;
int alpha;
int corrections;
PImage png;
Bullet(int x,int y,int corrections,int alpha)
{
this.alpha=alpha;
this.corrections=corrections;
this.x=x;
this.y=y;
png = loadImage("bullet.png");
png.resize(50,50);
r=5;
}
void update()
{
if(voice<=0.01)
{
voice=0.01;
}
if(voice>=0.2)
{
voice=0.2;
}
v=(int)map(voice,0.01,0.2,1,15);
println(v);
y=y-v;
}
void display()
{
tint(255,alpha);
image(png,x,y);
if(y<-10)
{
alpha=255;
r=5;
x=main.x+corrections;
y=main.y+20;
}
}
boolean check()
{
if(y<=20)
{
return true; 
}
return false;
}
void die()
{
alpha=0;
r=-100; 
}
}
//-----------------------------------------------------------------------敌人类
class Enemey
{
float x;
float y;
float v=1;
float a=1.5;
int r;
int type;
boolean exist;
int life;
PImage[] png;
PImage[] png1;
int direction;
Enemey(float x,float y)
{
png = new PImage[3];
png1 = new PImage[2];
this.x=x;
this.y=y;
r=15;
type = (int)random(0,3);
life = type+1;
String a = "Explosion.png";
String b = "enemey"+type+".png";
png[type] = loadImage(b); 
png[type].resize(50,50);
for(int i=0;i<2;i++)
{
png1[i] = loadImage(a); 
png1[i].resize(50,50);
}
}
void update()
{
if(type == 0)
v=1;
if(type == 1)
v=1.5;
if(type == 2)
v=2; 
v=v+a;
y=y+v; 
}
void display()
{
tint(255,255);
image(png[type],x,y);
}
boolean bruise()
{
if(dist(x-5,y,main.x+22.5,main.y)<main.r+r)
{
return true;
}
return false;
}
boolean check()
{
if(dist(x,y,bullet.x,bullet.y)<bullet.r+r)
{
direction = 1;
return true; 
}
if(dist(x,y,bullet1.x,bullet1.y)<bullet1.r+r)
{
direction = 2; 
return true; 
}
return false;
}
void die()
{
if(life<=0)
{ 
//explosion.display();
if(type==0)
{
score++;
}
if(type==1)
{
score+=3;
}
if(type==2)
{
score+=5;
}
for(int i=0;i<2;i++)
{
image(png1[i],x,y);
}
x = random(0,1024);
y = random(-50,-30);
direction = 0; 
life = type+999;
}
}
boolean reach()
{
if(y>height+50)
{
return true; 
}
return false;
}
}


Annix

Celeste’s blog about recitation 10

5/12/2022

In this Recitation, we were asked to make a media player with simple functions. This player should have the ability to make some adjustments to the played video. After thinking about it, I chose the function of adjusting the playback speed, because I think adjusting the speed is one of the core functions of the current web player.

First I opened the basic sample according to the instructions, and then I chose HuangLing’s MV “TruE” as the material because “TruE” is one of my favorite songs in 2022. Afterward, I built the circuit and used Processing to receive the information from Arduino, and used Potentiometer to control the playback speed from 0.0X to 2.0X. I didn’t encounter any major problems in the middle, and basically completed it independently, and the process went smoothly. This also gave me more confidence in the programming at the end of the term.

Here is my video:

And here is processing code:

import processing.serial.*;
import osteele.processing.SerialRecord.*;
Serial serialPort;
SerialRecord serialRecord;

Movie mov;

void setup() {
size(960,560);
background(0);
mov = new Movie(this, "Elysia.mp4");
mov.loop();
String serialPortName = SerialUtils.findArduinoPort();
serialPort = new Serial(this, serialPortName, 9600);
serialRecord = new SerialRecord(this, serialPort, 1);
}


void movieEvent(Movie movie) {
mov.read(); 
}

void draw() { 
image(mov, 0, 0);
serialRecord.read();
int value = serialRecord.get();

float newSpeed = map(value, 0, 1024, 0,2);
mov.speed(newSpeed);

fill(255);
text(nfc(newSpeed, 2) + "X", 10, 30); 
}

Here is Arduino code:

#include "SerialRecord.h"

SerialRecord writer(1);

// the setup routine runs once when you press reset:

void setup() {

  // initialize serial communication at 9600 bits per second:

  Serial.begin(9600);

}

// the loop routine runs over and over again forever:

void loop() {

  int value = analogRead(A0);

  writer[0] = value;

  writer.send();

  // This delay slows down the loop, so that it runs less frequently. This can

  // make it easier to debug the sketch, because new values are printed at a

  // slower rate.

  delay(10);

}

Celeste’s Blog about Recitation 9

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
  }
}

Celeste’s final project essay

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.

Celesta’s blog about recitation 8

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);
  }
}
}

Celeste’s Final project proposal.

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.

Celeste’s Recitation blog 7

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.

Celeste’s final project research

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.
 

Celeste’s Blog about Recitation 6

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);
}

Celeste’s Blog for Reading Response 5

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);



}