Author: Areeba Alavi

For this week’s assignment, we were tasked with creating a piece of generative artwork. Fortunately, I was hit with inspiration pretty soon after leaving class. This week was candidate weekend for new potential students, and I got to watch them crowd up around volunteers. This inspired me to create this artwork, which has a grid of blocks, with an interactive feature of all the blocks pointing towards the mouse.

We were asked to use Object-Oriented Programming for this assignment, so I started by first programming first block to see whether I could actually get the triangle to follow the mouse around or not. In my previous assignment, I had learnt how to use the rotate() and translate() functions, but this time, I needed to have it rotate according to angle of my mouse. This proved to be the most challenging part of this task. I struggled with calculating the angle (research eventually led me to the atan2() function), and then actually having the triangle rotate about its center. I did end having to hardcode some values into the function, but its functionality felt satisfying to achieve.

A different part of the code that I am especially proud of is the random rotation of the blocks towards the bottom half of the artwork. I used the map() function we had discussed in class to adjust for the intensity of the rotation depending on the row the blocks were in. I think it turned out quite organic-looking!

//rotating the rows at the bottom half
    if (this.row >= rows - 4) {
      //making the level of rotation more intense as the grid goes on using map() function
      let intensity = map(this.row, rows - 4, rows - 1, 5, 25); //increasign rotation for lower rows
      //converting to radians for the rotate() function
      this.fixedRotation = radians(random(-intensity, intensity));
    } else {
      this.fixedRotation = 0; //no rotation for the top rows
    }

Overall, I am quite glad with the end result of my piece. Though in the future, I would like play a bit more with the colors. Currently, it is black and white, as I couldn’t quite get a colored gradient without it looking odd. I want to also figure out how to fix the center of rotation without hardcoding it. Regardless, I am still very happy with the interactive feature of the piece.

 

 

Casey Reas’ talk on randomness in generative artworks provided an intriguing insight into the concept of randomness not as a frightful enemy but rather as a tool to employ and utilize. As humans, we instrinsically cower away from randomness. It disrupts routines and takes away from order. It is chaotic. However, Reas advocated for randomness as an array of endless possibilities in his talk. In his eyes, it should be seen as a foundation to build upon, rather than an afterthought. He gives examples of his earlier works, where he strayed away from the chaotic nature of randomness, sticking to defined shapes and positions. However, his philosophy shifted overtime to incorporate it, albeit with rules and restrictions to give it direction. This thought process piqued my curiousity, as at what point do those constraints simply become too much, and prevent random chance from truly acting?

Personally, I found this talk thoughtprovoking, and it encouraged me to also incorporate randomness within my assignment. Reas emphasizes that randomness simulates the unpredictable nature of real life, rather than everything being carefully placed and artificial. As such, seeing as my inspiration was natural beauty, I decided to incorporate random positions within my project, as an ode to what Reas described. I did end up setting boundaries for the randomness to stray within my project, as I felt some control was necessary for aesthetic purposes, though I am interested as to what it may have looked like had I not set these restrictions.

For this week’s assignment, we were asked to create a peice of artwork utilizing loops. I struggled to think of a concept at first, but while walking around the campus, inspiration struck. I saw flowers across the campus moving in the wind. Thus, my assignment takes inspiration from that image.

In my peice, 10 flowers are randomly generated throughout the canvas, with their size and color also being randomized.

I had to watch some tutorials in order to understand the way angles worked in p5.js to get my flowers to spin. Due to this learning curve, I am especially proud of the rotation of the flowers within my peice. It took quite some time for me to get the hang of it, but it made the end result all the more satisfying to accomplish.

function draw() {
  //refreshing the background each time
  background("#9dc183");
  

  //iterating over every item in the flower array
  for (let flower of flowers) {
    push();
    //makes the drawing start at the center of the flower
    translate(flower.x, flower.y);
    //makes the flower spin from the center
    rotate(flower.angle);
    drawFlower(flower.size, flower.color);
    pop();
    flower.angle += spinSpeed;
  }

  //if statement that will call the generate flower function as long as the flower array isnt longer than 10 and will generate every second
  if (flowers.length < maxFlowers && frameCount % 60 == 0) {
    generateFlower();
  }
}

 

Initially I had wanted a more detailed background for my peice, rather than a solid color, however, I struggled with the background flickering every frame. Another thing I think that can be further improved on is the variety of flowers chosen. It would be fun to implement more kinds of flowers, rather than simply just having them in different colors.

The first assignment for Intro to IM asked us to make a self-portrait of ourselves using p5.js. I was really excited to do this assignment, and I enjoyed playing around with the different shapes and colors.

I wanted to create a nice background for my portrait, so I began by making a sunset scene. I used multiple rectangles to simulate the effect of a gradient, and then experimented with the colors to create a cohesive color scheme. I then used circles to simulate clouds and added more rectangles to create a window frame.

However, it soon turned out that making the background was the easy part, as I then had to start making myself.

I started by making the body. I used two shades of gray for the jacket to give my portrait some depth. I then used a similar technique with the shades of blue to create my scarf.

Making the face was objectively the hardest part, as getting the proportions right was very difficult. I ended using the quad() function to create the shape of my glasses, then filled them in with a semi transparent white shape to simulate glass. Although making the face was challenging, it was the most satisfying part, as it was rewarding to see all the aspects come together.

Throughout the assignment, I was struggling when trying to get the x and y-coordinates precisely where I wanted them. In the end, I used console.log to track the coordinates I wanted when I clicked in a specific place. While it was still challenging nonetheless, using this function made it much faster to implement.

Overall, I really enjoyed the process of doing this assignment, as it was very interesting to see the way I could use basic shapes to create something meaningful.