# screenPositionFunction not projecting correctly

**URL:** <https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019>\
**Category:** Coding Questions\
**Created:** [August 3, 2020, 5:34pm UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019 "2020-08-03T17:34:39Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [August 3, 2020, 5:34pm UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/1 "2020-08-03T17:34:39Z")

</div>

This is my test of the screenPosition function that is not working correctly for me. I have digitized the 6 faces for a basic block and tried drawing them with world coordinates and then screen coordinates. The screen drawn block is not projecting correctly. Can you tell me what is wrong? Magenta is world - White is screen. Click to spin. Thanx.

[https://editor.p5js.org/cln123gp/sketches/dNKVZLsOb](https://editor.p5js.org/cln123gp/sketches/dNKVZLsOb)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 7, 2020, 6:53pm UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/2 "2020-08-07T18:53:45Z")

</div>

You are rotating the XYZ coordinates and projecting your “screen XY” to the rotated XY coordinates.

This is just a quick first pass at this working through your code (modified) with one side only to illustrate how to use this:

> **Click to open! Version 1 Original quick first pass**
>
> ```auto
> var faceXYZ = [];
> var faceXY = [];
> var th = 0;
> 
> function setup() 
> {
> createCanvas(800, 600, WEBGL);
> addScreenPositionFunction();
> noFill();
> strokeWeight(2);
> faceXYZ[0] = [10, 0, 0, 50, 0, 0, 50, 0, 25, 10, 0, 25];
> ortho();
> }
> 
> function draw() 
> {
> background(204);
> push();
> scale(2);
> rotateX(PI/8);
> if (mouseIsPressed) th = th + PI/180;
> rotateY(th);
> stroke(150);
> line(0, 0, 0, 0, 0, -80); // y-axis aka -z gray
> stroke(150);
> line(0, 0, 0, 80, 0, 0); // x-axis aka +x gray
> stroke(0);
> line(0, 0, 0, 0, -80, 0); // vertical axis aka -y white
> polyDrawXYZ(faceXYZ[0]);
> pop();
> 
> translate(20, 20, 0);
> for (i = 0; i < 6; i += 1) polyDrawXY();
> }
> 
> function polyDrawXYZ(xface) 
> {
> // Draw 1 sides of block using world cooordinates
> stroke('magenta');
> beginShape();
> var j = 0;
> for (var i = 0; i < 12; i += 3) 
> {
> vertex(xface[i], xface[i + 1], xface[i + 2]);
> var p1 = screenPosition(xface[i], xface[i + 1], xface[i + 2]);
> faceXY[j] = p1.x;
> faceXY[j + 1] = p1.y;
> j += 2;
> }
> endShape(CLOSE);
> }
> 
> function polyDrawXY() 
> {
> // Draw 1 sides of block using screen coordinates
> stroke(255, 255, 0);
> beginShape();
> for (var i = 0; i < 8; i += 2) 
> {
> vertex(faceXY[i], faceXY[i + 1]);
> }
> endShape(CLOSE);
> }
> 
> ```

> **Click to open! Version 2 New and improved**
>
> ```auto
> var faceXYZ = [];
> var faceXY = [];
> var th = 0;
> 
> function setup() 
> {
> createCanvas(800, 600, WEBGL);
> addScreenPositionFunction();
> noFill();
> strokeWeight(2);
> faceXYZ[0] = [10, 0, 0, 50, 0, 0, 50, 0, 25, 10, 0, 25];
> faceXY[0] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,];
> ortho();
> }
> 
> function draw() 
> {
> background(204);
> push();
> scale(2);
> rotateX(PI/8);
> if (mouseIsPressed) th = th + PI/180;
> rotateY(th);
> stroke(150);
> line(0, 0, 0, 0, 0, -80); // y-axis aka -z gray
> stroke(150);
> line(0, 0, 0, 80, 0, 0); // x-axis aka +x gray
> stroke(0);
> line(0, 0, 0, 0, -80, 0); // vertical axis aka -y white
> polyDrawXYZ(faceXYZ[0]);
> pop();
> 
> //translate(20, 20, 0);
> polyDrawXY(faceXY[0]);
> }
> 
> function polyDrawXYZ(xface) 
> {
> // Draw 1 sides of block using world cooordinates
> stroke('magenta');
> beginShape();
> for (var i = 0; i < 12; i += 3) 
> {
> vertex(xface[i], xface[i + 1], xface[i + 2]);
> var p1 = screenPosition(xface[i], xface[i + 1], xface[i + 2]);
> faceXY[0] [i]= p1.x;
> faceXY[0][i+1] = p1.y;
> faceXY[0][i+2] = p1.z; //This is 0
> }
> endShape(CLOSE);
> }
> 
> //translate(10, 0, 0);
> function polyDrawXY(xface) 
> {
> // Draw 1 sides of block using screen coordinates
> stroke(255, 255, 0);
> beginShape();
> for (var i = 0; i < 12; i += 3) 
> {
> vertex(xface[i], xface[i + 1], 0);
> }
> endShape(CLOSE);
> }
> 
> ```

Examples above **require** this library:  
[https://github.com/bohnacker/p5js-screenPosition](https://github.com/bohnacker/p5js-screenPosition)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/be9518c2ae9fb6bece21e52dccbee7f5191a3987.png)

I will leave the rest with you.

There is also an updated P5.js to link to in your index.html:

> **[cdnjs - The #1 free and open source CDN built to make life easier for developers](https://cdnjs.com/libraries?q=p5.js)**
>
> Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 10% of websites, powered by Cloudflare. We make it faster and easier to load library files on your websites.

`:)`

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [August 9, 2020, 10:42pm UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/3 "2020-08-09T22:42:42Z")

</div>

I have tried many variations on your code. The push and pop seem to play a big role. I tried adding the other faces. You can do any one face but things get crazy with more than one. I loaded your code verbatim and the two rectangles do not stay in the same location to each other. They cross over.

There is nothing else I can try. At this point if you have a suggestion it would be welcome. Otherwise I’m done. Thanx.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 9, 2020, 11:15pm UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/4 "2020-08-09T23:15:02Z")

</div>

Hello,

> [@CND](#):
>
> I loaded your code verbatim and the two rectangles do not stay in the same location to each other. They cross over.

That is because I added this so you could see the two shapes without them overlapping:

```auto
translate(20, 20, 0);

```

Feel free to comment it out!

I just threw this together for proof of concept.  
Focus on the concept and not the code.

Update:

- I added another face.
- I cut and paste sections of my code.
- It works.
- And then I was able to refactor it to slim down the code.
- The rest of faces can be done same way.

Output without translate and another face:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/07196247f341a3a0cd0dba03810357b8445aa83a.png)

You may have one big huge mess but then you have to look at it and think about reducing comment elements down to simple ones.

`:)`

References:

> **[Code refactoring](https://en.wikipedia.org/wiki/Code_refactoring)**
>
> In computer programming and software design, code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior. Refactoring is intended to improve the design, structure, and/or implementation of the software (its non-functional attributes), while preserving its functionality. Potential advantages of refactoring may include improved code readability and reduced complexity; these can improve the source code's maintainability and cr...

> **[reference | p5.js](https://p5js.org/reference/#/p5/push)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [August 11, 2020, 1:37am UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/5 "2020-08-11T01:37:22Z")

</div>

Please send me the revised code. My rectangles aren’t just linear translations. They cross each other in random order. Thank you for your help.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 12, 2020, 12:20am UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/6 "2020-08-12T00:20:06Z")

</div>

> [@CND](#):
>
> Please send me the revised code.

I am only providing you with code that will lead you towards a solution to your project.

I added a Version 2 to previous post above; my Version 1 _was a quick first pass_ version as an example and really needed a rework.  
Version 2 is an improved simple example with one face that can be expanded to more with a bit of effort; you will have to pass some additional parameters to function or rework it to suit you. The one function only works with faceXY[0] but that is easily remedied and I have done this in my code.

> [@CND](#):
>
> My rectangles aren’t just linear translations. They cross each other in random order.

That is great! The examples take XYZ (world) and project it to XY plane (this can be screen).

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fc3bd7a43d7622f6627b9e29493910164d32de5a.png)

`:)`

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [August 12, 2020, 5:41pm UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/7 "2020-08-12T17:41:32Z")

</div>

It is really frustrating to not know my way around this forum well enough to find the revised code or sketch you issued here. It is doing exactly what I expected. Please tell me how to get the new example. Thanx.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 13, 2020, 1:02am UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/8 "2020-08-13T01:02:38Z")

</div>

Hello,

> [@CND](#):
>
> You can do any one face but things get crazy with more than one

Yes indeed!

I am working through your code as an exercise for me; I do enjoy the daily challenges.

Here is what I can share:

> **Click for Code**
>
> ```auto
> 
> //Requires this library:
> //https://github.com/bohnacker/p5js-screenPosition
> 
> var faceXYZ = [];
> var faceXY = [];
> var th = 0;
> 
> function setup() 
> {
> createCanvas(500, 500, WEBGL);
> addScreenPositionFunction();
> noFill();
> strokeWeight(2);
> faceXYZ[0] = [10,0,0, 50,0,0, 50,0,25, 10,0,25];
> faceXYZ[1] = [10,0,25, 50,0,25, 50,-25,25, 10,-25,25];
> faceXYZ[2] = [50,0,25, 50,0,0, 50,-25,0, 50,-25,25];
> faceXYZ[3] = [10,-25,25, 50,-25,25, 50,-25,0, 10,-25,0];
> faceXYZ[4] = [10,-25,25, 10,-25,0, 10,0,0, 10,0,25];
> faceXYZ[5] = [10,-25,0, 50,-25,0, 50,0,0, 10,0,0];
>   
> for (var i = 0; i < 6; i++ )
> {
> faceXY[i] = [0, 0, 50, 0, 0, 50, 0, 50, 0, 50, 0, 0];
> }
> ortho();
> }
> 
> function draw() 
> {
> background(204);
>   
> translate(0, 0, 100);
> 
> //XYZ World
> push();
> scale(2);
> rotateX(PI/8);
> if (mouseIsPressed) th = th + PI/180;
> rotateY(th);
> stroke(150);
>   
> line(0, 0, 0, 0, 0, -80); // y-axis aka -z gray
> stroke(150);
> line(0, 0, 0, 80, 0, 0); // x-axis aka +x gray
> stroke(0);
> line(0, 0, 0, 0, -80, 0); // vertical axis aka -y white
>   
> for (var i = 0; i < 6; i++ )
> {
> polyDrawXYZ(i);
> }
> pop();
>  
> // XY Screen  
> for (var k = 0; k < 6; k++ )
> {
> polyDrawXY(k);
> }
> }
>   
> // ******************************************************************************************** 
> 
> function polyDrawXYZ(j) 
> {
> // Draw 1 side of block using XYZ world cooordinates
> stroke('magenta');
> beginShape();
> for (var i = 0; i < 12; i += 3) 
> {
> vertex(faceXYZ[j][i], faceXYZ[j][i+1], faceXYZ[j][i+2]);
> var p1 = screenPosition(faceXYZ[j][i], faceXYZ[j][i+1], faceXYZ[j][i+2]);
>          
> //faceXY[j][i] ...
> }    
> endShape(CLOSE);
> }
> 
> function polyDrawXY(k) 
> {
> // Draw 1 side of block using XY screen coordinates
>   
> // faceXY[k][i]
> }
>   
> 
> ```

I found it easier to pass around the array element (face) when working through this.  
You have to fill in the missing pieces if you want to try this.

`:)`

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [August 13, 2020, 2:00am UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/9 "2020-08-13T02:00:49Z")

</div>

Hello: This is not my project. I sent in my first entry because your function was not working correctly for me. I am 67 years old and have been writing 3d javascript/canvas code as a hobby for many years. There is something wrong here. You need to help me and yourself find out what that is. It could be Macintosh related. I do not need you to leave me with code to finish for educational purposes. I need your complete revised sketch with the three polygons. If I have to I will rewrite this for Processing and test the screen XY functions there. Thank you.

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [August 22, 2020, 10:30pm UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/10 "2020-08-22T22:30:03Z")

</div>

I was hoping you would submit the final version of the faces test with 3 polygons. I have tried everything I can to make the double array method work with no success. You keep leaving your examples for me to take it from there. I am not able to do that on my own yet. Could you please publish the final version so that I can figure out what is wrong? Thank you.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 23, 2020, 12:52am UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/11 "2020-08-23T00:52:25Z")

</div>

> [@CND](#):
>
> This is not my project.

I will not be assisting further with this.

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [August 29, 2020, 8:04pm UTC](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019/12 "2020-08-29T20:04:41Z")

</div>

You never gave me enough information to find out what is wrong and now you refuse my one last request to answer that question. Please reconsider. Are you absolutely sure that your function works on a Macintosh?