// Environment Variables
let updateFPS = 30;
let showMouse = true;
let count = 0;
let bgColor = "black";

// Controls
const controls = {
	frequency: 0.02,
	amplitude: 30,
};
const gui = new dat.GUI();
gui.add(controls, "frequency", 0, 0.24).step(0.01);
gui.add(controls, "amplitude", 0, 81).step(0.01);

//------ Vector 2D -------
class Vec2 {
	constructor(x, y) {
		this.x = x || 0;
		this.y = y || 0;
	}
	set(x, y) {
		this.x = x;
		this.y = y;
	}
	move(x, y) {
		this.x += x;
		this.y += y;
	}
	add(value) {
		return new Vec2(this.x + value.x, this.y + value.y);
	}
	sub(value) {
		return new Vec2(this.x - value.x, this.y - value.y);
	}
	mul(number) {
		return new Vec2(this.x * number, this.y * number);
	}
	get length() {
		return Math.sqrt(this.x * this.x + this.y * this.y);
	}
	set length(newValue) {
		let temp = this.unit.mul(newValue);
		this.set(temp.x, temp.y);
	}
	clone() {
		return new Vec2(this.x, this.y);
	}
	toString() {
		return `(${this.x}, ${this.y})`;
	}
	equal(compareElement) {
		return this.x == compareElement.x && this.y == compareElement.y;
	}
	get angle() {
		return Math.atan2(this.y, this.x);
	}
	get unit() {
		return this.mul(1 / this.length);
	}
}

//--- Canvas Selector ----
const canvas = document.querySelector("#myCanvas");
const ctx = canvas.getContext("2d");

ctx.circle = function (value, radius) {
	this.arc(value.x, value.y, radius, 0, Math.PI * 2);
};
ctx.line = function (value1, value2) {
	this.moveTo(value1.x, value1.y);
	this.lineTo(value2.x, value2.y);
};

// Set Canvas
initCanvas();
function initCanvas() {
	ww = canvas.width = window.innerWidth;
	wh = canvas.height = window.innerHeight;
}

// Set Logic
function init() {}

// Update Game Logic
function update() {}

// Update Frame
function draw() {
	count++;
	// Clear Background
	ctx.fillStyle = bgColor;
	ctx.fillRect(0, 0, ww, wh);
	//------ Draw Here --------
	ctx.beginPath();
	for (let i = 0; i < ww; i++) {
		let deg = i * controls.frequency + count / 24;
		let noise = controls.amplitude * Math.random();
		let wave = controls.amplitude * Math.sin(deg);
		ctx.lineTo(i, wave + noise + wh / 2);
	}
	ctx.lineWidth = 2;
	ctx.strokeStyle = "rgba(255,255,255,.15)";
	ctx.stroke();

	ctx.beginPath();
	for (let i = 0; i < wh; i++) {
		let deg = i * controls.frequency + count / 24;
		ctx.lineTo(controls.amplitude * Math.sin(deg) + ww / 2, i);
	}
	ctx.strokeStyle = "#fff";
	ctx.stroke();

	ctx.beginPath();
	for (let i = 0; i < wh; i++) {
		let deg = i * controls.frequency + count / 24;
		ctx.lineTo(-controls.amplitude * Math.sin(deg) + ww / 2, i);
	}
	ctx.strokeStyle = "#fff";
	ctx.stroke();

	ctx.lineWidth = 1;
	for (let i = 0; i < wh; i += 15) {
		let deg = i * controls.frequency + count / 24;
		let amp = controls.amplitude * Math.sin(deg);
		let x1 = ww / 2 - amp;
		let x2 = ww / 2 + amp;
		ctx.beginPath();
		ctx.moveTo(x1, i);
		ctx.lineTo(x2, i);
		ctx.stroke();

		ctx.beginPath();
		ctx.arc(x1, i, Math.sin(i + count / 24) * 2.4 + 5, 0, Math.PI * 2);
		ctx.arc(x2, i, 3, 0, Math.PI * 2);
		ctx.fillStyle = `rgb(${(i * 81) % 255},${240 + i / 2},${
			((i * 24) % 255) + 81
		})`;
		ctx.fill();
	}

	//------ Draw Mouse --------
	ctx.fillStyle = "red";
	ctx.beginPath();
	ctx.circle(mousePosition, 3);
	ctx.fill();

	ctx.save();
	ctx.beginPath();
	ctx.translate(mousePosition.x, mousePosition.y);
	ctx.strokeStyle = "red";
	let length = 20;
	ctx.line(new Vec2(-length, 0), new Vec2(length, 0));
	ctx.fillText(mousePosition, 10, -10);
	ctx.rotate(Math.PI / 2);
	ctx.line(new Vec2(-length, 0), new Vec2(length, 0));
	ctx.stroke();
	ctx.restore();
	//---------------------------

	requestAnimationFrame(draw);
	if (count % (60 / updateFPS) == 0) requestAnimationFrame(update);
}

function loaded() {
	initCanvas();
	init();
	requestAnimationFrame(draw);
}
window.addEventListener("load", loaded);
window.addEventListener("resize", initCanvas);

// Mouse EventListener and Function
let mousePosition = new Vec2(0, 0);
let mousePositionDown = new Vec2(0, 0);
let mousePositionUp = new Vec2(0, 0);

window.addEventListener("mousemove", mousemove);
window.addEventListener("mouseup", mouseup);
window.addEventListener("mousedown", mousedown);

function mousemove(e) {
	mousePosition.set(e.x, e.y);
}
function mouseup(e) {
	mousePosition.set(e.x, e.y);
	mousePositionUp = mousePosition.clone();
}
function mousedown(e) {
	mousePosition.set(e.x, e.y);
	mousePositionDown = mousePosition.clone();
}