​

var dropList = [];

let modVarStem;

let modVarCurve;

let letterColR;

let letterColG;

let letterColB;

let counter = 0;

​

function setup() {

  createCanvas(600, 850);

  // Creates new movement + shape to show next

  for(var i = 0; i < 125; i++) {

    dropList[i] = new Drop();

  }  

}

​

​

​

function draw() {

  background(letterColR-50, letterColG-50, letterColB-50);

  /*

  push();

  fill(letterColR+150, letterColG+50, letterColB+50);

  rect(0,0, 600, 850);

  pop();

  */

  //fill(letterColR-100, letterColG-100, letterColB-100,0.8);

​

  // Generates rain behind letter

  push();

  rotate(PI/-6.0);

  translate(-400,0);

  for(var i = 0; i < 125; i++) {

    dropList[i].show();

    dropList[i].update();

  }

  pop();

  if (counter > 29){

    letterColR = random(255);

    letterColG = random(255);

    letterColB = random(255);

    counter = 0;

  }

  counter += 1;

​

  // To move both letters side by side  

  push();

  translate(180, 320);

  rotate(PI/-6.0);

  scale(-0.5,-0.5);

  letterA(letterColR, letterColG, letterColB);

  pop();

  push();

  translate(180, 320);

  rotate(PI/-6.0);

  scale(1.2,1.2);

  letterA(letterColR, letterColG, letterColB);

  pop();

}

​

​

// To Reuse the Letter

function letterA(letColR, letColG, letColB){

  modVarStem = mouseX * 0.1;

  modVarCurve = mouseX *0.05;

  noStroke();

  beginShape(QUADS);

  fill(letColR, letColG, letColB);

  vertex(0 -modVarStem, 0); //V1 - Expands Left

  vertex(10 + modVarStem, 0); //V2 - Expands Right

  vertex(10 + modVarStem, 400); //V3 - Expands Right

  vertex(0 - modVarStem, 400); //V4 - Expands Left

​

  endShape();

  push();

  beginShape();

  translate(modVarStem,0);

  fill(letColR, letColG, letColB);

​

  vertex(0, 10);

  vertex(0, 0);

  //Expands Top

  bezierVertex(0, 0, 58.5019, -1.6982, 105.9371, 20.2159, 102.508, 18.715); //Outer Arc V1/V2 

  bezierVertex(105.9371, 20.2159, 212.8545, 67.0142, 205.8898, 297.7025, 155.0664, 206.5255 ); // Outer Arc V2/V3

  bezierVertex(205.8898, 297.7025, 205, 380, 290, 400, 280, 373.5608); // Outer Arc V3/V4

  vertex(290, 400);

  vertex(290, 400);

  //Expands Bot

  bezierVertex(170+modVarCurve, 400, 200, 400, 30+modVarCurve, 310, 250, 360); // Inner Arc V5/V6 

  bezierVertex(180+modVarCurve, 310, 190, 120, 40+modVarCurve, 52.0787, 200, 300); // Inner Arc V6/V7 

  bezierVertex(40+modVarCurve, 52.0787,105, 20, 0, 10, 69.9711, 20); 

  /*Original Curve Part

  //Expands Bot

  bezierVertex(293, 400, 200, 400, 193.184, 309.5841, 250, 360); // Inner Arc V5/V6 

  bezierVertex(193.184, 309.5841, 190, 120, 122.8782, 52.0787, 200, 100); // Inner Arc V6/V7 

  bezierVertex(122.8782, 52.0787,105, 20, 0, 10, 69.9711, 20); 

  */

​

  endShape();

  pop();

}

​

function Drop() {

  this.x = random(0, 2*width);

  this.y = random(0, -height);

  let r = map(this.y, 0, 850, 150, 200 );

  let g = map(this.x, 0, 600, 0, 125);

  let b = map(this.y, 0, 850, 100, 0);

​

  this.show = function() {

    noStroke();

    fill(r,g,b, 80);

    rect(this.x, this.y, random(1,5), 100);   

  }

  // Defines Fall Speed

  this.update = function() {

    this.speed = random(5, 20);

    this.gravity = 1.05;

    this.y = this.y + this.speed*this.gravity;  

    // Updates Next Generation

    if (this.y > height) {

      this.y = random(0, -height);

      this.gravity = 0;

    }

  }

}

​

​

function keyPressed() {

  if (key === "s") {

    if(this._renderer.elt.svg !== undefined) {

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

}

​