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

Concept

As I scrolled through the Computer Graphics and Art magazine one image stood out right away. The geometric patterns looked familiar. They reminded me of the rugs I had seen during my trip to Morocco. The repeated diamonds, the shapes, all of it reminded me exactly of that. That moment became the starting point for my project. I wanted to bring the clean repeated designs of early computer art with the rich patterns and colors of Moroccan rugs. Making it feel random but still clean and organized.

*from COMPUTER_GRAPHICS_AND_ART_Aug1977

*Image of a Moroccan rug

Final Sketch

Code I’m Proud Of

One part of my code that I am particularly proud of is using the mouse position to change between two different color palettes:

// LEFT SIDE = COOL COLORS
if (mouseX < width / 2) {
  background(180, 220, 245); // light blue

  outerColor = color(40, 70, 160);   // blue
  innerColor = color(100, 180, 220); // cyan
  diamondColor = color(120, 90, 200); // purple
}

// RIGHT SIDE = WARM COLORS
else {
  background(245, 210, 160); // warm beige

  outerColor = color(180, 50, 40);   // red
  innerColor = color(240, 120, 60);  // orange
  diamondColor = color(245, 180, 60); // yellow
}

I specifically liked this part of my code as it makes my artwork interactive but without changing the structure of the design. mouseX tells the progress where the mouse is horizontally. Width / 2 represents the middle of the canvas, so if the mouse it on the left side of the canvas which is behind the middle then the cool colors appear but if its ‘else’ which is basically after the middle of the canvas it will show the warm colors.

How Was This Made?

I used rect() to build the borders and small parts of diamond patterns then I used for() loops to repeat the shapes instead of putting each one manually. I also created my own diamond() function so I could reuse the same shape in different places, which was the diamond shape diagonally across. For the interactive part I used mouseX with an if/else statement to split the canvas into two sides. When the mouse is on the left the sketch changes to cool colors and when the mouse moves to the right the sketch changes, to warm colors.

Reflection and Ideas for Future Work

I really enjoyed how this project let me bring together something I saw while I was traveling in Morocco with computer generated art. It made me understand that even though these two things are from different places they can still have similar ideas, like repetition, geometry, symmetry and pattern. I also found out that simple shapes can become much more interesting when they are repeated and arranged in a certain way.

If I kept working on this project I would add movement and randomness to the shapes. I would like some of the diamonds or small rectangles to move or change a little. Adding some sort of movement could elevate it more and make it even more interesting as it would feel like it’s alive but without getting too messy. As well as if I were to add different geometric patters or more color combinations that remind me of Moroccan rugs.

Resources:

COMPUTER_GRAPHICS_AND_ART_Aug1977

YouTube videos: Patt Vira-for loop creative coding with p5.js, The Coding Train-2.1: Variables in p5.js (mouseX, mouseY) – p5.js Tutorial

My concept:

In November 1979, proggressive rock band Pink Floyd would release one of its most iconic albums: “The Wall”. Being one of the most popular concept albums to date, my sketch is the (attempt of the) cover of said album.

How this was made:

I used the for() loop for the wall background, and in order to give it that distinct brick pattern I simply copied the code and added a “-50” for each valuable in the pattern. At first I used addition for this, but that left several squares empty, so by simply changing it to a substraction it worked (I also had to add a +50 to the height when establishing the variable).
For the letters, I chose to skip the band’s name (Pink Floyd) in my sketch for two main reasons. The first one being that I am not very good at doing letters (as you can probably tell) and secondly, I didn’t have a lot of time. But for the album’s title (The Wall), I used triangles and rectangles with smooth edges to (attempt) creating the words.

Code I’m proud of:

  //Wall
   fill("#ffffff")
 strokeWeight(4);
 rect(y,0,x,50,);
rect(y-50,50,x-50,50);
 rect(y,100,x,50);
rect(y-50,150,x-50,50);
 rect(y,200,x,50);
rect(y-50,250,x-50,50);
 rect(y,300,x,50);
rect(y-50,350,x-50,50);
 rect(y,400,x,50);
rect(y-50,450,x-50,50);
 rect(y,500,x,50);
rect(y-50,550,x-50,50);
 rect(y,600,x,50);

That’s the code for the brick wall pattern I talked about previously.

What I can improve for next time:

I think once again, the use of a wider variety of shapes. I think that would probably lead to better sketches.

Reference image:

My concept:

For this assignment, I made an interactive starfield. The idea was to have a field of stars scattered across the canvas that glow individually when the mouse touches them and I used loops to generate and animate the stars and a conditional to control the glow effect. I was inspired by just looking at the night sky at the Al Quaa Milky Way Spot.

How I made it:

I started by creating an empty array called stars to hold each star as an object. Then in setup I used a for loop to generate 125 stars, giving each one a random x position y position and size and then pushing that data into the array as an object. After that in draw I used another for loop to go through every star in the array each frame to check its distance from the mouse using distance function and used an if/else conditional to decide whether that star should glow bigger and brighter or stay as a small dim dot.

Code highlights:

for (let i = 0; i < stars.length; i++) {
    let s = stars[i]; //named it as s for convenience

    //checking distance from mouse to this star
    let d = dist(mouseX, mouseY, s.x, s.y);

    if (d < 60) {
      //close to mouse so glows bigger and brighter
      fill(255, 255, 200);
      noStroke();
      ellipse(s.x, s.y, s.size * 3, s.size * 3);
    } else {
      //normal dim star
      fill(255);
      noStroke();
      ellipse(s.x, s.y, s.size, s.size);
    }
  }

This part is what I like the most. Since the loop runs through every star every single frame, each one is constantly rechecking its own distance from the mouse which is what makes the glow follow the cursor smoothly and only affect stars that are actually close to it.

Embedded Sketch:

Reflection and Ideas:

I really liked doing this assignment but if I had to change something, I might have added more details to the stars and like a shape to it. I could have also tried to add a moving feature that causes the stars to maybe follow or repel away from the mouse. I was inspired by the video to make the stars random positions each time. I am happy with how it looks and maybe could work on it more in the future to make it even better!!

References:

https://p5js.org/reference/p5/loop/, https://p5js.org/reference/p5/for/, https://p5js.org/reference/p5/if/

 

Concept:

When I began brainstorming for the assignment, I first thought of words like “life”, “loop”, and “infinity”. So I really wanted to do something that represents the repetition of daily life in the short run but also the uniqueness in our path in the long run.

To me, some days just seem like a loop that passes by in the blink of an eye, leaving me with nothing. However, that’s not true and I’m just too accustomed to life in the short run. As I grew, I realized that many of the valuable things I acquired in this stage of my life are due to those “looping” days I found meaningless before, thus I wanted to create an artwork that would display different “courses of life”, where each shape represents someone. I also incorporated many elements of randomness to reflect on what I believe to be life—unknown starting line, unknown direction, and unknown endings.

Highlight of code I’m proud of:

I’m particularly proud of this section where I struggled a lot before finally figuring out. After I figured out this part, all the rest were downhill.

//rectangle
  for(let rep = 0; rep < 2; rep+=1){
    fill('#2fb63f')
    noStroke();
    rect(x1,y1,random(1,50), random(1,50));
    x1+=random(1,10);
    y1+=random(1,10);
}

The reason I struggled so much at first is because I couldn’t wrap my head around the fact that draw() function is in of itself a loop, which is why my for loop never “ended”, when, in fact, it did, but the draw function just kept on calling it, creating “nonstop” loops. After I realized what was happening, I stopped being stubborn and played along: using the for loop as a manipulation for how many shapes I want to draw per call, indirectly manipulating the speed for each shape’s path, which again plays into the idea of “life”.

Embedded sketch

 

How Was This Made:

I started the work by brainstorming a general idea I wanted my artwork to convey, which was a display of different “life” paths in this case. After I settled the shapes and concepts, I began experimenting with the loops and values.

At first, I wasn’t aware of the role that the draw() function played in “continuing” the loops I wrote and kept on triggering infinite loops. However, as I proceeded with my experiments—trying all the ways that “might” work–I finally realized there wasn’t something I could change like in other computer programs I’ve done before, because it was just how draw() worked. Then I began to think how I could put for/while loops in this “loop”, and ended up observing the shapes in different frame rates to see when my loop “stops”, which led me to realize that the condition I put in for loops determines how many shapes are drawn in each frame.

I then decided I could use the for loop as a way of manipulating the speed and direction of each shape’s path and let draw to continue the looping of the for loop.

I also heavily relied on the p5js reference library during the process.

Reflection and future improvements:

I wish I could rest better before engaging in experiments and work because I think a big part of my struggle in this assignment stemmed from mental fatigue which made me unable to think clearly.

 

Creative Reading Response:

Two things I found really interesting in this video were the different inspirations that led to many of the art works, as well as the part in 29:40 where Casey Rea talks about how he would “coax” the program of randomness to display effects he liked. Both cases expanded my perspective on both the concept of randomness and “art” in general. An example of the first case was when Casey mentioned how one of his works was inspired by cell communication, which was really fascinating to me in the sense that I never knew “communications” can manifest as visual trails, let alone as colors and artworks. This made me reflect on my perception of the world and how shallow I am in my knowledge of art. Then Casey Rea displayed another work of his towards the end of the video and mentioned how he’d slightly manipulate the code so that the randomness remains but also displays different effects he wanted. This made me question what true randomness is. Conventional definition of randomness is something unexpected, uncontrolled, and obeying “chance”, however in this case, Casey Rea is saying he can “control” and “expect” the outcomes while allowing the smaller component of the work maintain “randomness”. Is the mix of randomness in micro level and control on the macro level really considered randomness? Or is randomness always entirely “independent”? Or are we still able to call an art work a work of “chance” if it’s a mix of both? I think I will be holding these questions while I continue to explore art.

My Concept

For this assignment, I decided to come up with something relatively simple that incorporates repetition and movement into one piece. The idea is to have a circle moving left and right while multiple lines are attached to it from above, starting from different points along the top of the canvas. As the circle moves, the lines move slightly as well, making them appear as though they are being pulled by the circle. I also wanted the background to respond to the movement, so I used different shades that change as the circle moves across the canvas.

Code Im Proud Of

  //multiple lines
  for (let lineX = 20; lineX < 400; lineX = lineX + 30) {

    //makes the lines move with the circle
    let pull = (x - 200) / 8

    //draws the line from the top of the circle
    line(lineX + pull, 0, x, 300)
}

This is a section of code that I am really proud of because this is where I was able to take the idea of loops that we learned in class and actually use it in my own work. At first, I was a little confused about how I could use the loop together with the movement of the circle, but once I worked through it, it started to make a lot more sense. I used the loop to repeat the lines across the canvas instead of having to write each line individually. I started the first line at 20 and then increased it by 30 every time the loop repeated, which created the space between each line. I then used the pull variable to slightly move the starting point of the lines depending on where the circle was. Since all of the lines end at the position of the circle, they move along with it as the circle moves from side to side. I think this part helped me understand the loop much better because I could actually see what it was doing in my own piece.

How This Was Made

I created this piece using p5. While working on the sketch, I referred back to my class notes and the presentation, as well as the p5 references whenever I needed some extra help understanding how to apply these concepts to my code.

References:

https://p5js.org/reference/p5/loop/

https://p5js.org/reference/p5/for/

https://p5js.org/reference/p5/if/

Reflection

This assignment allowed me to improve my skills in writing loops and if statements, which were a bit difficult for me to apply and understand before working on this piece. At the beginning, I struggled a bit with figuring out how everything would fit together and how the different parts of the code would work with each other, but as I kept working on the assignment, it became much easier for me to understand. The if statements also started making more sense once I saw how they influenced the movement of the circle and the changes in the background. In the future, I would like to make this piece more complicated as I learn new things in p5 and improve my coding skills. I believe that I could do much more with the same idea, especially with the movement of the circle and the way the lines interact with it.

Before watching the talk, I thought randomness in art mostly meant that the artist was giving up control. The talk changed my thought because his examples showed that chance can operate within rules chosen by the artist. I found Richter’s idea of “planned” chance especially convincing. Reas’ own projects also support this because he sets limits for features such as position, size, and direction, while still allowing unexpected results. I think Reas is slightly biased toward randomness because it has been important in his own practice for many years, however, he also admits that he is skeptical of this kind of work, so his argument does not feel completely one-sided.

In my own work, I plan to use randomness for the positions or colors of repeated shapes. I would still control the canvas size, available colors, shape sizes, and the area where objects can appear. For me, the best balance would be around 25% randomness and 75% control. Total randomness might produce something confusing, while complete control could make every result predictable. A smaller amount of randomness could make each version different without losing my original idea. Therefore, the talk made me wonder how much randomness an artist should use before the artwork feels out of control.

Okay so last semester I took Live Coding with Professor Aaron and this whole talk kind of took me back to that. Every time I would throw in a random() somewhere in Hydra or Tidal I always told myself I was letting go of control but honestly I was not I was just picking a range of outcomes I was fine with and calling it random. Watching Reas go from Duchamp literally dropping strings on the floor to writing actual random number generators kind of made that connection that it is the same move, just with more math. He is not really doing something new but doing the same “let something outside me cause this” thing people have been doing since like 1916.

The note that stuck with me the most was the “ordered grid with deviation of pixels” thing because that is literally what I was chasing in class without knowing how to say it. If the pattern is too locked in it just looks dead and boring, but if it is too random it just looks like noise and does not feel like anything. The good zone is somewhere in between where you can tell there is a rule happening but it still surprises you sometimes. That is basically what his 15-image series is doing: same rule every time but different result.

So when I think where the balance is between total randomness and total control, I do not really think it is a 50/50 thing. I think what I actually want is like a really good system with one small deviation in it on purpose. Full control means no surprises, which gets boring fast. Full randomness means no me in it anymore, it is just noise doing its own thing. The deviation in between is where it actually feels like art to me.

Before finishing the video, I genuinely thought that randomness in code is something that simply makes the outcome unpredictable. I didn’t think of randomness as something that could be controlled by the artist, as for the name, random. But throughout watching the video, the idea that stood out to me the most was the relationship between rules and chance. In the middle of the video the lecturer included a quote. “Above all, it’s never a blind chance, it’s a chance that is always planned but always surprising.” I found this saying very interesting because it almost sounds like a contradiction at first. In the beginning I didn’t really get it because how can something planned be considered something with chance. However as the video went on I started to understand that an artist can plan the boundaries without actually planning the exact outcome. Even when a computer is producing different results, the artist is still the person who creates the system and decides what is allowed and what is not allowed.

This concept started to really make sense to me because I feel like it really connected with what I am doing in class the past few weeks. In my work I would want to incorporate randomness through things like colors, sizes, positions, or patterns. I personally would still not give up complete control because I would still have an idea of what I want my artwork to look like, however adding randomness can balance out into something more artistic than it seems. The video made me realise that randomness does not necessarily mean losing control. Instead I can control the rules while allowing the computer to surprise me with what happens within them. Overall, this video made me feel a sense of spontanousness with a balance of structure. All the examples given in the video really inspired me and opened my eyes to new forms of code and graphic designs.  

My concept: 

For this assignment, I wanted to create a simple yet impressive work of art. In order to make it visually interesting, I decided to emphasize the geometric patterns using different colors and shapes. I got inspired by a graphic design I found while searching for magazines. The reason why it stood out to me is because of how the simplicity of shapes created a complex looking outcome. I also incorporated what we learned in class, including loops, the circleSize pulses, and if/else statements. I decided to add the pulse effect to make my art work feel less flat. An interactive element was also used, where the user could click the screen to change the theme of colors. There are 4 different color themes, after it goes through all 4, it goes back to repeat.

Highlight of my code:

I’d like to say my favorite part of my code has to be the interactive element. Every time you click, the theme number increases and the colors of the artwork change. The reason why I’m proud of this specific part of my code is mainly because I got to incorporate something I learned in high school into my work. It’s a pretty simple code, yet it led to the most creative part of my project. I numbered every shape, and depending on how many times you click, decides what color theme is picked. Because I didn’t want to make the code confusing and overwhelming with a huge list of colors, I made some shapes set as a permanent color. I filled the half circles and a rectangle to a beige color to somehow still have a link or unity to all the themes.

// ORIGINAL COLORS
  if (theme == 0) {
    color1 = "#f45132";
    color2 = "#ffca28";
    color3 = "#0781b7";
    color4 = "#202236";
  }

  // PURPLE COLORS
  if (theme == 1) {
    color1 = "#74a7fe";
    color2 = "#874efe";
    color3 = "#b18cfe";
    color4 = "#7b219f";
  }

  // BURGUNDY COLORS
  if (theme == 2) {
    color1 = "#5c0700";
    color2 = "#791a3e";
    color3 = "#9a244f";
    color4 = "#00364a";
  }

  // B&W COLORS
  if (theme == 3) {
    color1 = "#d6d6d6";
    color2 = "#7a7a7a";
    color3 = "#444444";
    color4 = "#232323";
  }

function mousePressed() {
  theme = theme + 1;

  if (theme > 3) {
    theme = 0;
  }
}

 

Embedded sketch:

How was this made:

I started off my code by dividing the screen into 4 rows. I started creating my shapes, alternating between rectangles and ellipses, depending on which shape I want to be overlapped. When I decide to add the pulsing effect on the ellipse, I add the circleSize code into the coordinates. When it came to the third row, i wanted to add repeated lines. I thought that was the perfect time to practice my loop code. Instead of coding every line individually, i only had to coordinate the first line, and duplicate the rest. It moved 10 units to the right until I got all my lines in order. When it came to the clicking to switch the theme part, I had to google how to do. Fortunately, the first like I found was the reference page teaching me how to use mousePressed. https://p5js.org/reference/p5/mousePressed/ And of course, the whole inspiration to my art was an abstract patterned magazine design that immediately caught my eye. I tried my best to match the colors as well. https://www.dreamstime.com/bauhaus-seamless-pattern-abstract-square-tiles-circle-triangle-retro-print-minimal-style-geometric-figure-vector-image217690822 After some advice from my professor, I later added another loop to create the rectangles in the background. Instead of coding each rectangle individually, the loop automatically moves 100 pixels across and down the canvas, making my code shorter and more efficient.

 

Reflection:

I really enjoyed this assignment but if I had to change something, it  might be to change the shapes and experiment a bit more. I would decrease the size of the shapes in order to make it look more pixelated, and give it an old computer effect. I would also try to add a new moving effect that doesn’t require any input from the user. Like moving shapes or changing colors. After watching the video as well, I would’ve liked to incorporate more randomness. Overall, I’m very proud of my work and use of class material. I’m happy with how interesting it is to look at and how much effort i put in order for that to happen.