sketch.js

arialy_interruptions

interruptions

I really enjoyed copying another artists work, mostly because I liked analyzing the process. It was a good break from inventing the process. The key observations I made were:

• using a grid with a line each cell
• adjusting the cell width and height to most optimally fit the average line angle
• not choosing each line angle randomly, but rather deviating a little from an initially randomly chosen angle
• choosing several chunks of the grid to omit lines gives the illusion of the lines being “interrupted”
• there is a white border

In the end I thought that the user would have more fun if they could click to reveal a new iteration of the algorithm. This way, you can more accurately analyze the way I formed my own lines.

GitHub Link

1. the artwork is square
2. many short black lines
3. white background
4. thin white border at edge
5. lines are the same length
6. empty gaps in piece with no lines
7. most lines are not parallel
8. not all lines intersect
9. intersections are not crowded or clumped
10. many lines form a V/Y formation
11. appears to be a general direction the lines point to

kealiinterruptions

GitHub repository//

My gut feeling when I first viewed what we were to copy was worry–and I was not let down. Instinctively I started with the structure similar to how I coded my linesIntersect from deliverable01, and as expected, the lines were arranged too randomly, and from then I had to look closer. I hence noted the generally one-directional slope of each line–this prompted me to somehow control the slopes of the lines so that they were not too haphazard, and I did so with trial-and-error constants being applied to PI. The next consideration was that each line was not too messily spaced–they seemed to follow a grid pattern such that each line appeared per grid of the overall square canvas. So, I consequently scrapped the truly random implementation of my lines and restructured my loops so that the x and y values of each line strictly iterated by the hard-coded size of my imaginary grid, which amongst many other variables like gaps (where lines didn’t show) and slopes were visually estimated and set to actual numbers. It goes without saying that I have immense respect for any coder, programmer, artist–regardless of the era they were active; and naturally if anything, it is incredible that Vera Molnar created this during her time when technology was not as advanced or thoroughly explored. Re-coding this was a challenge (and I expected, admittedly–and I’m curious as to how Vera created this herself.)

 

The artwork is square
There are short lines
More of the lines are vertical or horizontal than at an extreme angle
There’s a certain flow to the piece
There are patches of white, interruptions, in the lines that seem to random and taper off
The lines are sort of in a grid
The lines form vague polygonal shapes
There’s a white background

PLEASE CLICK IN WHITE SPACE TO GENERATE
catluinterruptions

This copy code I had a really hard time with. I fiddled around a lot with the lines to get them as close as I could to Molnar’s work. I wasn’t able to get the actual gaps in the lines working, so I left them out. For some reason, even though I know how to use arrays, no matter how I did them, they would just crash P5, and I couldn’t think of any other ways to loop through the lines and subtract patches. I really want to figure out why my arrays aren’t working with this code, and I intend to know eventually. I think it might have been weird nesting with loops.

Github code:
https://github.com/catlu4416/60-212/blob/master/interruptions

The artwork is square.

The artwork consists of many short black lines, on a white background.

The lines all have the same length.

There are certain regions where lines are not generated from

Those regions do not appear to have any certain polygonal shape

Sometimes the gaps in the pictures can go off the page

All the lines start and stop within the boundary

Each line is only intersected at most once

There are a lot of triangular and diamond shapes

It looks like the gaps can sometimes coincide with eachother

The lines almost strike me as if they were randomly drawn in a grid

Because the lines are almost evenly spaced apart

No line is 0,90,180,or 270 degrees

Or even within 10 degrees of those numbers

Most of the lines tend to be more vertically oriented

Click the drawing to see it animate. Sometimes it creates the interruptions, sometimes it doesn’t, it’s random. Upon reflection maybe if the lines were smaller

This piece was really hard to create only because it is a subtractive work intuitively. The first thing it thought to do was to draw the lines and then randomly erase them but when I looked closer at her works, the erasure was clustered. Also it became clear to me that her lines weren’t random and that they had randomized structure. The article on effective complexity really helped me look closer. My process was essentially creating, seeing, and revising multiple times until it looked closer and closer to the piece Interruptions. I’m still facing difficulty seeing the actual shape of the interruptions but overall i think it is a good representation.

clock

veramolnar

Observations:
1)a square
2)center points of all lines match up to an invisible grid pattern
3)there exists a general trend as to the direction of the lines (generally up or down)
4)when lines are invisible, they are invisible in clumps,
5)line are all the same length,
6)black on white
7) the line length is bigger than the distance between the center points

The first not super obvious thing I realized was that the center points of the lines all matched up to the grid. I used this as my starting point and coded a generator that made all the lines at different angles. Then I went back and realized there was generally a trend for which direction most of the lines are going, so i coded that into a random variable. Then started playing around with different ways to add in empty spaces. I originally was it all random, but then I went in and made it so that once the initial empty lines where declared, the area of empty lines would be expanded upon, to create bigger empty spaces, and i tried to remove lines stranded in empty space. The hardest part for me was the empty space.

https://github.com/tatyanade/Vera

sketch (link on GitHub)

This was an interesting project to work on- upon quick observation I knew the tactic I would use to recreate the lines (having a grid of center points that lines of certain length would randomly pivot on) and place them within a padded canvas (to prevent lines from going off-screen). The challenging part for me was the missing lines, and how to achieve them. My approach was to use multiple levels of randomGaussian() and random() functions. I would have a random amount of “blank spots” that had a random amount of “spread” (size of spot), which had a random number of lines within that spread hide or remain showing. While it looks similar to the original artworks, my rendering doesn’t have the same sense of “closeness” some of the original artworks portray in their blank spots. Like tight “tubes” of white, mine are more like soft areas/circles of blank.

Click to yeah

Shout out to Lumar for the randomGaussian suggestion

1. The border size is varied (I think that’s a feature of the printing, rather than an intentional concept of the artwork, but it is nonetheless a feature of the work)
2. The lines are all the same length
3. The lines are about 1/25 the length of one of the sides of the square
4. The lines are black
5. The background is white
6. The artwork is square
7. There are spaces where lines do not generate
8. The number of these spaces varies
9. Lines do not get cut off by the borders of the page (there are no little amputated lines)
10. A similar number of lines is generated each time the program runs
11. The lines are not cut off by the spaces. Rather, they simply do not generate there
12. Line density is similar in areas where there are not the spaces
13. It’s almost as though there are spaces where line density is lower, rather than spaces where they specifically don’t generate from
14. There doesn’t seem to be a specification for the angle at which the lines generate, but they tend to generate to the same angle
15. The date is written in the bottom
16. Sometimes the movement in the picture is horizontal, and sometimes it is more vertical
17. Lines do not necessarily have to intersect with each other

Click in the white space below to start my program!

sketch-60.js

Github Repository Link

I initially noticed that the line placement seems to be based off of distribution, so I went through the p5.js function library looking for functions that could help me with distribution. I eventually decided I should try using random() and randomGaussian() and spent a long time trying to create the gaps by editing the distribution of the first x-coord of the lines. I tried using randomGaussian() to control the value the x-coord increments by each time, and I even tried messing with the angles of the segments. Eventually, I realized editing the properties of the lines wasn’t working well, so I instead defined the white spaces and simply didn’t render any segment whose first point was in that space.

Overall, I think this final strategy worked pretty well. The margins look a little odd, and I feel as though the nature of my white spaces and Molnar’s white spaces are slightly dissimilar. I now appreciate the complex thinking required to make an algorithm behave in a way that implies random accident. It would have been so much easier to simply render the lines to the screen, but that work would be so much more lifeless than Interruptions.

Interruptions [github]
cambu-intersections

Observations

• The work has a white border all the way around the edge.
• The canvas is a square.
• Most of the lines face up-ish and down-ish
• The holes are quite small.
• The holes don’t often occur close to each other.
• Sometimes the holes are more nuanced and don’t even form “complete holes” in the fabric.
• The background is off-white, not white-white.
• Near the holes, the lines become somewhat magnatized and get kinda ‘messed up.’

Reflection

I really enjoyed executing this project, the mix of programming and math was fun and I’m glad I got to practice more modularization techniques. With regard to the math, the ‘shaping of randomness’ via a function to have most of the lines face up or face down instead of to the sides, was particularly interesting.* I believe my final result is quite close, save for a few deficiencies, here are two big problems:

• The lines near the edges occasionally stick out awkwardly, which doesn’t happen in the provided examples.
• The lines do not seem to ‘barely touch’ each other as nicely as they do in these [1, 2] examples.

** == Golan programmed this in office hours as an illustration for random-shaping.

kadoininterruptions

1. The canvas is square
2. The lines are all the same length
3. the lines seem to be evenly spaces and rotated around the midpoint
4. the lines angles are random, but for the most part, are generally vertical or horizontal
5. There are areas where there are gaps in the regular pattern of rotated lines. They seem organized in a semi-random way, but I can’t pinpoint what the method of organization is.

I used randomGaussian a lot for this assignment to rotate the lines, and to organize my gaps. I’m a fan of vertical lines as opposed to horizontal lines, so I made the lines mostly semi-vertical. I also figured if this were printed, like the original, all I would have to do is rotate the paper to make them seem horizontal.

The gaps were the tricky part to imitate. I ended up removing randomly sized sections of lines from an area using randomGaussian before the lines were drawn. It has generally the same effect, but it’s not 100% and I just can’t quite put my finger on it.

Interruptions:

1. The lines are the same length
2. The lines are kind of arranged in a square grid system
3. More lines than random are either horizontal or vertical (varies per generated piece but consistent within each)
4. Line angles are random, except for ones stated in #2
5. Interruptions occur in patches, random in size

 

This annoyed me so much that I can’t work on it anymore, so here’s the not-really-done-but-its-done Interruptions. I quickly realized that making rows and cols of lines wasn’t going to work very well for creating interruptions inside a nested for loop. A possible solution would be to have a function that makes a map of where the interruptions will be beforehand but I’m still confused about 2D arrays in p5.js and it’s driving me nuts (I’m going to use Processing until I understand how Javascript does 2D arrays. Maybe not even then.). For the sake of my AnimatedLoop, I choose to put this down. Looking forward to seeing Golan’s solution(s).

sketch

Nice, and it’s not embedding. Here’s a gif instead.

1) There are small random lines.
2) The lines all have the same size.
3) The lines are all black
4) The background is white (tint of gray).
5) For the most part, the lines seem to be evenly spaced.
6) The lines are generated at different angles than the ones around them.
7) There are some interruptions (spaces without lines).
8) The lines follow one general direction (may be vertical or horizontal).

xastol-p5-interruptionsrecode

Looking at the piece, I noticed that there would be a few difficulties I would have to deal with, the obvious one being how do I get lines to show up across the board relatively evenly. My first attempt started with making an entirely new line class that would give random angles to each line. However, this became difficult when applying in a list and trying to display (the display function was being buggy). Instead, I decided to go a more direct way and created a double-for loop. This ended up being a lot more time-efficient and easier to manage when looking at. The problem I still struggle with is getting larger random white-space to occur. In my code, I applied randomGaussian() to the randomness of the y-values for each line. This creates some disruption in the general pattern, but is still not big enough.

I really appreciate how such a simple-looking piece is actually pretty complex when applying to code. I really admire Molnar’s ability to make the computer produce human-like patterns (it seems as though a person drew out the work instead of programmed it).

Github Code: https://github.com/xapostol/60-212/tree/master/Deliverables%203%20-%20xastol/Interruptions_p5

Click to generate a new interruptions.

jaqaur_interruptions

Here is a link to my code on Github.

The easy part of this assignment was drawing the lines. I counted that Molnar’s “Interruptions” were about fifty lines by fifty lines, so I did the same. Using nested for loops, I drew lines at randomly generated angles, with their centers all the same distance apart.

The hard part was making the interruptions (the “holes” in the picture) look like Molnar’s. At first, I had every line decide based on a random number whether to exist or not (with odds of about 9/10 of existence). That distribution was too even, though, and didn’t make the big holes I wanted. That led me to create my more complicated “interrupt” method, which creates a random number of “interruptions,” each of a random size. An “interruption,” in this method, is a clump of lines that collectively decide not to exist. An interruption starts at a random spot (indexed from 1-2500), turns that line’s angle to 100 (rather than something between -PI and PI), and then moves left(-49), right(+49), up (-1), or down (+1) and continues this until it runs out of size. If a line has an angle greater than 10 (eg 100), it will not be drawn later.

This creates irregularly shaped clumps. When I first tried this, I had a few big clumps that looked like Molnar’s, but I didn’t have enough little ones throughout the image. So, I upped the number of clumps, and reduced the clump size. Most of the time, this leads to a few big “clumps” (actually made out of smaller clumps) and then some smaller ones. I think there’s a strong resemblance between mine and the original, although it’s a little hard to judge from only five examples.

Interactive Interruptions
Click and drag to create interruptions

First I tried to figure out how the piece was possibly made. There are strokes distributed quite evenly across the canvas yet they each have a random direction. At several places, there are holes or blank spaces were there are less or no strokes.

I thought it would be fun to make the interruptions piece interactive where the user can click and drag to make the “holes” at places they want. I did this by giving physical properties to all the strokes and manipulate the forces exerted on them.

I tweaked the relationship between the distance a stroke is from the mouse and the force exerted on it so that the holes look more like those in the original piece.

I’m satisfied with the result.

https://github.com/LingDong-/60-212/tree/master/interruptions