Category: F2026 – Mang

Concept

Before I started any part of this weeks homework, I already had a small idea for what I wanted to create. As I began going through the work, I still intented to go through with my original design. While going through the examples provided with the assignment instructions, I came across a work that was similar to what I had in mind, this ended up being my source of inspiration for the assignment.

I ended up creating a code where a random number of lines with varying colors and sizes would extend from the center of the screan, creating a kind of splatter effect. However, when I was about done with the code, I wanted to try making it so that the origin of the splatter would change with each itteration. This ended up resulting in me making it so that the code just put all the lines randomly on the screen. At first, I was annoyed but as I kept looking at it, the design began to grow on me. Additionally, it reminded me of some of the work I saw while watching the Casey Reas talk. At this point, I decided to change my porject and embrace the happy accident that occured.

Code I’m Proud Of

A section of code I’m really proud of is the while loop I created which is responsible for generating the lines. It takes the randomly selected number of lines when the code is run and for each line a eight random featues of that line are generated. These inclide two random x and y coordinates to create the line and where its positioned, three random r,g,b values allowing each line to be a different color,  and a random stoke weight from one to ten changing the thickness of each line.

while (lineCount > 0) {
  let randX = random(width);
  let randY = random(height);
  let randX2 = random(width);
  let randY2 = random(height);
  //randomize the r,g,b values, thickness, and position of each line
  let r=random(0,255);
  let g=random(0,255);
  let b=random(0,255);
  strokeWeight(random(1,15))
  stroke (r,g,b);
  line(randX, randY, randX2, randY2);
  line(randX, randY, randX2, randY2);
  lineCount = lineCount - 1;//decrease the lineCount till it hitsw zero to control the while loop
}

 

Sketch

• ‘How Was This Made’ section including references

I started by creating the while loop which would create the randomly chosen number of lines. To do this I watched The Coding Train’s video titled “4.1: while and for Loops – p5.js tutorial” to review how the while loops functioned in p5. When I began, I had some issues with the line count variable I added to control the loop, as I kept getting errors about it. To solve this I tried moving the variable to a few different locations, as I had a similar issue in the previous homework and moving the code was what helped resolved it then and also helped with this issue. I later changed this to randmoize both the start and end postions. Once I was able to get the lines generating properly, I started adding in the elements of the lines that I wanted to be randomizes. I started by impletening randomized colors for each line and then randomized stroke weights. After I did this, I had the idea to randomize the origin position of the lines which accidently resulted in the line positons being completely randomized, which I decided to keep in the end.

Reflection and ideas for future work or improvements

I think working on this assignment taught me to embrace the unexpected because my final project ended up being very different from what I had in mind when starting. Not this but I think my final project reflected my intention for this assignment in a clearer manner than what I had created at first. Those intention were to kind of find the right balance between the randomness and control. The way I wanted to do that was by making it so that each different interation of the generated work had elements that allowed you to tell they were connected while also having each design look unique and distict from the others.

In terms of future work, I would like to get more practice using the loops to fully grasp the capabilies they have for creating art. When it comes to improvements to this assignment, I think I would add more elements thay could change such as addition shapes as well as a implementing a feature to let users change the design by clicking.

 

In his Eyeo talk, Casey Reas argues that code needs a bit of “noise” for it to stay visually interesting and prevent it from becoming homgoneous.  From that part of his talk, I understood that he meant adding some kind of elements or means to differentiate different iteration of the code/art work. Reas outlook on this is similar to my plans for how I’ll make use of randomness withing my art. I intent top incorporate a few different elements within my work that will be randomized each time the code is rerun. My goal in doing this is to achieve some sort of similarity between each unique iteration while also having it so each one a some kind of distinction from the rest. 

I think there may not be one definitive answer for the optimum balance between total randomnens and complete control. Rather, it depends on each individual case and the type of art the artists is trying to make, as well as what their goals for that artwork is. However If an artist leans too heavily into either direction they could risk their art being too random to the point where there is no clear idea behind the art and the “noise”, as Reas would call it has no real meaning, or it could be too controlled where the result may be too predicable. However, this does raise a question for me, how would we as viewers be able to distinguish between these? For example, at what point does the randomness or noise become too much or lose its meaning?

My concept

After watching the video, I wanted to experiment with randomness in my artwork and discover what visual possibilities it could create.
I realised that the effect of chance would not be very clear within just one static image. For this reason, I used ‘mousePressed’ as an interactive feature: every click reruns all the random values and generates a brand‑new composition. This allows the viewer to see the wide variety of outcomes produced by one single system.
I chose two simple forms: bezier curves and circles of varying sizes. I defined their general shape, boundaries and direction, while letting random() decide their exact position, size and colour. Rather than placing each curve and circle by hand, I let the code produce unexpected arrangements. My aim is to observe the balances and relationships between curves and circles.

How this was made?

for (let i = 0; i < 10; i++) {
    let circleX = random(30, width - 30);
    let circleY = random(30, height - 30);
    let diameter = random(15, 90);
    noStroke();
    fill(random(255), random(255), random(255));
    circle(circleX, circleY, diameter);
  }

For the random circles I used a for‑loop. I wanted ten circles in total. Their coordinates are random, and so are their diameters. However, I set rough limits for these values: a range for their size and another for their position. Their colours are also random.

for (let m = 0; m < 8; m++) {
    drawCurve();
  }
function drawCurve() {
  let x1 = random(-20, width + 20);
  let y1 = random(-20, 0);
  for(let i = 0; i < 8; i++){
    let cx1 = x1 + random(-75,75);
    let cy1 = y1 + random(-65,65);
    let cx2 = x1 + random(-75,75);
    let cy2 = y1 + random(35,95);
    let x2 = x1 + random(-55,55);
    let y2 = y1 + random(65,115);

    bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
    x1 = x2;
    y1 = y2;
  }
}

For the lines, I was not sure at first which shape to use. After checking the p5.js reference page, I found that the bezier curve worked best for my idea. I then briefly learned how its coordinates function and how to control them, and started to build my curves.
I discovered that without startX = endX and startY = endY, all the segments would cluster near the top of the canvas and would not connect together. This created a problem. Once I noticed this issue, I adjusted my code and asked AI to help me understand why it was happening.

Reflection

I have realised that creating artwork with random() saves a lot of time. Unlike my self‑portrait project, where I had to carefully refine every single detail, randomness can unexpectedly produce really appealing patterns. I feel I could use randomness more often in my future artworks. I really enjoyed this creative process and kept experimenting throughout. Right now I have only used curves and circles, which are still quite basic and simple. I hope in the future I can use randomness to generate more complex forms.

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.