Month: February 2023

Concept

I have started my implementation of the art work from one of the works from Programm-Information21 suggested by Professor Shiloh. It is shown below.
At first, I  replicated  it  trying  to copy  the  idea  of squares populating my  canva  with  various  density. It turned out to not be so exciting, so I have decided to play around with shapes and then I sticked to the idea to use ellipses. My final sketch uses only ellipses.

Different parameters for ellipses gave different visuals, and for my primary part of sketch I attempted to replicate ongoing flames. Background color is set to orange and a number of black ellipses with different parameters moving in a random fashion are responsible for the final effect.

Code for the Fire Imitation

background(249, 94, 4);
fill(0);
for (let x = 0; x < width; x = x + 5) {
  for (let y = 0; y < height; y = y + 5) {
    if (y < height / 4 + 10) {
      ellipse(x + random(width / 20, -width / 20), y, 8, 10);
    } else if (y < height / 2 - 30) {
      ellipse(x + random(width / 20, -width / 20), y, 6, 10);
    } else if (y < (3 * height) / 4) {
      ellipse(x + random(width / 20, -width / 20), y, 4, 10);
    } else {
      ellipse(x + random(width / 20, -width / 20), y, 3, 10);
    }
  }
}

As I mostly implemented the fire animation in class and just changed it a bit at home, I have decided to add something using key controls as well. So, to introduce a bit of contrast to fire, I coded falling rain drops to imitate rain to some extent. I did some quick research on p5js to use Classes and functions to code behavior for each rain drop as an object. It is again ellipses.

Code for Rain using OOP

class Rain {
  constructor() {
    this.x = random(0, width);
    this.y = random(0, -height);
  }
  create() {
    noStroke();
    fill(140, 223, 232);
    ellipse(this.x, this.y, random(3, 6), random(3, 10));
  }
  fall() {
    this.y += random(10, 30);
    if (this.y > height) {
      this.x = random(0, width);
      this.y = random(0, -height);
    }
  }
}

“Rain” activates when a user presses the mouse and stops upon its release. You can check the full sketch below.

Reflection

My final sketch is nowhere near close to the work I got inspiration from. For me, it shows that we may start at one point and end up deviating from our designed path yet enjoy the process. It is certainly exciting that such simple code may produce interesting results.

Future Improvements

I am quite satisfied with the flame animation, yet for the rain part I feel it can be improved further and there it may make sense to add ground, sky, and other attributes to give it a look of something more real, rather than completely artificial.

CONCEPT

I took inspiration from this one example shown in the COMPUTER GRAPHICS and ART magazine for May, 1976  suggested by the professor. It made me think of buildings and cables under walls. In my sketch, I attempt to imitate a nightlife of a residential building, with the light in the windows randomly turning off and on, and the cables exposed over the walls indicating some activity.

IMPLEMENTATION

I created three functions to draw each element of the sketch: cables, windows, and walls. FrameRate function is set to 1 because the change is too fast-paced otherwise and the sketch looks less like a building in a night time.

I started by making the overlapping cables, which created the outline for the brick walls and windows. The cables are done in a for loop nested three times: the first time to draw multiple rectangles over itself, the second time to make a row of those rectangles, and the third time to make it a grid. The rectangles overlap with each other in a row, to make a narrow compartment for a window to fit snugly into. The outline of the rectangle is different each time because, in my mind, it makes sense that a change of color signals whether the cable is on or off.

For windows, I have used a nested loop to make a grid of rectangles. An array of two colors and a random function are used to update the fill value. This helps to imitate the lights being turned off and on in each apartment unit and gives the building some life.

I had the most struggles drawing the bricks. Initially, I wanted to make a 6 by 4 grid of brick walls so that they don’t go beneath the windows but stay separately from one another. However, when I tried implementing that, the editor would crash. I assume that it’s because I have nested the for loop 4 times. I tried a few more times until I realized that it would be easier to make a singular 50 by 27 brick wall and call this function before the other two.

Essentially, all three of my functions are similar to one another. I attach the brick wall function snippet because it took me the longest to come up with.

//drawing the bricks
function brickBuild() {
  noStroke();
  fill(222);
  let brX = 0;
  //initial Y indentation
  let brY = 33;

  for (brGridH = 0; brGridH < 50; brGridH++) {
    //move the row down
    brY = brY + 9;
    //initial X indentation for each row
    brX = 28;

    for (brGridW = 0; brGridW < 27; brGridW++) {
      //draw 12*8 brick
      rect(brX, brY, 12, 8);
      //move to the left
      brX = brX + 13;
    }
  }
}

WHAT WOULD I CHANGE

Perhaps, to make the sketch imitate a residential building more closely I could make each of the windows update the fill value at a different point so that they would change the colors asynchronously. The cables could do the same things (change asynchronously), but I would also add a pulsation effect when they change their color and width/height values.

I have thalassophobia, the fear of giant bodies of water. So, if ever asked to choose between mountains and the sea (like on those personality quizzes), I will, without a doubt, choose the mountains. However, like most people, I love nature. Having grown up in a small village I am no stranger to its wonders and in my 20 years of being on the Earth, I have grown my appreciation for even the smallest drops of dew condensed on an unripened plum. So, for this assignment, I choose to focus on both mountains and the sea in order to explore loops and conditionals in p5js:

The Sea

Challenges

To start off, I didn’t animate the sea. Rather, I just created a stationary sine curve. Then, sine curves. I didn’t quite understand how to make them move, so I watched this video by Professor Daniel Shiffman and implemented his motion technique to my sine curves. To make them move in the opposite directions, I first started with graphing them out of phase, which did not work because they would move in the same direction. By using the modulus function, I was able to move adjacent rows in opposite directions, which gave the animation an interesting effect. A big obstacle was also the background. Since fill() and stroke() can go beyond the scope of the function they are in, it took some time to re-read the code in order to remove stroke() and strokeWeight() from elements they were not supposed to be on. Lastly, since I used curveVertex() for the sine waves, I was unable to fill the sea properly. So, to get around that, I increased the stroke and used scale() to make the waves slightly bigger without seeing the background underneath.

Reflection

The sunset, although it does not look completely realistic, is still very beautiful. By looking up the hexadecimal values for the sunset colours I was able to create ellipses which imitate the sky around a setting sun. I placed a rectangle above the canvas with a varying alpha (transparency) which made the sunset more realistic:

// Sunset color over the sea
noStroke()
fill(4, 97.7, 65.9, map(mouseY, height, 0, 0.1, 0.4))
translate(100,100)
rect(width/2, height/2, 800, 1000)

Although I tried making a gradient, it did not look good, so I stuck with the simplified version. In the future, I wish to understand how to make gradients without the help of external libraries and make the motion of the waves both horizontal and vertical compared to the currently only horizontal ones.

The Mountains

Challenge

To start off, understanding how to graph noise() was very challenging. To understand noise(), I once again watched Professor Daniel Shiffman and his series on noise(). They were extremely helpful in understanding how to graph noise without having all the curves look the same. Although I understood how to store the points on the canvas and how to graph them, the amplitude of the waves (y offset) was not working properly. Fortunately, I realized that I was not the only one interested creating noise() curves and I solved my issue by contrasting my code with the example on this page. After graphing my mountains, I realized that they would not fill completely. After some time, I realized I could use rectangles underneath the curves in order to make them completely filled. Lastly, working with RGB is the easiest when dealing with a single shade of blue. By reading about different color modes in p5js, I was able to figure out how to gradually increase the brightness of my blue through the use of colorMode(HSB).

Reflection

In class, we made “buttons” by constraining the mousePressed function on an ellipse or rectangle. For this assignment, I wished to create the option to, in a way, shuffle the mountains and the stars in order to get new pieces of art, if they can be called that. I created a button (“Generate new”) which can be pressed to do just that:

let button = createButton("Generate New");
button.position(0, h - 20);
button.mousePressed(loop);
button.mouseReleased(noLoop);

The button loops draw() when pressed and stops after being released which showcases the noise() function a lot better and its weight on standard distribution, i.e., distribution around the center. In the future, I wish to combine the two artworks and create a bay or lagoon that encompasses both the concept of noise() and water motion inspired by sine curves.

The concept:

I looked through the pdf’s attached on computer graphics and saw a piece which inspired me a lot. This is where I drew my inspiration from:

Initially I created patterns of squares of one distance reaching for the four different corners. I decided to create a symmetric and ordered pattern which causes some sort of optical illusion.

Here is that piece:

Then I moved on to create the same four cornered patterns but with different distances between the squares – doubling and halving the distances.

This was with the intention of creating something which very closely resembles the inspiration piece. I randomly chose the patterns without thinking deeply about the pattern number I was choosing, then I arranged as I saw fit by changing the patterns into a piece which I liked best.

Here is the piece resembling the inspiration source:

Finally, after watching the video which talked about chance and randomness in art I was inspired to create an animation which randomly chooses a different pattern for each square in the canvas every 2 seconds. I think allowing randomness choose its course makes for a very interesting art concept.

Here is the modified version after watching the Chance in Art talk:

Curiosity got the best of me once again, and I wanted to see the above piece if the squares were of homogenous size and distance. I made the canvas smaller in order to focus more on the patterns which are created when the squares align. This one also changes every 2 seconds.

Here is what this looks like:

Reflections:

I truly allowed myself to indulge in my curiosity and inspiration from both the piece which I attached in the beginning but also in the talk given by Casey Reas on Chance Operation.

What initially began as a piece to itch the part of my brain which needs symmetry, then proceeded to become a demonstration of code in a way which imitated the first piece of inspiration, then became an exploration of chance and pattern creation.

I enjoy my 3rd piece the most, because it creates numerous variations of the initial inspiration source, and I believe it shows the work of chance in a very beautiful way by creating patterns.

The reason why I created the 4th piece was because I noticed that when the patterns were of homogenous size and distance and they were next to each other, they align to form interesting patterns, so I had the idea to create different patterns which only included squares of homogenous sizes. I see now that the most noticeable patterns are when the squares are more frequent and the distances between them are smaller, and the largest patterns barely align to create a pattern, but as a whole still create an interesting show of chance.

Challenge:

I had only one technical challenge initially because I started creating the mini patterns inside the squares using ‘for loops’, but quickly realized that was a mistake when the squares overlapped. Then I chose to use while loops instead because I have 3 different variables being incremented by different values. Here is one excerpt:

function filler1(x, y) {
  var i = x;
  var j = y;
  var k = 100;
  while(i<x+60)
    {
      square(i,j,k);
      i+=10;
      j+=10;
      k-=15;
    }
}

Where x and y determine the coordinates of the square, which get randomly chosen in setup (first two pieces) or randomizer functions (last two pieces).

I did, after all, utilize a ‘for loop’ to randomize the choices for each square:

function randomizerCall() {
  
  for(let i = 0; i<601; i+=100)
    {
      for(let j =0; j<301; j+=100)
        {
          randomizer(i,j);
        }
    }
}

Thankfully this project did not give me many technical challenges. The largest challenge was fulfilling my curiosities, because as soon as I was wrapping up one piece my curiosity would wonder about a variation of the piece which might make it more interesting – hence the 4 different pieces.

The Concept

The idea for this project started from my fascination with how thin lines are presented digitally, and how slight variations in their arrangements can create interesting and surprising patterns. To start the project, I wanted to move two checkered squares across the canvas and have them overlap in the middle. As the checkered squares themselves consisted for two for loops to make all the lines in a geometric fashion. This was definitely one of the challenging parts: to move a bunch of lines across two for loops with set time intervals, where the number of lines moving aren’t predefined, and all of them must be moving together. I tried several approaches including implementing different pre-made functions like translate, but at the end, the best way to do it was through two global variables called movers.

Failed Attempt:

Final Solution:

The global variables are added to the construction of the line itself within the for loops, and incremented at the end of the draw, where the moverR and moverL are negative and positive to represent that they are moving in opposite directions.

The Sketch

Link for sketch: https://editor.p5js.org/mhh410/full/NI1puoEY6

The two squares move towards each other, meet for just a brief moment, where the hidden message “Hi” can be seen only when they completely overlap, and then drift apart, never to meet again (Hence, you must reload the page if you missed the message the first time!).

To play around with the sketch and explore the various behaviors the lines can make, I added a section called CONTROLS in the code.

Changing the speed controls the movement of the squares, and the sharpness controls how densely packed the lines are within the square, and this is what we can use to see various ways the squares overlap. The message however, can only be seen when the speed and sharpness are both set just right, and changing them too much results in not seeing any interesting results from the overlap.

Improvements

To add to this project, maybe an improvement could be adding a way to change the angle of the lines themselves. I’m sure more peculiar patterns could be created digitally if some lines were diagonal rather than just horizontal or vertical. I thought about adding a reset button, or making the squares hit the walls of the canvas and come back again, but then the encounter wouldn’t really be “brief”. Maybe adding some color to the design could also create some added surprise too.