Month: February 2026

For this assignment I wanted to do something spiraley and trippy. Honestly, I didn’t have a particular vision for this one and figured it out as I went along.

First thing I did was the background. At first I had it be a bunch of overlapping shapes moving randomly accross the screen, but it was too jarring. I ended up simplifying it to what you can see above: an animated perpetual wave of thin white concentric circles over a black background.

if (frameCount % 8 > 6) {
  cc = 29;
} else if (frameCount % 8 > 4) {
  cc = 24;
} else if (frameCount % 8 > 2) {
  cc = 19;
} else {
  cc = 17;
}
while (cc > 1 && cc < 1000) {
  strokeWeight(0.5);
  circle(200, 200, cc);
  cc += 14;
}

As you can see, I used a boolean and frameCount to animate the circles, and a while() loop to draw them. I used the p5 reference library to remind me of how they work and get the finer details right, and I learned about frameCount by watching several youtube videos on animation.

Next I added the eye in the middle using a text box and orienting it so that it aligns with the centermost circle. Pretty simple and straightforward.

  strokeWeight(0);
  textSize(90);
  fill(250);
  textAlign(CENTER, CENTER);
  text("", 210.5, 174.5);

Finally (somehow this was the hardest part), I added the text in the middle and animated it to fade in and out.

 stroke(t);
 if (frameCount % 30 < 15) {
 t = t + 15;
} else if (frameCount % 30 < 30) {
 t = t - 15;
}

for (let x = 200; x < 400; x += 600) {
  for (let y = 20; y < 460; y += 30) {
    textSize(10);
    textFont("Courier New");
    strokeWeight(0.5);
    noFill();
    text(
      "it is only by dying to ourselves that we find life",
      x,
      y,
      [500],
      [10]
    );
  }
}

I used a for() loop to duplicate the text accross the y axis, and a boolean and frameCount to animate the fading. This one was a pain in the ass because I kept messing up the text’s orientation and it took a few tries to get the frame remainders right. I also think the first for() function where I duplicate it accross the x axis is extraneous, but the code messed up when I tried to get rid of it so I just left it in there.

One thing I could potentially add to this is a sound effect or some music to add to the aesthetic. I also feel like I should’ve added an interactive aspect to it; that completely skipped my mind. Otherwise, I’m happy with the final product. It’s nothing too impressive but I think it fits together nicely.

1.   Sketch and Code

Code

2.   Overview

For this assignment, I created an interactive artwork featuring a grid of neon pink “needles” that respond dynamically to user input. The sketch utilizes vector math, coordinate transformations, and mapped interactive feedback.

3.   Concept

The goal of this work was to explore the concept of a sort of “magnetic field” using geometric shapes. I wanted to create something that felt alive under my curser. The choice of a vibrant pink palette against a deep background was inspired by modern neon-noir visuals as I am somewhat interested in cyberpunk styles, and also my favourite color being pink.

4.   Process and Methods

My process focused on moving from a rigid grid to a fluid, reactive environment. I broke the project down into three main layers:

• • The grid: I used a nested for() loop to populate the canvas. By using a spacing variable, I ensured that the elements were perfectly aligned and easy to adjust.
  • Trigonometric alignment: I used trigonometry to calculate the relationship between each grid point and the mouse to make it interactive. I used atan2() for this to determine the specific angle needed for each shape to face the mouse.

let angle = atan2(mouseY - y, mouseX - x);

• • Visual mapping: I used the dist() function to measure how close each point is to the cursor, then used the map() function to link that distance to the stroke weight, length, and color intensity of the lines.

// Calculate how far each point is from the cursor
let d = dist(mouseX, mouseY, x, y);

// Use the distance (d) to drive the visuals
// Closer to mouse = brighter color and thicker lines
let pinkIntensity = map(d, 0, 400, 225, 50);
let weight = map(d, 0, 400, 5, 1);
let lineLen = map(d, 0, 400, 35, 10);

// Set styles
stroke(255, pinkIntensity, 220); // RGB: Pink variations

5.  Technical Details

• • I implemented push() and pop() within the loops, which allowed me to use translate() to move the origin to each grid point and rotate(). If not for this, every line would rotate around the top-left corner (0,0) of the screen rather than its own center.
  • To achieve the motion blur effect, I set the transparency to be 30 in in the draw() loop, making it so that the previous frames don’t disappear immediately, leaving a trail behind the moving lines.
  • Because the lines are drawn from a negative to positive value relative to the translated center, the rotation occurs perfectly around the midpoint of the line.

line(-lineLen, 0, lineLen, 0);

• • The color is updated dynamically where, as the mouse moves closer, the green channel in RGB increases, shifting the color from a deep purple-pink to a bright, glowing, neon pink.

let pinkIntensity = map(d, 0, 400, 225, 50);

6.  Reflection

This assignment developed my understanding of the transformation matrix (push, pop, translate, rotate). My biggest challenge was getting the rotation to feel natural; initially, the lines were spinning wildly, which was how I found the map() function, which helped me map the distance to the angle. Tiny adjustments to the mapping ranges completely changed the mood of my work.

7.  Resources

• • https://p5js.org/

This reading affected me by helping me understand that the coded system itself is the creative act. Which led me to the question “What point does the computer go from being a tool to a collaborator helping in the creative process?” .When randomness is introduced, the outcome is no longer fully controlled by the artist, and this lack of control is actually very intentional. The artist writes instructions, but the results can be unexpected, and that uncertainty becomes part of the artwork. I noticed this idea reflected clearly in the code I wrote for the assignment. I created a system with rules for line width, square size, and color, but each of these elements was randomized within certain limitations. For example, the line width was random between one and four, and the square size was random between 20 and 45. This allowed me to maintain some control over the overall structure while still allowing the visuals to remain unpredictable. The outcome felt more alive and dynamic because it was never exactly the same.I planned to incorporate random elements into my work by using color, line weight, and shape size. As the speaker Cassie Reas explains, us, me, the artist (coder), designs the rules of a system rather than controlling a single outcome, treating the code as a set of rules that guide the work instead of controlling exactly how it turns out.

The optimum balance is achievable by controlling the rules without limiting the outcomes. Setting constraints allows the work to stay coherent while still being unpredictable. I feel that the ideal balance exists when I can predict the behavior of the system, but not the final visual result. In my work, I was able to control what elements could vary and the range in which they changed, but I could not predict the exact combinations of square size, line width, and color that appeared every two frames.

 Casey Reas mentions the term system based art, which is when the artwork functions as a system defined by behaviors rather than a single image. In this approach, the work exists as an ongoing process instead of a finished product. This idea connects closely to my piece, since it generates new variations every time it runs, making no single outcome the definitive version of the artwork.

Concept

For this assignment, I took inspiration from the computer graphics pdf attached to this assignment’s description (photo below).

Building on this graphic, I made a simple grid with squares inside it. I initially wanted to create the moving graphics, but I could not figure out how. Therefore, I decided to use some skills we learned in class on changing colors when the mouse is inside the squares. Finally, I ended up with my final design, where the group of squares changes to the colors of the rainbow when the mouse hovers over them, keeping all the other cells still white.

Here is my final sketch:

Code I am Proud of:

for (let r = 0; r < 5; r++) {
    for (let c = 0; c < 7; c++) {
//calculates where each cell should start based on the row and column and shifts by cell size
      let cellX = c * 80;
      let cellY = r * 80;

      square(cellX, cellY, 80);
      square(cellX + 10, cellY + 10, 60);
      square(cellX + 20, cellY + 20, 40);
      square(cellX + 30, cellY + 30, 20);
  }
}

I am particularly proud of my code which creates the grid, because I optimized it. Initially, I set up the grid with four different for() loops, which basically keep printing a grid but make it smaller each time to create the inner squares effect. Then, I realized I could combine them all into a single for loop by storing each outer square’s starting X and Y locations, and then writing multiple square() functions, shifting each one according to how inner the square is. This also allowed me to select a different color for each square when the mouse hovers over it.

Reflection and Future Improvements:

Overall, I am quite happy with my sketch and enjoyed the process of creating it. For the future, I would definitely like to implement some automatic motion into my sketch. I would probably want to recreate the original sketch I took inspiration from, with the moving inner squares. Additionally, I would like to work on a second version of this sketch where the color of the inner squares only changes if the mouse is directly over it, not if the mouse is generally inside any of the squares within that group of squares.

In my work, I plan to incorporate randomness as a major element, as I believe having it consist solely of order and rigid structure will yield a boring, fixed outcome. As the speaker mentions in his talk, randomness breaks the artist’s habits, and I completely agree. Randomness allows for a more lively and lifelike outcome. Reas mentions that when an artist sticks to controlling evrything they tend to repeat patterns and styles, so randomness allows the artist to break free from patterns they plan. In my own work, I tend to be more satisfied with my outcomes when randomness is a strong component, as it adds an element of surprise and spontaneity, which, in my opinion, deepens the work through the unexpectedness of the results. Reas’s speech allowed me to appreciate randomness more and helped me understand my tendency to be more satisfied with my code when elements of randomness are involved.

Although I find randomness a very important and desired element of my work, I do believe there needs to be a balance between total randomness and complete control. When working on a piece, finding that sweet spot of fixed and spontaneous is important. If the code consists of too much randomness, it becomes too chaotic or even messy. However, if it is completely controlled by the artist, there is a sense of. rigid and repeated patterns. Finding the balance between the two depends on the specific work, but for the most part, an equal share of both elements allows for a perfectly balanced piece. Reas also agrees that pure randomness alone in art is not enough to make a good piece. Sure, it may improve a very rigidly structured piece, but some control is necessary. Reas’s speech supports the idea that randomness allows for variation and a less predictable outcome; however, order and structure are what make art artistic and not accidental. 

After all the classes, that made me go by the golden rule “If it works don’t touch it”, it was hard to register that I am to create something that should be looking good. In the absence of a well documented passing rubric, every choice had to be questioned. But against what; The effort I put in, the creativity I come up with, or what my person sitting next to me thinks of it? I began on the rather escaping choice, a computer screen. Indeed a typical computer science student’s choice, how I think of it as an escape. Giving myself some time by spending that drawing the keyboard, and mouse. Well that was the moment I had the first thought shouting “It should look good to me”. The Buttons. So many buttons, (I did that before we studied for loops). Initially I planned 2 big white blocks to represent the buttons. When I went from 2 to 57, its hard to point out. My best guess is when I looked as my laptop’s keyboard and it had all the character to it and one I drew in P5 did not.

//keyboard
  line(250, 600, 200, 400)
  
  
  
  
  fill(0)
  rect(20, 500, 470,140)
  fill(220)
  rect(25, 510, 20,20)
  rect(45, 510, 20,20)
  rect(65, 510, 20,20)
  rect(85, 510, 20,20)
  rect(105, 510, 20,20)
  rect(125, 510, 20,20)
  rect(145, 510, 20,20)
  rect(165, 510, 20,20)
  rect(185, 510, 20,20)
  rect(205, 510, 20,20)
  rect(225, 510, 20,20)
  rect(245, 510, 20,20)
  rect(265, 510, 20,20)
  rect(285, 510, 20,20)
  rect(325, 510, 20,20)
  rect(345, 510, 20,20)
  rect(365, 510, 20,20)
  rect(405, 510, 20,20)
  rect(425, 510, 20,20)
  rect(445, 510, 20,20)
  rect(465, 510, 20,20)
  
  rect(25, 540, 20,20)
  rect(45, 540, 220,20)
  rect(265, 540, 40,20)
  
  
  
  rect(25, 560, 20,20)
  rect(45, 560, 240,20)
  rect(285, 560, 20,20)
  
  rect(25, 580, 20,20)
  rect(45, 580, 220,20)
  rect(265, 580, 40,20)
  
  rect(25, 600, 20,20)
  rect(45, 600, 40,20)
  rect(85, 600, 120,20)
  rect(205, 600, 20,20)
  rect(225, 600, 20,20);
  rect(245, 600, 20,20);
  rect(265, 600, 40,20)
  
  
  rect(325, 540, 20,20)
  rect(345, 540, 20,20)
  rect(365, 540, 20,20)
  
  rect(325, 600, 20,20)
  rect(345, 600, 20,20)
  rect(365, 600, 20,20)
  rect(345, 580, 20,20)
  
  
  
  rect(405, 540, 20,20)
  rect(425, 540, 20,20)
  rect(445, 540, 20,20)
  rect(465, 540, 20,20)
  
  
  rect(405, 560, 20,20)
  rect(425, 560, 20,20)
  rect(445, 560, 20,20)
  rect(465, 560, 20,20)
  
  
  rect(405, 580, 20,20)
  rect(425, 580, 20,20)
  rect(445, 580, 20,20)
  rect(465, 580, 20,40)
  
  
  
  rect(405, 600, 40,20)
  rect(445, 600, 20,20)
  
  
  
  

Then came the scary part, what to draw inside the screen frame. I had a lot of interest in cybersecurity or to honest in HACKING. It’s funny to me that my sketch looked more of like a imprisoned thief. Well this reminded me of an other golden rule form the high school i.e. “Don’t get caught” and I just kept going on with that. Lastly the glasses, they felt like a creating something from nothing. Even thou I did them in the loving memory of my classes I lost last semester, I was a happy experience. For future I want to add more colors, I did not add them this time because I wanted to very specific about each color I am adding and what it will represent. Did I not do it out of laziness or lack of understanding of relationships of colors with emotions? My answer to this question is biased but as the semester proceeds, it will probably hopefully go away. here is the website I used to read p5.js documentation; https://p5js.org/reference/ The sketch

Your concept:

The concept of my drawing comes from the early generative art from the 1970s from the Computer Graphics magazine, specifically pages 14 and 30, which used simple geometric shapes and repetition. Something I liked specifically about this piece was how it used grids, and how I can envision myself using the grid coding we learned in class and apply it. I wanted to create a retro piece using the P5JS tool, focusing on grids, squares, and random variation. The artwork I created changes every 2 frames through random color, random line weight, and random square size, creating a  glitch like pattern. I watched a youtube tutorial which helped me understand how the random() code works which allowed me to apply it to my piece. Instead of static shapes, I wanted the grid to feel unpredictable and constantly changing, but I didn’t want it to be overwhelming, so I set the frame rate to 2.

Another thing I wanted to do was set the background as black, so when you hover over the squares, depending on which square you hover over, it will become black and essentially give the effect of it disappearing. This is the small interactive element of mouse hover, which I adapted from our class code.

Page 14 from the magazine that inspired my work:

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

//random square size+lineWidth from youtube video + color from p5.js example
       let squareSize= random(20,45);
       let lineWidth= random(1,4);
       strokeWeight(lineWidth);
       stroke(random(255),random(255),random(255));
       
       
       //When mouse hovers inside the square boundaries the stroke changes to black using the same condition we learned in class
       if(mouseX > x&& mouseX <x + 50 && mouseY > y && mouseY < y +50) {
         stroke (0);
       }
       
       //draw square the first square is the main one for this grid and the second square is smaller and centered within the first square using simple math and experimentation to find the correct placement of the second square 
       rect(x,y,squareSize,squareSize);
       rect(x+10,y+10,squareSize-20,squareSize-20);

 

A part of the code I’m proud of specifically is how I was able to incorporate the random () effect, especially the part of the code where the squares have random size variation, as well as random stroke weight and color variation . All o these affects become more noticeable because my sketch runs at 2 frames per second.

I’m proud of this because I was able to learn the random size and line weight from a YouTube tutorial and successfully adapt it to my own square design. I used the random color idea from a p5.js example, but I changed it from fill() to stroke() to match my outline based work. By combining all three random elements size, line weight, and color the pattern becomes visually interesting, even though the grid structure stays the same. I’m proud of how I was able to mix what we learned in class with new techniques I found on my own. Im also proud of how I was able to adjust the square sizes using simple math adding to x/y and subtracting from some to create a clean square within square effect.

For the mouse hover condition I was able to adjust it to work inside the grid and change the stroke () to a fill(), as a beginner I was able to take a concept we learned in class and adapt I to my code. I referenced directly from what we coded during class but adjusted it to my code:

    (Code in class)

if (mouseX > 50 && mouseX < 400 && mouseY > 100 && mouseY < 200) {

    fill(‘pink’);

}

In my version I replaced the fixed numbers with the loop variables X and Y so the hover effect works for every square in the grid instead of just one rectangle

Embedded sketch:

Reflection and ideas for future work or improvements:

Working on the second P5JS assignment, I was able to understand how simple shapes can become interesting and how code can become more interesting when it is combined with randomness. Even though the grid I created is very structured, I think the addition of random size, color, and line weight makes every frame feel more unique. Through this assignment, I was able to mix different ideas from different places: inspiration from the 1977 Computer Graphics and Art magazine, the YouTube example, the p5.js example, and the hover condition from our class code. I was also able to acknowledge the importance of the draw loop. Because my sketch runs at two frames per second, I was able to clearly apply and see each new variation. An idea for a future improvement I can make is experimenting with different shapes or mixed geometry to see how randomness affects them. I could also try adding rotation or movement so the squares slowly shift or spin over time and experiment with more complex mathematical code. Another idea is adding more layers of shapes and seeing how I can adapt this style to more complex code.

References:

Inspiration from Graphic magazine:

COMPUTER GRAPHICS AND ART Aug1977 Page 14 and Page 30

Random Color from this example :

https://editor.p5js.org/aferriss/sketches/HJKCR03uG#:~:text=1,let%20shapeColor%3B&text=2,%E2%80%8B&text=3,function%20setup()%20%7B&text=4,createCanvas(400%2C%20400)%3B&text=5

Random Line weight and shape size :

https://youtu.be/POn4cZ0jL-o?si=D8w6gaTpVwLFj8qH

What is randomness? The way people describe it will always be different from one another. Yet it boils down to the same general boiler phrase, “it is unpredictable.” We say it is, but at the same time, randomness can be predicted over a large sample. We say random often in day-to-day life, intentionally or unintentionally, like “oh! this randomly happened today!” or “I just thought to do this today randomly!” It never really is random, is it? There is always something behind an event. This brings me to something Casey Reas said, and that is true randomness. He mentions it multiple times, saying that it has been used. However, at most, it is pseudo-random, and we can delve deeper into this and discuss causation and so on, but that is not my point here. I am aware that I might be nitpicking here; however, to me, “random” implies a lack of a proper explanation relative to a model or an event. Or to simplify it, it’s lawful unpredictability.

For my second assignment, my sketch was a 3D version of Conway’s Game of Life. Which, funnily enough, is how cells interact when they are given a certain set of rules. I created this before watching the lecture, so while I was watching it, I kept thinking about the sketch. The result of running such a sketch may seem random to some person you choose off the street, but at a deep level, they are following a set of rules that the person may not know. And that is what randomness to me is, a “random” event or randomness is never truly random, as it will always follow a set rule; we call it random because we do not know what that rule is. The lecture made me realize that I was already treating randomness as epistemic, but I hadn’t articulated it this clearly until seeing generative systems framed this way.