Sharkier shork
This commit is contained in:
parent
8d4252001d
commit
d0696fdf88
8 changed files with 112 additions and 60 deletions
BIN
images/shork.png
BIN
images/shork.png
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 84 KiB |
BIN
images/shork.xcf
BIN
images/shork.xcf
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
|
@ -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});
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue