Week #1 – Reading Reflection

This reading made me think about how our systems are composed and the relation between them. The introduction gives an example with ants and how a singular ant is a rather simple entity with a set of simple tasks. Nevertheless, if put together a multitude of ants, the number of tasks and its complexity increases. Similar examples can be found even in even more complex things, such as computers. A singular computer is capable of doing an almost infinite set of tasks if properly handled, the same can not be said for a set of computers since the difficulty of handling them increases.

The reading also made me realize that in our life everything is part from a sequential process of parallelism, iterations, and adaptation. For example, in my life I had to do multiple things at once in order to get something, I had to continue fighting for what I wanted continuously and adapted into new environments. This sequential process will be cycled over and over again; nothing to be afraid of, it’s part of life.

And lastly, this reading made me reflect on how we can interconnect between different languages (using the different sciences as an example from the book). For example, something that only artists could do now is able to be imitated and understood by people who lack the advanced knowledge. In other words, if I want to paint the Mona Lisa, the computer could tell me the exact steps that were taken in order to reproduce such a piece. This is thanks to this “translation” process.

Week #1 — Dynamically (and randomly) variable “Flower Pot”

The concept

Since in class we view the topic of motions with some formulas, I initially was confused as to how it worked. I and the mathematics, we do not get along very well. Although, I did want to try the new material taught with the following code. So, in this occasion, I present: The Dynamically (and randomly) variable “Flower Pot”.

The Pelin walker presented in class reminded me of how plants can grow overtime: beautiful and with a bit of unproductiveness. With this in mind, I had some ideas related to the growth of plants and a flower pot.

How it works

The code starts by:

1. Preparing some Pelin walkers and keeping them inside the flower pot (or the white rectangle).

2. Decreasing (as in increasing the height) of the Pelin walkers.

3. Once the Pelin walkers reached the top of the flower cup, they began their iconic movement.

4. When the Pelin walkers are moving, their color uses the same motion to shift the RGB values.

The interaction

Once the movement phase start, the Pelin walkers can be altered by the position of the mouse. That is, depending on which X or Y coordinates the mouse is, the Pelin walkers can either continue growing, stop completely or avoid the pointer. Not only this, but to avoid overgrow, there is a chance (about 1%) of stopping the Pelin walkers from continue moving and if the user decides, it can reset the canva by pressing left click.

A highlight of the code I am proud of

The code was a bit hard to make it work, since the implementation of the interaction with the mouse and the way the Pelin increases within the margins was challenging:

class Walker {
    constructor(x, y, w){  //It is called initial X and Y since is the initial start point.
        //This has to generate under the condition of being inside the box
        this.x = x;
        this.y = y;
        this.w = w;

        //Variables for the pelin movement.
        this.tx = x;
        this.ty = y;
        this.lastposition = 0;
        this.rise = 0; //Controls the map to allow the plant to growth.
        this.free_x = 0; //Frees X space
        this.free_y = 0; //Frees Y space.  Both of them helps to create the illusion of growth.

    } 
    draw(){
        push();
        noStroke();
        fill(map(noise(seed1), 0, 1, 0, width),  map(noise(seed2), 0, 1, 0, height), map(noise(seed1+seed2), 0, 1, 0, seed1+seed2));
        ellipse(this.x, this.y, this.w);
        pop();
    }
             //!!!!!!!!!!!!!!!!
    move(){  //Cup class has to be created first in order for this to move. If not, there wil be a crash.
             //!!!!!!!!!!!!!!!!

        this.x = map(noise(this.tx), 0, 1, (cup.x)-this.free_x, (cup.x+cup.w)+this.free_x);
        this.y = map(noise(this.ty), 0, 1, this.lastposition-this.free_x, cup.y-this.free_y);
        this.tx += 0.01;
        this.ty += 0.01; 
    
        //Dynamic probability over here. Basically, according to a number of chance, it dictates if
        //it should be more open or closed

        if (random_number > 1 && random_number < 4){
            if (this.free_y != -1){
                this.free_y -= mouseY/6;
            }
    
            if (this.free_x != -1){
                this.free_x -= mouseX/6;
            }
        } else if (random_number == 1){
            this.free_y = -1;  //Stops growing;
            this.free_x = -1;
        } else {
            if (this.free_y != -1){
                this.free_y += 1;
            }
    
            if (this.free_x != -1){
                this.free_x += 1;
            }
        }
    }
}

Here is the embedded sketch

Remember to press left click to reset!

Reflection and ideas for future work or improvements

Since the code feels unfinished due to the lack of hints and meaningful interaction between the user and the canva, there is a lot that is left that I desired to add:

  • The Pelin Walker actually avoid the cursor in a fluid motion.
  • Useful hints that indicate which sections of the screen allows or stops the growth of the Pelin walkers.
  • Music in the background.
  • An actual white flower pot instead of a white rectangle.

Despite all this, I feel satisfied that I could learn something new; maybe I can implement this technique in the future if there is the need.