# Planets with shadows

**URL:** <https://discourse.processing.org/t/planets-with-shadows/14309>\
**Category:** Coding Questions\
**Created:** [September 30, 2019, 7:28am UTC](https://discourse.processing.org/t/planets-with-shadows/14309 "2019-09-30T07:28:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dohanr](https://avatars.discourse-cdn.com/v4/letter/d/ac8455/32.png) [@Dohanr](https://discourse.processing.org/u/Dohanr)\
**Post date:** [September 30, 2019, 7:28am UTC](https://discourse.processing.org/t/planets-with-shadows/14309/1 "2019-09-30T07:28:22Z")

</div>

hope someone can help me with this. I’m using the p5.js lib in webGL. I have a sphere as earth rotating around x,y,z coordinates (0,0,0 - where the sun would be) then a I have another smaller sphere rotating around earth as the moon. I have a ‘pointLight’ that is located at (0,0,0) that’s basically the sun’s light shining in all directions. Unfortunately when the moon is between the sun and the earth it doesn’t cast a shadow onto earth. Does anyone know how I would do this?

```auto
function setup() {

    createCanvas(800, 800, WEBGL);
}

function draw() {
    
    background(0);
    camera(0, -150, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
    pointLight(250, 250, 250, 0, 0, 0);

    globalOrbSpeed+=0.1;
    globalRotSpeed+=0.1;
    

    renderPlanet(imgEarth, -12, 2, 120, 400,0,0, true);
}

function renderPlanet(txture, rotSpeed, orbSpeed, planetRad, transX, transY, tranZ, moonPlanet) {
	push()
    texture(txture); 
    rotateY(radians(globalOrbSpeed*orbSpeed));
    translate(transX,transY,tranZ);
    rotateY(radians(globalRotSpeed*rotSpeed));
    sphere(planetRad, 100, 100);
    if (moonPlanet === true) {
        directionalLight(0, 255, 0, 1, 0, 0);
    	renderPlanet(imgMoon, -30, 18, 36, 220,0,0,false);
    }
    pop()
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 30, 2019, 2:07pm UTC](https://discourse.processing.org/t/planets-with-shadows/14309/2 "2019-09-30T14:07:11Z")

</div>

as your code is not complete…  
we could not test / see what you talk about.

best is you link us to your project  
( or a mini example what only show the problem / question )  
at  
[https://editor.p5js.org/](https://editor.p5js.org/)

as we see in seconds the code and the look,  
possible error msg.  
and not have to worry about missing files…

* * *

your question about  
lights and shadow,  
i think, is not possible on this level.  
but with shaders … lights and shadows might be possible.

---

<div class="post-metadata">

**Author:** ![Dohanr](https://avatars.discourse-cdn.com/v4/letter/d/ac8455/32.png) [@Dohanr](https://discourse.processing.org/u/Dohanr)\
**Post date:** [October 2, 2019, 2:24pm UTC](https://discourse.processing.org/t/planets-with-shadows/14309/3 "2019-10-02T14:24:07Z")

</div>

```auto
let imgEarth;
let imgMoon;

let globalRotSpeed = 1; 
let globalOrbSpeed = 1;

function preload() {

    //loading images for planet textures
	imgEarth = loadImage("earth.jpg");
	imgMoon = loadImage("moon.gif");
}

function setup() {

    createCanvas(500, 500, WEBGL);
}

function draw() {
    
    background(0);
    camera(0, -150, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
    pointLight(250, 250, 250, 0, 0, 0);

    globalOrbSpeed+=0.1;
    globalRotSpeed+=0.1;
    

    renderPlanet(imgEarth, -12, 2, 120, 400,0,0, true);
}

function renderPlanet(txture, rotSpeed, orbSpeed, planetRad, transX, transY, tranZ, moonPlanet) {
	push()
    texture(txture); 
    rotateY(radians(globalOrbSpeed*orbSpeed));
    translate(transX,transY,tranZ);
    rotateY(radians(globalRotSpeed*rotSpeed));
    sphere(planetRad, 100, 100);
    if (moonPlanet === true) {
    	renderPlanet(imgMoon, -30, 18, 36, 220,0,0,false);
    }
    pop()
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 4, 2019, 12:16pm UTC](https://discourse.processing.org/t/planets-with-shadows/14309/5 "2019-10-04T12:16:01Z")

</div>

meanwhile i learned something: // JAVA ONLY // if there is a p5.js version no idea  
PDE / Tools / Add Tool / Libraries /  
PixelFlow 1.3.0 Thomas Diewald  
( restart processing ?)  
PDE / File / Examples / Contributes Libraries / PixelFlow / SkyLight / Skylight\_Basic  
there see a SHADOW  
i could not believe that so i play

add to setup()

```auto
  // new operation
  println("use key [p] for cam info\n [+][-] sun angle (azimuth only)");

```

( at the end ) :

```auto
// public void keyReleased(){
//kll printCam();
// }

public void keyPressed() {
  if ( key == 'p' ) printCam();
  // kll add _____________________________________________________ MOVE SUN
  if ( key == '+' ) skylight.sun.param.solar_azimuth++;
  if ( key == '-' ) skylight.sun.param.solar_azimuth--;
  skylight.reset();
  skylight.update();
}

```