Author: Mariam Alameri

Thinking of randomness brings the idea of disorganization and something more instinctive that is done with no purpose to me. I came to realize that this is not always the case, and that randomness can rather be a more purposeful approach when working on a piece of art. The way Casey Reas presents and discusses randomness makes it seem like a much more important element to consider incorporating, and I was surprised to find myself relating what he was saying with what I had done so far and what I could do next. I completely agreed with his point that randomness in unplanned things can in fact improve your work, especially as I reflected on my last assignment while listening. I created a looped artwork of a drawing made of shapes, and at first I was too focused on organizing how they moved. However, I ended up using randomizing code, which allowed the shapes to move around more freely and resulted in a stronger outcome.

Along with randomness, I feel that the control and manipulation of it also really matters, as I keep adjusting how random I want each code to behave, and think “how random is too random?” Casey mentioned a quote that made me think more about this concept, “the computer is a unique device for the arts since it can function as an obedient tool with vast capabilities for controlling complicated processes.” This reflects how the computer actually works in my practices, it is just “obedient,” meaning that I am still controlling what it does no matter how random it gets. I plan to incorporate random elements into my work, especially when I’m working with a complex piece, for movement or timings, but I believe there should always be a balance between randomness and control. Complete randomness can possibly lead to a messy display and an overwhelming number of actions, while complete control does do exactly what is planned, it can sometimes result in a less engaging or satisfying outcome. Therefore, when using random elements, I would control the randomness to some extent.

My concept:
As I started planning my work for assignment two, I decided I want to create something abstract using the new things we’ve learned in class, along with concepts I caught up on from previous classes. I started off by looking at the documents attached with the instructions, and two specific artworks grabbed my attention. I noticed how both have rectangles and squares in different sizes and complex ways, intersecting and overlapping one another. This inspired me and gave me the idea to create something similar using squares and rectangles, but make it colorful and moving to add life to it. Here are the references:

Embedded sketch:

A Code I’m proud of:
In this assignment I felt particularly proud of adjusting the movements of the shapes, as it was like trying to get the ranges of the sizes correct and ensure they moved within the frame while still appearing random, enhancing the image I was trying to display. I tried many different ways and ranges of numbers until I reached a result that satisfied me.

//Use if statements to ensure the shapes bounce back and forth instead of going out of frame
  if (rectX < -40 || rectX > 40) rectSpeedX *= -1;
  if (rectY < -40 || rectY > 40) rectSpeedY *= -1;

  if (squareX < -40 || squareX > 40) squareSpeedX *= -1;
  if (squareY < -40 || squareY > 40) squareSpeedY *= -1;

//Rectangles:

  //Set the loop to ensure multiple appear in each frame
  for (let i = 0; i < 25; i++) {

    //Randomize the position for pattern
    let w = random(20, 70);
    let h = random(20, 50);

    //Make width and height random to get a variety of sizes
    let x = random(0, width - w) + rectX;
    let y = random(0, height - h) + rectY;

//Squares:

  //Set the loop to ensure multiple appear in a frame
  for (let i = 0; i < 25; i++) {
    
    //Randomize the sizes of the squares for diversity
    let s = random(20, 60);

    //Adjust positions of sqaures
    let x = random(0, width - s) + squareX;
    let y = random(0, height - s) + squareY;

Another part that I’m surprisingly proud of is choosing the background color. I was just experimenting with different colors until I realized I could make it transparent, allowing the previous frames to show through and giving a more realistic look that matches the inspiration pictures.

//Set the background color to fit the goal
function draw() {
  background("#BDE0FF84");

Reflection and ideas for future work or improvements:
After completing this assignment, I felt satisfied with the progress I made and the final result. I feel that I was able to create a plan and successfully execute it through code, using the different techniques learned in class and resources provided. I enjoyed setting many colors at once and watching them appear on the display using random() and my colors array. I gained a stronger understanding of using loops, specifically for loops, and what really stood out to me is how much they can simplify and improve the flow of code. I also became more comfortable using if statements with || to adjust the movements. For future work, I would like to improve this artwork by learning how to make the shapes float around more smoothly in a specific pattern, or by adding more complex shapes to make it even more interesting.

My concept:
For the first assignment of this course, I began by thinking about how I would like to create my self-portrait. I was inspired by looking at different examples from other students and animations of different things. As I reflected on who I am and what I like, I immediately thought of the Blooket character I always chose, and I decided that it would be a perfect way to represent myself. I attempted to create a wolf animation inspired by the Blooket version using 2D shapes and colors, and I wanted to add a creative touch by including sunglasses, as I felt they fit the image and personality I’m trying to display. Below is the reference image for the Blooket animation:

Embedded Sketch:

My vision was for the wolf to have sunglasses that go on and off. As a beginner in coding, I was able to create this effect by programming the glasses to move up and back down using the simple (mouseY) on the wolf’s face. This represents how I wanted the animation to be shown:

A Code I’m proud of:
A part of the code I am particularly proud of in this assignment is the eyes, along with the glasses. While creating the eyes, it took me a long time to adjust the edges and curves of the eye, then find the perfect size for the pupil, followed by adjusting the placement of the small white circles that makes the eye look more realistic. I tried with many different shapes to find what fit best, including circles, ellipses, and rectangles, in a variety of sizes.

//Eyes - In three parts:
//The wider white part of the eyes
fill("white");
rect(155, 190, 50, 50, 15, 10, 40, 20);
rect(240, 190, 50, 50, 15, 10, 40, 20);

//The pupils as black ovals 
fill(0);
ellipse(233, 195, 28, 40);
ellipse(148, 195, 28, 40);

//The small white circles to add a better look
fill("white");
circle(150, 207, 13);
circle(235, 207, 13);

//Glasses with movement
  fill(0);
  rect(155, mouseY, 60, 50, 10, 10, 50, 50);
  rect(240, mouseY, 60, 50, 10, 10, 50, 50);
  rect(197, mouseY, 30, 10, 5, 5, 5, 5);

Reflection and ideas for future work or improvements:
Overall, I am satisfied with the outcome of this assignment, especially since it was my first coding project and I completed it independently. I was able to use different references from the official p5.js website, along with the slides provided in class, to apply what I learned and create this self-portrait. For future work, I would like to improve the complexity of shapes and add more detail to the image. Additionally, I hope to further develop my coding skills so I can program the sunglasses to move more realistically, sliding up onto the wolf’s head and back down over the eyes, similar to how sunglasses work in real life.