Category: 01

yuvian-IterationExercise

var canvasWidth = 500;
var canvasHeight = canvasWidth;
var sideLength = canvasWidth/8 - 10;

function setup() {
  var bg_color = color(17, 22, 158);
  background(bg_color);
  createCanvas(canvasWidth,canvasHeight);
  noStroke();
	
  for (var x = 0; x < 8; x++) {
    for (var y = 0; y < 8; y++) {
    fill(random(50,170),random(130,200), random(230,255));
    rect(x*canvasWidth/8,y*canvasWidth/8,sideLength,sideLength);
    }
  }
}

function draw() {
  var bg_color = color(17, 22, 158);
  rectMode(CORNER);
  ellipseMode(CORNER);

  for (var x = 0; x < 8; x++) { 
    for (var y = 0; y < 8; y++) {
      var chance = random(0,1);   
      if (mouseIsPressed) {
        if (chance < 0.05 ) {
          noStroke();
          fill(bg_color);
          rect(x*canvasWidth/8, y*canvasWidth/8, canvasWidth/8, canvasWidth/8);
	  //circles are bright red
	  fill(255, 43, 92);
          ellipse(x*canvasWidth/8+3,y*canvasWidth/8+3,sideLength-3, sideLength-3);
        } else {
	  noStroke();
	  //squares lean blue
	  fill(random(50,170),random(130,200), random(230,255));
          rect(x*canvasWidth/8,y*canvasWidth/8,sideLength,sideLength); 
        } 
      }
    }
  }
}

paukparl-Intersections

 sketch:

 

gif:

 

var NUM_LINES = 12;
var LINE_LENGTH = 300;
var ELLIPSE_SIZE = 20;
var justClicked = true;
var lines;
 
function setup() {
  createCanvas(720, 480);
  strokeWeight(2);
  fill('rgba(30,30,40, 0.9)');
}
 
function draw() {
  if (justClicked) {
 
    // array refreshed upon click
    lines = [];
 
    // redraw upon click
    background(100, 100, 110);
    for (var i=0; i&lt;NUM_LINES; i++) { drawRandLine(); } } justClicked = false; } // draw a random line function drawRandLine() { var randRotation = random(PI); var pointL = createVector( -LINE_LENGTH/2 * cos(randRotation), -LINE_LENGTH/2 * sin(randRotation) ); var pointR = createVector( LINE_LENGTH/2 * cos(randRotation), LINE_LENGTH/2 * sin(randRotation) ); if (randRotation &gt; PI/2) {
    var pointTemp = pointL.copy();
    pointL = pointR;
    pointR = pointTemp;
  }
 
  var randTransX = random(width);
  var randTransY = random(height);
  pointL.add(randTransX, randTransY);
  pointR.add(randTransX, randTransY);
 
  stroke(255);
  line(pointL.x, pointL.y, pointR.x, pointR.y);
 
  var newLine = [pointL, pointR];
  checkIntersect(newLine);
  append(lines, newLine);
}
 
 
// check for intersections between new line and existing ones
function checkIntersect( lineB ) { 
 
  // go through lines already drawn on canvas
  for (var i=0; i&lt;lines.length; i++) {
    var lineA = lines[i];
 
    // conduct Bourke intersection calculation
    var intersect = bourkeIntersect(
      lineA[0].x, lineA[0].y,
      lineA[1].x, lineA[1].y,
      lineB[0].x, lineB[0].y,
      lineB[1].x, lineB[1].y
    );
 
    if (intersect) {
      print("INTERSECTED!\n");
      noStroke();
      ellipse(intersect.x, intersect.y, ELLIPSE_SIZE);
    }
  }
}
 
 
// line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
// JS version by Leo Bottaro
function bourkeIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
  var denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
 
  // if 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;
	}
 
  // if intersect
  return createVector(x1 + ua * (x2 - x1), y1 + ua * (y2 - y1));
}
 
function mousePressed() {
  justClicked = true;
}

chaine-Reading01

The Critical Engineer considers any technology depended upon to be both a challenge and a threat. The greater the dependence on a technology the greater the need to study and expose its inner workings, regardless of ownership or legal provision.

Humanity's reliance on technology within recent years is undeniable. It has ingrained itself into almost every aspect of human life whether it be something as simple as flushing the toilet or something as complex as building a supercomputer. This tenet reverberates with the rapid pace our society's reliance on technology is growing at. The movie Ex Machina--(spoiler alert) in which a humanoid robot manipulates and kills its human creator and caretaker in order to assimilate with the outside human society--is becoming a very real possibility. As this possibility grows larger, we, as engineers, are obliged to study the field of technology thoroughly to prevent or adapt to the radical new changes it might bring.

 

nerual-IterationExercise

the full sized one

 

var boolDoRefresh;
var s = 20;
var n = 9;
 
function setup() {
    createCanvas(400, 400);
    boolDoRefresh = true;
}
 
function draw() {
  if (boolDoRefresh) {
        //background(0);
        var space = width / (n + 2);
        for (var x = space; x &lt; width - space; x += space){
            for (var y = space; y &lt; width - space; y += space){
                rect(x, y, s, s);
                r = random(101)
                if (r &lt;= 5){
                    rect(x+5, y+5, s-10, s-10);
                }
            }
        }
    boolDoRefresh = false;
  }
}
 
function mousePressed() {
    background(255);
    boolDoRefresh = true;
}

 

paukparl-IterationExercise

 sketch:

 

gif:

 

var justClicked;
var gridSize;
 
function setup() {
  createCanvas(400, 400);
  justClicked = true;
  gridSize = width/10;
  fill(50);
  stroke(255);
  strokeWeight(3);
}
 
function draw() {
  if (justClicked) {    
 
    // redraw
    background(100, 100, 108);
    for (var y = gridSize; y &lt; width; y += gridSize) {
      for (var x = gridSize; x &lt; height; x += gridSize) {
        var rand = random();
        if (rand &lt; 0.05) { 
          ellipse(x, y, 10);
        } else {
          ellipse(x, y, 20);
        }
      }
    }
 
    justClicked = false;
  }
}
 
function mousePressed() {
  justClicked = true;
}

airsun-reading01

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.

First of all, throughout the reading, I was not really sure about the definition of the term "Critical Engineer". I felt like it can be interpreted in different ways. This role can include every participant who is working towards the future, building Art-design-tech that deals with human interactions. Or, it can be a jargon describing a specific group of people. But no matter what group this term refers to, it all contributes to the overall manifesto and its emphasis on the social, cultural, and psychological importance for inventions. It first says the Critical Engineer writing codes that touch on social studies and psychology, both relating to research in human behaviors and interactions. This is a common point in many design and artworks theme. However, I found these concepts were rarely connected with coding. Coding is sitting on the other side with logic and rationality. So it is creative and interesting when reading part of the Critical Engineer's job is to use coding with ideas in the social and psychological realms for revising our conventional understanding and behaviors related to user experience and social actions. Nevertheless, when thinking about the production of coding, how is our behaviors being shaped? If we look around, we may find that most things around us today are partly constructed through written code, e.g. social media apps, personal websites, etc. If we look at these finished products, a majority part of human interactions and social life is actually connected or even shaped by code. In this sense, the statement points out the eventual consequence and influence of the critical engineer in the aspect of shaping a way of living and communicating.

breep-reading01

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

This article of the The Critical Engineering Manifesto talks, in my eyes, about the symbiotic relationship between a work of engineering (or indeed art) and its creator. As creators, they feel that a work of engineering is just as much a part of the engineer as the engineer is a part of their work. On top of this, the engineer learns more with every work they produce, growing their own capabilities. This is the heart of the symbiotic relationship: the work feeds the creator as much as it is fed and grows into fruition. It is the goal of the engineer to become the best they can be, and the only way of doing such is by engineering works.

To me this is interesting because as artist's I feel we should always be striving for better as we create works and learn as we go along. I personally find myself bogged down in my outcomes so heavily a-lot of the time that sometimes I forgot what I have learnt on the road, and for me this article was a succinct reminder that the road is just as much a part of the journey as the destination is.

Example: look at any artist's oeuvre through time,  their own growth in skill and ideas is evidence of this article.

lass-Intersections


var refresh;
var numLines = 12; 
var lineLength = 300; 
 
function setup() {
  createCanvas(720, 480);
  fill(255, 255, 255, 150); 
  stroke(255, 255, 255); 
  refresh = true;
}
 
function draw() {
  if (refresh) {
    background(200, 240, 240); 
    var lines = []; 
    for(var i = 0; i < numLines; i++) {
      var x = Math.random() * width; 
      var y = Math.random() * height; 
      var theta = Math.random() * Math.PI; 
      lines.push([x, y, theta]); 
      strokeWeight(2); 
      line(x, y, x + lineLength * Math.cos(theta), y + lineLength * Math.sin(theta)); 
      for(var j = 0; j < lines.length; j++) {
        var tan1 = Math.tan(theta)
        var sin2 = Math.sin(lines[j][2]); 
        var cos2 = Math.cos(lines[j][2]); 
        var dx = lines[j][0] - x; 
        var dy = lines[j][1] - y; 
        var s2 = (dx - dy / tan1) / (sin2 / tan1 - cos2); 
        var s1 =  (dx + s2 * cos2) / Math.cos(theta); 
        if(s1 < lineLength && s2 < lineLength && s1 > 0 && s2 > 0){
          strokeWeight(0); 
          ellipse(lines[j][0] + s2 * cos2, lines[j][1] + s2 * sin2, 15, 15); 
        }
      }      
    }
    refresh = false;
  }
}
 
function mousePressed() {
  refresh = true;
}

lass-IterationExercise

var refresh;
var rows = 9; 
var cols = 9; 
var spacing = 55;
var xColor; 
var dudeColor; 
 
function setup() {
  createCanvas(550, 550);
  refresh = true;
  colorMode(HSB, 100); 
}
 
function draw() {
  if (refresh) {
    background(0, 0, 100); 
    var myHue = Math.random() * 100; 
    dudeColor = color(myHue, 30, 95); 
    xColor = color((myHue + 50) % 100, 40, 95); 
    fill(dudeColor); 
    stroke(100, 100, 30); 
    for(var i = 1; i <=rows; i++)
	for(var j = 1; j <= cols; j++){ 
            if(Math.random() > .1) 
              drawDude(i, j);
            else 
              drawX(i, j); 
	}
    refresh = false;
  }
}
 
function drawDude(x, y){
  stroke(0, 0, 100); 
  strokeWeight(0); 
  ellipse(x * spacing, y * spacing, 40, 40);
  ellipse(x * spacing - 4, y * spacing - 20, 10, 20); 
  ellipse(x * spacing + 9, y * spacing - 18, 10, 20); 
  strokeWeight(3); 
  ellipse(x * spacing - 10, y * spacing - 4, 2, 2); 
  ellipse(x * spacing + 10, y * spacing - 2, 2, 2); 
  strokeWeight(2); 
  ellipse(x * spacing, y * spacing + 1, 1, 6); 
  ellipse(x * spacing, y * spacing + 8, 15, 1); 
}
 
function drawX(x, y){
  stroke(xColor); 
  strokeWeight(4); 
  line(x * spacing + 5, y * spacing + 5, x * spacing - 5, y * spacing - 5); 
  line(x * spacing - 5, y * spacing + 5, x * spacing + 5, y * spacing - 5); 
}
 
function mousePressed() {
  refresh = true;
}

harsh-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.

What this strikes a chord with me about this proposition is the very explicit notion here that code is not just a technological artefact but also a cultural one. I would argue that this idea extends beyond code, to all objects of technology and design - anything human created for human use, really. The objects we design, design us - and what makes code particularly tricky with this notion is that it is often very difficult to exactly point to how the software and interface are changing us. Thus, the role of the "Critical Engineer" to dissect this social interaction and reveal it is crucial.

Designed artefacts (and this includes code) are not just banal "objects" - they are encoded beings with inherent political, social and cultural meanings - intentional or unintentional. As Abraham Maslow has been credited to have said, "When you're holding a hammer, everything tends to look like a nail" - I think the same philosophy applies for code, in an even more potent way. While a hammer is still an immobile object, code is living, acting and shaping. The way google maps shows the world to you eventually influences the way you see the world, and a critical approach to dissecting and revealing this influence must be undertaken.