For this work I decided on a stylized and abstract approach. Prior to the making of it I had some failed experiments in p5 that laid the groundwork for my final idea. Some of that included the use of Boolean variables, but I could not envision them with the concept I had in mind, so I just played around with them.

The idea I am trying to convey is a couple that spends their time together at the park, sitting on a bench and I executed it to look like a time lapse. When the cursor goes from left to right the background changes from night to day and the Moon to Sun.

To do this I used a for() loop for the bodies of the two people and put them in two columns, so they do not combine. I used randomness in a few instances, but kept it very controlled, because I wanted to convey the idea of constant movement throughout the hours that does not interfere with the rest of the background. I used two different ways to change the colors of the background and of the celestial body that ultimately lead to the same result: if(mouseX>width/2) and if (mouseX>200) (the canvas is 400, 400).

Here is how my first tries looked before that. I had asked Gemini to help me with the two bodies’ code, but at the end I simplified it in the final product and let myself experiment.

Additionally, at first I kept the noLoop() because the movement was distracting me while working, but since it was a part of the process I decided not to delete it and put it as a note using //.

A code I am particularly proud of is the one I used for the bench. Even though it is not complicated, I felt that it really put my artwork together.

//Bench
  quad(230,262, 350, 262, 380, 300, 190, 300);
 rect(230,200,120,15);
  rect(230,220,120,15);
  rect(230,240,120,15);
  rect (350,300,10,50);
  rect (210,300,10,50);

What I would change in the future is to make smoother transitions like more colors in-between or using blendMode() for a sunset-like background. In addition, I would love to incorporate Boolean variables somewhere appropriately.

How Was This Made:

Gemini was used for my first trial. Also, I watched this video to better grasp the essence of loops.

When I first read that I have to make a self-portrait, I knew that I had to include some distinguishable features of myself. The first few steps were definitely slow-paced as I was still exploring options, revising from the slides and just experimenting with values.

Playing with the 2D primitives gave me a basic understanding of how p5 works and with each step I grew more and more comfortable with the layout, the functions and how everything works. The first few hours consisted of going back constantly to the reference sheet as well as the slide decks, because i wanted to repeat the process until it became familiar enough.

There was a time when i was thinking about what to do for my hair, so I decided it is high time I stopped constantly relying on what the references have to offer me. While putting different numbers in the bracket after rectangle I accidentally added one more than needed. This “happy accident” lead to the formation of a rectangle with rounded edges, which was perfect for hair. Then i added one more and moved them both until I had a dramatic side-part. What really helped me to understand where everything should be placed was visualising the xy-plane. Soon after that I started finding the exact coordinates with print(mouseX + “,” + mouseY);, which is significantly easier. Despite that, I believe it was needed for me to imagine it at first. Through this and simple math, I was able to make my collar symmetrical.

When I had done my face, hair, clothes, it was time for features. I exaggerated my big green eyes and figured a way to do my eyebrows thick, using an arc. I think I was going for a caricature as I knew that the end product will have little to no resemblance to me if it is not for those characteristics. I also used the arc from my eyebrow and inverted it to create my mouth. With other simple shapes I added depth.

What I am most proud of from this code is the flower rain, which while simple, felt like a big accomplishment.

textSize(45);
  text("🌺",x-200,x+100);
  text("🌼",y+70,z-250);
  text("🌷",y,z);
  text("🌸",x,x);

 

I kept combining things I saw in the reference sheet and tried to think of a way to make it work. I now see the potential and if next time I decide on a similar project, I would definitely approach it differently. I would do more flowers and would add randomness so it does not look so “stiff”.

No AI was used in the making of this.

How Was This Made:

https://p5js.org/reference/

https://p5js.org/tutorials/get-started/

Concept:

For this second assignment we were instructed to code an artwork using the concepts we have learned in class this second week. Initially, my concept was inspired by the atmosphere of a disco dance party where the grid of squares represent a disco ball.

 

However, when I added the diamond shape to appear based on the mouse position to represent the sparkles when light reflects off it, it reminded me of a different idea. Seeing the grid of squares, the colors changing, and an object moving using my mouse gave me a sense of deja vu and reminded me of when I used to play Club Penguin. Specifically, the night club dance floor. So, I pulled up a reference image to help me tweak a few things like changing the color scheme to match it and changing the diamond shape to appear into the closest penguin I could code that looked like a Club Penguin.

I liked this idea and direction because it allows my project to be interpreted in multiple ways and combines both my initial idea and my current one. When the mouse is not in use, it can still be portrayed as anything within the realm of dance, parties, and disco based on the perception of the viewer. This is why I kept the sizes of the square to be random even though it is static in the club penguin dance floor, I felt like it made it visually dynamic and added energy like how a real, lively dance floor is and also how disco ball patterns rapidly change as though it is spinning fast and reflecting the different colorful lights of the vibrant environment usually in parties.

Highlighted Code:

// random color + size 4 the rect/tiles
  let color = random(7);
  let size = random(35, 40);
      
      if (color < 1) {
        fill("#ffffff");
      } else if (color < 2) {
        fill("#d970ff");
      } else if (color < 3) {
        fill("#ff2e1f");
      } else if (color < 4) {
        fill("#3ef226");
      } else if (color < 5) {
        fill("#f4f830");
      } else if (color < 6) {
        fill("#3ef9ca");
      } else {
        fill("#ee9f5d");
      }

      rect(x, y, size, size);

This code assigns color a random number between 0-7 and size a random number between 35-40 and based on that it fills the rect() a certain color and width/height. I am particularly proud of it because I had previously known about the random generator code I just had to see how it worked in p5js as my knowledge was from python. Knowing now that I can set up random() to be in between a certain amount of numbers by setting the maximum amount within the parameter made it pretty easy to code the rest with simple if/elseif/else statements. So, if the random() let color to be 2 then the rect() would be filled with the color red because (color < 3) would be finally true. I liked that I was independently applying something I had learned from before rather than just following an example and seeing my vision come to life.

How This Was Made?

To create the grid of squares I used the help of Week 2.2’s classwork example for the nested loop and I just played around with the x and y values to get the squares as close as I want them to be. Then before the rect() executes, I had the random size and color if/else statements that I explained in the Highlighted Code section to fill it a random color and give it a random width and height. For the penguin part, in order to make it appear based on mouse position and within a certain part of the canvas, I used Week 2.1’s example of the && logical operators. The mouseX and mouseY part makes sure that the mouse is within the boundaries of each grid square and I used the same number (42) that I used in the nested loop in order to have matching spacing. This is what makes the penguin appear right above each tile that the mouse is hovering over. For the penguin part, It was just multiple ellipses stretched out in different widths and heights based on the body part. It took a bit as I had to keep going back and forth checking with the mouse then adjusting the x, y values but it worked out in the end.

Overall, I used the Club Penguin reference image, the random() p5js reference, Week 2.1 examples, and Week 2.2 examples.

Reflection:

I am happy with how my artwork turned out because the whole development was fun to work with. I started with a disco ball-inspired art then ended up with a mix of both that and a Club Penguin dance floor. My previous work was SpongeBob SquarePants and I really enjoy the assignments when I make them more personalized to my likings, yet still abiding by the instructions. The final artwork is more than just a visual idea, but a nostalgic memory to I am sure many people.

For future developments, I have a couple of suggestions for myself if I had more time and that would be maybe to add multiple penguins in the dance floor. I could have them placed on a certain grid when the mouse is pressed and have them change colors like how the real Club Penguin actually is. I could also have the tiles change colors when the penguin is hovering over them kind of like the penguin (user) is activating the dance floor. It would make the final piece more interactive and playful for the user, yet still preserving the main concept of the artwork.

Before watching the video, I did not like the idea of disorder or randomness, as I felt like it meant going out of routine. I feel more comfortable with the expected rather than the unexpected. After hearing Casey Reas’s thoughts about how it can be used as a tool to create something that the artist may not have expected, I am more open to it and think that it can create unique outputs. It also made me realize that if I were not open to it, then I would not have been able to code my second assignment. My second assignment used the random() code to generate the different colors of the dance floor. In [27:03] he talks about Lia’s random 4×4 generative design and how the increase in deviations of pixels transitioned the design from order to chaos. This made me realize that I answered the first question, which is that I have already implemented that chaos part in my second assignment, where I have the tiles/rect() randomly change between 35 and 40, which made it visually dynamic and added energy like how a real, lively dance floor would. For the second question, I think that a balance between randomness and complete control is the best because there should be structure, but having randomness makes the final design look more unique and interesting. So, for my Assignment 2 example, if the frameRate() was high, then the dance floor tiles would be too chaotic to the point that they would not have even looked like a dance floor. Thus, having a good balance between chaos and control is best as long as the meaning of what you are trying to depict is still understood.

Even before watching Casey Reas’ talk, I tried using randomness in my previous assignment without thinking deeply about the balance between randomness and control. I programmed the “YOU DIED” screen to have a chance of appearing after a random amount of time between 15 and 20 seconds. The program could decide when the change happened and whether it happened, but still the outcome was controlled, albeit slightly, by me. Looking back at it, it was not completely random. I created the rules first then allowed the computer to make smaller decisions within them. I liked that because the unexpected change made my work feel more alive and a bit more personal, since it was a game reference I enjoyed including.

I’m planning to develop this further with week two’s production assignment, in which I’ll create a glitched screen using loops. I could randomize the positions, lengths, colors or timing of the glitches so the screen does not produce exactly the same image each time. However, I would still control the color range and general layout. For me, the optimum balance is when I can recognize my original idea in every result, but I still can’t predict what the result would be. Complete control might make the work feel too repetitive, while total randomness could make the glitches look meaningless. What I’m interested in is something in the middle where I design the system, but the system can still surprise me. It also makes me wonder whether deciding what the computer is allowed to change is more important than deciding exactly where everything appears.

Concept

For this assignment, I wanted to create something that looked like a glitched screen using simple shapes and randomness. I started with the idea of having a grid of shapes that would constantly change, with their colors, sizes and the speed of the screen changing randomly.

At first, the colors were completely random, but I felt like the result was too chaotic and wasn’t very visually appealing, at least to me. I decided to limit the colors to a smaller palette inspired by two images I liked. I mainly took inspiration from the deep blues in one image and the warm yellow and gold colors in the other.

 

color reference 1: Illustration from Yuvi’s Longing. I liked the warm gold and yellow lighting in this image.

 

Color reference 2:  cyberpunk cityscape with darker and futuristic colors.

 

Code I Like

//move down the screen
for (let y = 25; y < height; y += 50) {
  //move across the screen
  for (let x = 25; x < width; x += 50) {
    
    if (random() < 0.5) {
      rect(x, y, ShapeWidth, ShapeHeight);
    } else {
      ellipse(x, y, ShapeWidth, ShapeHeight);
    }
  }
}

The part I like most is this one, where I used two loops, mainly for how simple it is. The first loop moves down the canvas while the second moves across.

What I liked more was what I could do inside those loops. I was able to randomly decide what shape appears, and both its color and size. Even though the code itself is quite short and simple, it creates something that constantly changes and looks different every time.

How Was This Made?

I started by making a simple grid using two for() loops and then placed a shape at each position. I used an if statement with random() to give each position a 50% chance of being a rectangle or ellipse.

After getting the basic grid working, I started adding randomness to different parts of it. The width and height of each shape are randomized. I also randomized frame rate so the screen changes at an inconsistent speed, which helped give it the glitched feeling I wanted.

Originally, I used completely random RGB values for the colors, but I wasn’t happy with how it looked. I created two arrays containing a smaller selection of colors instead, one for the shapes and another for the dark background. The program still chooses the colors randomly, but only from the colors I selected.

Towards the end, I removed the outlines, made the shapes slightly transparent and allowed them to overlap. I also used drawingContext.shadowColor and drawingContext.shadowBlur to add a warm glow around the shapes. I kept the glow color the same but randomized the amount of blur so that some shapes glow more than others.

Reflection

For this assignment, I liked seeing how much could be done with something as simple as loops and basic shapes. The first version worked, but it mostly looked like random colorful shapes changing on the screen. I wasn’t completely happy with it even though it technically did what I wanted.

Most of the changes I made afterwards were actually quite small. Limiting the colors, increasing the size of the shapes, removing their outlines, adding transparency and eventually adding the glow changed the way it looked without making the code much more complicated.

I also liked having some control over the randomness this time. Instead of allowing the program to choose any possible color, I gave it a smaller palette and let it choose randomly from that. The final result is still unpredictable and changes constantly, but I have more control over what those random results can look like.

Some improvements or changes I could do are adding more shapes and have different patterns instead of only two. I could also have different kinds of effects such as having only certain parts of the screen change while others don’t. I feel like doing that would make the work feel more glitched compared to how it is at the moment.

Reflection 1 – Randomness

Randomness. Games and Movement.

These were honestly the first thigns that came to my mind while watching that video. I kept thinking about games like Minecraft, because so much of what happens in the game feels like really random even though I know it isnt. You can be walking around doing absoluely nothing andthen a zombie turns around or finds you somehow and rushes at you, a chicken will be jumping around you too and a sheep will be walking by you or a creeper walking by you at literally the worst possible time. But non eof those things are controlled by someone else, its not all fixed, its completely random but its in these like set rules.

I think this is what I found most interesting, before this I thought about making something with code I kind of always had to imagine that I had to control everything, where something goes, what it looks like, when it moves, so like its perfect and that I know what it should do.

But randomness changes that, and minecraft made me think about that because the world feels really alive without the player doing anything. Animals wander around, enemies appear, things are moving when I am doing absolutely nothing. I think thats what changed my perspective, because randomness doesnt mean there arent rules which is how I thought about it before. But the rules are probably what make randomness interesting in the very first place.

But yeah, thats about it really.

Loop Assignment

Concept:

So for this assignment I kind of wanted to go with something with like an early computer generated vibe kind of like the pictures you provided us instead of trying to make an object or character through loops.

So essentially this is a grid that is made out of either circles or squares depending on where your mouse is, the user controls what happens to the grid using the mouse itself. Moving it left changes the RGB selection so you change the color itself, moving it up and down also changes another part of the color completely and the mouse even affects how large the shapes become.

What I liked about this idea is that the structure itself stayed the same but the actual image itself never looks the same because random was used for the size of every shape so even if its in the same place it’ll constantly keep changing its never the same thing.

Highlighted Code:

One of the parts I am most proud of is the nested loops itself:

for (let x = 25; x < width; x += 50) {
  for (let y = 25; y < height; y += 50) {

Because although we did learn this in class, I couldn’t wrap my head around it properly the idea of a nested loop how it worked and how it kept repeating with eachother so I had to overcome that hurdle.

I started thinking of the outside loop as like picking one column andthen the inside loop going all the way down the column and that once it finished the outside loop just goes over by fifty andthen it starts over and over again. For some reason, I couldn’t wrap my head around that before but now I have.

The other part I like was this

let s = random(8, mouseX / 10 + 10);

This controlled the size of every shape, so when the mouse was farther toward the right side of the screen the shapes become much larger. At the same time I used random as well so not every shape became the exact same size, each one has its own value.

And I think that was more interesting than just making every shape the same and grow equally and it just looks nice.

Reflection:

I think honestly the main thing I got from this was how much you can actually do with loops without even writing that much although writing even that amount of code took me way too long than it should have to figure out what I needed to do.

If I tried to make this grid manually, and I did try, I would have had to write dozens of ellipses and rectangles and have to get the position for every single one the computer is doing all the work for me.

As I said in my previous sections as I well I had a tough time wrapping my head around nested loops itself but then I managed to get the hang of it and figure it out. I think the reason I didnt understand it was like there were two variables changing at the same time, etc.

I also really like experimenting with random because like everytime you looked back at the art it was different like everytime you saw it, it was in a different size and was jsut overall different in someway. And my favorite part about it is the ability for the user itself to interact with them because they can actually change the color and the size of the shapes themselves.

I think if I wanted to keep working on it in the future, I think I would just add like more shapes and more like colors and make it so the spacing could maybe change between them depending on the position of the mouse itself.

Before watching the video, I had never seen any of the artworks shown in it, in fact, I basically had zero idea that such a community of artists existed. The only thing I knew was the example he gave of abstract painting with Piet Mondrian, someone whose work I personally do not like or enjoy at all. But when he began showing the art made with random algorithms I was amazed, it truly looks fascinating. I can definitely understand someone’s love for this type of art, whether they create or they consume it. I cannot really put into words how interesting it is to me that a machine is able to produce such media with relatively simple codes. The nonsensical aspect of some of them gives me a strange feeling, I think the best way I could describe it is a weird mixture of discomfort (not necessarily in a bad way) and curiosity.

Another thing that really interested me was the musical piece he briefly showed. I am VERY into music, I listen to most kinds and yet, those short ten seconds of “randomly” generated music genuinely sounded like nothing I have heard before. It actually makes me wonder how randomness can be implemented into non-random music, or perhaps it has already been produced and I just have not heard of it yet? I will for sure look more into that because it even makes me want to try it myself, although that is probably way easier said than done. But still, the video was extremely eye opening for me and I look forward to keep learning about this and many other interesting topics in the nearby future.

Concept

I was inspired by the scratch pads that I loved drawing on as a child, the hidden gradient background is what influences the use of changing flashing colors. I also wanted to bring elements of childhood by using simple shapes such as stars and circles.

Reference

Highlighted code

//changing colors
background(paletteLerp([
  ['blue', 0.3],
  ['red', 0.6],
  ['yellow', 0.4]
], millis() / 1000 % 1));

I was determined to use the changing colors effect rather than a still color gradient, therefore I used the p5.js reference to learn how to use the paletteLerp() function to rapidly change colors. It was quite difficult to use at first however with lots of trial and error I eventually achieved the result I wanted.

 

How this was made

Starting off with the main element, the stars, I was able to use the for() loop tool successfully to join the circles in a certain way to create the stars pattern. I then moved on to learning how to use the paletteLerp() function to change the color of my background; I was also able to pick the duration of each color and the speed. For the finishing touch, I wanted to further challenge myself by adding smaller circles by combining the nested loop and click feature, this way I was able to add another layer of interactivity to my work. I referred to the p5.js reference to learn how to create the star shape and use the click response.

Reflection

Overall, I am proud of what I have achieved. I was able to play around with the nested loop to create shapes within shapes. In the future, I would like to also experiment with randomness, and how randomness can be used to create slight deviations which gives some sort of a shaking effect.

 

 

Reading Reflection

text