Watching this talk, what came to my mind was how deeply rooted the tension between chaos and order is in both art and human history. I found myself reflecting on how, for centuries, artists were expected to create structure and clarity in response to a world perceived as chaotic. This made sense within a Newtonian worldview, where the universe felt stable, predictable, and governed by clear rules. As the speaker moved through moments of scientific disruption and historical trauma, especially the impact of World War I, I began to see how those events made strict order feel insufficient. It became clear to me that the shift toward chance and randomness in art was not a rejection of meaning, but an attempt to better reflect the uncertainty and complexity of lived experience.

What struck me most was the idea that chance is never truly blind. As I watched the examples of algorithmic and generative work, I kept thinking about how these systems are carefully designed yet allowed to behave unpredictably. This balance between control and surrender felt deeply human to me. I realized that using randomness is not about giving up responsibility as an artist, but about trusting processes to reveal patterns that cannot be forced. In that sense, chaos becomes a collaborator rather than a threat. It allows art to remain alive over time, continuously changing while still holding a coherent identity.

 

My concept draws inspiration from the interactive projections often seen in galleries and museums. As I mentioned in my previous post, I wanted to include an interactive art piece that allows the audience to both enjoy and engage with it.

I used ML5.js documentation and example for my source body segmentation used in my code.

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

let bodySegmentation;
let video;
let segmentation;
let options = {
maskType: "person",
};

function preload() {
bodySegmentation = ml5.bodySegmentation("BodyPix", options);
}

function setup() {
createCanvas(640, 480);
// Create the video
video = createCapture(VIDEO);
video.size(640, 480);
video.hide();
bodySegmentation.detectStart(video, gotResults);
}

function draw() {
background(255);

// Draw the video
image(video, 0, 0);

if (segmentation) {
// Load the pixels of the mask to check each pixel
segmentation.mask.loadPixels();

This part of the code taught my a lot about body segmentation, and how interactive projections work form behind the scenes.

Embedded sketch:

Note: For it to work, please click the link and allow camera access.

Reflection and ideas for future work or improvements:

I am happy that I learned how to use ML5.js, and I look forward to using it in future projects. For this project, I would like to implement more details, using something like FaceMesh, which could affect the shape or color depending on your visible motions.

Upon watching Casey Reas’ talk, I became interested in his approach of using artificial, computation processes to create something that feels “organic,” as he says. Another thing that resonated with me was when he mentioned how he was more interested on the paths that elements were taking while moving rather than on their individual location at specific moments. I plan on keeping these two features in my mind for my future works. I want to apply this thinking by designing systems where the journey and behavior of elements matter more than their fixed positions, letting randomness guide their movements while maintaining an intentional overall direction or purpose, and create something with that “organic” feeling, where the work doesn’t look rigidly programmed but instead has a natural, living quality to it.

I think the optimum balance lies in incorporating random elements by establishing controlled boundaries while allowing freedom within those constraints.  Simply put, controlling where something can exist or move, but letting how it moved or which specific direction it takes to be determind by chance. There would be a defined space or ruleset but then letting randomness operate freely within those parameters. In this way, everything still feels intentional and cohesive because it’s all happening within a thoughtfully designed framework.

“One must still have chaos in oneself to be able to give birth to a dancing star.” — Friedrich Nietzsche

Concept:

For this assignment, I decided to go for a feel about how I view life. In my opinion, I view life as quite chaotic and we feel like we don’t have really any control over it. But at some point, we stand back and stop for a moment to get our life in order. We do this from scheduling, persistency in our work and even making sure that nothing will surprise us. But no matter how much we try, there will always be even a little bit of chaos in order. Which is why the piece below represents that very feeling.

How it’s made:

This actually partially uses some code from my last assignment, namely the random ellipses going around in different directions. It uses a simple for loop, that constantly iterates a random color for the ellipses and they are placed randomly on the canvas. I’ve made it so they are smaller as if I made them bigger they would be more dense and you practically can’t see much.

That in itself is meant to represent chaos. There’s no specific order or movement that the ellipses follow, no specific size they must have and no specific color they need to embody. To me, this represents pure chaos.

But I then wanted to represent the logic and order our lives embody so I thought the best to do that, was to get the ellipses under control. I was thinking about what’s the best way to represent order and I thought:

“To make order from chaos, there needs to be a base line structure to follow.”

Wait, a line? Yeah that could work. But to actually showcase more ellipses I needed to make a 2×2 made only from ellipses. So I tapped in to some coding knowledge from before and made a nested for loop.

A highlighted bit of code I’m proud of:

I really like the nested for loop that I made to represent order. It takes in the length and width of the canvas, and sorts out the ellipses in rows and columns. It’s quite simple honestly when you think about it. Also I made sure to move them a bit down so they don’t stick to the walls of the canvas.

if (pause == true){
    background(255)
    for (let i = 0; i < widthCanvas; i = i + 50){
      for (let n = 0; n < heightCanvas; n = n + 50){
        fill(random(255), random(255), random(255), random(255));
        ellipse(i + 25, n + 25, random(50));
      }
    }
  }

But I thought more in adding a bit more to this. Of course, order can be easily represented with rows of ellipses in the same color. But I feel as though, no matter how much order exists, there’s still a little element of chaos inside.

Which is why, I made it so the ellipses have different color, and different sizes, but still in line with the order created. To me, it represents just that still a little bit of chaos can exist.

Reflection:

I enjoyed making this simple effect. Originally I wanted to be ambitious and go for an effect where if I click the mouse at a certain point in the canvas, then all of the circles would come towards the mouse. And when the user would let go, they would go back to the random movements. Unfortunately I struggled and couldn’t think of a way to go about it.

But that’s not to say that this wasn’t good. I think giving it more time to thinker and play around, perhaps someday I could make it have cool animations and effects.

WEK 2 Art Exploration

Concept

Digital Terrain is a generative artwork inspired by the golden age of computer graphics from the 1970s, when plotters and early systems created mesmerizing patterns through mathematical precision. The piece explores repetition with variation

The composition uses a 6×5 grid structure where each cell contains one of five distinct generative patterns: vertical lines that breathe, organic blob contours, flowing topographic lines, mixed pattern cutouts, and drifting wave forms. The aesthetic echoes vintage plotter art with its warm cream lines on deep black, while the subtle animations bring a meditative, living quality to the static grid.

The work question: How can repetition avoid monotony? Each viewing reveals new relationships between adjacent cells, creating an ever-evolving visual conversation.

Code Highlight

I am particularly proud of the organic blob generation using Perlin noise mapped to polar coordinates. This technique creates smooth, natural-looking shapes that feel hand-drawn rather than computer-generated:

function drawOrganicBlob(w, h) {
  let offsetX = random(1000);
  let offsetY = random(1000);
  
  // Map circle to noise space for organic shapes
  beginShape();
  for (let a = 0; a < TWO_PI; a += 0.1) {
    let xoff = map(cos(a), -1, 1, 0, 2);
    let yoff = map(sin(a), -1, 1, 0, 2);
    let r = map(noise(offsetX + xoff, offsetY + yoff), 0, 1, w * 0.15, w * 0.4);
    let x = w/2 + r * cos(a);
    let y = h/2 + r * sin(a);
    curveVertex(x, y);
  }
  endShape(CLOSE);
  
  // Nested contours for depth
  let numContours = floor(random(2, 5));
  for (let c = 0; c < numContours; c++) {
    let shrink = map(c, 0, numContours, 0.9, 0.3);
    // ... creates inner rings
  }
}

By converting circular motion (cos(a), sin(a)) into noise coordinates, we get perfectly smooth blobs that change shape naturally. The nested contours add depth, mimicking topographic maps or growth rings. This marriage of geometric precision and natural randomness captures the essence of generative art.

Live Sketch

Interaction: Click canvas to regenerate | Press 'S' to save artwork

Reflection & Future Directions

This project taught me how loops transform code into art. Instead of drawing one shape, a loop draws hundreds with variations. The challenge was balancing randomness with aesthetic coherence.

The animation addition was particularly enlightening. At first, I had everything static (noLoop()), but adding a time dimension (t += 0.008) brought the piece to life.

Ideas for Future Work:

• Color Evolution: Slowly shift the color palette over time, transitioning from cream to blues to warm oranges, creating day/night cycles
• Audio Reactivity: Use microphone input to make patterns respond to sound. For example, wave amplitude increases with volume, blobs pulse with bass frequencies
• Cell Communication: Let adjacent cells influence each other's patterns, creating waves of change across the grid rather than isolated behaviors
• Export System: Generate high-resolution (4000×3000px) versions for actual printing/framing, exploring the digital-to-physical art transition
• 3D Depth: Add subtle shadows or perspective to create the illusion that some cells are recessed or raised, adding architectural dimension
• Pattern Memory: Track which patterns appear most frequently and gradually reduce them, ensuring ongoing visual freshness even across long gallery displays

---

Created with p5.js | February 2026

Concept

“The whole universe is based on rhythms. Everything happens in circles, in spirals.” — John Hartford

The idea of my artwork was that I wanted to create a spiral using the colors of the flower often called the “national Bolivian” flower, the kantuta. This flower is one of the most amazing ones, not only because of its vibrant colors, but also because it grows up to 3,800 meters above sea level, in its native land in the Andes. This flower has a lot of meaning for me, starting with its colors red, yellow, and green, which are those of the Bolivian flag, and also because it represents the nature and resilience of my home country.

Speaking of nature, I wanted to represent this flower through some kind of shape. Spirals are a shape that is found everywhere in nature and, for me at least, they are mesmerizing to look at and to understand. Inspired by the video we watched on randomness in digital art, I wanted to find an “organic” yet “random” way of showcasing the kantuta. The spiral has movement and flow without breaking its structure or bringing chaos. Moreover, it has such a unique presence, it almost calls the viewer to follow its path, and it feels like you’re watching something alive.

That’s why, and as I promised myself in the last exercise, I wanted to challenge myself, so I looked up many tutorials on how to create spirals in p5.js.

Run it and Click it!

Process

Most of my learning for this project came from these video tutorials on YouTube by Strive Math. First, I had to learn about transformations and translations in p5.js. It has to do with the coordinates in the canvas you’re creating. So, when you translate, you move the entire coordinate plane up, down, left, or right. And when you transform, you’re rotating the entire coordinate plane at an angle that you choose (you must select if the angle will be measured in degrees or radians first). It rotates clockwise if the number is positive and counterclockwise if it’s negative.

With transformations, you rotate the axis around the center point you chose when you did the translation. So, with this, I first learned how to draw a simple circle using these concepts. For example, if I translate the origin so it is right in the middle of the canvas, and I keep making this coordinate plane rotate clockwise while drawing a dot somewhere that is not the origin, the dot will keep moving with the coordinate plane and trace a circle when the coordinate plane completes a full 360° rotation.

This is how the code for that looks (this is no longer in code as such since it was just to practice and understand how it works):

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES)
}

let angle = 0

function draw() {
  translate(width/2, height/2)
  rotate(angle)
  angle++
  point(30,0)
}

The next step, was to think how this could turn into a spiral. Since the circle shape that I made is actually just a point following a path that is determined by the radius of the circle, if I increase the radius of the circle, and as the point moves more the radius also increases more, this will create a path of a spiral. Therefore now the code will look like this:

let angle = 0
let radius = 0

function draw() {
  translate(width/2, height/2)
  rotate(angle)
  angle+= 31
  radius+= 0.4
  strokeWeight(6)
  point(radius,0)

Now I can control the way the spiral looks by playing with the amount of degrees the angle of the coordinate plane is going to change every time and how wide will the radius of the circle increase be. A small issue with this was that the frame rate of how fast or how slow the points would appear will sometimes be too slow and I wanted to change that. Therefore, just like in the tutorial that i watched, I inserted a for loop to control the frame rate of everything, and for it to not change and save the sate of the canvas I used the ‘push’ and ‘pop’ commands so that the origin always stays in the center of the canvas and doesn’t move every time the for loop repeats.

As I said, I wanted to implement the concept of randomness, so I created random variables for the values of the angle and the radius to be able to make a different spiral every time you click on the screen. To make this happen, I added a mousePressed() function that resets the angle and radius to their initial values, generates new random values for the angle increment and radius increment, and clears the canvas:

function mousePressed() {
  angle = 0;               
  radius = 0;             
  angleValue= random(300, 3000); 
  radiusValue = random(0.009, 0.2);
  background("black");    
}

This way, every time the canvas is clicked, the spiral starts fresh with completely new random parameters, creating a unique pattern while keeping the interaction simple and intuitive. However, it took me a while to figure out this approach, because at first I tried using a boolean variable and a separate restart function in a more complicated way, and my code would get messy: sometimes the spiral wouldn’t appear, or new spirals would overlap with the old ones. Then I realized, why complicate things? I could just reset the main variables and redraw, and it worked perfectly.

Something I did very intentionally was set the limits of the random value of the angle to very big numbers and the numbers of the radius to very small decimals. I did this because I started playing around with those values and I realized the smaller the radius was the more dense the spiral looked and if the angle was a high number there was more chance of there being more ‘spiral lines’. I liked how this looked because it made the spiral look more like a piece of art. I also changed the background color to black so that the colors of the points would stand out more.

Code I am proud of

Then came the most important part: the color of the kantuta image. I uploaded the image to p5.js and made the spiral match the colors of the pixels by randomly selecting a pixel from the image and using its color for each point on the spiral.

let ix = floor(random(img.width))   
    let iy = floor(random(img.height))  
    let c = img.get(ix, iy)             
    stroke(c)

I’m really proud of this code because it wasn’t easy to get it right at first. I had to change the image I was using because the first one had too much black, which blended with the background and made the spiral almost invisible, and it also took too long to load. Then I realized that I needed to extract the colors pixel by pixel from the image, and I did this inspired by the p5.js example of pointillism, where each point takes the color of a random pixel from the image. This finally permited me to have a spiral that not only looked colorful and vibrant, but also represents the kantuta in a way that felt alive and organic, and I really liked it.

Final Code

//Image variables
let img;

//Image upload
function preload() {
  img = loadImage("kantuta.jpg");
}

//==============
//Setup
//==============
function setup() {
  createCanvas(600, 600);
  background("black")
  angleMode(DEGREES);
  frameRate(80);

  angleValue= random(300, 3000)
  radiusValue = random(0.009, 0.2)

  img.loadPixels(); // allow us to access image pixels
}

//Spiral variables
let angle = 0
let radius = 0

let angleValue
let radiusValue

//===================
//Drawing the spiral
//===================

function draw() {
  //To control the frame rate
  for (let i= 0; i<80; i++){
    
  push()//save the state of our canvas
  
  translate(width/2, height/2);
  rotate(angle);
  angle+= angleValue;
  radius+= radiusValue;
  strokeWeight(4);
    
  //Pick a color from the image
    let ix = floor(random(img.width))   
    let iy = floor(random(img.height))  
    let c = img.get(ix, iy)             
    stroke(c)                          
    
   point(radius,0);
  
  pop()//come back to the old state before 'push'
  }
}

// ===================
// Replay spiral on click
// ===================
function mousePressed() {
  angle = 0;               
  radius = 0;             
  angleValue= random(300, 3000); 
  radiusValue = random(0.009, 0.2);
  background("black");    
}

General Reflection

Overall, I think this project taught me a lot about patience, experimentation, and problem-solving. I also realized how important it is to simplify my approach: sometimes trying too many complicated solutions only slows you down, and the best results come from understanding the core idea and working with it directly.

I’m proud of how the final spiral turned out, not just technically but also conceptually. I feel like it feels alive, vibrant, and connected to something meaningful, which reflects the beauty of the kantuta and the creative process behind it. This project was the hands-on reminder of the video we saw that taught me that coding can be as expressive as painting or drawing, and that combining randomness, structure, and careful choices can create something truly mesmerizing.

Concept

I drew inspiration from the movie Coraline, where there was a little door that lead to another world through a mysterious tunnel and I wanted to use that tunnel as my loop. So in my sketch, there’s a little door and when clicked, it reveals a mesmerizing tunnel of concentric circles that pulse and animate.

My Final Portrait!

Code that I’m Proud of

let animatedSize = d - t;
if (animatedSize > 0) {
  ellipse(0, 0, animatedSize);
}

d -= random(15, 35);

I wanted a “magical tunnel” effect so I used d – t to make all circles pulse inward together and random(15, 35) to give each circle irregular spacing. I think it was successful in capturing the mysterious portal feeling and as if you’re being pulled into another dimension.

How this was made

The draw() function has two states controlled by mouse interaction. When the mouse is not pressed, it shows a door: for the door, I wanted to create something simple yet mysterious, so I just used a rectangle with a small circle on the side as the handle and a plain black background. When the mouse is pressed, it shows a tunnel: for the tunnel effect, I initially tried using a for() loop but switched to a while() loop to get that random, organic effect. I was inspired by a p5.js example that used a while loop to create concentric circles with random spacing. The example code showed how while (d > minSize) could draw circles that decrease by random amounts using d -= random (5, 15), which created this uneven pattern instead of perfectly uniform circles. I thought this technique would be perfect for creating a mysterious tunnel effect and I heavily implemented that in my sketch. I used translate() to move origin point to the center, which made drawing the circles so much easier since I could just use ellipse() instead of calculating positions every time. I was also experimenting with the minSize value to control how much blank space shows in the center and settled with 100. I learned modulo operato % to make the animation loop endlessly.

Reflection and Future Improvements

I used the p5.js reference page for examples of for() and while() loops and The Coding Train’s playlist on YouTube about loops to understand the logic and process of creating a loop. These sources were helpful in making me understand loops better as I missed the class discussion about this. In the future, I’d like to learn adding color gradients for the circles and a spiral motion to add more depth and make it more whimsical-looking.

My concept:

Initially I had lots of images saved from different types of designs, forms, and artists until I realized that I kept going back to page 19 in ProgrammInformation21_PI21. When it comes to art, I have drawn many zentangle-style pieces, which rely heavily on repetition and pattern, which is why I felt drawn to this specific art piece. I then decided to take inspiration from the piece and try to create movement similar to what I see. When I first looked at the image the shapes I saw were: triangles, squares, and circles. When I first looked at the image, the shapes I noticed were triangles, squares, and circles. Although circles are not clearly visible when zooming in, I decided to include them in my final piece to represent my initial visual interpretation of the artwork, hence why I called the piece Captured.

Inspiration from old computer art magazines: My project is inspired by early computer-generated art found in old programming and computer art magazines, where artists worked with limited tools leading to their reliance on shapes, repetition, and randomness.

Embedded Sketch:

How this was made:

This project took me around 4 hours to create. Much of the time was spent on searching and finding idea because I was just introduced to generative art and was still learning how randomness and loops affect visual outcomes. After finding the “perfect” inspiration I was then able to start brainstorming how I wanted my piece to look like.

At first I started off by creating just squares and triangles that were evenly spaced out but the results felt too structured compared to the chaotic image from the magazine. I then began experimenting with the [random] function:

let x = random (width); 
let y = random (height);

I combined this with rect() for squares and ellipse() for circles. Initially, I used a single square size [rect(x,y,10,10);] but unfortunately again, did not create the layered visual effect I wanted. To address this issue, I added more than one rect and played around with the width and height until I was able to layer three squares on top of each other with the small ellipse size. After I created the three different points for the triangles:

if (random(1) <0.8) { //80% chance to draw 3 rects and 1 ellips 
    rect(x,y,10,10); //x,y being random and 10,10 the W,H \|/ the same
    rect(x,y,7,7);
    rect(x,y,6,6);
    ellipse(x,y,5,5);
  } else { //the rest -> 20% will be triangles
    triangle(x, y-5, x-5, y+2, x+2, y+2);

I was also able to play around with the amount of shapes appearing on each frame (5) [for (let m = 0; m < 400; m++)]. Like everything else, starting is the hardest part so once I get used to the numbers and codes I used the rest of my time experimenting until I was satisfied with the results.

One code I am proud of:

for (let m = 0; m < 400; m++) { //drawing 400 shapes for every frame -> x5. Using m for my name

This was my favorite part of the code. I kept changing the number between 100 and 600 and experimenting with how the shapes changed and how the final piece turned out. In the end, I decided to keep it at 400 because it felt the closest to how I first saw the image. When I looked at everyone else’s self-portrait, I noticed that some people used this function, and at first I honestly didn’t understand how it worked. After looking into this source (JavaScript Loops Explained), I was finally able to create a similar effect and actually understand what the code can be used for instead of just copying it.

Resources: I of course wasn’t able to open p5.Js and create this project, so I kept referring back to the Week 2 lecture notes from both Professor Mang and Professor Aya’s weekly slides along with the website JavaScript Loops Explained Helped me create my code for the 400 shapes for each frame, I was able to make the loop but instead of using ‘i’ I just decided to use m for my name, adding a personal twist.

Full code:

function setup() {
  createCanvas(400, 400);
  frameRate(5); //to control the speed, or like I call this "the sets" I put 5 to make it slow but fast.
  noFill(); //black outline for the shapes
  stroke(0);
}

function draw() {
  background(255); //making the background white to match inspo

  for (let m = 0; m < 400; m++) { //drawing 400 shapes for every frame -> x5. Using m for my name
    
    //local variables created, so inside the loop each shape gets a new random position
    let x = random (width); 
    let y = random (height);
 
    if (random(1) <0.8) { //80% chance to draw 3 rects and 1 ellips 
      rect(x,y,10,10); //x,y being random and 10,10 the W,H \|/ the same
      rect(x,y,7,7);
      rect(x,y,6,6);
      ellipse(x,y,5,5);
    } else { //the rest -> 20% will be triangles
      triangle(x, y-5, x-5, y+2, x+2, y+2); //creating 3 different points for the triangle. Point 1: x, y-5 moving up. Point 2: x-5 moving left, y+2 moving down. Point 3: x+2 right, y+2 down
    }
  }
}

 

Reflection:

For future assignments, I think I’ll try to come up with ideas faster so I don’t spend so much time looking for the “perfect” inspiration before starting. Instead, I want to just start coding and see where it takes me. This feels like a fun challenge because the code can change so much depending on small adjustments. At the same time, having a general idea and then adjusting it as I go also works. I also want to experiment with more types of code. I know it’s not realistic to use every single thing we learn in one project, but it would be interesting to try combining more of them and seeing what comes out of it.