Author: Shahd Nigim

Concept:

In the first week of classes, I decided to make a self-avoiding walker with randomized RGB colors for the background, lines, and points of the walker and Gaussian random point size. I took this assignment to review my prior knowledge of P5Js and build upon it.  For the point, I made sure I used noise to randomize the color to make it more organic, playfull, and aesthetically pleasing.

Highlight of some code:

To successfully make this project, I had to research a little about self-avoiding walkers, and I came across the Coding Trian video where he transforms the random walker we made in class into a self-avoiding one. For my code, I followed the same logic as he did but I also added my own into it. I also explored noise and Gaussian random a lot in this assignment. I also decided to add some text indicating that the pattern has stopped so that the user can reload the code if they want another pattern.

 

// global variable to store the data in the left right up and dawn, each objects stores an element of direction
let allDirections = [
  { dx: 1, dy: 0 }, //right
  { dx: -1, dy: 0 }, //left
  { dx: 0, dy: 1 }, //dawn
  { dx: 0, dy: -1 }, //up
];

let x;
let y;

// randomize the color of stokes
let Clr = 0;

let grid;
let spacing = 20;
let cols, rows; //variables for the colombs and rows to store info

//
function GridArray(cols, rows) {
  let arr = new Array(cols);
  for (let i = 0; i < arr.length; i++) {
    arr[i] = new Array(rows);
  }
  return arr;
}

function setup() {
  createCanvas(400, 400);
  //colums and raws for the 2d array
  cols = floor(width / spacing);
  rows = floor(height / spacing);
  x = cols / 2;
  y = rows / 2;
  //random Background color
  r = random(200, 160);
  g = random(200, 160);
  b = random(200, 160);
  background(r, g, b);
  //make an array to store the grid data in to save it and set it intially to false if it did not go there
  grid = GridArray(cols, rows);
  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      grid[i][j] = false;
    }
  }
  //   set to true when walker has been there
  grid[x][y] = true;
}

//create a function to check validity to go to a specific spot
function isValid(i, j) {
  if (i < 0 || i >= cols || j < 0 || j >= rows) {
    return false;
  }
  return !grid[i][j];
}

function draw() {
  // make dot size based on random gaussian
  let w = randomGaussian(8, 4);
  strokeWeight(w);

  // make stroke color based on noise
  let n = noise(Clr);
  let n2 = noise(Clr + 80);
  let n3 = noise(Clr + 50);
  Clr += 0.75;
  let c1 = map(n, 0, 1, 0, 255);
  let c2 = map(n2, 0, 1, 0, 255);
  let c3 = map(n3, 0, 1, 0, 255);
  let c = color(c1, c2, 160 + c3);

  //plot the point
  stroke(c);
  point(x * spacing, y * spacing);

  //make array and put all directions in the array then check if its valid
  let options = [];
  for (let option of allDirections) {
    let newX = x + option.dx;
    let newY = y + option.dy;
    if (isValid(newX, newY)) {
      options.push(option);
    }
  }

  if (options.length > 0) {
    let step = random(options);

    strokeWeight(5);
    stroke(c);

    beginShape();
    //     line
    vertex(x * spacing, y * spacing);
    x += step.dx;
    y += step.dy;
    vertex(x * spacing, y * spacing);
    endShape();
    grid[x][y] = true;
  } else {
    console.log(`Walked this path!`);
    textSize(14);
    fill(255);
    text('OOPS... almost walked on myself',100,200)
    noLoop();
  }
}

One part of the code I am particularly proud of is making the color for the stroke. Here, I created 3 Perlin noise variables. Then, I incremented Clr by 0.75 to ensure a smooth and gradual transition in color. Then, I mapped the noise values to the color ones understood by P5. Finally, when I made the variable c for color, I  made sure that the blue color was more dominant by adding 160 to it.

Embedded sketch:

Reflection and ideas for future work or improvements:

I am really happy with the outcome. This assignment was an opportunity to review what I previously learned in P5Js and add new knowledge to it.  However, I think there is always room for improvement. For instance, I need to figure out how to restrict the walker within the canvas boundaries. Further, I want it to be a little more interactive. For instance, if the mouse is pressed or the space bar is clicked, I want the walker to re-load and then make another randomized walker and change colors.

Resources:

Wikipedia contributors. (2024, August 7). Self-avoiding walk. Wikipedia. https://en.wikipedia.org/wiki/Self-avoiding_walk

1.1 What is a Vector? (n.d.). https://thecodingtrain.com/tracks/the-nature-of-code-2/noc/1-vectors/1-what-is-a-vector

The Coding Train. (2021, June 10). Coding Challenge 162: Self-Avoiding Walk [Video]. YouTube. https://www.youtube.com/watch?v=m6-cm6GZ1iw

 

In The Computational Beuty of Nature, Flake transforms how I thought about nature and the world from an extremely complex perspective into a simpler one. In this chapter, Flake explores ways in which the world’s complexity can be simplified. From his definition of Reduction, I tried to understand how things work and behave. For instance, when coding something hard I began by thinking of the different elements it encompaces, and put it in simpler words. Through this reading, I realized that the world is like a puzzle. Small pieces of it come together to make something more complex. Additionally, in this book,  he argues that there is a significant importance in looking at the world through other different lenses, such as holism and parallelism.

“Choas shows us that even in deterministic systems, predictability is not guaranteed”.

Further, I liked his comparison between natural selection and algorithm because even though someone knows how specific algorithms work and the creator knows how natural selection works we, as users, often do not know. As a result, I think this creates a form of randomness, and he will explain further in chapter three about chaos where algorithmic systems can produce seemingly random outcomes.

Even though the chapter focuses on how to see the world it also briefly introduces the different chapters of the book where he draws a connection to the relationship between the various chapters in understanding one another and nature.
I think this chapter formulates a foundation for the book and how via computation one can understand the complexity of our world.