Concept:
I initially created the grid while experimenting with using for-loops in p5.js, and added in a single rect that could be controlled via the arrow keys. The whole thing was vaguely inspired by the genre of snake games, but I later came to think of it more as a canvas that the user would draw on at runtime once I reminded myself that the assignment was meant to be an art piece. I also wanted to see how the random() function could be applied to art, and ended up using it in a few places.
Highlight:
// // Traversed cells
for (let c = 0; c < filled.length; c++) {
fill(filled[c].colour);
rect(filled[c].x, filled[c].y, gridSize, gridSize);
}
// // Class for retaining pos/colour info of traversed cells
class filledCell {
constructor(x, y, colour) {
this.x = x;
this.y = y;
this.colour = colour;
}
}
// // Add a new cell instance to the relevant array
function addCell(oldX, oldY) {
let newC = new filledCell(oldX, oldY, mainColour);
filled.push(newC);
}
Embed:
- Arrow keys = move
- Spacebar = move to random cell
- Click = change colour
- r = clear canvas
- R = randomize canvas
Reflection:
Overall, I’m a lot more satisfied with this piece than the self-portrait. I made sure to approach things more systematically, and achieved my goals of using variables more effectively and leaving comments in my code. One thing I would still like to improve on is ordering and grouping things together, since even though I had distinct sections (e.g. Globals, Interaction, Helpers) my code still ended up being rather messy. The section for helper functions was particularly bad, since I just threw things in there as I came up with them.
Another thing I both struggled and succeeded in was creating functions. There were a number of points where I saw an opportunity to move code from the main body into distinct functions, which was an improvement from last week, but I also had to stop myself from going overboard and creating more functions when I could just leave a few lines in the body to do the same thing. Lastly, while my work was more structured this time around, I still did not plan things out as thoroughly as I would like to. Most of what I wrote was done spontaneously, which resulted in plenty of backtracking to properly implement the new functionality in my existing code.