Midterm Draft 1 – Branches of Motion

Concept

For my midterm project, I chose to create a generative art piece based on a fractal tree. I’ve always found fractal patterns in nature really interesting, like how trees branch out or how veins spread in a leaf. Each part of a fractal reflects the whole, which is something I wanted to explore in this project. I also wanted the tree to feel interactive so that users can control how the branches grow and move, making it feel more personal and engaging. The mouse controls the angle of the branches, which adds an element of real-time interaction.

Design

The design focuses on creating a tree that changes based on user input. By moving the mouse horizontally, the user can adjust the angle of the branches, which directly influences how the tree grows and branches out. This makes the experience interactive and unique to the user’s movement.

The main function in the code is branch(), which uses recursion to draw the tree. It takes the length of the current branch, draws it, and then calls itself to draw smaller branches at an angle. The recursion stops once the branch length is small enough, and the angle of the branches is tied to the position of the mouse on the screen. This creates a dynamic, interactive system where the tree’s structure shifts as the mouse moves.

Code
For now, I have a basic draft that lays the foundation for the project. Here’s the current code:

let angle = 0; // Initialize the angle variable, which will be controlled by mouse movement

function setup() {
  createCanvas(640, 360); // Set up a canvas of 640 by 360 pixels
}

function draw() {
  background(0); // Set the background to black each frame to clear the previous drawing
  angle = map(mouseX, 0, width, 0, TWO_PI); // Map the mouse's X position to an angle between 0 and TWO_PI (full circle)
  
  stroke(255); // Set the stroke color to white
  strokeWeight(2); // Set the stroke thickness to 2 pixels

  translate(width * 0.5, height); // Move the origin to the bottom center of the canvas
  
  branch(100); // Call the branch function to start drawing the tree with an initial length of 100
}

// Recursive function to draw the branches
function branch(len) {
  line(0, 0, 0, -len); // Draw a vertical line representing the current branch

  translate(0, -len); // Move the origin to the end of the current branch
  
  // If the current branch length is greater than 4, keep drawing smaller branches
  if (len > 4) {
    push(); // Save the current state of the drawing
    rotate(angle); // Rotate by the current angle (controlled by the mouse)
    branch(len * 0.67); // Call the branch function recursively, reducing the length by 67%
    pop(); // Restore the original state

    push(); // Save the current state again for the other branch
    rotate(-angle); // Rotate in the opposite direction by the current angle
    branch(len * 0.67); // Call the branch function for the opposite branch
    pop(); // Restore the original state
  }
}

This code creates a simple tree that responds to the mouse’s horizontal position. The tree grows and splits into smaller branches as the user moves the mouse. This serves as the base for the more complex features I will add later.

Embedded Sketch

Identified Risk and How I Reduced It
The part of the project that worried me the most was making sure the interaction with the mouse felt smooth and natural. I was concerned that the tree would shake too much when the mouse moved quickly, which would make the experience less enjoyable. To deal with this, I focused on carefully mapping the angles using the mouseX position to ensure the tree’s motion stays smooth and doesn’t jitter too much. I also tested the recursive function separately to make sure the branches don’t overlap or become cluttered.

Possible Future Additions
While this is the current draft, there are a few features I am considering for future versions, though these are not finalized yet:

• Colors: I might add color gradients or change the color of the branches based on their depth or size to make the tree more visually interesting.
• Animations: Animations can be added to make the tree grow over time or sway in the wind to make the piece feel more dynamic.
• More Trees: Adding multiple trees on the canvas could create a forest-like scene, where each tree is slightly different in shape or size.

draft 2 for now: https://editor.p5js.org/maryamalmatrooshi/sketches/K0YQElaqm