Sepho – Interruptions

  1. the artwork is square.
  2. the work is made of many small black lines on a white background.
  3. the lines are of the same length.
  4. the lines are all turned at different angles.
  5. the lines slightly intersect occasionally.
  6. there are occasional gaps in the lines.
  7. the lines do not touch the edge of the page
  8. most of the lines point in the same direction.
  9. the lines seem to almost be in a grid pattern with a few exceptions.
  10. there are occasionally multiple lines coming from the same point

////// based on Starter Code for "Embedded Iteration + Randomness"
var boolDoRefresh;
 
function setup() {
  createCanvas(720, 720);
  background(255,255,255)
  noStroke();
  boolDoRefresh = true;
}
 
var length = 25;
var gridSize = 15;
var lines = []
var gaps = []

//adds gaps in the lines
function addGap(gaps, x ,y){
  print(x);
  var r = random(100 * noise(x,y));
  gaps.push([x,y,r]);
}
            
function distance(x1,y1,x2,y2){
    return sqrt(sq(x2-x1) + sq(y2-y1));
  }
  

function addLine(lines, x1, y1){
  var theta = random(360);
  var x2 = x1 + (cos(theta) * length);
  var y2 = y1 + (sin(theta) * length);
  lines.push([x1,y1,x2,y2]);
}


function draw() {
  if (boolDoRefresh) {
    // DRAW STUFF HERE....
    boolDoRefresh = false;
    background(255,255,255)
    lines = [];
    gaps = [];
    fill(255,0,0);
    
	//creates new gaps on each click
    for(var x = gridSize; x <= width - gridSize; x += gridSize){
      for(var y = gridSize; y <= height - gridSize; y += gridSize){ if(noise(x,y) > 0.82 && random(4) > 3){
        	addGap(gaps,x,y);
        }
      }
    }
    
    strokeWeight(1.5);
    stroke(0);
    
  //creates and draws new lines on each click
    for(var x1 = gridSize; x1 <= width - gridSize; x1 += gridSize){
      for(var y1 = gridSize; y1 <= height - gridSize; y1 += gridSize){
        var isInGap = false;
        for(var i = 0; i < gaps.length; i++){
          if(distance(x1,y1,gaps[i][0],gaps[i][1]) < random(50,70)){
            isInGap = true;
          }
        }
        if(!isInGap){
        	var theta = random(360);
  				var x2 = x1 + (cos(theta) * length);
  				var y2 = y1 + (sin(theta) * length);
       		line(x1,y1,x2,y2);
        }
      }
    }
    
    
    
  }
}
 
function mousePressed() {
  boolDoRefresh = true;
}
  1. In an attempt to replicate this piece I first started with a grid of dots and then I drew short lines coming from those dots at various angles. I then used the noise() function to try and make a Perlin-noise like gap in the lines. For me the hardest part about replicating this work was the grid-like but not perfect grid that she managed to create and also a very kind of natural and abstract way of creating gaps in her lines. Additionally her lines really only intercept each other ever so slightly while mine can completely cross each other. Overall it was way more challenging to recreate this piece than I initially thought.

Sepho-Intersections

//// Based on the Starter Code for "Embedded Iteration + Randomness"
var boolDoRefresh;
 
var lines = [];
var lineNumber = 12;  //&lt;&lt;-----change this number to add/remove lines!
 
function setup() {
  createCanvas(720, 480);
  background(20,20,50)
  noStroke();
  boolDoRefresh = true;
}
 
// Math for the intersection of two lines from Paul Bourke http://paulbourke.net/geometry/pointlineplane/
//takes two lines and returns the x,y value for the inersection of those lines
function intersec(a,b){
  var x1 = a[0];
  var y1 = a[1];
  var x2 = a[2];
  var y2 = a[3];
 
  var x3 = b[0];
  var y3 = b[1];
  var x4 = b[2];
  var y4 = b[3];
 
  var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / ((y4-y3) * (x2-x1) - (x4-x3) * (y2-y1));
  var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / ((y4-y3) * (x2-x1) - (x4-x3) * (y2-y1));
  var x = (x1 + ua * (x2 - x1));
  var y = (y1 + ua * (y2 - y1));
 
  if (ua &lt; 0 || ua &gt; 1 || ub &lt; 0 || ub &gt; 1) {
			return [-20,-20];
	} 
 
  return[x,y];
}
 
//moves the lines according to each points velocity.
function updateLines(lines){
  for(var i = 0; i &lt; lines.length; i++){
    var l = lines[i];
    l[0] += l[4];
    l[1] += l[5];
    l[2] += l[6];
    l[3] += l[7];
  }
}
 
 
function draw() {
  	updateLines(lines);
 
    //Draws all of the lines:
    background(20,20,50)
    stroke(255, 50);
 		fill(255);
    for(var i = 0; i &lt; lines.length; i++){
  		line(lines[i][0],lines[i][1],lines[i][2],lines[i][3]);
    }
 
    //Draws a red dot at all of the intersections:
    for(var i = 0; i &lt; lines.length; i++){
      for(var j = 0; j &lt; lines.length; j++){
        if(i != j){
          la = lines[i];
          lb = lines[j];
          noStroke()
          fill(255,0,0);
          ellipse(intersec(la,lb)[0],intersec(la,lb)[1],3);
        }
      }
    }
 
  if (boolDoRefresh) {
    boolDoRefresh = false;
    //Creates new lines:
    lines = [];
    for(var i = 0; i &lt; lineNumber; i++){
    	lines.push([random(width),random(height),random(width),random(height),random(-1,1), random(-1,1),random(-1,1),random(-1,1)])
  	}  
  }
}
 
function mousePressed() {
  boolDoRefresh = true;
}

neural-reading01

The Critical Engineer deconstructs and incites suspicion of rich user experiences.

The Critical Engineer doesn't assume that entertainment exists only for entertainment. There are complex historical, political, economic, cultural, personal, etc. factors involved, that are worth examining to determine underlying intentions or implications of its creations, experience, and existence.

An example that comes to mind: when you buy a ticket to see that new Star Wars movie, you're interacting in some way, however tangential, with the interests Hollywood higher-ups that funded that movie, and likely had a say in the casting and writing. Their motivations are tinged by the masses, the netizens ranting or raving about the casting or plot. And by engaging in the whole theater going "experience"(the popcorn, the booming sounds, and a meal because there's probably a mall nearby)which has been part of the popular consciousness for a very long time and continuously been shaped by capitalism and consumerism.

I find it interesting that analysis can lead you down this winding chain of buzzwords and that we end up in interesting places when we ask why this chain exists, and why those particular words are there.

Sepho-IterationExercise


// Starter Code for "Embedded Iteration + Randomness"
var boolDoRefresh;
 
function setup() {
  createCanvas(400, 400);
  background(20,20,50)
  noStroke();
  boolDoRefresh = true;
}
 
function draw() {
  if (boolDoRefresh) {
    // DRAW STUFF HERE....
    boolDoRefresh = false;
    background(20,20,50)
    for (var x = 35; x <= width - 30; x += 30) {
    	for (var y = 35; y <= height - 30; y += 30) { var rando = random(5); if(rando > 1) {
          fill(255,250,150);
          rect(x-13, y-13, 26, 26);
          fill(20,20,50);
          rect(x-10, y-10, 20, 20);
          fill(255,250,150);
          rect(x-5, y-5, 10, 10);
        }
        else {
          fill(20,20,50);
          rect(x-13, y-13, 26, 26);
          fill(255,250,150);
          rect(x-10, y-10, 20, 20);
          fill(20,20,50);
          rect(x-5, y-5, 10, 10);
        }
      }
    }
  }
}
 
function mousePressed() {
  boolDoRefresh = true;
}

Spoon-Reading01

From the Critical Engineering Manifesto by Oliver, Savičić, and Vasiliev, "The Critical Engineer raises awareness that with each technological advance our techno-political literacy is challenged."

A Critical Engineer needs to pay attention to how a technological advance changes the way politics and technology must be understood and examined. Every time there was a large technological shift, people's role in society changed greatly. The industrial revolution put people to work in factories, shifting society to being massively city-focused, rather than rurally focused. In another example, the influx of automated work coupled with globalization has proven to be a massive challenge to modern American society. While the society continues to have the techno-political literacy of an older America, it is incapable of facing the reality of the shrinking job market.

Sepho – Reading

9. The Critical Engineer notes that written code expands into social and psychological realms, regulating behavior 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.

As someone seeking to use code add interactivity as a medium for artwork it is crucial for me to learn how to push these systems constructed in computer science of pure, applied, logic and math.  To learn how to use code as a foundation to explore, express, and question the nature of ideas in much the same way paint or clay would be used. This is the main idea that stands out to me in the quote above when compared to the 10 other items in the manifesto, the idea that it is vital to understand the scope of your work and its effect on others both individually and within a system or institution. Some hypothetical examples of this need to consider scope maybe being some perfectly realistic simulation created solely to push the boundaries of what is possible technically. A simulation like this would be amazing in terms of technology but what must also be considered is what kind of effects something like a perfect, indistinguishable-from-life simulation, would have on the human psyche or society in general. What would we not need anymore? Would things like travel lose significance? It is always important to keep scope in mind.

airsun-Interruptions

This project is tricky at first because I was not really sure about how to use the concept of noise as a primary function in accomplishing the assignment. It was interesting to really understand this concept throughout the project. And it is also interesting to see how some basic math concepts such as cosine and sine were also part of the knowledge we may need for the assignment. Moreover, the finishing product can be very artistic or rational based on individual choices, with all the lines bending and connecting each other like hairs or strictly similar to the original one.

//Clair(sijing) Sun
//sijings@andrew.cmu.edu


// Starter Code for "Embedded Iteration + Randomness"


var boolDoRefresh;
var n=0;
var randomD;
var gridSize = 9;
var degreeR;
var lineLength=17;
var xoff=0.5;
var poff=0.01;

function setup() {
    createCanvas(480, 480);
    boolDoRefresh = false;
    
}


function draw(){
    background(250);
    for (var x = gridSize; x <= width - gridSize; x += gridSize) {
            for (var y = gridSize; y <= height - gridSize; y += gridSize) {
                angleMode(DEGREES);
                degreeR=noise(x*xoff,y*xoff);
                degreeR=degreeR*180;
                randomD=noise(x*poff,y*poff);
                if (randomD < 0.65){
                    line(x, y, x+cos(degreeR)*lineLength, y+sin(degreeR)*lineLength);  
                }

        }
    }
}


 
function mousePressed() {
    noiseSeed();
    redraw();
}
 


airsun-Intersections

 

//Clair(sijing) Sun
//sijings@andrew.cmu.edu
//Assignment-5

var lineP=[];
var boolDoRefresh;
var numberofL=10;

function setup() {
    createCanvas(480, 480);
    boolDoRefresh = false;
    for (var i=0; i<numberofL; i++){
        var x1 = random(0,width);
        var x2 = random(0,width);
        var y1 = random(0,height);
        var y2 = random(9,height);
        lineP[i] = [x1,y1,x2,y2];
    }
}

function draw() {
    background(200);

    //regenerate if mousePressed
    if (boolDoRefresh) { 
        for (var i=0; i<numberofL; i++){
            var x1 = random(0,width);
            var x2 = random(0,width);
            var y1 = random(0,height);
            var y2 = random(9,height);
            lineP[i] = [x1,y1,x2,y2];
        }
    boolDoRefresh=false
    }

    //for drawing the lines
    for (var i = 0; i < numberofL; i += 1){
        line(lineP[i][0],lineP[i][1],lineP[i][2],lineP[i][3]);
    }

    //for drawing the intersections, spliting to two lines each time
    for (var j = 0; j < numberofL; j += 1){
            for (var i = 0; i < numberofL; i += 1){
                var x1 = lineP[j][0];
                var y1 = lineP[j][1];
                var x2 = lineP[j][2];
                var y2 = lineP[j][3];
                var x3 = lineP[i][0];
                var y3 = lineP[i][1];
                var x4 = lineP[i][2];
                var y4 = lineP[i][3];
                intersect(x1, y1, x2, y2, x3, y3, x4, y4);
            }
    }
    
}

// Modified from line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
// Determine the intersection point of two line segments
// Modified from http://paulbourke.net/geometry/pointlineplane/javascript.txt
function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {
    if ((x1 == x2 && y1 == y2) || (x3 == x4 && y3 == y4)) {
        return false
    }

    var denom = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
 
    if (denom === 0) {
        return false
    }
 
    var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom
    var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom
 
    // is the intersection along the segments
    if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
        return false
    }

    fill(0);
    ellipse (x1 + ua * (x2 - x1),y1 + ua * (y2 - y1),15);
}


 
function mousePressed() {
    boolDoRefresh = true;
}

airsun-IterationExercise

//Clair(sijing) Sun
//sijings@andrew.cmu.edu
//Assignment-5

var lineP=[];
var boolDoRefresh;
var numberofL=10;

function setup() {
    createCanvas(480, 480);
    boolDoRefresh = false;
    for (var i=0; i<numberofL; i++){
        var x1 = random(0,width);
        var x2 = random(0,width);
        var y1 = random(0,height);
        var y2 = random(9,height);
        lineP[i] = [x1,y1,x2,y2];
    }
}

function draw() {
    background(200);

    //regenerate if mousePressed
    if (boolDoRefresh) { 
        for (var i=0; i<numberofL; i++){
            var x1 = random(0,width);
            var x2 = random(0,width);
            var y1 = random(0,height);
            var y2 = random(9,height);
            lineP[i] = [x1,y1,x2,y2];
        }
    boolDoRefresh=false
    }

    //for drawing the lines
    for (var i = 0; i < numberofL; i += 1){
        line(lineP[i][0],lineP[i][1],lineP[i][2],lineP[i][3]);
    }

    //for drawing the intersections, spliting to two lines each time
    for (var j = 0; j < numberofL; j += 1){
            for (var i = 0; i < numberofL; i += 1){
                var x1 = lineP[j][0];
                var y1 = lineP[j][1];
                var x2 = lineP[j][2];
                var y2 = lineP[j][3];
                var x3 = lineP[i][0];
                var y3 = lineP[i][1];
                var x4 = lineP[i][2];
                var y4 = lineP[i][3];
                intersect(x1, y1, x2, y2, x3, y3, x4, y4);
            }
    }
    
}

// Modified from line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
// Determine the intersection point of two line segments
// Modified from http://paulbourke.net/geometry/pointlineplane/javascript.txt
function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {
    if ((x1 == x2 && y1 == y2) || (x3 == x4 && y3 == y4)) {
        return false
    }

    var denom = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
 
    if (denom === 0) {
        return false
    }
 
    var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom
    var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom
 
    // is the intersection along the segments
    if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
        return false
    }

    fill(0);
    ellipse (x1 + ua * (x2 - x1),y1 + ua * (y2 - y1),15);
}


 
function mousePressed() {
    boolDoRefresh = true;
}

paukparl-Reading01

...
2. The Critical Engineer raises awareness that with each technological advance our techno-political literacy is challenged.
...

Sometimes, when I'm on the subway, I would wonder if the net knowledge of all passengers on the train could amount to making a smart phone. When you think about it for a couple seconds, you will soon realize that there is nearly no way to make a smart phone with that many people on the same train. But at the same time, we're all constantly staring at our phones (especially on the trains). Often, we're so physically close to pieces of technology, yet have no clue of what goes into them and how they've been engineered or manufactured. I haven't had any political view on this, so I'm not perfectly sure what "techno-political" literacy would mean. But I think it would have some things to do with the privacy- and duopoly-related disputes surrounding the web.

But I do feel uneasy with the current pace that technology is evolving. I enjoy coding and learning more about computers, because it gives me composure, a sense that I'm incrementally gaining more control over my life.