Какое условие необходимо задать?

Question

[VegasChickiChicki]

Суть в том ,что я при при движении мышки ,меняю значение стиля вот так :

canvas.style.transform = "rotate3d(1,0,0,"+x+"deg)";

(x - это отслеживание перемещения мышки ,горизонтально)
Но суть вопроса вот в чем ,я не могу понять ,как мне реализовать одновременно вращение по 2 осям ,относительно движения по 2 осям мышки ,т.е. если мышь движется горизонтально ,то стиль меняется вот так :

canvas.style.transform = "rotate3d(1,0,0,"+x+"deg)";

,а если вертикально ,то вот так :

canvas.style.transform = "rotate3d(0,1,0,"+x+"deg)";

Мне необходимо какое то условие ,которое отслеживало бы изменение координаты x и y ,увеличение или уменьшение.
Но я не могу понять ,как это условие задать в

if(//тут должно быть то самое условие ,которое проверят изменилась ли необходимая координата){
}

И должно получится ,что если изменилась одна координата ,выполняется присвоение одного свойства ,если другая ,присвоение другого. Не знаю насколько это правильно ,возможно будут более короткие решение ,буду очень рад вашей помощи.
Вот весь кусок кода JS:

var posXY_text = document.getElementById("posX");

document.onmousemove = function f32() {
    let x = event.clientX/192.0*3,
        y = event.clientY/950*6;
    posXY_text.innerHTML = x.toFixed(2) + ":" + y.toFixed(2);

    canvas.style.transform = "rotate3d(1,0,0,"+x+"deg)";
    canvas_bg.style.transform = "rotate3d(1,0,0,"+x+"deg)";
};

Так же ,если кто-то знает ,по неизвестной мне причине линии двигают иногда медленнее чем должны ,не знаю с чем это связано,но буду очень рад ,если кто-то ответит мне и на этот вопрос.
Вот демо:
https://codepen.io/Poporo35/pen/GPxNyj

Answer 1

[RAX7]

Считай изменение координат мыши и по ним определяй куда двигается курсор, примерно так
https://codepen.io/anon/pen/JwLEGG?editors=1010

Comments

[VegasChickiChicki]

Спасибо ,почти то что нужно,работает так как я и хотел! Но не могли бы вы объяснить ,как вы это сделали? Как видно по моему коду ,я еще совсем зеленый в этом деле ,так что для меня тут слишком много не понятно ,не хотелось бы просто тыкнуть кусок чужого ,не разобравшись в нем)
Если быть точнее ,то не понятны эти моменты :
Что это за массив ,если это массив вообще )
const lastMousePosition = { x: 0, y: 0 };
Что это за константы и что они высчитывают?

const deltaX = lastMousePosition.x - event.clientX;
    const deltaY = lastMousePosition.y - event.clientY;

[RAX7]

VegasChickiChicki, в lastMousePosition сохраняются координаты мыши в конце каждого вызова onmousemove, в начале же вызова вычисляется разница (дельта) между старыми значениями и новыми координатами. Зная эту разницу можно понять куда передвинулась мышь относительно своей прошлой позиции. Например было x: 78 стало x: 81, deltaX == 3, то есть мышь по Х сдвинулась на 3px вправо. Тоже самое и для Y. Потом смотрим куда больше передвинулась мышь, по X или по Y. Если deltaX больше чем deltaY, то она передвинулась больше по оси X, то есть горизонтально. Проверку второго условия в else if кстати можно убрать и оставить просто else.

[VegasChickiChicki]

RAX7, Спасибо! Очень интересное решение ,пойду разбираться и учить JS дальше )

[RAX7]

VegasChickiChicki, пожалуйста, это решение было списано отсюда и ему уже 6 лет.

[VegasChickiChicki]

RAX7, Можно еще уточнить ,почему в этих местах именно const ,а не var или let к примеру?

Answer 2

[Алексей Лауд]

Почти никогда курсор не будет двигаться так, чтобы координаты менялись только по одной оси, но, если я понял вопрос правильно, такое решение может быть полезным:

let oldX, oldY;

document.onmousemove = function f32() {
    let x = event.clientX/192.0*3,
         y = event.clientY/950*6;

     if (oldX !== x) {
          // Изменился x
          ...
     } elseif (oldY !== y) {
          // Изменился y
           ... 
     }
     oldX = x;
     oldY = y;
    ...

Как вариант, можно проверять не на равенство, а на изменение в каких-то пределах:

const X_MAX_DIFF = ...;
const Y_MAX_DIFF = ...;
let oldX, oldY;

document.onmousemove = function f32() {
    let x = event.clientX/192.0*3,
         y = event.clientY/950*6;

     if (Math.abs(oldX - x) < X_MAX_DIFF) {
          // Изменился x
          ...
     } elseif (Math.abs(oldY - y) < Y_MAX_DIFF) {
          // Изменился y
           ... 
     }
     oldX = x;
     oldY = y;
    ...

Comments

[VegasChickiChicki]

Ваш вариант тоже работает ,первый попробовал пока что.
Да ,безусловно почти никогда не будет движения ровно по одной оси ,но это не должно особо мешать.
Теперь мне необходимо разобраться с тем ,как запомнить то что произошло в теле цикла if ,ибо т.е. запомнить стиль после изменения по одной из осей ,потому что сейчас он каждый раз мне "перерисовывает" с новым стилем ,а должен запоминать предыдущее изменение ,что бы как бы было плавное вращение.Буду думать ,может даже сам смогу это реализовать.