Category: S2025 – Shiloh

One of the interesting ideas mentioned in the video was how order eventually arises from randomness. This was a concept that I played around with in my work, where the longer my program runs, the more perfect a grid is formed. In other words, the more randomness or entropy that is introduced, the more order arises (see images below).

My work incorporates randomness by using a random value to determine where the line will draw next: move straight, turn left, or turn right. It does this random check at every frame. As the user interacts with the work, it speeds up the frame rate, increasing the amount of randomness experienced per unit of time. As the work is left alone by the user, the randomness slows down back to its base speed.

The balance that I attempted to achieve between total randomness and complete control is one of harmony and complementing. By that, I chose to make that the randomness controlled, but the randomness controls the piece. This idea is also calls to a similar one shown in the video at 33 minutes and 33 seconds, where the probability selected completely changes the piece of art that is formed.

Concept

I was inspired by the old magazines linked in the assignment description, where multiple shapes were often drawn onto the canvas. The canvas however defaults to a line, similar to the light cycles in the original Tron movie. Because of the constant increments by default, the line will turn at consistent lengths and eventually form a grid.

To allow for multiple shapes, I put together multiple functions (e.g., drawCircle, drawTriangle, drawSquare) that the program will rotate through when the mouse is clicked. However, if the user holds down the mouse, the program will cycle through all available shapes and draw all shapes at the same time.

Code Highlight

The below snippet includes an interesting piece of my code that incorporates the randomness: The code generates a random value in the range 0 to 1, and then uses that as a mechanism to decide whether to turn left, right, or go straight. Approximately 80% of the time the code will decide straight, 10% of the time it will choose left, and 10% of the time it will choose right.

// Decide what to do based on the provided value

let randVal = Math.random();
let xDelta = 0;
let yDelta = 0;

if (randVal < 0.8) {
  direction = direction; // do nothing
} else if (randVal < 0.9) {
  direction = (direction + 90) % 360; // go clockwise
} else if (randVal <= 1.0) {
  direction = (direction - 90 + 360) % 360; // go counterclockwise
}

// Draw in direction
if (direction === 0) {
  xDelta = increment;
} else if (direction === 90) {
  yDelta = increment;
} else if (direction === 180) {
  xDelta = -increment;
} else if (direction === 270) {
  yDelta = -increment;
}

Demo

Hint: Clicking on the canvas will increase the frame rate and the size of the shapes. Holding <SPACE> will enable the eraser mode.

Reflection and Future Work

This was a fun project for me to put together, and I enjoyed slowly building it up with multiple steps. It is a relatively simple concept, yet incorporates additional layers of complexity as the user interacts more with the piece.

While it does incorporate a loop that draws all shapes at once when the user presses the mouse, the entire program also acts as a loop as the art board is dynamically drawn.

Future work may wish to explore additional shapes that could be added to the piece, or alternative ways for the user to interact with it. Additional threads could also be added, such that multiple lines are being drawn at the same time.

TURN YOUR SOUND ON

(click on embedded sketch to turn it on)

https://editor.p5js.org/bobbybobbb/full/V2hgFFToc

I was looking through the old computer arts magazines for inspiration and really liked some images, so I wanted to incorporate them into my project. These 2 specifically were of interest:

Imagine you’re watching a space broadcast on your old TV that glitches out quite often. My concept was to have a bunch of random lines make up a TV frame surrounding my canvas and have these lines animate and be random. I also wanted random stars to twinkle in the night sky and every now and then have static appear on the screen. As for the sound, I downloaded some NASA radio chatter to fit in with the space theme as if you’re watching an actual broadcast about space. Then the static comes in as if your TV is glitching out every now and then, kind of like an old-timey vibe. 

I created separate functions for all the elements in the animation like the TV frame, stars, and static. I had the hardest time with the stars because drawing lines in a circle around a center pivot point is not as easy as it seems. I learned about rotate() and transformations (which you had to use with rotate):

push();
// translate so that it rotates at pivot point: middle of the line
translate(startX+12.5,startY+12.5);
// rotate evenly around a circle
rotate(j*360/7);
translate(-startX-12.5,-startY-12.5);
line(startX,startY,startX+25,startY+25);
pop();

It took me so long to figure out how rotating the lines to form stars works, and at one point, my program crashed and I lost all my work after figuring it out and finishing the TV frame and stars (I was under the impression that p5.js autosaves, but it didn’t), and had to redo a good chunk of the project. There was a lot of math involved for all my elements and lots of randomness; I wanted random line thicknesses for the TV frame and stars, random number of lines and stars, and random shades of gray for the static.

I also used audio files I uploaded to the sketch:

staticNoise = loadSound('staticNoise.mp3');
nasaChatter = loadSound('nasaRadioChatter.mp3');

These two sounds toggle on and off with each other depending on what comes on the screen.

For the future, I’d like to sync up the audio and screen a bit more; it feels like the audio is lagging behind what’s being shown on the screen. At the same time, it kind of adds to the old-timey effect.

My concept

My project is a simple firework animation with randomly changing backgrounds. While reading the technical reading assigned for this week about randomness, I realized I wanted to incorporate that concept into my work. Another inspiration was the drawing exercise we did in class using mouseX and mouseY, so I decided to apply it here with the fireworks.

However, as I worked on the project, I realized that there’s a bigger meaning behind it. The randomness of the fireworks represents the unpredictability of life, with both the good and the bad. Each click creates a unique firework explosion, symbolizing how every action and decision in life leads to an outcome that can never be exactly repeated.

Code Highlight

One part of the code that I’m proud of is how I used user interactions to create the fireworks effect. On top of that, i created randomly changing backgrounds.

function mousePressed() {
  if (showText) {
    showText = false; 
    background(0); // Clear text from canvas
  }
  drawFirework(mouseX, mouseY);
  let randomBg = color( random(255), random(255), random(255) );
    background(randomBg); // Random Background with each click
}
function mouseDragged() {
  drawFirework(mouseX, mouseY); 
}

Reflection

This project taught me a lot, while allowing me to incorporate some concepts learned in class. While I initially struggled with creating the fireworks and spreading out the lines, I’m happy with how it turned out.

Also, i had an idea to add “Back” button so the user could return to the inital background and I hope the knowledge i’ll gain in classes will allow me to add such features.

Embedded Sketch

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.

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.

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>

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);
}

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.

// Top right hair outline
angleMode(DEGREES);
let right_hair = ellipse(width / 2 + 40, height/2, 100, 50);
right_hair.rotate(45);

 // 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

For this portrait I wanted it to serve as an opportunity for me to explore p5.js and coding, while also making it represent myself. As this is my first time coding, I am still getting used to it and discovering new elements, which means that my portrait is not as elaborate and realistic as I would like it to be. However, I still made it meaningful by including some things that represent me such as making it colourful and adding a cake to represent my love for baking.

One part of this assignment that I’m particularly proud of is the code for the nose. It was a challenging part of the portrait that took me some time to figure out, but I’m glad I was able to execute it successfully.

noFill(); // nose
stroke(0);
strokeWeight(1);
beginShape();
vertex(200, 200);
vertex(195, 220);
vertex(200, 220);
endShape();

Reflecting on the portrait I created for this first assignment, I feel satisfied with the result. It helped me get more comfortable with how coding in p5.js works and gave me a foundation to build on. For the future, I’d like to focus on adding more detail to my projects. For example, I could experiment with creating more detailed hair, such as adding front strands, designing a more interesting shirt, or even making the portrait interactive. This can be done by conducting more research and experimenting with different shapes and techniques, which I’m excited to try.

–  Raghd