Week 3 – OOP

Concept:
This generative artwork was inspired by kaleidoscopes, with specific regard to the shifting patterns they display as you rotate it. I used the OOP principles we covered to make a Hexagon class and relevant properties/methods for it, and combined it with a 2D array to create multiple layers of hexagonal grids. I implemented randomness by randomly setting the colour and opacity of each hexagon, with the latter being constrained between 30 and 80 to allow for some clear overlap and blending between layers. I initially planned to have three layers, being controlled by mouse/arrows/wasd respectively, but I ended up scrapping the mouse movement since I liked the imagery of peeling back the upper two layers to reveal the remaining one, plus using keys allowed me to set a specific speed value instead of being at the whim of the cursor’s movement.

Highlight:

// // Fill a specified layer with hexagons
function fillLayer(index) {
  // // Loops to populate layer
  let offsetCol = false;
  for (let x = -(width/2); x < width*1.5; x += 1.5*hexSize) {
    for (let y = -(height/2); y < height*1.5; y += 2*hexSize) {
      // // Offset every other column --> interlocking pattern
      if (offsetCol && y === -(height/2)) {
        y += hexSize;
      }
      layers[index].push(new Hexagon(x, y, hexSize));
    }
    offsetCol = !offsetCol;
  }
}

Embed:

Reflection:
I’m pretty happy with how this piece turned out, in both the creative and programmatic aspects. I felt that I had a clear vision going in this time, and was able to actually realize it. My code itself was better contained after compartmentalizing and encapsulating into functions and methods, and I was successful in cutting down on needlessly making functions. On the creative side, I ran into a number of happy little accidents that ended up improving my end result, which was a breath of fresh air.

Despite this specific improvement, I still definitely need to plan things out more, since I found myself having to constantly readjust my code in order to deal with things like messing up the math for my hexagons or implementing the movement functionality with keyIsPressed() instead of keyIsDown().

Week 2 – Reading Response

The discussion on randomness by Casey Reas was a lot more profound than I had expected. I’m used to talking about randomness from a purely mathematical perspective, such as the use of random/psuedorandom numbers in computer security, so hearing the more artistic interpretations was a large change of pace. One point that stood out to me was how you could interpret randomness as a deviation from order, creating a sort of chaotic rebellion against the system, and yet there are countless applications of randomness that converge towards their own sort of order. Similarly, there was also some debate mentioned about whether the use of computers was draining the human aspect from art or giving birth to a brand new medium, and how introducing randomness into a strictly rational machine could impact things.
Another aspect that underscored the entire talk was the careful balance of randomness and control. Going all-in on one side or the other will often lead to either meaningless or soulless results, but the real magic comes when order and chaos come together. I have already found the importance of placing bounds on random values from my own experimentation in p5.js, which imposes some degree of order. Another programmatic aspect that interested me came from a class I took previously, where we discussed noise functions. Specifically, we discussed how one noise function creates randomness, but a combination of noise functions can create a sort of ordered randomness that can be used for things like image textures.

Week 2 – Loop Art

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.

Week 1 – Self-Portrait

Concept:
I wanted to make my self-portrait in a minimalistic style that would accurately represent my appearance while being limited to the use of simple geometric primitives. I chose to not use outlines to add to that flat, minimalist aesthetic. I also wanted to add some simple interactivity, which came in the form of the background changing colours through a day-night palette when clicked.

Embed:

Highlight:
I was proud of this snippet, where I used an array of hex codes to implement my colour cycling feature. It is perhaps more simple than I had hoped for, but I’m happy with how it turned out overall.

// // Array containing possible background colours
let bgs = ["#fff2bd", "#f4d797", "#c9ebff", "#abb5ff", "#7475b6", "#5148b2"];
let curr_bg = 0;

function mouseClicked() {
  // // Change to next bg colour on click
  curr_bg = (curr_bg + 1) % bgs.length;
}

Reflection:
I feel a bit conflicted about this assignment, since on the one hand it was an interesting change of pace to try and create art directly using code, but also very annoying. I found myself frequently trying to force coordinates or dimensions to be multiples of the canvas’ dimensions to allow it to scale, but often found it to be an exercise in frustration. Having to essentially guess-and-check all my numbers was another aspect I didn’t enjoy, since there were little quirks I wouldn’t expect such as circle’s being plotted by their center versus rectangles by their top-left corner.

In the future, I would like to try and plan things out more before starting, especially in regards to using custom variables. The built-in width and height variables made sense at first, but I quickly gave up on sticking to them and added pixel offsets instead. I think the most important thing for me is finding a way to streamline my workflow, since my struggle to put my concept on paper/screen caused me to fall short of where I wanted to be in terms of both artistic and programmatic aspects.