Callie’s Page


This is my blog from my first semester at ITP. I have since switched to a Notion blog which you can view here.


Fall 2024


Intro to Physical Comp:



Intro to Comp Media:



Hypercinema:






Week 7 → Simulation



The system I decided to simulate was tree roots growing underground.

 I wanted to create the effect of natural-looking tendrils growing, getting smaller as they reach the “tip,” and branching off randomly as they grow. 



I started with getting just one root to grow. I created a Root object with a grow function that draws increasingly smaller circles on top of each other, creating the effect of a tendril-like shape that tapers to tip
How to generate ‘natural’ movement:

I knew I needed the noise() functon to achieve offsets that would look relatively natural/gradual while still being random, but it took a lot of experimentation to get the right effect. 

Noise() always returns a value between 0 and 1, and I found that if two numbers are close together, the noise() function will return numbers that are also close together. 

Noise() will also return the same value each time the code is run for a particular parameter. I randomized the initial noiseOffsetX and noiseOffsetY values so that each time a new Root object is created, it will start with a new input parameter and introduce more variability.

By updating the x and y positions of the next circle being drawn on top with a number generated by calling noise() on a random initial variable, and then incrementing that noise() input parameter slightly, I could create random offsets that change over time. 

The “randomizer” variables are a somewhat hack-y solution I found to help create more variation. Without them, the root was always growing to about the same length and towards the right due to the way the noiseOffset variables were being incremented. The x randomizer helps generate a root that grows either forward or backward by returning a value between -1 and 1, and the y randomizer helps generate a root that may be longer or shorter by creating a multiplier between 2 and 5. 


Adding the parent roots:

This for loop was the next step - I created 40 “parent” roots that are added to an array called ‘roots’. 

In the draw loop, I iterate over this array and call the grow() function in the Root class (as long as the size of the ellipse being drawn is greater than 0) 

Next, I wanted these parent roots to start splitting for (let i = 0; i < 40; i++) {
    let x = random(width);
    let y = 0;
   roots[i] = new Root(x, y);
 }



Splitting behavior:

This is the basis of the splitting behavior, nested inside a for loop iterating backwards over the roots array in the draw() function. 

the if statement is a way of generating random chance so that the root isn’t splitting too much or too little. 


if (int(random(1, 150)) == 10) {
       
let newRoot = new Root(roots[i].x, roots[i].y);
newRoot.size = roots[i].size  
newRoot.xrandomizer = random(-1, 1); newRoot.yrandomizer = random(2, 3);
roots.push(newRoot);
 
}





Some crazy/cool results created by glitchy code: 



Here’s the splitting roots:




Growing towards the mouse/hydrotropism effect:


Root growth isn’t always static - plant roots can grow directionally towards a source of water. 

I thought it might be cool to simulate this with a slight skew effect towards the mouse as the roots grow. 

This was pretty simple to implement in the grow() function manipulating the randomizer variables that are already being used to affect the direction of the roots. The trickiest part was trial and error adjusting the math so that it would only generate a very slight effect. 

  let mouseSkewX = (mouseX - this.x)/50000
    let mouseSkewY = (mouseY - this.y)/50000


    this.xrandomizer += mouseSkewX
   this.yrandomizer += mouseSkewY

Final result: