# Rotating a 2D PImage within a 3D P3D environment? **URL:** \ **Category:** Beginners\ **Created:** [May 5, 2021, 10:47am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874 "2021-05-05T10:47:42Z")\ **Posts on this page:** 14\ **Page:** 1

**Author:** ![Chubbulus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chubbulus/32/13049_2.png) [@Chubbulus](https://discourse.processing.org/u/Chubbulus)\ **Post date:** [May 5, 2021, 10:47am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/1 "2021-05-05T10:47:42Z")

Hi. I’m wondering how I could get the blue square shown floating within the image to instead lay horrizontally across the center of the skybox sphere rather than vertically as it is now. Any help? ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/38539dbfdd2591d2bca228716557a4e73af39664.png) ---

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\ **Post date:** [May 5, 2021, 10:58am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/2 "2021-05-05T10:58:03Z")

Essentially say rotateX(radians(90)); before image () command Combining translate and rotate is a bit tricky ---

You might want to use noStroke(); before the sky sphere ---

**Author:** ![Chubbulus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chubbulus/32/13049_2.png) [@Chubbulus](https://discourse.processing.org/u/Chubbulus)\ **Post date:** [May 5, 2021, 11:08am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/4 "2021-05-05T11:08:04Z")

Thanks a bunch! Would there be any way to lower the position of the image towards the bottom of the sphere? Also, where would the noStroke(); need to go? Before the background draws in void Draw() or in void Setup()? ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a7527f1599a6cb173d545563f0fa97d2515f4ed4.png) ---

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\ **Post date:** [May 5, 2021, 11:12am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/5 "2021-05-05T11:12:12Z")

> [@Chubbulus](#): > > Would there be any way to lower the position of the image towards the bottom of the sphere? Sure! Say translate (0,330,0); before rotate and image() ---

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\ **Post date:** [May 5, 2021, 11:12am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/6 "2021-05-05T11:12:47Z")

> [@Chubbulus](#): > > where would the noStroke(); need to go? In draw() directly before you draw the sky sphere ---

**Author:** ![Chubbulus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chubbulus/32/13049_2.png) [@Chubbulus](https://discourse.processing.org/u/Chubbulus)\ **Post date:** [May 5, 2021, 11:13am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/7 "2021-05-05T11:13:20Z")

Like this? It currently still seems to draw the lines ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e18f1e4271471e75afb8d84e462d9fea54de3c3a.png) ---

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\ **Post date:** [May 5, 2021, 11:21am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/8 "2021-05-05T11:21:46Z")

Ah, oh, it’s a shape!! Did you try backgroundOB.setStroke(false); in setup (( Or backgroundOB.noStroke(); or whatever the command is? ---

**Author:** ![Chubbulus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chubbulus/32/13049_2.png) [@Chubbulus](https://discourse.processing.org/u/Chubbulus)\ **Post date:** [May 5, 2021, 11:23am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/9 "2021-05-05T11:23:24Z")

Yea I used a Sphere and made it larger than what the camera shows so it shows from the inside. And I’ll give that a try! ---

**Author:** ![Chubbulus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chubbulus/32/13049_2.png) [@Chubbulus](https://discourse.processing.org/u/Chubbulus)\ **Post date:** [May 5, 2021, 11:24am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/10 "2021-05-05T11:24:22Z")

> [@Chrisir](#): > > backgroundOB.setStroke(false); Thanks! That worked!! ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f487269286dd5873acdfdd7ec9d9df04a50ad8ae.jpeg) ---

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\ **Post date:** [May 6, 2021, 11:21am UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/11 "2021-05-06T11:21:50Z")

I always wonder how a skysphere might work. How did you make the shape for the sky sphere? How big is it? ---

**Author:** ![Chubbulus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chubbulus/32/13049_2.png) [@Chubbulus](https://discourse.processing.org/u/Chubbulus)\ **Post date:** [May 6, 2021, 12:01pm UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/12 "2021-05-06T12:01:45Z")

I created a sphere primative using PShape and set it to size 6000 (which seems to be the limit before it gets a bit glitchy) and then textured it with my skybox texture. Then I made sure that the PeasyCam I was using was within that sphere at the center (which it should defaultly be) ---

**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:** [May 6, 2021, 12:36pm UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/13 "2021-05-06T12:36:26Z")

Hello, I encourage you to [peruse](https://www.merriam-webster.com/dictionary/peruse) the resources available here: - The Processing website has references, examples, tutorials, etc. [https://processing.org/](https://processing.org/) - Processing has lots to offer! An exploration of the tabs will reveal what is available; libraries, tools, _ **examples** _ and more. ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1d6a45100f4930df324acb8966086c8eaa28eee4.png) - The Coding Train [https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw) [https://thecodingtrain.com/](https://thecodingtrain.com/) - Happy Coding [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/) `:)` ---

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\ **Post date:** [May 6, 2021, 1:05pm UTC](https://discourse.processing.org/t/rotating-a-2d-pimage-within-a-3d-p3d-environment/29874/14 "2021-05-06T13:05:28Z")

Thanks a ton for your explanation!