chromsan-IterationExercise

 
let refresh = true, box_width = 40, box_padding = 10;
 
function setup() {
    createCanvas(400, 400); background(255); noStroke(); 
}
 
function draw() {
 
  if (refresh) {
    refresh = false;
    clear(); background(255);
 
    for (let x = 5; x <= width - box_width; x += (box_width + box_padding)) {
 
        for (let y = 5; y <= height - box_width; y += (box_width + box_padding)) {
 
            let rand = Math.ceil(random(15)); // 1 in 15 chance there is a circle
            if (rand == 1) {
                fill(66, 134, 244);
                ellipse((x + box_width/2), (y + box_width/2), box_width, box_width);
            } else {
                fill(195, 198, 204);
                rect(x, y, box_width, box_width);
            }
        }
    }
  }
}
 
function mousePressed() { refresh = true; }

yalbert-Intersections


var segs = [];
var intersections = [];
var clicked = false;
var numSegs = 12;
var lineLength = 300;
var dotSize = 20;
 
function setup() {
  angleMode(DEGREES);
  createCanvas(700, 700);
  resetLines();
  findIntersections();
}
 
function draw() {
  background(255);
 
  //creates a new set of segments if the mouse is clicked
  if(clicked){
    resetLines();
    findIntersections();
    clicked = false;
  }
  drawSegs();
  drawIntersections();
}
 
function drawSegs(){
  for(i = 0; i < numSegs; i++){
    segs[i].drawSeg();
  }
}
 
function drawIntersections(){
  for(i = 0; i< intersections.length; i++){
    intersections[i].drawIntersection();
  }
}
 
function mousePressed() {
  clicked = true;
}
 
function Segment(x1, x2, y1, y2){
  this.x1 = x1;
  this.x2 = x2;
  this.y1 = y1;
  this.y2 = y2;
  this.drawSeg = function(){
    stroke(0);
    strokeWeight(2);
    line(this.x1, this.y1, this.x2, this.y2);
  }
}
 
function Intersection(x, y){
  this.xPos = x;
  this.yPos = y;
  this.drawIntersection = function(){
    strokeWeight(0);
    fill(0, 100);
    ellipse(this.xPos, this.yPos, dotSize, dotSize);
  }
}
 
function resetLines(){
  segs = [];
  for(i = 0; i < numSegs; i++){
    var x1 = random(0, width);
    var y1 = random(0, height);
    var secondPoint = setSecondPoint(x1, y1);
    var x2 = secondPoint[0];
    var y2 = secondPoint[1];  
    newSeg = new Segment(x1, x2, y1, y2);
    segs.push(newSeg);
  }
}
 
//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(0, 360);
  var y2 = sin(angle) * lineLength + y1;
  var x2 = cos(angle) * lineLength + x1; 
 
  //If the second point is outside the canvas, another one is calculated
  while(x2 < 0 || x2 >= width || y2 < 0 || y2 >= height){
    angle = random(0, 360);
    y2 = sin(angle) * lineLength + y1;
    x2 = cos(angle) * lineLength + x1; 
  }
 
  return [x2, y2];
}
 
//iterates through all of the segments to find the intersections
function findIntersections(){
  intersections = [];
  for(firstInd = 0; firstInd < numSegs; firstInd++){
    firstSeg = segs[firstInd];
    for(secInd = 0; secInd < numSegs; secInd++){
      secondSeg = segs[secInd];
      intersection = findIntersection(firstSeg.x1, firstSeg.y1, 
                                      firstSeg.x2, firstSeg.y2,
                                      secondSeg.x1, secondSeg.y1,
                                      secondSeg.x2, secondSeg.y2);
      if(intersectionIsValid(intersection)){
        intersections.push(new Intersection(intersection[0], intersection[1]));
      }
    }
  }
}
 
//check that the intersection exists and hasn't already been discovered
function intersectionIsValid(intersection){
  if(intersection == false){
    return false;
  }
  for(i = 0; i < intersections.length; i++){
    if(intersections[i].xPos == intersection[0] && intersections[i].yPos == intersection[1]){
      return false;
    }
  }
  return true;
}
 
//Paul Bourke's equation for finding the intersection of two lines
//Code courtesy of Leo Bottaro
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 [floor(x), floor(y)]
}

nixel-Intersections

let lines = [];
let slider;
let intersectionsArray = [];
let intersection = [];
 
function setup() {
  createCanvas(720, 480);
  background(255, 204, 0);
 
  slider = createSlider(12, 100, 12);
  slider.position(50, 80);
  stroke(0,0,255);
  textSize(15);
  text('click to begin', width/2,height/2);
}
 
function mousePressed(){
 
  intersectionsArray = [];
  lines = [];
  background(255, 204, 0);
  var lineNumber = slider.value();
 
  for (var i = 0; i < lineNumber; i++){
    var newLine = new Line(random(50,width-100), random(50, height-100), random(50,width-100), random(50, height-100));
    lines.push(newLine);  
  }
 
 
  for (i = 0; i < lines.length-1; i++){
   for (var j = 1; j < lines.length; j++) {
     if (lines[i] !== lines[j]){
      intersection = (intersect(lines[i].x1, lines[i].y1, lines[i].x2, lines[i].y2, lines[j].x1, lines[j].y1, lines[j].x2, lines[j].y2));
     }
     if (intersection !== false && intersectionsArray.includes(intersection) == false){
       intersectionsArray.push(intersection);
      }
     }    
  }
  fill(255,0,0,50);
  text('number of lines:', 50,70);
  text(lines.length, 170,70);
  for (let l of lines){
    l.drawLine();
  }
 
  for (i = 0; i < intersectionsArray.length; i++) {
    ellipse(intersectionsArray[i][0], intersectionsArray[i][1],15);
  }
}
 
 
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);
  } 
}
 
 
//intersection calculations from paul bourke and leo bottaro
function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {
 
  if ((x1 === x2 && y1 === y2) || (x3 === x4 && 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 < 0 || ua > 1 || ub < 0 || ub > 1) {
    return false;
	}
 
  let x = x1 + ua * (x2 - x1);
  let y = y1 + ua * (y2 - y1);
 
  return [x, y]
}

nixel-IterationExercise

let row = 8; 
let col = 8;
let pressed = false;
 
function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);
  noStroke();
  noLoop();
  background(255, 204, 0);
}
 
function draw() {
  if (pressed == false){
    makeShapes();
  }
}
 
function mousePressed(){
  pressed = true;
  background(255, 204, 0);
  makeShapes();
}
 
function makeShapes(){
  for (var i = 1; i < row; i++){
    for (var j = 1; j < col; j++){
      let probability = int(random(0,12));
      if (probability == 0){
        fill(0,0,255);
     	ellipse(100 + 50*i, 100 + 50*j, 30); 
      }
      else {
      	fill(255,0,0);
      	rect(100 + 50*i, 100 + 50*j, 30, 30);
      }
    }
  } 
}

nixel-reading01

  1. The Critical Engineer recognizes that each work of engineering engineers its user, proportional to that user's dependency upon it.

This tenet of the Manifesto talks about how people are influenced by 'works' and programs. The more you use something, the more you are being changed by it, and the more unaware you are of this, the more likely it is that you are being controlled by the thing than you are controlling it. Your life and your identity is shaped by the systems, objects, and ideas you are accustomed to using. The people who make these systems, objects, and ideas are in the end, able to decide how their users function in the world. Being aware that your life revolves around things that you consciously or unconsciously give power is important.

I think this is interesting since it is so obvious and prevalent in our everyday lives. Some examples would be the feedback system on social media sites, including likes, comments, followers, subscribers, etc. More examples would be dependency on autofill to remember passwords, cloud based storage, and auto-sync between devices and accounts.

yalbert-IterationExcercise

//global values
var boolDoRefresh;
var grid = [];
var gridSize = 8;
var spotSize = 30;
var margin = 20;
var spotGap = 10;
var probabilityOfCircle = .1
 
function setup() {
  createCanvas(400, 400);
  boolDoRefresh =true;
 
  //create the first grid
  recreateGrid();
 
  //calculate margin based on grid and canvas size
  margin = (width - gridSize*(spotSize+spotGap))/2;
}
 
function draw() {
  background(41, 233, 86);
 
  //create a new grid if a mouse was clicked
  if(boolDoRefresh) {
    recreateGrid();
    boolDoRefresh = false;
  }
  drawGrid();
}
 
function mousePressed() {
  boolDoRefresh = true;
}
 
function drawGrid(){
    for(row = 0; row < gridSize; row++){
        for(col = 0; col < gridSize; col++){
            grid[row][col].drawSpot();
        }
    }
}
 
function spot(x, y, isSq){
    this.xPos = x;
    this.yPos = y;
    this.isSquare = isSq;
    this.drawSpot = function(){
        if(this.isSquare){
            stroke(0, 75);
            strokeWeight(0);
            fill(0, 0, 0, 30);
            rect(this.xPos, this.yPos, spotSize, spotSize);
        }else{
            stroke(0, 150);
            strokeWeight(0);
            fill(0, 0, 0, 100);
            ellipse(this.xPos + spotSize/2, this.yPos + spotSize/2, spotSize, spotSize);            
        }
    }
}
 
//recreate the grid, assigning each spot a new shape
function recreateGrid(){
    grid = [];
    for(row = 0; row < gridSize; row++){
        tempRow = [];
        for(col = 0; col < gridSize; col++){
            newSpot = new spot(margin + col*(spotSize+spotGap), margin + row*(spotSize+spotGap), chooseShape());
            tempRow.push(newSpot);
        }
        grid.push(tempRow);
    }
}
 
//randomly assign a shape based on the give square vs circle probability
function chooseShape(){
    var randVal = random(0,1);
    if(randVal <= probabilityOfCircle){
        return false;
    }else{
        return true;
    }
}

yalbert-reading01

5. The Critical Engineer recognises that each work of engineering engineers its user, proportional to that user's dependency upon it.

In other words, the design of a product affects its users' behavior. This can happen with or without the participants' knowledge and is nearly impossible to avoid. As a designer, this is a fact that I must constantly contend with. Recognizing these behavioral nudges and understanding how to shape them is a key skill for those in my trade.

One common example of this is the scrolling interaction on mobile phones. Scrollable pages often lack clearly defined bottoms. As a result, users are disposed to lose track of time and spend longer on an app or site than initially intended. Since we are highly dependent on smartphones, this interaction of 'endlessly scrolling' through a given feed has become a mainstay in contemporary culture and raised questions about the role technology can and should play in our lives.