Sharkier shork

public_html/eh/eh/eh/eh-eh/scripts/shork.js

@@ -1,15 +1,41 @@
 let shork_image = document.getElementById("shork");
 
-let shork = {x: 0, y: 0};
-let mouse = {x: 0, y: 0};
-
 let zoomies = 4;
+let turnies = 0.2;
 
+let shork = {x: 32, y: 36};
+let rotation = Math.PI/2;
+let shork_init = transform(shork, -rotation);
+shork_image.style.transform = `matrix(${shork_init.a}, ${shork_init.b}, ${shork_init.c}, ${shork_init.d}, ${shork_init.x}, ${shork_init.y})`;
+
+let mouse = {x: 0, y: 0};
 onmousemove = function(e){
 	mouse.x = e.clientX;
 	mouse.y = e.clientY;
 }
 
+let direction = 0;
+let movement = 0;
+let target = 0;
+
+function move() { 
+	direction = vector(shork, mouse);
+	
+	if (norm(direction) >= 4) {
+		movement = scalar(angletovec(rotation), zoomies * norm(direction)/128);
+		shork = add(shork, movement);
+		target = angle(direction);
+		rotation = interpolate(rotation, target, turnies) + Math.sin(norm(movement))/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});
+
 function vector(a, b) {
 	return {
 		x: b.x - a.x,
@@ -21,6 +47,10 @@ function angle(v) {
 	return Math.atan2(v.y, v.x);
 }
 
+function angletovec(a) {
+	return {x: Math.cos(a), y: Math.sin(a)};
+}
+
 function norm(v) {
 	return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
 }
@@ -45,32 +75,28 @@ function round(v) {
 	return {x: Math.round(v.x), y: Math.round(v.y)};
 }
 
+function clamp(a, min, max) {
+	if (a < min) return min;
+	if (a > max) return max;
+	return a;
+}
+
+function interpolate(a, b, c) {
+	let d = Math.abs(a - b)
+	if (d > Math.abs(a - b - 2 * Math.PI)) a = a - 2 * Math.PI;
+	if (d > Math.abs(a - b + 2 * Math.PI)) a = a + 2 * Math.PI;
+
+	if (a < b) a = clamp(a + c, a, b);
+	if (a > b) a = clamp(a - c, b, a);
+
+	a += 3 * Math.PI;
+	a = a % (2 * Math.PI);
+	a -= Math.PI;
+
+	return a;
+}
+
 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});

public_html/eh/eh/eh/eh-eh/styles/style.css

@@ -59,8 +59,8 @@ main {
 #shork {
 	position: fixed;
 	z-index: 1;
-	left: -32px;
+	left: -36px;
-	top: -36px;
+	top: -32px;
 	width: 64px;
 	transform-origin: 50% 50%;
 }

scripts/shork.js

@@ -1,15 +1,41 @@
 let shork_image = document.getElementById("shork");
 
-let shork = {x: 0, y: 0};
-let mouse = {x: 0, y: 0};
-
 let zoomies = 4;
+let turnies = 0.2;
 
+let shork = {x: 32, y: 36};
+let rotation = Math.PI/2;
+let shork_init = transform(shork, -rotation);
+shork_image.style.transform = `matrix(${shork_init.a}, ${shork_init.b}, ${shork_init.c}, ${shork_init.d}, ${shork_init.x}, ${shork_init.y})`;
+
+let mouse = {x: 0, y: 0};
 onmousemove = function(e){
 	mouse.x = e.clientX;
 	mouse.y = e.clientY;
 }
 
+let direction = 0;
+let movement = 0;
+let target = 0;
+
+function move() { 
+	direction = vector(shork, mouse);
+	
+	if (norm(direction) >= 4) {
+		movement = scalar(angletovec(rotation), zoomies * norm(direction)/128);
+		shork = add(shork, movement);
+		target = angle(direction);
+		rotation = interpolate(rotation, target, turnies) + Math.sin(norm(movement))/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});
+
 function vector(a, b) {
 	return {
 		x: b.x - a.x,
@@ -21,6 +47,10 @@ function angle(v) {
 	return Math.atan2(v.y, v.x);
 }
 
+function angletovec(a) {
+	return {x: Math.cos(a), y: Math.sin(a)};
+}
+
 function norm(v) {
 	return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
 }
@@ -45,32 +75,28 @@ function round(v) {
 	return {x: Math.round(v.x), y: Math.round(v.y)};
 }
 
+function clamp(a, min, max) {
+	if (a < min) return min;
+	if (a > max) return max;
+	return a;
+}
+
+function interpolate(a, b, c) {
+	let d = Math.abs(a - b)
+	if (d > Math.abs(a - b - 2 * Math.PI)) a = a - 2 * Math.PI;
+	if (d > Math.abs(a - b + 2 * Math.PI)) a = a + 2 * Math.PI;
+
+	if (a < b) a = clamp(a + c, a, b);
+	if (a > b) a = clamp(a - c, b, a);
+
+	a += 3 * Math.PI;
+	a = a % (2 * Math.PI);
+	a -= Math.PI;
+
+	return a;
+}
+
 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});

styles/style.css

@@ -59,8 +59,8 @@ main {
 #shork {
 	position: fixed;
 	z-index: 1;
-	left: -32px;
+	left: -36px;
-	top: -36px;
+	top: -32px;
 	width: 64px;
 	transform-origin: 50% 50%;
 }