Category: S2026 – Aya

I see randomness as introducing freedom into structured codes when the main goal is to actually create art. When the code serves a practical purpose. However, randomness should remain a functional tool rather than a defining element. I am not interested in letting randomness dominate a work or become its central focus as it should only be a function tool. In my own work, I would incorporate randomness through variations like line density and spacing.

The video shows that randomness are novel artistic strategies, seen as a departure from traditional understandings of art. This contradicts with what I imagine about artistic creation. The speaker treats randomness in a pure, unbiased unpredictability. I find this definition too narrow. To me, randomness is not something just related to machines. But artists, especially abstractionists, embody a human form of randomness. This kind of randomness is enriched with emotion, intention, and expression, rather than just about meaning.

This relates to why I think I struggle to connect with how the speaker uses randomness in their work. As I believe art should exist beyond only certain shapes. Its beauty lies in the emotions it conveys, also the expressions it carries. There should be a sense of presence, or soul, behind the canvas, whether it is physical or digital. The speaker’s approach feels excessive, turning the work into an exploration of randomness rather than emotionally resonating artistic expressions.

In my opinion, the optimal balance is to be in the middle between complete control and randomness, and this is where unpredictability comes but it is always leading towards both emotional and expressive goals.

The scale of randomness I find meaningful is one that is guided towards expression. For example, a composition made of dense, chaotic lines which are generated through controlled code and being refined later could actually express the pressure of modern life more with moments of openness appearing as wider gaps in the structure. This balance of control and unpredictability represents what I think of randomness which is one that supports emotional meaning without overwhelming it.

I was inspired by the video presented by Casey Reas to think about the computer not only as a means to create art but also as a means to look outside my own creative habits. Randomness helps us create results we wouldn’t normally think of, even if we’re the ones stating the rules. Reas’ talk made me recognize that there’s something about that unpredictability that draws me in, and it makes me want to look more closely at every detail. In my future works, I want to incorporate randomness so that each time I press play in p5.js, my artwork will be slightly different. Instead of placing the object in a specific location on the screen, I could allow the computer to have a range, such as allowing a circle to be placed anywhere between the left and right sides of the screen. It’s a simple way to stay within my rules while still letting the outcome surprise me every time the code runs.

I believe that the best combination of total randomness and total control is to have a clear structure and still allow for unexpected events. Before viewing Reas’ presentation, I believed that art had to be carefully planned, and I did not understand how randomness could be meaningful or beautiful. But seeing how small and unpredictable changes could make a piece come alive changed my perspective. It interested me and engaged me. I enjoy knowing that I am in control but also that I can be surprised by the unexpected result. This is similar to the concept of the computer being an ‘obedient tool,’ as Michael Noll quoted that Reas has stated in 24:07 of the video. It follows my rules flawlessly but uses its power for ‘controlled randomness’ to create something entirely new that I could not have done myself.

 

CONCEPT

While I was looking up tutorials and creative coding examples, I found a YouTube tutorial by Professor Chris. I used his tutorial for building the basic grid as my starting point. I used nested for loops to generate a grid of rows and columns, then added an interactive “spotlight” effect that measures the distance between the moving light and each shape (you can see it clearly through the trail it leaves behind). As the spotlight gets closer, I use the map() function to make the shapes grow, so the grid responds more dynamically, similar to the tutorial that I watched.

I added more by testing different values and adding my own features. I brought in what we did from our Week 2 exercise by making the spotlight move on its own and bounce when it hits the edges of the canvas. To make the motion feel smoother and more interesting, I adjusted the background opacity, which left a ghost trail effect, and I also experimented with other values to see how they changed the overall look. This effect helps create a smoother motion and makes the spotlight’s path more visible as it moves around.

HIGHLIGHT

One thing I accidentally did in my code was adding two values to background(), and I was surprised when it created a ghosting effect that followed my circle everywhere. But when I saw it happening, I decided to keep it because it honestly looked better and more interesting than my previous version.

  //background & ghost effect
function draw() {
  background(255, 8);

REFLECTION

Overall, even though I didn’t have a specific concept at first and I was mostly just playing around with it, I really loved how it turned out. I honestly didn’t expect the final result, so I’m proud of it. It surprised me how something that started as random experimenting ended up looking intentional and visually satisfying. At the same time, this project also took me a while because I kept testing and adjusting things until it felt right. Sometimes when I experiment with different values, my code ends up breaking, so I use ChatGPT to help me figure out why what I changed isn’t working. While I enjoyed the process, I learned that it would probably be easier if I had at least a simple concept or direction in mind first so I don’t get too lost while experimenting. One improvement I still want to try is adding more color, like a gradient trail, because I feel like it would make the piece look even more alive and add more personality to the piece. I tried thinking of ways to do it, but it felt a bit complicated for me this time, especially while I was still figuring out the main logic of the animation. Maybe next time, once I’m more confident with the code, I’ll push it further and make my work more colorful and expressive.

Sources: https://p5js.org/reference/ and  https://youtu.be/MzD7W6Vt6LA?si=EnNemvdZ7Goaw21a

 

 

For my self-portrait, I decided to create a dancing flower instead of a literal portrait. I initially attempted to work on an actual self-portrait, but with the skills I have so far, it kept looking unrealistic, and my hair ended up looking like a mushroom (no, literally). Rather than forcing a mushroom-headed portrait, I chose to represent myself through a dancing flower. This allowed me to focus on practicing primitive shapes, simple animation, and overall composition.

The sketch shows a dancing flower in a simple grass field. The petals include four main petals and diagonal petals placed around the corners of the flower. I kept the background minimal, and focused mostly on the flower itself. I also tried to make the petals feel slightly more three-dimensional by changing their colors and shades, and I added a subtle border around the center of the flower to enhance that effect, but I don’t think it’s noticeable.

fill(245, 120, 160); //background petals color
 angleMode(DEGREES);
 rotate(45);
 ellipse(270 + Petals, -59 - Petals, 35, 55); //right base
 ellipse(270 - Petals, -59 - Petals, 35, 55); //right base
 ellipse(270 + Petals, -59 + Petals, 35, 55); //right top petals
 resetMatrix();
 rotate(145);
 ellipse(-60 + Petals, -225 - Petals, 35, 55); //left base
 ellipse(-60 - Petals, -225 - Petals, 35, 55); //left base
 ellipse(-60 + Petals, -220 + Petals, 35, 55); //left top petals

 

I’m proud of this section of my code because the most challenging part of the sketch was creating the diagonal petals. I learned that in p5.js, shapes are rotated by rotating the canvas itself rather than rotating individual ellipses. I figured out how to use angleMode(DEGREES) and rotate() by referencing this forum post: https://forum.code.org/t/ellipse-rotate-on-an-axis/35650 .

After that, I just experimented and adjusted the values manually to place each petal correctly. I also searched online to learn how to use resetMatrix(), since each group of petals needed a different rotation angle. Honestly, this part involved a lot of trial and error, but I got to understand how transformations work.

Embedded sketch:

I mainly used the concepts I learned in class, except for the diagonal petals, which I learned to do using the forum post I referenced earlier. I also google-searched how to reset the rotation so that I could adjust each group of petals seperately.

Overall, this assignment was a nice introduction to how p5.js works and how to use code to create and manipulate visual elements. While working on this assignment, I realized that there is more than one way to create something, and that sometimes the process involves a lot of trial and error. I’m excited to see what I come up with next in my sketches and how I (hopefully) continue to improve.

While listening to Casey Reas’s talk, I felt that he was insinuating that his best work is the one that arises when no control is there and when there is an extent of randomness. I beg to differ. The idea of randomness, in my opinion, means allowing the randomness to guide you to another step towards your goal or towards something that satisfies you. This should not be misinterpreted as the idea that randomness is bad. I think that randomness is beneficial when you’re not going rampant without an objective in mind. It can help if let’s say you’re creating a painting with a goal in mind of what aesthetic you want to go for. If your colors mix to create one not intended, or if certain objects or designs are placed at random, that is good. It helps you alter your perspective on how to go next to achieve your goal. Complete order is not the best. Because then you would get stuck if something goes amiss, instead of figuring out how this mistake can actually change your path or even add a new perspective or way to go on about things. He usually, i realized, only speaks only about randomness in a very black and white perspective using only the dicitionary surface level definition. He describes it as something almost intentional. I’m not sure if I fully agree with that particular perspective he had. This may lead people to actually strive for randomness, which is, in my opinion, absolutely not what randomness is. I believe that if it’s intentional, it isn’t really random. Now he brought up something interesting, which was Marcel Duchamp’s work. That particular point was one of the few points in the talk that almost shifted my perspective or opinion regarding Reas’s stand on randomness and order, and where I myself stand on that topic.  After hearing about Duchamp’s work, I was intrigued by whether intentional randomness is considered randomness. Yet again, his work was a critique of order. So that raises the question of what randomness really is.

I wish to include randomness in my work by allowing things that go wrong in my work to simply guide me to a new perspective or way of doing things. For instance, if I were to make a mistake in a code for a project, instead of completely deleting or changing the code, I would see how I can actually use the error for my own benefit and use it to my advantage to give me a new idea, for example. I would not necessarily start a project blindly in the name of randomness; I would just use things that do not go according to my plan to help me find new ways to reach my target.

I believe randomness should not go uncontrolled. Uncontrolled randomness can lead you to forget about your objective, or it can completely go out of control, and you wouldn’t be able to fix certain things that went wrong and how to fix them, since everything happened randomly without a plan. If randomness is within a plan, I think that is optimal. If randomness is the sole driving force of a piece of work, I do not believe that is optimal or efficient.

My Concept:

When I first started thinking about this project, I wanted to build something mosaic-like or pixelated, but the coloring of each of the rows was too complicated and required certain tools on p5 that I was not particularly comfortable with using yet, especially since I’m a beginner. So I started thinking and reflecting on the computer art examples provided to us and decided to create an interactive static TV error page that looks like this:

I chose this because it was something I could create using for loops and grids, and it also resembled modern abstract art. I also added some interactive elements or game-like structures to the sketch, like a button that introduces the sketch.

This is the final result:

The Process:

I initially built the first layer of rectangles of the error page using a nested for loop. Something confusing happened: the rectangles I initially set extended beyond the limits I set, which I realized was because I set the condition to be <= rather than just <. Once I understood this, the separation of the blocks became much easier.

My initial plans for the coloring were for the colors just to be static, similar to the error pages, but after doing my research and watching tutorials, I realized I would have had to create arrays and many more variables, which were beyond my existing knowledge and information.

That was when my entire sketch got deleted, and I could not recover it.

I had to restart my sketch from scratch, which was frustrating, but since I had already created it before, I remembered exactly what I did, so all went well. This also allowed me to make some changes, which ultimately made my result and process much more efficient. Since error pages come in very particular dimensions, I altered the width of the page from 400 to 490 so the division and building process of the error page’s blocks could be easier

I still had to figure out how to integrate coloring into the page, which is when I decided to use Microsoft CoPilot when it reminded me that I could use the random() function we learned in class.

I integrated the random function to generate random colors across the rgb hex, which worked! I was surprised because I did not know I could use the random function for colors.

That was when I decided to create an interactive element to the mosaic/error page. I decided to make it so that if you press the page, an “error” appears or the “mosaic.” I realized afterwards that no one seeing the piece would think of randomly clicking the page, which would make all my work go to waste. This is why I opted to create a “do not touch” button, which would make people curious to touch it. I used the p5 reference page to figure out how to add text to the page.

What Didn’t Work:

I tried to make the button bounce across the frame if the mouse was pressed outside the button’s boundaries, but that just messed up the main function of the button. So if I clicked on the button after it moved around, it would not lead me to the error page. I think I would have needed to create more variables for it to work.

Snippet of Code I’m Proud of:

I don’t necessarily have a favorite section in my code that I’m particularly fond of. But that is because every nested for loop integrates an if function within it, which is what I am most proud of in my code, since I managed to figure it out with a few trials.

//creating the first layer of the error page
for(let x=0; x<=width; x+=70){
for(let y=0; y<270; y+=270){ 
  if(mouseIsPressed&&mouseX>=205&&mouseX<=285&&mouseY>=155&&mouseY<=245){
    fill(random(255), random(255), random(255)); //to generate the color effect of error page
    noStroke();
     rect(x, y, 70, 270);
  } 
}
}

 

Reflection/Future:

I am pretty satisfied with the outcome; my favorite part of it would probably be how the colors of the error page keep alternating and are never static (pretty ironic considering my initial plan was for the colors to be static). I do wish, however, that I could have created a more complex mosaic or motion across the sketch, but considering how the sketch turned out I’m quite happy. In future work I would like to create more complex grids with many more conditions and integrating other interative elements to it. Especially arrays. I would really like to learn more about how to use arrays since all of the tutorials I tried to watch included them.

 

My concept of creating loops within this ring was to use the for and let commands to signal whether if the value satisfies this statement go for this number, or if the number doesńt satisfy the first condition set it might satisfy another condition. For the animation part I was thinking of first off setting G as a variable equal to the radius of circle + sin which is to move and go around in and out.

 

In terms of the code I am particularly proud of the lines for (let r = 10; r <= 280; r +=10) as I felt like I gave my code a specific radius to the width of the generative rings. Also, I like the code text(“&Generative Rings”) just because it was a little gimmick and emoji that I wanna create as an aesthetic to my project. Also I am proud of the code: let g = r+sin(frameCount * 0.05) * 10; because when having sin within the formula this allows the output to blink in and out like a wave and the frame count I set it to be *10 blinking in order to blink in and out faster but not too fast.

for (let r = 10; r <= 280; r += 10) {
let g = r+sin(frameCount * 0.05) * 10;
ellipse(200, 200, g, g);

<iframe src=”https://editor.p5js.org/po2127/full/cqCZ4-6WU”></iframe>

https://editor.p5js.org/po2127/full/cqCZ4-6WU

Cites reference:

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

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

In terms of reflection on this work I was proud that as I once did a little bit of loops before when I was in high school for only 1 class and made me recall how the accumulated knowledge from that time really helped me get a better grasp at loops now for this project and I am able to apply this concept in more creative ways like this, and I also appreciated how to make animations using coding for the very first time, ideas for improvement would be to experiment with different types of loops not just for but incorporating others such as if else statements and that we have other formulas to make animations using coding.

My concept:
For the first assignment of this course, I began by thinking about how I would like to create my self-portrait. I was inspired by looking at different examples from other students and animations of different things. As I reflected on who I am and what I like, I immediately thought of the Blooket character I always chose, and I decided that it would be a perfect way to represent myself. I attempted to create a wolf animation inspired by the Blooket version using 2D shapes and colors, and I wanted to add a creative touch by including sunglasses, as I felt they fit the image and personality I’m trying to display. Below is the reference image for the Blooket animation:

Embedded Sketch:

My vision was for the wolf to have sunglasses that go on and off. As a beginner in coding, I was able to create this effect by programming the glasses to move up and back down using the simple (mouseY) on the wolf’s face. This represents how I wanted the animation to be shown:

A Code I’m proud of:
A part of the code I am particularly proud of in this assignment is the eyes, along with the glasses. While creating the eyes, it took me a long time to adjust the edges and curves of the eye, then find the perfect size for the pupil, followed by adjusting the placement of the small white circles that makes the eye look more realistic. I tried with many different shapes to find what fit best, including circles, ellipses, and rectangles, in a variety of sizes.

//Eyes - In three parts:
//The wider white part of the eyes
fill("white");
rect(155, 190, 50, 50, 15, 10, 40, 20);
rect(240, 190, 50, 50, 15, 10, 40, 20);

//The pupils as black ovals 
fill(0);
ellipse(233, 195, 28, 40);
ellipse(148, 195, 28, 40);

//The small white circles to add a better look
fill("white");
circle(150, 207, 13);
circle(235, 207, 13);

//Glasses with movement
  fill(0);
  rect(155, mouseY, 60, 50, 10, 10, 50, 50);
  rect(240, mouseY, 60, 50, 10, 10, 50, 50);
  rect(197, mouseY, 30, 10, 5, 5, 5, 5);

Reflection and ideas for future work or improvements:
Overall, I am satisfied with the outcome of this assignment, especially since it was my first coding project and I completed it independently. I was able to use different references from the official p5.js website, along with the slides provided in class, to apply what I learned and create this self-portrait. For future work, I would like to improve the complexity of shapes and add more detail to the image. Additionally, I hope to further develop my coding skills so I can program the sunglasses to move more realistically, sliding up onto the wolf’s head and back down over the eyes, similar to how sunglasses work in real life.

References:
In this sketch, I used the class weekly slides covered provided by the professor, along with the p5 website, specifically the “Reference” page to explore different things I can add and control.
https://p5js.org/reference/ 

I hope to incorporate randomness as a touch of freedom to the well ordered code if I am intending to make a work of art, but use it as a functional tool if the work is to be of practical use. I wouldn’t want to use too much randomness, and I don’t want to make randomness the center of focus. The video mentioned randomness and chance and demonstrated it as a novel and  individual element in art, which deviates from my understanding of what art is. The speaker seems to be defining randomness using its most limited definition: true randomness generated without bias, unlike what the human brain would give, and claimed that artistis used to be responsible for order.  I personaly would like to believe that randomness is not so strictly defined, and that artists, especially the abstractionist, are probably the most random people among the population apart from psychopaths. They are the human end of randomess, and what they exhibit is a randomness enriched with meaning, emotion and expression.

This is why the way the speaker uses randomness as an artist is not something I would agree with. I believe art should be something more than the shapes and forms of the surface. The beauty ought to lie in the emotions and expression depicted through the work. There is a soul behind the cavas, whether physical or electronic. The extend to which the speaker pursures randomness is excessive. It is more a research of randomness rather than art. The lines and shapes created contain no meaning, and is a mere experiment that is goodlooking. There is no soul behind this. I don’t see this differently as a graph that may be formed from the data of a failed scientific experiment. The scale of randomness in art I would prefer is when the artist tries to express something through the randomness. For example: A work of random lines and connections that resulted from controlled code and processing afterwards that is aimed at expressing the pressure of modernlife and slight moments of relaxation people find within (I have this in my mind as a graph of crowded random lines where the gaps are bigger in some places). This would be my ideal of the scale of randomness: controlled and not covering over the emotions or the “soul”.

When I watched Casey Reas’ Eyeo talk on Chance operations, I started thinking differently about how i use control in my art. Reas explains that the computer is not just a tool that follows orders, but a creative system that can use chance in a planned way. One part that really stood out to me was when he talked about artists like Sol LeWitt, where the instructions are the artwork and the final image is just one version of many possibilities. That made me realize that art does not always need to be fully planned to be meaningful. I noticed that in my own work I usually avoid randomness, especially when I paint portraits. I like to control the faces, expressions, and details, and I feel like adding random elements could ruin the image I worked hard on. I like knowing what the final result will look like and follow the structured plan of how it’s suppose to turn out. But Reas helped me see that even when a system creates something unexpected, it still comes from the artist’s ideas and decisions. Making me realize even when mistakes are made, sometimes it still helps us see that it can turn the thing we are creating better (whether it’s planned or not).

Before watching the talk, I thought randomness mostly made things messy and out of control. Now I understand that randomness can be planned and guided by rules. Reas explains how simple systems can create complex behaviors, and that really changed how I think about art. If I use chance in my own projects, I want to start with movement. Movement creates emotion and makes the artwork feel alive, and letting it behave in a slightly unpredictable way can make it more interesting. I also think randomness can make my projects more unique instead of looking repetitive. At the same time, I believe there needs to be a balance between chaos and structure. If a project is formal or important, too much randomness can feel a bit overwhelming, confusing or disrespectful. For me, the best balance is when I control the main rules but let chance decide small details, like position or scale. After watching Reas’ talk, I see chance not as something that ruins my work, but as something that helps me explore new ideas and think differently when working with projects, art, assignments, writing and etc.