Category: Spring 2024 – Aaron (Section 001)

For this assignment, I drew inspiration from Bill Kolomjec’s artwork titled “Random Squares.” My initial concept involved an interactive scenario where squares responded dynamically to the mouse’s location, a concept realized in my first sketch.

Wanting to add an extra layer of complexity, I decided to explore the interaction with an object. This led me to create another sketch where the interactive background adjusted its size following the object’s location such as a ball, but I managed to do so without the ball, providing a unique twist to the overall concept.

As I continued to refine my project, I experimented with colors and various sizes. Introducing random markings within the framework, I enhanced the visual appeal of the interactive background. Through this exploration, I gained a deeper understanding of P5js, marking a notable achievement in my creative journey.

let x = 100;
let y = 100;
let dx = 2;
let dy = 3;
let length = [];
let scl = 0.1;

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(220);
  
//   fill(255);
//   ellipse(x, y, 30, 30);

  x = x + dx;
  y = y + dy;
  if (x > width || x < 0) {
    dx = dx * -1;
  }
  if (y > height || y < 0) {
    dy = dy * -1;
  }

  for (let i = 0; i < 600; i += 20) {
    for (let j = 0; j < 600; j += 20) {
      let distance = dist(x, y, i + 7.5, j + 7.5); // Center of the rectangle
      
      let rectSize = map(distance, 0, width, 5, 100); // Adjust these values for the desired size range

      fill(i / 3, j / 3, 300);
      rect(i, j, rectSize, rectSize);

This talk from Casey Reas at the Eyeo Festival really changed the way I look at randomness, order and chaos in art. But how?

Structure:

Casey has structured his talk in a way that made me connect with what he was saying, kind of like a short story about art based on this algorithms and randomness.

Starting of from nature, he demonstrates the art in nature and its tendency to be chaotic as well as our purpose as humans: to create order. This dates back to the first century A.D. so we can see that humans have been very conscious about this idea of maintaining some kind of harmony in art as well as adding a random element.

A big turn of events, and two pieces which really gathered my interest in the subject are this 1916 piece by Jean Arp:

This piece was considered extremely radical back in the day since it broke the rules of bringing order into art, where he just put down random pieces of paper and created this image. Thinking differently really changed the way art was looked at. Another interesting art piece is “Three standard stoppages” by Marcel Duchamp:

Duchamp really explored the idea of getting out of reality and not using the metric system. This two pieces describe what I really feel about art, or life at all: Why are we constraining ourselves between units of measurement and concepts of order when we can unleash our wildest dreams and create something that has never been created before? Great things always came when people thought out of the box 🙂

Furthermore with digitalization and computers, we can see digitalized art taking shape as well as some interesting works that perfectly describe the part of chance and randomness in art.

Personal takeaways and projects I love:

My favorite piece that was shown in this talk from Casey is Tissue prints which was made by him. It really changed the way I think about algorithmic art and the complexity of it, as well as encouraged me too look at projects on a deeper level. More on the project can be seen on the link below:

https://reas.com/tissue_p/

Another thing to look at which is similar to this is my recent group project for the Understanding IM Class. It combines algorithm, chance, randomness and adds a personal element.  Feel free to explore on the link below:

https://docs.google.com/presentation/d/137TySRw-u-CEIeXmAb7DMut26ogBrSnD-C2KJfH1zT8/edit?usp=sharing

The patterns… where have I seen them throughout my life?

The Alpha particle tracks inside the Bubble Chamber apparatus in a Physics laboratory. [Source]

On calculus textbook covers [Source].

Casey Reas’s talk on using code to make generative art with a grip on randomness caught my attention. The whole idea of finding this sweet spot between order and chance in art is super intriguing, especially when you can let randomness guide you a bit without it taking over the whole identity of the piece. This is something that I look forward to incorporating into my IM pieces throughout the semester.

Reas’s example of ‘The Tissue Work,’ inspired by neuroanatomist Valentino Braitenberg, and the controlled randomness they used to simulate conceptual vehicles and patterns over time was mind-blowing. It’s like a dance between structure and surprise. I love the notion of randomness being a “jumping off point” in art – a way to explore possibilities without losing control over the essence of the work.

This example brought several artists to mind, one of them being Farhad Moshiri an Iranian artist known for his intricate yet playful pieces, and I believe his ability to dance on the thin line between intricacy and randomness is what makes his work admirable. Here is an example of one of his pieces:

Another artist that instantly comes to mind is Jackson Pollock, known for his drip painting. As a child, I had a love-hate relationship with this category of artwork because I believed the artist did not deserve the credit for the piece, and that there was not much to it. However, after admiring his work and listening to people’s perspectives I fell in love with the idea of “letting loose” which is exactly what this piece consisted of, allowing gravity and change to create something, with minimal control and high spontaneity. This proposes the question, is the art the final piece or the process of creating it?

So, I agree with Rea’s idea that embracing randomness in art feels like tapping into a world of creative possibilities. Artists from way back to today are showing us how to walk that fine line between order and chance, making the relationship between art and technology evolve in the most fascinating ways.

I tried my best to include the Abaya and Sheila in my Self Portrait, even though it took a lot of trial and error I think I did a good job.

I actually watched a couple of videos in order to reach this point, however there is a lot of room for improvement. I overlapped ellipses in order to create the hijab, and then I wanted to have an interactive element where the pupils followed the mouse. I wanted the background to be of the stars with elements loosely related to The Starry Night. 

I would probably add a nose next time, and would like to eventually add an additional interactive element probably in the background.

Inspiration and Concept 

I wanted my self-portrait to highlight two main things: my glasses and my big curly hair. There were also a few artistic elements I identified early on that I wanted to incorporate. Growing up, the first thing I learned to draw was flowers. Since then, I have incorporated flowers, specifically sunflowers, into much of my artwork. Hence, I planned to have flowers as a recurrent motif in my self-portrait. Another thing I wanted to stand out in my self-portrait is good color coordination. A specific self-portrait I found that resonated with all of these ideas and captured the essence of what I wanted to create is by Erika Norma, which can be found in this Medium article she wrote.

Process and Implementation

I started by creating a rough sketch of the outline. The majority of the outline is composed of curves and smooth lines. To ensure that my shapes looked smooth, I relied on curveVertex() to specify vertices (points) along which a curve would be drawn. I used curves to draw the face and the hair. To make the self-portrait look more animated, I decided to add a wave movement animation to the hair. I was able to create the desired effect by adding curves with vertices whose x and y coordinates are defined by sinusoidal functions (this example was a very helpful demonstration of simulating sine waves in p5.js and I derived inspiration from it as I animated the hair). I played around for some time with different angle increments, amplitude, and shifts until I was happy with the result. Although it is not perfect and is probably not the cleanest way to implement this effect, I would say this portion of the code for drawing and animating the hair is the one I am most proud of as it perfectly demonstrates how mathematics can be directly used to generate art. It also took me the most amount of time to get right so I was very satisfied once all the components fell into place.

function hair() {
  push();
  beginShape();
  fill(72, 60, 50);
  stroke(72, 60, 50);
  // right side
  for (let i = 0; i < 20; i++) {
    // calculate x and y positions dynamically using the counter i and sinusoidal functions to create wave movement 
    // used helpful demonstration of using sinusoidal functions for waves https://p5js.org/examples/math-sine-wave.html
    let x = 350 + i * 20;
    let y = i * 15 + sin(hairAngle + (i * PI) / 2) * 10 + 90;
    // add vertex to the curve
    curveVertex(x, y);
  }
  // left side
  for (let i = 20; i > 0; i--) {
    let x = 310 - i * 20 ;
    let y = i * 13 - sin(hairAngle + (i * PI) / 2) * 10 + 50;
    curveVertex(x, y);
  }
  endShape(CLOSE); // close the shape to connect the last and first points

  // bottom of the hair
  noFill();
  strokeWeight(200); // use large stroke to cover the bottom edge of the conjoined left and right hair shape
  beginShape();

  for (let i = 0; i < 30; i++) {
    let x = i * 40 + cos(hairAngle + (i * PI) / 2) * 10 - 100;
    let y = 400 + sin(hairAngle + (i * PI) / 2) * 10;
    curveVertex(x, y);
  }
  endShape();
  pop();
}

One obstacle I had with the hair was creating one closed-shaped curve that would be the moving hair. When I attempted to join the two sides of the hair by closing the shape formed by them, I realized that the bottom would be automatically closed with a straight line. I resorted to a rather gimmicky way of resolving this by adding a bottom moving curve with a large stroke that would cover that straight line. If I were to redo this, I would try and dynamically create all sides of the hair using one shape and be more careful with calculating the vertices.

I also used curves and cosine functions to animate the movement of the earrings using the same principles.

The implementation of the flowers was a modification of this reference. The flowers were used to create the dress and are a part of the interactive background that is displayed when the mouse is clicked. The flower petals are implemented using ellipses. To create the rotation animation, all flower components rotate by an angle that is dynamically changing each frame. For the sake of generalization, I implemented the following drawFlower() function to allow for the creation of all the different colors, shapes, and types of flowers (including sunflowers!) that I needed.

function drawFlower(
  r,
  g,
  b,
  dx,
  dy,
  petalX,
  petalY,
  petalW,
  petalH,
  centerR,
  rotationAngle,
  isSunFlower = false
) {
  // helpful guide: https://editor.p5js.org/xinxin/sketches/0j7vGT3u6
  push();
  noStroke();
  ellipseMode(CENTER);
  translate(dx, dy);
  rotate(radians(rotationAngle));
  fill(r, g, b);

  for (let i = 0; i < 20; i++) {
    // flower petals
    ellipse(petalX, petalY, petalW, petalH);
    rotate(PI / 10);
  }

  // fill center with a darker color if sunflower
  if (isSunFlower) {
    fill(r - 11, g - 22, b);
  }

  ellipse(0, 0, centerR, centerR);
  pop();
}

To add a small interactive component, the background of the sunflower would display a falling sunflower animation once the mouse is clicked. The original background and the animated background alternate with every click. In the setup function, a number of sunflower object literals with x, y, and speed attributes are defined. All values are randomized from a certain range (e.g. the y position is randomized between -1000 px and -50 to ensure that each flower is initially displayed above the canvas). Each flower is then added to a global array,fallingFlowers.

The animation itself was done by incrementing each flower’s y position by its speed attribute in every frame, ensuring its position is reset again above the canvas at a random position once it hits the bottom.

Reflections and ideas for future work or improvements

I am overall satisfied with the outcome. It was close to how I envisioned it would look like. I especially loved the aesthetics of the moving hair and earrings. I also enjoyed playing with colors – especially daring to choose yellow and purple for the glasses  – and the process of making creative decisions, such as adding in lips last minute. As I mentioned, however, I would have loved to find a cleaner way to implement the hair shape and animation without having to resort to adding in an extra curve shape. In my next projects, I aim to delve deeper into creating more complex curves and exploiting mathematical relations to create interesting animations.

For this assignment I have produced a self portrait of myself with two defining features: my glasses and my camera.

Initially, the concept I wanted to pursue involved a simplistic rendering of my face with mouse tracking applied to the eyes and camera. I am most proud of the fact that I managed to achieve this idea with the eyes (albeit with some help from the p5js reference page). The main difficulty with this for me was trying to understand how the mouseX and mouseY functions worked in relation to the constrain function. However, with lots of experimentation, I managed to figure out how to implement mouse tracking the way I intended for the eyes. I have included the code for it below:

 // eyeballs
 fill(255)
 ellipse(150, 175, 50, 40)
 ellipse(250, 175, 50, 40)
 
   // pupils
 fill(80, 40, 10);

let leftPupilX = constrain(mouseX, 140, 160);
 let leftPupilY = constrain(mouseY, 170, 180);
 ellipse(leftPupilX, leftPupilY, 25, 25);

 let rightPupilX = constrain(mouseX, 240, 260);
 let rightPupilY = constrain(mouseY, 170, 180);
 ellipse(rightPupilX, rightPupilY, 25, 25);

This leads onto the many aspects which I wanted to implement but could not with the main one being the implementation of mouse tracking on the camera. Ideally, the intended outcome was to have the eyes track the camera as it moved around with the mouse in order to create a more dynamic and interactive experience. However, I could not figure out how to apply mouse tracking to multiple shapes. Some other details which I wished to include were facial hair (I was unsure how to go about it and ran out of time) as well as the curve in my glasses which connects the two lenses (I wanted to make a curved rectangle but could not find how). Moreover, I was unsure of how to present my hair so I just opted for a rounded rectangle which may be perceived as a hat.

In terms of the code itself, I feel that I should have made use of variables in order to make the act of placing the different shapes on the canvas in relation to each other easier. One point that I liked which came as a result of not using variables was that certain features were slightly off centre (e.g mouth, nose) which made the outcome feel more playful and hand drawn.

Overview

For this assignment, I initially had a bit of uncertainty about the theme involved with creating a self-portrait using JavaScript. Stick figures seemed like a starting point, but I decided to draw inspiration from the cartoon TV show Gravity Falls. My goal was to capture the same facial structure that made the show so memorable from my childhood, appreciating its cool graphics. So, let me introduce you to Sara, the new character on Gravity Falls!

Challenges

Drawing inspiration from Gravity Falls presented several challenges, particularly in replicating the facial structures of the original characters using only ellipses, rectangles, and triangles. Coordinating the shapes, especially the triangles, definitely tested my patience. Gladly & after several attempts, I sought assistance from Desmos (advanced graphing calculator) to recreate and visualize my canvas in terms of coordinates, I found that pretty helpful!

reflection

My initial intention was to animate multiple objects on the screen, including the sun transforming into a darker color against an ombre background to symbolize sunset (ideally, user-controlled). However, I underestimated the time required for the graphic design itself & hope to implement animations in future projects. While I consider myself familiar with other languages, I wouldn’t claim that p5.js is my expertise. Overall, I found great enjoyment in this project and am proud of the results, particularly the implementation of a simple animation for the “Mukhawar” or Emirati traditional wear. If anyone is interested in the code, you can find it below!

// Welcome to the behind-the-scenes of Sara's self-portrait!

function setup() {
  createCanvas(500, 600);
  frameRate(10);
}

function draw() {
  background(153, 175, 191);
  
  // sun
  noStroke();
  fill(242, 209, 44);
  ellipse(0, 0, 300, 300);
  
  // clouds
  noStroke();
  fill(240);
  
  ellipse(100, 200, 60, 50);
  ellipse(60, 200, 60, 50);
  ellipse(20, 200, 60, 50);
  ellipse(75, 180, 60, 50);
  ellipse(45, 180, 60, 50);
 
  ellipse(500, 170, 70, 60);
  ellipse(460, 170, 70, 60);
  ellipse(420, 170, 70, 60);
  ellipse(485, 140, 70, 60);
  ellipse(445, 140, 70, 60);
  
  ellipse(300, 80, 70, 60);
  ellipse(260, 80, 70, 60);
  ellipse(220, 80, 70, 60);
  ellipse(280, 60, 70, 60);
  ellipse(245, 60, 70, 60);
  
  // ground
  fill(54, 99, 57);
  rect(0, 500, 500, 100);
  
  // neck
  fill(138, 98, 134);
  rect(190, 295, 130, 100);
  
  // hijab
  noStroke();
  fill(138, 98, 134);
  ellipse(245, 300, 190, 140);
  rect(165,180,175,120)
  triangle(325, 158, 410, 480, 300, 680);
   
  // face
  noStroke();
  fill(214, 176, 150);
  ellipse(240, 295, 160, 120);
  rect(175,180,145,120)
  
  //eyelashes
  push();
  stroke(0);
  strokeWeight(2)
  line(160, 240, 200, 255);
  line(170, 230, 200, 255);
  line(295, 240, 200, 255);
  line(285, 230, 200, 255);
  pop();
  
  // eyes
  fill(255);
  stroke(0)
  ellipse(200, 250, 60, 60);
  ellipse(255, 250, 60, 60);
  
  fill(0);
  ellipse(200, 245, 7, 7);
  ellipse(255, 245, 7, 7);
   
  // hair
  noStroke();
  fill(38, 20, 2);
  push();
  rotate(PI/9);
  rect(280, 45, 98, 50);
  rotate(PI/-6);
  rect(135, 200, 80, 30);
  pop();
  
  // hijab 2 (top part)
  fill(138, 98, 134);
  arc(253, 180, 175, 100, PI, TWO_PI);
  rect(165, 185, 10, 30);
  
  // hair 2
  fill(38, 20, 2);
  arc(250, 185, 155, 60, PI, TWO_PI);
  
  // mouth
  fill(255);
  stroke(0);
  arc(230, 305, 60, 37, 0, PI, CHORD);
  
  // hijab 3
  fill(138, 98, 134);
  noStroke();
  rect(166, 177, 9, 30);
  rect(320, 170, 17, 60);

  // eyebrows
  push();
  stroke(21, 19, 19);
  strokeWeight(2);
  noFill();
  arc(195, 215, 35, 10, PI, TWO_PI, OPEN);
  arc(255, 215, 35, 10, PI, TWO_PI, OPEN);
  pop();
  
  // body
  fill(163, 106, 145);
  rect(130, 385, 240, 255, 20, 15, 10, 5);
  push();
  rotate(PI/14);
  rect(210, 343, 65, 225, 20, 15, 10, 5);
  rotate(PI/-9);
  rect(260, 427 , 65, 220, 20, 15, 10, 5);
  pop();
  
  // sleeves
  fill(138, 98, 134);
  triangle(330,440,350,600,340,600);
  triangle(165,440,140,600,130,600);
  
  // dress
  fill(50, 46, 82);
  rect(210, 390, 65, 220, 20, 15, 10, 5);

  // crystal animation
  // inspired by https://editor.p5js.org/nanou/sketches/rJ-EMpxa
  var spot = {
  x:50,
  y: 25,
  };

  var col = {
      r:255,
      g:0,
      b:0,
  };
  
  spot.x= random (215, 270);
  spot.y= random (390, 480);

  noStroke();
  col.r = random (100, 255);
  col.g = (0);
  col.b = random (100, 200);
    
  fill (col.r, col.g, col.b, 120);
  ellipse (spot.x, spot.y, 10, 10);
  
  // neckline
  fill(138, 98, 134);
  arc(240, 384, 100, 80, 0, PI, CHORD);
  
  // mark
  fill(0,95);
  ellipse(280,290,2,2);
  
  // nose
  fill(214, 176, 150);
  stroke(0);
  arc(228, 279, 15, 25, 0, PI/3 + PI);
  
}

// Thank you so much!