Concept:
When I was watching the video from our first reading assignment, I came across one of the speaker’s demonstrations where he explained, while generating a maze (image below), that incorporating randomness into art allows the audience to come up with their own conclusions using their own imagination. I truly think that is the beauty of art.
He also mentioned that the same, ordinary structure produces only a single meaning, and I believe is not the point of art. Art is about subjectivity, and I wanted to achieve this by introducing randomness in this assignment. That is why I created an artwork that automatically generates a maze for you to solve. Every time you run the code, you get a different maze so you can enjoy it in a new way each time rather than solving the same maze again and again. Try solving my maze below!
Part of code I’m proud of:
It was pretty hard for me to do it from scratch so I searched for a tutorial video on YouTube. From the video ( https://www.youtube.com/watch?v=jQFYh3nRfSQ ), I was able to learn how stack and class can work together to keep generating paths and filling out all the grids of the canvas. I am especially proud of this mazeIterate() function, which is the most fundamental part of this project. It basically allows you to find an unvisited neighbor that is connected to the grid you are currently standing on. I had to be careful when marking the wall between the current grid and the neighbor grid, because that wall is shared by both of them, meaning that the interpretation from each side is different. Specifically, I created another function called oppositeBlock() to make sure that the same wall is marked as open from the opposite side as well. I was also able to use a stack properly to push the current grid back onto it so that we can return to it when we hit the dead end.
//function to search for and go to the next tile
mazeIterate(){
let currentGrid = this.stack.pop();
let connectedWall = this.pickNeighbor(currentGrid); //find unvisited neighbour that connects with the current tile
if (connectedWall){
this.stack.push(currentGrid); //put the current tile into the stack so that you can come back when you hit the dead end
connectedWall.grid[connectedWall.block] = "open"; //mark the wall as open
currentGrid[oppositeBlock(connectedWall.block)] = "open"; //mark the opposite wall (the same wall) as open
connectedWall.grid.visited = true; //mark it visited
this.stack.push(connectedWall.grid); //push the tile to the stack
currentGrid.current = false;
connectedWall.grid.current = true;
}
else if (this.stack.length != 0){ //if there are no neighbors left,
currentGrid.current = false;
this.stack[this.stack.length - 1].current = true; //move back to the previous tile to seek for unvisited neighbor
}
}
Problems I ran into:
I forgot that I needed to mark the border grids as visited at the beginning. This issue was tricky, because if I didn’t do it, the maze would grow outward and go out of bounds. In order to fix this issue, I restricted the boundary by marking all the grids at the border as visited in the constructor so that we can only generate the maze inside our canvas.
Reflections & Future Improvements:
I am very satisfied with the outcome because I was able to incorporate randomness into my artwork. The learning process took a lot of time because I had to understand how to automatically generate a maze from the tutorial video. However, it was very beneficial for me overall because I was able to reflect upon how to use an array and a class to generate the maze automatically. I think I was able to fully apply all of the concepts we have learned in class so far, so I am very satisfied. For future improvements, I definitely need to work on my comments and variable names, as they are a bit messy right now. But for this assignment, I think my comments would be good for everyone to understand how each part of my code works.