vingu – Interruptions

link

observations:

  1. the artwork is square
  2. margin around the piece
  3. composed of a grid, around 56 by 56
  4. short black lines of same length
  5. the lines overlap around 1/2 of another line
  6. lines are rotated "randomly"
  7. there is either a vertical or horizontal grain
  8. some holes/ missing lines
  9. the holes are clustered together
  10. around 60% lines

For this piece, I started with a nested for loop to create a grid of lines. In order to replicate the rotations and clustered holes/missing lines, I learned about Perlin noise. It was challenging for me to understand Perlin noise; the main thing I got was that it was a "natural ordered, harmonic succession of numbers".  (it's more smooth, therefore can create "clusters"?) I spent a lot of time on the trigonometry of the lines given the random angle. Then I tested out Perlin noise syntax to see what worked/not. I used a x-offset for random rotation, and another x-offset2 for clustered holes (different offset maps it to different parts of the noise wave). I used a random conditional statement to determine whether it was horizontal or vertical grain (they used different line equations; the sin and cos were switched).  Then I added a noiseSeed() to generate different results every time it is clicked.

I found it difficult to replicate the rotation of the lines. My lines stay close to the grain, while Molnar's lines are more varied. I tried to test different numbers, but the lines ended up too varied and lost the "grain" effect. Molnar's rotation of the lines made the clustered holes stand out more. I admire Molnar's calculated randomness.(also she created this before before perlin noise was created)

clox-Interruptions

02-Interruptions

https://editor.p5js.org/clox/full/fmhoz0-qa

 

 

 

 

 

 

 

 

 

 

 

 

Process:

  1. First I observed the components of the original piece:
    1. uniform black lines distributed across a grid at their midpoint
    2. lines appear to rotate randomly around their midpoint
    3. lines are not always drawn
    4. the gaps in the line grid cluster
  2. Then I tried to break down each observation into steps to recreate this piece
    1. Made a looping function that defines the coordinates of the midpoints for each line
    2. Made a class for drawing a line
    3. Specified the attributes of that line making class:
      1. the line's midpoint
      2. the line's angle (randomly generated)
      3. the line's (ax,ay) and (bx,by) coordinates (calculated using angle and midpoint)
    4. Made a threshold for drawing a line (or not) using Perlin noise function in the for loop that draws the line by calling the line object
      1. I multiplied the Perlin noise value by 0.01 to amplify it
      2. I then chose a threshold that dictates whether a line should be drawn
    5. Finally I used the mousePressed function to refresh the canvas after a click

 

sovid – Interruptions

What I noticed about Molnár's artwork:

  1. The artworks are all squares.
  2. The artwork has a white background with many small black lines.
  3. All of the lines have the same length.
  4. The lines appear to be organized on a grid.
  5. The lines all have random angles.
  6. The left endpoint on the lines on the left edge of the artwork all line up.
  7. The top endpoints on the lines on the top edge all line up.
  8. There is a white border a little bit over the line length.
  9. There are various gaps in the grid but they are all clustered together.
  10. The gaps are not uniform shapes, but are rather spilling into the grid.

My first task was to create the grid of lines - I began by creating two classes - one for an individual point and then one for a line. Then, using a nested for loop, I drew lines of length 22 px. (I had to test various spacing values and line lengths to get as close as I could to the original artwork and that's the value I ended up on) going in the same direction to ensure my grid was working properly. Then, to create the random angles, I used an altered parametric form of an equation of a circle to find a random point on the circumference of a circle with radius lineLength. To create the gaps or "interruptions", I used Gene Kogan's notes on 2D Perlin noise to decide whether or not to draw lines at a certain point on the grid. To reset the sketch, I had to create a new noiseSeed value before I ran redraw() because otherwise the noise function would return the same values each mouse click. At first I attempted to create the gaps without Perlin noise, but having them cluster together in the way Molnár did proved to be very difficult.

My sketch is linked here.

rysun-Interruptions

Observations of Molnar's Artwork

  1. The artwork is square, composed of a virtual grid of n^2 cells.
  2. From a cursory glance, n looks to be roughly 50.
  3. The artwork consists of many short black lines, each occupying a virtual square cell in the grid.
  4. Each line has the same length.
  5. There is a natural disposition to each of the lines; i.e. many of the lines are oriented in the same direction, with outliers turning a random angle from this reference angle.
  6. These "default" directions are cardinal; i.e. they are horizontal or vertical.
  7. The background is white.
  8. Random blotches of lines are absent.
  9. There are several of these blotches, each of varying sizes and shapes.
  10. The lines are just long enough to barely intersect their adjacent neighbors.

My process was this: Create a grid which is nn. Each element in this grid represents a line. Each element in the grid contains two values: both are based on noise(), the first determines the line's angle, the second determines whether or not the line will appear. In an imbedded for-loop, draw each of these lines if their second value permits. Toggle noise variables to get desirable blotch frequency and line angles.

It was fairly difficult experimenting with the noise variables to get a desirable appearance which emulated Molnar's work. Unfortunately, I think my piece has a lot of homogenously-sized blotches, whereas the blotches in Molnar's works vary a lot. I think if I were to reattempt this project, I would instead of having a noise-based value which determined whether or not the line would be drawn by binarily comparing it to another cut-off value, I would make the probability of the line being drawn dependent on the noise-based value. I better appreciate the sophistication of Molnar's work, especially considering that I was able to use built-in functions on my laptop, which is much more accessible and efficient than the proto-computers and printers of Molnar's time.

Link to Project: https://editor.p5js.org/rsunadaw/sketches/3EHxkDIf9

meh – Interruptions

Link to p5js: https://editor.p5js.org/meij_who/sketches/HyEFhymD6

Observations:

  1. The artwork is square.
  2. The artwork consists of many short black lines, on a white background.
  3. The lines all have the same length.
  4. The lines are arranged in a closely packed grid.
  5. The lines have a range of random rotations.
  6. The lines rotate around their own centers.
  7. The rotations of lines tend to be close to 90 degrees.
  8. The positions and sizes of the blank areas are random.
  9. The blank areas tend to cluster.

Process:

I approached to the problem first by creating a grid of short lines, and then rotate them in random angles in certain range. I then used noise to create a range to identify the area where to leave empty, and looped through the lines to find out the lines that are within the range. If the line is not within the range, draw the line in its rotation. Finally, make the image clickable to change frame.

During the process I found that it was really helpful to use translate(), push() and pop() for line rotation around its center and to use noise(x, y, z) (especially using z for change to different noise).

Compared to the original image, my images can be improved by increasing the amount of detail by making var inc a larger number.

MoMar-Interruptions

Assertations:

  1. The artwork is square
  2. The artwork consists of many short black lines, on a white background
  3. The lines all have the same length
  4. The lines seem to be generated randomly
  5. There is an occasional random space where the lines don't spawn
  6. The size of these spaces are random
  7. The line generation stays in the shape of a square (likely because of some margin).
  8. The outermost points on the outermost lines start on the edge of this square
  9. Lines typically intersect with each other
  10. More lines are vertical than horizontal

The Work:

https://editor.p5js.org/MoMar/sketches/Et7sHwo0Y

Process

After reading my assertions, I had a question: "How do I generate equal lines?" Apparently, all you need is a circle. I randomly generated my origin points and used this formula to create a start point for my line. To find the endpoint, I subtracted the midpoint from the start point. Then, I added this value to the midpoint and got the endpoint.

The next question was "How do I generate random empty spaces?" The answer: use noise.

The final question "When do I place the line?" was easy to answer. I just needed to place a line above a certain noise value