Skip to content
This function provides a solution to the missing screenX and screenY functions in p5.js. See https://github.com/processing/p5.js/issues/1553 for the discussion.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Update 02-instance-mode.html Jul 31, 2019
img moved images Aug 2, 2019
lib initial commit Jul 19, 2019
.gitignore Create .gitignore Oct 15, 2019
LICENSE Initial commit Jul 19, 2019
README.md Update README.md Aug 2, 2019
addScreenPositionFunction.js implemented resetMatrix and applyMatrix Jul 19, 2019

README.md

p5js-screenPosition

screenPosition-Cover

This function provides a solution to the missing screenX and screenY functions in p5.js. See https://github.com/processing/p5.js/issues/1553 for the discussion.

This is work in progress.

As far as I could find out there should be anything implemented to make it work perfectly in any mode (2D, WEBGL, angleMode DEGREES or RADIANS, normal or instance mode). If you'll find a case that isn't working correctly, please file an issue.

Usage

For a quick look on what it's doing see https://editor.p5js.org/bohnacker/sketches/nUk3bVW7b.

1. Download

Download the latest release of addScreenPositionFunction.js.

2. Use it in your project

Link to it in your HTML file. It's only working in combination with p5.js.

<script src="p5.js"></script>
<script src="addScreenPositionFunction.js"></script>

3. Initializing

Call the function addScreenPositionFunction() after creating the canvas.

function setup() {
  createCanvas(400, 400);
  addScreenPositionFunction();
}

If your using p5.js in instance mode you have to pass the instance:

p.setup = function() {
  p.createCanvas(400, 400);
  addScreenPositionFunction( p );
};

Quite similar if you want to use the function with offscreen graphics:

graphics = createGraphics(400, 400);
addScreenPositionFunction( graphics );

4. Getting the screen position

Now you can use screenPosition(x, y, [z]) to get the position of a coordinate on screen. It returns a p5.Vector.

var p = screenPosition(-100, 50, 0);

Or giving a p5.Vector:

var v = createVector(-100, 50, 0)
var p = screenPosition( v );

Or giving an array with x, y, z coordinates:

var v = [-100, 50, 0];
var p = screenPosition( v );

Acknowledgements

Thanks to Thibault Coppex (@tcoppex) for the 3d-modelview-projection-math he supplied in the issue discussion thread (https://github.com/processing/p5.js/issues/1553). I had to adjust it a bit maybe because p5js changed the way webgl is handled since 2016.

You can’t perform that action at this time.