let shork_image = document.getElementById("shork");

let shork = {x: 0, y: 0};
let mouse = {x: 0, y: 0};

let zoomies = 4;

onmousemove = function(e){
	mouse.x = e.clientX;
	mouse.y = e.clientY;
}

function vector(a, b) {
	return {
		x: b.x - a.x,
		y: b.y - a.y
	};
}

function angle(v) {
	return Math.atan2(v.y, v.x);
}

function norm(v) {
	return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
}

function unit(v) {
	let length = norm(v);

	if (length == 0) return {x: 0, y: 0};

	return {x: v.x / length, y: v.y / length};
}

function scalar(v, a) {
	return {x: v.x * a, y: v.y * a};
}

function add(v, u) {
	return {x: v.x + u.x, y: v.y + u.y};
}

function equal(v, u, a) {
	return (Math.abs(v.x - u.x) < a && Math.abs(v.y - u.y) < a);
}

function distance(x, y, a) {
	return (norm(vector(x, y)) >= a);
}

function round(v) {
	return {x: Math.round(v.x), y: Math.round(v.y)};
}

function transform(v, a) {
	return {a: Math.cos(a), b: -Math.sin(a), c: Math.sin(a), d: Math.cos(a), x: v.x, y: v.y};
}

let direction = vector(shork, mouse)
let movement = scalar(unit(direction), zoomies);
let rotation = angle(direction);

function move() { 
	direction = vector(shork, mouse)

	if (norm(direction) < 4) {
		shork = mouse;
	}

	movement = scalar(unit(direction), zoomies * norm(direction)/128);
	shork = add(shork, movement);

	if (norm(direction) >= 16) {
		rotation = -(angle(direction) - Math.PI/2 + Math.sin(norm(movement)*2)/8);
	}

	let trans = transform(shork, rotation);
	shork_image.style.transform = `matrix(${trans.a}, ${trans.b}, ${trans.c}, ${trans.d}, ${trans.x}, ${trans.y})`;
	
	setTimeout(move, 30);
}

shork_image.addEventListener("click", function(e) {move()}, {once: true});