[Gradations] - no.1

/*

[Sky][Muse]

"Gradient #1"

​

Visual music experience made for people waiting at the airport (or elsewhere).

Length: 

​

Visual design, programming, and music composition by [Margaret Noble] [2020]

Special thanks to Processing Forum and many others!

https://www.margaretnoble.com/

*/

​

'use strict';

​

//sound

var song;

var fft;

var button;

var smoothing = 0.9; // Smoothing of audio data

var binCount = 256; // Binning parameter (256/512/1024/2048) 

​

var actRandomSeed = 0;

var tileCount = 15;

var circleAlpha = 130;

var circleColor;

​

let timer = 0;

let startProgram = false;

let loaded = false;

​

//generative shape gradient variables

var stepX;

var stepY;

let fade = 255;

let fade2 = 255;

let fade3 = 255;

let fade4 = 255;

let fade5 = 255;

let centercolor = 30;

​

//wave variables

let noiseMax = 1;

let zoff = 0;

let ca, cb, cc;

let ox, oy;

let MAX;

​

//automation variables

let circshrink;

let rectmove;

let rectmove2;

let rectmove3;

let shrink;

let circchange;

let circchange2;

let grow = 5;

let leftin; 

let rightin;

let circright;

let circright2;

let circup;

let circshrink2;

let start = false;

let spin = 0; 

let go;

let go2;

let fade7 = 255;

let on = false;

let spin2 = 0;

let down = -5;

let guy = 5;

let grow5;

let lft = 0;

​

​

function setup() {

​

    song = loadSound('GradationsV9.mp3', () => {

        loaded = true;

        beginButton()

    });

    //createCanvas (320,480);  //mobile size

    createCanvas(windowWidth, windowHeight);

​

      //wave stuff

  angleMode(DEGREES);

  ca = color("#0CCBCFAA");

  cb = color("#FE68B5AA");

  cc = color("#EAF21B");

  ox = width / 2;

  oy = height;

  MAX = width > height ? width : height;

​

  //automation variables

  circshrink = width*2;

  rectmove = height*-.25;

  rectmove2 = height*1.25;

  rectmove3 = width*2;

  shrink = width/2;

  circchange = width/2;

  circchange2 = height;

  leftin = width*-.25;

  rightin = width*1.25;

  circright = -5;

  circright2 = -405;

  circup = height/2;

  circshrink2 = 5;

  go = width;

  go2 = height/2;

  grow5 = 0;

    console.time('time')

    noSmooth(); //does this improve running?

    console.timeEnd('time')

​

circleColor = color(0, 0, 0, circleAlpha);

​

​

}

​

​

function beginButton() {

    let col = color(0);

    let col2 = color(255);

    button = createButton("begin");

    button.mousePressed(beginExperience);

    button.position(width / 2 - 30, height - 40);

    button.size(60, 25);

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

    button.style("color", col2);

​

}

​

function draw() {

  if ((timer<86)){ //change backgrounds ti more trails after 86?

  //backgrounds - some with trails

  let trails = map (mouseX,0,width,0,50); 

  rectMode (CENTER);

  if ((mouseY<height)&&(mouseY>height/2+height/4)){

  background (255,trails);

  } 

   else if ((mouseY<height/2+height/4)&&(mouseY>height/2)){

   background (255,0,0,trails);

  }

   else if ((mouseY<height/2)&&(mouseY>height/4)){

   background (0);

  } 

  else{

    background (154,255,50);

  }

  }

 if (timer >99){    

  background (mouseX,mouseY*.5,mouseX);

  }

​

​

    if (startProgram == false || loaded == false) {

        showLoading();

    }

​

    //start timer for automations & sound when button pressed 

    else {

​

​

​

//upper right quadrant:  color changing square growth

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

if (timer<26){    

colorMode (RGB,100);

let fade4 = map (mouseY,0,255,height/2,0);  

fill (100,75,0,fade4);

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

}//red

else if ((timer>26)&&(timer<40)){

fill (255,0,0,10);

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

} 

else if ((timer>40)&&(timer<60)){

fill (0,0,255,10);

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

} 

else if ((timer>60)&&(timer<80)){

fill (0,mouseY,255,10);

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

}

else if ((timer>80)&&(timer<117)){

fill (mouseX,mouseY,105,10);

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

} 

}//close upper right quadrant 

//upper moving yellow rect  

colorMode (RGB,100);    

if (mouseY<height/8){

if (timer<40){  

fill (255,255,0,10);

}

else if(timer>40){

fill (mouseX,mouseY,0);

} 

rect(width/2-mouseX,height/2,width,height);

}

​

//all over shade: waves 1

  //noStroke();   

  fill(lerpColor(ca, cb, abs(cos(zoff * 200))));

  beginShape();

  for (let t = 0; t < 360; t++) {

    let xoff = map(cos(t), -1, 1, 0, noiseMax);

    let yoff = map(sin(t), -1, 1, 0, noiseMax);

​

    let n = noise(xoff, yoff, zoff);

    let r = map(n, 0, 1, 0, height * 1.5);

    let x = r * sin(t);

    let y = r * cos(t);

​

 let c = lerpColor(ca, cb, n);

  vertex(mouseX+y,mouseY+x);

  }

  endShape(CLOSE);

zoff += 0.0005; //end waves 1

  //all over shade: waves 2

  fill(lerpColor(ca, cb, abs(cos(zoff * mouseX/100))));

  beginShape();

  for (let t = 0; t < 60; t++) {

    let xoff = map(cos(t), -1, 1, 0, noiseMax);

    let yoff = map(sin(t), -1, 1, 0, noiseMax);

​

    let n = noise(xoff, yoff, zoff);

    let r = map(n, 0, 1, 0, height * 1.5);

    let x = r * sin(t);

    let y = r * cos(t);

​

 let c = lerpColor(ca, cb, n);

  vertex(mouseX+y,mouseY+x);

  }

  endShape(CLOSE);

zoff += 0.0005; //end waves 2

​

  //all over shade: begin waves 3 

if (mouseX<width/4){  

  colorMode (RGB,100);

  fill(255,30);

  push();

  translate(ox, oy);

  beginShape();

  for (let t = 0; t < 360; t++) {

    let xoff = map(cos(t), -1, 1, 0, noiseMax);

    let yoff = map(sin(t), -1, 1, 0, noiseMax);

​

    let n = noise(xoff, yoff, zoff);

    let r = map(n, 0, 1, 0, height * 1.5);

    let x = r * sin(t);

    let y = r * cos(t);

  vertex(mouseY+y, mouseX+x);

  }

  endShape(CLOSE);

  zoff += 0.0005;

 pop(); 

}

//end waves 3

​

///black circle party 1

if ((timer>73)&&(timer<100)){     

  push();

  translate(width / 2, height / 2);

  //var circleResolution = int(map(mouseY, 0, height, 2, 80));

  var radius = mouseX - width / 2;

colorMode (RGB,100);

  strokeWeight(10);

  fade5 = 0;

  fade7 = 0;

  for (var i = 0; i <= width; i+=10) {

    var x = cos(i) * radius;

    var y = sin( i) * radius;

    stroke(0);

    fill (0);

    if ((timer>79)&&(timer<86)){

    strokeWeight(1);  

    //noStroke();

    stroke (0); 

    point( y, x);

    fill (0,0);

    strokeWeight(10); 

    point( x, y); 

    strokeWeight(1);    

    rect (x,y,height,width/2);    

    }

    else if ((timer>86)&&(timer<93)){

    stroke (255,10);

    strokeWeight(5);    

    point( x, y); 

    point( y, x);   

    point( x+width/4, y); 

    point( x-width/4, y);         

   }  

  else if ((timer>93)&&(timer<97)){ 

    stroke (0,2);

    strokeWeight(mouseY);   

    point( x, y); 

    point( y, x+random(5)); 

    point( y, x-random(5)); 

    point( y, x+height/random(5));

    point( y, x-height/random(5));

    //stroke (255,0,0,10);

    point( y+random(5), x+height/random(5));  

  } 

    else if ((timer>97)&&(timer<100)){  

    stroke (255,2);

    strokeWeight(mouseX);   

    point( x, y); 

    point( y, x+random(5)); 

    point( x+width/4, y); 

    point( y, x+height/random(10));

    point( x+width/4, y-height/2);  

    point( x-width/2, y+height/random(10));

    point( y+random(5), x+height/random(5));  

  }   

    point( x, y);

    //rect (x,y,100,100);

  }

  pop();        

}       

​

​

// //bottom half

//triangles

if ((mouseX>0)&&(mouseX<width)&&(mouseY<height)&&(mouseY>height-height/6)){

if ((timer>26)&&(timer<30)){  

colorMode(RGB,100); 

fill (255,10);

triangle (mouseX,0,width/2,height,width,0); 

} 

else if ((timer >30) && (timer < 38)||(timer>86)&&(timer<99)){

fill (255,mouseY,0,10); 

triangle (mouseY,0,width/2,height,width*2,mouseY);  

}

else if ((timer >39)&&(timer<50) ||(timer>86)&&(timer<99)){

fill (255,mouseX,105,5);  

triangle (mouseX,mouseY,width/2,mouseX,width*2,0);  

}

else if ((timer >50) && (timer<73)||(timer>86)&&(timer<99)){

fill (255,255,0,10);  

triangle (mouseX,mouseY,width/2,mouseX,width*2,mouseY); 

}

else if ((timer>73)&&(timer<99)){ 

colorMode(RGB,100); 

fill (255,mouseY/20);

triangle (mouseX,0,width/2,height,width,0); 

} 

else if ((timer >86) && (timer < 100)){

fill (0,0,mouseY,20); 

triangle (mouseY,0,width/2,height,width*2,mouseY);  

}

}//close far right bottom

​

​

//black sheer rect  

if ((mouseY<height/2)&&(mouseY>height-height/6)){ 

fill (mouseY,20); 

rect (mouseX,height/2,width-10,height-10);  

}

​

//black2 sheer rect     

if ((mouseY<height/4)&&(mouseY>height-height/6)){     

    fill (0,50);

    rect (width/2,mouseY,width-10,height-10);

}     

  // //automations

​

//RECT FRAMES       

​

//rect moving down 

if (timer>100){     

​

stroke (255,fade4); 

strokeWeight(6);    

fill (0,centercolor);

rect (width/2,rectmove,width,height/2);

rectmove = rectmove + .5;

// //rect moving up

fill (0,centercolor); 

rect (width/2,rectmove2,width,height/2);

rectmove2 = rectmove2 - .5;

} //close rect frames 

​

// circle party 2

if ((timer>100)&&(timer<116)){      

  push();

  translate(width / 2, height / 2);

  var radius = mouseX - width ;

​

  strokeWeight(10);

​

  for (var i = 0; i <= width; i+=10) {

    var x = cos(i) * radius;

    var y = sin( i) * radius;

    rotate(radians(spin)); //rotate pixel grid system with spin variable

    if (radius<width){

    //stroke (255); 

    spin = spin - 0.009; //assignment operator

    }

    stroke(0,50);

    point( x, y);

    //line (x,y,x+mouseX/2,y+mouseX/2);

    //line (x,y,x+width/4,y+height/4);

  }

  pop();        

}         

​

//starting circle frame 

  fill (0,0);

  stroke(255,fade3);

  strokeWeight (300);

  ellipse(width/2,height/2,circchange2,circchange2);

  fill (255,fade3);

​

  //adjustment for larger screens

  if (width>750){

  fill (0,0);

  stroke(255,fade3);

  ellipse(width/2,height/2,circchange2*1.5,circchange2*1.5);

  ellipse(width/2,height/2,circchange2*2,circchange2*2);

  }

  //timer for large circle frame fade     

    if (timer>13){  

    circchange2 = circchange2 + 1;

    if (circchange2 > 850){

    fade3 = fade3 - .5;

  }

}

​

​

//LARGE CIRCLE FRAME COMES BACK IN      

if (timer>60){

  fade3 = fade3 + 5;

  circchange2 = circchange2 - 2;

  if (circchange2 < height){

    circchange2 = height;

  }

} 

colorMode (RGB,100);

​

//Line

// if ((timer>46)){

// stroke (255,fade7);

// strokeWeight (1);

// fill (0,fade7);  

// line (width,go2,go,height/2);

// go = go - 1;

// if (go<width/2){

//  go = width/2;

//  fade7=0;

// }

// }

​

      //single black dot

if ((timer >  59)){

  strokeWeight(5);

  stroke(0);

  fill (0,0);

//  if (timer>60){

//    fade5=0;

// }  

  down = down+1;

  if (down>height/2){

  strokeWeight(5);

  stroke (0);

  fill (0,10);

  guy = guy + 3;

  down = height/2;  

  } 

  ellipse (width/2,down,guy,guy);

}     

//small circle animations     

​

  //circle pattern

  push();

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

  randomSeed(actRandomSeed);

  if ((timer > 46) && (timer<60)){

  stroke(0);

  fill (0,10);  

  strokeWeight(1);

  } 

  else if ((timer > 60) && (timer<73)&&(down<height/2)){

  stroke(255);

  fill (255); 

  strokeWeight(5);  

  } 

    else if ((timer> 86)){

    stroke(0);

    fill (0,10);

    strokeWeight(.5);

  }

  for (var gridY = 0; gridY < tileCount; gridY++) {

    for (var gridX = 0; gridX < tileCount; gridX++) {

​

      var posX = width / tileCount * gridX;

      var posY = height / tileCount * gridY;

      if ((timer > 46) && (timer<60)){

      var shiftX = random(-mouseX, mouseX) / 20;

      var shiftY = random(-mouseX, mouseX) / 20;

      }

      else if ((timer > 60) && (timer<73)){

      var shiftX = random(-mouseX, mouseY) / 10;

      var shiftY = random(-mouseY, mouseX) / 5;

      }

      if ((timer > 46) && (timer<60)){

      line(posX + shiftX, posY + shiftY, posX + shiftX*100, posY + mouseY / 15);

      }

      else if ((timer > 60) && (timer<73)){

      ellipse(posX + shiftX, posY + shiftY, 5, 5);

      } 

      else if ((timer > 86) && (timer<100)){

      line(posX + shiftX, posY + shiftY, posX + shiftX*100, posY + mouseY / 5);

      } 

    }

  } 

  pop();      

if (timer>46){

​

fade4 = fade4-5; //fade traveling rectangle frames

centercolor = centercolor - 1;

strokeWeight (5);

stroke(255,fade5);      

fill (255,0);     

ellipse (circright,height/2,circshrink2,circshrink2);

ellipse (circright-100,circup/2,5,5);

ellipse (circright-200,circup,5,5); 

ellipse (circright-300,circup,5,5);

ellipse (circright-400,circup,5,5);

strokeWeight (1); 

stroke(255,fade5);

on = true;  

​

if (on == true){  

circright = circright +1;

}

if (timer>50){

on = false;

circup = circup - .5;

 }

if ((go <= circright-1)){

  circshrink2 = circshrink2 + 1;

  fade5 = fade5 - 1;

  fade7 = fade7 - 1;

  go2 = go2-1;

} 

}

​

​

    //center spinner      

  push(); //start temporary change to grid system

  translate (width/2,height/2); // move 0,0 position to 100,100

    rectMode (CENTER);    

​

  if ((timer>26)&&(timer<47)){

  rotate(radians(spin2)); //rotate pixel grid system with spin variable

  noStroke();

  fill (0); 

​

  if ((timer>32)&&(timer<46)){

  spin2 = spin2 - 10;

  }

​

  grow5 = grow5 + 1;  

  rect (lft,0,grow5,1);

  rect (lft-100,0,grow5,1); 

  rect (lft+100,0,grow5,1); 

  rect (lft+200,0,grow5,1); 

  rect (lft-200,0,grow5,1); 

  rect (lft+300,0,grow5,1); 

  rect (lft-300,0,grow5,1);   

  if (grow5>50){

    grow5 = 50;

  }

 if (timer>28){

   lft = lft - .5;

   //spin2 = spin2 + 14;

 } 

  pop(); //stop temporary change to grid system

    }

​

  //timer & other stuff reports 

    noStroke(); 

    fill (255); 

    textSize (20);

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

    //text ('circchange2='+circchange2,width/2,height/2+30);  

    //text ('height='+height,width/2,height/2+60);  

    } //close timed events/experience screen

​

} //close draw

​

​

​

​

function beginExperience() {

    setInterval(() => {

        timer++;

    }, 1000)

    button.remove();

    if (song.isPlaying()) {

        // song.isPlaying() returns a boolean

        song.jump();

    } else {

        song.play();

    }

​

​

​

    startProgram = true;

}

​

​

function touchMoved() {

    return false; //this prevents dragging screen around on mobile

}

​

​

function showLoading() {

    background(239,253,95);

    textAlign(CENTER, CENTER);

    rectMode (CENTER);

    stroke(0);

    fill(0);

    rect (width/2,height/2,1,height/2);

    rect (width/2,height/2,height/2,1);

    noStroke();

    fill(0);

    textSize(40);

    text('[Sky]', width / 4, height / 2 - 120);

    text('[Muse]', width / 4, height / 2 - 80);

    textSize(25);

    text('Gradations', width / 2 + width / 4, height / 2 + 80);

    text('no.1', width / 2 + width / 4, height / 2 + 120);

    textSize(14);

    text('Directions: Move the visuals in response to the sounds.', width / 2, height - height/7);

    fill(255);

    rect (width/2,height-30,58,20);

    textSize(10);

    fill(0);

    text ('loading...', width / 2, height - 30);

}