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
