ICM Week 5

This weeks assignment aims to design a sketch in an object-oriented manner, and I also wanted to try using images in my programme. Therefore, referring to Dan’s video I loaded a dozen of images to my sketch and show them on the canvas instead of using the primitive shapes.

I firstly considered of using my plum flower image again, though I soon thought it wasn’t that dramatic of using it because its shape is too symmetric. Moreover, it’s a spring flower so unseasonable as well.

 

For this reason, I finally decided to make a maple tree from which leaves fall whenever I touch — technically, click on — them.

Before getting started coding, I found the images of maple tree branches and autumn leaves. Below are what I found and used for my sketch.

The maple tree images:

 

I found all of them from this generous site: https://www.freepngs.com/autumn-leaves-pngs

I made a folder named ‘images’ and uploaded the images into it:

As it was the first time to use actual images for my p5js coding, I tested on a single image first and then expanded it to object and array forms. I eventually made two more files for the Tree object and the Leaf object.

tree.js:

class Tree {
  constructor(img, x, y, w, h) {
    this.img = img;
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
  display() {
    image(this.img, this.x, this.y, this.w, this.h);
  }
  isTouch() {
    return (mouseX>this.x && mouseX<(this.x+this.w) && mouseY > this.y && mouseY <(this.y+this.h));
  }
}

 

leaf.js:

class Leaf {
  constructor(img, x, y, range) {
    this.img = img;
    this.x = x;
    this.y = y;
    this.range = range;
    this.cnt = 0;
    this.alpha = 255;
    this.fallen = false;
    this.fade = false;
  }

  flutter() {
    if(this.y<height) {
      if(this.cnt < this.range) { this.x++; this.cnt++; } else if(this.cnt >= this.range && this.cnt < (this.range*2)) {
        this.x--;
        this.cnt++;
      } else {
        this.x++;
        this.cnt = 0;
      }
      this.y ++;
    }
    else this.fallen = true;
  }

  disappear() {
    this.fade = true;
  }

  display() {
    push();
      imageMode(CENTER);
      if(this.fade) this.alpha -= 5;
      tint(255,this.alpha);
      image(this.img, this.x, this.y);
    pop();
  }

  fall() {
    this.flutter();
    this.display();
  }

  isGone() {
    return (this.alpha < 0);
  }

  isStacked(other) {
    return (this.fallen && (dist(this.x, this.y, other.x, other.y)<30));
  }
}

I also tried to use for loops to load the images like below but failed. It works fine when I manually load them, so there must be a problem in my code but I haven’t figured it out.

for(let i=0; i<9; i++) {
  img_leaf.push(loadImage('images/autumn_leaf0' + i+1 + '.png'));
}

for(let i=0; i<2; i++) {
  img_leaf.push(loadImage('images/autumn_leaf1' + i + '.png'));
  img_tree.push(loadImage('images/autumn_tree0' + i+1 + '.png'));
}

 

Following is the early result:

Autumn GIF - Find & Share on GIPHY

At this time, I had the leaves gradually disappear while falling. There wasn’t any communication between two objects. Besides, I used fewer images than I found above and didn’t like the colour composition of red/yellow & blue.

Eventually, I changed the background colour, added more leaf types and changed the leaves to disappear when they are blocked by another leaf on the ground. Here is the final result:

(hit the branches!)

The full code of this sketch is available here: http://alpha.editor.p5js.org/yeony102/sketches/Skiu1t43Z

Posted in ICM

Leave a Reply

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