# Plane not being lit in scene

**URL:** <https://discourse.processing.org/t/plane-not-being-lit-in-scene/310>\
**Category:** p5.js\
**Created:** [May 23, 2018, 8:16pm UTC](https://discourse.processing.org/t/plane-not-being-lit-in-scene/310 "2018-05-23T20:16:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DirtySocrates](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dirtysocrates/32/176_2.png) [@DirtySocrates](https://discourse.processing.org/u/DirtySocrates)\
**Post date:** [May 23, 2018, 8:16pm UTC](https://discourse.processing.org/t/plane-not-being-lit-in-scene/310/1 "2018-05-23T20:16:51Z")

</div>

Hello,

When I run the code below the plane generated is not being illuminated by any light source in the scene. Can someone take a look? I am not sure why it is not getting lit by the pointLight like the rotating boxes are.

```auto
let angle = 0;

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  // Initialize the BG color and light source
  background(200);
  pointLight(255, 255, 255, 0, -200, 200);

  // Generate the horizontal row of rotating boxes.
  for (let x = -200; x < 200; x +=50) {
    push();
    translate(x, 0, 0);
    rotateZ(angle);
    rotateX(angle * 0.01);
    rotateY(angle * 0.5);
    noStroke();
    ambientMaterial(255);
    box(25);
    pop();
  }

  // Generate the plane on the bottom of the scene.
  push();
  translate(0, 100);
  rotateX(HALF_PI);
  noStroke();
  ambientMaterial(200);
  plane(350, 350);
  pop();

  // Rotate the boxes.
  angle += 0.02;
    
}

```

What the above code generates:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/7655aeb15d35e3113ea5ec7c4a2aca9737865f07.png)

---

<div class="post-metadata">

**Author:** ![DirtySocrates](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dirtysocrates/32/176_2.png) [@DirtySocrates](https://discourse.processing.org/u/DirtySocrates)\
**Post date:** [May 23, 2018, 10:48pm UTC](https://discourse.processing.org/t/plane-not-being-lit-in-scene/310/2 "2018-05-23T22:48:33Z")

</div>

What I am trying to generate:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/bdf037603e49d50526ad1b9d84ccfc63724e2c74.jpg)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 25, 2018, 12:01am UTC](https://discourse.processing.org/t/plane-not-being-lit-in-scene/310/3 "2018-05-25T00:01:25Z")

</div>

First guess – this might have to do with the different ways that stroke, fill, alpha and light interact with primitives. Certain combinations can sometimes have surprising results – especially in shapes like spheres, where stokes don’t interact as one might expect.

```auto
/**
 * Box Lighting
 * 2018-05-24 Jeremy Douglass - Processing 3.3.6
 * discourse.processing.org/t/plane-not-being-lit-in-scene/310/2
 * based on Sphere Lighting:
 * forum.processing.org/two/discussion/18352/
 **/
 
float sw, sh, sr; // box width, height, radius
float lightX, lightY;
 
void setup() {
  size(800, 400, P3D);
  textAlign(CENTER,CENTER);
  textSize(12);
  textMode(SHAPE);
  sw = width/7.0;
  sh = height/3.0;
  sr = width/14.0;
}  
void draw() {
  background(64);
  translate(0,0,-70);
 
  stylebox ( sw * 0, sh * 0, sr, "noStroke", 0, "noFill");
  stylebox ( sw * 1, sh * 0, sr, "noStroke", 0, "0");
  stylebox ( sw * 2, sh * 0, sr, "noStroke", 0, "255");
  stylebox ( sw * 0, sh * 1, sr, "0", 1, "noFill");
  stylebox ( sw * 1, sh * 1, sr, "0", 1, "0");
  stylebox ( sw * 2, sh * 1, sr, "0", 1, "255");
  stylebox ( sw * 0, sh * 2, sr, "255", 1, "noFill");
  stylebox ( sw * 1, sh * 2, sr, "255", 1, "0");
  stylebox ( sw * 2, sh * 2, sr, "255", 1, "255");
 
  stylebox ( sw * 4, sh * 0, sr, "noStroke", 0, "noFill");
  stylebox ( sw * 5, sh * 0, sr, "noStroke", 0, "0");
  stylebox ( sw * 6, sh * 0, sr, "noStroke", 0, "255");
  stylebox ( sw * 4, sh * 1, sr, "0", 10, "noFill");
  stylebox ( sw * 5, sh * 1, sr, "0", 10, "0");
  stylebox ( sw * 6, sh * 1, sr, "0", 10, "255");
  stylebox ( sw * 4, sh * 2, sr, "255", 10, "noFill");
  stylebox ( sw * 5, sh * 2, sr, "255", 10, "0");
  stylebox ( sw * 6, sh * 2, sr, "255", 10, "255");
}
 
void stylebox(float x, float y, float r, String strStroke, int strWeight, String strFill){
  pushMatrix();
    translate(x, y, 0);
    translate(r, r, 0);
 
    //// draw box
    pushStyle();
      lightControl();
      strokeWeight(strWeight);
      if(strStroke == "noStroke") { noStroke(); }
      else { stroke(int(strStroke)); }
      if(strFill == "noFill") { noFill(); }
      else { fill(int(strFill)); }
      box(r);
    popStyle();
 
    //// draw label
    translate(0,0,80);
    pushStyle();
      strokeWeight(1);
      fill(255);
      noLights();
      rect(-36,-24,72,48);
      fill(0);
      text(strStroke + "/" + strWeight + "\n" + strFill, 0,0,0);      
    popStyle();
 
  popMatrix();
}
 
void lightControl(){
  // lights();
  directionalLight(255, 204, 204,
    -(mouseX / float(width) - 0.5) * 2,
    -(mouseY / float(height) - 0.5) * 2,
    -1); 
}

```

 ![BoxLighting--screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/4d1e56a4b8877f0b3406810397892199b2b575a6.png)

One basic question testing to ask with 3D lighting – is a rect interacting in the same way that a very thin box does (a box the size of the plane and few pixels thick)? That can really help you narrow down the problem – e.g. if it relates to the type of primitive, or culling, et cetera.

---

<div class="post-metadata">

**Author:** ![kjhollen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kjhollen/32/23_2.png) [@kjhollen](https://discourse.processing.org/u/kjhollen)\
**Post date:** [May 25, 2018, 3:26am UTC](https://discourse.processing.org/t/plane-not-being-lit-in-scene/310/4 "2018-05-25T03:26:26Z")

</div>

This one was actually a [bug in the library](https://github.com/processing/p5.js/issues/2863) that was [fixed just this week](https://github.com/processing/p5.js/pull/2864)! It will be out in the next release.