[Map]

/*

[Sky][Muse]

"Map no.1"

​

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

Length: 2 minutes

​

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

https://www.margaretnoble.com/

​

Special thanks to Processing Forum and many others!

Credits to code inspirations and assistance from:

https://twitter.com/ntsutae/status/1314664241048162304

enz0

Mikołaj Michalak

YuepingWang

Shuan

Brendan Canavan

*/

​

//net of circles

let y = 0;

let waitx;

let waity;

​

//red circle with trails variables

let px,py

let angle;

let radius = 50;

let x;

let a, b;

let extraCanvas2; //create a "2nd canvas" variable

​

//red circle with NO trails variables

let px2, py2;

let angle2;

let radius2 = 50;

let x2;

let a2, b2;

​

//black road map variables

let t = 0;

let w;

let extraCanvas; //create a "2nd canvas" variable

​

​

​

//line variables

let p1x;

let start = false;

let fade = 255;

let c;

​

​

//WORDS

const word = 'NEVER';

const mouseCursorText = "FINI";

const grid = [];

​

​

'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) 

​

​

let timer = 0;

let startProgram = false;

let loaded = false;

​

​

​

​

function setup() {

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

        loaded = true;

        beginButton()

    });

​

    createCanvas(windowWidth, windowHeight);

​

  //black road map 

  w = width; 

  extraCanvas = createGraphics(windowWidth, windowHeight);//create 2nd canvas same size as 1st

  extraCanvas.clear(); //make 2nd canvas "see through"

  extraCanvas.strokeWeight(5);

​

//circle frame 

growtall = height;

​

//red circle with trails

extraCanvas2 = createGraphics(width,height);//create 2nd canvas same size as 1st

extraCanvas2.clear(); //make 2nd canvas "see through"

angle=0;  

​

//red circle with NO trails 

angle2=0; 

//line variables

p1x = width/2+30;

p1y = height/2;

p2x = p1x;

p2y = height/2; 

​

  makeGrid();

  //noCursor();

​

    console.time('time')

    console.timeEnd('time')

    imageMode(CENTER);  

}

​

​

function beginButton() {

    let col = color(0);

    let col2 = color(245,245,220);

    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() {

​

    background(245,245,220);

​

​

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

        showLoading();

    }

​

    //start automations & sound when button pressed 

    else {

        //start timer 

​

background (245,245,220);

//COLOR MAP GRID START

if ((timer>89)&&(timer<105)){     

  push();

  fill (245,245,220);   

  rect (width/2,height/2,width,height);   //background?

  colorMode(HSB);

  const step = 15;

  const rad = 14;

  for(y = 0; y < windowHeight+30; y += step){

    for(x = 0; x < windowWidth+30; x += step){

      //use a 3d perlin noise of noise(x, y, time)

      const val = noise(x/mouseX, y/mouseY, frameCount / 100);

      c = color(360 * val, 100, 100, 1);//blue/green

        if (val > 0.43 && val < 0.5){

        stroke(c);

        noFill();

      } else {

        noStroke();

        fill(c);

      }

       ellipse(x, y, rad, rad);

    }

  } 

pop();  

}

  //COLOR MAP GRID END

​

  //ending line animations  

   //ROTATED RECT()

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

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

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

  rotate(radians(mouseX)); //rotate pixel grid system with mouseX

  strokeWeight(1);      

  stroke(128,0,32);     

  rect (0,0,300,1);

  rect (0,0,1,300); 

    fill (128,0,32);  

    textAlign(LEFT);    

    textSize (200);

    noStroke();

    text ('this',0,-100); 

    text ('way',0,100);

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

}

​

//end words     

if (timer > 104){

    textAlign(CENTER);

  drawWordAtCursor();

}

    if (timer > 106){ 

  displayWordsOnAGrid()   

    }   

//  BLACK GRID PATTERN  

    if ((timer>50)&&(timer<84)){  

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

    extraCanvas.background(245,245,220, limit);

    //call extra clear canvas and put green rect on it

    image(extraCanvas, width/2, height/2); 

    t++;

  for (let i = 99; i > 0; i--) {

​

        let x = int(random(100)) * 18;

        let y = int(random(100)) * 18;

​

        for (let j = 40; j > 0; j--) {

            n = noise(x / w, y / w + t / w, dist(x, y, w / 2, w / 2) / w);

            n *= 50;

            n = int(n);

            d = n % 4 * TAU / 4;

            x += cos(d) * 6; //3 = lines

            y += sin(d) * 6; //3 = lines

          if ((timer>60)){

             extraCanvas.strokeWeight(mouseY/4);

             extraCanvas.stroke(0,157,148,1);

           } 

           if ((timer>64)){

             extraCanvas.strokeWeight(mouseY/4);

             extraCanvas.stroke(mouseX,157,148,1);

           } 

           if ((timer>68)){

             extraCanvas.strokeWeight(mouseY/4);

             extraCanvas.stroke(128,0,32,1);

           }

            if ((timer>72)){

             extraCanvas.strokeWeight(mouseY/4);

             extraCanvas.stroke(0,0,255,1);

           }

           if ((timer>76)){

           extraCanvas.strokeWeight(mouseY/4);

           extraCanvas.stroke(0,1);

           } 

​

          extraCanvas.point(x, y);

                   }

     }

    }

//  END black grid pattern

​

​

  //BEGIN RED CIRCLE WITH TRAILS  

  if (timer<30){    

  push();

  image(extraCanvas2, width/2, height/2);

  extraCanvas2.rectMode(CENTER);

  extraCanvas2.fill(0,15); //start with 15 opacity for pretty trail

  extraCanvas2.rect(width/2,height/2,width,height);

  a=mouseX;

  b=mouseY;

  radius=sqrt(sq(a/2)+sq(b/2));

  angle--;

  extraCanvas2.fill(245,245,220,70);

  extraCanvas2.noStroke();

  px = 360+ cos(radians(angle))*(radius)/2;

  py = 240 + sin(radians(angle))*(radius)/2;

  extraCanvas2.fill(245,245,220,100);

  extraCanvas2.ellipse (px, py, radius/10-5, radius/10-5);

  if ((timer>3)&&(timer<6)){  

  extraCanvas2.ellipse (py, px, radius/10-5, radius/10-5);    

  } 

​

  if ((timer>6)&&(timer<8)){  

  extraCanvas2.fill(245,245,220); 

  extraCanvas2.ellipse (py, px+50, radius/10-5, radius/10-5);

  extraCanvas2.fill(0,157,148,50);  

  extraCanvas2.ellipse (px+150, py+50, radius/10-5, radius/10-5);   

  }   

   pop();

  } 

//END RED CIRCLE WITH TRAILS  

  //BEGIN RED CIRCLE WITH NO TRAILS

  if ((timer>65)&&(timer<108)){   

  a2=mouseX;

  b2=mouseY;

  radius=sqrt(sq(a2/2)+sq(b2/2));

  angle2--;

  noStroke();  

  px2 = 360+ cos(radians(angle2))*(radius)/2;

  py2 = 240 + sin(radians(angle2))*(radius)/2;

  fill (128,0,32);

  if ((timer>68)&&(timer<84)){  

  fill(245,245,220);

  } 

  if ((timer>83)&&(timer<98)){

  fill(0);

  } 

  if ((timer>94)){

  noFill();

  } 

  ellipse (px2, py2, radius/10-5, radius/10-5);

  } 

  //END RED CIRCLE WITH NO TRAILS 

​

        //middle circle cluster

      if ((timer>49)&&(timer<61)){

          strokeWeight(mouseY)

          stroke (0,mouseY/4);

          noFill()      

        ellipse(mouseX, mouseY, 1000, 1000);

        ellipse(mouseX, mouseY, 1100, 1100);

        ellipse(mouseX, mouseY, 1200, 1200);

        ellipse(mouseX, mouseY, 1300, 1300);

        ellipse(mouseX, mouseY, 1400, 1400);

        ellipse(mouseX, mouseY, 1500, 1500);

        ellipse(mouseX, mouseY, 1600, 1600);

        ellipse(mouseX, mouseY, 1700, 1700);

        ellipse(mouseX, mouseY, 1800, 1800);

        ellipse(mouseX, mouseY, 1900, 1900);

        ellipse(mouseX, mouseY, 2000, 2000);

        ellipse(mouseX, mouseY, 2100, 2100);

        ellipse(mouseX, mouseY, 2200, 2200);

        ellipse(mouseX, mouseY, 2300, 2300);

        ellipse(mouseX, mouseY, 2400, 2400);

        ellipse(mouseX, mouseY, 2500, 2500);

        ellipse(mouseX, mouseY, 2600, 2600);      

    }     

      //last circle cluster

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

          strokeWeight(mouseY)

         // stroke (0,157,148,mouseY);

          stroke (0,mouseY/4);

          noFill()      

        ellipse(mouseX, mouseY, 1000, 1000);

        ellipse(mouseX, mouseY, 1100, 1100);

        ellipse(mouseX, mouseY, 1200, 1200);

        ellipse(mouseX, mouseY, 1300, 1300);

        ellipse(mouseX, mouseY, 1400, 1400);

        ellipse(mouseX, mouseY, 1500, 1500);

        ellipse(mouseX, mouseY, 1600, 1600);

        ellipse(mouseX, mouseY, 1700, 1700);

        ellipse(mouseX, mouseY, 1800, 1800);

        ellipse(mouseX, mouseY, 1900, 1900);

        ellipse(mouseX, mouseY, 2000, 2000);

        ellipse(mouseX, mouseY, 2100, 2100);

        ellipse(mouseX, mouseY, 2200, 2200);

        ellipse(mouseX, mouseY, 2300, 2300);

        ellipse(mouseX, mouseY, 2400, 2400);

        ellipse(mouseX, mouseY, 2500, 2500);

        ellipse(mouseX, mouseY, 2600, 2600);      

    } 

​

​

  //shape background for x's

    noStroke(); 

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

    fill (255,0,0,mouseY);  

    ellipse (width/2,height/2,width/2+width/4,height);  

    fill (245,245,220); 

    stroke(0);

    strokeWeight(50); 

    ellipse (width/2-width/4,height/2,width,height);

    noStroke();

    fill (0,157,148,100); 

    ellipse (width/2+width/4,height/2,width/2+width/4,height);  

    }   

  //X Grid

  if ((timer>20)&&(timer<45)){

​

        for (let y=0; y<height; y=y+50){      

         for (let x=width/20; x<width; x=x+width/20) {

          push()

          textAlign(CENTER, CENTER);

          let angle = Math.atan2(mouseY-y, mouseX-x);

          translate(x,y);

          rotate(angle);

          textSize(30);   

          fill (255,0,0); 

          strokeWeight(2); 

          stroke (255,0,0);

          if ((timer>25)&&(timer<36)){

          fill (255,0,0,2);

          strokeWeight(mouseX/7);     

          stroke (0,mouseY);  

          } 

          if (timer>35){ 

          fill (245,245,220,0); 

          strokeWeight(2);  

          stroke(0);  

          textSize(mouseX);

          }  

         text('x',0,0);  

         pop()  

      }

    }

  } //end x grid    

  //opening line animations 

   //ROTATED RECT()

if ((timer>5)&&(timer<9)){      

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

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

  rotate(radians(mouseX)); //rotate pixel grid system with mouseX

  strokeWeight(1);      

  stroke(245,245,220);      

  rect (0,0,300,1);

  rect (0,0,1,300); 

    fill (245,245,220); 

    textAlign(LEFT);    

    textSize (80);

    noStroke();

    text ('are',0,-75); 

    text ('you',0,75);

    text ('here',0,225);

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

}     

//opening text  

    if ((timer>-1)&&(timer<6)){

    noStroke();

    //fill (255,0,0);

    fill (245,245,220);   

    textAlign(LEFT);    

    textSize (mouseY);

    text ('x',width/2-40,height/2);

    fill (255,0,0);   

    //textSize (40);  

    text ('you are',width/2-40,height/2-40);  

    text ('here',width/2-40,height/2+40);   

    }

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

    //  p1x = width;

     // fade = fade - 6;  //fade x and lines  

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

      strokeWeight(1);

      if ((timer>8)&&(timer<11)){ 

      stroke(255,0,0,i);  //red line loop

      }

      else if ((timer>10)&&(timer<15)){

      stroke (245,245,220,i); //white

      } 

      else if ((timer>14)&&(timer<20)){

      strokeWeight(mouseY/8); 

      stroke (0,157,148,10);    //aqua  line loop light

      }

      else if (timer>20){ 

      stroke (0,0); //invisible

      } 

      line (width,height/2,i-mouseX,i);

      if ((timer>44)&&(timer<51)){

        //stroke(0,157,148,i);

        stroke(0,i);

        line (0,i,width,i/2); //aqua line loop

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

        fill(0,157,148,mouseX/20);

        ellipse(i,mouseY,i,height);

        //fill (0,157,148,1);

        fill(255,0,0,mouseX/30);

        rect (0,height/2,mouseX,i);

        fill(0,mouseX/30);

        rect (width/2,0,mouseX*-1,i);

       }      

     }  //close for loop

   }

//middle text 

if ((timer>28)&&(timer<35)){

    textSize (mouseX);  

    fill(245,245,220);

    noStroke();

    text ('in the',width/4,mouseY/2-75);  

    text ('distance',width/4,mouseY/2+75);  

    }     

else if ((timer>37)&&(timer<43)){ 

    stroke(0,157,148,50);

    textSize (mouseY);

    fill(0,157,148);

    text ('bird',0,height/2-75);

    text ('eyes',0,height/2+75);

    }

 else if ((timer>46)&&(timer<51)){

    textSize (mouseX);  

    noStroke();

    fill(255,0,0,150);

   text ('corners',mouseX+100,height/2-100);

   text ('turned',mouseX+100,height/2+100);

      }

 else if ((timer>64)&&(timer<69)){

    textSize (mouseX);  

    fill(128,0,32);

    noStroke();

    text ('drifting',mouseX,mouseY+200);  

  }

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

 textSize (mouseX); 

 fill(245,245,220);

 noStroke();

 text ('in view',mouseX,mouseY-height/6);

 //text ('it is',mouseX,mouseY+height/6);

  }     

​

​

//circles     

    noFill();

    stroke(245,245,220);  

    if (timer<10){  

    waitx = width/2;

    waity = height/2; 

    }

    else if((timer>10)&&(timer<28)){

    noStroke();

    fill (245,245,220); 

    if (timer<15){

    textAlign(LEFT);  

    textSize (20);  

    text ('where does',mouseX-80,mouseY-40);      

    text ('the light shine?',mouseX-80,mouseY-20);

    //text ('shine?',mouseX-80,mouseY+10);  

    //textSize(200);  

    //text ('X',mouseX,mouseY); 

    }

    noFill(); 

    stroke(245,245,220,mouseY); 

    strokeWeight(mouseY/8); 

    waitx=constrain(mouseX,0,width);

    waity=constrain(mouseY,0,width);

    } else {

    stroke(0,0);//hide ellipses

    } 

    strokeWeight(5);

    if((timer>10)&&(timer<14)){

    strokeWeight (mouseY/5);

    }

    if ((timer>8)&& (timer<20)){      

    noStroke();   

    } 

    if((timer>20)&&(timer<28)){

    strokeWeight (mouseY/5);

    } 

    if((timer>10)&&(timer<15)){

    stroke(0);

    }   

    if((timer>24)&&(timer<28)){

    stroke(255,0,0,100);

    }   

    ellipse(waitx, waity, 300, 300);

    ellipse(waitx, waity, 400, 400);

    ellipse(waitx, waity, 500, 500);

    ellipse(waitx, waity, 600, 600);

    ellipse(waitx, waity, 700, 700);

    ellipse(waitx, waity, 800, 800);

    ellipse(waitx, waity, 900, 900);

    ellipse(waitx, waity, 1000, 1000);

    ellipse(waitx, waity, 1100, 1100);

    ellipse(waitx, waity, 1200, 1200);

    ellipse(waitx, waity, 1300, 1300);

    ellipse(waitx, waity, 1400, 1400);

    ellipse(waitx, waity, 1500, 1500);

    ellipse(waitx, waity, 1600, 1600);

    ellipse(waitx, waity, 1700, 1700);

    ellipse(waitx, waity, 1800, 1800);

    ellipse(waitx, waity, 1900, 1900);

    ellipse(waitx, waity, 2000, 2000);

    ellipse(waitx, waity, 2100, 2100);

    ellipse(waitx, waity, 2200, 2200);

    ellipse(waitx, waity, 2300, 2300);

    ellipse(waitx, waity, 2400, 2400);

    ellipse(waitx, waity, 2500, 2500);

    ellipse(waitx, waity, 2600, 2600);

​

​

​

      //timer visible 

    // noStroke();

    // fill (0,255,0);  

    // textSize(30);

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

    } //close timed events/experience screen

​

} //close draw

​

​

function makeGrid() {

  const stepX = 100;

  const stepY = 50;

​

  for (let x = 0; x < width + stepX; x += stepX) {

    for (let y = 0; y < height + stepY; y += stepY) {

      grid.push(createVector(x, y));

    }

  }

}

​

function displayWordsOnAGrid() {

  const mouseVec = createVector(mouseX, mouseY);

  const maxDistance = sqrt(height * height + width * width);

  const wordMovementDiameter = 120;

  for (let wordVec of grid) {

    const distance = p5.Vector.dist(wordVec, mouseVec);

    const size = map(distance, 0, maxDistance, 32, 6);

    const angle = p5.Vector.sub(wordVec, mouseVec).heading();

    const maxDistVecToAdd = p5.Vector.fromAngle(angle, wordMovementDiameter);

    const newWordVec = wordVec.copy().add(maxDistVecToAdd);

    push();

    translate(newWordVec.x, newWordVec.y);

    rotate(angle);

    textSize(size);

    noStroke();

    fill(0,157,148,mouseX/2);

    text(word, 0, 0);

    stroke(255,0,0,mouseY/2);

    strokeWeight(10); 

    line (0,0,width,height);

    pop();

  }

}

​

function drawWordAtCursor() {

  textSize(32);

  fill(255,0,0);

  text(mouseCursorText, mouseX, mouseY-32);

}

​

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(245,245,220);

    textAlign(CENTER, CENTER);

    rectMode(CENTER);

    fill(0); //line (rects) color

    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('Map no.1', width / 2 + width / 4, height / 2 + 80);

    textSize(14);

    text('Directions: Move the visuals in time with the sound.', width / 2, height - height / 7);

    fill(255);

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

    textSize(10);

    fill(0);

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

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

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

}