Name: Nishra Ranpura

  Critical Computation

  MFA Design and Technology

​

Assignment 2: Form Geenerator | Fabric Weights and Drapes

​

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

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

*/                                                                                                                  

​

// Declaring Global Variables. (Their Significance is explained later along with the functions they are used with)

let cvX1, cvY1, cvX2, cvY2, cvX3, cvY3, cvX4, cvY4, cvX5, cvY5, cvX6, cvY6, cvX7, cvY7, cvX8, cvY8, cvX9, cvY9, cvX10, cvY10, cvX11, cvY11, cvX12, cvY12, cvX13, cvY13, cvX14, cvY14, cvX15, cvY15, cvX16, cvY16;

​

let X1 = 0, Y1 = 0, X2 = 0, Y2 = 0, X3 = 0, Y3 = 0, X4 = 0, Y4 = 0, X5 = 0, Y5 = 0, X6 = 0, Y6 = 0, X7 = 0, Y7 = 0, X8 = 0, Y8 = 0, X9 = 0, Y9 = 0, X10 = 0, Y10 = 0, X11 = 0, Y11 = 0, X12 = 0, Y12 = 0, X13 = 0, Y13 = 0, X14 = 0, Y14 = 0, X15 = 0, Y15 = 0, X16 = 0, Y16 = 0;

​

let transparency = 0;

​

let fillR = 0, fillG = 0, fillB = 0;

​

let ellipseX = 0, ellipseY = 0, ellipseW = 0, ellipseH = 0;

​

let fabric1 = " ", fabric2 = " ", fabric3 = " ", fabric4 = " ", fabric5 = " ", fabric6 = " ", fabric7 = " ", fabric8 = " ", fabric9 = " ", fabric10 =  " ", fabric11 =  " ", fabric12 = " ";

let fabricString = " ";

​

​

function preload() {

  graphFont = loadFont('Typo_Round_Regular_Demo.otf'); 

}

​

function setup() {

  createCanvas(400, 400);

  noCursor(); // to make the mouse navigation clean more prominent

  angleMode(DEGREES);

}

​

function draw() {

  background(245);

  push();

  fill(120);

  textAlign(CENTER, CENTER);

  text("Click at \n different places to \n discover different \n Fabrics' Drapes & \n Sheernesses", 200, 200);

  pop();

  radialGradient();

  fabric();

  graph();

  fabricName();

  pointer(); 

}  

​

function mousePressed() {

  // for the ellipse hidden beneath the fabric (it acts as a reference to observe sheerness, and creates appearance of a table/stand on which the table cloth is placed)

  ellipseX = width/2;

  ellipseY = height/2;

  ellipseW = 100;

  ellipseH = 100;

  radialGradient(); //radial gradient given to get some shadows and highlights 

  // fixed X and Y positions for the curve vertices of the fabric.

  cvX1 = (width/2);

  cvY1 = (height/4);

  cvX2 = round(map(mouseX, 0, width, 235, 225));

  cvY2 = round(map(mouseX, 0, width, 115, 150));

  cvX3 = (width/2 + 70);

  cvY3 = (height/4 + 30);

  cvX4 = round(map(mouseX, 0, width, 285, 250));

  cvY4 = round(map(mouseX, 0, width, 165, 175));

  cvX5 = (width - 100);

  cvY5 = (height/2);

  cvX6 = round(map(mouseX, 0, width, 285, 250));

  cvY6 = round(map(mouseX, 0, width, 235, 225));

  cvX7 = (width/2 + 70);

  cvY7 = (height/2 + 70);

  cvX8 = round(map(mouseX, 0, width, 235, 225));

  cvY8 = round(map(mouseX, 0, width, 285, 250));

  cvX9 = (width/2);

  cvY9 = (height - 100);

  cvX10 = round(map(mouseX, 0, width, 165, 175));

  cvY10 = round(map(mouseX, 0, width, 285, 250));

  cvX11 = (width/2 - 70);

  cvY11 = (height/2 + 70);

  cvX12 = round(map(mouseX, 0, width, 115, 150));

  cvY12 = round(map(mouseX, 0, width, 235, 225));

  cvX13 = (width/4);

  cvY13 = (height/2);

  cvX14 = round(map(mouseX, 0, width, 115, 150));

  cvY14 = round(map(mouseX, 0, width, 165, 175));

  cvX15 = (width/2 - 70);

  cvY15 = (height/4 + 30);

  cvX16 = round(map(mouseX, 0, width, 165, 175));

  cvY16 = round(map(mouseX, 0, width, 115, 150));

  // TRUE RANDOMNESS - Random R, G, B values applied to form while generated. This is to view different fabric sheernesses in different metaphorical dyes.

  fillR = random(0, 255);

  fillG = random(0, 255);

  fillB = random(0, 255);

  // transparency mapped based on the Y-axis of the Drape/Weight graph

  transparency = map(mouseY, 0, height, 10, 230); 

  fill(fillR, fillG, fillB, transparency);

  // Random X and Y positions for the curve vertices of the fabric.

  X1 = random(cvX1-10, cvX1+10);

  Y1 = random(cvY1-10, cvY1+10);

  X2 = random(cvX2-10, cvX2+10);

  Y2 = random(cvY2-10, cvY2+10);

  X3 = random(cvX3-10, cvX3+10);

  Y3 = random(cvY3-10, cvY3+10);

  X4 = random(cvX4-10, cvX4+10);

  Y4 = random(cvY4-10, cvY4+10);

  X5 = random(cvX5-10, cvX5+10);

  Y5 = random(cvY5-10, cvY5+10);

  X6 = random(cvX6-10, cvX6+10);

  Y6 = random(cvY6-10, cvY6+10);

  X7 = random(cvX7-10, cvX7+10);

  Y7 = random(cvY7-10, cvY7+10);

  X8 = random(cvX8-10, cvX8+10);

  Y8 = random(cvY8-10, cvY8+10);

  X9 = random(cvX9-10, cvX9+10);

  Y9 = random(cvY9-10, cvY9+10);

  X10 = random(cvX10-10, cvX10+10);

  Y10 = random(cvY10-10, cvY10+10);

  X11 = random(cvX11-10, cvX11+10);

  Y11 = random(cvY11-10, cvY11+10);

  X12 = random(cvX12-10, cvX12+10);

  Y12 = random(cvY12-10, cvY12+10);

  X13 = random(cvX13-10, cvX13+10);

  Y13 = random(cvY13-10, cvY13+10);

  X14 = random(cvX14-10, cvX14+10);

  Y14 = random(cvY14-10, cvY14+10);

  X15 = random(cvX15-10, cvX15+10);

  Y15 = random(cvY15-10, cvY15+10);

  X16 = random(cvX16-10, cvX16+10);

  Y16 = random(cvY16-10, cvY16+10);

  // fabric name text that appears in the center depending on its drape and weight on the graph

  fabric1 = 'O R G A N D Y';

  fabric2 = 'O R G A N Z A';

  fabric3 = 'M U S L I N';

  fabric4 = 'D U P I O N I';

  fabric5 = 'G E O R G E T T E';

  fabric6 = 'C H I F F O N';

  fabric7 = 'D E N I M';

  fabric8 = 'B R O C A D E';

  fabric9 = 'S A T E E N';

  fabric10 = 'P O P L I N';

  fabric11 = 'L I N E N';

  fabric12 = 'W O O L';

  if ((mouseX > 0) && (mouseX < 50) && (mouseY > 0) && (mouseY < width/2)) {

    fabricString = fabric1

} else if ((mouseX > 50) && (mouseX < 100) && (mouseY > 0) && (mouseY < width/2)) {

    fabricString = fabric2

} else if ((mouseX > 100) && (mouseX < 150) && (mouseY > 0) && (mouseY < width/2)) {

    fabricString = fabric3

} else if ((mouseX > 150) && (mouseX < 200) && (mouseY > 0) && (mouseY < width/2)) {

    fabricString = fabric4

} else if ((mouseX > 200) && (mouseX < 300) && (mouseY > 0) && (mouseY < width/2)) {

    fabricString = fabric5

} else if ((mouseX > 300) && (mouseX < 400) && (mouseY > 0) && (mouseY < width/2)) {

    fabricString = fabric6

} else if ((mouseX > 0) && (mouseX < 50) && (mouseY > width/2) && (mouseY < width)) {

    fabricString = fabric7

} else if ((mouseX > 50) && (mouseX < 100) && (mouseY > width/2) && (mouseY < width)) {

    fabricString = fabric8

} else if ((mouseX > 100) && (mouseX < 150) && (mouseY > width/2) && (mouseY < width)) {

    fabricString = fabric9

} else if ((mouseX > 150) && (mouseX < 200) && (mouseY > width/2) && (mouseY < width)) {

    fabricString = fabric10

} else if ((mouseX > 200) && (mouseX < 300) && (mouseY > width/2) && (mouseY < width)) {

    fabricString = fabric11

} else if ((mouseX > 300) && (mouseX < 400) && (mouseY > width/2) && (mouseY < width)) {

    fabricString = fabric12

}

  fabricName();

}

​

// pointer that changes transparency and shape to mirror the Fabric Drape/Weight of the grid.

function pointer() {

  noFill();

  Ptransparency = map(mouseY, 0, height, 0, 90); // to show fabric's denseness to sheerness

  stroke(0, Ptransparency);

  strokeWeight(2);

  strokeJoin(MITER);

  rectCorners = map(mouseX, 0, width, 0, 10); // to show fabric's stiffness to drapiness

  rectMode(CENTER);

  rect(mouseX, mouseY, 20, 20, rectCorners, rectCorners, rectCorners, rectCorners);

  noStroke();

}

​

// drawing the actual fabric

// Question- How to give it shadows and highlights to make it appear more like an actual fabric?

function fabric() {

  fill(fillR, fillG, fillB, transparency);

  noStroke();

  curveTightness(-1); // to give the eedges ruffle-like look

  beginShape();

  curveVertex(X16, Y16);

  curveVertex(X1, Y1);

  curveVertex(X2, Y2);

  curveVertex(X3, Y3);

  curveVertex(X4, Y4);

  curveVertex(X5, Y5);

  curveVertex(X6, Y6);

  curveVertex(X7, Y7);

  curveVertex(X8, Y8);

  curveVertex(X9, Y9);

  curveVertex(X10, Y10);

  curveVertex(X11, Y11);

  curveVertex(X12, Y12);

  curveVertex(X13, Y13);

  curveVertex(X14, Y14);

  curveVertex(X15, Y15);

  curveVertex(X16, Y16);

  curveVertex(X1, Y1);

  curveVertex(X2, Y2);

  endShape();

}

​

// for the ellipse hidden beneath the fabric (it acts as a reference to observe sheerness, and creates appearance of a table/stand on which the table cloth is placed)

function radialGradient() {

  noStroke();

  let outer = color(235);

  let inner = color(195);

  for (let i = Math.max(ellipseW, ellipseH); i > 0; i--) {

  const step = i / Math.max(ellipseW, ellipseH);

  const colour = lerpColor(inner, outer, step);

  fill(colour);

  ellipse(ellipseX, ellipseY, step * ellipseW, step * ellipseH);

}

}

​

// Drape/Weight graph and texts

function graph() {

  stroke(120);

  strokeWeight(1);

  line(width/2, 40, width/2, 80);

  line(width/2-10, 50, width/2, 40); 

  line(width/2, 40, width/2+10, 50);

  line(width/2, 360, width/2, 320);

  line(width/2-10, 350, width/2, 360);

  line(width/2, 360, width/2+10, 350);

  line(70, height/2, 90, height/2);

  line(80, height/2-10, 70, height/2);

  line(70, height/2, 80, height/2+10);

  line(330, height/2, 310, height/2);

  line(320, height/2-10, 330, height/2);

  line(330, height/2, 320, height/2+10);

  noStroke();

  textAlign(CENTER, CENTER);

  fill(120);

  textFont(graphFont);

  text('L I G H T   W E I G H T', width/2, 20);

  text('H E A V Y   W E I G H T', width/2, 380);

  textAlign(RIGHT, CENTER);

  text('S T I F F', 55, height/2);

  textAlign(LEFT, CENTER);

  text('D R A P E Y', 335, height/2);

}

​

// fabric name text that appears in the center depending on its drape and weight on the graph

function fabricName() {

  push();

  noStroke();

  textAlign(CENTER, CENTER);

  fill(245);

  textFont(graphFont);

  blendMode(ADD);

  text(fabricString, width/2, height/2);

  pop();

}

​

// to save the fabric form

function keyPressed() { 

  save('fabric-look.png');

}