Month: September 2024

For this week’s assignment, I chose to make a random self-avoiding walker. First, I started by looking at the P5JS example of it and took inspiration from it.

But it wasn’t enough. So, I have started looking for ways to make the walk not get stuck. For that, I have modified  the approach to continuously attempt to find a path by using a backtracking method. It took me a few tries, but I have eventually got there.

After everything, I have added the function to change colors everytime it changes directions. This was not as hard because we have tried it in class.

 

 

let spacing = 20;
let cols, rows;
let x, y;
let grid;
let allOptions = [
  { dx: 0, dy: 1 },
  { dx: 1, dy: 0 },
  { dx: 0, dy: -1 },
  { dx: -1, dy: 0 },
];
let stack = [];
let currentColor;

function setup() {
  createCanvas(400, 400);
  cols = width / spacing;
  rows = height / spacing;
  x = floor(cols / 2);
  y = floor(rows / 2);
  background(51);
  grid = Array.from({ length: cols }, () => Array(rows).fill(false));
  grid[x][y] = true;
  stack.push([x, y]);
  currentColor = pastelColor();
}

function draw() {
  stroke(currentColor);
  strokeWeight(spacing * 0.5);
  point(x * spacing, y * spacing);

  let options = allOptions.filter((option) =>
    isValid(x + option.dx, y + option.dy)
  );

  if (options.length > 0) {
    let step = random(options);
    strokeWeight(1);
    stroke(currentColor);
    line(
      x * spacing,
      y * spacing,
      (x + step.dx) * spacing,
      (y + step.dy) * spacing
    );

    x += step.dx;
    y += step.dy;
    grid[x][y] = true;
    stack.push([x, y]);
    currentColor = pastelColor();
  } else {
    if (stack.length > 1) {
      stack.pop();
      [x, y] = stack[stack.length - 1];
    } else {
      noLoop();
    }
  }
}

function isValid(i, j) {
  return grid[i]?.[j] === false && i >= 0 && i < cols && j >= 0 && j < rows;
}

function pastelColor() {
  return color(random(200, 255), random(200, 255), random(200, 255));
}

For the future, I think that I would like to make it more complex. Maybe I can make two of them and make it collide and when they do something happens. Until then, I am pretty pleased with the outcome

Reductionism and holism offer two different ways to understand complex things, whether it’s in science or something as simple as making lasagna. With reductionism, you break down the process—like learning to cook pasta perfectly, making a sauce, and picking the right cheese. You focus on each part separately, mastering them one at a time. Once you’ve got each piece down, you bring it all together step by step to create the final dish. This approach helps you understand every part deeply before putting it all together.

Holism, on the other hand, is about seeing the dish as a whole, thinking about how the ingredients and flavors interact to create something greater than just the sum of its parts. Instead of focusing only on individual components, you consider how they work together—like adjusting the seasoning based on the cheese or layering ingredients to balance flavors and textures. Holism encourages you to think about the overall harmony of the dish, resulting in a richer, more complex lasagna.

Using food to explain my thought process is easy because of my love for it, but on a more serious note, I believe that both reductionism and holism are valuable approaches. Depending on the situation, one might be more useful than the other. Sometimes it’s better to focus on the details, while other times it’s best to look at the big picture. Understanding when to use each approach can help you navigate and understand complex systems more effectively.

This project explores a unique blend of randomness and user interaction through a dynamic color random walk. The random walker is designed with two key features that make its movement and visual output both unpredictable and engaging.

Key Features:

1. Biased Random Movement:
   • The random walk incorporates a 40% probability of moving towards the direction of the user’s mouse, introducing an element of interactivity. The remaining 60% of the time, the walker moves in a random direction. However, this randomness is also biased; the walker does not have an equal probability of moving left, right, up, or down, which introduces subtle variations in the walker’s path and adds complexity to its movement.
2. Dynamic Color Evolution:
   • The visual aspect of the walker’s path is enhanced by a dynamic color mapping that evolves as the walker moves across the canvas. The color of each point is determined by its x coordinate, creating a spectrum of hues that shift horizontally across the canvas. Simultaneously, the brightness of each point is mapped to the y coordinate, resulting in a gradient that changes vertically. This color evolution adds a rich, visual narrative to the walker’s journey.
3. Spatial Harmony:
   • To ensure the visual clarity of the path, the walker only draws a point if it has moved a minimum distance from its previous position. This spacing prevents the points from overlapping, creating a more aesthetically pleasing and well-defined pattern.

Code

let walker;
let stepSize = 8;  
let minDistance = 30; 

function setup() {
  createCanvas(600, 600);
  walker = new ColorWalker();
  background(0); 
}

function draw() {
  walker.step();
  walker.render();
}

class ColorWalker {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
    this.prevX = this.x;
    this.prevY = this.y;
  }

  step() {
    let direction = random(1) < 0.3 ? 0 : 1;
    let moveX = 0;
    let moveY = 0;

    if (direction === 0) {
      if (mouseX > this.x) {
        moveX = stepSize;
      } else if (mouseX < this.x) {
        moveX = -stepSize;
      }

      if (mouseY > this.y) {
        moveY = stepSize;
      } else if (mouseY < this.y) {
        moveY = -stepSize;
      }
    } 
    else {
      let choice = random(1);
      if (choice <= 0.4) {
        moveX = stepSize;
      } else if (choice <= 0.6) {
        moveX = -stepSize;
      } else if (choice <= 0.8) {
        moveY = stepSize;
      } else {
        moveY = -stepSize;
      }
    }

    this.x += moveX;
    this.y += moveY;

    
    this.x = constrain(this.x, 0, width - 1);
    this.y = constrain(this.y, 0, height - 1);

    
  }

  render() {
    let distance = dist(this.x, this.y, this.prevX, this.prevY);
    
    if (distance > minDistance) {
      let hue = map(this.x, 0, width, 0, 360);
      let brightness = map(this.y, 0, height, 100, 50);
      
      colorMode(HSB, 360, 100, 100);
      strokeWeight(15); 
      stroke(hue, 100, brightness); 
      strokeWeight(15); 
      point(this.x, this.y);

      this.prevX = this.x;
      this.prevY = this.y;
    }
  }
}

Potential Improvements

I want to make this walker a self-avoiding one I think that would be interesting visualization.

How does one explain the observable universe? One approach, reductionism, dissects each phenomenon as individual events. While this approach specifies its look over the event, in reality, many variables account for this event to happen. But if we combine those events, they create a system of events within the universe. Flake questions whether this outcome can still explain the universe or collections of phenomena that result in the universe instead.

As such, nature is full of randoms. Too many things to account for. Look not only one, but all.

The Computational Beauty of Nature proposes to look at these variables instead of observing them as system interactions. Patterns, evolutions, iterations. Singular events that when grouped create systems which then we can translate into groups of similar procedures, outcomes, or both.

However, in the quest to explain this universe, I believe that looking at both sides of the coin is a notable way to observe it. Why do sunflowers contain gridlike patterns? One could tap into its molecular structure, others can mathematically argue its most efficient way to store seeds. Regardless, approaching this observation of a sunflower with both ways allows us to understand the universe even better.