​

//Move your mouseX across 300 for state change (state 1, state 2)

//Click on the screen for the fireflies to go onscreen/offscreen

​

//State 1: Fireflies are floating randomly around the screen

//State 2: Fireflies condense to form a circular shape in the middle of the screen

​

​

// //let circle ={

// x: random(width},

//           y:random(height)

// }

​

var c1, c2;

let sky; 

let bubbles = [];

let counter = 0;

let clicked = false; /*two different states (1. - on the screen, change with mouse 2. - after clicked, they disappear offscreen, boolean works as an on/off switch)*/

let myFont;

​

function preload() {

  firefly = loadImage('floating light.png'); 

  myFont = loadFont('Quicksand-VariableFont:wght.ttf');

  sky = loadImage('night sky.jpg'); 

}

​

function setup() {

  noStroke();

  colorMode(HSB, 360, 100, 100);

  createCanvas(400, 400);

  textFont(myFont)

​

  //draw firefly bubbles

  for (let i = 0; i < 100; i++) {

    let x = 20 + 30 * i;

    bubbles[i] = new Bubble(x, 200, 40);

  } 

}

​

​

function draw() {

  background(0);

  textSize(30); 

  fill(250, 220, 100);

  text("take a deep breath", 100, 100)

  fill(250, 220, 100, 50); 

  text("take a deep breath", 100, 105)

   image(sky, 0, 0);

  // Set gradient background

  // c1 = color(0, 0, 0);

  // c2 = color(0, 100, 20);

  // setGradient(c1, c2);

  //State 1: Fireflies on screen 

  if (!clicked) {

    for (let i = 0; i < bubbles.length; i++) {

      bubbles[i].move();

      bubbles[i].show();

    }

​

  //Stage 2: Expanding to outside 

    if (mouseX < 300) {

      fill(40);

      for (let i = 0; i < bubbles.length; i++) {

        bubbles[i].movingtooutside();

      }

    }

​

    //Stage 2: Condensed circle version and expand to outside

    if (mouseX > 300) {

      fill(40);

      for (let i = 0; i < bubbles.length; i++) {

        bubbles[i].movingtocenter();

      }

    }

  } 

  else {

    for (let i = 0; i < bubbles.length; i++) {

      bubbles[i].show();

      bubbles[i].movingtobottom();

    }

  }

}

​

function mouseClicked() {

  clicked = !clicked;

  console.log(clicked); 

}

​

class Bubble {

  constructor() {

    this.x = width / 2;

    this.y = height;

    this.radius = 50 / 1.8;

    this.h = 50;

​

    //goal state, or "home" state

    this.homex = random(0, width);

    this.homey = random(0, height);

  }

​

  movingtocenter() {

    this.moveTowardsPosition(width / 2, height / 2, 0.03);

  }

​

  movingtooutside() {

    this.moveTowardsPosition(this.homex, this.homey, 0.03);

  }

​

  movingtobottom() {

    this.moveTowardsPosition(width / 2, windowHeight+50, 0.03);

  }

​

  moveTowardsPosition(x, y, speed) {

    // moves current position towards a goal position

    this.x = lerp(this.x, x, speed);

    this.y = lerp(this.y, y, speed);

  }

​

  move() {

    this.x = this.x + random(-5, 5);

    this.y = this.y + random(-5, 5);

  }

​

  show() {

    fill(50, 50, 100);

    // ellipse( this.x, this.y, 20, 20);  

    image(firefly, this.x, this.y, 44, 44);  

  }

}

​

// function setGradient(c1, c2) {

//     noFill();

//     for (var y = 0; y < height; y++) {

//       var inter = map(y, 0, height, 0, 1);

//       var c = lerpColor(c1, c2, inter);

//       stroke(c);

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

//     }

// }