Category: 02-Interruptions

szh-Interruptions

Observations:

  1. The artwork is square with a border from the edge of the frame to the cluster of lines.
  2. The lines are are short and are all the same size.
  3. There are many lines in clusters that are spread about half of the lines' length.
  4. There are "holes" within the clusters of lines. These holes seem to be at most the area of 5 lines length. Generally they are smaller.
  5. The way that the lines seem to be clustered is mostly vertical or up to a 45 degree angle. Some are more (almost vertical), but not as many.
  6. The lines overlap slightly but for the most part, seem to be given its own space (side to side). There is slightly overlap row to row (this is rather consistent).
  7. Sometimes, observation 5 is flipped, so that most lines are horizontal rather than vertical.
  8.  Around the hole, there is less overlap between the lines and more lines are simply "floating" (not touching anything else).
  9. The gaps are at odd shapes ranging from more rectangular to small tiny circles. Other gaps are just larger spaces in between each overlap of the lines. The gaps in its entirety only compensates for a small percentage of the canvas.
  10. Some of the lines are repetitively at the same angle (side to side).

Code

At first the result I made looked like the image below, but I felt as though my scatter of the lines weren't as long / random (?) as Molnar's. I increased the scale factor my lines, and when drawing them, I also added a factor to increase the scale as its drawn. Making the lines look the way I want was particularly hard, especially since I had the most struggle with finding a way to rotate the lines (since rotate() in p5.js turns the entire canvas, and not just the lines I'm looking at).

For the actual interruption, I used Perlin noise to achieve the effect you see above. Overall, this assignment was really interesting to see how I can achieve the look of this project, trying to figure it out piece by piece.

 

 

sansal-Interruptions

  1. The artwork is square.
  2. The artwork consists of black lines on a white background.
  3. All lines have the same length.
  4. Some lines intersect, and some do not. All intersections occur mostly at the endpoints of lines.
  5. The lines on the artwork appear to be arranged in a basic grid formation.
  6. The lines are mostly vertical, with the maximum rotation from a vertical position being about 90 degrees. 
  7. Line rotations seem mostly random, as most lines near each other are not rotated the same amount.
  8. Every line is rotated from its center and not its endpoints.
  9. There appear to be areas of whitespace on the artwork where lines are not present.
  10. The lines not appearing in the whitespace have been removed by a normal distribution, and not randomly.
  11. The areas of whitespace do not form any discernible geometric shape.

 

I first noticed that the basic frame of the artwork was a grid of lines, so I began by using a nested for loop to create lines within a given grid size. I began experimenting with rotation of the lines using the rotate() function, but quickly realized that the function rotated the lines from the origin and not their individual center. It became difficult to change the rotation in a way that didn't coincide with the origin, until I found the translate() method. I attempted to use this to position a line at the center, rotate it, and then translate it to a specified area in the grid. However, this introduced a new problem in the line rotation, and I realized that the rotation was not completely random. They seemed to be rotated a maximum of 90 degrees from an initial vertical position, which led me to look for some kind of normal distribution algorithm. 

From here, I found that line rotation was much simpler with the p5.Vector object and its fromAngle() method. Using this, I was able to apply a rotation directly to a line and then translate it to a directed position in the grid, as well as keep all lines the same length. I also found the randomGaussian() method, which allowed for a production of a mean angle rotation, with a specified standard deviation as well. 

I added the fromMousePress() function from the Intersections assignment to allow for a different iteration of the image to be produced every mouse click. 

Finally, I moved onto the whitespace. This proved to be the most difficult part of the assignment for me, as I attempted various methods of using Perlin noise to create a normal whitespace. Following the tutorials from Coding Train, I eventually settled on creating a gradient map and using those values to determine whether or not a line would be drawn at that grid square. This method did not work as expected, as after many variations on the gradient thresholds, either a majority of the lines would disappear, or none at all. After many hours of messing with numbers and using the nested for loop variables in the equations for the x and y offsets, I found a method that produced a decent result where a small region of whitespace would appear, but still could not figure out how to create patches of whitespace appear. 

I redid my color gradient map from the ground up and messed around with the zoom and spread of the gradient to make it less random and more orderly. After some experimentation, I was able to produce a decent solution similar to Molnar's original work, which is represented by the last image I have embedded in this post. If I am to improve upon this, I want to fix my whitespace code so that it creates several small patches instead of a few large ones.

 

https://editor.p5js.org/svsalem/sketches/zJs4MQAnw

Final:

 

lsh-Interruptions

Observations:

  1. The piece is 56 by 56 lines.
  2. The piece has a white border
  3. The piece has a series of lines
  4. Many of the lines touch at least one other line
  5. Many of the lines are almost upright
  6. Some areas are devoid of lines
  7. The lines are black
  8. All pieces seem to have a directionality to them (either vertical or horizontal)
  9. Some lines are alone in void space
  10. Some voids seem rectangular, while others seem circular

Link to P5JS sketch

The process of recoding the Molnár piece was much harder than I expected. I spent more than a handful of hours staring at the piece and wondering whether the runs were of the same algorithm, and if not, what had stayed the same. I fell short in a few ways. I had more straggler lines than I wanted (some were in the actual image, though for me it was a bug). Working with multiple holes proved harder than I thought. I don't think my piece has the same directionality as Molnár's piece either. I also tried to implement rectangular holes, but it didn't end up panning out. I have especially learned to appreciate the gaps, as the more I researched and worked, the more I noticed that was far from replication.

vikz-Interruptions

https://editor.p5js.org/vikz/sketches/m1kfW1x7c 

Observations:

  1. The artwork fits within a square
  2. Black lines on white background
  3. Lines are of same length and thickness
  4. Lines are placed at varying angles
  5. There is an overall flow to the image (having majority lines flowing either upwards/downwards, or flowing left/right
  6. Most lines are either touching one another or intersecting
  7. Lines near areas of negative space can be found to not touching other lines
  8. Many areas have repetitive lines "patterns" of some sort, with slight change of angle from one line to the next.
  9. Negative spaces between normal touching lines have relative similar area.
  10. There are random patches of absence of lines ("interruptions")
  11. Negative spaces "interruptions" are no more than 30% of the space.
  12. There are almost "columns" / "rows"; each line going down and across seem to have the same center point
  13. Amount of lines in each "column" / "row" ranges from roughly 45-55 lines.

Process: Originally, I had wrote three main functions (one to generate the lines themselves, one to generate a grid for which these lines would be placed, and one for calculating random holes based on noise(), to which I would then use in regards to the grid + line functions. I had run into several issues with this way, as I struggled manipulating each individual line to rotate in more "random" ways - it came down to either rotating all the lines at once, or rotating the entire canvas. I then decided to build off of Dan Shiffman's Coding Challenge #24, to which the manipulation of identical length lines were achieved through creation of a vector variable (p5.vector.fromAngle), to which he was then able to manipulate solely the vector itself by calling a rotation directly onto the vector, rather than the entire canvas. Then, through a noise function, I was able to achieve allotting "holes", or gaps in the canvas.

Although Dan Shiffman's way was very neat in achieving a series of segmented lines, I would have been more satisfied if I were to have the time to debug my own separate three functions. I believe that I would be able to achieve similar results if I could translate the way I drew lines by calling a vector, and then directly calling onto the vector to call for a rotation.

gray-Interruptions

Observations:

  1. The composition is square.
  2. The composition consists of black lines on a white background
  3. All the lines are the same length.
  4. The lines have randomized slopes, but tend towards vertical.
  5. There are margins that are about the length of two lines.
  6. The height of the rows and width of the columns is half the length of the lines.
  7. There are gaps where multiple lines are missing from a section of the grid, but the number of lines and the shape and position of the gap is fairly random.
  8. About 5-10% of the grid consists of gaps.
  9. There exist lines on the grid within gaps such that they are not adjacent to any other lines.
  10. There are 56 rows and 56 columns.

So I first did the grid of randomized lines that tend to be vertical, and then I wanted to do a weird recursive function to generate the voids as an array of points by starting with one point and then including adjacent points based on a probability. But that was really complicated, so then I saw someone talking about using just a random radius and making points in that radius voids, and I tried that. I added a weighted probability that those points wouldn't actually be voids, based on how far from the center of the circle void they were. That made the edges of my circles more fuzzy. I added a couple other things to add fuzziness. It's still definitely not the same program as Molnar's. Hers is very complex from what I can see. It's really impressive that she did that; it definitely seems like some kind of noise function, and mine is pretty far from that. When I squint I still just see a bunch of circles in mine.

link: https://editor.p5js.org/gray/sketches/LFzBlbk2c

tli-Interruptions

Observations
  1. The piece is square.
  2. The piece shows black lines on a white background.
  3. The black lines are the same length.
  4. The black lines are rotated randomly.
  5. The black lines are approximately arranged in a grid.
  6. Some black lines are removed from the grid in patches.
Results

https://editor.p5js.org/helveticalover/sketches/6cTRH1cfC

Process

Deriving an implementation from the observations I listed above were fairly simple. I wrote an algorithm to place lines arranged in a square grid, rotate the lines by a random angle between 0 and 180 degrees, and culled lines that were located in a cell above some threshold for Perlin noise. The trickiest part of knowing how to implement this algorithm was thinking of a way to remove "patches" of lines rather than random cells, but this was solved once I remembered Perlin noise. After the implementation came tuning parameters to imitate Molnár's original. I tuned the number of lines, the length of the lines, the stroke weight of the lines, the scale of the Perlin noise, and the threshold for culling lines. The last two parameters in particular were trickiest because Interruptions displays a very specific frequency and distribution of removed "patches". Too many or too few interruptions, as well as too large or too small interruptions, would drastically change the appearance of the piece. In the interest of replicating Interruptions as closely as possible, I spent the most effort tuning these variables.

ilovit-Interruptions

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 directions vary
  5. The lines tend vertical
  6. The lines are in a grid
  7. The grid is interrupted intermittently by white space
  8. The interruptions tend to group in larger blobs
  9. The distances between the centers of the lines is half the length of the lines
  10. The grid is 56x56
  11. The lines are thin and black
  12. The background is white

Interruptions Recode:

https://editor.p5js.org/ilovit/sketches/xFpvWLjAW

Reproducing the shape of the work was easy. I got the lines the right length and at the right intervals pretty quickly, and once some random element was introduced to the angles, the picture looked very reminiscent of Molnar's work. figuring out that I should use Gaussian distribution to get the lines pointing mostly vertically but still randomly also took a short amount of time. However, the titular interruptions were very difficult to reproduce and I don't think I quite succeeded. I tried to create the interruptions using just the random function. My method was thus: I had each line look at the lines around it to decide how likely it was to disappear, then I spent a really long time futzing with the various numbers to try to get it to look a little more like Molnar's piece.

Zapra – Interruptions

View code

Observations / Assumptions:
  1. The image is a white square with black lines
  2. There are many short lines of the same size
  3. There are seemingly random gaps in the lines
  4. The lines form a matrix of rows and columns
  5. The lines are centered around a midpoint of equal distances apart
  6. Most lines are angled left or right, but have a slight proclivity towards the vertical
  7. There are often several gaps in the image of different sizes
  8. Some gaps extend or go over the edge of the grid
  9. There are about 60 lines in each row
  10. The space between each row is less than the length of the lines (if all lines were vertical, they would overlap about halfway)
Reflection

Some of frustration I ran into with this project was based off an incorrect assumption I made about how the lines were drawn. I had assumed all the lines were spaced equally based on the top endpoint rather than middle. Once I realized this, I struggled to find an effective way to center all the points around these midpoints (but once I did, I audibly yelled "YES!" alone in my apartment and gave myself a high five). I haven't done much in-depth coding since last year, so as I've progressed with this assignment I'm starting to remember more and more. I think ideally I could still tidy up my code, but I at least feel satisfied with the end result.

Some previous versions:

lubar – Interruptions

Observations:

  1. The artwork is a square
  2. The centers of each line segment are in a grid form
  3. The line segments appear randomly rotated
  4. The line segments occasionally intercept
  5. There appear to be 57 possible lines across each axis
  6. The piece has a blank margin
  7. There are clusters of blank spaces that appear in random locations
  8. The clusters of black spaces are not uniform in size or shape
  9. The length of each line is slightly less the double the distance between each line
  10. The lines are thin and short

Interruptions Sketch Link

In the process of creating this, I found the rotation of the line segments to be particularly frustrating, although I initially assumes that that would pose the least challenges. The method that I was using involved the rotate() and translate() functions and it took me a while to figure out to use multiple translations I needed push() and pop(). Overall however, especially after discussing Perlin noise a bit with Sophia, I found the other elements to run smoothly, although not perfectly when compared with the original pieces. Molnar's original interruptions have a slightly 'free-er' quality that I was not able to capture despite playing around with it for a long time. Despite the slightly denser interruptions, I am content with how the reproduction turned out, and I would be curious to know how that effect was/might have been achieved without Perlin noise, as I haven't quite been able to wrap my head around it yet.

 

 

iSob-Interruptions

Observations

  1. This piece has a white background with a square-shaped cluster of short black lines within it. There is a consistent margin along the top and sides of the square, with extra space at the bottom to accommodate the inscription.
  2. The square makes up 93.5% of the width of the artwork, and 91% of the height of the artwork.
  3. The margin is approximately 3% of the width of the square.
  4. The extra space at the bottom is equal to 14.5% of the width of the square.
  5. The square is made up of an invisible 56x56 grid. It's not clear how this would scale, because all the iterations I can find are the same size. Would the number of rows and columns increase with a consistent margin, or would it scale proportionately so there are still 56 rows and columns of larger lines? 56 is about 10% of the square width in pixels.
  6. Each point on the grid is the midpoint of one of the lines. The points are NOT the endpoints of the lines (thanks Golan.)
  7. The length of each line is approximately 3.4% of the width of the square.
  8. The angles of the lines range from 0 to 2π radians.
  9. However, each iteration seems to have a slight horizontal or vertical bias (more lines are oriented with an acute or obtuse angle, respectively, with respect to the orientation of the artwork.)
  10. Approximately 7% of the lines are missing in clusters or 'interruptions'.
  11. The clusters are fairly low frequency - around 3 or 4 large clusters (10+ lines missing) will appear in a given iteration.
  12. In the bottom right corner, one can make out the artist's name and a date penciled in cursive handwriting.
  13. The artist's name is inscribed V. Molnar 20% of the time, V.M. 60% of the time, and missing 20% of the time.
  14. The year is inscribed 100% of the time.
  15. The month is inscribed only 20% of the time.

Reflection

I needed help to discover that the line's midpoints originated from the grid, and not their endpoints. I implemented debug keys to refresh the composition (r) and to color-code the Perlin noise distribution (c.)

The distribution of 'interruptions' in my piece doesn't quite match the original artwork. Though I was able to adjust their spatial frequency to a satisfactory point, Perlin noise creates slightly blobbier gaps relative to the more rectangular or 'jagged' gaps in Molnar's work.

I tried implementing the piece without Perlin noise, by generating a fixed area's worth of randomly placed rectangles (while total area is less than 10% of the composition, make more rectangles), and only rendering lines that didn't intersect with those rectangles. However, this involved a triple for loop that immediately crashed my computer. There is probably a syntax error somewhere. The secrets of Molnar's implementation continue to elude me.

I'm also left with an outstanding question about the scale of the work. As canvas size increases, would Molnar want the number of rows and columns to increase, or would everything increase proportionally?

Screenshots

GIF

Link to Sketch