Author: Tiffany Rakotonirina

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.

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.