Loops

THE SKETCH 

For this project, I made two similar sketches: one that is dynamic, and one that is a still image.

I. The dynamic sketch:

The link to my code in the online editor for version 1 can be found  here. 

 

II. The still sketch:

The link to my code for the second version can be found here.

INSPIRATION & DESIGN: 

The idea for this project came to me rather slowly. Usually with any new artwork I have a very clear idea about what I want to create and can visualize it on paper before I start coding. However, I had a lot of difficulty because I personally don’t love artwork that heavily relies on randomness, and I don’t love overly abstract/geometric designs (conveniently what loops are good for!).  After hours of trying to come up with a uniform idea, I decided to just start coding. I knew that I wanted to challenge myself by working with noise(), and I enjoy working with sin() and cos() functions. I used these two things as my starting point.

In the end, I ended up creating a sort of wavy sun pattern that stretches and contracts with the help of the noise() function. I later wanted to have several of these patterns on the same canvas, but this was too much for my computer to handle and resulted in very slow and glitchy animation (likely due to the nested for loop and calling noise() with each iteration). Consequently, I created a second version of a sketch that does not animate and simply consists of 5 sun patterns randomly placed on the canvas. While I do wish this one also animated, I think it still looks beautiful.

 

CODING SPECIFICS

Each sun pattern is composed of of several sine waves that are rotated about an invisible center point. In the first version, that point is the center of the canvas; in the second version, 5 points were chosen at random.  The first version uses a simple for loop inside the draw() block, while I create a separate function called spirals() in the second version that is called 5 times within a for loop in draw(). To make the sketch s Regardless, the integrity of the algorithm for drawing these shapes is the same in both. A snippet of the code for function_squiggles() is shown below:

for (let j = 0; j < 16; j++) { 
beginShape();
  rotate(PI/8); 
  for (let i = -800; i < 800; i++) { 
    y= noise(xoff) * amp * sin(i/(period)); 
    vertex(i, y);
    
    xoff+=0.00001; 
  }
endShape();

 

The waves are drawn using a custom shape, which basically plots each point (vertex) on the sin wave and connects them together to create a uniform curve.  Each vertex has an x-coordinate that increments by 1 with each iteration. An upper bound  800 is used to ensure that even shapes whose center point is at the edge of the canvas can extend all the way to the edge. The y coordinate is dependent on the sin() function, who’s amplitude changes every frame based on the constant variable amp and the changing variable xoff. This variable begins at 0.0 and increments by 0.0001 with each iteration; as a result, each frame when the noise() function is called it returns a different number.

You may notice that some of the waves appear thicker than others and some lines appear to overlap. This was done by layering a second for loop in addition to the first one shown above . Continuing in the function_squiggles() we have:

for (let j = 0; j < 12; j++) { 
beginShape()
  rotate(PI/12); 
  for (let i = -800; i < 800; i++) { 
    y= noise(xoff) * amp * sin(i/(period));

    vertex(i, y);
    xoff+=0.00001; 

  }
endShape();

Note that the degree to which each wave is rotated is now PI/12 and iterates 12 times, in contrast to the first for loop, which has each wave rotating at PI/8 and iterates 16 times. This slight difference allowed for the shape to have some irregularity, and to look more “organic” versus geometric.

REFLECTIONS: 

While I feel that the actual code of this project was far easier than that of last weeks, I experienced much more difficulty creating the design for this one. Still, I’m not quite sure what I’ve created and how I feel about it; however I’ve stepped outside of my IMA comfort zone in that I created something without any pre-planning, and rather relied on experimenting and improvising. Being a lover of control, these are skills that I’ve always struggled with as an artist, but I am happy that I was able to have a different approach for this project.

 

One thought on “Loops”

  1. I find the static image more appealing since the viewer can appreciate the complexity in the lines and there is more than one “center”. The first sketch is quite “glitchy” so it’s hard to appreciate the shapes. Now that you have the code for the first sketch working you could try to “tune” the parameters to give a more aesthetically interesting result – after the hard work of coding the system a little tuning goes a long way to having a nice output. Well done!

Leave a Reply