// 光のエフェクト
let Lights = [];
let maked = 0, update = 0;
let stLocX, stLocY, texAlpha = 0;
let textFlag = false;
let nameFont;

// 回転パターンの変数
let theta = 0.0, S = 1.0;
let reverse = false;

function setup() {
  createCanvas(1920, 1080);
  frameRate(60);
  strokeWeight(3);
  colorMode(HSB, 359, 99, 99, 99);

  // create a first light
  Lights[0] = new Light(width - 20, height / 2, width - 20, 347, 83, 99, 99, 0);

  // create font
  nameFont = "HGSSoeiKakugothicUB";
  textAlign(CENTER, CENTER);
}

function draw() {
  background(0);

  // 光のエフェクトを描画
  for (let i = 0; i <= maked; i++) {
    if (Lights[i]) Lights[i].exe();
  }

  // 新しい光の作成
	drawingContext.filter = 'blur(24px)';
  if (frameCount % int(random(15, 25)) === 0) {
    Create();
  }
	drawingContext.filter = 'none';

  // 回転パターンを上に重ねる
  push();
  translate(width / 2, height / 2);
  scale(S);
  if (mouseX < width / 2) {
    fill(255, 0, 0);
  } else {
    fill(0, 0, 255);
  }

  for (let n = 1; n < 4; n++) {
		let col = color(this.hue, this.satu, this.brig, this.alpha);
    rotate(radians(theta));
		ellipse((150 * n) - 25, -25, 50, 50);
		noFill();
		arc(0, 0, 150 * n, 150 * n, 0, theta);
		fill(col);
    if (n != 0) {
      ellipse((-150 * n) - 25, -25, 50, 50);
			noFill();
			arc(0, 0, 300 * n, 300 * n, 0, theta);
			fill(col);
    }
  }
  pop();

  // 回転方向の変更
  if (theta > 180) {
    theta = 0.0;
    reverse = true;
  } else if (theta < -180) {
    theta = 0.0;
    reverse = false;
  }

  // 回転角度の増減
  if (!reverse) {
    theta += 3;
  } else {
    theta -= 3;
  }
	
	// テキスト表示
  indication();
}

function Create() {
  maked++;
  if (maked >= 10) maked = 9;
  update++;
  if (update >= 10) update = 0;

  stLocX = width - random(50, 200);
  stLocY = height / 2 - random(-100, 100);
  Lights[update] = new Light(stLocX, stLocY, stLocX, random(320, 359), random(0, 99), 99, 99, update);
}

function indication() {
  if (frameCount % 300 === 0) {
    textFlag = !textFlag;
    if (!textFlag) texAlpha = 0;
  }

  if (textFlag) {
    texAlpha = min(texAlpha + 1, 99);
    fill(0, 0, 99, texAlpha);
    textFont(nameFont, 72);
    text("”SESSIONS ”", width / 2, height / 2 + random(-5, 5));
  } else {
    texAlpha = 0;
  }
}

class Light {
  constructor(x, y, start_x, hue, satu, brig, alpha, update) {
    this.location = createVector(x, y);
    this.velocity = createVector(-30, 0);
    this.start_x = start_x;
    this.radi = 10;
    this.hue = hue;
    this.satu = satu;
    this.brig = brig;
    this.alpha = alpha;
    this.update = update;
  }

  exe() {
    this.display();
    this.slide();
    this.changeAlpha();
  }

  display() {
    colorMode(HSB, 359, 99, 99, 99);
    let col = color(this.hue, this.satu, this.brig, this.alpha);
    fill(col);
    stroke(col);

    ellipse(this.location.x, this.location.y, this.radi, this.radi);
    line(this.location.x, this.location.y, this.start_x, this.location.y);
  }

  slide() {
    this.location.add(this.velocity);
  }

  changeAlpha() {
    if (this.location.x < 0 && this.alpha >= 20) {
      this.alpha -= 2.5;
    } else {
      this.alpha = min(this.alpha + 40, 99);
    }
  }
}

function keyPressed() {
  if (key === 'l' || key === 'L') {
    S += 0.1;
  } else if (key === 's' || key === 'S') {
    S -= 0.1;
  }
}