let num; // i for loop

let o; //for opacity of circles

let col; //colour

let sw; //strokeWeight

let k; //key

let colS;

let c; // temp storage of colour to get rgb values

let colR;

let colG;

let colB;

let s; //size of circle with sin

​

let s1;

let s2;

let s3;

let s4;

​

​

let font;

let line = 'An interactive typographic artwork that helps you slow down and relax.\nBreathe along and meditate with the type. Type in lowercase letters and pick your style\nof visuals and sounds. Press 1 to hide the Style controller.';

​

​

​

​

var typeColor = '#ffffff';

var drawMode = ['One', 'Two', 'Three', 'Four', 'Five'];

var Calm=false;

var Serene=false;

var Gentle=false;

var Peace=false;

var volume = 0.5;

var volumeMax=1;

var volumeMin=0;

var Sounds='Select your sound';

var AboutTheProject=false;

​

​

​

let gui;

var visible = true;

​

​

function preload(){

  s1= loadSound("The Light of Day.mp3");

  s2=loadSound("Short Meditation Music - 3 Minute Relaxation, Calming_cI4ryatVkKw.mp3");

  s3=loadSound("The Mountain_Rk6_hdRtJOE.mp3");

  s4=loadSound(" Tony Anderson - Ember_CfsTfmFNV_c.mp3");

  font=loadFont('SharpGrotesk-Book25.otf');

}

​

​

function setup() {

​

  createCanvas(windowWidth, windowHeight);

​

​

​

  gui = createGui('Style');

  colorMode(RGB);

  sliderRange(0, 50, 1);

  gui.addGlobals('AboutTheProject','BreathingType','drawMode', 'typeColor', 'Sounds','Calm','Serene', 'Gentle', 'Peace');

  sliderRange(0, 1, 0.01);

  gui.addGlobals('volume');

  background(0);

​

}

​

function draw() {

  s1.setVolume(volume);

  s2.setVolume(volume);

  s3.setVolume(volume);

  s4.setVolume(volume);

  if(Calm && !s1.isPlaying()){

    s1.play();

  }

  else if(!Calm && s1.isPlaying()){

    s1.stop();

  }

​

  if(Serene && !s2.isPlaying()){

    s2.play();

  }

  else if(!Serene && s2.isPlaying()){

    s2.stop();

  }

  if(Gentle && !s3.isPlaying()){

    s3.play();

  }

  if(!Gentle && s3.isPlaying()){

    s3.stop();

  }

  if(Peace && !s4.isPlaying()){

    s4.play();

  }

  else if(!Peace && s4.isPlaying()){

    s4.stop();

  }

  push();

  translate(-width / 2, -height / 2);

  scale(2);

​

  // fill(0,10);

  // rect(0,0,width,height);

​

  // let s = 80 * sin(cos(sin(frameCount / 200)));

​

​

  // if (drawMode === 'One') 

  switch (drawMode) {

​

    case 'One':

      fill(0, 10);

      rect(0, 0, width, height);

​

      sw = 0;

      o = 300;

      s = 80 * sin(cos(sin(frameCount / 200)));

      col = color(255, o);

      col = typeColor;

      break;

​

​

    case 'Two':

​

      fill(0, 10);

      rect(0, 0, width, height);

​

      sw = 1;

      o = 300;

      s = 80 * sin(cos(sin(frameCount / 200)));

      col = color(255, o);

      col = typeColor;

      break;

​

​

    case 'Three':

​

      fill(0);

      rect(0, 0, width, height);

​

      sw = 1;

      o = 8;

      c = color(typeColor);

      //  let col = color(255, o);

      col = color(red(c), green(c), blue(c), o);

      colS = color(red(c), green(c), blue(c));

      // col=typeColor;

      s = sin(cos(sin(frameCount / 250)));

      break;

​

​

    case 'Four':

      fill(0);

      rect(0, 0, width, height);

​

      sw = 0;

      o = 10;

​

      c = color(typeColor);

      col = color(red(c), green(c), blue(c), o);

​

      colR = red(c);

      colG = green(c);

      colB = blue(c);

​

      s = sin(cos(sin(frameCount / 250)));

      break;

​

    case 'Five':

​

      fill(0);

      rect(0, 0, width, height);

​

      sw = 1;

      o = 10;

​

      c = color(typeColor);

      col = color(red(c), green(c), blue(c), o);

​

      colR = red(c);

      colG = green(c);

      colB = blue(c);

      s = sin(cos(sin(frameCount / 250)));

      break;

​

  }

 // To find the centre

  // stroke(255);

  // strokeWeight(1);

  //  line(0,0,width,height);

  // line(width,0,0,height);

​

​

  switch (k) {

      case 'a':

      drawA(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

    case 'b':

      drawB(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'c':

      drawC(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'd':

      drawD(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'e':

      drawE(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'f':

      drawF(width / 2 - 30, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'g':

      drawG(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'h':

      drawH(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'i':

      drawI(width / 2 - 20, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

       case 'j':

      drawJ(width / 2 - 60, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

       case 'k':

      drawK(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'l':

      drawL(width / 2 - 20, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'm':

      drawM(width / 2 - 60, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'n':

      drawN(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'o':

      drawO(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'p':

      drawP(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'q':

      drawQ(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

​

    case 'r':

      drawR(width / 2 - 30, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

​

    case 's':

      drawS(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

​

    case 't':

      drawT(width / 2 - 40, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

​

    case 'u':

      drawU(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;  

   case 'v':

      drawV(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

   case 'w':

      drawW(width / 2 - 60, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

      case 'x':

      drawX(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

   case 'y':

      drawY(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

   case 'z':

      drawZ(width / 2 - 50, height / 2 - 90, s, sw, col, colS, colR, colG, colB);

      break;

​

  }

​

​

  pop();

  if(AboutTheProject){

  textFont(font);

  textSize(10);

  textAlign(CENTER,CENTER);

  fill(255);

  textLeading(15);

  text(line, width/2, 40);

  }

}

​

// function keyPressed() {

//   if (key === '1') {

​

//     drawMode = 1;

//   }

//   if (key === '2') {

//     drawMode = 2;

//   } else if (key === '3') {

//     drawMode = 3;

//   } else if (key === '4') {

//     drawMode = 4;

//   } else if (key === '5') {

//     drawMode = 5;

//   }

// }

​

function keyTyped() {

​

  switch (key) {

​

    case 'a':

      k = 'a';

      break;

    case 'b':

      k = 'b';

      break;

    case 'c':

      k = 'c';

      break;

    case 'd':

      k = 'd';

      break;

    case 'e':

      k = 'e';

      break;

      case 'f':

      k = 'f';

      break;

​

      case 'g':

      k = 'g';

      break;

​

       case 'h':

      k = 'h';

      break;

       case 'i':

      k = 'i';

      break;

       case 'j':

      k = 'j';

      break;

       case 'k':

      k = 'k';

      break;

       case 'l':

      k = 'l';

      break;

       case 'm':

      k = 'm';

      break;

       case 'n':

      k = 'n';

      break;

       case 'o':

      k = 'o';

      break;

       case 'p':

      k = 'p';

      break;

       case 'q':

      k = 'q';

      break;

       case 'r':

      k = 'r';

      break;

       case 's':

      k = 's';

      break;

       case 't':

      k = 't';

      break;

       case 'u':

      k = 'u';

      break;

       case 'v':

      k = 'v';

      break;

       case 'w':

      k = 'w';

      break;

       case 'x':

      k = 'x';

      break;

       case 'y':

      k = 'y';

      break;

       case 'z':

      k = 'z';

      break;

    case '1':

      visible = !visible;

      if (visible) gui.show();

      else gui.hide();

      break;

  }

​

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}