# Want to suggest reflected light using shapes3d

**URL:** <https://discourse.processing.org/t/want-to-suggest-reflected-light-using-shapes3d/25095>\
**Category:** Libraries\
**Created:** [November 1, 2020, 2:06am UTC](https://discourse.processing.org/t/want-to-suggest-reflected-light-using-shapes3d/25095 "2020-11-01T02:06:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![HackinHarry](https://avatars.discourse-cdn.com/v4/letter/h/3e96dc/32.png) [@HackinHarry](https://discourse.processing.org/u/HackinHarry)\
**Post date:** [November 1, 2020, 2:06am UTC](https://discourse.processing.org/t/want-to-suggest-reflected-light-using-shapes3d/25095/1 "2020-11-01T02:06:57Z")

</div>

I’m working on a program that reads data over USB(solved those problems) and displays it as instruments. Specifically, I have a compass and an attitude indicator. I borrowed the compass and it’s really pretty. It uses png images of the compass face, compass ring, and it has a nice image that is transparent with some opaque squares that when overlayed, looks like glass reflecting light. It adds realism.

What I’ve done is draw an attitude indicator using a sphere in shapes3d. I have a transparent image that I draw as an outer sphere. I want to draw some opaque squares, like the compass uses, and draw them on the transparent sphere so that the attitude indicator has a similar look as the compass.

The question is how do I draw opaque white onto an image using Shapes3D library?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 1, 2020, 7:57am UTC](https://discourse.processing.org/t/want-to-suggest-reflected-light-using-shapes3d/25095/2 "2020-11-01T07:57:53Z")

</div>

I experimented a bit with drawing squares on a sphere which is not that easy because the further you go to the north or south the more they become triangles. So you have to use quad(), and depending on the size of the rectangle, maybe multiple quads to avoid the sides become too round (following the latitude lines). On the equator, you can even use rectangles.

```auto
PGraphics texture; 
PShape globe;

float rotX, rotY;

void setup() { 
  size(600, 600, P3D); 
  texture = createGraphics(400, 400);
  int w = 30; 
  texture.beginDraw();
  texture.fill(255);
  texture.quad(0, w+w/3, w, w+w/3, w-w/8, w+w, w/8, w+w);
  texture.rect(0, 160, 10, 20);
  texture.endDraw();
  stroke(255, 80);
  sphereDetail(99);
  globe = createShape(SPHERE, 200);
  // globe.setStroke(false);
  sphereDetail(99);
  globe.setTexture(texture);
  noStroke();
}

void draw() { 
  background(0); 
  translate(width/2, height/2); 
  rotateX(rotX);
  rotateY(rotY);
  shape(globe);
}

void mouseDragged() {
  rotY -= (mouseX - pmouseX) * 0.01;
  rotX -= (mouseY - pmouseY) * 0.01;
}

```

---

<div class="post-metadata">

**Author:** ![HackinHarry](https://avatars.discourse-cdn.com/v4/letter/h/3e96dc/32.png) [@HackinHarry](https://discourse.processing.org/u/HackinHarry)\
**Post date:** [November 1, 2020, 5:33pm UTC](https://discourse.processing.org/t/want-to-suggest-reflected-light-using-shapes3d/25095/3 "2020-11-01T17:33:51Z")

</div>

Thanks, noel. I’ve been playing with tint and DISABLE\_DEPTH\_TEST. What’s got me stupified is that I once did something similar with Shapes3d and then that library got updated and the methods are different now. I’ll get something basic working and post it.

Just for the record, here’s what it looks like now.

 ![Screenshot 2020-11-01 at 5.17.23 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7eaa654453a6673547ebadac914be27e2113ccb1.jpeg)

---

<div class="post-metadata">

**Author:** ![HackinHarry](https://avatars.discourse-cdn.com/v4/letter/h/3e96dc/32.png) [@HackinHarry](https://discourse.processing.org/u/HackinHarry)\
**Post date:** [November 6, 2020, 12:10am UTC](https://discourse.processing.org/t/want-to-suggest-reflected-light-using-shapes3d/25095/4 "2020-11-06T00:10:25Z")

</div>

Here’s what I am trying to do. I’m using Shapes3d, but it doesn’t seem to allow me to draw on the texture.

```auto

import shapes3d.*;

PImage texmap;
PGraphics texture;
Ellipsoid earth;

public void setup() {
  
  hint(DISABLE_DEPTH_TEST);
  size(1275, 750, P3D);
  blendMode(SCREEN);
      
  texmap = loadImage("any_image.jpg"); //("alphatest.png");
  texture = createGraphics(texmap.width, texmap.height);
  initSphere();
  addHorizonLIne();
  
  earth = new Ellipsoid(
    93, 93, 93, // 3 orthogonal radii
    72, // number of segments (in XZ plane)
    72 // number of slices along Y axis
   );
    
  earth.texture(this, "any_image.jpg") //"starmap_8k.jpg") //"alphatest.png") // .texture(this, "sphere_bckgrnd6.png") // .texture(this, "celestial_grid4.png") // load and set the texture for this shape
    .drawMode(S3D.TEXTURE); 
        earth.moveTo(new PVector(0, 0, 0));
        earth.strokeWeight(1.0f);
        earth.stroke(color(255, 255, 0));
         earth.moveTo(20, 40, -80);
        earth.moveTo(0, 0, 0);
        earth.tag = "Earth";
        earth.drawMode(Shape3D.TEXTURE); 
}

public void draw() {
 background(0); 
 pushMatrix();   
 translate(width/2,height/2);
 earth.draw(getGraphics());
 popMatrix();
  
}

public void initSphere() {
 texture.beginDraw();
 texture.image(texmap,0,0);
 texture.endDraw();
}

public void addHorizonLIne() {
 texture.beginDraw();
 texture.stroke(255,0,0);
 texture.strokeWeight(4);
 texture.line(0,texture.height/2,texture.width,texture.height/2);
 texture.line(width/2,0,width/2,height);
 texture.endDraw();

}

```

Here’s a .jpg of stars.

 ![starmap_8k](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0835572b3304e021e3b7eafa7afc0e2e9055fcce.jpeg)

---

<div class="post-metadata">

**Author:** ![HackinHarry](https://avatars.discourse-cdn.com/v4/letter/h/3e96dc/32.png) [@HackinHarry](https://discourse.processing.org/u/HackinHarry)\
**Post date:** [November 7, 2020, 1:28am UTC](https://discourse.processing.org/t/want-to-suggest-reflected-light-using-shapes3d/25095/5 "2020-11-07T01:28:26Z")

</div>

I got somewhere finally. I read the processing reference. Yes, I can draw on the texture, then save it and then load the saved image. Here’s the code:

```auto
 import shapes3d.*;

PImage texmap;
PGraphics texture;
Ellipsoid earth;
float rotx = PI/4;
float roty = PI/4;

public void setup() {
  
  hint(DISABLE_DEPTH_TEST);
  size(1275, 750, P3D);
  blendMode(SCREEN);
      
  texmap = loadImage("starmap_8k.jpg"); //("alphatest.png");

  texture = createGraphics(texmap.width, texmap.height);
  addHorizonLine();

  texture.save("outImage.jpg");
  texmap = loadImage("outImage.jpg");
  texture = createGraphics(texmap.width,texmap.height);
  
  earth = new Ellipsoid(
    193, 193, 193, // 3 orthogonal radii
    72, // number of segments (in XZ plane)
    72 // number of slices along Y axis
   );
    
  earth.texture(this, "outImage.jpg") 
  .drawMode(S3D.TEXTURE); 

}

public void draw() {
 background(0);

 pushMatrix();   
 translate(width/2,height/2);
   rotateX(rotx);
  rotateY(roty);

 earth.draw(getGraphics());

 popMatrix();
  
}

public void addHorizonLine() {

 texture.beginDraw();
 texture.image(texmap,0,0);
 texture.stroke(255,0,0);
 texture.strokeWeight(4);
 texture.line(0,texture.height/2,texture.width,texture.height/2);
 texture.line(texture.width/2,0,texture.width/2,texture.height);
 texture.endDraw();

}

void mouseDragged() {
  float rate = 0.01;
  rotx += (pmouseY-mouseY) * rate;
  roty += (mouseX -pmouseX) * rate;
}

```