Planets with shadows

p5.js Coding Questions
1

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?

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()
}
1 Like
2

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/

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.

2 Likes
3 
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()
}
5

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()

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

( at the end ) :

//  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();
}