Solves issue #4214

[Garima3110]

trafficstars

Changes: Solves issue #4214

I have tried implementing the linePerspective() method to solve this issue. @davepagurek Please let me know is this the right approach for its implementation or not. I would love to have suggestions to this. Thanks a lot!

Sample sketch: https://editor.p5js.org/Garima3110/sketches/p8jRwB5dw

PR Checklist

• [x] npm run lint passes
• [x] Inline documentation is included / updated
• [ ] Unit tests are included / updated

[perminder-17]

Thank you for your efforts, Garima. I apologize if I misunderstood your approach, but I have a concern about the linePerspective() function. It seems that the issue with the misbehavior of strokeWeight occurs after the perspective() function is called, right? In your sketch, it seems to happen by default when we remove the linePerspective(true/false) method. Additionally, when we use linePerspective(true/false), setting it to true seems to work well in your sketch. However, if someone sets linePerspective to false, it should use the default perspective camera. Perhaps we could implement something like this? Currently, when we use false, the stroke misbehaves in both cases, with and without the perspective call.

Actual

when linePerspective(false) with and without perspective

Maybe it should be like

I think opting for this approach could be the most straightforward, as opposed to delving into intricate calculations for a custom perspective. However, I'm not entirely certain if this is the correct solution. I apologize if my approach doesn't prove effective.

[Garima3110]

I think opting for this approach could be the most straightforward, as opposed to delving into intricate calculations for a custom perspective. However, I'm not entirely certain if this is the correct solution. I apologize if my approach doesn't prove effective.

Thanks a lot @perminder-17 for your inputs. I'll just look into what's going wrong in here and get back to you soon!

[Garima3110]

Yeah sure! I’ll just do that and get back to you soon. thanks a lot for the review.

[Garima3110]

@davepagurek Sorry to directly ping you here, but its just to tell you that I had made the changes suggested by you. Please review them whenever you find time . No hurries at all ! Thanks a lot..!

[Garima3110]

@davepagurek I have made the changes as suggested. Please have a look , and let me know of any other change. Thank you!

[Garima3110]

Thanks @davepagurek .I’ll work on these suggestions and get back to you soon!

[Garima3110]

@davepagurek , Here's the sketch with the latest build including the changes you suggested: https://editor.p5js.org/Garima3110/sketches/p8jRwB5dw Please have a look. Thankyou!

[Garima3110]

Doing createCanvas(400,400,WEBGL) causes the error to go away. Maybe rather than creating a camera in this if statement, we can throw an error saying that the method needs to be called in WebGL mode?

I am not exactly sure how to go about it , as I think directly writing this won't do the job:

  if (!this._renderer===constants.WEBGL) {
    throw new Error('linePerspective() must be called in WebGL mode.');
  }

It would be great if you could guide me through the process whenever you find time. Thanks a lot..!

[davepagurek]

Something pretty close to that! I think the way you would check would be:

if (!(this._renderer instanceof p5.RendererGL)) {
  throw new Error('linePerspective() must be called in WebGL mode.');
}

[Garima3110]

Great! It works as expected. Thanks @davepagurek And let me know for any further changes to this.

[davepagurek]

Some last thoughts about the examples: right now it's a bit unclear what the difference is. How do you feel about:

• Changing the rotation a bit (I tried rotateY(PI/24)) so you can see the cubes getting smaller into the distance more clearly in the small canvas size
• Adding setAttributes({ antialias: true }) after creating the canvas to get a bit better line quality
• Maybe making mouse click toggle back and forth rather than just turning off perspective? e.g. linePerspective(!linePerspective())

https://github.com/processing/p5.js/assets/5315059/9e47198f-c8f1-44b2-a4b4-88f31f15386e

[Garima3110]

• Changing the rotation a bit (I tried rotateY(PI/24)) so you can see the cubes getting smaller into the distance more clearly in the small canvas size
• Adding setAttributes({ antialias: true }) after creating the canvas to get a bit better line quality
• Maybe making mouse click toggle back and forth rather than just turning off perspective? e.g. linePerspective(!linePerspective())

Great suggestions @davepagurek I have made the changes please have a look!

[Garima3110]

Awesome, thanks for all the changes! The examples look great, I think this is good to go.

Thanks a lot @dave for the help while working on this! Learnt a lot.