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.


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



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)) {
      } else {
        this.cnt = 0;
      this.y ++;
    else this.fallen = true;

  disappear() {
    this.fade = true;

  display() {
      if(this.fade) this.alpha -= 5;
      image(this.img, this.x, this.y);

  fall() {

  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 *