diff --git a/images/shork.png b/images/shork.png index abb70fa..d8ede9b 100644 Binary files a/images/shork.png and b/images/shork.png differ diff --git a/images/shork.xcf b/images/shork.xcf index 31dc63a..ba8e0c8 100644 Binary files a/images/shork.xcf and b/images/shork.xcf differ diff --git a/public_html/eh/eh/eh/eh-eh/images/shork.png b/public_html/eh/eh/eh/eh-eh/images/shork.png index abb70fa..d8ede9b 100644 Binary files a/public_html/eh/eh/eh/eh-eh/images/shork.png and b/public_html/eh/eh/eh/eh-eh/images/shork.png differ diff --git a/public_html/eh/eh/eh/eh-eh/images/shork.xcf b/public_html/eh/eh/eh/eh-eh/images/shork.xcf index 31dc63a..ba8e0c8 100644 Binary files a/public_html/eh/eh/eh/eh-eh/images/shork.xcf and b/public_html/eh/eh/eh/eh-eh/images/shork.xcf differ diff --git a/public_html/eh/eh/eh/eh-eh/scripts/shork.js b/public_html/eh/eh/eh/eh-eh/scripts/shork.js index be373f1..545337f 100644 --- a/public_html/eh/eh/eh/eh-eh/scripts/shork.js +++ b/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}); diff --git a/public_html/eh/eh/eh/eh-eh/styles/style.css b/public_html/eh/eh/eh/eh-eh/styles/style.css index 069df3e..6482001 100644 --- a/public_html/eh/eh/eh/eh-eh/styles/style.css +++ b/public_html/eh/eh/eh/eh-eh/styles/style.css @@ -59,8 +59,8 @@ main { #shork { position: fixed; z-index: 1; - left: -32px; - top: -36px; + left: -36px; + top: -32px; width: 64px; transform-origin: 50% 50%; } diff --git a/scripts/shork.js b/scripts/shork.js index be373f1..545337f 100644 --- a/scripts/shork.js +++ b/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}); diff --git a/styles/style.css b/styles/style.css index 069df3e..6482001 100644 --- a/styles/style.css +++ b/styles/style.css @@ -59,8 +59,8 @@ main { #shork { position: fixed; z-index: 1; - left: -32px; - top: -36px; + left: -36px; + top: -32px; width: 64px; transform-origin: 50% 50%; }