ICM, Jump

This is the Jumping project in a standalone web version.

What I was trying to make is:

  1. A thing that can work alone in the corner, which makes it easy to be in an exhibit.
  2. A thing that allows people to interact with.
  3. A thing that is criticizing.
  4. A thing that I can utilize different skills we have learned in the last two months, including:
    1. API and data;
    2. loop and nested loops;
    3. Sound;
    4. DOM;
    5. Object;
    6. Array;
    7. Callback function;
    8. Event;
    9. And others;

Finally:

http://yangyang.blog/pages/Jump/index.html

Ok, this is a little bit exaggerated, the Nasdaq Index refreshes every minute, and when it goes up, people are happy. And when it goes down, that means they are losing money, then they start to panic and jump the building.

For you who don’t know about stock trading, there is a term called leverage trading. In brief, it means people borrow money to buy or sell stocks. So if market crashes, instead of just losing their live-saving, they will probably get themselves in a huge amount of debt. That’s why you probably have heard people joking “see you on the rooftop” of something like that. And sometimes they’ve made it beyond a joke. It’s not even a piece of news when we hear someone suicide because of their massive loss in the market.

And even my audience who didn’t interested in trading can also find it somehow funny or addictive by looking at the little SouthPark-Feeling figures jumping and bleeding and got deposited by a bulldozing.

What I found interesting while doing this:

How to make people jump?

Jumping is not just a single move, so I disintegrate the whole jumping into 3 part:

  1. p1: Character runs to the edge of the building;
    1. Image scaling bigger, and when it gets big enough, go to the next phase;
  2. p2: Falling;
    1. Just like a falling ball in p5 example;
  3. p3: Getting disassembled and bleeding;
    1. Two picture moving to different direction, blood pool scaling bigger;
class Banker {
  constructor(x, y, deadline, angle) {
    this.x = x;
    this.y = y;
    this.phrase = 1;
    this.scale = 0.01;
    this.speed = -4;
    this.headx = 0;
    this.heady = -320;
    this.heads = -10;
    this.headFric = 0.5;
    this.blood = 1;
    this.deadline = deadline;
    this.angle = angle;
  }

  show() {
    push();
    translate(this.x, this.y);
    // console.log(this.x);
    scale(this.scale);
    if (this.phrase == 1) {
      this.p1();
    } else if (this.phrase == 2) {
      this.p2();
    } else if (this.phrase == 3) {
      this.p3();
    }
    pop();
    this.closer();
    this.drop();
  }
  closer() {
    if (this.phrase == 1) {
      this.scale += 0.001;
      this.y -= 0.4;
      this.y += sin(frameCount);
      if (this.scale >= 0.1) {
        if (this.phrase == 1) {
          screams[floor(random(screams.length))].setVolume(0.3);
          screams[floor(random(screams.length))].play();
        }
        this.phrase = 2;
      }
    }
  }

  drop() {
    if (this.phrase == 2) {
      this.y += this.speed;
      this.speed += gravity;
    }
    if (this.y >= (height - 180 + this.deadline)) {
      // scream2.stop();
      if (this.phrase == 2 && neckSnap.isPlaying() != 1) {
        neckSnap.setVolume(0.5);
        neckSnap.play();
      }
      this.phrase = 3;
    }
  }

  p1() {
    image(head1, 0, -210, );
    image(body1, 0, 110, );
  }
  p2() {

    image(head1, 0, -210, );
    image(body1, 0, 110, );
  }
  p3() {
    push();
    fill(color(0, 89, 75, 100));
    ellipse(0, 0, this.blood * 2, this.blood);
    rotate(PI * this.angle);
    image(body3, 0, 110, );
    rotate(PI / this.angle);
    image(head3, this.headx, this.heady, );
    pop();
    this.heady += this.heads;
    if (this.heads < 0) {
      this.heads += this.headFric;
    }

    if (this.blood < 300) {
      this.blood += 5;
    }

    if(this.x > bullDoze.x && (this.x - bullDoze.x) < 20)
    this.x = bullDoze.x;
  }
}

 

And I draw those pictures, which look super wired:

Problems and solutions:

  1. When I refreshing a variable holding the old data, this variable is temporarily inaccessible;
    1. Use another variable to fetching the new data, then pass the new data to the primary variable;
  2. Callback function cannot call an in-object function directly;
    1. Create an anonymous function to call the in object function;
  3. When I was playing sound, the sounds get overlapped.
    1. Use ‘if (sound.isPlaying())’;
  4. Due to some web editor issues, I put my work on my server. How to manage the same code in a different environment?
    1. Go study Git, boy;
  5. JSON does not work with index;
    1. Use CSV instead;

New stuff learned:

  1. How to get data from API;
  2. How to get data of a cell from CSV;
  3. Use ‘floor(random(100))’ to get a random integrate number;
  4. ‘setInterval(getNewTable, 5000)’ to run a function again and again;
  5. Call back an anonymous function;

 

 

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *