Category: F2025 – Mang

For this week’s task, I wanted to bring together two ideas: my love for the Arabic language and our class discussion about randomness. I decided to focus on the Arabic letter Alef because it’s such a fundamental and visually striking character (also its the letter my name starts with). I thought it would be interesting to combine something very structured and cultural, like the Alef, with something unpredictable, like random color and rotation. The result is a sketch where one large white Alef sits in the center of the screen, steady and grounded, while smaller Alefs surround it, each taking on different colors and rotations whenever I click the mouse. I like the contrast this creates, the main Alef is constant, but the surrounding ones are always changing, almost like a conversation between structure and randomness

Before I even touched the code, I started by sketching my idea out on paper. I drew a large Alef in the center of the page with smaller ones scattered around it, which helped me figure out the overall composition I wanted. Seeing it on paper gave me a clearer sense of how the final sketch should feel. Having this rough plan in front of me made the coding process much smoother, since I wasn’t starting from scratch on the screen, I already had a visual map to follow.

A highlight in my code that I’m proud of is definitely the drawAlef() function. At first, it took me a long time to figure out how to break down the shape of the Alef into basic rectangles. It was a process of trial and error to get the base, and the hamza shape (figure above the base), and the over Arabic letter to look right and accurate together. Once I finally got it to look like an Alef, I was proud because it felt like I had “translated” something cultural into the language of code. It also makes the rest of the sketch easier to manage, since I can just call drawAlef() whenever I want another Alef, no matter the position, size, rotation, or color.

// draws one Alef at (x,y) with scale s, rotation rot, and color col
function drawAlef(x, y, s, rot, col) {
  push();
  translate(x, y);
  rotate(rot);
  scale(s);
  fill(col);

  // alef base
  rect(0, 0, 20, 120);
  
//drawing the hamza (همزه)
  // hamza base
  rect(0, -70, 75, 10);

  // hamza vertical
  rect(0, -90, 10, 40);

  // hamza horizontal
  rect(25, -105, 40, 10);

I really appreciate how P5js allows me to write comments in arabic without messing up the structure left to right, notice how it let me put the word (همزه) in the correct position!

This project was definitely a challenge for me, and I had to look online for a lot of help to figure it out. I came across new ideas like lists (arrays), which let me store lots of values at once, such as the positions, rotations, and colors for my mini Alefs. I also learned about the commands push() and pop(), push adds new values into a list, while pop helps reset drawing settings so my transformations don’t mess up everything else. Another big step for me was understanding how i works in a loop, and how i++ increases it each time the loop repeats. At first, these concepts were confusing, but using them in my own code made them click (no pun intended). Now I feel like I have a better grasp of how loops and arrays work together, even though it took a lot of trial and error to get here.

Looking back, I think the project works well in showing how randomness can bring life to something as simple as repeating a letterform. At the same time, I see room for future improvement. One idea I’d like to try next is adding motion, for example, making the mini Alefs slowly rotate or drift across the canvas, instead of staying frozen until I click. This would create a more dynamic sketch, almost like the Alefs are floating around the central figure. Another idea could be experimenting with gradients or fading effects so that the Alefs don’t just appear instantly in new colors but shift more gradually. Overall, this project gave me confidence in writing loops and using functions creatively.

In his Eyeo talk, Casey Reas reflects on how randomness can bring life to a system. At one point, he explains that when there is no variation or unpredictability, everything begins to merge into sameness: “If these lines don’t have any bit of noise or jitter, they gradually tend towards one location. The system becomes homogeneous.” I found this idea so powerful because it mirrors real life. If everything was perfectly controlled, predictable, and identical, the world would feel lifeless. For example, if every tree on my walking path looked exactly the same, going on a walk would be dull and uninspiring. But because there’s always a little difference like a twisted branch, a bird flying by or sudden shift in light ,  my walk is always interesting and dynamic. Reas’ point about adding just a “slight bit of noise” to keep a system alive reminds me that unpredictability is what makes both art and life vibrant. I completely agree with his perspective that randomness doesn’t need to feel chaotic; instead, it can be a natural force that keeps things intriguing and gives them life, much like nature itself.

Reas also talks about the tension between chaos and order in art, saying that historically artists have been expected to impose structure and fight against disorder. His work flips that expectation, showing that embracing randomness doesn’t mean giving up control. He designs rules and systems but leaves certain spaces open for chance, allowing surprising outcomes to emerge. This balance really resonates with me. I’ve noticed in my own creative work that when I try to control every single detail, the result feels rigid and forced, it almost seems as if it traps my flow of creativity. On the other hand, if I let go completely, the work fully loses direction and structure. I think the “optimum balance,” as Reas demonstrates, is to create a strong foundation, like the rules of a game, and then allow randomness to bring it to life. This makes me rethink how I approach creativity. Rather than seeing unpredictability as a threat, I want to treat it as a collaborator, trusting that a little randomness will make my work interesting and lively, just as it makes the world around us more beautiful and alive.

Casey Reas’ talk really resonated with me because I go on walks all the time, and I’ve noticed how much the environment affects how I feel. The first photo, with its perfectly symmetrical path and identical trees, reminds me of walking on a treadmill at the gym,  predictable and boring. But the second photo, with its uneven, colorful flowers and natural variety, captures what makes walking outside so special to me. The flowers aren’t perfectly placed, yet that imperfection gives the path life and personality. It doesn’t feel chaotic, just alive, and that’s what keeps my walks meaningful and exciting.

In his talk on chance operations, Casey Reas, an artist, professor, and co-creator of the Processing programming language explores how randomness can be both a force and a generative tool in the making of art.

What drew me in most in Reas’ talk was the tension between control and surrender. His practice shows that randomness in art isn’t just chaos, but a tool for opening up creative possibilities. I found myself agreeing with his point that randomness can act as a “starting point”, like a door cracked open to reveal paths the artist might not have consciously chosen. For me, this resonates with John Cage’s example of random chance operations for musical symbols showed in the video, where unpredictability forces both creator and audience to reconsider what structure even means. At the same time, I can’t help but notice that Reas often reins randomness back into systems of symmetry and geometry, which makes me question whether he is truly embracing chance or ultimately seeking to discipline it. That tension raises a larger question: do artists ever fully give up control, or are they simply redefining the boundaries of authorship?

What challenged me most was his framing of post-WWI art as shifting toward more ‘automatic’ processes in response to destruction. While I see the logic in his argument, it seemed to privilege systematization, order and process as the most meaningful artistic response. This made me wonder if such a view unintentionally downplays the equally powerful role of intuitive or emotional art that also emerged from the same crisis. Personally, I’ve always seen randomness as something threatening, a loss of clarity, but Reas’ examples of layering it into fashion, architecture, or even modeling cancer cells made me reconsider. His work makes me ask: if randomness is unavoidable in life, is the role of the artist to harness it, or to expose its rawness without containment? That question lingers with me, and I think it pushes me to rethink my own preference for order as the only path to meaning in art.

At the same time, Reas’ talk made me consider how much my own creative process relies on hidden forms of randomness. Even when I plan a project down to the details, chance still slips in, through accidents, glitches, or unexpected associations, and often those “mistakes” end up carrying the most meaning. I think I’d like to incorporate random elements into my work as a way to break habits and push past predictable choices. Even something small, like letting code generate unexpected colors or positions, could spark ideas I wouldn’t have considered. For me, the ideal balance is somewhere in the middle: too much randomness feels empty, like the work loses its voice, but too much control risks suffocating the piece. I view randomness as something that works alongside intention, not something that overrides it, a way to keep the process alive and surprising. Reas similarly argues that randomness is not the opposite of intention but a collaborator, and that idea really shifted my perspective. Instead of resisting unpredictability, maybe it’s more useful to design spaces where it can push me outside my comfort zone. This raises a final question I’m left with: in a world increasingly defined by algorithms and precision, is cultivating randomness a way of keeping art (and ourselves) human?

I was so intrigued after the talk that I even explored his personal website, and I loved its throwback, almost nostalgic HTML aesthetic, it felt like a deliberate extension of his philosophy of simplicity and structure. I appreciated how it didn’t feel so commercial. It looked like it was made raw, and for the people who searched for his work. This was a refreshing take compared to the cookie-cutter portfolio websites we see artists use today.

I will link it here: https://reas.com/

In the video, Casey Reas starts with the age-old tension between order and chaos. He explains, “chaos is what existed before creation, and order is brought about by god or gods into the world.” For centuries, creation was a divine act of imposing regularity on a chaotic world. As humans ourselves, we sought to illuminate our “godness” through patterns and symmetry.

On the contrary, the early 20th-century Dadaists inverted this relationship. Against a “new” world era confined by scientific laws and societal logic (which had potentially led to the chaos of war), they embraced chance as fundamentally human to take apart what they saw as “the reasonable frauds of men.” The entire focal point of their “chance operations” is to set up the artwork where chance creates beauty in chaos. Artists like Jean Arp and Marcel Duchamp used chance operations not to create chaos, but to rebel against a rigid order they no longer trusted and escape the confines of their own preconceptions, creating something truly unexpected.

Whereas this embrace of randomness, or unexpectation to the human eyes, is not a complete surrender to chaos. The rules–much like the physical laws of the nature–are secretly flowing under. As Reas’s own work demonstrates, his generative systems show that a small amount of “noise” is essential to prevent a static homogeneity. More importantly, why do the simple, inorganic rules create such sophisticated spectacle? I explored the dynamic, emergent complexity–the assembly of the crowd–in the course Robota Psyche.

My presentation, “Power of the Mass”, discussed how simple, inorganic rules governing a crowd can produce an incredibly sophisticated and life-like spectacle. The boundary of rules allows for randomness, but it is the assembly of the crowd that breathes life into the system. It raises the question of whether true creativity lies not in meticulous control, but in designing elegant systems that balance intention with unpredictability.

I would like to end my reflection with a Gerhard Richter quote.

“Above all, it’s never a blind chance, it’s a chance that is always planned but also always surprising and I needed in order to carry on in order to eradicate my mistakes to destroy what I’ve worked out wrong to introduce something different and disruptive I’m often astonished to find how much better chances than I am.”

My Concept

I have a bunch of postcards stuck on the wall next to my bed. On Friday morning, this one caught my eye:

It immediately reminded me of Van Gogh’s paintings (and I think it’s meant to), and I decided that for this assignment I wanted to recreate one of his artworks using a different style. I chose his “Wheat Field with Cypresses” (“The Starry Night” is a tad bit overused), and sought to make it using tiny colored circles. Since for this assignment we had to use loops in some way, I knew I could create waves and spirals of dots to make the kind of “rolling” shapes Gogh used in his painting. I think more than the final result, what I wanted to emphasize in the artwork was the movement of the dots being generated and how that related to the windy, flowy effect in the original painting.

Code I’m proud of

function sky() {
  for (let i=0; i<6; i++){
    // generate circles for the current wave
    let waveY = currentWave * waveSpacing;
    if (waveY <= height * (2/3)) {
      
      // general formula of a wave
      // y = y_0 + sin(kx)*A
      let y = waveY + sin(x * frequency) * amplitude;
      let c = random(skyColors);

      // Store the circle 
      circles.push({x: x, y: y, color: c, wave: currentWave});
    }

    x += xIncrement;

    // Start the next wave after the current wave finishes
    if (x > width) {
      framesSinceLastWave++;

      if (framesSinceLastWave >= waveDelay) {
        currentWave++;
        x = 0;
        framesSinceLastWave = 0;

        // Fill two-thirds of the canvas with sky
        if (currentWave * waveSpacing > height * (2/3)) {
          skyFinished = true;
          stop();
        }
      }
    }
  }
}

I think this part was particularly fun (not really) because it forced me to go back to high-school physics and wave equations. I had to define constants like frequency, amplitude, and wave delay, and figure out their values through trial and error so that I get my desired shape, size, and speed of generation of the waves. There were a lot of new things I learnt through this assignment. For example, I had no idea how to make the trees. That’s when I discovered the beginShape() function, which lets me create any weird polygon I want. Then I realized that I had no idea how to generate the dots so that they stay inside the weird tree shape. Turns out there is some library that I can use for this, but after I decided that that was too much work, I found this code online https://editor.p5js.org/makio135/sketches/O9xQNN6Q  with a pointInPoly() function that was kind of similar to what I wanted. Using this along with Claude, I managed to have two functions that controlled the generation of dots only inside the tree shapes.

I had the most fun while picking out the colors for the different parts of the art piece. I simply used an online color picker (this one specifically) which let me upload the image of the painting, and would give me the hex code of whichever color I placed my cursor on. The hardest part was deciding the coordinates for every vertex of the tree polygons as well as the center points of the bushes and hills. It took a lot of trial and error.

Reflection

I think if I had more time, there are a lot of things I would like to try out with this artwork. For example, I would add an interactive aspect to it where the user could move their cursor around to temporarily jumble up the dots, but then they would float back to their original place and reform the painting. It would be very cool, but I guess complicated to implement as well. I would also like to do a better job in recreating the piece by adding more details, along with experimenting with other shapes beyond waves and spirals. Overall, I believe this assignment has really helped me appreciate how much planning and iteration goes into generative art. It wasn’t just about writing code that “worked,” but about understanding how mathematical ideas like waves or polygons could be translated into visual elements.

I was almost immediately confused as I started listening to Casey’s lecture. He mentioned that “order is what was brought by a God or Gods into the world.” I guess for a long time I assumed that humans were the ones trying to bring order into this chaotic world. But I just realized, it was only chaotic in our minds. All aspects of nature are, by themselves, so beautifully organized and fit together so perfectly; humans have only served to bring disorder. That’s also what makes this entire concept of “chance operations” interesting; if humans actually bring disorder to nature in the name of order, why are they trying to bring a sense of randomness into their art?

Looking at the various artworks Casey presented during his talk, I noticed that no artwork is truly completely random. Either they have some controlling criterion, for example, the artwork for which he stated, “putting the images wherever they wanted to be, with the constraint that they had to be at 90-degree angles”, or they appear to be random at the start and “order begins to emerge as they follow their behaviors”. That said, I don’t have a confident answer to what I feel is the optimum balance between total randomness and complete control, and I believe it’s a paradoxical statement for such artworks.

Casey provided the instructions for one of the pieces, which caught my eye:

Element 5

F2: Line

B1: Move in a straight line

B5: Enter from the opposite edge after moving off the surface

B6: Orient toward the direction of an Element that is touching

B7: Deviate from the current direction

I found it very interesting that it only took that one last step, and the ambiguity of the word ‘deviate’, to create the randomness in the artwork, because every other step is based on strict rules. 

In my work, I hope to incorporate random elements in the form of colors, shapes, and the way in which they interact with each other and the canvas. Particularly in this week’s assignment, I experimented with the randomness of colors. So while I did set my own array of colors that the program chooses from, the frequency with which the colors are chosen and where they are applied for each constituting element of the image are out of my control. For this artwork, I thought this was a nice balance between randomness and control, so that the final image still bears a certain resemblance to Van Gogh’s original piece, and yet comes out different every time.

This week we had to watch Casey Reas’s talk on randomness and computational art. One example that related to me most was his demonstration of controlled randomness as a new creative medium. His example of an 11×11 grid of dots demonstrated this perfectly as the dots moved with increasing random constraints, they transformed from orderly patterns into seemingly chaotic movement. This progression raised a question: at what point does controlled randomness become indistinguishable from chaos?
I don’t believe there’s a definitive answer to this question, which connects to broader philosophical debates about the nature of art itself. Can art truly be controlled, or does its essence lie in the unpredictable? This becomes even more interesting when considering symmetry in computational art. By introducing simple random elements, we often perceive meaningful shapes and patterns, even when those elements are generated through chance, like the pixel art example. This suggests that our interpretation and meaning, making as viewers is as crucial as the artist’s intention.
Reas’s point about how minor parameter adjustments can produce entirely new artistic outcomes resonated strongly with my own work. In this week’s assignment, I experimented with adjusting particle colours and sizes based on the number of connected particles, and witnessed how small changes created dramatically different visual results. This reinforces how computational art explores vast creative possibilities through systematic variation.
Finally, Reas’s discussion of exploiting machine systems and their unique characteristics highlighted an important aspect of digital art, the same foundational artistic concept can be expressed differently depending on the computational system used. To me, this shows how computational art differs to traditional art in the sense that once a piece of ‘traditional’ art has been created, it can’t be changed in its entirety. Whereas computational art can be changed depending on machine type, revealing another layer of computational art.

Many of the featured patterns and algorithms Casey Reas made are very elaborate and very satisfying to see the construction of. Some of them looked like something you might find in the default wallpaper collection you get from purchasing a new touchscreen device. From my perspective, a lot of these pieces could be implemented as a compliment to another primary work to elevate it. For instance with the colorful cancer cell visualization in the video– if I was a cancer cell researcher and I needed to present my research in a presentation I could use visualizations of my data as a design motif throughout my presentation template.

Halfway through the video he talks about chance in art and I was very surprised to see it appear as early as 1916. I think the most notable part of this section is Duchamp’s woodwork involving randomly dropping a piece of string to determine the line of hit cuts and ultimately the shape of the wooden planks.

I find it incredibly fascinating that before the random number game was an accessible computer-generated concept, it was first printed onto paper as a collection of deviatives. The fact that there was a whole book for random strands of numbers really changed my perspective on random numbers. Before watching this video, random numbers were entirely synonymous with random number generation(RNG) through computing. I think this is largely due to my exposure to RNG in video games, which can take many forms in video games from determining the chance of landing a critical hit on an enemy in an RPG to opening a fancy cosmetic in a live service first-person shooter.

Speaking of video games, I thought the featured example using “Fractal Invaders” was really cool and kinda shows how symmetry can turn nonsense into something that you would think had a deeper purpose. It looked like a really interesting idea with the mirroring so it made me wonder what results I could achieve if I did a similar coin toss black/white color decider for a 4×4 grid and mirrored it both vertically and horizontally. I imagine this would probably come up with some really interesting pixel art that could even inspire a more intricate hand drawn illustration based on that pattern.

Overall, I was really impressed with how people would obtain random numbers without computing them– from Duchamp dropping string to decide the line of his cuts to using a flipping through a page filled with random numbers. I think my perspective on chance operations has greatly broadened.

For week 2, we needed to usr some loop to create some form of computational art. I decided to do some form of connecting particles and this was inspired from some work from my previous IM class. I know by altering some simple variables or having some simple visual changes, you can create something very different.

I had Dots placed randomly on the screen and gave each particle a velocity randomly assigned between -3 and 3.If the distance between points was less than 100 pixels, the line would be displayed.

I then wanted to add some more dimension, so I added a NUMBER OF CONNECTIONS variable to keep track of how many lines were coming out of each dot (incrementing by 1). The more connections, the bigger the dot.

// size of dot increases with number of connections
const size = this.baseSize + (this.connections * 2);

One very simple tool in p5.js that I love is the background alpha feature. When redrawing the background, you can add some opacity and you can see the cool trail effect it gives in the image below.

function draw() {
    // background(0, 0, 0);
    background(0, 0, 0, 25); // trail effect

Background – documentation

I wanted to add an additional dimension to the dots – the more connections, the more red, the less connections, the more blue. I used a map function to have the values be on a sort of scale, I needed to use HSB mode for this to work and then back to RGB for the background trial effect.
Blue -> red

display() {
    // colorr of dot changes with number of connections, more connections -> more red
    const hue = map(this.connections, 0, MAX_CONNECTIONS, 200, 0);
    // size of dot increases with number of connections
    const size = this.baseSize + (this.connections * 2);
    
    colorMode(HSB);
    fill(hue, 100, 100);
    //for trail effect - swithc back to rgb
    colorMode(RGB);      
    noStroke();
    ellipse(this.x, this.y, size);
}

I used for loops initalise the random dots, but to also go through each do to check the distance, number of connections, and ‘update’ them.

for (let i = 0; i < dots.length; i++) {
    for (let j = i + 1; j < dots.length; j++) {
        if (dist(dots[i].x, dots[i].y, dots[j].x, dots[j].y) < CONNECTION_DISTANCE) {
            // keep track of connections
            dots[i].connections++;
            dots[j].connections++;
            line(dots[i].x, dots[i].y, dots[j].x, dots[j].y);
        }
    }
}

For interactivity, the user can drag and hold the mouse across the screen to add more dots.