Final Project Draft #2 – Peacefulness in Green

a. The concept

My idea for the final project is to create a relaxing and interactive experience. While this idea can apply to many concepts, I decided to focus myself on recreating (albeit not 100% similar) the following figure:

And also, the following figure:

The idea was to implement everything that we have learned so far in class. Although, due to some concerns that will be shared below, this might be carefully considered depending on the quality outcome. In the following sections of this blog post, the interaction and goals of this sketch will be explained.

b. The current interaction

The interaction was possible to implement, which is mostly a physics interaction with the glass cup and the seeds to grow some plants. I have not thought about other interactions since I think it would be very time-consuming, since I feel that the current focus should be on finishing the visual details for the canvas.

c. The design

Since I have some skills when it comes to image manipulation (not that much of a design master if I am honest), I decided to use Figure 2 as a basis for the background. This was done by manipulating the image using the software GIMP:

Some audio background has also been added in order to complement the experience. Nevertheless, in future iterations, audio feedback for the physics objects will be implemented.

d. The difficulties encountered

Taking into consideration the original sketch, there are some elements that have been added, such as the physics interaction with the bottle with seeds (number 1). Nevertheless, elements such as the generation of patterns for the terrain with cellular automata has proven to be difficult (number 6). Instead, this changed to be like an “old filter”. It is a very subtle effect, but noticeable.

Elements number 2, 3, 4 and 5 are still pending to be added, which are the following:

#2 Ants moving from left to right: The ants represented will be moving through the dirt randomly, although they will try to stay inside an established range with the help of a flow field.

#3 Winds: While they are going to be composed of a particle system, to highlight that winds do exist in the sketch, they are mostly there to provide an additional force for the matter.js bodies.

#4 Birds flying around: These will be done with the help of a flocking system.

#5 A tree with moving leaves: The moving leaves will be simulated with the help of some forces.

If difficulties are encountered again, the ideas for these elements will be rethought in order to have a complete final product.

e. Code I am particularly proud of

Detecting the current position of each ball and then spawning a Perlin walker that moves linearly in the Y axis but randomly on the X axis, while leaving a trail, proved to be difficult. I had to readjust the positioning to match Matter.js:

Code found in classes/walker.js

  show() {
    //Show trail.
    push();
    for (let i = 0; i < this.history.length; i++) {
      let pos = this.history[i];
      ellipse(pos.x, pos.y, this.w);
      noStroke();
      fill(0,200,0);
      /* fill(
        map(noise(seed1), 0, 1, 0, width),
        map(noise(seed2), 0, 1, 0, height),
        map(noise(seed1 + seed2), 0, 1, 0, seed1 + seed2)) Commented since it is not required at the moment. It also looks wrong. */ 
      ;
    }
    pop();
  }

  move() {
    this.history.push(createVector(this.position.x, this.position.y));
    this.position.x = map(
      noise(this.tx),
      -30,
      30,
      this.position.x - 10,
      this.position.x + 10
    );
    /* this.position.y = map(noise(this.ty), 0, 1, this.lastposition, 0); */
    this.tx += 0.1;
  }
}

f. The current progress so far

Here is my second draft, with the current progress, for the final project:

Controls:

Holding mouse left click: Grab body/element
C key: Spawn circle.

Full-screen version: Go to the Full-screen version

g. Reflection on current progress

This has proven to be a difficult task so far, since we have to implement everything we have seen in class. Not only that, but some features I want to add into the sketch requires some time in order to get the desired results. For example, the interaction with the seeds took a lot of time to add, since working in conjunction with Matter.js needs that I approach p5.js rather differently. Likewise, some physics values are still misaligned to properly represented the bodies seen in the sketch.

Still, the idea is to try, and if there are any issues, as mentioned, ideas will be replanned.

h. Used sources