Author: Mouza AlMheiri

From the reading, I understood interactivity as a cyclic process where two actors continuously listen, think, and speak. I would say that I agree with his idea he explains the full idea in the reading clearly and uses relevant examples when introducing a new phrase or concept and I found myself easily understanding what he was saying and connecting it to my own works for example in my assignment 3 I responded to The idea of interactivity by allowing the users to generate new stars which fast like a small version of the listening and speaking and thinking cycle Crawford describes.

I really liked Crawford’s examples and his use of scenarios because they helped me visualize his concept instead of just reading a definition. His conversation example, especially the moment where “Step One: Fredegund listens to Gomer, paying close attention to Gomer’s words…,” made the idea much easier for me to grasp. The refrigerator door example also challenged one of my assumptions; before reading this, I probably would have called anything that reacts “interactive,” but now I see the difference between low interactivity (technically responsive but shallow) and high interactivity (meaningful and thoughtful). What stood out most is that strong interactivity requires all three parts to work well with no trading off. It reminded me of how frustrating it feels when someone “responds” to me without actually listening. A step in the reading I think would be hard to implement in my coding would be making the sketch respond in a meaningful and impactful way. While I can handle simple outputs, creating a system that truly “listens, thinks, and speaks” without weakening any part is more complicated than it sounds, especially as someone still new to code.

One thing that surprised me while reading was how much Crawford’s ideas made me reflect on my own life and experiences, both in coding and in everyday communication. I realized that I naturally focus on the part producing something visually interesting without fully thinking about how well my sketches are actually listening or thinking. It made me more aware of how limited my interactions can feel when the system only reacts in a basic way. But at the same time, that doesn’t make them any less satisfying.

Crawford’s refrigerator example reminded me that even simple reactions can feel rewarding when they respond at the right moment. Kids opening and closing a fridge door aren’t experiencing deep interactivity, but the responsiveness still feels good. That idea felt almost self contradicting at first, but it helped me understand that my sketches don’t need to be extremely complex to feel interactive they just need to respond in a way that feels intentional and connected to the user. That shift in perspective helped me appreciate the small interactions I’m already creating, while also motivating me to push them further.

To improve my sketch, I want to increase the “level” of conversation between the user and the system. Crawford’s idea that interactivity depends on how well something listens, thinks, and speaks made me realize that my sketches mostly stop at the listening stage. Since I’m still new to coding, the hardest part for me is creating a response that feels thoughtful rather than mechanical. One idea I’m excited about is having the sketch interpret the user’s “words” in a more complex way. For example, I want the code to listen to sound input and translate different volume levels into different colors, creating an evolving color palette. This would make the sketch feel like it’s actually responding to the user’s presence and energy, not just reacting to a single input. It’s a small step toward completing the “thinking” part of the cycle, but it feels like a meaningful way to push my work closer to the kind of interactivity Crawford describes.

Concept:

Starting off this assignment, I began by brainstorming ways of incorporating the array into my artwork, and I ended up deciding that I wanted to create a shooting star effect, as I felt that, it was the most straightforward idea I could think of and it would allow me to have more creative freedom if I wanted to add more aspects as I developed my code. So the first thing I started with was creating the shooting stars array and the code for it. I wanted to create a generative night sky scene that felt calm, as if you were looking out a window during a star shower. The main idea was to use arrays and objects to animate shooting stars across the sky, inspired by the example we practiced in class. I chose shooting stars because they allowed me to use randomness, movement, and interaction in a simple but visually interesting way. As the project grew, I expanded the scene by adding a glowing moon and mountains with snowy peaks, which helped create a full landscape instead of just a blank sky. The mountains were created using the same loop structure we learned in class, where each mountain’s height comes from an array value. The glow effect around the moon was inspired by an example I found online that used layers of transparent shapes to create a soft halo. I further understood arrays by watching a YouTube video, since it is a somewhat complex concept, the video clarified what we learned in class and helped me feel more confident in implementing the code I was overall satisfied with my outcome. My goal was to mix static elements, the moon and mountains, with dynamic elements, the shooting stars, so the artwork feels alive but still peaceful. After the reading, it also made me think about user interaction, so I decided to let the viewer interact with the piece by clicking to add new stars. Depending on where the user clicks, a star is generated there, but its size, height, and speed are randomized. This allows the user to have some control while still keeping a random effect, which connects to the idea of the “thinking” part of the code referenced in the reading. Overall, the concept was to build a simple canvas that allowed me to apply what we learned in class, using arrays, loops, and object oriented programming to achieve my idea.

Code Highlight:

show(){
   stroke(250,250,200);
   strokeWeight(3);
   line(this.x,this.y,this.x-this.length,this.y-this.length/4);
 }

//every shooting star in the array goes through this loop 
 for(let i = 0; i <shootingStars.length; i++) {
   //moves the stars across the sketch
   shootingStars[i].move();
   //allows the starts to be drawn
   shootingStars[i].show();
   //allows the starts to be respawned when the leave the sketch canvas
   shootingStars[i].respawn();

for (let i = 0; i < mountainSizes.length; i++) {
    
    //x position formula for the triangles
    let x = 100 + i *180;
    
    //color of triangle
    fill('rgb(20,75,20)');
    noStroke();
    
    //upside down triangle to make it look like a mountain
    triangle(
      //bottom left corner of the mountain subtracted 100 from x to shift position left 
    x-100, 640, 
      //bottom right added 100 to x to shift the point right
    x+100, 640,
      //peak lifted up by subtracting the height comes from the mountain size array just like the nums[] example from class
    x, 640 - mountainSizes[i]
    );
    
    //small white triangle which is the snow cap
    fill(255);
    triangle(
    x-30,640 - mountainSizes[i] +40,
    x+ 30, 640 - mountainSizes[i] +40,
    x, 640 - mountainSizes[i] );
}

The first part of the code Im proud of is with the shooting stars . I am proud of this because the loop is based directly on the example from class where we used a loop to move and display each bubble. I was able to fully understand and adapt that example to my own objects, showing how arrays and objects can work together, which was my main goal. This loop controls the entire animation, without it, nothing would move, and it made me feel more confident in my coding abilities and in managing objects. I also learned how to make the shooting star look like it was actually stars by making them tilted. The shooting star looked tilted because the end of the line is drawn at this. x – this. length and this. y – this. length/4, which moves the line diagonally instead of straight across. Changing both x and y creates the angled streak that makes it look like a real shooting star.

Another is the respawn function and setting up the functions in general to restart the stars when they leave the screen. This was the trickiest part for me to understand, especially because it was what I started with. I spent the most time on it since it required checking conditions like if (this.x> width) and resetting values. In the respawn() function, I used an if statement to check when the star leaves the screen and then reset its position and speed. I learned the idea from the car example we were given, where the car resets once it goes off the screen, and I adapted that logic to my project by resetting the stars positions and giving them a random speed. This made the artwork feel alive and helped me understand how to use if statements inside a class, which felt like a big improvement for me.

Lastly, I am proud of an aesthetic addition involving the mountains. I used arrays similarly to the numbers example we did in class but applied it differently. Using the same structure, I created mountains instead of circles, with the mountainSizes array controlling the height of each mountain. I used the index variable to space the mountains evenly across the bottom of the canvas and added a second triangle as a snow cap to make them look more realistic and artistic. To add the snow cap I lifted it up by subtracting the height from the bottom of the canvas. This allowed the white triangle to sit exactly on top of the green mountain since the peak position is calculated using 640 – mountainSizes[i]. This section let me show my creativity and how I could take a class example and transform it into something that fit my assignment.

Reflection/future improvements:

Overall, this assignment helped me understand arrays and object-oriented programming in a clearer and deeper way than before. At first the concept felt confusing, but once I started applying it to something visual, it became easier to absorb and understand. The most challenging part for me was getting the shooting stars to respond correctly, along with small issues like spelling errors that I had to revise. I struggled with the logic at first, especially the conditions inside the class, but once I connected it to the car example I could directly see the cross reference. I also learned how important it is to break the code into smaller functions. Having separate move, show, and respawn functions made the project easier to manage, which reflects what we discussed in class. Adding the mountains  also taught me how flexible arrays and loops can be, since I reused the same structure from the nums[] example but created something completely different. I am proud of how the final work looked because it feels like a complete sketch rather than just an individual final assignment. This project made me more confident experimenting with visuals, trying new ideas, and structuring code in different ways. In future work, I hope to add more interactive elements and experiment with new animations or even sound effects, such as a soft wind or chime when a new star is added. I also want to code more visually complex shapes to add depth to the piece, for example giving the star a diamond shape and an opaque trail. I think adding a more complex feature where the user can somehow remove a star would allow for more interactivity.

References:

Glow affect:

https://editor.p5js.org/_o.line/sketches/09NFFDGea

Youtube Video Arrays:

https://www.youtube.com/watch?v=fBqaA7zRO58

Arrays and loops code from class:

https://editor.p5js.org/maa9946/sketches/pNkSsqH_L

Car example for loop:

https://editor.p5js.org/aaronsherwood/sketches/eYFQE9EZa

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.

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

Concept:

For the first assignment self-portrait. I decided to create a code for an image of a frog, and the idea was to create it using the 2D primitives, and my goal was to take what we learned in class about how to code using the shapes and implement it into my own piece, changing the colors, the size, and layering of the shapes and experimenting with the code to see what works for the image I had in my mind. The goal was to practice layering and the proportions, and I added small details like the eyelash and the fly to give the frog more detail.

How it’s made:

The image was created entirely using p5.js, I first created the frame size then created the background color and then chose a subject to create which is a frog.

I used basic shapes like ellipse, circle, and lines, and arc to build the frog. I built it from the back to the front, layered it from legs to body to head, then eyes, and lastly the details. I used the color fills and stroke changes to separate different parts of the frog. In addition to the frog i added a small fly to add more detail to the portrait as I felt it was on theme.

A part of the code I’m proud of:

A particular part of the code that I’m proud of is the mouth and the eyelashes. Because they required more precision and experimentation than the rest of the shapes, I would say these parts took me the longest to perfect and be satisfied with the results. The mouth uses an arc function, which requires specific angles to create a smooth curved line, and the eyelashes had to be carefully placed using the line function to angle them naturally around the eye to give the appearance of eyelashes.

The arc required understanding about how the arc worked because it isn’t as straightforward as the ellipse or the circle. I had to experiment and reference to examples from the p5.js to understand how it works more clearly.

https://p5js.org/examples/shapes-and-color-shape-primitives/

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

Because the mouth needed to sit naturally between the eyes and the end of the face, I adjusted the X position and the Y position multiple times to get the expression right. And I experimented with the width and the height to get the most natural looking smile. I also increased the stroke weight for this part of the feature to give the mouth a bold cartoon like outline to make the mouth stand out without overpowering the eyes.

//mouth
noFill();
stroke(0);
strokeWeight(10);
arc(305,400,150,100,0,PI);

//eyelashes
stroke(0);
strokeWeight(6);

//left eye lashes
line(170,180,150,160);
line(200,170,200,150);
line(230,180,250,160);

//right eye lashes
line(370,180,350,160);
line(400,170,400,150);
line(430,180,450,160);

Reflection:

I’m satisfied with how expressive the frog looks, especially the eyes and the smile and the addition of the fly. It adds more detail, and something I think would be interesting to implement in the future once we learn how complete more complex code, is a blinking animations for the eyes or how to make the code responsive to interaction for example if I click on the fly it starts flying around. Overall, this project helped me understand how coordinate changes can affect the design and how layering can differ the shape placement and how line weight can be played around with and used to advantage and how to code shapes more confidently overall. I look forward to learning more complex codes for the future to help enhance my coding skills.