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.