Week 2 – Reading Response

After watching Casey Reas talk about randomness, it got me thinking about how I usually approach design. When working I’ve always been about control, and making sure every element has a purpose and fits just right. But Reas kind of pushed me to reflect on how it’s not about giving up control but rather just letting a little unpredictability into the process to keep things from becoming flat and boring. When things are too ordered, they lose their spark and this idea made me realize that maybe I’ve been too focused on precision and could benefit from creating space for randomness to breathe a little life into the work im making. I’m now thinking of ways to incorporate small random elements, like little shifts in color, shape, or spacing, so that my designs feel alive without losing the structured feel I love.

As for the balance between randomness and control, I think it’s about finding that perfect place where the two can interact with each other.  Things that are too rigid can become very static, while too much randomness can feel directionless. In my opinion the perfect balance happens when you have a solid structure but let randomness subtly influence the details. Whether it’s adjusting spacing, throwing in a surprise texture, or letting a color shift unexpectedly, it makes the work feel slightly more dynamic. The goal isn’t to pick one or the other but to let control and randomness work together to create something that keeps the viewer engaged and constantly evolving.

Week 2: Loops

Concept

While looking through  the old computer art magazines, I came across a design that instantly reminded me of pixels and TV static. The random arrangement of small squares felt similar to the scattered and colourful pattern on an old television screen.After seeing this, I wanted to recreate something along those lines, using code to generate a pixelated display that mimics this static.

This project was the perfect opportunity to experiment with loops and randomness, especially when it came to generating different colors for each pixel. So, by using a loop to fill the screen with these randomly colored squares, I was able to create a simple yet visually interesting effect that kind of recreated the essence of  this TV static.

Process

For this project, the TV frame and buttons were easy to set up, where I used  basic shapes like rectangles and ellipses.

//tv
fill(50);
rect(100, 100, 300, 220, 30);

// antenna
stroke(50);
line(150, 70, 200, 100); 
line(350, 70, 300, 100);
ellipse(150, 70, 10, 10);
ellipse(350, 70, 10, 10);

The most interesting part was creating the static effect on the screen. In this case I used used two nested for loops to generate the grid of small squares, each filled with a random color. This randomness gave the appearance of the moving static, similar to an old television with no signal. One challenge was making sure the pixels aligned correctly within the  shape of the tv, which required adjusting the starting and ending values of the loops. Once that was fixed, the effect worked well, and I liked how the simple loop and random color values could create something visually engaging.

  // pixels in tv
  for (let y = 120; y < 280; y += 10) {
    for (let x = 135; x < 355; x += 10) {
      fill(random(200), random(200), random(200));
      rect(x, y, 10, 10);
    }
  }
}

Reflections & Improvements for Future Work

Overall I’m very happy with how my project turned out. However if I were to improve this I could add more interactivity. To do this I could make the pixels change color when the mouse hovers over them or allow a mouse click to generate a new static pattern. I could also add like different channels to the tv, and add a remote control to allow the users to change channels.

Week 1 – Self Portrait

Concept

For this project, I wanted to focus on representing myself using colors and shapes to convey my personality, rather than just creating an exact lifelike image. I chose bright pastel colors because they represent this sense of calm, warmth, and playfulness, which are qualities I believe reflect who I am as a person.  In terms of the layout, I kept the features rather minimalist, with curves and lines to form a slight sense of structure without making the portrait overly complicated. I used shapes like circles, ellipses, and rectangles to mimic facial features.

Code Highlight

One of the parts of the code that I am proud of is how I created the hair. At first, I was going to use a simple rectangle to represent the hair. However, as I started to mess with the shapes, I noticed that circles and ellipses would work well to create the flowing, softish texture of hair, and I ended up combining these shapes with rounded rectangles to create this illusion.

Here’s the code:

 
//hair
 fill(0, 0, 0);
 rect(107.5, 189, 185, 125, 35);
 ellipse(200, 203, 185, 250, 150);
 fill("black");
 circle(120, 168, 50);
 circle(280, 168, 50);
 circle(280, 168, 50);

//bangs
 push();
 fill("black");
 rotate(75);
 ellipse(100, 202, 120, 50, 70);
 rotate(-75);
 ellipse(235, 147, 95, 54, 70);
 ellipse(235, 130, 70, 54, 70);
 pop();

Ideas for Future Work/Improvements

Looking ahead, I have a lot of ideas for how I could improve this portrait. First, I’d love to animate different aspects of the portrait, so maybe animate the hair to give the illusion that it’s blowing in the wind, or make the eyes blink or shift to make the portrait feel more dynamic. I could also include  more interactive features, like making the background change colors based on the position of the mouse.

Another area I may want to explore is the use of textures. For this project I stuck with solid pastel colors, however I think adding subtle textures to the background or hair could create a more layered and interesting visual effect. I could experiment with gradients, patterns, or even incorporate some visual noise to make the composition feel slightly more textured.