Reading Response 1 – Chance Operations (Week 2)

In his talk, Casey Reas explores the theme of order and chaos in art, emphasizing the role of randomness in creative processes. He also focuses on the notion of “controlled randomness” , where artists establish specific rules and parameters within code, allowing for unexpected outcomes while maintaining the overall coherence.

First of all, I really enjoyed listening to Reas’ talk. I appreciated the way he showcased his work and explained his philosophy on creativity and art. Reflecting on his insights, I aimed to incorporate the concept of controlled randomness in my most recent p5.js sketch, which I titled randomness. The overall structure of the artwork is straightforward—featuring a 10×10 grid of circles. However, the element of controlled randomness comes into play when the user interacts with the piece. Each time the user clicks on the canvas, the circles in the grid change in shape and size, creating a dynamic balance between order and unpredictability. While users can grasp the overall structure, every interaction (mouse click) generates a unique and evolving pattern. I wouldn’t go so far as to claim that my artwork revolutionizes the concept of generative art, but I believe it is an engaging and enjoyable piece to explore.

That being said, Reas’ perspective on art and the creative process encourages me to explore the potential of chance in my work. With every new p5.js sketch I create, I will keep the notion of “controlled randomness” in mind.

Week 2 – Animation, Conditionals, Loops

Concept

In this p5.js sketch, my main objective was to practice for loops and play around with the concept of randomness a bit. It is a simple generative art piece. The idea was to generate a grid of circles, where each circle varies in size, color and level of transparency. So by clicking on the window/canvas, the user can regenerate a completely random pattern (this adds an element of interactivity and makes the artwork dynamic).

Demo (Click on canvas)

Code Highlight:

One of the parts I’m most proud of is the loop structure that efficiently places the circles while maintaining randomness in their size and color:

for (let x = 0; x < width; x += spacing) {
  for (let y = 0; y < height; y += spacing) {
    let size = random(10, spacing * 0.8);
    let r = random(100, 255);
    let g = random(100, 255);
    let b = random(100, 255);

    fill(r, g, b, 180); // Semi-transparent random color
    noStroke();
    ellipse(x + spacing / 2, y + spacing / 2, size, size);
  }
}

Reflection & Improvements for Future Work

This project reinforced my understanding of looping structures in p5.js and the power of randomness in generative art. It was interesting to see how slight variations in parameters can lead to visually engaging results.

Future Work:
Experiment with different shapes (e.g., triangles, squares, or custom polygons). Add animation so circles gradually fade in and out.  Allow users to save their favorite generated patterns.

This was a fun dive into creative coding, and I look forward to exploring more complex generative techniques!

Reading Reflection: Week #2

In his talk about chance operations, Casey Reas introduces the idea that chaos always existed even before creation of the world, and that order was brought by the gods. He then claims that artists are now the ones who have been creating order, structure, and rationality. At first, I was a bit surprised by this view, because it seems to me that, in our modern world filled with structure and rigid rules of “shoulds” and “musts,” artists are actually the ones who are unafraid to bring self-expression outside of that “rational” box.

But then Casey goes on to talk about how artists can balance between complete randomness and total control, using random elements in their work to create interesting patterns and outcomes. He shares examples from his own work, where he created algorithms from scratch to produce highly animated pieces, trying to make something organic while combining different visual elements. This got me thinking about how some artists, myself included, prefer to stick to a specific vision or some kind of structure in their work, and it can be hard to incorporate randomness.

This talk pushed me to reconsider my own artistic process, whether it’s a simple drawing or a piece created through creative coding. Though i still feel like there should be a balance between randomness and some organization in art, I realized that i’d love to experiment with some unexpected and unconventionally creative elements in my future works.

Reading Reflection – Week#2

Casey Reas’ Eyeo talk on chance operations highlights two important themes- chaos and order. He uses a mix of both chaos and order in many of his projects. It is very interesting when he uses chaos and order to visualize aspects of reality, such as biological data, specifically proteins communicating with a cancer cell through signals. A point I captured in this video is that adding a slight bit of noise keeps it more homeostatic and away from order – I understand it as a way to create a sense of randomness, or more objectively, pseudo-randomness. Tuning a group of objects with the same rules creates “behavior”  for that group. I am surprised to see how incorporating pseudorandomness into multiple groups with different behavioral rules adds a layer of complexity. I was struck at the consideration of observing the visualizations of the paths these objects take, rather than the placement of each object at a given moment; not only does this suggests I should consider art visualizations from multiple perspectives (not just position in multiple timeframes but velocity over time) but also acts as inspiration for a potential future project.

Casey Reas mentions that we can actually control how much we want to tailor or customize and leave to chance. This means we can decide the balance between total randomness and complete control, by setting quantitative figures on scalar, angle or colour randomness. As I considered where I feel is the optimum balance between total randomness and complete control, I was left with a question instead: is there an optimum balance between the two? I personally felt there is no wrong balance as long as tuning the two allows the artist to obtain the objective of the artwork.

I would like to incorporate randomness in my work specifically through incorporating randomness in the scaling of spirals, as well as amount of tilt. Beyond the visual arts, this video did raise a surprising idea of experimental music by random chance operations, such as in duration or pitch, which could be a great idea to try out in the future.

Week 1 Self-Portrait

Motivation

Initially tried to build a simple person sketch with just a head and body, but I knew I could take it a bit further. So then I added hair and tried to change the body to look less like a stick man figure. I attempted to mimic a picture I had taken of myself.

This was what I had in mind and attempted to make within the program.

This had become the first draft after The Stickman, I can say my drawing abilities by hand are much better. But it was a learning curb.

AREAS OF IMPROVEMENT AND REFLECTION

What I noticed is I lacked the Imagination and the toolset in order to code an image. Although building a website is possible doing art was something I had never thought of as possible. I need to better understand the coding language I am working with and I need to find ways to improve how to use the available attributes and find how to use them in a more creative way.

The code snippet that I had used is simple. There I tried to keep it not complicated and kept to what I learnt originally. To make it more complicated with more attributes and something more intricate I need to study the coding language more.  I enjoy commenting the code so I don’t forget what goes where, and to not be confused.

function setup() {
  createCanvas(400, 600);
  background(240); // Neutral background

  // Head
  fill(176, 108, 73); // Brown skin tone
  ellipse(200, 150, 80, 100); // Head shape

  // Hat
  fill(0); // Black hat
  arc(200, 120, 90, 50, PI, TWO_PI); // Hat brim
  rect(160, 90, 80, 40); // Hat body

  // Glasses
  fill(255); // Glasses lenses
  stroke(0); // Glasses frame
  strokeWeight(3);
  ellipse(180, 150, 30, 20); // Left lens
  ellipse(220, 150, 30, 20); // Right lens
  line(195, 150, 205, 150); // Bridge of glasses

  // Eyes
  noStroke();
  fill(0); // Black pupils
  ellipse(180, 150, 8, 8); // Left eye
  ellipse(220, 150, 8, 8); // Right eye

  // Nose
  fill(0); // Same as head
  triangle(195, 165, 205, 165, 200, 175); // Simple triangular nose

  // Mouth
  fill(0); // Neutral expression
  arc(200, 185, 40, 10, 0, PI); // Simple curved mouth

  // Body
  fill(245, 235, 200); // Beige shirt
  rect(150, 220, 100, 120, 10); // Torso
  stroke(220, 215, 180);
  strokeWeight(2);
  for (let y = 220; y < 340; y += 10) {
    line(150, y, 250, y); // Subtle shirt stripes
  }

  // Cross Necklace
  fill(160, 160, 160); // Silver color
  line(200, 220, 200, 240); // Chain
  rect(195, 240, 10, 20); // Cross

  // Arms
  noStroke();
  fill(176, 108, 73); // Skin tone
  rect(120, 240, 30, 80, 10); // Left arm
  rect(250, 240, 30, 80, 10); // Right arm\

  // Backpack Straps
  fill(0); // Black straps
  rect(140, 220, 20, 60); // Left strap
  rect(240, 220, 20, 60); // Right strap

  // Pants
  fill(0); // Black pants
  rect(150, 340, 40, 120); // Left leg
  rect(210, 340, 40, 120); // Right leg

  // Shoes
  fill(50); // Dark gray shoes
  rect(140, 460, 60, 20, 5); // Left shoe
  rect(200, 460, 60, 20, 5); // Right shoe


}

FINAL PRODUCT

Although there’s much room for improvement. I think as a first try it was good.

 

<iframe src=”https://editor.p5js.org/dzf3361/full/HyuTFS6Fv” width = 420 height=644 allow=“camera;microphone”> </iframe>

 

Week 1 – Self-Portrait

Concept:
I wanted to make my self-portrait in a minimalistic style that would accurately represent my appearance while being limited to the use of simple geometric primitives. I chose to not use outlines to add to that flat, minimalist aesthetic. I also wanted to add some simple interactivity, which came in the form of the background changing colours through a day-night palette when clicked.

Embed:

Highlight:
I was proud of this snippet, where I used an array of hex codes to implement my colour cycling feature. It is perhaps more simple than I had hoped for, but I’m happy with how it turned out overall.

// // Array containing possible background colours
let bgs = ["#fff2bd", "#f4d797", "#c9ebff", "#abb5ff", "#7475b6", "#5148b2"];
let curr_bg = 0;

function mouseClicked() {
  // // Change to next bg colour on click
  curr_bg = (curr_bg + 1) % bgs.length;
}

Reflection:
I feel a bit conflicted about this assignment, since on the one hand it was an interesting change of pace to try and create art directly using code, but also very annoying. I found myself frequently trying to force coordinates or dimensions to be multiples of the canvas’ dimensions to allow it to scale, but often found it to be an exercise in frustration. Having to essentially guess-and-check all my numbers was another aspect I didn’t enjoy, since there were little quirks I wouldn’t expect such as circle’s being plotted by their center versus rectangles by their top-left corner.

In the future, I would like to try and plan things out more before starting, especially in regards to using custom variables. The built-in width and height variables made sense at first, but I quickly gave up on sticking to them and added pixel offsets instead. I think the most important thing for me is finding a way to streamline my workflow, since my struggle to put my concept on paper/screen caused me to fall short of where I wanted to be in terms of both artistic and programmatic aspects.

Week 1 Assignment

At First, I wanted to create something different, loaded with animations. Experimentation led to the conclusion that, too much of animation overload resulted in me not being able to express myself to the truest. I wanted to add the ‘Mark 2 ‘ Helmet from Iron Man – wrapping around my face. However, as a fanboy of Michael Phelps, and an aspiring swimmer, I decided to make a portray of myself, swimming. At least, pretending to.

The portrait made, upon mouse click changes the shade of the googles achieved using the following code :

let r ;
let g ;
let b;  //global scope


function draw ()
{
  fill(r,g,b);
  ellipse(200, 210, 40, 30); 
  fill(r,g,b);
  ellipse(300, 210, 40, 30); 
}

function mousePressed() {
  
  r = random (255);
  g = random (255);
  b = random (255);
}

The code also includes animated air-bubbles being exhaled by me, giving the effect of exhaling underwater. The following code does so:

let bubble_pos;

function setup() {
  createCanvas(500, 390);
  bubble_pos = 0;
  
}


function draw () {
  fill (255,255,255);
  circle (223,302 - bubble_pos,20);
  bubble_pos = bubble_pos+8;
  if (bubble_pos >= 290) {
    bubble_pos = 0;
  }
}

}

The logic statement resets the bubble’s position on Y-axis, as it is about to reach the surface.

Figuring out how to make the air_bubbles float upwards and then reset them, as demonstrated above is something I managed to accomplish after a little trial and error, which makes me proud.

However, depending on the water pressure, in the future, I would like to change the size of the Bubbles, as they reach for the surface, increasing in size.

I made use of the following code to help me out with determining the placement, and coordinate position.

print(mouseX + "," + mouseY);

 

Here is the complete code:

 

let r;
let g;
let b;

let bubble_pos;

function setup() {
  createCanvas(500, 390);
  bubble_pos = 0;
  
}

function draw() {
  background(102,178,256);
  
  strokeWeight(1);
  rect(224,366,50,20);
  
  fill(210, 180, 140);
  noStroke();
  ellipse(250, 250, 195, 250);
  fill(204, 229, 255);
  arc(250, 175, 180, 160, PI, TWO_PI); // PI is 180 and TWO_PI makes it 360, for start and stop initially.
  rect(160, 174, 180, 20);
  line(170,168,330,168);
  
  fill(0);
  textSize(18); 
  textAlign(CENTER, CENTER);
  text("NYUAD", 250,125 );
  
  
  fill(0);
  ellipse(200, 210, 15, 10);
  ellipse(300, 210, 15, 10);
  stroke(0);
  strokeWeight(4);
  line(250, 230, 245, 270);
  line(245,270,258,265)
  stroke(0);
  strokeWeight(2);
  fill(220, 85, 85);
  arc(250, 250 + 50, 60, 20, 0, PI, CHORD); 
  noFill();
  stroke(0);
  strokeWeight(4);
  fill(r,g,b);
  ellipse(200, 210, 40, 30); 
  fill(r,g,b);
  ellipse(300, 210, 40, 30); 
  line(220, 210, 280, 210); 
  line(180,209,158,199);
  line(320,211,342,195);
  fill(210, 180, 140);
  noStroke();
  ellipse(148, 250, 10, 80); 
  ellipse(352, 250, 10, 80); 
  stroke(0);
  strokeWeight(4);
  line(190, 160, 250 - 20, 160); 
  line(310, 160, 250 + 20, 160); 
  strokeWeight(2)
  line(170,170,330,170);
  
  print(mouseX + "," + mouseY);
  

  fill (255,255,255);
  circle (223,302 - bubble_pos,20);
  bubble_pos = bubble_pos+8;
  if (bubble_pos >= 290) {
    bubble_pos = 0;
  }
}

function mousePressed() {
  
  r = random (255);
  g = random (255);
  b = random (255);
}

 

Assignment 1 – Self-Portrait

1. Concept

I started by brainstorming ideas about some things I like to give my self-portrait some fun personality. I thought about netball, but wasn’t sure about the other things to add yet.

Then I tried making a sketch on my tablet to plan out what I wanted my piece to look like. I understood that the planning process is really important because it will save time in the long run as I have a direction to stick to. A big consideration as I decided how to draw the different objects in the sketch was the types of shapes or lines I could use in p5 js. Starting with my face, I drew a circle for the head, arcs for my hair outline, arcs for both outlines of my eyes, circles for my eyes, as well as arcs for my eyebrows, nose and lips. I liked my red sweater, which had a high neckline, so I added a line around my neck.

I tried thinking more about what I like, and with the help of online sources, I realized pets and travelling are two of them! I like dogs, so I wanted to draw a simple dog. I could use ellipses for the eyes and ears, triangle for the nose, arcs for the mouth. I would need a large ellipse for the dog’s body, as well as ellipses for the dog’s legs. For the tail, I could make an arc. A good way to show I like travelling is through trains. I like mountains, especially thorugh my experience travelling and hiking in Wales. Specifically, snowy mountains are special for me. At first, the train was a small icon to the right of me, but then with some inspiration from Dev Kalavadiya’s Self Portrait, I realized the mountains could be in the background. So I changed the structure of the work, placing the mountains to the top-left, the netball and pole to the right. I thought it would be cool to have the train be directed toward the mountains.

2. Challenges with Code Highlight

It’s my first week using p5 js and we got practice in-class to make shapes and lines, but I’m unfamiliar with animation. Thus, I expected a challenge with the animating, particularly in the snowfall. But I thought it will be fun to try.

I also realized that my nose is more appropriately drawn with a spline curve rather than arc(s). I faced trouble making the spline curve, however, with it being too small, but was able to resolve it with help of AI.
I realised that if I want my hair to be coloured in, it is simpler to use a shape and fill it in rather than use arcs and fill in what’s inside. I decided to use ellipses and rotate them as needed. However, my attempt didn’t work:
// Top right hair outline
angleMode(DEGREES);
let right_hair = ellipse(width / 2 + 40, height/2, 100, 50);
right_hair.rotate(45);

Turns out that ellipse() doesn’t return an object I can rotate. Instead, I need to use p5.js transformation functions. It’s important to push() and pop() so that rotations don’t accumulate in case I rotate other shapes:

 // Top right hair 
angleMode(DEGREES);
push(); // Save the current transformation state
translate(width / 2 + 40, height / 2); // Move to where we want to rotate around
rotate(38); // Rotate by 38 degrees
fill(55, 22, 13);
noStroke();
ellipse(0, 0, 100, 50); // Draw at (0,0) since we've translated
pop(); // Restore the transformation state

After shifting around my code so that the neck and body comes after the top back hair but before the eyes, I was shocked to find out that the eye outlines somehow disappeared. I tried experimenting with removing and putting back code to find out what the issue was. Since the code for neck was relatively simple, I realized the issue must be with the body. I had an idea to use push() and pop() just like for the hair, and phew, it worked!

To make the mountains, I printed mouseX and mouseY in draw() function, hovered over the points I wanted the vertices of the triangles to be in in order to get the approximate coordinates of the triangle vertices for triangle().

Making the train tracks was especially time-consuming, as I was needed to ensure I drew the horizontal train tracks using quadrilaterals progressively bigger as it goes more downward on the page. I had to consider and ensure the spacing between the train tracks were reasonable, and I used maths calculations to help me with this. Phew, after about 30 minutes working on this, I was done.

Trying to create the netball allowed me to experiment with arcs, getting more familiar with what each parameter is used for.

3. Embedded Sketch

4. Reflection and Ideas for Future Improvement

Due to the time constraint, I decided not to draw the dog; nevertheless, my main goal to draw a self-portrait and things I like are completed. Through this experience, I learned more on layering, p5.js transformation functions, special lines extending beyond the class material, such as spline curves and bezier curves. A challenge I faced personally was being patient especially while drawing the train tracks, so this experience was a valuable opportunity to develop my resilience.
Future ideas for improvement would be adding in the animations, especially snowfall and the train moving, as well as adding interactivity such as buttons for the user to click.

Assignment 1: Self-Portrait

For this assignment, we had to create a self-portrait in p5js. I began by deciding which elements of myself were important to incorporate. Of course, this includes basic features like eyes, nose, mouth but also things like my wavy hair or silver earrings. Once I figured out what to incorporate, I began making shapes in p5js, making sure the layers were right to get the results I wanted. The final result of my self-portrait is as follows:

As I worked, I realized making shapes in this program is quiteee annoying, especially because you need to play guess and check when figuring out coordinates. This led to it taking more time than expected, especially when it came to places where there are many shapes combined. For example, the eyes are something I am proud of because I went a step further to make them a tad bit more realistic by adding a flash spot. You can see the code for this below:

//eyes
  push()
  stroke('black')
  fill('white');
  ellipse(220,190,30,19)
  fill('black');
  circle(220,190,12)
  fill('white')
  circle(224,186,4)
  pop()
  push()
  stroke('black')
  fill('white');
  ellipse(280,190,30,19)
  fill('black')
  circle(280,190,12)
  fill('white')
  circle(284,186,4)
  pop()

Overall though, I think this assignment was a great introduction to creating objects in Javascript and required a lot of self-teaching from the references on the p5js website when it came to things like arcs, rounding out rectangles, push and pop, ellipses, etc. Breaking down myself into simple shapes really pushed my creativity when it came to combining shapes like ellipses and rectangles and circles for my hair and bangs. I was able to think outside the box on how to create what I wanted because I wasn’t even sure what the best way to get what I wanted to create was. My hope for the future is the be able to understand curves better to be able to make more custom shapes from scratch. Perhaps one day I can revisit this self-portrait and make it more realistic.

 

Week 1: Self-Portrait

Concept:

This was my first project using p5.js, and also my first for this class. So, I decided to experiment and explore as much as I could to build a solid foundation for the projects ahead.

To start, I used a photo of myself to get a rough idea of how to align my basic features. The goal was to create a portrait as realistic and true to life as possible. I used different shapes, like ellipses, arches, and rectangles, to form the features, and added line strokes to bring in more detail.

Since I’m a computer science major, I wanted to add some movement and interactivity, instead of just making a still portrait. First, I made the eyes follow the cursor by adjusting their position as the cursor moved. At first, though, the pupils kept escaping the eyes, so I had to put some limits on the movement to keep them inside the eyes. Then, since I love flowers, I created a function that draws small flowers whenever the mouse clicks anywhere on the screen. This made it look like I was looking in the direction where each flower appeared, reflecting my interest and excitement for flowers. After every five flowers, I added a little celebration with confetti falling from above. Once the confetti finished, the flowers slowly started falling too. The user would then need to refresh the page to draw more flowers.

Ideally, I would’ve made the flower creation loop infinite, so the user wouldn’t have to refresh to make new flowers. However, I’ve been feeling really worn out with work lately, so I decided to leave it as is. The idea was that I needed to refresh before getting more work — since the project is meant to reflect me, not just being a simple program, it kind of shows that I need a break too.

Click anywhere to make flowers. I’ll be super happy if you can make 5 !

Highlights:

I think the highlight of my project was the confetti and the flowers falling down. It added a fun sense of celebration and reflected my love for flowers.

// confetti falling down if celebration has started
if (celeb_start) {
for (let i = 0; i < confetti.length; i++) {
confetti[i].y += confetti[i].speedY; // move the confetti down
confetti[i].x += confetti[i].speedX; // move the confetti horizontally to give a wavy effect
fill(confetti[i].color);
noStroke();
ellipse(confetti[i].x, confetti[i].y, 10, 10);
}

// removing confetti that has gone off the screen
confetti = confetti.filter(c => c.y < height);
}

// falling flowers after celebration
if (flower_count >= 5 && !celeb_start) {
celeb_start = true;

// pause for 1 second before the celebration starts
setTimeout(() => {
generateConfetti(); // start the confetti
}, 300);

// pause for 5 seconds after confetti
setTimeout(() => {
makeFlowersFall(); // making flowers fall
}, 3000); // confetti and delay time
}

// move the falling flowers
for (let i = 0; i < fall_flowers.length; i++) {
fall_flowers[i].y += fall_flowers[i].speedY; // make flowers fall
fall_flowers[i].x += fall_flowers[i].speedX; // adding horizontal drift to the flowers
drawFlower(fall_flowers[i].x, fall_flowers[i].y);
}

// removing flowers that have fallen off the screen
fall_flowers = fall_flowers.filter(f => f.y < height);
}

I also liked the idea of making the shirt with a round neckline using a skin-colored semi-circle (to extend the neck skin), which gave the clothes a more realistic look. This saved me time because creating the shirt itself with that structure would have been much more difficult than simply extending the neck.

Reflections, ideas for future work & Improvements:

I have slightly wavy hair and wanted to capture that instead of using simple straight line strokes. I tried using sin() functions to create the waves, but I couldn’t get it right due to time constraints. Since the thing I love most about myself is my hair, I really want to make it more realistic and true to mine. I also hope to make my bangs look more natural by using arches instead of line strokes.

I could definitely improve the aesthetics of the background and add a more appealing scenery. Since the theme of this portrait is all about flowers and positive vibes, I could create a garden in the background to complement that idea. Lastly, I’d love to make a full-body portrait with a nice dress in the future.