Want to suggest reflected light using shapes3d

Processing Libraries
1

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?

2

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.

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;
}
3

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
Screenshot 2020-11-01 at 5.17.23 PM886×576 96.7 KB

4

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.


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
starmap_8k4096×2048 1.69 MB

5

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:

 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;
}
2 Likes