Category: Spring 2023 – Shiloh

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.

The Concept

My overall idea for this assignment was to make something futuristic with a robotic design. I started off with my color scheme of black and gold and went from there. I also wanted the drawing to have a certain aesthetic  where the image would appear very sharp but also get its visual appeal from the mathematics involved in the drawing process.

The Sketch

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

Most of the code uses a combination of for loops and lines in order to create this effect.

To add more animation to the sketch, I also wanted to implement a way to make the color constantly change, starting from golden and then getting darker and darker. This is done by setting a color array globally, and then decrementing the numerical value of the elements of the color array at the end of each draw loop.

When the elements in the array drop to zero, the array values are reset and the sketch turns back to golden.

Improvement

One of the main elements that I would want to improve is the color shifting behavior of the sketch. I was expecting that the color would consistently change, as the color changes at the end of the draw loop, but as the sketch runs the performance of the sketch itself deprecates. Perhaps all the lines make it a heavy sketch to run, and the draw loop itself isn’t running at a consistent speed. I have added print statements at the end to test this. In the beginning, the color value drops by about 20-30 points by the time the print statement runs, but this consistently drops as the sketch keeps running and towards the end it slows down to just around 2-3 points per every print statement. At this point, the browser begins to lag heavily. I tried playing around with the frame rate but nothing really fixed this issue.

Concept

My art piece is a collection of white lines and squares on a black background. The lines and squares move around erratically. It was inspired by the movement of molecules in real life: quick, erratic, random.

Code highlight

I’d like to highlight my draw function.

function draw() {
  background(0, 0, 0, 130);
  
  // Update movers and draw them.
  for (let mover of movers) {
    // Add a line to the end of the mover.
    addLine(mover);
    
    // If the mover has more lines than allowed, remove the first line.
    if (mover.length > MOVER_LINE_COUNT) {
      removeLine(mover);
    }

    // Draw all lines.
    for (let l of mover) {
      line(l[0], l[1], l[2], l[3]);
    }
  }
  
  // Update squares and draw them.
  for (let square of squares) {
    moveSquare(square);
    rect(square[0], square[1], square[2], square[2]);
  }
}

Although the overall logic of my code is the most complex thing I’ve written so far in this course, the draw function, where everything actually happens, is very simple and straightforward. This is because I used functions (e.g. addLine, removeLine, moveSquare) to isolate unrelated, functional pieces of code.

The sketch

Reflection

I’m fairly happy with the final sketch. I went for minimalism and an old school digital style, so I only used black and white colors. Potential additions can be more shapes, for example circles or triangles. Another interesting addition could be to implement a simple physics system, with collision detection. This way, one could make the shapes bounce off each other.

Concept

My sketch is inspired by something that is a big part of my life – Tennis. I could go hours and hours watching or playing it and not even notice the time pass by. The reason I love this sport so much is that it gives me a chance to escape from my stressful and work-intensive routine and not think about anything besides hitting the ball and feeling the satisfaction of it smacking against my racket strings :p

So I thought why not make a self-portrait of me holding a racket on a tennis court while juggling a ball on it.. indefinitely 🙂

Implementation

I tried to play around with shapes as much as I could and place them until they were in the right position. However, some things like making the ball bounce and creating the net in the background are worth mentioning here.

To make the ball bounce, I created a variable called ballSpeed and added it to the y value of the ball inside the draw() function to make it move. However, to keep it inside certain bounds, I made use of an if statement and as soon as it reached one of the bounds, I reversed the direction of the ballSpeed variable, this made it “bounce” within certain bounds.

fill("#AEDA38");
ellipse(x + racketOffsetX, y + racketOffsetY, 30, 30)

// make the ball rebound within a certain area
if (y <= 350 || y > 390) {
  ballSpeed = -ballSpeed;
}

y -= ballSpeed

For making the net, I used a simple for loop to make horizontal and vertical lines. This saved me a lot of time and I feel it was worth mentioning here.

// vertical lines of the net
stroke(10);
strokeWeight(1);
for (let i = 0; i < 50; i++) {
  line(10 + 10*i, 207, 10 + 10*i, 275)
}

stroke(10);
for (let i = 0; i < 8; i++) {
  line(0, 207 + 10*i,  width, 207 + 10*i)
}

Reflection

I found this homework more of an activity than an assignment because I enjoyed every moment of crafting it and making it come to life. I wanted to implement a lot more things, like making the scene transform into one where I would be holding a frying pan in place of the racket and wearing a chef’s hat in place of the tennis cap with a kitchen in the background (yes, I recently discovered that I have a thing for cooking). The ball could be an egg or a pancake maybe? Time was my biggest enemy for this idea but I would love to implement this sometime in the future. I would also love to add live interactions to my projects next time where the user can interact using clicks or button presses to make the experience more immersive.

 

CONCEPT

For this assignment, I was inspired by sketching in Adobe Illustrator. One way of making complex figures in Illustrator is by drawing lots of intersecting ellipses to outline the figure that you want to build. At the intersection of those ellipses, you get irregular shapes, which will help you in achieving the organic feel in your final drawing. You then reach for the Shape Builder Tool to connect the wanted areas at the intersection of the ellipses. Even before using this tool, you can already see the outline of your figure peeking through the bunch of ellipses.

In my work, I wanted to achieve this rough sketch feel and imitate the way I draw regularly (on paper or in Illustrator).

IMPLEMENTATION

My code was pretty repetitive. The order in which the shapes are placed is important, so I have started by writing in comments all the portrait parts that I need to add in a particular order. I then call for random color with random opacity, choose the angle of rotation, and draw the shape. This process is repeated for each part of the portrait. As a code it looked like the snippet below:

//jaw
fill(random(0,255), random(0,255), random(0,255), random(0,255));
// fill(249, 213, 192, 130);
translate(width / 2, height / 2);
rotate(120);
ellipse(20, 20, 150, 200);

The most challenging part of the implementation was figuring out the angle of rotation for each shape. It didn’t rotate in the way that I would imagine it to. The one-degree difference could make the shape do an actual 180-degree turn on the sketch. I’ll ask for more clarification regarding this issue during the class. Perhaps, it was an easy fix.

REFLECTION

I like the way my sketch ended up. It reminds me of stained glass window drawings that I did with gel paint as a kid. It kind of also gives me cubism vibes. Some random color pallets work better than others, perhaps, I could work on limiting the randomness of colors next time.