const palettes = [
		["fceade", "#ea526f", "#f0386b", "#ff5376", "#f8c0c8", "#e2c290"],
		["#223843", "#eff1f3", "#dbd3d8", "#d8b4a0", "#d77a61"],
		["#006d77", "#83c5be", "#edf6f9", "#ffddd2", "#e29578"]
	];
	let t = 0.0;

	/** OPC START **/
	OPC.slider('seed', Math.floor(Math.random() * 1000), 0, 1000, 1);
	OPC.slider('tileCount', 10, 5, 20, 1);
	OPC.slider('speed', 0.02, 0, 0.2, 0.001);
	OPC.slider('size', 5, 2, 10, 0.1);
	OPC.slider('colors', Math.floor(Math.random() * palettes.length), 0, palettes.length - 1, 1);
	/** OPC END**/



	function setup() {
		createCanvas(windowWidth, windowHeight);
		noStroke();

		bg = createGraphics(width, height);
		for (let i = 0; i < 100; i++) {
			bg.fill(255);
			bg.noStroke();
			bg.ellipse(random(width), random(height), random(1, 5))
		}
	}

	function draw() {
		randomSeed(seed)

		fill("#355070")
		rect(0, 0, width, height);

		push();
		blendMode(OVERLAY);
		for (let i = 0; i < 5; i++) {
			fireWorks(random(width), random(height), random(255));
		}
		pop();
		fill(0, 40)
		rect(0, 0, width, height)
		image(bg, 0, 0)
		tile();

		t += speed;
	}

	function tile() {
		let w = width / tileCount;
		let h = height/tileCount;
		for (var j = 0.5; j < tileCount; j++) {
			for (var i = 0.5; i < tileCount; i++) {
				let n = i + j;
				if (n % 2) {
					ghost(i * w, j * h, w);
				}
			}
		}
	}

	function ghost(x, y, w) {
		noStroke();
		let osci = 10 * sin(t);
		let hW = w / size;
		let hH = w / (size - 1);

		push();
		translate(x, y);
		rotate(random(-PI, PI))
		//oscillation------
		translate(0, osci);
		push();
		//leg_shadow-----
		fill(200);
		beginShape();
		vertex(-hW, 0);
		vertex(hW, 0);
		for (let i = hW; i > -hW + 1; i -= 1) {
			let y = hH + hH / 8 * sin(i / (hW / 10) + t);
			vertex(i, y);
		}
		vertex(-hW, hH);
		endShape();

		//ghost_body-----
		let bodycol = ["#ffffff", "#fbfefb", "#EFF1F3"];
		fill(bodycol[int(random(bodycol.length))]);

		beginShape();
		vertex(hW, 0);
		bezierVertex(hW * 1.1, -hH * 1.35, -hW * 1.1, -hH * 1.35, -hW, 0);
		vertex(-hW, hH);
		for (let i = -hW; i < hW + 1; i += 1) {
			let y = hH + hH / 8 * sin(i / (hW / 10) - t);
			vertex(i, y);
		}
		vertex(hW, 0);
		endShape();
		pop();
		//eye-------
		fill(150);
		ellipse(-hW / 2 + abs(osci / 5), -hH / 2 + abs(osci / 5), hW / 5);
		ellipse(hW / 5 + abs(osci / 5), -hH / 2 + abs(osci / 5), hW / 5);
		pop();
	}

	function fireWorks(x, y, col) {
		strokeCap(ROUND)
		strokeWeight(random(1, 100))
		noFill();
		let colNum = int(random(5))
		let colr = color(palettes[colors][colNum]);
		stroke(colr)

		push();
		translate(x, y)
		for (let i = 0; i < 12; i++) {
			rotate(radians(30))
			line(0, 0, 0, map(col, 0, 255, 100, 600))
		}
		pop();
	}