Mouse coordinates as inputs

I’d like to use mouse X/Y position to control the rotation of objects (to create a parallax effect). Is there a way to grab the X and Y mouse positions relative the prototype units? I tried adding the following to a javascript node but I don’t really know what I’m doing so it didn’t work:

var self = this;
var x = self.clientX;
var y = self.clientY;
outputs.xPos = x;
outputs.yPos = y;

1 Like

Would it work listening to the canvas pointer events and tracking the delta?

function onPointerEvent(event) {
  console.log("onPointerEvent", event.offsetX, event.offsetY);
}
        
 canvas = document.querySelector('canvas');
 canvas.addEventListener('mousemove', onPointerEvent, false);
1 Like

I tested Mathias suggestion and it works well in Chrome. But this will get you the coordinates relative to the current size of the canvas element, not as ‘prototype units’. So if your browser is rendering the canvas element in a different size than you specified in the Noodl settings you need to add a couple lines of code to correct for this.

A complete example would build upon Mathias answer and look something like this:

define({
    outputs: {
        mouseX: "number",
        mouseY: "number"
    },
    setup: function(inputs, outputs) {
        var self = this;
        
        function onPointerEvent(event) {
            // position relative to rendered size
            var positionX = event.offsetX;
            var positionY = event.offsetY;

            // get canvas variables rendered size and your specified size
            var c = document.querySelector('canvas');
            var renderedWidth = parseInt(c.style.width);
            var renderedHeight = parseInt(c.style.height);
            var definedWidth = c.width;
            var definedHeight = c.height;

            // correct position, send it to outputs and flag outputs as dirty
            var correctedPositionX = Math.round(definedWidth/renderedWidth*positionX);
            var correctedPositionY = Math.round(definedHeight/renderedHeight*positionY);
            outputs.mouseX = correctedPositionX;
            outputs.mouseY = correctedPositionY;
            self.flagOutputDirty("mouseX");
            self.flagOutputDirty("mouseY");
            
            //console.log("corrected positions:", correctedPositionX, correctedPositionY);
        }

        var canvas = document.querySelector('canvas');
        canvas.addEventListener('mousemove', onPointerEvent, false);
    }
});

Just connect outputs mouseX and mouseY to your prototype as you see fit.

1 Like

I’d recommend using the Touch Position node. It’ll give you the coordinates in prototype units.

If you need it relative to a specific visual node you can create expressions that look something like touchX - screenX and touchY - screenY using the Screen Position X/Y outputs and Touch Position nodes.

1 Like