function setup() {
  createCanvas(600, 600);
  background(30);

  // Star outline via circles
  fill(255); 
  noStroke();

  for(let x = 50; x < 600; x = x + 80){
    for(let y = 50; y < 600; y = y + 80){
      circle (x, y, 15);
    }
  }
  // Moon in the center
  fill(255);
  circle(300, 300, 120);
}

Due to barely being familiar with loops within coding, I had to somehow remind myself of what a loop is like via analyzing the reference sheet from the coding website. Once I understood a little bit of what it was like, this is when I explained to myself that perhaps the artwork I should at least try making with this loop knowledge is an artwork that must feel kind of… organized? But in a modern fashion of course. Not just that but also… an artwork that resembles something that is in relation to what I myself tend to adore very much. Eventually, I’ve settled in with the concept of creating this artwork where the main stars are well… literal mini stars, along with the addition of the moon somewhere in the center. The reason is because of how this is based on the fact that as a young adult, I kind of identify as a night-owl, or someone who seems to like the nighttime. Thus, i just wish to pay a mini tribute to this oldie but a goodie trait of mine via this artwork.

What i’ve done is basically sent the background to a low number that has the background be as dark as the night. Then I had to set up the endoskeleton of the circle stars, starting with making sure they are filled through a number that’ll color them white; then this is where the loops come into play. With the loops, this is where I had to look back at the notes from the previous class, in order to get an idea of how they should be set up at least. Remember that this is all for the sake of trying to figure out how to have each circle star lined up in rows that’ll set themselves up to be a modernized version of the night sky. Most importantly, I had to make sure that the parameters for each circle star in a row/column would be centralized in their rightful spots. Lastly, I had to bring the moon to life via simply creating a bigger circle in the middle that, from my head, would make itself look like the big boss of the night alongside his star minions.

One more thing to mention is that before I could see if my code was right, I did have to check in with Ai to see if my code was indeed correct or if changes were necessary to be made. Sure enough, some of my code was on the right track, but some changes were requested to be made to ensure functionality at its finest. Based on these changes that were successfully implemented, it simply convinced me to try familiarizing myself more with the workings of proper repeat methods, such as the loop, so that if I were to ever need acts of repeat shapes/colors within my works, the loop() command would indeed assist me otherwise.

Concept:

I wanted to play around with randomness for this assignment (hence the many ‘random()’ in my code). This idea was inspired by Casey Reas’ talk on the balance between chance and order. So, I started to experiment with lines (including circles and squares) and leaving their placements, sizes, and colors to fate. At first, it felt too random. I did not have a particular direction or way that I wanted my artwork to look like. This was until… I came across the NYUAD “Crossroads Ensemble” poster near an elevator while going to D2.

This very much inspired me, not only because it reminded me of jazz, but also because it allowed my artistic aspirations to coexist with the computer’s decisions (which I guided). Ultimately, I made an artwork whose composition changes as the cursor is moved around.

Embedded Sketch:

Process:

The process of getting the right forms and shapes was tedious, based on trial and error. The p5 directory was my ultimate ally (mainly because I spent days scrolling through it), which allowed me to use new commands like ‘shuffle’ or even ‘floor’.  I also referred to the code of some students who had already posted on the IM website. For instance, to get the radiating thin lines correct, I referred to Tengis Temuulen’s (Link) ‘Optical Illusion’ to understand ‘for’ loops and the use of ‘cos’ in radial shapes. Once I made the first composition, I modified the code to allow for randomness. I tried my best to incorporate loops (for and while) into my work since we have been working on these during this week in class. Here is a snippet of code I am really proud of:

// radiating thin lines
function drawThinLines(anchorX, anchorY, palette) {
  let centerX = anchorX + random(-100, 100);
  let centerY = anchorY + random(-100, 100);
  let lineCount = floor(random(18, 34));
  let startAngle = random(TWO_PI);
  let spreadAngle = random(PI * 0.6, TWO_PI);
  let ThinLinesColor = color(random(palette));

  let i = 0;
  while (i < lineCount) {
    let angle = startAngle + (i / lineCount) * spreadAngle;
    let lineLength = random(60, 180);
    let endX = centerX + cos(angle) * lineLength;
    let endY = centerY + sin(angle) * lineLength;
    stroke(
      red(ThinLinesColor),
      green(ThinLinesColor),
      blue(ThinLinesColor),
      random(90, 200)
    );
    strokeWeight(random(0.4, 1.6));
    line(centerX, centerY, endX, endY);
    i++;
  }
}

Reflections:

I am proud of what I have come up with in only a week. I believe I have finally grasped how to effectively use loops and arrays, which will be helpful as I progress into the course. For this particular artwork, one thing I would like to improve on is modifying how quickly the composition is changing. At the moment, I feel it is too quick for me to process the changes in composition. I am having to move the cursor very slowly across the screen as a result. I have tried to change the frame rate, but it did not make a difference. This is something I would love some feedback on.

Concept

After browsing tons of references and inspiration, I decided to make something with dimensions that feels deep and interesting to look at. So I decided to work with triangles because I think they create cool shapes when overlapped. I wanted to keep it simple, but with a deeper feeling.

Progress

I started by creating triangles with random coordinates, but to give them a more unified and organized look, I kept one end of the triangles unified at a certain point. I then gave them random shades of grey with transparency to create a deeper feeling. After watching YouTube videos, I learned the crosshatching technique, so I decided to add it to give the piece more texture. Then, I decided to add color to experiment, so I created a colour palette and added it. The references I used were mostly YouTube videos and the examples attached to the course website.

My Code Highlight

Although it’s not complex, I really like the crosshatching part of my code. I think it can be used in a lot of artworks to give them nice texture and feeling, especially because of how easy it is to code.

for (i = 0; i < 1000; i++) {
      stroke(0, 20);
      rect(random(width), random(height), 50);
      circle(random(width), random(height), random(20, 80));
    }

Reflection

After this project, I think I’m better at handling the basics, so I want to experiment more. I am hoping to incorporate more animations and try out more complex shapes, as well as, use symmetry and grids. But most of all, I want to create more 3D-like art pieces and experiment with making my work feel more dimensional.

My concept: For this assignment we were tasked to create a generative artwork which included a variety of elements that we have learned in class throughout the first two weeks. For this artwork I was particularly inspired by two things including webs and the way moving lights create trails across certain images, particularly in the dark. Therefore, I wanted to create this digitally using P5js through the representation of moving stars that are interconnected through the use of lines to create the web effect in which I was inspired by. As the stars move, the moving mouse changes their speed and colors which enhances the artwork’s interactivity. 

Code that I am particularly proud of: Something that I am particularly proud of completing in this artwork is being able to achieve the effect of the speed changing as the mouse moves around the canvas to enhance interactivity. I did this by following the steps of The Coding Train on youtube, particularly his video where he creates the starfield simulation. The skills I learned about speed through this video will definitely be used more throughout the course in the upcoming future. 

speed = map(mouseX, 0, width, 0, 20);

How was this made: This artwork was made by primarily following the tutorial of The Coding Train on youtube as stated above. The video which is titled “Coding Challenge 1: Starfield Simulation” is a high speed tutorial which demonstrates how to achieve movement and perspective in p5js through the scenario of stars in the sky. After following this tutorial, I was able to make my own amendments to the artwork such as adding my web-like lines as stated in my intentions/inspiration, whilst also adding more mouse features such as the color changing lines. I would say that one limitation that I faced using this video is that it is 10 years old and uses the old P5 model, therefore I faced a few moments where I struggled with some of the language used in the video, however I was able to resolve this issue through the use of AI to translate old P5 language into the language in which I am regularly familiar with.  

Reflection and ideas for future work or improvements: I am overall very happy with the final result of this artwork as I was able to complete something different from the previous self portrait assignment, whilst also learning some new pieces of code and functions that can be further used in upcoming projects. For future work, I really want to attempt to create something that has a sense of realism, as this was attempted for this artwork initially through the creation of a realistic flower, but unfortunately didn’t work as I faced some difficulties in understanding dimensions and sizes that could help me translate the flower into my desired artwork. Therefore, for next time I would definitely like to watch more tutorials from various sources to expand my knowledge and understanding on coding and hopefully become more aware of the app.

Concept:

My main inspiration behind the artwork was the abstract art piece that I found in the ‘Program Information’ reading. I was drawn to it because it not only had various shapes and sizes of rectangles, but also included lines, which made the piece feel more detailed and abstract to me. I chose triangles because I wanted to experiment with a shape that I had not used much before in p5.js , and I liked how triangles could create completely different patterns depending on their size, position, and how they overlapped with each other. I chose a purple color palette because the color reminded me of NYUAD. I wanted the piece to be abstract and include animation to make it feel more dynamic and stand out.

My Artwork:

Code I am Proud of:

for (let yPos = 60; yPos < height; yPos = yPos + 90) {

  for (let xPos = 60; xPos < width; xPos = xPos + 90) {

    if (xPos < 100) {
      stroke(colors[0]);

    } else if (xPos < 200) {
      stroke(colors[1]);

    } else if (xPos < 300) {
      stroke(colors[2]);

    } else if (xPos < 400) {
      stroke(colors[3]);

    } else {
      stroke(colors[4]);
    }

    drawTriangleAt(xPos + triangleMove, yPos, 60);
  }
}

The part of my code that I am most proud of is the loop I used to create the smaller triangles. I liked this part because I was able to combine a few things we learned in class instead of just using loops on their own. The loops repeated the triangles across the canvas, while the x position helped me create the dark to light purple shift. I also added triangleMove to make the triangles move from side to side. There was a lot of trial and error with this part because I was still confused about how the positions and movement worked together, so I kept changing the values and seeing what happened. This helped me understand the code a lot better.

How this was made:

I began with a standard 500×500 canvas and added a couple of triangles. I then used what we learned in class to create a grid using nested loops, which let me repeat the triangles across the canvas instead of drawing each one individually. Once I had the grid, I wanted to make it more colorful, so I recreated the idea of the color palette we used in class. I used RGB values to create different shades of purple and used the x-position of the triangles to create an “ombre” effect from dark purple on the left to lighter purple on the right.

I also wanted to add movement to make the piece feel more dynamic and less like a stationary grid. I created variables to control the movement and speed of the triangles. I made the smaller triangles move from side to side, while the bigger triangles expand and shrink.

Using what we learned in class, I then decided to make the largest triangles expand towards the edges of the canvas. I did this by changing their size over time and using if statements to make them shrink again once they reached a certain size.

Finally, I added lines of different sizes and directions to make the artwork feel more scattered and abstract. There was a lot of trial and error throughout the process. One issue I had was when I originally named one of my color variables purple, which caused an error because p5.js already uses that name. I was confused at first, but after troubleshooting I changed it to normalPurple, which fixed it.

I used the p5.js Reference to look back at: for, loops, triangle(), color(), and line() whenever I was unsure about how they worked. I especially used the examples from class and the lecture notes to understand nested loops and how changing the x and y positions would affect where the triangles appeared. For the color palette, I searched up examples on Google and used this one as a reference to help me understand how to create and organize my own color palette. I mostly learned through trial and error by changing different values and seeing how they affected my artwork.

https://editor.p5js.org/blatinegra/sketches/pBH_qyD-o

Reflections & Future Work: 

I found the process of creating this artwork challenging and frustrating at first because I had a general idea of what I wanted it to look like, but I wasn’t completely sure how to recreate that idea using code. A lot of the process involved trial and error, especially when working with the loops, coordinates, and movement. I kept changing different values and running the code to see how they affected the triangles, which actually helped me understand what each part of the code was doing. I also found that as I continued working, my idea changed a lot from the simple grid of triangles I started with, as I kept adding different sizes, colors, movement, and lines.

This assignment made me more comfortable with using loops, especially nested loops, because I was able to see how a small amount of code could create an entire repeated pattern. I also became more confident with using variables and if statements to create movement rather than only using them for basic conditions. In the future, I would like to experiment with making each shape or line move independently and in different directions. I originally wanted to try this with the scattered lines in this piece, but I found it a little too complicated with what I currently know. I would also like to add more interactive elements, such as having the mouse affect the movement or appearance of the artwork.

After watching the video, I realized that I tend to focus on precise lines and shapes in my drawings. You could say I’m a perfectionist. When you’re holding a brush, you’re the one controlling its movement. Every stroke is intentional, and every move is calculated. I think that’s how I’ve always understood order in art: everything is controlled and deliberately placed.

But what fascinated me was his take on order and chaos, and how they coexist in every art piece. It actually changed my perspective on what order is in art. It’s not necessarily about perfection, but about control. You can “guide” the lines in a certain way to shape a meaning without having to control every single detail. For example, when mixing a colour palette using acrylic, you might not always get the exact colour you wished to achieve, and that’s the beauty of it.

I agree with his view on control, and how you decide how far you push it and how far you constrain it. I think it all comes down to knowing and choosing which elements to alter and which to keep unpredictable. And just like he also mentioned, you might get a little inspiration from things you never would have thought of.

My Concept

Computer vision showed me that you can have order and chaos at the same time using the random() function. I found this task a bit harder than the self-portrait because I had to explore a new idea with loops. I have only used loops for simple tasks in my other computer classes but I had never used them to draw or create random things. They were always very fixed. I took inspiration from the Casey Reas talk and really wanted to use lines. He showed a lot of examples of lines and how they can have the freedom to do whatever they want, so I wanted to see the intricate things these lines could create by themselves through the computer. I started with the idea that I wanted the lines to have control over where they start, where they can and cannot go their speed and their movement. For my first draft, I used a 500 x 500 canvas with a circle in the middle with a circumference of 100. Using the random() function, a line could be drawn within that space and move at a random speed. However, I also gave it boundaries so it could not go outside the circle. I then wanted to make it more personalized, so I remembered the four colors of the UAE flag. I scaled it down and made four boxes in two rows and two columns. I calculated the centre point of each box and made the lines spawn from there at their own random speeds. I really enjoyed the fact that I could have so much control while the output still looked very chaotic. I can explain how I made it, why I made it and what rules I gave it, but the computer created the final result through those rules and randomness.

Embedded Sketch

A highlight of some code that you’re particularly proud of

One part of my code that I am particularly proud of is the mouse interaction. I used dist() to calculate the distance between the mouse and each moving line. When the mouse gets within 50 pixels of a line; the line changes color depending on which box it belongs to. This makes the artwork interactive because the colors respond to where the viewer moves their mouse. I also like that I used the same code to create different reactions in all four boxes instead of having to write completely separate code for each one.

let distanceFromMouse = dist(mouseX, mouseY, x[i], y[i]);

if (distanceFromMouse < 50) {

  if (boxNumber == 0) {
    stroke(200, 50, 50);       // red
  }

  if (boxNumber == 1) {
    stroke(50, 170, 80);       // green
  }

  if (boxNumber == 2) {
    stroke(235, 235, 235);     // white
  }

  if (boxNumber == 3) {
    stroke(40, 40, 40);       // black
  }

} else {
  stroke(30, 80, 180);        // Blue when mouse is far away
}

 

How Was This Made

I got the initial idea for this project from the Casey Reas videos, as I explained in my concept paragraph. I also watched The Coding Train video on the random() function to understand how I could use randomness in my code LINK. For the other parts of the code, such as the for loops, I used the class content and notes. The only part I searched for separately was how to create the specific interaction I wanted, which led me to the p5.js dist() reference page LINK. I used this to help write the code for the lines reacting to the mouse. I also used CSS RGB to choose the colors for the project especially using the scrolling function where I could pick my own color LINK.

Reflection and ideas for future work or improvements

For this project, I learned a lot about computer vision, but I also learned about controlling something while giving it the freedom to do whatever it wants. At first this was a little off-putting because I was not fully in control of what the lines were doing. I liked how the random() function can randomize objects in ways that I would not have thought of myself. For improvements, I would want the lines to be more flowy because I felt like they were very rigid when they bounced off the walls. I wish they could curve and move more naturally but I did not fully understand how to create that effect yet. Overall, I really liked working with the topic of computer vision and would like to explore it more.

Concept

For this artwork, I was inspired by one of the art pieces from our reading. When I looked at the work, I noticed all the thin lines coming from different central points and spreading out in different directions. It reminded me of laser beams that I have seen at TeamLab. I liked how the lines overlap and create a kind of chaotic but interesting pattern. I wanted to recreate that feeling in p5.js, but instead of using black and white, I used bright colors to make it feel more like the laser lights I remember from TeamLab. I also used random() so the lines change and move each time the artwork runs.

My Artwork!

Code I Am Proud Of

// blue lasers
for (let i = 0; i < 40; i++) {
  stroke(0, 255, 255);
  line(250, 250, random(50, 230), random(100, 400));
}

The part of my code that I am most proud of is the for loop because it helped me create many lines without having to write every single line myself and it was essentially muplitple loops for each color. Its my first time creating a loop so I was very proud of myself. The loop repeats the “laser beam” 40 times. I also used random () so that each line goes to a different place. I think this is cool because I learned how a small amount of code can create a lot of different results.

How This Was Made

I started with a 500×500 canvas with a black background because I wanted the colored lines to look like lasers in a dark space. To create a laser beam artwork meant that I had to use for loops to create multiple laser lines without having to write the same line() code over and over again (I wish I knew this in my first p5 art piece!). This was one of the parts I struggled with because I was still getting used to understanding how loops repeat code and how changing the numbers inside the loop affects the artwork.

I used stroke() to give the lasers different colors and line() to create the actual laser beams. I also used random() for the ending points of the lines so that each laser would go in a slightly different direction. I found random() confusing at first because I had to understand that the numbers I put inside it control the range of possible positions. Even changing the numbers a little could make the lasers look different. I also used ellipse() to make the small white light in the center where all the lasers start. Getting the lines to start from the same point was another part where I had to pay attention to the coordinates. I had to think about the x and y positions and how changing them would change the direction and length of the lasers.

I used the p5.js examples and what we learned in class to understand how to use for loops. I also used the p5.js reference to look up line(), stroke(), random(), and ellipse() when I was unsure about how the coordinates worked. I mostly learned by changing the numbers and seeing what happened, which helped me understand the code better than reading about it.

Reflections & Future Work

I found the process of this art piece a little frustrating at first because I had to keep changing the code and testing it to understand what each number was actually doing. I realized that coding an artwork is a lot of experimenting and making small changes until something works the way I want, especially because at first I wasn’t feeling inspired by anything. It also made me more comfortable with using loops and coordinates, which I was not very confident with before.

For my future works I want to experiment more with movement and interaction instead of only making something that stays on the screen. I think adding mouse interaction would be a good next step for me because it would make the viewer part of the artwork and it would definitely be more fun to interact with.