Translate A Plane By Rotating A Circle With The Mouse

I have two button(the arrows), when they are pressed everything works as expected. What is not working is moving the ground with the mouse(hover the mouse over the wheel to see),

Solution 1:

The handler for mousemove did not account for moving over the 0 degree mark. I've updated the code to calculate the change in mouse position (e.g. newMousePos - mousePos) and account for moving across 0 degrees.

const plane = $('#plane')
const planeX = plane.offset().leftconst wheel = $('.wheel>div')
const radius = wheel.width() / 2let degrees = 0// buttonslet interval
$(document).on('mousedown', 'span', event => {
  $('.interactive').css('background', 'rgba(172, 255, 47, 0.25)')
  interval = setInterval(() => {
    if (event.currentTarget.id === 'left') degrees -= 2else degrees += 2
    wheel.css('transform', 'rotate(' + degrees + 'deg)').data('degree', degrees)
    plane.css('left', planeX - degrees * (Math.PI / 180) * radius + 'px')
  }, 10)
})
$(document).on('mouseup', 'span', () => {
  $('.interactive').css('background', '')
  clearInterval(interval)
})

// mouseconst offset = wheel.parent().offset()
let mousePos = 0
$(document).on('mouseenter', '.interactive', event => {
  $('.interactive').css('background', 'rgba(172, 255, 47, 0.25)')
  const degreeOffset =
  Math.atan2(
    event.pageX - (offset.left + radius),
    event.pageY - (offset.top + radius)
  ) *
    (180 / Math.PI) *
    -1 -
    degrees
  $(document).on('mousemove', event2 => {
    const radians = Math.atan2(
      event2.pageX - (offset.left + radius),
      event2.pageY - (offset.top + radius)
    )

    const newMousePos = radians * (180 / Math.PI) * -1 - degreeOffset
    let change = newMousePos - mousePos

    // adjust for moving over 0 deg.if (change < -180) change += 360elseif (change > 180) change -= 360
    mousePos = newMousePos
    degrees += change

    wheel.css('transform', 'rotate(' + degrees + 'deg)').data('degree', degrees)
    plane.css('left', planeX - degrees * (Math.PI / 180) * radius + 'px')
  })
})

$(document).on('mouseleave', '.interactive', () => {
  $('.interactive').css('background', '')
  $(document).off('mousemove')
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divstyle="position:fixed;top:0; font-size:200%;"><spanstyle="cursor:pointer;"id="left">&lt;</span>&nbsp;&nbsp;&nbsp;&nbsp;<spanstyle="cursor:pointer;"id="right">&gt;</span></div><divclass="wheel"style="position:fixed;bottom:1em;left:50%;transform:translateX(-50%);"><divstyle="width:150px;height:150px;border:1px solid;border-radius:50%;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAAAAAA7suyFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAFuSURBVDjLfdRBa8IwGMbxx7cjEklIiVQqjsoCnvb9P8FACBQKngQHXpTJhJx2mRDZoXUmqfW9WX68f5tAR1tEw3jD5/EjUPKT1e/68NRQvil/X1MUGSbXeno9LRMUGmJ1NbsgSxHFIXEBeoiSENBHlITayc4hojTUTbiJbiGrulC36WT+UWuI28U82BIjakNNlccEwPGWIwCUWy16BNm520QAk+tydsWD6f44gUSzmF6AYUSU11oNkO6cRl92cAsA+PLgX+ybfEKQHVacijOejZc/R1qJHXtChLDf5Iza0SDhvK4mBGf0ng0R3RRjEOCWeiCn1Ech27twS7V9kPOM2WqC7k6d0Xvqh1RTjnEzcEZ9JjkvxFpPcDdwRsdv5zmrK4nQwBkV5jxXmzYUGDij7kfghbBdKDRw5v52nNWlRN/cD9MztSkneGTgjNoxwAtV64DE34T27gSzhcSQgTNqz1kUAjBKvmN6h4uQ8bM/WtmCgAk7YV0AAAAASUVORK5CYII=')"><divclass="interactive"style="border-radius:50%;position:absolute;top:0;left:0;bottom:0;right:0"></div><divstyle="border:1px solid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;width:25%;height:25%;display: flex;justify-content: center;align-items: center;">X</div></div></div><divid="plane"style="position:fixed;bottom:0;left:-100vw;width:300vw;height:1em;border:1px solid;display:flex;justify-content:space-around;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAAAAAA7suyFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAFuSURBVDjLfdRBa8IwGMbxx7cjEklIiVQqjsoCnvb9P8FACBQKngQHXpTJhJx2mRDZoXUmqfW9WX68f5tAR1tEw3jD5/EjUPKT1e/68NRQvil/X1MUGSbXeno9LRMUGmJ1NbsgSxHFIXEBeoiSENBHlITayc4hojTUTbiJbiGrulC36WT+UWuI28U82BIjakNNlccEwPGWIwCUWy16BNm520QAk+tydsWD6f44gUSzmF6AYUSU11oNkO6cRl92cAsA+PLgX+ybfEKQHVacijOejZc/R1qJHXtChLDf5Iza0SDhvK4mBGf0ng0R3RRjEOCWeiCn1Ech27twS7V9kPOM2WqC7k6d0Xvqh1RTjnEzcEZ9JjkvxFpPcDdwRsdv5zmrK4nQwBkV5jxXmzYUGDij7kfghbBdKDRw5v52nNWlRN/cD9MztSkneGTgjNoxwAtV64DE34T27gSzhcSQgTNqz1kUAjBKvmN6h4uQ8bM/WtmCgAk7YV0AAAAASUVORK5CYII=')"><b>1</b><b>2</b><b>3</b><b>4</b><b>5</b><b>6</b><b>7</b><b>8</b><b>9</b></div>