Week #1 – Random Walkers “with a purpose”

https://editor.p5js.org/oae233/sketches/k9Xd8e1gW

Concept

So for this assignment, my working title was Random Walker “with a purpose”. Watching my random walkers wander around the screen until i refresh my code made me aware of how each walker has a little life span, which it spends doing nothing but aimlessly wandering around, so I thought I’d give it a purpose. My idea was to have my walkers start out in a random position, with a random color on a canvas. The canvas is divided into 3 areas, each area assigned one of the primary digital colors RGB. The movers move around randomly but are also able to check their surroundings, compare the colors they see to their own colours, and move toward the colors most similar to them. Finally, I wanted the movers at any point to have an equal chance at either affecting their environment (changing the color of their surroundings) or being affected by it (changing colors based on their surroundings). In this setup, you get to watch the walkers move around the canvas transforming it into an abstract landscape with varying colors. I also used points that move around randomly in a confined space to create the walkers themselves, so that they look like they’re constantly on the move, and I also think it gives them more personality

Some Code I’m Proud Of

shapeGen() {
    // Generate shapes based on noise values
    this.prepareNoise();
    for (let i = 0; i < this.vrtcsListLength / 2; i++) {
      this.vrtcsX[i] += this.mv[i];
      this.vrtcsX[i] = constrain(this.vrtcsX[i], -5, 5);
    }
    for (let i = 0; i < this.vrtcsListLength / 2; i++) {
      this.vrtcsY[i] += this.mv[i + this.vrtcsListLength / 2];
      this.vrtcsY[i] = constrain(this.vrtcsY[i], -5, 5);
    }
  }

I’m proud of the shapegen() function because of how simple it is, yet it gives so much life to the creatures. I’m also proud of the checksurroundings() function because it took me a lot of time and effort to get right as I explain in the reflections section.

Reflection & ideas for future work 

When it came to coding the part where the movers check the pixels surrounding them, I was initially using nested for loops to do this and copying the pixel data to an array, then sorting that array using the built-in sort function. This was causing my program to become very very slow even with just two movers. I spent a really long time on this issue, trying out different solutions, and eventually, with some suggestions from chatGPT as well, I was able to fix the issue. Instead of the nested for loops and going through all the pixels in the surrounding area I used one for loop to generate only 100 random pixels from the area. Also since sorting is famously very computing intensive I switched to a function that just checks for the smallest value in a list by going through it and updating a variable called “smallestIndex” whenever it finds a number. chatGPT pointed out that it was redundant to copy pixel data to a list when I could just access the pixel array directly after loading the pixels.

My project does not work if you set the pixel density to 2, In a future version I’d love to fix that because I think the smoother motion makes it more enjoyable to watch the walkers, especially at their size. I’d also love to have the walkers be able to see each one another so maybe walkers with similar colours can come together and create more concentrated areas of colour on the canvas.

https://editor.p5js.org/oae233/sketches/k9Xd8e1gW: Week #1 – Random Walkers “with a purpose”