1
Fork 0
mirror of https://github.com/RGBCube/rgbcube.github.io synced 2025-07-24 15:37:41 +00:00

Make code more readable

This commit is contained in:
RGBCube 2023-12-18 14:53:13 +03:00
parent fde2ecb25a
commit 40f1327d08
No known key found for this signature in database

View file

@ -224,13 +224,45 @@
</div>
<script>
class Quaternion {
static __cube = document.querySelector(".cube");
const __cube = document.querySelector(".cube");
static up = new Quaternion({x: 0, y: 1, z: 0, w: 0});
static right = new Quaternion({x: 1, y: 0, z: 0, w: 0});
class Vec3 {
static up = new Vec3(0, 1, 0);
static right = new Vec3(1, 0, 0);
constructor({x, y, z, w}) {
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
normalize() {
const length = Math.sqrt(this.x ** 2 + this.y ** 2 + this.z ** 2);
if (length != 0) {
this.x /= length;
this.y /= length;
this.z /= length;
}
}
static sub(v, t) {
return new Vec3(
v.x - t.x,
v.y - t.y,
v.z - t.z,
)
}
}
class Vec2 extends Vec3 {
constructor(x, y) {
super(x, y, 0)
}
}
class Quat {
constructor(x, y, z, w) {
this.x = x;
this.y = y;
this.z = z;
@ -250,30 +282,20 @@
const z = axis.z * sinHalf;
const w = cosHalf;
return new Quaternion({x: x, y: y, z: z, w: w});
return new Quat(x, y, z, w);
}
static mul(q, r) {
return new Quat(
q.w * r.x + q.x * r.w + q.y * r.z - q.z * r.y,
q.w * r.y - q.x * r.z + q.y * r.w + q.z * r.x,
q.w * r.z + q.x * r.y - q.y * r.x + q.z * r.w,
q.w * r.w - q.x * r.x - q.y * r.y - q.z * r.z,
);
}
apply() {
Quaternion.__cube.style.transform = `rotate3d(${this.x}, ${this.y}, ${this.z}, ${this.w}rad)`;
}
normalize() {
const length = Math.sqrt(this.x ** 2 + this.y ** 2 + this.z ** 2);
if (length != 0) {
this.x /= length;
this.y /= length;
this.z /= length;
}
}
static multiply(q, r) {
return new Quaternion({
x: q.w * r.x + q.x * r.w + q.y * r.z - q.z * r.y,
y: q.w * r.y - q.x * r.z + q.y * r.w + q.z * r.x,
z: q.w * r.z + q.x * r.y - q.y * r.x + q.z * r.w,
w: q.w * r.w - q.x * r.x - q.y * r.y - q.z * r.z,
});
__cube.style.transform = `rotate3d(${this.x}, ${this.y}, ${this.z}, ${this.w}rad)`;
}
}
@ -282,7 +304,7 @@
let velocity = 0;
const orientation = {
__value: new Quaternion({x: 0, y: 0, z: 0, w: 1}),
__value: new Quat(0, 0, 0, 1),
set(value) {
this.__value = value;
@ -298,10 +320,7 @@
const mouse = {
down: false,
lastMove: window.performance.now(),
previous: {
x: 0,
y: 0,
},
previous: new Vec2(0, 0),
};
document.addEventListener("mouseleave", () => {
@ -312,36 +331,33 @@
mouse.down = false;
});
document.addEventListener("mousedown", () => {
document.addEventListener("mousedown", (event) => {
// Disables link dragging that occurs when spinning.
event.preventDefault();
mouse.down = true;
});
document.addEventListener("mousemove", (event) => {
if (mouse.down) {
const newMouse = {
x: event.clientX,
y: event.clientY,
};
if (!mouse.down) return;
if (window.performance.now() - mouse.lastMove > 100) {
mouse.previous = newMouse;
}
const delta = {
x: newMouse.x - mouse.previous.x,
y: newMouse.y - mouse.previous.y,
};
const newMouse = new Vec2(event.clientX, event.clientY);
if (window.performance.now() - mouse.lastMove > 100) {
// This is a fresh scroll.
mouse.previous = newMouse;
mouse.lastMove = window.performance.now();
const rotation = Quaternion.multiply(
Quaternion.fromAngleAxis(delta.x * sensitivity, Quaternion.up),
Quaternion.fromAngleAxis(delta.y * sensitivity, Quaternion.right),
);
orientation.set(Quaternion.multiply(orientation.get(), rotation));
}
const delta = Vec2.sub(newMouse, mouse.previous);
mouse.previous = newMouse;
mouse.lastMove = window.performance.now();
const rotation = Quat.mul(
Quat.fromAngleAxis(delta.x * sensitivity, Vec3.up),
Quat.fromAngleAxis(delta.y * sensitivity, Vec3.right),
);
orientation.set(Quat.mul(orientation.get(), rotation));
});
})();
</script>