Lydia's Documentation Blog

NYUSH IMA documentation blog

Archives for November 2020

Recitation 6: Processing Animation by Rain

by

In recitation 6, we developed our own animation. Following is my work and the codes:

int x=0;
int y=300;
int angle=0;
int state=0;



void setup() {
  size(600, 600);
  background(0);
}
void draw() {
  background(0);
  rectMode(CORNER);
  fill(0);
  stroke(255);
  rect(160, 160, 300, 300);
  noStroke();
  fill(245, 228, 146);
  circle(x, y, 20);
  x+=3;
  rectMode(CORNER);
  fill(20, 120, 150);
  rect(100, 100, 120, 120);
  rect(100, 400, 120, 120);
  rect(400, 100, 120, 120);
  rect(400, 400, 120, 120);
  if (x>width) {
    x=0;
    rectMode(CORNER);
    fill(0);
    stroke(255);
    rect(160, 160, 300, 300);
    noStroke();
    fill(245, 228, 146);
    circle(x, y, 20);
    x+=3;
    fill(20, 120, 150);
    rect(100, 100, 120, 120);
    rect(100, 400, 120, 120);
    rect(400, 100, 120, 120);
    rect(400, 400, 120, 120);
  }
  if (keyPressed==true) {
    if (key==CODED) {
      if (keyCode==UP) {
        noStroke();
        rect(100, 100, 120, 120);
        rect(100, 400, 120, 120);
        rect(400, 100, 120, 120);
        rect(400, 400, 120, 120);
        y=y-10;
        fill(245, 228, 146);
        circle(x, y, 20);
        x+=3;
      }
      if (keyCode==DOWN) {
        noStroke();
        y=y+10;
        fill(245, 228, 146);
        circle(x, y, 20);
        x+=3;
      }
      if (keyCode==LEFT) {
        noStroke();
        x=x-10;
        fill(245, 228, 146);
        circle(x, y, 20);
        x+=3;
      }
      if (keyCode==RIGHT) {
        noStroke();
        x=x+150;
        fill(245, 228, 146);
        circle(x, y, 20);
        x+=3;
      }
    }
  }
  if (dist(x, y, 160, 160)<=60) {
    state=1;
  }
  if (state==1) {
    background(0);
    rectMode(CORNER);
    fill(0);
    stroke(255);
    rect(160, 160, 300, 300);
    noStroke();
    fill(245, 228, 146);
    circle(x, y, 20);
    x+=3;
    fill(20, 120, 150);
    rect(100, 400, 120, 120);
    rect(400, 100, 120, 120);
    rect(400, 400, 120, 120);
    pushMatrix();
    translate(160, 160);
    rotate(radians(++angle));
    fill(20, 120, 150);
    noStroke();
    rectMode(CENTER);
    rect(0, 0, 120, 120);
    popMatrix();
  }
  if (dist(x, y, 160, 460)<=60) {
    state=2;
  }
  if (state==2) {
    background(0);
    rectMode(CORNER);
    fill(0);
    stroke(255);
    rect(160, 160, 300, 300);
    noStroke();
    fill(245, 228, 146);
    circle(x, y, 20);
    x+=3;
    fill(20, 120, 150);
    rectMode(CORNER);
    rect(100, 100, 120, 120);
    rect(400, 100, 120, 120);
    rect(400, 400, 120, 120);
    pushMatrix();
    translate(160, 460);
    rotate(radians(++angle));
    fill(20, 120, 150);
    noStroke();
    rectMode(CENTER);
    rect(0, 0, 120, 120);
    popMatrix();
  }
  if (dist(x, y, 460, 160)<=60) {
    state=3;
  }
  if (state==3) {
    background(0);
    rectMode(CORNER);
    fill(0);
    stroke(255);
    rect(160, 160, 300, 300);
    noStroke();
    fill(245, 228, 146);
    circle(x, y, 20);
    x+=3;
    fill(20, 120, 150);
    rectMode(CORNER);
    rect(100, 400, 120, 120);
    rect(100, 100, 120, 120);
    rect(400, 400, 120, 120);
    pushMatrix();
    translate(460, 160);
    rotate(radians(++angle));
    fill(20, 120, 150);
    noStroke();
    rectMode(CENTER);
    rect(0, 0, 120, 120);
    popMatrix();
  }
  if (dist(x, y, 460, 460)<=60) {
    state=4;
  }
  if (state==4) {
    background(0);
    rectMode(CORNER);
    fill(0);
    stroke(255);
    rect(160, 160, 300, 300);
    noStroke();
    fill(245, 228, 146);
    circle(x, y, 20);
    x+=3;
    fill(20, 120, 150);
    rectMode(CORNER);
    rect(100, 400, 120, 120);
    rect(400, 100, 120, 120);
    rect(100, 100, 120, 120);
    pushMatrix();
    translate(460, 460);
    rotate(radians(++angle));
    fill(20, 120, 150);
    noStroke();
    rectMode(CENTER);
    rect(0, 0, 120, 120);
    popMatrix();
  }
}

Because the picture I drew in last recitation is too complicated, so I started from beginning. My initial idea was to create a game that likes Super Mario, in which the player can use keyboard to control a rolling ball, and there will be wood blocks randomly appear on the path. Once the ball hits the block, the ball and block will shine together. But through practice, I found that it was almost impossible to realize merely by using what we’ve learned so far, so I changed it to this animation at last.

Basically, it’s a ball rolling across the screen repetitively, and it can also be controlled by arrows on keyboard. The interaction is that once the ball hits a square, the square will rotate until the ball hits the next square. It’s also simple functions but complicated in coding. But thanks to this complexity that acquaint me with a lot of interesting functions. They are listed below.

pushMatrix();
popMatrix();

     A set of functions help to keep the square rotating in a fixed position. They must be used together.

translate(160, 460);

     his function can translate the figures, it can be seen as translating the origin to (160,460), so that sometimes it can simplify the codes. But one thing needs to be noticed is that the following coordinates must be in accordance with the translated position.

rotate(radians(++angle));

     Rotating function. The figure you want to rotate will rotate around a point outside the figure. So if you want to make rotate in a certain position, use Mode function and pushMatrix/popMatrix.

rotate(radians(++angle));

     A function that can map degrees to radians. It will be useful in rotating.

As for homework, the final works and codes are listed as follows:


 

int r1=100;
int r2=160;
int state=0;
int c=0;
int k=0;
int x=300;
int y=300;
void setup(){
    size(600,600);
}
void draw(){
    background(255);
    if(keyPressed==true){
    if(keyCode==UP){
    y-=5;}
    if(keyCode==DOWN){
    y+=5;}
    if(keyCode==LEFT){
    x-=5;}
    if(keyCode==RIGHT){
    x+=5;}
   }

    if(r1>=250||r2>=500){
    state=1;}
    if(r1<=50||r2<=100){
    state=0;}
    if(state==0){
      r1+=2.9;
      r2+=2.9;}
    if(state==1){
      r1-=2;
      r2-=2;}
   colorMode(HSB,360,100,100);
    if(c<=0){
      c=0;
      k=0;}
    if(c>=360){
      c=360;
      k=1;}
    if(k==0){
      c++;}
    if(k==1){
      c--;}
    noStroke();
    fill(c,100,100);
    circle(x,y,r2);
    colorMode(RGB,255,255,255);
    fill(255);
    circle(x,y,r1);
 
}

 

Jack·O·So·Sweet Lantern – Rain – Eric Parren

by

my journey with Jack

In my previous research on an interactive design INFECT by Elsie, I was impressed by her idea that through switching bulb and projected light dots to present how people gather and discuss about hot topics on internet. As the key topic keeps changing to one another, the lights light up in different ways. Together with the wonderful design for Drumming Subhuman which allows it to perform its own music, they inspired me that interaction is not only a changeless process, but also expect movements and surprises. So, my definition of interaction goes as: interaction is a circulating communication process in which actors receive active experience. As for our project, just like INFECT is designed in the context of pandemic, a unique point of our project is it’s characteristic of the on-approaching Halloween. At the same time, it reserves its unique identity different from common pumpkin lamp. Although it looks like an ordinary pumpkin lamp, it’s more useful than a decoration as it also serves as a candy machine. It can be even more useful that it can welcome Halloween visitors when the house owner is not at home. So, its target groups can be people who want to play some tricks on Halloween, and its charm lies mostly on the deceptive appearance with fun but useful function inside.

original graft of our lantern

The work was improved for several times basing on our continuous conception of how users will interact with the pumpkin lamp, and they listed as follows:

  1. Add the sign in the lantern’s mouth which writes BITE YOU!

As our work is a candy machine which pretend to be a pumpkin lantern, we can’t tell the visitors on Halloween directly that “you will get a candy here”. When I’m thinking about how to put their hands inside its mouth to get a candy, I decided to put the sign with terrifying letters on the bottom of its tongue. The horrible typeface and phrases are to make the users feel that something scary might happen when he/she put his/her hands in it, but finally it turns out to be a candy, so that they receive an experience combining both trick and treat. We could have put a sign suggesting directly putting someone’s hands in, but that contributes nothing to the misery sense of Halloween.

  1. Add the alarm sound when someone put hand in the lantern’s mouth, and the Super Mario music after the one gets the candy.

As an interactive machine, it will be great if users can get different emotion experience from it. So I use the sound and music to magnify the two opposite feelings we expect to bring to the users. And I finally chose the alarm and Super Mario theme concerning they’re all familiar sounds that one can easily feel the emotion from the music. Once I tried to program Ode to Joy into the buzzer, but the song did not quite fit the vibe of Halloween so I change it to the Super Mario theme.

The most significant steps of our works are mostly taken when we were figuring out how to trigger the machine to drop its candies, which is also the most important part of out interaction. Firstly, I thought of putting temperature sensors at its ears so that when someone put their hands on it the candies will drop out. But the temperature sensor is not so sensitive and caused some trouble. Luckily, at the user testing session, I saw most of testers would unconsciously put their hands into the pumpkin’s mouth, so I was inspired to add a distance sensor in its mouth. This turned out to be a success modification which enables the interaction between users and our lantern naturally happen, adding more fun and more accuracy to the design.

Nevertheless, there are also pities remained in my mind. In the user testing session, one of the suggestions from Andy is to use a real pumpkin instead of the wooden board. I seriously took this into consideration, but at last due to the lime limit we decided not to follow. I think that’s a great pity as a real pumpkin definitely will make our works more fits the concept of Halloween and tricks. But the suggestion also inspired us to paint the pumpkin’s face and puts LED in its mouth so that it looks better in the final presentation.

All in all, the goal of our project is to provide users a fresh and surprising experience on Halloween, making the festival even more fun. As I define interaction as an experience make participants feel some emotional changes and surprise, the highlight of our pumpkin lantern is its combination of trick and treat and that emotional contrast before and after you get a candy. In the presentation day, my audiences slowly approached the lantern and noticed its eyes turning red, then put their hands inside its mouth and anxiously waiting. When the candy finally drop onto their hands and music start, everyone smiled with joy, at that time I think all of these worth whiles as long as we bring fresh experience and joy to our audience. But still, I believe the lantern will better fit my recognition of interaction if there are more experience provided instead of simply getting a candy. If time permitted, I will use a real pumpkin and add teeth to it, so that it can really “bite” someone until the candy drop. And maybe only someone says typical words of Halloween like “trick or treat”, “Jack Lantern” can receive a candy, otherwise you will only get a bite.

The whole process of the project is a valuable lesson both for my learning in interaction lab and my personal growth. As for learning, firstly it forces me to rethink what is interaction and recognize how different and also difficult a machine interacts with human, though everything seems clear and simple at first. The programming is the most meaningful part for me. What I’ve learn is much more than tons of new functions and programming logic, but also the skill of how to make myself clear to communicate with computer. What’s more, as for myself, I also learned how to do self-exploration outside our classroom, how to search for more resources that our classes are unable to cover, and at the same time, I’ve gained more experience of negotiation and teamwork. So, though the question of “so what” is really a sharp one because the lantern is not an art work expressing my insight of the messy world, but I’m satisfied with the fact that it has conveyed so much fun to my audience and to myself. After all, we always welcome more laughter and surprise in this tough world, right?

go and have fun!