zaport-Interruptions

Observations:

1. The lines are black
2. The background is near-white
3. There are about 50 lines on each side
4. The frame is a square
5. There are sections that do not contain lines
6. The lines overlap
7. The lines point in all directions
8. The lines appear to be the same length
9. The lines make little cells
10. The spot that are absent of lines appear random
11. The lines point in a similar direction
12. The lines (except for the spots) appear evenly distributed
13. Many of the cell shapes are quadrilateral or triangle

Process:

This program was challenging to write and I am still not completely satisfied with the outcome. My program’s lines and white splotches are scattered and unorganized, and are not as elegant as the ones in Molnar’s pieces. I started by creating random lines using a grid-like process. Then, I used the Perlin Noise function to remove small areas of lines. Before learning about Perlin Noise, I used a technique that assigned every line a random number. If the number was below a threshold, it was not drawn. Then, I checked up, down, left, and right, reset the threshold to be much higher, and removed lines accordingly. It worked similarly to Perlin Noise. Overall, it was difficult to reproduce the white areas and lines that seem to be organized, though random. This still needs work in my program. I can appreciate how difficult it must have been for Molnar to create this piece in the 1960s, especially considering that Perlin Noise was not created. Finally, I can appreciate how remarkable this piece is after attempting this re-code, especially when considering the year she created it in.

Here’s my code:

//Interruptions recode Vera Molanr 
//Week 1 60-212 Golan Levin
//Zaport
 
var cellSide = 7
var lineLength = 12
var sideCanvas = cellSide*60
var lines = []
var totalLines = (sideCanvas/cellSide)*(sideCanvas/cellSide)
var border = 5
var centerDiffs = 5
var originalIndex = 5
var topIndex = 5
var sideIndex = 5
var totalRows = (sideCanvas/cellSide)-border
var totalLinesPerSide = sideCanvas/cellSide
var counter = -1
 
function setup() { 
  createCanvas(sideCanvas, sideCanvas);
  generateLines()
} 
 
function mouseClicked() {
  cellSide = 7
  lineLength = 12
  sideCanvas = cellSide*60
  lines = []
  totalLines = (sideCanvas/cellSide)*(sideCanvas/cellSide)
  border = 5
  centerDiffs = 5
  originalIndex = 5
  topIndex = 5
  sideIndex = 5
  totalRows = (sideCanvas/cellSide)-border
  totalLinesPerSide = sideCanvas/cellSide
  counter = -1
  generateLines()
  redraw()
}
 
//generate lines
function generateLines() {
	for (var i = 0; i <= totalRows; i = i+1) {
    for (var j = 0; j <= totalRows; j = j+1) { randomNumber = random(0,10) var x1 = random((border*4)+sideIndex,sideIndex+border+centerDiffs) var y1 = random(border+topIndex,topIndex+border+centerDiffs); var x2 = random(x1-lineLength, x1+lineLength); var diffX = abs(x2-x1) var y2 = y1 + (pow((abs(pow(lineLength,2) - pow(diffX,2))),0.5)) newLine = [x1, y1, x2, y2]; if ((i === 0) || (j === 0)) { if (randomNumber > 2) {
        append(lines, newLine);	
        } else {
          append(lines, 0);	
        }}
      else if ((lines[counter] == 0) || (lines[counter-totalLinesPerSide] == 0) && (lines[counter-10] =! 0)) {
        if (randomNumber < 5) { append(lines, newLine); } else { append(lines, 0); }} else { if (randomNumber > 0.5) {
        append(lines, newLine);
        } else {
          append(lines, []);
        }}
 
    	topIndex = topIndex+cellSide
      counter = counter + 1
    }
    topIndex = originalIndex
    sideIndex = sideIndex+cellSide
 } }
 
function draw() { 
  background(255,255,255);
  drawLines()
}
 
//Draw Lines  
function drawLines() {
	for (var i = 0; i <= totalLines; i = i+1) {
			x1 = lines[i][0]
			y1 = lines[i][1]
			x2 = lines[i][2]
			y2 = lines[i][3]
    	//Credit to Perlin Noise Function
    	if (noise(i * .125) < .54) {
      //
    	stroke(0, 0, 0);
			line(x1, y1, x2, y2);
      }
  }}