var bgImg;

var bgx1 = 0;

var bgx2;

//Background Influced by Influced by mSpeed;

var bgSpeed;

​

//reference speed for bg,wave12345, influced by mSpeed;

var scroll;

​

//Universal waves' data

var scalar = 15;

var offset = 20;

var offsetm = 150;

var angle5 = 0.0;

var angle4 = 0.0;

var angle3 = 0.0;

var angle2 = 0.0;

var angle1 = 0.0;

​

//moon

var mSpeed = 2; //influsenced by energy

var mEase = 0.02;

var mPosx = -100;

var mPosy;

//change of moon image

var mPresent;

var mDark;

var mBright1;

var mBright2;

var mMild;

var light1;

var light2;

​

var resist = 1;

​

​

var targetX;

var dx;

​

//Universal Wave 

var wavex1 = 0;

var wavex2;

//Wave 5

var wave5;

var speed5;

var y5;

​

​

//Wave 4

var wave4;

var speed4;

var y4;

​

//Wave 3

var wave3;

var speed3;

var y3;

​

​

//Wave 2

var wave2;

var speed2;

var y2;

​

​

//Wave 1

var wave1;

var speed1;

var y1;

var x1 = 0;

​

//lightDrops 

​

var quantity = 0;

var xPosition = [];

var yPosition = [];

var flakeSize = [];

var direction = [];

var minFlakeSize = 10;

var maxFlakeSize = 20;

var snowColor = 255;

​

function preload() {

  bgImg = loadImage("bg_d.png");

  wave5 = loadImage("wave5.png");

  wave4 = loadImage("wave4.png");

  wave3 = loadImage("wave3.png");

​

  wave2 = loadImage("wave2.png");

  wave1 = loadImage("wave1.png");

​

  mDark = loadImage("moond.png");

  mBright2 = loadImage("light2.png");

  mBright1 = loadImage("light1.png");

  mMild = loadImage("moonb.png");

  light1 = loadImage("light1.png");

  light2 = loadImage("light2.png");

}

​

function setup() {

  createCanvas(1280, 720);

​

  bgx2 = width;

  wavex2 = width;

  scroll = mSpeed * 0.5;

  bgSpeed = scroll * 0.5;

  // resist = pn;

​

  //wave ySpeed

  speed5 = 0.025;

  speed4 = 0.05;

  speed3 = 0.06;

  speed2 = 0.08;

  speed1 = 0.1;

  //for light drops

  fill(255,239,139,190);

  frameRate(30);

  noStroke();

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

    flakeSize[i] = round(random(minFlakeSize, maxFlakeSize));

    xPosition[i] = random(0, width);

    yPosition[i] = random(0, height);

    direction[i] = round(random(0, 4));

  }

}

​

function draw() {

  background(51);

 var mSpeed = resist;

  //Background Setup

  var scroll = mSpeed * 0.9 +1;

  var bgSpeed = scroll * 0.5;

  image(bgImg, bgx1, 0, width+1, height);

  image(bgImg, bgx2, 0, width+1, height);

​

  //loop images for background

  bgx1 -= bgSpeed;

  bgx2 -= bgSpeed;

​

  if (bgx1 < -width) {

    bgx1 = width;

  }

  if (bgx2 < -width) {

    bgx2 = width;

  }

​

  //loop wave

  wavex1 -= scroll;

  wavex2 -= scroll;

​

  if (wavex1 < -width) {

    wavex1 = width;

  }

  if (wavex2 < -width) {

    wavex2 = width;

  }

​

  // Wave_back Setup

  var y5 = offset + sin(angle5) * scalar * 0.2;

  image(wave5, bgx1, y5, width + 1, height);

  image(wave5, bgx2, y5, width + 1, height);

  angle5 += speed5;

​

  var y4 = offset + sin(angle4) * scalar * 0.4;

  image(wave4, bgx1, y4, width + 1, height);

  image(wave4, bgx2, y4, width + 1, height);

  angle4 += speed4;

​

  var y3 = sin(angle3) * scalar * 0.8 - 50;

  image(wave3, bgx1, y3, width + 1, height);

  image(wave3, bgx2, y3, width + 1, height);

  angle3 += speed3;

  //lights

  drawLight();

​

  //Moon

  var mPosy = offsetm + sin(angle1) * scalar;

  //position control by mouseX position

  // var targetX = mouseX-300;

  // var dx = targetX - mPosx;

  // mPosx += dx* mEase;

  // //Change Moon image based on the energy of the moon

​

  //speed controll by mounseY

​

  mPosx = constrain(mPosx, -100, 1000);

​

​

​

  //   if(mouseY >= 540) {

  //     resist = mouseY/180;

  //     // mPosx += resist;

  //   } else if(mouseY <540 && mouseY >=360){

  //     resist = mouseY/180;

  //     // mPosx += resist;

  //   } else if(mouseY < 360 && mouseY >= 180) {

  //     resist = mouseY/180;

  //   } else {

  //     resist = -mouseY/180;}

  if (mouseX < 1400) {

    resist = mouseY / 256;

    mPosx += resist;

  } else {

    mPosx -= 2;

  }

​

  //moon image decided by energy

  mPresent = mDark;

  image(mDark, mPosx, mPosy, 0.8 * width, 0.8 * height);

​

​

​

  //Wave_front Setup

  var y2 = offset + sin(angle2) * scalar;

  image(wave2, bgx1, y2, width + 1, height);

  image(wave2, bgx2, y2, width + 1, height);

  angle2 += speed2;

​

  //if brightMoon==true

  // image(light1, mPosx, mPosy, 0.8 * width, 0.8 * height);

​

  var y1 = offset + sin(angle1) * scalar;

  image(wave1, bgx1, y1, width + 1, height);

  image(wave1, bgx2, y1, width + 1, height);

  angle1 += speed1;

​

}

​

// function keyPressed () {

//   if (keyCode  === UP_ARROW){

//     resist = -resist;} 

//   return false;

// }

function drawLight() {

    for(var i = 0; i < xPosition.length; i++) {

    ellipse(xPosition[i], yPosition[i], flakeSize[i], flakeSize[i]);

    if(direction[i] == 0) {

      xPosition[i] += map(flakeSize[i], minFlakeSize, maxFlakeSize, 0.1, 0.5);

    } else {

      xPosition[i] -= map(flakeSize[i], minFlakeSize, maxFlakeSize, 0.1, 0.5);

    }

    yPosition[i] += 0.07* (flakeSize[i] + direction[i]); 

    if(xPosition[i] > width + flakeSize[i] || xPosition[i] < -flakeSize[i] || yPosition[i] > height + flakeSize[i]) {

      xPosition[i] = random(0, width);

      yPosition[i] = -flakeSize[i];

    } 

  }

}