Month: September 2024

Intro

Sometimes, unexpected pop-ups may not be serendipities but discoveries of limits that propel us to set off on a new adventure.

My expenditure this time didn’t turn out to be very smooth in terms of my realizing my initial vision and how that vision deviates from my expectations. On the other hand, I believe these sorts of experiences would be quite beneficial as a lesson learned to guide future planning.

As my initial vision (or product concept) changed many times in the course, it’s rather difficult to start this documentary with a definitive concept aforesaid. Therefore, I will briefly touch on the concept of each of the prototypes alongside my process description.

process

A Definitive Heart in 3D Space

In the first stage of my development, my goal was to construct a framework of basic interactions that could satisfy my needs later on – which was attempted later on but eventually did not stand for my final product. Hence, I stuck to the idea of generating a visible coordinate system in 3D space at the beginning and wrote a basic ‘arrow generating-shooting’ mechanism.

The loops in this prototype are mostly for displaying every ‘arrow’ I stored in an array and the axis plane in each frame.

let arrowArray = [];

function draw() {
...
// Display all arrows in arrowArray for 1 frame
  if (arrowArray[0]) {
    for (let i = 1; j = arrowArray[i] ;i += 1) {
      if (j._3Dz < -50) {
        arrowArray.splice(i, 1); // Remove the arrow that is behind the plane
      } else {
        j.arrowDisplay(); // A method in Arrow class
      }
    }
  }
}

// Draw axis plane on a Graphics object
function drawAxis() {
  // translate to 2D coordinate system
  axis.translate(-axis.width / 2, -axis.height / 2);
  
  axis.background(10);
  
  // draw the axises
  axis.stroke('white');
  axis.line(0, axis.height / 2, axis.width, axis.height / 2);
  axis.line(axis.width / 2, 0, axis.width / 2, axis.height);
  
  // draw the marks on the y axis
  for (let i = 0; i < width; i += axis.height / 20) {
    axis.line(axis.width / 2, 
         0 + i, 
         axis.width / 2 + 5, 
         0 + i);
  }
  
  // draw the marks on the x axis
  for (let i = 0; i < width; i += axis.width / 20) {
    axis.line(0 + i, 
         axis.height / 2,
         0 + i,
         axis.height / 2 - 5);
  }
}

Here, I adopted a math function that has the graphic appearance of a heart to test out the prototype. As the heart function could have multiple y values for one x value, I used the unit circle to generate the coordinates of the points on the function.

// Heart shape function
function functionHeartX(t) {
  return 160 * pow(sin(t), 3);
}

function functionHeartY(t) {
  return 150 * cos(t) - 55 * cos(2 * t) - 30 * cos(3 * t) - 10 * cos(4 * t);
}

Besides, I also tried some basic lighting to hue the ‘arrows’ with redish-pinky color. It was quite interesting to see how the gamma factor affects the actual light color.

lights();
ambientLight(50); // as a gamma factor
pointLight(
  255, 0, 0, // color
  0, 0, 0 // position
);

A Probability Heart in 2D Space

Then, I started a new prototype to specifically realize generating random positions based on the probability distribution in a 2D space (in order to later adopt into the 3D space). Multiple probability functions were tested in this stage, including:

// Gaussian probability function
function gaussianProbability(distance) {
  if (distance > maxDistance) {
    return 0; // No points beyond maxDistance
  }
  return exp(-pow(distance, 2) / (2 * pow(sigma, 2))); // Gaussian decay
}

// Quadratic probability function
function quadraticProbability(distance) {
  if (distance > maxDistance) {
    return 0; // No points beyond maxDistance
  }
  return max(0, 1 - pow(distance / maxDistance, 2)); // Quadratic decay
}

It is also noticeable that the default random() function could be used as such to mimic the probability realization:

// Add point based on probability
 if (random() < probability) {
   points.push(createVector(x + width / 2, -y + height / 2)); // Store the point
}

A Probability Heart in 3D Space

After that, it was much easier to adopt the probability parts into the 3D version (and to be presented as a cliche gift in a long distance relationship):

A Grayscale Webcam Downgrader

# Please access the p5js page directly from the instance to allow webcam/mic usage for the following demonstration.

On top of that, I started to experiment with the webcam as an input:

// Create a video capture from the webcam
video = createCapture(VIDEO, { flipped:true });
video.hide(); // Hide the default video element that appears under the canvas

My intentions in this stage is: 1. convert the video into grayscale values instead of RGBs (as the grayscale values can be later on mapped into probabilities); 2. downgrade the video resolution into a mosaic (as, for probability generation purposes, it would save a lot of time and be even more beneficial for the depiction of the overall shape that I planned to deliver with a collective of ‘arrows’).

To achieve the first goal, we have to operate directly on the pixel array that holds the RGB values for each pixel of each frame in the video with a time complexity of O(n) (instead of calling a filter() method for the displayed effect on the video stream when showing the video).

function videoToGray() {
  // Load the pixels from the video
  video.loadPixels();

  // Check if the video has pixels loaded
  if (video.pixels.length > 0) {
    // Convert to grayscale
    for (let i = 0; i < video.pixels.length; i += 4) {
      let r = video.pixels[i];     // Red
      let g = video.pixels[i + 1]; // Green
      let b = video.pixels[i + 2]; // Blue

      // Calculate grayscale value
      let gray = (r + g + b) / 3;

      // Set the pixel color to the grayscale value
      video.pixels[i] = gray;       // Red
      video.pixels[i + 1] = gray;   // Green
      video.pixels[i + 2] = gray;   // Blue
      // pixels[i + 3] stays the same (Alpha)
    }

    // Update the video pixels
    video.updatePixels();
  }
}

As for the second goal, however, it was also at this stage that I did a lot of technical idle work. I started to write my method for downgrading the video resolution right away without checking the features of the video.size() method, and ended up with a function that loops through the pixel arrays with a time complexity of O(n^2) (which became very time-consuming when the original video resolution is relatively high):

function videoToMosaic(mosaicSize) {
  // Load the pixels from the video
  video.loadPixels();
  
  // Check if the video has pixels loaded
  if (video.pixels.length > 0) {
    // Clear the mosaicPixels array
    mosaicPixels = new Uint8ClampedArray(video.pixels.length);
    
    // Loop through the canvas in blocks
    for (let y = 0; y < height; y += mosaicSize) {
      for (let x = 0; x < width; x += mosaicSize) {
        // Calculate the average color for the block
        let r = 0, g = 0, b = 0;
        let count = 0;

        // Loop through the pixels in the block
        for (let j = 0; j < mosaicSize; j++) {
          for (let i = 0; i < mosaicSize; i++) {
            let pixelX = x + i;
            let pixelY = y + j;

            // Check if within bounds
            if (pixelX < width && pixelY < height) {
              let index = (pixelX + pixelY * video.width) * 4;
              r += video.pixels[index];       // Red
              g += video.pixels[index + 1];   // Green
              b += video.pixels[index + 2];   // Blue
              count++;
            }
          }
        }

        // Calculate average color
        if (count > 0) {
          r = r / count;
          g = g / count;
          b = b / count;
        }

        // Set the color for the entire block in the mosaicPixels array
        for (let j = 0; j < mosaicSize; j++) {
          for (let i = 0; i < mosaicSize; i++) {
            let pixelX = x + i;
            let pixelY = y + j;

            // Check if within bounds
            if (pixelX < width && pixelY < height) {
              let index = (pixelX + pixelY * video.width) * 4;
              mosaicPixels[index] = r;        // Set Red
              mosaicPixels[index + 1] = g;    // Set Green
              mosaicPixels[index + 2] = b;    // Set Blue
              mosaicPixels[index + 3] = 255;   // Set Alpha to fully opaque
            }
          }
        }
      }
    }

At the end of the day, it turned out that I could simply lower the hardware resolution with video.size() method:

video.size(50, 50); // Set the size of the video

Random Points Generated Based on Probability

Next, I wrote a prototype to see how the mosaic of probabilities could guide the random generation. The core code at this stage is to map the x-y coordinates on the canvas to the mosaic pixel array and map the grayscale value to probability (the greater the grayscale, the lower the probability, as the brighter the mosaic, the fewer the points):

function mapToPixelIndex(x, y) {
  // Map the y-coordinate to the pixel array
  let pixelX = Math.floor((x + windowWidth / 2) * j / windowWidth);
  let pixelY = Math.floor((y + windowHeight / 2) * k / windowHeight);
  
  // Ensure the pixel indices are within bounds
  pixelX = constrain(pixelX, 0, j - 1);
  pixelY = constrain(pixelY, 0, k - 1);
  
  // Convert 2D indices to 1D index
  return pixelX + pixelY * j;
}

function shouldDrawPoint(x, y) {
  let index = mapToPixelIndex(x, y);
  let grayscaleValue = pixelArray[index];
  
  // Convert grayscale value to probability
  let probability = 1 - (grayscaleValue / 255);
  
  // Decide to draw the point based on probability
  return random() < probability; // Return true or false based on random chance
}

A Probability Webcam in 3D space

‘Eventually’, I incorporated all the components together to try out my initial vision of creating a fluid, responsive, and vague but solid representation of images from the webcam with arrows generated based on probabilities flying towards an axis plane.

Unfortunately, although the product with many tuning of variables like the amount of arrows, the spread and speed of the arrows, and the lapse of arrows on the axis, etc., there could be a vague representation captured (aided by re-mapping & stretching out the probabilities with more contrasting grayscale values), the huge amount of 3D objects required to shape a figure significantly undermines the experience of running the product.

function applyHighContrast(array) {
  // Stretch the grayscale values to increase contrast
  let minVal = Math.min(...array);
  let maxVal = Math.max(...array);

  // Prevent division by zero if all values are the same
  if (minVal === maxVal) {
    return array.map(() => 255);
  }

  // Apply contrast stretching with a scaling factor
  const contrastFactor = 6; // Increase this value for more contrast
  return array.map(value => {
    // Apply contrast stretching
    let stretchedValue = ((value - minVal) * (255 / (maxVal - minVal))) * contrastFactor;
    
    // Clip the value to ensure it stays within bounds
    return constrain(Math.round(stretchedValue), 0, 255);
  });
}

Besides, the 3D space did not benefit the demonstration of this idea but hindered it as the perspectives of the arrow farther away from the focus would make them occupy more visual space and disturb the probability distribution. 

A Probability Webcam in 2D space

At the end of the day, after trying the ortho() method in the 3D version (which makes the objects appear without the affecting perspectives), I realized that reconstructing a 2D version was the right choice to better achieve my goals.

In this latest 2D version, I gave up the idea of drawing the axis plane and introduced the concept of probability distribution affected by ‘mic level’.

function setup() {
  ...

  // Create an audio from mic
  audio = new p5.AudioIn();
  audio.start(); // start mic
}

function draw() {
  ...

  // Map the audio level to contrast factor
  let level = map(audio.getLevel(), 0, 1, 1.05, 30);
  // Apply high contrast transformation
  pixelArray = applyHighContrast(pixelArray, level);
  ...
}

function applyHighContrast(array, contrastFactor) {
  // Stretch the grayscale values to increase contrast
  let minVal = Math.min(...array);
  let maxVal = Math.max(...array);

  // Prevent division by zero if all values are the same
  if (minVal === maxVal) {
    return array.map(() => 255);
  }

  // Apply contrast stretching with a scaling factor
  return array.map(value => {
    // Apply contrast stretching
    let stretchedValue = ((value - minVal) * (255 / (maxVal - minVal))) * contrastFactor;
    
    // Clip the value to ensure it stays within bounds
    return constrain(Math.round(stretchedValue), 0, 255);
  });
}

reflection

TBH, the technical explorations did consume much of my time this week, and it came to me later to realize that I could have thought of more about the theme ‘loop’ before getting started – as it appears now to be a very promising topic to delve deeper into. Nevertheless, I believe our workflow of production could be like this from time to time, and it is crucial to maintain this balance thoughout.

 

 

 

CONCEPT:

While walking across campus, I saw children blowing bubbles with their families. This simple, joyful scene transported me back to my own childhood, when my brother and I would spend hours blowing bubbles in the park. While I was in front of the screen, I thought about the patterns I recently saw during the week — and then I was reminded of the bubbles. I was then propelled this wave of nostalgia, inspiring me to incorporate the playful essence of bubbles into my piece. 

 

CODE:

In terms of coding, I was particularly challenged by the randomness factor. I was unsure of how to produce bubbles at random places, sizes, and even colours. Therefore, I looked for assistance on the p5.js website.: https://p5js.org/reference/p5/random/ to understand the syntax of the ‘random’ feature. After relentless experimenting, I was able to randomise the selection of colours, which I had little idea on how to approach. I was particularly proud of it. In terms of design, I removed the stroke to add some sort aesthetic to the bubbles, and I changed the background to a light blue, to resemble the sky.

 

for (let i = 0; i < 20; i++ ){
  
  let x = random(width);
  let y = random(height);
  let r = random (10, 50);
  
  fill(random(250), random(250), random(250))
  
  noStroke()
  
  ellipse(x,y,r)
  

REFLECTION:

This assignment really challenged what my understanding of art is, and also made me realise how often we are surrounded by ‘art’ – no matter how subtle, quotidian, or ordinary it may be. Perhaps, if I were given the opportunity to further it, I may add some user interactivity such as popping the bubble and slowing down the speed.

WORK:

 

I found Casey Reas’ Eyeo talk to be really interesting because it gave me a new perspective on how technology can create art. Although I would consider myself a fairly creative person, recently I’ve felt surprisingly restricted by how I can use code to make art. Reas’ work, in particular the one that represented the movement of cancer cells inspired me because it showed how interpretive art can be and also the unique ways in which we can reference aspects about life to influence what we create.

I also found it interesting how Reas distinguished between pieces he deemed complete and others he did not. He labeled a few of them as rather simple or mundane but as a viewer they seemed complete to me. Although this seems rather insignificant I believe it highlights how personal the artistic experience is to an artist. This acted as a reminder for me to work with intention because once I have a goal in mind, like Reas, I believe it will be easier for me to deliberately work on my projects with creative freedom while still having goals in mind.

All in all, I enjoyed the refreshing prospective Reas provided through displaying his own work and hope to apply it to my own methods. Seeing the wide array of examples and applications has not only given me ideas for how I might approach this week’s project but also gives me more confidence to freely explore future developments.

For inspiration, I found some online references with patterns created by combining similar shapes. Most of these combinations resulted in forms that resembled flowers.

Flower Pattern

I drew a connection between using a shape multiple times to draw a pattern and using loop in p5js. My idea is using the same shape, with elements of randomness to create a different flower every time the user interacts with the canvas.

Challenge

When creating this piece, what I found particularly challenging was using the rotate() function to position the petals around the center (the mouse cursor). However, the rotate() function in p5.js only allows rotation around the origin (0,0), so I had to use translate() to change the origin to the mouse cursor’s position. This quick fix created a problem later when I wanted the flowers to remain permanently on the canvas instead of disappearing every time the mouse was released.

For drawing the flowers, I created two functions: one to draw flowers with squares and one with ellipses. They are similar in essence except for the change in shapes used to draw.

function squareFlower(x,y,size,fcolor){
  //repeat drawing the square with the rotation of angle until the 360 degree is full
  for(let i =0; i<(360/angle); i++){
    rotate(angle);
    stroke(fcolor[0], fcolor[1],fcolor[2]);
    fill(fcolor[0], fcolor[1],fcolor[2],fcolor[3]);
    rect(x,y,size);
  }
}

Finally, I included random attributes like shape, petal size, and angle of rotation to create different flowers. I also adjusted the opacity of the shapes to create a more interesting composition. To make it look more like flowers, I implemented an increase in shape size over time when the mouse is pressed, creating a blooming effect.

Final Sketch

Reflection

After finishing the sketch, I tried to make the flower appear permanently on the screen instead of disappearing, but I couldn’t because the flowers are drawn based on their rotation around the origin (which changes for each flower). When I revisit this in the future, I want to change the drawing of the flowers from using the built-in rotate() function to using math to calculate the new coordinates. This will allow the flowers to be drawn independently of the origin’s location. Another issue is that some shapes in the flowers are overlapping, which I think stems from the calculation of the rotation angle. I will also try to improve this calculation in future sketches.

Concept: 

For my self portrait I wanted to do something slightly unconventional. Joan Miro is an artist that I really like and I thus decided to do my self portrait in his unorthodox surrealist style. I wanted to have fun background elements commonly seen in his artwork such as the crescent moon and a star.

Something I’m proud of:

Something I’m proud of for this assignment are the random curves across the whole portrait, and especially drawing the crescent moon. These aspects took me the longest time to figure out and are thus the ones I am most proud of.

function details() {
  
  fill(255,255,0);//drawing a crescent moon shape by drawing two intersecting circles and having one of them be the color of the background
  //this effect makes it so that the second circle cuts the first one to make the moon shape
  noStroke();
  ellipse(150,630,100,100);
  fill(240, 248, 255);
  ellipse(170,630,100,100);

  //drawing the diagonal lines for the eyebrows
  stroke(0);
  strokeWeight(4);
  line(300, 300, 450, 400);
  line(500, 400, 650, 300);

  //drawing the yellow curve around the mouth
  noFill();
  stroke(255, 215, 0);
  strokeWeight(8);
  beginShape();
  vertex(250, 550);
  bezierVertex(350, 500, 450, 700, 550, 550);
  endShape();
}

Final Product:

Reflections:

I enjoyed working on this assignment quite a lot, it was a fun experience juggling between taking inspiration from Miro and then also trying to add my own personality into the portrait so I could make something I could be truly proud of. An aspect that I would like to work on in the future is adding some sort of interactivity maybe with eye movement or some background features morphing into others to further portray the dreamlike essence of Joan Miro.