bohnacker/p5js-screenposition

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.

p5js-screenPosition

This function provides a solution to the missing screenX and screenY functions in p5.js. See processing/p5.js#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 (processing/p5.js#1553). I had to adjust it a bit maybe because p5js changed the way webgl is handled since 2016.

p5js-screenposition's Issues

Add Documentation on p5.Graphics?

From what I've found using the addScreenPositionFunction() on a p5.Graphics object works fine. But I don't know if this is universal. Anyways here's an example sketch if you think it's worth adding to the documentation.

let graphics;

function setup() {
  createCanvas(400, 400);
  graphics = createGraphics(width, height, WEBGL);
  addScreenPositionFunction(graphics);
  
  rectMode(CENTER)
  graphics.rectMode(CENTER);
}

function draw() {
  background(220);
  
  graphics.clear();
  graphics.rotateX(0.010);
  graphics.rotateY(0.011);
  graphics.rotateZ(0.012);
  graphics.square(0, 0, 200);
  image(graphics, 0, 0);
  
  push();
  translate(width/2, height/2);
  const gPoint = graphics.screenPosition(100, 0, 0);
  fill(0, 0, 255);
  square(gPoint.x, gPoint.y, 20);
  pop();
}

By the way thanks for making this library it's been super useful!

Correspondence of x,y co-ordinate of 3D cube into x,y co -ordinate in 2D canvas ?

Hello , thanks for this library implementation. I had a doubt on the implementation with regards to finding corresponding co-ordinates in the 2D canvas. In the sketch below , I have used p5js screen position as suggested. The idea is to have a new cube appear when the x, y position of the mouse is inside the cube. (that is within the x,y co -ordinate of the cube) . However , i am not able to achieve that , I also reset the center position to (0,0,0) for a new co-ordinate system . I am wondering if you give me some pointers on this . The link to the sketch is here Sketch

giving different results with the same vector values.

i have used your code of getting the screenX and y positions but instead of giving me the same result for the same X,Y,Z ?
the way i implemented the code is i used only the addScreenPositionFunction function
so what seems to be the issue ?thanks

can I also use this reversely? knowing canvas position and receiving position in 3d space?

can I also use this reversely? knowing canvas position and receiving position in 3d space?