Category: S2026 – Aya

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.

My Concept

For this assignment, I wanted to create something simple, structured, and fully based on the techniques from the Week 2 slides. I decided to build a grid of squares using nested loops, just like the examples shown in class. But instead of keeping the grid static, I wanted it to feel a little more interactive.

My idea was to make the colors shift whenever the mouse is pressed, using the built‑in boolean variable mouseIsPressed from the slides. The end result of my project is a grid of evenly spaced squares that change color in a smooth loop every time you click.

Snippet of the code I’m proud of:

if (mouseIsPressed) {
  colorShift += 2;
}

if (colorShift > 255) {
  colorShift = 0;
}

I’m proud of this part because it uses boolean logic and variable incrementation.

How I made this: 

I started by creating a canvas using createCanvas(600, 400), just like in the examples from class. Then I used nested for loops to place squares across the screen.

To make the squares spaced further apart, I increased the loop step to x += 70 and y += 70. This gives the grid a clean, airy look.

Next, I added a variable called colorShift that starts at 0. Using the boolean variable mouseIsPressed (from the slides), I made the number increase whenever the mouse is clicked. This number is then added into the fill() colors so the squares change color interactively.

I also used simple conditionals (if, else if, else) to change the color depending on how far down the screen the square is.

Finally, I drew each square using rect(x, y, 50, 50) inside the nested loops. Because the loops repeat across the whole canvas, the pattern fills the screen automatically.

Reflection and future ideas

Overall, I’m really happy with how this piece turned out, because it uses simple tools like loops, conditionals, boolean variables, and a bit of animation, yet it still manages to feel interactive. Even though the sketch is built from very basic building blocks, the way everything works together makes the grid feel responsive and alive.

Using mouseIsPressed was especially fun, because it showed me how a single boolean variable can instantly make a sketch interactive. Just clicking the mouse changes the colors across the whole grid, and that small action makes the code fun.

If I had more time or knew more about p5.js, I would like to try more effects. For example, I could make the shapes respond to sound, or create more interactive features like clicking to make new shapes appear. I would also like to experiment with colors to make smoother gradients and more interesting palettes. In the future, I want to keep exploring user interaction and generative art using what I have learned so far and what I will learn next.

References

• Week 2 Slides, (Conditionals, Loops, Boolean Variables) Used for understanding nested loops, mouseIsPressed, relational operators, and conditional logic.
• p5.js Reference https://p5js.org/reference/ Used to check syntax for rect(), fill(), and basic drawing functions.

My Concept:

I started by looking at the links to computer graphics magazines. provided. A recurring theme I noticed is the repeated use of squares, circles, and other geometric shapes. So I knew that I wanted my design to incorporate a heavy geometric theme. As a beginner P5 coder, I wanted to make sure I could execute this idea with what I had learned so far. I ended up creating a square-oriented piece that offers the user interactions to play with, inspired by old computer art magazines. The piece features a canvas covered with animated squares across the grid that change color depending on the mouse’s position (left or right). On top of the dynamic background is a moving square that changes direction with a mouse click, creating a final artwork that evolves through loops. 

Highlight of Sketch:

// i is the variable used for the outer loop and controls the x positions across the canvas.
// j is the variable used for the inner loop and controls the y positions down the canvas. 
for (let i = 0; i <= width; i += 25) {
  for (let j = 0; j <= height; j += 25) {
    
    // r and g represent red and green values, and this line of code generates random color values adding some variation to the work.
    // mouseX controls the blue values and allows the user to move the mouse to change the color of the grid.
    let r = random(200,255);
    let g = random(100,200);
    let b = mouseX;
    
    //stroke created by using the red, green, and blue values initiated above. 120 represents the transparency of the circles.
    // ellipse uses the variables i and j to generate squares at each point of the grid.
    stroke (r, g, b, 120);
    noFill();
    rect(i, j, 20, 20);
  }
}

A particular part of the sketch I am proud of is the use of loops in my code. It was something new we had learned this week, and my incorporation of the inner and outer loop resulted in an outcome I am quite satisfied with and proud of. I am also proud of the randomized color variables in my code and of using mouseX to add user interaction with the colors.

Embedded Sketch:

How this was Made:

I started the process by setting my mind on what I wanted my piece to look like. After setting my mind on a specific idea, I then had to plan out how to execute it. I started my code by initializing my global variables, x and y, to store the current position of the moving square. Then I set speedX and speedY to control the direction and speed of the square’s movement. Then I set a lower frame rate with the frameRate() function to make the animation look cleaner and smoother. Then I used nested loops. An inner and outer loop that controls the grid background. The outer loop moves horizontally across (rows) the canvas, and the inner loops move vertically (columns) across the canvas. I set the red, green, and blue values and created random variables for them to add variety to the grid. The blue values are controlled by mouseX, so the user can change the grid color depending on whether the mouse is on the left or right side of the screen. Then I added the lines of code to create the main moving square. Then, using logical conditionals (or), I was able to have the square’s direction reverse once it hits any edge of the canvas. Finally, to add interaction to the code, I added the mousePressed() function, which allows the user to click the mouse to reverse the square’s direction. Using what I have learned so far, I created this fun final artwork.

Reflection and Future Ideas:

Overall, I am quite satisfied with my final piece and how I was able to combine what I have learned so far to create a fun, interactive piece with p5. Although the loop part and randomized variables part came with some trial and error, at the end I was able to overcome those obstacles and have an outcome I am proud of. For the future, I hope to learn more about p5 and create even more impressive pieces of work, specifically, more dynamic animations.

Concept

I looked throught some of the old computerarts provided and some of the organized and innerric graphs reminded me of the golden curve and the related math arts that I have seen. I remembered that the seeds of the sunflower followed a certain mathematical pattern and decided to use that as the model for my computer art.

I did use AI in this assignment to understand the pattern and mathematical logic the sunflower seeds followed, and to figure out some basic formulas that would allow me to recreate such shapes, but the codes were my own.

Code chunk

for (let pointn = 0; c * sqrt(pointn) <= 150; pointn++) {
    let angle = pointn * 137.5;
    let x = c * sqrt(pointn) * cos(angle);
    let y = c * sqrt(pointn) * sin(angle);
    
    //The code can be played with using many math functions, I tried some and attached them below
    
    //without sqrt
    //let x = (c * (pointn)/10) * cos(angle);
    //let y = (c * (pointn)/10) * sin(angle);

    // logarith(also looks good when made 1*c)
    // let x =5*c * log(pointn) * cos(angle);
    // let y =5*c * log(pointn) * sin(angle);

    //1/log
    // let x =100*c * 1/log(pointn) * cos(angle);
    // let y =100*c * 1/log(pointn) * sin(angle);

    let r = map(x, -300, 300, 80, 255);
    let g = map(y, -300, 300, 80, 255);
    noStroke()
    fill(r, g, (r + g) / 1.65);
    circle(x, y, 3);

The full code is relatively short so I picked the for loop section because I think it shows exactly what loops are helpful for. This chunk of code greatly utalizes the efficency of loops. It would be extremely difficult and time consuming to draw all the dots with accurate spacing by repeated lines of code. The for loop allows drawing and editing of the dots in one line, making it much easier. I also thouht it is intereating that I am able to create different patterns using only change in the mathematical function and slight adjustment to numbers, so I included those modified codes as well.

I was able to recreate the sunflower pattern in resting first, but I thought it looked a bit dull. Because it was a round pattern and included curves, I decided to make it rotate around the center to have a bit of a dillusional effect. I looked up a video tutorial on youtube and learned how to move start point to the center of the canvas and how to rotate it. The effect is pretty good.

Reflection

Drawing a mathematical pattern probably does not really fit the requirement of doing computer art, but I believe the Fibonacci numbers and its related curves do all look quite artistic, and the massive amount of dots needed is an excellent medium for praticing loops. My finished work seems a bit easy and a bit short for an assignment, and I might decide to try something more complicated and in accordance with class difficulties in future assignments.

Another thing is that AI really is quite helpful in the case of understanding scientific or math related concepts. I wouldn’t have been able to figure out all the formulas myself. I will attach my conversation with Gemini in the reference section

References

• https://www.youtube.com/watch?v=i5bs3SPpHdM
• https://www.youtube.com/watch?v=z9d1mxgZ0ag
• https://www.youtube.com/watch?v=3U8-9_WeuKE
• https://www.youtube.com/watch?v=_GkxCIW46to
• https://gemini.google.com/share/4c9531505d04