RECITATION 9

We used https://cuttle.xyz/ and laser cutting machine to create a kinetic sculpture.

This is my design using the website.

Then we “cut” them out.

However, one of the pieces broke and we had to lend another from our friend and finished the project.

BPD-Cure

I got this idea since I’ve been suffering from some mental disease these years. And I know a disease called “Bipolar affective disorder (BPD)”, which is also known as manic-depressive illness, a common complex, polygenic disorder characterised by recurrent cyclic episodes of mania and depression.

Our project is designed to introduce people to this disease and raise people’s awareness to take care of and cure the patients with this disease.

I’ve did some research about magnetofluid and electromagnet, so we will use them in our project. The magneto fluid will act as the patient. When it moves actively, it shows that the patient is in the situation of  mania. When it doesn’t move, it shows that the patient is depressed. We will use 3D printing to create the patient’s body. And the electromagnet will be used to control the magneto fluid.

The user will act as a doctor or a friend to interact with the patient. They will use different method to cure the patient, like drug therapy, psychotherapy, electroconvulsive therapy and light therapy. We will try to use like buttons and sensors to built interactive devices and let users learn more about the disease and the treatment of it. We may use processing to show guidance to audience and assist them with the understanding of the device. 

In general, the first step of our project is to decide what exactly the interactive part should be like. Then we will build the circuit and write the code. After testing the code, 3D printing and maybe cardboard will be used to create the body of the patient and the appearance of the interactive part.

task 1:

code for processing:

/**
* Example sketch for the SerialRecord library for Processing.
 *
 * Receives two integers from the serial port, and uses them to control the x
 * and y position of a circle on the canvas.
 */

import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;

int pmX;
int pmY;
int mx;
int my;

void setup() {
  size(500, 500);
  background(0);
  
  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);

  // If the Arduino sketch sends a different number of values, modify the number
  // `2` on the next line to match the number of values that it sends.
  serialRecord = new SerialRecord(this, serialPort, 2);
   
}

void draw() {
  

  serialRecord.read();
  int value1 = serialRecord.values[0];
  int value2 = serialRecord.values[1];
  pmX=(int)mx;
  pmY=(int)my;
  
  float x = map(value1, 0, 1024, 0, width);
  float y = map(value2, 0, 1024, 0, height);
  //circle(x, y, 20);
  mx=(int)x;
  my=(int)y;
  if(pmX!=mx || pmY!=my){
  stroke(255);
  line(pmX, pmY, mx, my);
  }
  println(pmX, pmY, mx, my);
}

It is a quite interesting task, and it is interactive. I learned to combine the potentiometer with processing and arduino, which was challenging but fun.

task 2:

(I worked on my own)

processing:

import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;
float x = 0;
float d=10;
void setup() {
  size(500,500);
  //background(176,131,250);
  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 1);
  
  
  //serialRecord.logToCanvas(false);
}

void draw() {
  background(0);
  
  circle(x,height/2,20);
  x+=d;
  int m=(int)x;
  if (x>=width){
    d= -d;
  }
  if (x<=0){
    d= -d;
  }
  serialRecord.values[0] = m;
  serialRecord.send();
  

}

arduino:

#include "SerialRecord.h"
#include 
// Change this number to the number of values you want to receive
SerialRecord reader(1);
Servo servo1;


void setup() {
 Serial.begin(9600);
 servo1.attach(9);

 pinMode(9, OUTPUT);

}

void loop() {
 reader.read();
 
 if (reader[0]>450){
   servo1.write(180);
 };
 if (reader[0]<=450){
   servo1.write(60);
 };
  
  

} 

It’s a pity that I didn’t find a partner, but I worked by myself and gradually find the solution to this task.

Three Project Proposals:

1. TITLE: Depression-Aid

   PROJECT STATEMENT OF PURPOSE:

   I’ve been suffering from depression from time to time these years, so I came up with this idea that we can make a device to call on people to care more about patients with depression. People can give a helping hand by hugging them or simply accompanying them. I want to use sensers to detect user’s interaction, use paper box and motors to build the “patient” and light to signal the mental status of the patient. The whole device tells users to touch and hug the patient, and his mood will turn a little better.

   DRAWINGS AND SKETCHES:

2. TITLE: Water Pollution-Under YOUR Control

   PROJECT STATEMENT OF PURPOSE:

   This project rises people’s awareness of avoid water pollution. By moving “trees” away and throwing “trash” into the “river”, user controls the condition of the water.

   DRAWINGS AND SKETCHES:

3. TITLE: Beating Magnetofluid

   PROJECT STATEMENT OF PURPOSE:

   I got the idea from the film Venom. The undefined shape of venom made me think of magnetofluid, and we can use magnetofluid to make lots of things visible, like our heartbeat, the sound in nature and the beat of music.

   DRAWINGS AND SKETCHES:

  

RECITATION 7

task 1:

task 2:

task 3:

I changed part of the codes to let the LED lights interact with the music. The louder the music is, the more lights would be on. Also, the circle still beats with the music though it runs a little stuck.

/* This is a code example for Processing, to be used on Recitation 7
  You need to have installed the SerialRecord library.
  
  Interaction Lab
  IMA NYU Shanghai
  2022 Fall
*/

import processing.serial.*;
import osteele.processing.SerialRecord.*;

import processing.sound.*;

SoundFile sample;
Amplitude analysis;


Serial serialPort;
SerialRecord serialRecord;

        //width of the tiles
int NUM = 60;  //amount of pixels


void setup() {
  size(600, 200);
  sample = new SoundFile(this, "マクロスMACROSS 82-99 - 『82.99 AM』.aiff");
  sample.loop();

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


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

void draw() {
  println(analysis.analyze());
  background(#6FA0D3);
  noStroke();
  fill(#3B49BC);

  // 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, 80);
  circle(300, 100, diameter); // draw a circle based on the microphone amplitude (volume)

  
  
  for (int m=0; m<60; m ++) {
    int i = (int)map(volume, 0, 1, 0, 60);
    if (m<i){
  serialRecord.values[0] = m;     // which pixel we change (0-59)
    serialRecord.values[1] = 0;  // how much red (0-255)
    serialRecord.values[2] = 50;  // how much green (0-255)
    serialRecord.values[3] = 100;  // how much blue (0-255)
    serialRecord.send();  // send it!
    }
     else{
  serialRecord.values[0] = m;     // which pixel we change (0-59)
    serialRecord.values[1] = 0;  // 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!
    }
  }
    
  
}

Research:

project 1: AirDesk

It’s a pity that this video doesn’t have an English version. I was really amazed when I first watched this video. This young man made an “AirDesk” when he found that Apple gave up releasing Air Power. He made the coil movable so that wherever you put your phone on the desk, the coil will move automatically under your phone to charge it. He also added some cool special effects to make the device more interesting. The project is very interactive since it can charge your phone automatically by moving the coil itself.

project 2: How to Transform a PIANO into a BBQ CAR

This guy turned a piano into a BBQ CAR! When driving it, he could hit the keyboard and roast meat skewer. He press a certain key and the skewer attached to it will rotate. Obviously, it is very interactive and fun. I was amazed by how he could associate piano with BBQ and car.

I chose these projects because they are very creative. They connect different things together, like phones and desk, piano, BBQ and car. They informed me that I should be creative and brave to make connection between two totally different things. I should create more interact between different actors, and make the process of interacting more interesting.

A successful interactive experience is composed of many things. It should tell the user what to do and user can enjoy the process of interacting. Like our midterm project, which told the user what the device is about. And the two project I mentioned above allow user to enjoy when interacting with the device. The whole process include “input” “process” and “output”, which is one of the main points of interaction in my definition. As is mentioned in the reading by Ernest Edmond, “although my art was primarily painting, I took an interest in ‘happenings’, in which direct and physical audience participation became, at times, an integral part of the artwork”, the process of interacting is really important, we should make it clear and fun, like by adding more elements into the project, or making the process more complex.

RECITATION 6

Animating an Interactive Poster

/**
 * Distance 2D. 
 * 
 * Move the mouse across the image to obscure and reveal the matrix.  
 * Measures the distance from the mouse to each square and sets the
 * size proportionally. 
 */
 
float max_distance;
PFont f;

void setup() {
  size(1024, 768); 
  smooth();
  f=loadFont("AmericanTypewriter-Bold-48.vlw");
  textFont(f,48);
  
  noStroke();
  max_distance = dist(0, 0, width, height);
  
  rectMode(CENTER);
 
}

void draw() {
  
  
  background(#C5A0D1,200);

  for(int i = 0; i <= width; i += 20) {
    for(int j = 0; j <= height; j += 20) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * 66;
      fill(120+i/7, 200, 200);
      stroke(#693579,120);
      strokeWeight(1);
      ellipse(i, j, size, size);
    }
  }
  
  stroke(0, 40);
  strokeWeight(10);
 line(250, 500+30, 350, 500+30);
 line(250, 518+30, 350, 518+30);
 line(280, 518+30,280,558+30);
 line(320,518+30,320,588+30);
 noFill();
 arc(300, 450+30, 60, 60, PI, 2*PI);
 triangle(285, 485+30, 285, 500+30,297, 500+30);
 line(270, 450+30, 270, 500+30);
 line(330, 450+30, 330, 500+30);
 
 beginShape();
vertex(303,478+30);
vertex(317, 478+30);
vertex(317, 500+30);
vertex(316, 500+30);
endShape(CLOSE);
point(230, 470+30);
point(240, 425+30);
point(275, 395+30);
point(370, 470+30);
point(360,425+30);
point(325,395+30);
  
  stroke(255);
  strokeWeight(10);
 line(150, 600, 250, 600);
 line(150, 618, 250, 618);
 line(180, 618,180,658);
 line(220,618,220,688);
 noFill();
 arc(200, 550, 60, 60, PI, 2*PI);
 triangle(185, 585, 185, 600,197, 600);
 line(170, 550, 170, 600);
 line(230, 550, 230, 600);
 
 beginShape();
vertex(203,578);
vertex(217, 578);
vertex(217, 600);
vertex(216, 600);
endShape(CLOSE);
point(130, 570);
point(140, 525);
point(175, 495);
point(270, 570);
point(260,525);
point(225,495);
  
 textSize(158.00);
 fill(#693579, 160); 
 text("IMA", 100, 150); 
 fill(#693579, 255);
 text("IMA", 100, 270);
 fill(0,50);
 text("IMA", 100, 390);
 
 textSize(36);
 fill(#693579);
 text("Fall 22 End-Of-Semester Show", 400, 500+50);
 text("Location: 8th floor",614,550+50);
 text("Day: Friday December 16",490,600+50);
 text("Time: 6pm to 8pm",623,650+50);

    translate(width/1.1, height/6);
    for (int p = 0; p <= 90; p += 1){
        rotate(radians(360/90));
        pushMatrix();
        translate(300,0);
        rotate(radians(millis()/50+2*p*360/90));
        fill(255, 20);
        stroke(255,200);
        strokeWeight(3);
        triangle(0, -150, -150*sqrt(3)/2, 150/2, 150*sqrt(3)/2, 150/2);
        popMatrix();
    } 
}

homework

task 1

float max_distance;

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

}

void draw(){
  background(255);
  
  translate(-90,-110);
  for(int i = 1; i <= 5; i ++) {
    translate(200, 0);
    pushMatrix();
      for(int j = 1; j <= 4; j ++) {
        translate(0, 200);
     pushMatrix();
      for (int p = 0; p <= 90; p += 1){
        rotate(radians(360/90));
        pushMatrix();
        translate(40,0);
        rotate(radians(millis()/50+2*p*360/90));
        fill(#BED5DB, 30);
        stroke(0+45*i);
        strokeWeight(1);
        triangle(0, -20, -20*sqrt(3)/2, 20/2, 20*sqrt(3)/2, 20/2);
        popMatrix();
      } 
     popMatrix();
  }
  popMatrix();
 }
}

task 2

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

}

void draw(){
  background(255);
  
   
 
  float r = random(100,900);
  float q = random(100,650);
   float m = random(100,255);
   float n = random(100,255);
   float t = random(1,10);
  translate(r, q);
      for (int p = 0; p <= 90; p += 1){
        rotate(radians(360/90));
        pushMatrix();
        translate(20*t,0);
        rotate(radians(millis()/50+2*p*360/90));
        fill(#BED5DB, 30);
        stroke(n,m, 0);
        strokeWeight(1);
        triangle(0, -10*t, -t*10*sqrt(3)/2, t*10/2, t*10*sqrt(3)/2, t*10/2);
        popMatrix();
      } 
      
      delay(500);
  }

task 3

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

}

void draw(){
  background(255);
  
   
 

   float m = random(100,255);
   float n = random(100,255);
   float t = 5;
  translate(mouseX, mouseY);
      for (int p = 0; p <= 90; p += 1){
        rotate(radians(360/90));
        pushMatrix();
        translate(20*t,0);
        rotate(radians(millis()/50+2*p*360/90));
        fill(#FFC1C1, 30);
        stroke(n,m, 0);
        strokeWeight(1);
        triangle(0, -10*t, -t*10*sqrt(3)/2, t*10/2, t*10*sqrt(3)/2, t*10/2);
        popMatrix();
      } 
      
      
  }

Spending a lot of time doing this work, trying and failing, I learned a lot. I searched online for help and learned how to use “translate” and ” rotate”. The process of making the poster and doing the homework was really a pleasure.