Category: F2023 – Mang

Concept:

I was introduced to the phenomenon of Perlin noise from one of the readings in class. I looked deeper into it, and I kind of fell into a rabbit-hole where I was googling the sort of things one could generate using this property. Always a fan of vaguely spherical shapes, I used the noise to make distorted spheres. While playing around, I noticed that from above it it almost looked like a flower. I decided to make multiple of them, and increase the density so that they look thicker. I randomized the locations, so that slowly the screen fills up and once it’s finished, it should somewhat resemble roses (as if you’re looking down at them). This is what it looked like initially:

But after messing around with some parameters and adding a seed the end product becomes something like this:

Code Highlights

Because most of this is randomized and is one shape over and over again, the code isn’t the most technically impressive. I do like the use of Perlin noise to make radial shapes, and the randomization of the locations.

for (let j = 0; j < 2; j++){
  stroke(roseColors[currentColor]);
  push();
  translate(startX, startY);
  beginShape();
  for (let i = 0; i < 130; i++) {
    let angle = map(i, 0, 130, 0, TWO_PI);
    let radius = 150 * noise(i * 0.5, d * 0.005);
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    curveVertex(x, y); 
  }
  endShape(CLOSE);

  
  beginShape();
  for (let k = 0; k < 70; k++) {
    stroke(color(142, 128, 106, 15))
    fill(color(142, 128, 106, 15))
    let seedAngle = map(k, 0, 70, 0, TWO_PI);
    let seedRadius = 15 * noise(k * 0.03, d * 0.005);
    let x = seedRadius * cos(seedAngle);
    let y = seedRadius * sin(seedAngle);
    curveVertex(x, y); 
  }
  endShape(CLOSE);
  pop();

  d += 0.5;
  
  
}

 

Here is the final product.
Improvements

I’m a very impatient person, so the amount of time it takes to fill up the screen frustrates me a little bit. In the future, I’d like to find a way to speed up the process a bit. In addition, I’d love to find the way to control the randomness a bit. Some spaces on the canvas get oversaturated with flowers too quickly while others remain blank for a long period of time. I’d love to add some control or measure that makes sure every space on the canvas is populated with one flower at least (as soon as possible).

Casey Reas’ presentation gave me several insights about the role of chaos in computing visual art. I never stopped to think about these concepts, but the more examples I saw, the more I understood their importance. As Reas was showing some of his work throughout the presentation, I quickly realized how superior the works he was not in “control” were in comparison to his highly fixed ones, which were just simple shapes as opposed to aesthetically pleasing and complex pieces generated by chaotic code. This dynamic interaction between human intent and machine generated randomness not only can produce captivating art but it can also deepen our understanding of mathematics. The generated outputs were so interesting that Reas even ended up using them in clothing, showing the power of computing when it comes to art. The examples from other authors also gave me inspiration for the loops assignment.

Additionally, something that caught my attention was the process behind coming up with these codes. Reas mentioned that one of his projects took a year of planning before he actually started to code, he also mentioned at some point how he went through hundreds of different generated outputs for the same project, which makes me wonder how long on average it takes to come up with these designs, and how much of it is simple trial and error or hours and hours of analyzing and writing algorithms to come up with something idealized. Perhaps it is a mix of both, as mentioned in the quote: “It’s never a blind chance, it’s a chance that is always planned, but also always surprising”

In short, although I am more interested in the presented visual aspects as opposed to mathematical ones, these are still beautiful concepts to take a look at and appreciate the hard work and complexity that goes behind the scenes.

For this assignment, I drew inspiration from Casey Reas, who delved into the realm of randomness in his artistic endeavors. What has always fascinated me about art is that there’s no single “correct” way to perceive it. So, I set out to create something that generates different results based on user interaction. I designed squares with circles inside them, and these circles change in size as the user hovers their mouse over the squares. This introduces an element of unpredictability and variability into the creative process, echoing Casey Reas’s exploration of randomness.

The part of code that I like is this:

In this section, when the mouse hovers over a square, it dynamically adjusts the size of the associated circle according to specific conditions. This results in a captivating pulsating effect for the circles when users interact with the squares. What makes this fascinating is that each person’s experience will yield a different pattern based on where and how long they hover their mouse.

I found this assignment to be a delightful exploration. It prompted me to view art and generative art from a fresh perspective, highlighting that even within randomness, there exists an underlying sense of pattern. It’s as if the elements of chance and algorithms are working together to create a structured yet ever-evolving composition.

 

For this assignment of making an art piece using  Conditionals & Loops, I tried to combine the meditative aspects of Zen art with the precision of code, resulting in a unique and soothing digital art piece.

Concept

The concept of creating Zentangles is to relax, do art, appreciate the simplicity and be grateful for the opportunity and time to do the art! A Zentangle is usually drawing repetitive basic shapes & curves on a tile of paper or cardboard. For me, this tile was the p5.js canvas, the repetitive shapes – for loops I used and my code – the pencil!

The sketch(es)!

I began with a lot of thoughts and abstract ideas on how to go about doing this and made a countless number of edits, bigger or smaller shapes, darker or lighter mode,  time-based creation or mouse-interactive creation, corner positioned or center positioned, and I just couldn’t pick so I decided to give all of them to this blog post!

This one is the mouse-interactive one where, hovering over different positions on the Canvas enables different colors and shapes. To temporarily pause we can mouse click, keypress ‘s’ to stop or release mouse click to resume.

This one is time-based where it changes the color, radius and spacing based on a set time and frameRate. Mouse click pauses the loop by doing noLoop(), and releasing resumes the loop using loop().

.

A part of the code that I’m happy about is the math and the logic that went into making the circles and squares rotate and move in a specific way. I used the map() function to re-map the range of values that the radius of the circle can take, translate() to modify the center, followed by creating a function to check the position of the cursor to adjust color and spacing. For the time based one, I just used the frameCount.

function makeArt(maxRadius,spacing,numCircles,minRadius)
  {
    translate(width / 2, height / 2);

  for (let i = 0; i < numCircles; i++) {
    let x = cos(angle) * spacing * i;
    let y = sin(angle) * spacing * i;
    let radius = map(i, 0, numCircles, minRadius, maxRadius);
    let outerRadius = maxRadius*1.25;
    rectMode(CENTER);
    rotate(angle);
    rect(0, 0, outerRadius * 1.5, outerRadius * 1.5);
    rect(outerRadius*1.5, outerRadius*1.5, 17, 17 );
    push();
    translate(x, y);
    rotate(-rectAngle);
    ellipse(0, 0, radius);
    pop();
  }

  angle += 0.01;
  rectAngle += 0.31;

Reflections 

I’m enjoying the assignments for this class and feel like I’m challenging myself to think more out of the box. This felt like the perfect first step towards balancing the ‘Order & Chaos’ like from the Casey Reas read! For improvements, I think I could add more shapes or curves and not just stick to the ones I did and maybe try to create a more complex mandala/zentangle!

Casey Reas opens his speech illustrating how it’s been largely the role of artists to maintain order in the face of nature. However, as he continues further showcasing his own and other artists’ works, I started to doubt this idea of his.

The work that captured my attention the most was “Signals”, created in collaboration with American designer Ben Fry in 2011. This artwork showcases protein communication within a cancer cell, where each graphical cluster represents signals between networked proteins in a cancer cell as they change over time. Individual arcs represent signals from one protein to another; arc size corresponds to signal magnitude. Professor Michael Yaffe’s laboratory provided the data. Here is the artwork in question:

Reas’ approach to data visualization as a creative expression presents important questions regarding how data representation through art affects different viewpoints. “Signals” may convey a feeling of the complicated conflicts taking place within cancer patients’ bodies, perhaps demystifying a difficult biological process and establishing a connection to their own health journey. This type of visualization can also be a significant tool for scientists and researchers in acquiring insights and developing ideas on cellular behavior.

However, when ordinary people without a scientific background are considered, the possibility for bias and misinterpretation emerges. Such simulations’ aesthetic appeal may unintentionally romanticize or oversimplify the complicated realities of diseases like cancer. It is critical to recognize that, while art can improve our understanding, it can also distort it.

To conclude, it is critical to investigate the various perspectives on this junction of art and science. How do patients, scientists, and members of the general public react to data-driven art? What are the ethical and educational consequences of visually representing complicated scientific concepts? These issues emphasize the diversity of data visualization in art, as well as the importance of taking a balanced approach when understanding and appreciating these creative interpretations of knowledge.

Randomness, Random numbers, Coin flipping – math class? The only time I’d hear this combination of words was in a math class. Now, adding Art to it, I’ve always heard that you should let your art flow instead of binding it until it ends up creating something satisfying and my perspective broadened significantly after watching Casey Reas’s talk on Chance operations.

However, What intrigues me more than the thought that goes into making random generative art or the experimentation involved in it, is the viewer’s experience and its subjective nature.Art, by its very essence, is subjective, and everyone brings their unique perspective to the act of viewing it. When randomness is introduced into the equation, this subjectivity intensifies. During the talk, I found myself having different interpretations for each demo piece he presented.

Taking, for example, the ‘Fractal Invader.’ While the idea of creating art based on a coin flip is amusing in itself, what truly fascinated me was how my mind suddenly began to perceive people, faces, and complete figures within the artwork. Like this one that looks like a man represented by these black and white squares.

It made me wonder why our minds often deceive us into thinking something is incomplete, and yet, duplication somehow makes it appear whole. Why do we read into it when it’s duplicated? I like that recurring appearances of elements & patterns can create a sense of rhythm and harmony within a particular piece of art.

Introspecting on Reas’s discussion of randomness in isolation, particularly his mention of “the space between order and chaos,” I realized that even this concept is subjective. It left me curious on a slightly different front. How can we determine, to what extent randomness conveys which specific emotion? because just one visual is enough for our minds to start an endless stream of thoughts related to it. I’m interested in exploring further on two aspects: understanding the balance between order and chaos and finding effective ways to express emotions through randomness in the viewer’s experience of generative art.

For this week’s assignment, I wanted to experiment with two-dimensional arrays. Here is the outcome of my experiment:

I achieved the two-dimensional array structure by using nested loops (a loop within a loop) to arrange the ellipses in an organized manner. The outer loop, controlled by the variable ‘x’, is responsible for iterating through the columns of the grid. It starts with an initial value ‘spacing/2’ and increments by the value of ‘spacing’ in each iteration. This ensures that each column is spaced evenly from the previous one. Inside the outer loop, there’s an inner loop controlled by the variable ‘y’. This inner loop iterates through the rows of the grid, just like the outer loop does for columns. It also starts with an initial value ‘spacing/2’ and increments by ‘spacing’ in each iteration, ensuring that each row is spaced evenly from the previous one.

// creating a 2D array to achieve a board like structure
  // iterating through columns. setting the initial x position from spacing/2 and y position from spcing/2 to make all the ellipses on the board appear full.
  for (let x = spacing/2; x < width; x += spacing) {
    // iterating through rows. 
    for (let y = spacing/2; y < height; y += spacing) {
      // generating a noise value n that depends on the position of the ellipse and changes over time due to t
      let n = noise(x,y,t);
      // mapping the noise value from the range [0,1] to the radius value in the range [0, 25]
      let radius = map(n, 0, 1, 0, 25)
      noFill()
      // adding additional animation that makes the ellipses with radius <10 to fill
      if (radius < 10){
        fill(255)
        ellipse(x, y, radius)
      }
      else{
        stroke(255)
        ellipse(x, y, radius)}
    }
  }
}

Besides the 2D array, another key element of my sketch was the Perlin noise. Perlin noise, named after its creator Ken Perlin, utilizes an algorithm that generates a sequence of pseudo-random numbers in a way that maintains a natural sense of order. In this sequence, each successive number is closely related in value to the one preceding it. This approach results in a “smooth” transition between these numbers, giving rise to a more organic and less chaotic visual effect compared to pure randomness. In my case, Perlin noise generates variations in the ellipse sizes, making the transitions between the different sizes appear smooth and organic. The Perlin noise value is calculated based on the position of each ellipse on a 2D grid (x and y coordinates) and changes over time due to the ‘t’ parameter.

// generating a noise value n that depends on the position of the ellipse and changes over time due to t
      let n = noise(x,y,t);

After looking at the sketch for a while, I realized that it reminded me of microalgae. The visual output of the sketch sort of resembles the view of microalgae under a microscope. It also captures the organic growth pattern due to the Perlin noise, mimicking the natural variation seen in these microorganisms. While my sketch is rather abstract, I believe it conveys the idea of a living system evolving and changing over time, which happened to be a nice accident.

By CSIRO, CC BY 3.0, Link

 

My favorite aspect of Casey Reas’ talk was the way he seamlessly wove together the overarching themes of order, chance, and symmetry within the realm of digital art. Right near the beginning, he piqued my curiosity with a thought-provoking statement about the creation of art that is ‘artificial but possesses an organic quality.’ He displayed some of his initial pieces – the first in which he relinquished These pieces, born from a collaboration between his artistic intent and the unpredictability of chance, seemed to possess a unique and mesmerizing sense of nature.  Later on, towards the end, he displayed some art pieces which were created with the intention of as much order and symmetry as possible, saying that they had been criticized as ‘having no humanity’. These contrasting statements made me think of nature and the world we live in, which is neither entirely organized nor thoroughly chaotic. Nature is a sort of organized chaos, where natural elements – from the orbit of the sun to the migration of birds – follow a sort of fixed geometry, but there’s enough distortion so that it doesn’t appear eerie.  I think this is why interactive media art, particularly geometric and generative art appeals to me incredibly: it captures the very essence of nature, the one that is capable of locking in one’s gaze for a long moment.

 

Reas’ comments about chance in art also struck me greatly. The calculated randomness gives the illusion of unexpected art that keeps becoming itself, belying the computational nature it has underneath.  As Reas explained, the incorporation of chance doesn’t diminish the artist’s role but rather extends it into a realm where the boundaries between intention and serendipity blur. It’s akin to setting up the conditions for creativity to flourish, allowing the elements to interact and shape the final composition organically. In this way, the artist becomes a collaborator with the forces of randomness, enabling art to unfold with a vitality that mirrors the dynamic nature of life itself. This concept challenges conventional notions of authorship and control in art. It suggests that, in the digital age, artists are not just creators but also curators of algorithms and data, fostering a dialogue between human imagination and the machine’s computational abilities.

I thought Mondrian art was pretty fun to look at, and I liked the geometric simplicity of it, and so I thought of making a simple p5.js program with loops to try to mimic the look. However, I somehow also thought of sliding puzzles, where there’s a grid of squares and there’s one empty cell that other pieces can be slid into. I thought it might be fun to combine the two of them, and I ended up creating a little animated piece that runs on its own randomly.

• • A highlight of some code that you’re particularly proud ofI came across a problem where I wanted to randomly select 3 indexes in an array without any duplications, and it was something that I had to stop to think about as just randomly selecting elements sequentially could run the risk of the same index being selected twice. My code removes the selected index from the array before randomly selecting again.

    // make sure that there are always 3 colors, and we dont select same index for two colors
    let redBoxIndex = random(listOfNums);
    let index = listOfNums.indexOf(redBoxIndex);
    listOfNums.splice(index, 1);
    
    let blueBoxIndex = random(listOfNums);
    index = listOfNums.indexOf(blueBoxIndex);
    listOfNums.splice(index, 1);
    
    let yellowBoxIndex = random(listOfNums);
    index = listOfNums.indexOf(yellowBoxIndex);
    listOfNums.splice(index, 1);

  • Embedded sketch

• Reflection and ideas for future work or improvements

  I feel that this piece did not meet my own expectations compared to my Hello Kitty self-portrait I did for last week, but I thought it was my idea that was weak rather than the execution. It’s satisfying to watch the pieces move, especially when a coloured square moves, but I’m not too sure what the entire point behind this project is.

I tried recreating The Strokes’s “Is This It” album cover for this project. Here’s the reference picture:

The album originally had a different cover, but some time after the first batch of vinyls had already been pressed, frontman Julian Casablanca called his product manager saying he found “something even cooler.” The record label obliged, and later productions of the album appeared with a picture from CERN’s Big Bang experiments in the 70s. This new image shows tracks left by subatomic particles in a bubble chamber. As each charged particle moves through superheated liquid hydrogen, it leaves a trail of “bubbles” as the liquid boils in its wake. The trajectory of their paths can then be analyzed to identify the particles. For example, two particles with opposite charges would travel in opposite directions, because of how they interact with the magnetic field in the chamber.

This is how I approached the problem of animating these particles: I use a for loop to generate some sets of random values (within defined limits) for initial coordinates, radii, angles, and stroke weights. Each set determines the initial frame for each particle. A heavier particle, such as an alpha particle, would have a smaller radius than a smaller particle, such as an electron, because the heavier particle moves slower, which is why each track needs to have a different radius. They can also curve in one direction or the other as they travel, depending on the charge they carry. So the angle needed to be randomized between negative and positive values.

// array to store trail "head" information
for (let i = 0; i < 20; i++) {
  let x = random(width);
  let y = random(height);
  let weight = int(random(1, 5));
  let angle = random(-TWO_PI, TWO_PI);
  let radius = random(1, 10);
  particleArray.push({ x, y, weight, angle, radius });
}

Every time the draw() function is called, I offset the values in each set by a little, to define the new position for a particle, and then draw a line joining these two coordinates. The for loop in this function goes over each “particle” in the array and gives it a new position to be at. When the frame refreshes, this happens all over again.

There’s a lot more that’s going on in the album cover, and I’m trying to make my artwork something more than just lines on a yellow background. So far I’ve only added some grain to the canvas. I can also make out some drop shadow in the original picture, but it’s a little complicated to achieve that effect with code. Since the arcs are comprised of infinite small lines, I don’t have the shape of the full arc at any point in time, so I can’t add drop shadow to the whole arc. But if I add shadows to each little line, the shadow falls not just on the background but on neighboring lines too, and that makes the arc look disjointed. I just added some noise to the coordinate calculation so that the arc look just slightly more realistic and not completely smooth.

I think the trickiest part was figuring out the logic for how to connect each coordinate. At first, I was trying to use ellipses instead of lines, and wrote some more complicated logic to connect them in an arc, but I did something wrong so it would connect points of different arcs, shown below. It looks cool in its own right, but it just wasn’t what I was trying to do.