Intro to Intro to ICM class

The p5.js editor makes it incredibly easy to begin coding. So easy it seams almost irresponsible.

p5.Js is an open source library for Javascript. To begin coding these days, all one needs is to open the p5.js editor on a web browser and hop on The Coding Train. It’s so approachable even a kid can start bossing his computer within several minutes.

In a reality as futuristic as this, it’s important to stay ahead of the curve and be on the machine’s good side. It is completely feasible that humans will be farmed by machines in the very near future. Maybe we already are farmed and didn’t notice it yet 😉

Personally, it seems to me that being able to communicate with the machine is beneficial for my survival. But on a larger scale, it’s crucial that humanity takes responsibility on the beast we’ve created and educate it before it goes out of hand. Teach it kindness, compassion and equality. Make sure it imitates nature and co-exists with it rather than abuses and destroys it. Hoping this first attempt at javascript isn’t too little, too late!

The code for this self-portrait looks like this:

var Y_AXIS = 1;
var X_AXIS = 2;
var b1, b2, c1, c2;

function setup() {
  createCanvas(1074, 700);
    // Define colors
  b1 = color(30, 120, 0);
  b2 = color(150, 170, 43);
  c1 = color(204, 102, 0);
  c2 = color(150, 170, 43);

  noLoop();
}

function draw() {
  // Background
  setGradient(0, 0, width/2, height, b1, b2, Y_AXIS);
  setGradient(width/2, 0, width/2, height, b2, b1, Y_AXIS);

  fill (255, 160, 203);
  stroke('#222222')
  strokeCap(SQUARE);
  strokeWeight (3);
  rect (260, 160, 380, 220); 
  ellipse (500,1900, 2800, 2700);
    
  strokeWeight (3);  
  push();
  translate(width*0.8, height*0.5);
  star(-600, -180, 30, 50, 12); 
  pop();
  
  push();
  translate(width*0.8, height*0.5);
  star(-220, -180, 30, 50, 12); 
  pop();
  
  fill (255, 255, 203);  
  push();
  translate(width*0.8, height*0.5);
  star(-130, -70, 50, 120, 12); 
  pop();
  
  function star(x, y, radius1, radius2, npoints) {
  var angle = TWO_PI / npoints;
  var halfAngle = angle/2.0;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius2;
    var sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
  }
  
  fill (200, 200, 200)  
  rect (300, 200, 300, 200);
  
  

  rect (350, 400, 200, 100);

  rect (280, 520, 340, 80, 50);
	rect (180, 390, 60, 60); 
  rect (700, 390, 60, 60); 
  rect (720, 350, 20, 80); 
  line (730, 320, 730, 350);
  triangle(730, 240, 750, 299, 710, 299);
  triangle(750, 300, 730, 320, 710, 300);

  ellipse (320, 560, 60, 60);
  ellipse (405, 560, 60, 60);
  ellipse (495, 560, 60, 60);
  ellipse (580, 560, 60, 60);
  
  strokeWeight (8)
  rect (320, 280, 120, 100);
  rect (460, 280, 120, 100); 
  line (320, 260, 580, 260);
  line (280, 320, 320, 320);
  line (460, 320, 440, 320);
  line (580, 320, 620, 320);
  line (240, 420, 350, 420);
  line (550, 420, 700, 420);

  strokeWeight (3)
  fill (160, 200, 200)    
  rect (360, 320, 40, 40, 20); 
  rect (500, 320, 40, 40, 20);
  
  strokeWeight (14)
  line (320, 260, 440, 260);
  line (460, 260, 580, 260);
  
function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  }  
  else if (axis == X_AXIS) {  // Left to right gradient
    for (var i = x; i <= x+w; i++) {
      var inter = map(i, x, x+w, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y+h);
    }
    
  }
}
}