Category: 01

casher-intersections

 

var boolDoRefresh = true;
var lines = [];
 
function setup() {
  createCanvas(720, 480);
}
 
function draw() {
  if (boolDoRefresh) {
 
    // set design values
    background(201, 239, 255);
    strokeWeight(1.5);
    stroke(140, 81, 200);
    lines = [];
 
    // assign random values to points of each line
    for (var k = 0; k < 12; k++) 
    {
      x1 = random(720);
      y1 = random(480);
      x2 = random(720);
      y2 = random(480);
      var newLine = [x1, y1, x2, y2];
      lines.push(newLine);
    }
 
    // double loop takes points from line[] to make a line
    // and forms an ellipse at the points from findIntersection()
    for (var i = 0; i < 12; i++)
    {
      for (var j = 0; j < 12; j++)
      {
        line(lines[i][0], lines[i][1], lines[i][2], lines[i][3])
        var steve = findIntersection(lines[i][0], lines[i][1], lines[i][2], lines[i][3], lines[j][0], lines[j][1], lines[j][2], lines[j][3])
 
        ellipse(steve[0],steve[1],20,20)
      }
    }
  }
	boolDoRefresh = false;
}
 
//adapted from Paul Bourkes/Leo Bottaro http://paulbourke.net/geometry/pointlineplane/javascript.txt
function findIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
 
  // Check if none of the lines are of length 0
	if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {
		return false
	}
 
	denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
 
  // Lines are parallel
	if (denominator === 0) {
		return false
	}
 
	let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
	let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
 
  // is the intersection along the segments
	if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
		return false
	}
 
  // Return a object with the x and y coordinates of the intersection
	let x = x1 + ua * (x2 - x1)
	let y = y1 + ua * (y2 - y1)
 
	return[x, y]
}
 
function mousePressed() {
  boolDoRefresh = true;
}

breep-Intersections

// Generating random lines and highlighting intersections
var boolDoRefresh;
var slider;
var totalLines;
 
 
function setup() {
  createCanvas(720, 480);
  background(255, 117, 102);
  boolDoRefresh = true;
  slider = createSlider(1, 100, 12)
  slider.position(10, 10)
}
 
function draw() {
 
 
  if (boolDoRefresh) {
    lines = [];
    background(255, 179, 102);
 
    for ( i = 0; i < slider.value(); i ++){
      var x1 = random(width);
      var x2 = random(width);
      var y1 = random(height);
      var y2 = random(height);
      lines[i] = [x1, y1, x2, y2] 
    }
 
    // Line intersections
    for ( i = 0; i < slider.value(); i++){
      for ( j = 0; j < slider.value(); j++){
 
 
         var intersection = findingIntersection(lines[i][0], lines[i][1], lines[i][2], lines[i][3], 
                                               lines[j][0], lines[j][1], lines[j][2], lines[j][3]); 
         if ( intersection != false) {
           stroke(0);
           fill(173, 216, 230);
           ellipse(intersection.x, intersection.y, 20, 20);
          }
         }
        }
 
 
    // Line drawing
    for (i = 0; i < slider.value(); i ++){
      strokeWeight(1);
      line( lines[i][0], lines[i][1], lines[i][2], lines[i][3])
    }
  fill(0);
  text(slider.value(), 150, 27)
  boolDoRefresh = false;
}
}
 
function mousePressed() {
  boolDoRefresh = true 
}
 
// Function implementation inspired by Paul Bourke's algorithm
// http://paulbourke.net/geometry/pointlineplane/function
// And implemented by Leo Bottaro
// http://paulbourke.net/geometry/pointlineplane/javascript.txt  
 
function findingIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
 
  // Check if none of the lines are of length 0
	if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {
		return false
	}
 
	denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
 
  // Lines are parallel
	if (denominator === 0) {
		return false
	}
 
	let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
	let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
 
  // is the intersection along the segments
	if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
		return false
	}
 
  // Return a object with the x and y coordinates of the intersection
	let x = x1 + ua * (x2 - x1)
	let y = y1 + ua * (y2 - y1)
 
	return {x, y}
}

shuann-Intersections

GIF:

 

var lineNum = 12;//change this number to get more lines 
var lineSets = [];
 
function setup() {
  createCanvas(720, 480);
  lineGenerator();
}
 
function draw() {
  background(255);
 
  for (var j = 0; j &lt; lineNum; j++){
    var x1 = lineSets[j][0];
    var y1 = lineSets[j][1];
    var x2 = lineSets[j][2];
    var y2 = lineSets[j][3];
    line(x1, y1, x2, y2);
    for (var s = 0; s &lt; lineNum; s++){
      var x3 = lineSets[s][0];
      var y3 = lineSets[s][1];
      var x4 = lineSets[s][2];
      var y4 = lineSets[s][3];
      if (intersect(x1, y1, x2, y2, x3, y3, x4, y4) != false){
        var cCenter = intersect(x1, y1, x2, y2, x3, y3, x4, y4);
        fill("pink");
        ellipse(round(cCenter[0]), round(cCenter[1]), 10);
      }
    }
  }
 
  text("Number of Lines:" + lineNum, 10 ,20);
  text("* Up/Down Key to Increase/Decrease *", 10 ,35);
}
 
function mousePressed() {
  lineGenerator();
}
 
function keyPressed() {
  if (keyCode === UP_ARROW) {
    lineNum += 1;
    lineGenerator();
  } else if (keyCode === DOWN_ARROW) {
    lineNum -= 1;
    lineGenerator();
  }
}
 
function lineGenerator(){
  lineSets = [];
  for (var i = 0; i &lt; lineNum; i++){
    var x1 = round(random(0,width+1));
    var y1 = round(random(0,height+1));
    var x2 = round(random(0,width+1));
    var y2 = round(random(0,height+1));
    lineSets[i] = [x1, y1, x2, y2]
  }
}
 
// taken and modified from http://paulbourke.net/geometry/pointlineplane/javascript.txt
// line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
// Determine the intersection point of two line segments
// Return FALSE if the lines don't intersect
function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {
 
  // Check if none of the lines are of length 0
	if ((x1 === x2 &amp;&amp; y1 === y2) || (x3 === x4 &amp;&amp; y3 === y4)) {
		return false
	}
 
	var denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
 
  // Lines are parallel
	if (denominator === 0) {
		return false
	}
 
	var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
	var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
 
  // is the intersection along the segments
	if (ua &lt; 0 || ua &gt; 1 || ub &lt; 0 || ub &gt; 1) {
		return false
	}
 
  // Return a object with the x and y coordinates of the intersection
	var x = x1 + ua * (x2 - x1)
	var y = y1 + ua * (y2 - y1)
 
	return [x, y]
}

chewie-Intersections

// Starter Code for "Embedded Iteration + Randomness"
var boolDoRefresh;
var lines = [];
var intersections = [];
var lineLength = 300;
var circWidth = 30;
var numLines = 12;
var numIntersections = 0;
 
function setup() {
  createCanvas(720, 480);
  boolDoRefresh = true;
}
 
function draw() {
  if (boolDoRefresh) {
    background(255);
    lines = [];
    intersections = [];
    numIntersections = 0;
    for (var i = 0; i < numLines; i++) {
      lines.push(new Line());
      for (var j = 0; j < i; j++) {
        intersects(lines[i], lines[j]);
      }
    }
    for (i = 0; i < numLines; i++) {
      lines[i].display();
    }
    for (i = 0; i < numIntersections; i++) {
      fill(100,75,125,50);
      intersections[i].display();
    }
    boolDoRefresh = false;
  }
}
 
function mousePressed() {
  boolDoRefresh = true;
}
 
function Line() {
  this.x1 = int(random(width));
  this.y1 = int(random(height));
  this.angle = int(random(360));
  this.radians = 0;
  this.display = function() {
    stroke("black");
    line(this.x1, this.y1, this.x2, this.y2);
  };
  this.updateRad = function() {
    this.radians = radians(this.angle);
  };
  this.angle = modAngle(this.angle);
  this.updateRad();
  this.x2 = this.x1 + lineLength * cos(this.radians);
  this.y2 = this.y1 + lineLength * sin(this.radians);
}
 
 
function Intersection(x, y) {
  this.x = x;
  this.y = y;
  this.display = function() {
    ellipse(this.x, this.y, circWidth, circWidth);
  }
}
 
function linePointAngle(line1, px, py) {
  var lx = line1.x1;
  var ly = line1.y1;
  //this first angle is between universal and two points
  var angle = degrees(atan((py-ly)/(px-lx)));
  if (px<lx) angle+=180;
  //angle -= line1.angle;
  angle = modAngle(angle);
  //then find the difference of the line angle and this
  //angle to get the relative angle of the point to the line
  return angle;
}
 
function modAngle(angle) {
  while(angle<0) angle += 360;
  while(angle>=360) angle -=360;
  return angle;
}
 
function splits(line1, line2) {
  var angle1 = linePointAngle(line1, line2.x1, line2.y1);
  var angle2 = linePointAngle(line1, line2.x2, line2.y2);
  if (angle1>angle2) {
		var temp = angle1;
    angle1 = angle2;
    angle2 = temp; //ang1<=ang2
  }
  if (angle2-angle1>=180) {
    return(line1.angle<=angle1 || line1.angle>=angle2);
  }
  return(line1.angle<=angle2 && line1.angle>=angle1);
}
 
function intersects(line1, line2) {
  var res = splits(line1,line2) && splits(line2,line1);
  if (res) intersection(line1, line2);
  return res;
}
 
function intersection(line1, line2) {
  var x1 = line1.x1;
  var x2 = line2.x1;
  var y1 = line1.y1;
  var y2 = line2.y1;
  var m1 = (line1.y2-y1)/(line1.x2-x1);
  var m2 = (line2.y2-y2)/(line2.x2-x2);
  var X = ((x1*m1)-y1-(x2*m2)+y2)/(m1-m2);
  var Y = m1*(X-x1)+y1;
  var res = new Intersection(X, Y);
  intersections.push(res);
  numIntersections += 1;
	return;
}

breep-IterationExercise

// Starter Code for "Embedded Iteration + Randomness" used from Woodpress site
var boolDoRefresh;
function setup() {
createCanvas(400, 400);
background(255, 128, 0);
noStroke();
boolDoRefresh = true;
}
function draw() {
var squareSpacing = 40
if (boolDoRefresh) {
clear();
background(255, 128, 0);
 
for (var x = 5; x &lt;= width - 10; x += squareSpacing) {
 
for (var y = 5; y &lt;= height - 10; y += squareSpacing) {
var shape = random(0, 100);
fill(0, 111, 255);
 
if (shape &gt; 95) {
fill(0, 255, 31);
ellipse(x + 15, y + 15, 30, 30);
}
 
else {
rect(x, y, 30, 30);
}
}
}
boolDoRefresh = false;
}
}
 
function mousePressed() {
boolDoRefresh = true;
}

shuann-IterationExercise

GIF:

// Starter Code for "Embedded Iteration + Randomness"
var boolDoRefresh;
var gridSize = 45;
var offset = 5;
 
function setup() {
  createCanvas(400, 400);
  boolDoRefresh = true;
}
 
function draw() {
  if (boolDoRefresh) {
    // DRAW STUFF HERE....
    background(240);
    for (var x = offset*4; x &lt;= width - gridSize; x += gridSize){
      for (var y = offset*4; y &lt;= height - gridSize; y += gridSize) {
        stroke("pink");
        fill("white");
        var rand = random();
        if (rand &lt;= 0.05){
          ellipse(x + (gridSize-offset)/2, y + (gridSize-offset)/2, gridSize/2);
        } else {
          rect(x, y, gridSize-offset, gridSize-offset);
        }
      }
    }
    boolDoRefresh = false;
  }
}
 
function mousePressed() {
  boolDoRefresh = true;
}

chromsan-Interruptions

My observations:

  1. The lines are drawn in a square
  2. There are 55-60 lines per side
  3. Each line is the same length
  4. The lines can either intersect each other or not
  5. The lines that intersect only do so on each other's ends- they never cross in the middle
  6. The majority of the lines are vertical
  7. Non-vertical lines rotate several degrees left or right, but are never horizontal
  8. The lines are rotated about their ends middles
  9. There are sometimes white areas in the center of the square with no lines within
  10. The white areas account for ~0-10% of the total area

I started by creating a grid of lines. It seemed like the lines' spacing was more important than the number of lines, so I opted to base my for loops on padding values rather than by line number. Next I worked on creating the semi-random rotation values for the lines. I accomplished this by utilizing p5's built in vector object which I could use to create an angle for each by using the fromAngle constructor. For the angle values, I experimented with both the noise function and randomGaussian function before settling on the latter. A key feature of Molnár's work is that the lines are mostly vertical, and the randomGaussian function allowed me set the median to 90 degrees and then allow a certain amount of randomness by giving the function a standard deviation of around 30.

A problem I ran into at this point was that I was rotating the lines around the endpoints fixed to the grid and the lines were intersecting each other in the middles- something that does not happen in Molnár's work. I eventually found a solution to this by fixing the lines to the grid by their center points, thus ensuring that any overlapping only occurs on the ends of the line segments. After playing with the values, the result is quite close to the way that the lines in the reference works behave.

Finally, the white spaces. For these I used the noise function and took advantage of the double for loop to create a noise map in 2D space. I mapped the values on the range [0, 255] such that I could pick some arbitrary color of gray, say 155, and use that as a mask. Any time that the color value of the map goes above 155, no lines are drawn. With an appropriate offset value to keep the size and quantity of the holes correct, the result is somewhat similar to the random quality of Molnár's. However, hers is slightly different in that the holes are both small and large. Using this technique, I am not able to get the same effect because any offset value I choose will create a map with uniform variations. In other words, I can either get large or small holes, not both. This is definitely the main area to improve on. I'd be quite interested to see how she achieved this unique affect.

nixel-Interruptions

My Observations:

1. The artwork is square
2. The artwork is a series of consistently thick short black lines on a blank white background
3. Each side seems to have 50-60 lines
4. The lines are arranged in a grid-like pattern along their centers
5. The distance between lines is about half the length of a line
6. The lines are long enough and close enough to each other to overlap
7. The artworks all seem to have a primary direction in which the lines are facing (vertically or horizontally)
8. Otherwise, the lines are pointing in a somewhat arbitrary direction in an 'organized chaos' way
9. There are gaps in the work where no lines exist
10. There are usually around 10 gaps in each work
11. The size of the gaps are arbitrary but generally small, around 5x5 line spots

My process in recoding this work was firstly to get all of the lines on screen and tilting the way they were supposed to. This part wasn't too hard with the transformation function and randomGaussian(). The only troubles I ran into in this phase was the placement of push() and pop(), which had drastically different results depending on where I put them in the code.

The most trouble I had with this project was creating the gaps. I started with creating many randomly placed rectangles as placeholders for the gaps and thought that I could use some sort of distance function to omit the lines close to it. Then, I realized this was annoying and changed the rectangles to ellipses which had a much easier distance measurement using the radius. Here, I found that giving the distance measurement some leeway with radius*random(0,0.7) was very important, or else it would end up looking something like this:

I learned a lot about the nuance and finesse this work demanded, and how order really does matter a whole lot.

I think my end result is pretty close to the original.

ocannoli-Intersections

Interactive Intersections:

Intersections Gif:

 function setup() {
  createCanvas(400, 400);
}
var boolDoRefresh;
 
function setup() {
  createCanvas(400, 400);
  boolDoRefresh = true;
}
 
class Line {
  constructor(x1, y1, x2, y2){
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
 }
	drawLine(){
    line(this.x1,this.y1,this.x2,this.y2);
  }  	
}
 
function draw() {
  if (boolDoRefresh) {
    background(51);
    stroke(220);
    allLines=[];
    intersectionCircles=[];
    for (var k = 0; k &lt; 12; k++) {
      var a = random(400);
      var b = random(400);
      var c = random(400);
      var d = random(400);
      var nLine= new Line(a,b,c,d);
      allLines.push(nLine);
      allLines[k].drawLine();
    }
    for(var i=0; i&lt;allLines.length-1; i++){
      for(var j=1; j&lt;allLines.length-2;j++){
      if(allLines[i]!=allLines[j])
      {
        var intersect= intersects(allLines[i].x1,allLines[i].y1,allLines[i].x2,allLines[i].y2,allLines[j].x1,allLines[j].y1,allLines[j].x2,allLines[j].y2);
      	if (intersect!==false){
          stroke(240,220,40); 
          fill(240,220,40);
          ellipse(intersect.x,intersect.y,10,10);
        }
           }
      }
    }
  }
  boolDoRefresh = false
}
//formula from Paul Bourke
function intersects(x1, y1, x2, y2, x3, y3, x4, y4) {
  if ((x1 === x2 &amp;&amp; y1 === y2) || (x3 === x4 &amp;&amp; y3 === y4)) {
		return false;
  }
  denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
	if (denominator === 0) {
		return false;
	}
  let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
	let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator;
  if (ua &lt; 0 || ua &gt; 1 || ub &lt; 0 || ub &gt; 1) {
		return false
	}
  let x = x1 + ua * (x2 - x1)
	let y = y1 + ua * (y2 - y1)
 
	return {x, y}
}
 
function mousePressed() {
  boolDoRefresh = true;
}

 

sapeck-reading01

9. The Critical Engineer notes that written code expands into social and psychological realms, regulating behaviour between people and the machines they interact with. By understanding this, the Critical Engineer seeks to reconstruct user-constraints and social action through means of digital excavation.

This belief demonstrates that engineering is truly an art form. While engineering advances society technologically, the nature of the advancements can change the way that people think and act--intentionally or unintentionally. By understanding that spaces, machines, and computers influence how people act, Critical Engineers seek to design with social intention in mind. I'm fascinated by how the subtleties of engineering affect society. While artists often write stories about society, engineers write society itself. Engineers can control someone's mood by how long an elevator takes to get to their floor. Engineers make it possible to stay in touch without someone around the world in realtime. A credit or debit card and ATM prevents the need to carry around lots of cash, allowing consumers to carry their money virtually and spend more.