let maked = 0, update = 0;

// 光のエフェクト
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;
}
}