This project was an interesting challenge because it forced me to evaluate the correctness of my work in an analogue as opposed to digital manner. By this I mean that I was not evaluating whether my project worked or not in absolute terms. Instead, I was observing its correctness in a fluid manner. There were many instances where I looked at it and thought, this almost seems right, but it isn't quite there yet. This is a workflow that I'm accustomed to in design classes but feels foreign in the context of a computationally based course. That being said, I really enjoyed working on this. In particular, computing line visibility on a grid taught me a new thing about Perlin noise. I've been using it for a few years but didn't fully understand how it worked until this project, which was really exciting.

var segs = [];
var margin = 20;
var segLength = 20;
var numSegs = 1500;
var clicked = false;
var segsSpacing = 13;
var xVisOff = 0.0;
var yVisOff = 0.0;
function setup() {
  createCanvas(555, 555);
function draw() {
    clicked = false;
function resetSegs(){
  segs = [];
  for(i = 0; i < sqrt(numSegs); i++){
    xVisOff = xVisOff + 0.2;
    yVisOff = 0.0
    for(j = 0; j < sqrt(numSegs); j++){
      yVisOff = yVisOff + 0.2;
      var x1 = i*segsSpacing + margin*1.5;
      var y1 = j*segsSpacing + margin;
      var secondPoint = setSecondPoint(x1, y1);
      var x2 = secondPoint[0];
      var y2 = secondPoint[1];  
      newSeg = new Segment(x1, x2, y1, y2, setVisibility());
//uses perlin noise to determine whether the line is visible or not
function setVisibility(){
  var opValue = noise(xVisOff, yVisOff);
  if(opValue > .3){
    return true;
    return false;
function drawSegs(){
  for(i = 0; i < numSegs; i++){
function mousePressed() {
  clicked = true;
function Segment(x1, x2, y1, y2, visibility){
  this.x1 = x1;
  this.x2 = x2;
  this.y1 = y1;
  this.y2 = y2;
  this.drawSeg = function(){
      line(this.x1, this.y1, this.x2, this.y2);      
  this.isVisible = visibility;
//Calculates the second point by selecting a point at the edge of a circle
//where the radius is the desired length of the lines and the center
//is the first point
function setSecondPoint(x1, y1){
  var angle = random(50, 150);
  var y2 = sin(angle) * segLength + y1;
  var x2 = cos(angle) * segLength + x1; 
  return [x2, y2];