Name: Nishra Ranpura

  Critical Computation

  MFA Design and Technology

​

Assignment 4: Exquisite Corpse | Sapiens

​

Design process, Assignment reflections, and additional information can be found in the below Portfolio link:

https://cc-portfolio-nishra.glitch.me/p4.html

*/   

​

let ismousePressedC = false;

let ismousePressedE = false;

let ismousePressedP = false;

let intro = true;

let intro2 = true

​

function setup() {

  createCanvas(400, 600);

  frameRate(8);

  angleMode(DEGREES);

  pixelDensity(2);

  textAlign(CENTER, CENTER);

  fill(100);

  //calling the working buttons

  interaction('Evolution', width/2 - 45, 15, toggleEvolution, color(203, 157, 48, 120));

  interaction('Cognition', 300, 15, toggleCognition, color(90, 90, 130, 120));

  interaction('Primordial', 20, 15, togglePrimordial, color(23, 174, 98, 120));

}

​

function draw() {

  translate(0, 50); //because the figure was drawn before accounting for interaction space :P

  //calling bottom of the figure which represents the animal nature, by pressing green button

  if (ismousePressedP == true) {

    primordial();

  }

  //calling body of the figure which represents the existential crisis, by pressing yellow button

  if (ismousePressedE == true) {

    evolution();

  }

  //calling head of the figure which represents the cognitive phase, by pressing blue button

  if (ismousePressedC == true) {

    cognition();

    cognition();

    cognition();

  }  

  //for introductory text to only appear in the beginning and go away when buttons are pressed

  if (intro == true && intro2 == true) {

    background(220, 100);

    textSize(14);

    intro = text("Explore the Story of 'Sapiens'", width/2, height/2-50); 

    intro2 = text("Click on the buttons above", width/2, height/2-30); 

  }

  else if (ismousePressedP == true || ismousePressedE == true || ismousePressedC == true) {

    intro = false;

    intro2 = false;

    background(240, 100);

  }

}

​

//working buttons

function interaction(event, xplace, yplace, actFunction, col) {

  button = createButton(event);

  button.position(xplace, yplace);

  button.size(80,30);

  button.style('border', 'none');

  button.style('border-radius', '50px');

  button.style('background-color', col)

  button.style('color', 'white');

  button.style('font-size', 6);

  button.mousePressed(actFunction);

}

​

//actions for green button to do when pressed

function togglePrimordial() {

  if (ismousePressedP == true) {

    ismousePressedP = false

  }

  else {

    ismousePressedP = true

  }

}

​

//actions for yellow button to do when pressed

function toggleEvolution() {

  if (ismousePressedE == true) {

    ismousePressedE = false

  }

  else {

    ismousePressedE = true

  }

}

​

//actions for blue button to do when pressed

function toggleCognition() {

  if (ismousePressedC == true) {

    ismousePressedC = false

  }

  else {

    ismousePressedC = true

  }

}

​

//for animated blur and shadow

function shadowFX(minX, maxX, minY, maxY, blur, shade) {

  drawingContext.shadowOffsetX = random(minX, maxX);

  drawingContext.shadowOffsetY = random(maxY, maxY);

  drawingContext.shadowBlur = blur;

  drawingContext.shadowColor = shade;

}

​

//defining a function for bottom of the figure which represents the animal nature

function primordial() {

  textSize(10.5);

  text('BIRTH | THE ANIMAL', 60, 20);

  //calling tail function that draws the arbitrarily placed scales/triangles on the tail

  push();

  tail(254, 397, 280, 404, 262, 424);

  tail(262, 424, 285, 430, 274, 450);

  tail(268, 453, 290, 445, 298, 457);

  tail(298, 457, 310, 443, 330, 460);

  tail(320, 453, 330, 432, 342, 445);

  //drawing the legs

  noStroke();

  fill(23, 174, 98);

  beginShape();

  curveVertex(70, 50);

  curveVertex(138, 344);

  curveVertex(111, 442);

  curveVertex(115, 511);

  curveVertex(110, 531);

  curveVertex(135, 516);

  curveVertex(180, 513);

  curveVertex(225, 505);

  curveVertex(237, 518);

  curveVertex(246, 500);

  curveVertex(290, 507);

  curveVertex(345, 445);

  curveVertex(287, 456);

  curveVertex(260, 415);

  curveVertex(269, 350)

  curveVertex(209, 302);

  curveVertex(130, 280);

  curveVertex(138, 344);

  curveVertex(138, 344);

  endShape();

  fill(10, 160, 85);

  arc(246, 462, 20, 58, 280, 90, OPEN); 

​

  //defining tail function to draw arbitrarily placed scales/triangles on the tail

  function tail(xpos1, ypos1, xpos2, ypos2, xpos3, ypos3) {

    noStroke();

    fill(0, 87, 54);

    triangle(xpos1, ypos1, xpos2, ypos2, xpos3, ypos3);

  }

  pop();

}

​

//defining a function for body of the figure which represents the existential crisis, by pressing yellow button

function evolution() {

  textSize(10.5);

  text('EXISTENCE | THE CRISIS', width/2, 20);

  push();

  shadowFX(-30, 30, 0, 0, 15, '#CB9D30'); //for the fuzzy look 

​

  //drawing the body

  noStroke();

  fill(203, 157, 48);

  beginShape();

  curveVertex(109, 199);

  curveVertex(77, 254);

  curveVertex(120, 314);

  curveVertex(138, 344);

  curveVertex(150, 420);

  curveVertex(135, 470);

  curveVertex(180, 480);

  curveVertex(243, 432);

  curveVertex(294, 294);

  curveVertex(261, 210);

  curveVertex(204, 180);

  curveVertex(109, 199);

  curveVertex(77, 254);

  curveVertex(120, 314);

  endShape();

  pop();

}

​

//defining a function for head of the figure which represents the cognitive phase, by pressing blue button

function cognition() {

​

  textSize(10.5);

  text('EPILOGUE | THE MIND', 340, 20);

  push();

  //drawing head

  for (i = 0; i<=90; i+=random(2, 10)) {

    stroke(180, 150);

    strokeWeight(2);

    noFill();

    ellipse(width/2 - 20, 140, i, i + 10);

  }

​

  shadowFX(-5, 5, -5, 5, 10, '#5A5A82');  

  //drawing the chaotic mind's thoughts

  noFill();

  stroke(random(90), 90, 130, 180);

  strokeWeight(random(1, 8));

  let px = random(65, 100);

  let py = random(60, 120);

  let px2 = random(100, 200);

  let py2 = random(120, 140);

  let px3 = random(200, 315);

  let py3 = random(140, 180);

  let x = random(65, 315);

  let y = random(60, 180);

  let x2 = random(65, 315);

  let y2 = random(85, 165);

  let x3 = random(65, 315);

  let y3 = random(85, 165);

  beginShape();

  curveVertex(x, y);

  curveVertex(x, y);

  curveVertex(px, py);

  curveVertex(px2, py2);

  curveVertex(x2, y2);

  curveVertex(x2, y2);

  curveVertex(px2, py2);

  curveVertex(px3, py3);

  curveVertex(x3, y3);

  curveVertex(x3, y3);

  //curveVertex(px3, py3);

  curveVertex(x, y);

  curveVertex(x, y);

  endShape();

  px = x;

  py = y;

  px2 = x2;

  py2 = y2;

  px3 = x3;

  py3 = y3;

  pop();

}

​

​