Tina's Blog

Categories

Archives for November 12, 2020

by Leave a Comment

Final Project Step 1

https://www.youtube.com/watch?v=02z_yyHAm-U   first clip: 3:54-4:20; second clip: 6:00-6:55

First of all, I want to restate my definition that I wrote in my previous research blog post. Interaction between humans and machines means that machines can react to what humans say or do or any kinds of output and that humans can continuously react and interact with the machines. And this continuous and changeable process between humans and machines should be called interaction. 

Therefore, I researched on the website in order to find some projects that fit my definition. Since this would be inspirations for my final project, I just searched online about some previous projects that ITP/IMA students made. In the YouTube video, ITP/IMA Winter Show 2018, I found two projects that really drew my attention. 

The first one is a theremin that can neither be seen nor be touched physically. They basically used the AI and AR technology to realize their project goal, creating a virtual theremin. The user can simply stand in front of the desk, and make some movements or doing some gestures in a certain area, and through that, they can easily produce music. However, the most sparkling point in this project is that it allows two players to interact with the machines simultaneously with different feedback gained. Besides the user who produces music with their movements, the other user can sit down in front of the display screen, actually see the virtual theremin, and even listen to the music produced by the other user with the use of an earphone. This realization of interacting with several users and giving them distinct feedback really can be seen as a perfect illustration of my definition of “changeability”. This also aligns with the concept mentioned by Ernest Edmonds in the article Art, Interaction, and Engagement that, “Each action leads to a response that, in turn, encourages or enables another action.” 

The second example is about raising people’s awareness of our reliability on the smartphone. The project contains several wood-made little puppets, which surround a place where the smartphone is put. When a smartphone is put in that certain area, the puppets surrounding will soon be attracted by the smartphone, and start to keep moving their heads up and down repeatedly. And when the smartphone is taken away from that place, the puppets will become normal again. This process is really vivid in showing the relationship between humans and smartphones. It has a social impact and also the users can continue playing with this prototype, which fits my idea of “continuity”. 

by Leave a Comment

Recitation 6: Processing Animation by Tina(Tianyu Zhang)

During this recitation, I mainly learned about basic animation functions, especially practicing with the basics that we learned in the lectures, and was trying to create some projects by myself. 

At the very first beginning, I wanted to try to make an animated icon with the Processing. However, it seemed that simply located each part and drew the whole icon has taken most of my time already. Therefore, I have really little time to further develop my ideas and even my first try of the push effect that should be triggered by the mouse clicking on the keys also seemed to be a failure. 

However, later on, I found out that we can actually import pictures into Processing, instead of drawing them by coding step by step. 

Here are some of the functions that I searched on the website that may help me further polish my project:

Import Imgaes:
image()
Examples
example pic
PImage img;

void setup() {
// Images must be in the “data” directory to load correctly
img = loadImage(“laDefense.jpg”);
}

void draw() {
image(img, 0, 0);
}
example pic
PImage img;

void setup() {
// Images must be in the “data” directory to load correctly
img = loadImage(“laDefense.jpg”);
}

void draw() {
image(img, 0, 0);
image(img, 0, 0, width/2, height/2);
}

PShader
Examples
PShader blur;

void setup() {
size(640, 360, P2D);
// Shaders files must be in the “data” folder to load correctly
blur = loadShader(“blur.glsl”);
stroke(0, 102, 153);
rectMode(CENTER);
}

void draw() {
filter(blur);
rect(mouseX-75, mouseY, 150, 150);
ellipse(mouseX+75, mouseY, 150, 150);
}

mouseDragged()
Examples
// Drag (click and hold) your mouse across the
// image to change the value of the rectangle

int value = 0;

void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void mouseDragged()
{
value = value + 5;
if (value > 255) {
value = 0;
}
}

PFont
Examples
example pic
PFont font;
// The font must be located in the sketch’s
// “data” directory to load successfully
font = createFont(“LetterGothicStd.ttf”, 32);
textFont(font);
text(“word”, 10, 50);

applyMatrix()
Examples
example pic
size(100, 100, P3D);
noFill();
translate(50, 50, 0);
rotateY(PI/6);
stroke(153);
box(35);
// Set rotation angles
float ct = cos(PI/9.0);
float st = sin(PI/9.0);
// Matrix for rotation around the Y axis
applyMatrix( ct, 0.0, st, 0.0,
0.0, 1.0, 0.0, 0.0,
-st, 0.0, ct, 0.0,
0.0, 0.0, 0.0, 1.0);
stroke(255);
box(50);

DIY Animation (Code):

//PShader blur;
float posX;
float posY;

void setup(){
  size(400,400);
  background(0);
  /*circle(width/2,height/2,200);
  rectMode(CENTER);  
  rect(width/2,height/2,40,80);*/
  
}

void draw(){
    //if(mouseX>width/2-25-30 && mouseX<width/2-25+30){
    //}
  }

void keyPressed(){
    float r = random(255);
    float g = random(255);
    float b = random(255);
    draw();{
    fill(r,g,b);
    noStroke();
    circle(width/2,height/2,300);
    fill(b,r,g);
    stroke(0);
    strokeWeight(5);
    rectMode(CENTER);  
    rect(width/2,height/2,50,160);
    rect(width/2-50,height/2,50,160);
    rect(width/2-100,height/2,50,160,10,0,0,10);
    rect(width/2+50,height/2,50,160);
    rect(width/2+100,height/2,50,160,0,10,10,0);
    fill(0);
    noStroke();
    rect(width/2-25,height/2-35,30,90);
    rect(width/2-75,height/2-35,30,90);
    rect(width/2+75,height/2-35,30,90);
    /*if(posX>width/2-25-30 && posX<width/2-25+30 && posY<height/2-35-90 && posY>height/2-35+90){
      fill(#63665f);
      stroke(0);
      strokeWeight(10);
      rect(width/2-25,height/2-35,30,90);*/
    }
    } 
    

Video Documentation: 

Additional Homework (Code) :

float posX = 300;
float posY = 300;
float speedX = 2;
float speedY = 2;
float s = 100;
boolean state = true;
void setup() {
  size(600, 600);
}

void draw() {
  background(360);
  strokeWeight(20);
  noFill();

  circle(posX, posY, s);

  if (state == true) {
    s = s + 4;
  } else if (state == false) {
    s = s - 4;
  }
  if (s == 400 || s == 100) {
    state = !state;
  }
  colorMode(HSB, 360, 100, 100);
  stroke(s, 100, 100);
  //colorMode(RGB, 255, 255, 255);
  //float r = random (360);
  //float g = random (100);
  //float b = random (100);


  if (keyPressed == true) {
    if (keyCode == UP) {
      posY = posY - speedY;
    }
    if (keyCode == DOWN) {
      posY = posY + speedY;
    }
    if (keyCode == LEFT) {
      posX = posX - speedX;
    }
    if (keyCode == RIGHT) {
      posX = posX + speedX;
    }
  }
}