Author: Aysha Salma

Casey Reas’ Eyeo talk on chance operations:

After watching Casey Reas’s assessment of randomness in art, I’m convinced of its valuable role, especially in the STEM field, where it allows researchers to predict and analyze randomness in their subjects. His explanation reminded me of a study where Japanese researchers used algae to optimize their rail transport system. The algae grew in random, unpredictable ways, yet always found the most efficient pathway to form a network based on the pattern or map of the space in which it was cultured. (In 2010, a team of researchers from Japan and the U.K. fed a slime mold with nutrients arranged to imitate the nodes of the Tokyo subway system. The resulting network closely resembled the actual subway network, leading to the development of biologically inspired adaptive network design.) This study highlights the potential of introducing randomness to the template designs of objects, something Casey Reas often emphasizes in his work.

When it comes to incorporating randomness in my own projects, I find it most effective in creating animations. For example, using a random number generator and initializing it to a variable, then applying that variable as an argument for certain shapes in my self-portrait sketch, allowed me to simulate the movement of the ‘mouth’ shape, giving the illusion of the sketch talking. To me, randomness is most enjoyable and useful when applied in animations.

In the balance between total randomness and complete control, I prefer maintaining more control over an object while leaving some variables to function randomly. This approach not only makes the model more reliable but also allows me to observe and understand the specific randomization patterns more clearly. Much like in research, where we use a “control” scenario to keep experiments fair, having a balance between control and randomness helps detect how certain variables influence the behavior of others.

Concept:

In this project, I draw inspiration from the geometric artworks discussed in: COMPUTER_GRAPHICS_AND_ART_Aug1977.  My goal with this project was to explore the potential of ‘for’ loops to generate grids of symmetrical, curved lines, creating a structured, rhythmic design. However, I hoped to disrupt this symmetry by introducing heavy distortion, with the intention of simulating the visual effect of mind fog. The resulting artwork presents a uniform arrangement of curves that distort and displace when the cursor hovers over it, evoking a sense of disorientation and randomness—mirroring the feeling of brain fog.

Highlight:

I’m particularly proud of the distortion animation I added to this sketch. By utilizing the dist() function, I created interactive conditions that are activated when the mouse hovers over the Bézier curves. Using an if statement, I introduced random increments within a range of negative to positive values to the variables used as arguments for the original Bézier curves. This approach helped change the positions of the curve lines at random, adding distortion and creating the brain fog effect that I intended. Additionally, reducing the frame rate helped give the animation a 90’s cartoon effect aesthetic.

// mouse hover animation
    if (dist(mouseX, mouseY, x, y) < 300) {
      // displace lines randomly
      x1 += random(-20, 10);
      y1 += random(-30, 10);
      x2 += random(-40, 10);
      y2 += random(-50, 10);
      x3 += random(-60, 10);
      y3 += random(-70, 10);
      x4 += random(-80, 10);
      y4 += random(-90, 10);
    }
    
    bezier(x1, y1, x2, y2, x3, y3, x4, y4);

Reflections:

While working on this project, I experimented with creating symmetrical grids and distorting the curves to simulate mind fog. Initially, I focused on generating the grids using for loops, but as I introduced interaction through mouse hover effects, I realized how much potential this had to enhance the dynamic nature of the piece. The use of dist() and if() functions to trigger random distortions worked well in creating a more immersive experience.

Looking back, I think there’s room for improvement in making the distortions more fluid and gradual. Currently, the randomness of the distortions can feel abrupt, so in future iterations, I would explore using easing functions to smooth the transitions.

Concept:

For this assignment I use my knowledge of drawing basic shapes in p5*js to create a self-portrait. This portrait is a rough sketch of me, wearing my favorite hairstyle—a high ponytail. Since I’m still relatively new to coding, I chose to keep my approach simple by using basic shapes, lines, and curves to create this sketch. Understanding how the order of code affects the final drawing inspired me to stack shapes strategically, allowing me to capture minute details like the facial features in my portrait.

Highlight:

I’m particularly proud of the eyes in this sketch, as I invested a lot of effort into adding detailed elements that took some time to perfect. My biggest challenge was getting the curves right, especially when it came to the eyebrows and eyelids. Positioning them correctly was tricky, but using the mouseX and mouseY variables was incredibly helpful in determining their relative placement. However, achieving consistent curves across the sketch was the most time-consuming aspect of the entire process.

//eyes
fill(250);
ellipse(180,195,15,20);
ellipse(220,195,15,20);

noFill();
curve(175,230,167,190,194,190,200,230);
curve(180,240,206,190,235,190,220,220);
curve(200,170,167,200,194,200,200,150);
curve(200,155,206,200,235,200,200,170);

//eyebrows
curve(200,175,207,175,239,175,250,220);
curve(150,220,165,175,197,175,280,200);

Reflections:

When drawing the eyelids and eyebrows, I initially used the curve() function, but I later realized that combining noFill() with bezier() would have been a quicker and more efficient approach for creating curves. Additionally, I used the width and height variables to center the head on the canvas, which worked well. However, I believe that applying these variables more consistently throughout my sketch would make the portrait scalable for any canvas size in the future.