Hey everyone, I created this sketch for a bunch of emojis orbiting around one emoji and I am trying to make them bounce off each other when they touch, can someone please help me on how to do that? Here is the code I am using:

// importing the Peasy Cam library
import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.geometry.*;

// declaring the main emoji
Planet sun;
//declairing the Peasy Cam 
PeasyCam cam;
// declaring the PImage function
PImage img;
// declairing the the texture
PImage[] textures = new PImage[7];
// declaring the particle system

void setup() {

  size(displayWidth, displayHeight, P3D);


  img = loadImage("1.jpg");
  textures[0]= loadImage("2.jpg");
  textures[1]= loadImage("3.jpg");
  textures[2]= loadImage("4.jpg");
  textures[3]= loadImage("5.jpg");
  textures[4]= loadImage("6.jpg");
  textures[5]= loadImage("7.jpg");
  cam = new PeasyCam(this, 500);
  sun = new Planet (100, 0, 0, img);
  sun.spawnMoons(10, 4);
}

void draw() {

  background(0);
  lights();
  ambientLight(129, 62, 0);
  //translate(displayWidth, displayHeight);
  noFill();
  stroke(255);
  strokeWeight(1);
  //rotateY(frameCount/200.0);
  box(4000);

  lights();
  ambientLight(129, 62, 0);
  directionalLight(51, 102, 126, 0, -1, 0);
  spotLight(255, 0, 0, width/2, height/2, 400, 0, 0, -1, PI/4, 2);

  sun.show();
  sun.orbit();
}

class Planet {
  float radius;
  float angle;
  float distance;
  Planet [] planets;
  float orbitSpeed;
  PVector v;
  PShape globe;
  float mass=1;


  Planet(float r, float d, float o, PImage img ) {
    v = PVector. random3D();
    radius = r;
    angle = random(20);
    distance= d;
    v.mult(distance);
    orbitSpeed = o;

    noStroke();
    noFill();
    globe = createShape(SPHERE, radius);
    globe.setTexture(img);
  }
  void spawnMoons(int total, int level) {
    planets = new Planet[total];
    for (int  i = 0; i<planets.length; i++) {

      float r= random(level*10);

      float d = random(100, 1000);

      float o = random (-0.01, 0.02);

      int index = int(random (textures.length));
      planets[i]= new Planet (r, d, o, textures[index]);

      if (level<1) {
        int num = int(random(0, 5));
        planets[i].spawnMoons(num, level+1);
      }
    }
  }

  void orbit() {
    angle =  angle + orbitSpeed/mass;
    if (planets !=null) {
      for (int  i = 0; i<planets.length; i++) {
        planets[i].orbit();
      }
    }
  }
  void show() {
    pushMatrix();
    noStroke();
    PVector v2 = new PVector(1, 0, 1);
    PVector p = v.cross(v2);
    rotate (angle, p.x, p.y, p.z);

    translate(v.x, v.y, v.z);
    shape(globe);
    if (planets !=null) {
      for (int  i = 0; i<planets.length; i++) {
        planets[i].show();
      }
    }
    popMatrix();
  }
  void bounce() {
  }
}

I would really appreciate your help Thanks

i whant to put an image in to the shape but its coming out white can anyone help

`class astroid {`
  // An astroid angle, speed, size, rotation
  float angle, speed, size, rotSpeed;
  float position;
  float rotation;
  float xoff, yoff;
  float x, y;
  PShape s;  // The PShape object - Keeps the astroid shape
  float i;
  int id;


  // Constructor  

  astroid(float _angle, float _speed, float _size, float _rotSpeed, float _xoff, float _yoff, int _id) {
    angle = _angle;
    speed = _speed;
    size = _size;
    rotSpeed = _rotSpeed;
    xoff = _xoff;
    yoff = _yoff;
    id = _id;
    if (xoff<1000) {
      x = 250+500*cos(angle)+xoff;
      y = 250+500*sin(angle)+yoff;

    } else {
      x = _xoff-2000;
      y = _yoff-2000;
    }
    rotation = 0; 
    // Generate the shape of the astroid - Some variations for all
    s = createShape();

    s.beginShape();
    //s.fill(2        55, 255, 170);
    //s.setTexture(
    s.setTexture(ast);
    s.noStroke();
    for (i=0; i<TWO_PI; i=i+PI/(random(4, 11))) {
      s.vertex(random(ast_size*0.8, ast_size*1.2)*cos(i), random(ast_size*0.8, ast_size*1.2)*sin(i));
    }
    s.endShape(CLOSE);
  }

  // Increases the speed. Used in the end of the game to clear screen of astroids
  void incSpeed() {
    speed = speed * 1.02;
  }

  // Update position, return true when out of screen
  boolean update() {
    int i;
    x = x - cos(angle)*speed;
    y = y - sin(angle)*speed;
    rotation = rotation + rotSpeed; 

    // Check for astroid vs astroid collision
    for (i = 0; i<astroids.size(); i++) {
      astroid a = astroids.get(i);
      if ((a != this) && (a.coll(x, y, ast_size*size, id))) {
        if (size > 1) {
          astroids.add(new astroid(angle-random(PI/5, PI/7), speed+random(0, speed/2), size/2, rotSpeed, 2000+x, 2000+y, id));
          astroids.add(new astroid(angle+random(PI/5, PI/7), speed+random(0, speed/2), size/2, rotSpeed, 2000+x, 2000+y, id));    
          ast_id++;
        }
        astroids.remove(i);
      }
    }

    pushMatrix();
    // Set position as the new 0,0 
    translate(x, y);
    // Rotate screen "angle" 
    rotate(rotation);
    // Draw astroid
    scale(size);
    shape(s);
    texture(ast);
    // Bring back normal perspektive
    popMatrix();

    if (x<-300 || x>800 || y<-300 || y>800) {
      return true;
    } else {
      return false;
    }
  }

  //
  boolean coll(float _x, float _y, float _size, int _id) {
    float dist;

    dist = sqrt ((x-_x)*(x-_x) + (y-_y)*(y-_y));

    // Check if distance is shorter than astroid size and other objects size
    if ((dist<(_size+ast_size*size)) && (id!=_id)) {
      // Collision, 
      if (_id>0) id = _id;
      if (size > 1) {
        // If the astroid was "large" generate two new fragments
        astroids.add(new astroid(angle-random(PI/5, PI/7), speed+random(0, speed/2), size/2, rotSpeed, 2000+x, 2000+y, id));
        astroids.add(new astroid(angle+random(PI/5, PI/7), speed+random(0, speed/2), size/2, rotSpeed, 2000+x, 2000+y, id));
      }
      return true;
    } else { 
      return false;
    }
  }
}

some improvement on how to display a car / ship using shape() command: you need to use the position x here!

Ship ship;
// PImage img;

void setup() {
  size(800, 800);
  //  img = loadImage("Ecar.jpg");
  ship = new Ship();
}

void draw() {
  background(51);

  ship.show();
  ship.move();
}

void keyPressed() {
  if (keyCode == RIGHT) {
    ship.setDir(1);
  } else if (keyCode == LEFT) {
    ship.setDir(-1);
  }
}

// =========================================

class Ship {

  float x, xdir;
  PShape car;

  Ship() {
    x = width/2-40;
    xdir = 0;

    car = createShape(RECT, 0, 0, 100, 200);
    car.setFill(color(255, 0, 0)); // red 
    //  car.setTexture(img);
  }//constr 

  void show() {
    shapeMode(CENTER);
    shape(car, x, height/2);
  }

  void setDir(float dir) {
    xdir = dir;
  }

  void move() {
    x += xdir;
  }
  //
}//class
//

Hi im trying to make a car game where the car needs to do a zig zag course through other cars. I cant moove the image for some reason.

`Ship ship;
PImage img;
void setup() {
  size(800, 800);
  img = loadImage("Ecar.jpg");
  ship = new Ship();
  }

void draw() {
  background(51);
  ship.show();
  ship.move();
}
void keyPressed() {


  if (keyCode == RIGHT) {
    ship.setDir(1);
  } else if (keyCode == LEFT) {
    ship.setDir(-1);
  }
}`


`class Ship {
  float x, xdir;
  PShape car;

  Ship() {
    this.x = width/2-40;
    this.xdir = 0;
    noStroke();
    fill(255,0,0);
    car = createShape(RECT, this.x, height-300, 100, 200);
    car.setTexture(img);
  }

  void show() {
    fill(255);
    rectMode(CENTER);
    shape(car);
    //rect(this.x, height-50, 20, 60);
  }

  void setDir(float dir) {
    this.xdir = dir;
  }

  void move() {
    this.x += this.xdir*5;
  }
}`

@ Jeremy Thanks for your patience.

There are no lights in my P3D sketch, so kinda pre-lighting ;)

This example has camera with nav, all cubes in their positions and a primitive sphere with a texture, the sphere can be rotated and the cubes can be selected, though nothing will happen with the cubes other than a hightlight. Hover over a cube and you get it's ID scribbled in top left corner.

Code is stripped down but still quite a bit : // // LMB + drag to move around globe // LMB double click to reset view // RMB click over a node to select ( in this example won't do anything other than highlight it for now // RMB double click to deselect all nodes // LEFT/RIGHT Arrow keys to rotate globe around it's Y axis // UP/DOWN Arrow keys to rotate globe around it's X axis //

    PGraphicsOpenGL pg;
    MyCamera cam;
    //
    char nNodes = 156;       //cubes/light proxies
    Node nodes[] = new Node[nNodes];
    Node picked = null;

    //Preset cube colors (outline)
    final color defaultNodeStroke = color(240, 240, 240);
    final color overNodeStroke = color(0, 255, 0);
    final color activeNodeStroke = color(255, 0, 0);
    color foundColorStroke;
    //
    PShape globe; //image mapper sphere base
    float globeRadius = 110;
    float globeRotX = 0;
    PImage img;   
    String currentNode;

    void settings() {
      size(1000, 1000, P3D);
    }


    void setup() {


      //Build & textureGlobe
      img = loadImage("http://" + "www.jbcse.com/images/reference/world32k.jpg");  
      globe = createShape(SPHERE, globeRadius);
      globe.setStroke(false);
      globe.setTexture(img); 


      cam = new MyCamera(400);
      camera(0, 0, 400, 0, 0, 0, 0, 1, 0); //cam start up values

      //Create Nodes(cubes)
      for (int i = 0; i < nodes.length; i++) //
      {          //needs some adjustments - basically mapping real 3D world to processing world
        nodes[i] = new Node("" + i, 0xff000000 + i, new PVector(map(nodeVerts[i][0], 0, 255, -128, 128), map(nodeVerts[i][1], 0, 255, 128, -128), map(nodeVerts[i][2], 0, 255, 128, -128)));
      }
      pg = (PGraphicsOpenGL)createGraphics(width, height, P3D);
    }


    void draw() {

      noLights();
      background(60); 
      pushMatrix(); 
      shape(globe, 0, 0); //globe draw
      for (int i = 0; i < nodes.length; i++)  nodes[i].render();  // Cube render

      //cube picker
      picked = pickCube(mouseX, mouseY);
      if (picked != null) 
      { 
        picked.Over = true;
        currentNode = picked.name; // quick bodge
      } else {
        for (int i = 0; i < nodes.length; i++) {
          if (nodes[i].Active == false) {
            nodes[i].Over = false;
          }
        }
      }

      camera();
      //
      hint(DISABLE_DEPTH_TEST); 
      fill(255);
      textSize(30);  
      text("NODE:"+currentNode, 20, 40);      //display ID of node hovered over 
      hint(ENABLE_DEPTH_TEST); 
      //
      popMatrix();
    }


    //--------------------------------------------------------->>   Mouse & Key Input
    void mouseClicked(MouseEvent event) { 
      if (mouseButton == LEFT) {
        if (event.getCount() == 2) {  // double clicked left btn resets cam position 
          cam.reset();
        }
      } else if (mouseButton == RIGHT && event.getCount() == 2) { // double click right button deselects all nodes
        deselectAllNodes();
      } else if (mouseButton == RIGHT && picked != null) {  
        if (picked.Over == true) { 
          picked.Active = !picked.Active; // right click on a node to select
        }
      }
    }

    void mouseDragged() {
      cam.mouseDragged();
    }


    void mouseWheel(MouseEvent event) {  
      int e = event.getCount();
      cam.mouseWheel(e); // zoom cam in/ out
    }


    void keyPressed() { 
      if (key == CODED) {

        switch(keyCode) {

        case LEFT :    //spin globe left on y axis
          globe.rotateY(radians(-1)); 
          globeRotY --;
          break;

        case RIGHT:    //spin globe right on y axis
          globe.rotateY(radians(1)); 
          globeRotY ++;
          break;

        case UP:    //spin globe up on x axis 
          globe.rotateX(radians(1));
          break;

        case DOWN:    //spin globe down on x axis 
          globe.rotateX(radians(-1));
          break;
        }
      }
    }


    //------------------------------------------------>> Cam Class, NodeCubes & Picker


    //----------------------------------------->>>CAMERA CLASS<<<-------------------------------
    class MyCamera {
      PVector camPos, camLookAt, camUp; 
      float theta, phi;
      float camRadius, last_camRadius; 
      float mouseNowX, mouseNowY, last_mouseNowX, last_mouseNowY ; 
      boolean camReset = false; 

      MyCamera(float t_camRadius) {
        camRadius = t_camRadius;
        camPos = new PVector(0, 0, camRadius); 
        camLookAt = new PVector(0, 0, 0);
        camUp = new PVector(0, 1, 0);
      }


      public void mouseWheel(float zoom) {
        camRadius = constrain(cam.camRadius+zoom, 50, 400);
        camRun(); 
        last_camRadius = camRadius;
      }

      public void mouseDragged() {
        if (mouseButton == LEFT) {
          mouseNowX += mouseX-pmouseX;
          mouseNowY += mouseY-pmouseY;
          camRun();
        }
      }

      public void camRun() {
        //calc angles
        theta = map(mouseNowX, 0, width, 0, 360);
        phi = map(mouseNowY, 0, height, 60, 220);  
        //calc position from angles 
        camPos.x = (1.0* camRadius) * cos (radians(theta)) +camLookAt.x; 
        camPos.z = (1.0* camRadius) * sin (radians(theta)) +camLookAt.z;  
        camPos.y = ((1.0* camRadius) * cos (radians(phi)) +camLookAt.y)-20;
        //apply vectors to camera
        camera(camPos.x, camPos.y, camPos.z, 
          camLookAt.x, camLookAt.y, camLookAt.z, 
          camUp.x, camUp.y, camUp.z);
      }

      public void reset() { 
        camera(0, 0, 400, 0, 0, 0, 0, 1, 0); 
        camRadius = 400;
        camReset = true;
      }
    } 

    //--------------------------------------------->> The Node (cube) Class <<------------------

    class Node
    {
      String name;
      PShape Node, Node_1pg, nodeShape;
      int pickCol, strokeCol;
      PVector pos, rtp;  
      boolean Over = false; // is mouseOver ?
      boolean Active = false;  //  has it been clicked ?


      Node(String _name, int _pickCol, PVector _pos) 
      {
        this.name = _name; 
        this.pos = _pos;   
        this.Node = node();   
        this.Node_1pg = node();
        this.pickCol = _pickCol;  // **don't mess with this - is for unseen picker only**
      }



      public void render()   // for the one that is actually displayed
      {    
        Node.setFill(0);
        Node.setStrokeWeight(1.5);
        if (Active) {
          Node.setStroke(activeNodeStroke); // red for selected
        } else if (Over) {
          Node.setStroke(overNodeStroke);  // green for hovered over
        } else {
          Node.setStroke(foundColorStroke); // from globe
        }

        pushMatrix();

        float phi = acos(this.pos.y / sqrt(this.pos.x*this.pos.x + this.pos.y*this.pos.y + this.pos.z*this.pos.z)); //phi
        float theta = atan2(-this.pos.z, this.pos.x); //theta

        translate(this.pos.x, this.pos.y, this.pos.z);  
        rotateY(theta+PI/2);  //theta
        rotateX(phi+PI/2);  //phi

        shape(Node);
        popMatrix();

        // Find color from globe and use to color cube
        float u = 1.05 + (theta-radians(globeRotY))/TWO_PI;
        float v = 1.0 - phi/PI;
        img.loadPixels();
        foundColorStroke = img.pixels[int(v*img.height)*img.width+int(u*img.width)];
      }



      public void displayForPicker()   //not actually seen just there for the picker in the background
      {   
        Node_1pg.setFill(color(pickCol));
        Node_1pg.setStroke(false);  
        pg.pushMatrix();
        float angleX = acos(this.pos.y / sqrt(this.pos.x*this.pos.x + this.pos.y*this.pos.y + this.pos.z*this.pos.z)); 
        float angleY = atan2(-this.pos.z, this.pos.x);
        pg.translate(this.pos.x, this.pos.y, this.pos.z);  
        pg.rotateY(angleY+PI/2);  
        pg.rotateX(angleX+PI/2);
        pg.shape(Node_1pg); 
        pg.popMatrix();
      }


      PShape node() {  //stripped down version
        nodeShape = createShape(BOX, 10, 10, 3.5);
        return nodeShape;
      }
    }


    //-------------------------------->>> NODE PICKER FOR INTERACTION
    Node pickCube(int x, int y) 
    {
      Node cube = null;

      pg.beginDraw();
      pg.camera.set(((PGraphicsOpenGL)g).camera);
      pg.projection.set(((PGraphicsOpenGL)g).projection);
      pg.noLights();
      pg.noStroke();
      pg.background(255); 
      for (int i = 0; i < nodes.length; i++)  nodes[i].displayForPicker(); 
      int c = pg.get(x, y);
      pg.endDraw();

      for (int i = 0; i < nodes.length; i++) 
      {
        if (nodes[i].pickCol == c) 
        {
          cube = nodes[i];
          break;
        }
      }
      return cube;
    }

    public void deselectAllNodes() {
      for ( int n = 0; n < nodes.length; n++) {   
        nodes[n].Active = false;
      }
    }

    //------------------------------------------->> Node / Cube Position Array <<<------------------
    // just used to preset cube positions
    char [][] nodeVerts = {  // just a big list of coordinates...ZZzzz
      {128, 19, 59}, 
      {159, 19, 82}, 
      {191, 19, 106}, 
      {179, 19, 143}, 
      {167, 19, 181}, 
      {128, 19, 181}, 
      {88, 19, 181}, 
      {76, 19, 143}, 
      {64, 19, 106}, 
      {96, 19, 82}, 
      {128, 45, 36}, 
      {159, 40, 49}, 
      {191, 40, 72}, 
      {214, 45, 98}, 
      {211, 40, 133}, 
      {199, 40, 170}, 
      {181, 44, 200}, 
      {147, 39, 208}, 
      {108, 39, 208}, 
      {74, 44, 200}, 
      {56, 39, 170}, 
      {44, 40, 133}, 
      {41, 45, 98}, 
      {64, 40, 72}, 
      {96, 40, 49}, 
      {128, 71, 13}, 
      {159, 66, 26}, 
      {191, 61, 39}, 
      {214, 66, 65}, 
      {236, 71, 91}, 
      {233, 65, 126}, 
      {231, 60, 160}, 
      {213, 65, 189}, 
      {195, 70, 219}, 
      {161, 65, 227}, 
      {128, 60, 235}, 
      {94, 65, 227}, 
      {60, 70, 219}, 
      {42, 65, 189}, 
      {24, 60, 160}, 
      {22, 65, 126}, 
      {19, 71, 91}, 
      {41, 66, 65}, 
      {64, 61, 39}, 
      {96, 66, 26}, 
      {147, 100, 9}, 
      {179, 94, 22}, 
      {211, 94, 45}, 
      {233, 99, 72}, 
      {246, 99, 109}, 
      {243, 94, 143}, 
      {231, 94, 181}, 
      {212, 99, 209}, 
      {181, 98, 234}, 
      {147, 93, 242}, 
      {108, 93, 242}, 
      {74, 98, 234}, 
      {42, 99, 210}, 
      {24, 94, 181}, 
      {12, 94, 143}, 
      {9, 99, 109}, 
      {22, 99, 72}, 
      {44, 94, 45}, 
      {76, 94, 22}, 
      {108, 100, 9}, 
      {128, 128, 6}, 
      {167, 128, 6}, 
      {199, 128, 29}, 
      {231, 128, 52}, 
      {243, 128, 89}, 
      {255, 128, 127}, 
      {243, 127, 164}, 
      {231, 127, 202}, 
      {199, 127, 225}, 
      {167, 127, 248}, 
      {128, 127, 248}, 
      {88, 127, 248}, 
      {56, 127, 225}, 
      {24, 127, 202}, 
      {12, 127, 164}, 
      {0, 128, 127}, 
      {12, 128, 89}, 
      {24, 128, 52}, 
      {56, 128, 29}, 
      {88, 128, 6}, 
      {147, 162, 12}, 
      {181, 157, 20}, 
      {213, 156, 43}, 
      {231, 161, 73}, 
      {243, 161, 110}, 
      {246, 156, 145}, 
      {233, 156, 182}, 
      {211, 161, 208}, 
      {179, 161, 232}, 
      {147, 155, 245}, 
      {108, 155, 245}, 
      {76, 161, 232}, 
      {44, 161, 208}, 
      {22, 156, 182}, 
      {9, 156, 145}, 
      {12, 161, 110}, 
      {24, 161, 73}, 
      {42, 156, 43}, 
      {74, 157, 20}, 
      {108, 162, 12}, 
      {128, 195, 19}, 
      {161, 190, 27}, 
      {195, 185, 35}, 
      {213, 190, 64}, 
      {231, 195, 94}, 
      {233, 190, 128}, 
      {236, 184, 162}, 
      {214, 189, 189}, 
      {191, 194, 215}, 
      {159, 189, 228}, 
      {128, 184, 241}, 
      {96, 189, 228}, 
      {64, 194, 215}, 
      {41, 189, 189}, 
      {19, 184, 162}, 
      {22, 190, 128}, 
      {24, 195, 94}, 
      {42, 190, 64}, 
      {60, 185, 35}, 
      {94, 190, 27}, 
      {147, 216, 46}, 
      {181, 211, 54}, 
      {199, 215, 83}, 
      {211, 215, 121}, 
      {214, 210, 155}, 
      {191, 215, 182}, 
      {159, 215, 205}, 
      {128, 210, 218}, 
      {96, 215, 205}, 
      {64, 215, 182}, 
      {41, 210, 155}, 
      {44, 215, 121}, 
      {56, 215, 83}, 
      {74, 211, 54}, 
      {108, 216, 46}, 
      {128, 236, 73}, 
      {167, 236, 73}, 
      {179, 236, 111}, 
      {191, 236, 148}, 
      {159, 236, 171}, 
      {128, 236, 194}, 
      {96, 236, 171}, 
      {64, 236, 148}, 
      {76, 236, 111}, 
      {88, 236, 73}, 
      {147, 246, 100}, 
      {159, 245, 138}, 
      {128, 245, 161}, 
      {96, 245, 138}, 
      {108, 246, 100}, 
      {128, 255, 128}
    } ;

Cheers, mala

Exactly. And because the source image in OPs example is not itself an equirectangular projection -- it looks like a photo of a tree, un-projected -- its top and bottom rows won't already be a single pixel value, and so an off-by-1 error in sampling the source image by indicating areas near the top and bottom of the sphere could (potentially) give a dramatically different color result than what displayed on the sphere using setTexture().

If you are curious about how setTexture() works in Processing P3D (openGL), here it is:

• https://github.com/processing/processing/search?utf8=✓&q=setTexture

Based on these two related threads, one possible approach is that you could use the cubes as an interface to sampling a 2D PImage. Position the cube with spherical coordinates, then transform those coordinates to a lookup on the original 2D PImage.

Downsides of this approach -- it could get tricky around the poles -- you need to be sampling / projecting in exactly the same way that the sphere renderer did.

this should work

PImage earth; 
PShape globe;

void setup() { 
  size(600, 600, P3D); 
  background(0); 
  earth = loadImage("http://" + "www.jbcse.com/images/reference/world32k.jpg");
  earth.loadPixels();
  for (int i = 0 ; i < earth.pixels.length ; i++) {
    // clear top half of alpha byte
    earth.pixels[i] &= 0xfffffff;
  }
  earth.updatePixels();
  globe = createShape(SPHERE, 200); 
  globe.setStroke(false);
  globe.setTexture(earth);
}

void draw() { 
  translate(width/2, height/2);
  shape(globe);
}

but it doesn't. it loads the file and clears the top half of the alpha byte, making it semi transparent. but it doesn't show up.

have you tried it with a semi transparent image? a png?

I thought this could be done with tint() or setTint().... but I can't make it work. Can anyone help ?

I'm using setTexture() to apply a user choosen image to the sphere and would like the user to be able to change the transparency of this texture/image... as there are other 3D objects rendered within the sphere I would like to be able to see.

simple example from a question regarding setTexture but not about transparency:

PImage earth; 
PShape globe;

void setup() { 
  size(600, 600, P3D); 
  background(0); 
  earth = loadImage( "world32k.jpg");
  globe = createShape(SPHERE, 200); 
  globe.setStroke(false);
  globe.setTexture(earth);
}

void draw() { 
  translate(width/2, height/2);
  shape(globe);
}

where would you use tint() or setTint() in the above to make the globe semi transparent ?

Cheers, mala

Hi folks,

I'm currently trying around with terrain generation using perlin noise. Therefore, I generate a map of 3d vertices in a shape and render the shape with a texture (see the below code).

However, when rotating the map, it seems like parts of the mesh are rendered in wrong order, since there are artefacts and overlaps. See the following three images for the same szene, rotated by a few degrees.

I really think its a problem due to my code (it has been ages since I last did some real 3d coding), for what its worth: I'm running this code on a arch linux system (kernel 4.15.14-1-ARCH) and I've got a integrated intel hd graphics card.

The code I use to render this scene is the following (I skipped some parts for brevity): edit: I've added the parts missing for letting the example run. Thanks to jeremydouglass for the comment!

scale = 20
zangle = 0
l_width = 100
l_height = 100

def setup():
    size(1024, 768, P3D)
    background(52)

def calc_elevation(w, h, octaves=4):
    elevation = []

    for y in range(0, h):
        column = []
        for x in range(0, w):
            nx = map(x, 0, w, 0, 1)
            ny = map(y, 0, h, 0, 1)
            frequency = 1
            hight_value = 0
            for _ in range(octaves):
                hight_value += 1 / frequency * noise(5 * nx * frequency, 5 * ny * frequency)
                frequency *= 2
            hight_value = pow(hight_value, 3.0)
            column.append(hight_value)
        elevation.append(column)
    return elevation

def keyPressed():
    global zangle
    if key == 'a':
        zangle += -PI / 10
    elif key == 'd':
        zangle += PI / 10

def draw():
    global zangle

    background(52)
    textSize(20)
    translate(width/2, height/2, -600)
    rotateX(PI / 2 * 0.8)
    rotateZ(zangle)

    elevation = calc_elevation(l_width, l_height, 2)
    max_height = max([max(list) for list in elevation])

    noStroke()
    mesh = createShape()

    img = createImage(100, 100, RGB)
    for y in range(100):
        for x in range(100):
            img.pixels[y * 100 + x] = color((float(x) / float(100)) * 255, (1 - (float(x) / float(100))) * 255, 0)

    mesh.setTexture(img)
    mesh.beginShape(TRIANGLE)
    for y in range(-l_height / 2, l_width / 2 - 1):
        for x in range(-l_width / 2, l_width / 2 - 1):
            mesh.vertex((x + 1) * scale,
                        y * scale,
                        (elevation[y + l_height / 2][x + 1 + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x + 1, -l_width / 2, l_width / 2, 0, img.width),
                        map(y, -l_height / 2, l_height / 2, 0, img.height)
                        )
            mesh.vertex(x * scale,
                        y * scale,
                        (elevation[y + l_height / 2][x + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x, -l_width / 2, l_width / 2, 0, img.width),
                        map(y, -l_height / 2, l_height / 2, 0, img.height)
                        )
            mesh.vertex(x * scale, 
                        (y + 1) * scale, 
                        (elevation[y + 1 + l_height / 2][x + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x, -l_width / 2, l_width / 2, 0, img.width),
                        map(y + 1, -l_height / 2, l_height / 2, 0, img.height)
                        )

            mesh.vertex((x + 1) * scale,
                        y * scale,
                        (elevation[y + l_height / 2][x + 1 + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x + 1, -l_width / 2, l_width / 2, 0, img.width),
                        map(y, -l_height / 2, l_height / 2, 0, img.height)
                        )
            mesh.vertex(x * scale,
                        (y + 1) * scale,
                        (elevation[y + 1 + l_height / 2][x + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x, -l_width / 2, l_width / 2, 0, img.width),
                        map(y + 1, -l_height / 2, l_height / 2, 0, img.height)
                        )
            mesh.vertex((x + 1) * scale, 
                        (y + 1) * scale, 
                        (elevation[y + 1 + l_height / 2][x + 1 + l_width / 2] - (max_height / 2)) * scale * 50,
                        map(x + 1, -l_width / 2, l_width / 2, 0, img.width),
                        map(y + 1, -l_height / 2, l_height / 2, 0, img.height)
                        )
    mesh.endShape(TRIANGLE)
    shape(mesh, 0, 0)

edit: If removing the "noStroke" option, the problem becomes even more obvious. It seems as if some of the vertices are rendered on top of others...

This is the simplest version of what I am trying to do. I want to use mouseX or data from serial to control where on a PImage a line is drawn, I want the line to change location and I only want one line visible. What I have now just keeps adding lines to the PImage until its a solid.

import shapes3d.utils.*;
import shapes3d.animation.*;
import shapes3d.*;


import processing.opengl.*;





PImage original;

PGraphics texture;

Ellipsoid starBall;

//float zoom = 0.5;
float zoom = 0.8;
//float zoom = 1.5;
 float y, delta_y; 





public void setup() {

  size(1275, 750, P3D);
   hint(DISABLE_DEPTH_TEST);
  //  hint(ENABLE_DEPTH_TEST);

  original = loadImage("alphatest.png");
  texture = createGraphics(original.width, original.height); 

  starBall = new Ellipsoid(this, 64, 64);
  starBall.setTexture(texture);
  starBall.setRadius(401);
  starBall.drawMode(Shape3D.TEXTURE);








noLoop(); 
}







public void draw() {



  background(0,0,0);  

  translate(width/2, height/2); 
  stroke(0, 255, 0);

  strokeWeight(2);
 y = map(radians(y),radians(mouseX),radians(texture.width),texture.height/2,texture.height - texture.height);


  texture.beginDraw();
  texture.image(original,0,0);

  texture.stroke(0,255,0);
  texture.strokeWeight(2);


  texture.line(0,y,texture.width,y); 
  texture.endDraw();







  scale(zoom, -zoom, zoom);

  y += delta_y;



  rotateZ(radians(90-53.5933333f));
  rotateX(radians(41.17/2));
  starBall.draw();


  }           

void mousePressed() {
  if (mouseX < width/2){

   delta_y = 0.00; 
   delta_y += 0.03;
  }
    if (mouseX > width/2){
   delta_y = 0.00;   
   delta_y -= 0.03;
  }
  redraw();
}

Heres the code I'm working with that just adds another line. I tried initstars and adddiagonalline in draw, but as mentioned early into this by @jeremydouglass, that causes a memory leak. Before I ran out of memory, it did draw a single circle that I could manipulate size with mouseX.

Its probably possible to do what I want with this, I just don't know enough. Heres the code, worts and all:

import shapes3d.utils.*;
import shapes3d.animation.*;
import shapes3d.*;

import controlP5.*;
import processing.opengl.*;



import java.awt.event.*;

PImage original;
PImage original2;
PImage original3;
PGraphics texture;
PGraphics texture2;
PGraphics texture3;
Ellipsoid starBall;
Ellipsoid starBall2;
Ellipsoid starBall3;
//float zoom = 0.5;
float zoom = 0.8;
//float zoom = 1.5;

ControlP5 cp5;
ControlGroup messageBox;
int messageBoxResult = -1;
String messageBoxString = "";
float t;


public void setup() {

  size(1275, 750, P3D);
   hint(DISABLE_DEPTH_TEST);
  //  hint(ENABLE_DEPTH_TEST);

original = loadImage("alphatest.png");
original2 = loadImage("alphatest.png");
original3 = loadImage("alphatest.png");

  texture = createGraphics(original.width, original.height);

  texture2 = createGraphics(original2.width, original2.height);

  texture3 = createGraphics(original3.width, original3.height);


  frame.addMouseWheelListener(new MouseWheelInput());

  initStars();
  initStar3();
    addDiagonalLine(texture);
    addDiagonalLine2(texture2);
   addDiagonalLine2(texture3);

    starBall = new Ellipsoid(this, 64, 64);
  starBall.setTexture(texture);
  starBall.setRadius(399);
  starBall.drawMode(Shape3D.TEXTURE); 

  starBall2 = new Ellipsoid(this, 64, 64);
  starBall2.setTexture(texture2);
  starBall2.setRadius(400);
  starBall2.drawMode(Shape3D.TEXTURE);  

    starBall3 = new Ellipsoid(this, 64, 64);
  starBall3.setTexture(texture3);
  starBall3.setRadius(401);
  starBall3.drawMode(Shape3D.TEXTURE); 

}

void initStars(){
  texture.beginDraw();
  texture.image(original,0,0);
  texture2.beginDraw();
  texture2.image(original2,0,0);
  texture2.endDraw();



  texture.endDraw();


}
void initStar3(){

      texture3.beginDraw();
  texture3.image(original3,0,0);
  texture3.endDraw();

}

void addDiagonalLine(PGraphics texture){


  texture.beginDraw();
  float RAvalue = 165.8620666f; //Dubhe
  float DecValue = 61.75169444f;



  float x = map(radians(RAvalue), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y = map(radians(DecValue),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue2 = -137.3373345f; // //Kochab
  float  DecValue2 = 74.0821666f;
  float  X = map(radians(RAvalue2),radians(0),-PI ,texture.width/2,texture.width  );
  float Y = map(radians(DecValue2),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue3 = 165.7297499f; // //Merak
  float  DecValue3 = 56.283666f;
  float x1 = map(radians(RAvalue3), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y1 = map(radians(DecValue3),radians(0),radians(90),texture.height/2,texture.height - texture.height);

    float RAvalue4 = 178.695f; // //Phecda
  float  DecValue4 = 53.5933333f;
  float x2 = map(radians(RAvalue4), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y2 = map(radians(DecValue4),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue5 = -175.923375005f; // //Megrez
  float  DecValue5 = 56.94844444333f;
  float  x3 = map(radians(RAvalue5),radians(0),-PI ,texture.width/2,texture.width  );
  float y3 = map(radians(DecValue5),radians(0),radians(90),texture.height/2,texture.height - texture.height);

 float RAvalue6 = -166.296250005f; // //Alioth
  float  DecValue6 = 55.86183333f;
  float  x4 = map(radians(RAvalue6),radians(0),-PI ,texture.width/2,texture.width  );
  float y4 = map(radians(DecValue6),radians(0),radians(90),texture.height/2,texture.height - texture.height);

 float RAvalue7 = -158.83841667f; // //Mizar
  float  DecValue7 = 54.8166666f;
  float  x5 = map(radians(RAvalue7),radians(0),-PI ,texture.width/2,texture.width  );
  float y5 = map(radians(DecValue7),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue8 = -152.937708333f; // //Alkaid
  float  DecValue8 = 49.22355554666f;
  float  x6 = map(radians(RAvalue8),radians(0),-PI ,texture.width/2,texture.width  );
  float y6 = map(radians(DecValue8),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue9 = -141.79804167f; // //Seginus //-218.2019583333
  float  DecValue9 = 47.22527777f;
  float  x7 = map(radians(RAvalue9),radians(0),-PI ,texture.width/2,texture.width  );
  float y7 = map(radians(DecValue9),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue10 = -96.05475f; // //Rasalhague
  float  DecValue10 = 12.55002777f;
  float  x8 = map(radians(RAvalue10),radians(0),-PI ,texture.width/2,texture.width  );
  float y8 = map(radians(DecValue10),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue11 = -80.6112916666f; //Vega 
  float  DecValue11 = 38.80380555f;
  float  x9 = map(radians(RAvalue11),radians(0),-PI ,texture.width/2,texture.width  );
  float y9 = map(radians(DecValue11),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue12 = -62.0817083333f; //Altair 
  float  DecValue12 = 8.9192166666f;
  float  x10 = map(radians(RAvalue12),radians(0),-PI ,texture.width/2,texture.width  );
  float y10 = map(radians(DecValue12),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue13 = -33.7294166666f; //Enif 
  float  DecValue13 = 9.9604166666f;
  float  x11 = map(radians(RAvalue13),radians(0),-PI ,texture.width/2,texture.width  );
  float y11 = map(radians(DecValue13),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue14 = 79.510583333f; //Capella
  float DecValue14 = 46.01255555f; 
  float x12 = map(radians(RAvalue14), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y12 = map(radians(DecValue14),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue15 = 51.409958333f; //Mirfak
  float DecValue15 = 49.92297222f; 
  float x13 = map(radians(RAvalue15), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y13 = map(radians(DecValue15),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue16 = 116.6067916666f; //Pollux
  float DecValue16 = 58.945f; 
  float x14 = map(radians(RAvalue16), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y14 = map(radians(DecValue16),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue17 = 115.0637916666f; //Procyon
  float DecValue17 =  5.1751666666f; 
  float x15 = map(radians(RAvalue17), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y15 = map(radians(DecValue17),radians(0),radians(90),texture.height/2,texture.height - texture.height);


  float RAvalue18 = 152.334875f; //Regulus
  float DecValue18 = 11.87675f; 
  float x16 = map(radians(RAvalue18), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y16 = map(radians(DecValue18),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue19 =  89.039916666f; //Betelgeuse
  float DecValue19 = 7.407f; 
  float x17 = map(radians(RAvalue19), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y17 = map(radians(DecValue19),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue20 =  10.3912916666f; //Shedar
  float DecValue20 = 56.6368611111f; 
  float x18 = map(radians(RAvalue20), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y18 = map(radians(DecValue20),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue21 = -4.95816666f; //Errai 
  float  DecValue21 = 77.734f;
  float  x19 = map(radians(RAvalue21),radians(0),-PI ,texture.width/2,texture.width  );
  float y19 = map(radians(DecValue21),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue22 =  2.539583333f; //Caph
  float DecValue22 = 59.25442222f; 
  float x20 = map(radians(RAvalue22), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y20 = map(radians(DecValue22),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue23 =  14.459375f; //Navi
  float DecValue23 = 60.814694f; 
  float x21 = map(radians(RAvalue23), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y21 = map(radians(DecValue23),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue24 =  21.757083333f; //Ruchbah
  float DecValue24 = 60.330361111f; 
  float x22 = map(radians(RAvalue24), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y22 = map(radians(DecValue24),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue25 =  28.9352083333f; //Segin
  float DecValue25 = 63.7582222222f; 
  float x23 = map(radians(RAvalue25), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y23 = map(radians(DecValue25),radians(0),radians(90),texture.height/2,texture.height - texture.height);

  float RAvalue26 =  43.774625f; //Polaris
  float DecValue26 = 90f;//89.339777f; 
  float x24 = map(radians(RAvalue26), radians(0),PI,texture.width/2,texture.width - texture.width);
  float y24 = map(radians(DecValue26),radians(0),radians(90),texture.height/2,texture.height - texture.height);


  texture.stroke(0,255,0);
  texture.strokeWeight(3);


 texture.point( x,y);
 texture.point( x1,y1);
  texture.point( x2,y2);
   texture.point( x3,y3);
    texture.point( x4,y4);
    texture.point( x5,y5);
    texture.point( x6,y6);
    texture.point( x7,y7);
    texture.point( x8,y8);
    texture.point( x9,y9);
     texture.point( x10,y10);
     texture.point( x11,y11);
     texture.point( x12,y12);
     texture.point( x13,y13);
     texture.point( x14,y14);
     texture.point( x15,y15);
      texture.point( x16,y16);
      texture.point( x17,y17);
      texture.point( x18,y18);
       texture.point( x19,y19);
       texture.point( x20,y20);
       texture.point( x21,y21);
        texture.point( x22,y22);
         texture.point( x23,y23);
          texture.point( x24,y24);  //Polaris
 texture.strokeWeight(3);
   texture.point( X,Y);
   texture.strokeJoin(MITER);
   texture.beginShape();
   texture.vertex(x10,y10);
  // vert
   texture.vertex(x20,y20);
   texture.endShape();
  texture.stroke(255,0,0);
  texture.strokeWeight(2);

  //star location


        //longitude lines
        texture.line(0,0,0, texture.height);

        texture.line(texture.width/12, 0,texture.width/12,texture.height);
        texture.line(texture.width/12*2, 0,texture.width/12*2,texture.height);
        texture.line(texture.width/12*3, 0,texture.width/12*3,texture.height);
        texture.line(texture.width/12*4, 0,texture.width/12*4,texture.height);
        texture.line(texture.width/12*5, 0,texture.width/12*5,texture.height);
        texture.line(texture.width/12*6, 0,texture.width/12*6,texture.height);
        texture.line(texture.width/12*7, 0,texture.width/12*7,texture.height);
        texture.line(texture.width/12*8, 0,texture.width/12*8,texture.height);
        texture.line(texture.width/12*9, 0,texture.width/12*9,texture.height);
        texture.line(texture.width/12*10, 0,texture.width/12*10,texture.height);
        texture.line(texture.width/12*11, 0,texture.width/12*11,texture.height);
/////  texture.line(texture.width/12 * 11 -texture.width/12/3, 0,texture.width/12 * 11 -texture.width/12/3,texture.height);


        texture.line(texture.width/12 -texture.width/12/2, 0,texture.width/12 -texture.width/12/2,texture.height);
        texture.line(texture.width/12+texture.width/12/2, 0,texture.width/12+texture.width/12/2,texture.height);
        texture.line(texture.width/12/2+texture.width/12/2, 0,texture.width/12/2+texture.width/12/2,texture.height);
        texture.line(texture.width/12 * 2+texture.width/12/2, 0,texture.width/12 * 2+texture.width/12/2,texture.height);

        texture.line((texture.width/12 * 3)+texture.width/12/2, 0,(texture.width/12 * 3)+texture.width/12/2,texture.height);
        texture.line((texture.width/12 * 4)+texture.width/12/2, 0,(texture.width/12 * 4)+texture.width/12/2,texture.height);
        texture.line((texture.width/12 * 5)+texture.width/12/2, 0,(texture.width/12 * 5)+texture.width/12/2,texture.height);
        texture.line((texture.width/12 * 6)+texture.width/12/2, 0,(texture.width/12 * 6)+texture.width/12/2,texture.height);
        texture.line((texture.width/12 * 7)+texture.width/12/2, 0,(texture.width/12 * 7)+texture.width/12/2,texture.height);
        texture.line((texture.width/12 * 8)+texture.width/12/2, 0,(texture.width/12 * 8)+texture.width/12/2,texture.height);//////////////
        texture.line((texture.width/12 * 9)+texture.width/12/2, 0,(texture.width/12 * 9)+texture.width/12/2,texture.height);
        texture.line((texture.width/12 * 10)+texture.width/12/2, 0,(texture.width/12 * 10)+texture.width/12/2,texture.height);
        texture.line((texture.width/12 * 11)+texture.width/12/2, 0,(texture.width/12 * 11)+texture.width/12/2,texture.height);




//latitude lines
        texture.line(0, texture.height/2,texture.width,texture.height/2);
        texture.line(0, texture.height/2/3,texture.width,texture.height/2/3);
        texture.line(0, texture.height/2/3 * 2,texture.width,texture.height/2/3 * 2);
        texture.line(0, texture.height/2/6,texture.width,texture.height/2/6 );
        texture.line(0, texture.height/2/3 + texture.height/2/6,texture.width,texture.height/2/3 + texture.height/2/6);
        texture.line(0, texture.height/2/3 * 2 + texture.height/2/6 ,texture.width,texture.height/2/3 * 2 + texture.height/2/6);
        texture.line(0, texture.height/2 + texture.height/2/3/2 ,texture.width,texture.height/2 + texture.height/2/3/2);
        texture.line(0, texture.height/2 -texture.height/2/3 ,texture.width,texture.height/2 -texture.height/2/3);
        texture.line(0, texture.height - texture.height/2/3 * 2,texture.width,texture.height -texture.height/2/3 * 2);
        texture.line(0, texture.height -texture.height/2/3,texture.width,texture.height -texture.height/2/3);
        texture.line(0, texture.height - texture.height/2/3 * 2 + texture.height/2/6,texture.width,texture.height -texture.height/2/3 * 2 + texture.height/2/6);
        texture.line(0, texture.height -texture.height/2/3 + texture.height/2/6,texture.width,texture.height -texture.height/2/3 + texture.height/2/6);

  texture.endDraw();
}

void addDiagonalLine2(PGraphics texture){


  texture.beginDraw();

  texture.stroke(0,255,0);
  texture.strokeWeight(2);


 float y = map(radians(mouseX),radians(0),radians(texture.width),texture.height/2,texture.height - texture.height);


//latitude lines

    texture.line(0, texture.height/2/3 + texture.height/2/6,texture.width,texture.height/2/3 + texture.height/2/6);
 texture.line(0,y,texture.width,y);
  texture.endDraw();
}

public void draw() {



  background(0,0,0);  

 translate(width/2, height/2); 
     stroke(0, 255, 0);
  strokeWeight(1);
 line(0,-500,0 , 0, 500, 0);
   stroke(255, 0, 0);
  strokeWeight(2);


  initStars();
  initStar3();

    addDiagonalLine(texture);
    addDiagonalLine2(texture2);
   addDiagonalLine2(texture3);




rotateY(radians(-90f));
float Lat = map(mouseX, 0, texture.height, -(180f), (180f));

if (Lat > 90 + 90 - 50.575f){

}
println( Lat);

  rotateZ(radians(-180-(90 -39.425f))); //Lat))); 
  float s = map(second(), 0, 60, 0, TWO_PI);
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI); 
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2)- HALF_PI;
  float l = map(77.4105388888f/15, 0, 24,0, PI);

  float t = map(hour() + norm(minute(),0,60)+ norm(second(), 0, 3600) + norm(l,0,PI),0,24,0,TWO_PI) - PI + radians(15f/4f) - radians(60); // - radians(180 - 77.461f);// - radians(-77.461f) - radians(-180) - radians(-180); //-radians(-77.461f); // - radians(-75) -radians(-77.461f);

 scale(zoom, -zoom, zoom);
rotateX(radians(Lat ));

   starBall.rotateTo(0,0, 0); //90 + 90 - 50.575f);
    starBall.draw();  ///star image
 rotateZ(radians(90-61.75f));
 rotateX(radians(11.17/2));
  starBall2.rotateTo(0,0,0);

  starBall2.draw(); 

   rotateZ(radians(90-53.5933333f));
 rotateX(radians(41.17/2));
  starBall3.draw();


  }           





class MouseWheelInput implements MouseWheelListener{
  void mouseWheelMoved(MouseWheelEvent e) {
    zoom -= 0.15 * e.getWheelRotation();

  }
}

I also found this, so im trying to add the two together:

PImage earth; PShape globe;

void setup() { size(600, 600, P3D); background(0); earth = loadImage( "previewcf.turbosquid.com/Preview/2014/08/01__15_41_30/Earth.JPG5a55ca7f-1d7c-41d7-b161-80501e00d095Larger.jpg"); globe = createShape(SPHERE, 200); globe.setTexture(earth); noStroke(); }

void draw() { translate(width/2, height/2); shape(globe); }

Awright, here we go with some code. First, this code is from the archives and is how I made a transparent png file.

PGraphics alphaG;

void setup() {
size(2048,1024); 
// create an extra pgraphics object for rendering on a transparent background 
alphaG = createGraphics(width,height, JAVA2D);

// background will be transparent in the png-file 
background(0);
}

void draw() {

 // draw into the pgraphics object
 alphaG.beginDraw();
   alphaG.fill(255,100);
  // alphaG.rect(random(width), random(height), 30,30);
   alphaG.rect((width),(height), 2048,1024);
 alphaG.endDraw();

 // draw the second renderer into the window, so we can see something 
 image(alphaG, 0,0);
}

void keyPressed() {
  alphaG.save("alphatest.png"); 
  println("alphatest.png saved.");
}

Next, is the code that uses "alphatest.png" and shows the transparency goofiness.

import shapes3d.utils.*;
import shapes3d.animation.*;
import shapes3d.*;


import processing.opengl.*;



PImage original;
PImage original2;
PGraphics texture;
PGraphics texture2;
Ellipsoid starBall;
Ellipsoid starBall2;
//float zoom = 0.5;  //outside the sphere
float zoom = 1.5;  //inside the sphere

public void setup() {

  size(1275, 750, P3D);

  original = loadImage("alphatest.png");
  original2 = loadImage("alphatest.png");

  texture = createGraphics(original.width, original.height);
  texture2 = createGraphics(original2.width, original2.height);

  initStars();
  addDiagonalLine(texture);
  addDiagonalLine(texture2);
  starBall = new Ellipsoid(this, 64, 64);
  starBall.setTexture(texture);
  starBall.setRadius(399);
  starBall.drawMode(Shape3D.TEXTURE); 

  starBall2 = new Ellipsoid(this, 64, 64);
  starBall2.setTexture(texture2);
  starBall2.setRadius(400);
  starBall2.drawMode(Shape3D.TEXTURE);

}

void initStars(){
  texture.beginDraw();
  texture.image(original,0,0);
  texture2.beginDraw();
  texture2.image(original2,0,0);
  texture2.endDraw();
  texture.endDraw();

}

void addDiagonalLine(PGraphics texture){

  texture.beginDraw();

  texture.stroke(255,0,0);
  texture.strokeWeight(1);


 //longitude lines
  texture.line(0,0,0, texture.height);
  texture.line(texture.width/12, 0,texture.width/12,texture.height);
  texture.line(texture.width/12*2, 0,texture.width/12*2,texture.height);
  texture.line(texture.width/12*3, 0,texture.width/12*3,texture.height);     
  texture.line(texture.width/12*4, 0,texture.width/12*4,texture.height);
  texture.line(texture.width/12*5, 0,texture.width/12*5,texture.height);
  texture.line(texture.width/12*6, 0,texture.width/12*6,texture.height);
  texture.line(texture.width/12*7, 0,texture.width/12*7,texture.height);
  texture.line(texture.width/12*8, 0,texture.width/12*8,texture.height);
  texture.line(texture.width/12*9, 0,texture.width/12*9,texture.height);
  texture.line(texture.width/12*10, 0,texture.width/12*10,texture.height);
  texture.line(texture.width/12*11, 0,texture.width/12*11,texture.height);
/////  texture.line(texture.width/12 * 11 -texture.width/12/3, 0,texture.width/12 * 11 -texture.width/12/3,texture.height);


  texture.line(texture.width/12 -texture.width/12/2, 0,texture.width/12 -texture.width/12/2,texture.height);
  texture.line(texture.width/12+texture.width/12/2, 0,texture.width/12+texture.width/12/2,texture.height);
  texture.line(texture.width/12/2+texture.width/12/2, 0,texture.width/12/2+texture.width/12/2,texture.height);
  texture.line(texture.width/12 * 2+texture.width/12/2, 0,texture.width/12 * 2+texture.width/12/2,texture.height);

  texture.line((texture.width/12 * 3)+texture.width/12/2, 0,(texture.width/12 * 3)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 4)+texture.width/12/2, 0,(texture.width/12 * 4)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 5)+texture.width/12/2, 0,(texture.width/12 * 5)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 6)+texture.width/12/2, 0,(texture.width/12 * 6)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 7)+texture.width/12/2, 0,(texture.width/12 * 7)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 8)+texture.width/12/2, 0,(texture.width/12 * 8)+texture.width/12/2,texture.height);//////////////
  texture.line((texture.width/12 * 9)+texture.width/12/2, 0,(texture.width/12 * 9)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 10)+texture.width/12/2, 0,(texture.width/12 * 10)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 11)+texture.width/12/2, 0,(texture.width/12 * 11)+texture.width/12/2,texture.height);


//latitude lines  
  texture.line(0, texture.height/2,texture.width,texture.height/2);
  texture.line(0, texture.height/2/3,texture.width,texture.height/2/3);
  texture.line(0, texture.height/2/3 * 2,texture.width,texture.height/2/3 * 2);
  texture.line(0, texture.height/2/6,texture.width,texture.height/2/6 );
  texture.line(0, texture.height/2/3 + texture.height/2/6,texture.width,texture.height/2/3 + texture.height/2/6);
  texture.line(0, texture.height/2/3 * 2 + texture.height/2/6 ,texture.width,texture.height/2/3 * 2 + texture.height/2/6);
  texture.line(0, texture.height/2 + texture.height/2/3/2 ,texture.width,texture.height/2 + texture.height/2/3/2);
  texture.line(0, texture.height/2 -texture.height/2/3 ,texture.width,texture.height/2 -texture.height/2/3);
  texture.line(0, texture.height - texture.height/2/3 * 2,texture.width,texture.height -texture.height/2/3 * 2);
  texture.line(0, texture.height -texture.height/2/3,texture.width,texture.height -texture.height/2/3);
  texture.line(0, texture.height - texture.height/2/3 * 2 + texture.height/2/6,texture.width,texture.height -texture.height/2/3 * 2 + texture.height/2/6);
  texture.line(0, texture.height -texture.height/2/3 + texture.height/2/6,texture.width,texture.height -texture.height/2/3 + texture.height/2/6); 

  texture.endDraw();
}

public void draw() {

  background(0,0,0); 
  translate(width/2, height/2);
  float t = map(hour() + norm(minute(),0,60)+ norm(second(), 0, 3600),0,24,0,TWO_PI);

  scale(zoom, -zoom, zoom);
  starBall.rotateTo(0,t * 1000,0);
  starBall2.rotateTo(0,0,0);
  starBall.draw();  ///transparent
  starBall2.draw(); //transparent   

}

First

look at reference createShape and beginShape

float a;
void setup() { 
  size(1080, 720, P3D);
  background(0);
}

void draw() { 
  background(0);
  lights();

  translate(333, 333);
  rotateX(a);
  a+=.01;
  stroke(255); 
  fill(255, 0, 0);

  //createShape(TRIANGLE_STRIP);
  createShape();
  beginShape(TRIANGLE_STRIP);
  vertex(-100, 0, 100);
  vertex(-100, 0, -100);
  vertex(100, 0, 100);
  vertex(100, 0, -100);
  endShape(CLOSE);
}

Second

pushMartix/popMatrix doesn't isolate colors, only the Matrix

better define globe in setup()

import peasy.*; 

PeasyCam cam; 
PImage img; 
PShape globe;

void setup() {
  size(1080, 720, P3D);

  cam = new PeasyCam(this, 700);
  img = loadImage("unnamed.jpg");

  sphereDetail(44);

  background(0);


  globe=createShape(SPHERE, 4000);
  globe.setFill(false);
  globe.setStroke(false);
  globe.setTexture(img);
}

void draw() {
  background(0);
  lights();

  shape(globe);

  pushMatrix();
  noStroke();
  fill(255, 0, 0);
  sphere(26);
  popMatrix();
}

The first is about triangle strips. When I try to draw one it gives me the message: "Only GROUP, PShape.PATH, and PShape.GEOMETRY work with createShape()" for something like:

void setup(){
  size(1080,720,P3D);
}

void draw(){
  stroke(255);
  fill(255,0,0);    

  createShape(TRIANGLE_STRIP);      
  vertex(-100,0,100);
  vertex(-100,0,-100);
  vertex(100,0,100);
  vertex(100,0,-100);
  endShape(CLOSE); 
}

The second is about texture mapping. I am trying to put an image onto a sphere but also have other shapes that rely on fill(). I tried putting the fill in pushmatrix and popmatrix but it fills the globe anyway.

import peasy.*;

PeasyCam cam;
PImage img;
PShape globe;

void setup(){
  cam = new PeasyCam(this,700);
  img = loadImage("starmap_8k.jpg");
  size(1080,720,P3D);
}

void draw(){
  pushMatrix();
  fill(255,0,0);
  popMatrix();

  globe=createShape(SPHERE,4000);
  globe.setTexture(img);
  noStroke();
  shape(globe);  
}

Here's what I have so far:

`

import shapes3d.utils.*;
import shapes3d.animation.*;
import shapes3d.*;

import java.awt.event.*;

PImage original;
PImage original2;
PGraphics texture;
PGraphics texture2;
Ellipsoid starBall;
Ellipsoid starBall2;
float zoom = 0.5;




public void setup() {

  size(1275, 750, P3D);
  
    
  original = loadImage("100lightyears.jpg");
  original2 = loadImage("100lightyears2.jpg");
  frame.addMouseWheelListener(new MouseWheelInput());
  texture = createGraphics(original.width, original.height);
  texture2 = createGraphics(original2.width, original2.height);
  initStars();
  starBall = new Ellipsoid(this, 64, 64);
  starBall.setTexture(texture);
  starBall.setRadius(400);
  starBall.drawMode(Shape3D.TEXTURE); 
 
  starBall2 = new Ellipsoid(this, 64, 64);
  starBall2.setTexture(texture2);
  starBall2.setRadius(399);
  starBall2.drawMode(Shape3D.TEXTURE);
 

}

void initStars(){
  texture.beginDraw();
  texture.image(original,0,0);
  texture2.image(original2,0,0);
  texture.endDraw();
}

void addDiagonalLine(){
  texture.beginDraw();
  texture.stroke(255,0,0);
  texture.strokeWeight(2);
  
 //longitude lines
  texture.line(0,0,0, texture.height);
  texture.line(texture.width/12, 0,texture.width/12,texture.height);
  texture.line(texture.width/12*2, 0,texture.width/12*2,texture.height);
  texture.line(texture.width/12*3, 0,texture.width/12*3,texture.height);     
  texture.line(texture.width/12*4, 0,texture.width/12*4,texture.height);
  texture.line(texture.width/12*5, 0,texture.width/12*5,texture.height);
  texture.line(texture.width/12*6, 0,texture.width/12*6,texture.height);
  texture.line(texture.width/12*7, 0,texture.width/12*7,texture.height);
  texture.line(texture.width/12*8, 0,texture.width/12*8,texture.height);
  texture.line(texture.width/12*9, 0,texture.width/12*9,texture.height);
  texture.line(texture.width/12*10, 0,texture.width/12*10,texture.height);
  texture.line(texture.width/12*11, 0,texture.width/12*11,texture.height);
  texture.line(texture.width/12 * 11 -texture.width/12/3, 0,texture.width/12 * 11 -texture.width/12/3,texture.height);
 

  texture.line(texture.width/12 -texture.width/12/2, 0,texture.width/12 -texture.width/12/2,texture.height);
  texture.line(texture.width/12+texture.width/12/2, 0,texture.width/12+texture.width/12/2,texture.height);
  texture.line(texture.width/12/2+texture.width/12/2, 0,texture.width/12/2+texture.width/12/2,texture.height);
  texture.line(texture.width/12 * 2+texture.width/12/2, 0,texture.width/12 * 2+texture.width/12/2,texture.height);
 
  texture.line((texture.width/12 * 3)+texture.width/12/2, 0,(texture.width/12 * 3)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 4)+texture.width/12/2, 0,(texture.width/12 * 4)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 5)+texture.width/12/2, 0,(texture.width/12 * 5)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 6)+texture.width/12/2, 0,(texture.width/12 * 6)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 7)+texture.width/12/2, 0,(texture.width/12 * 7)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 8)+texture.width/12/2+texture.width/12/3, 0,(texture.width/12 * 8)+texture.width/12/2+texture.width/12/3,texture.height);//////////////
  texture.line((texture.width/12 * 9)+texture.width/12/2, 0,(texture.width/12 * 9)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 10)+texture.width/12/2, 0,(texture.width/12 * 10)+texture.width/12/2,texture.height);
  texture.line((texture.width/12 * 11)+texture.width/12/2, 0,(texture.width/12 * 11)+texture.width/12/2,texture.height);
  

 


//latitude lines  
  texture.line(0, texture.height/2,texture.width,texture.height/2);
  texture.line(0, texture.height/2/3,texture.width,texture.height/2/3);
  texture.line(0, texture.height/2/3 * 2,texture.width,texture.height/2/3 * 2);
  texture.line(0, texture.height - texture.height/2/3 * 2,texture.width,texture.height -texture.height/2/3 * 2);
  texture.line(0, texture.height -texture.height/2/3,texture.width,texture.height -texture.height/2/3); 
  texture.endDraw();
}

public void draw() {

  background(0);  
 
 translate(width/2, height/2);
 pushStyle();
 float r = -0.01 * (mouseY - 500);
 rotateX(r); 
   
  float s = map(second(), 0, 60, 0, TWO_PI);
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI); 
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2)- HALF_PI;
  float t = map(hour() + norm(minute(),0,60)+ norm(second(), 0, 3600) ,0,24,0,TWO_PI) - radians(77.4f);
  scale(zoom, -zoom, zoom);
  addDiagonalLine();
  starBall.rotateTo(0,t,0);
  System.out.println(degrees(h));
  starBall2.rotateTo(0,t -radians(-180f),0);
  starBall.draw();
  starBall2.draw();




 
  }           
         




class MouseWheelInput implements MouseWheelListener{
  void mouseWheelMoved(MouseWheelEvent e) {
    zoom -= 0.15 * e.getWheelRotation();

  }
}

`

@someDude Check the Texture section here: https://processing.org/tutorials/p3d/

You can also check prev posts: https://forum.processing.org/two/search?Search=settexture

It is helpful if you can provide an MCVE if the prev links do not address your question.

Kf

The library does not provide methods to draw directly onto the surface but the easiest way is simple draw on the texture image.

Assuming you have loaded an PImage called original using loadImage then create a PGraphics object which is a copy of the texture image like this.

PImage original;
PGraphics texture;
Ellipsoid starBall;

void setup(){
  size(480, 320, P3D);
  // create the star ball here
  original = loadImage("filename.png");
  texture = createGraphics(original.width, original.height);
  initStars();
  starBall.setTexture(texture);
}

// Call this method to reset the star map
void initStars(){
  texture.beginDraw();
  texture.image(original); // draw the image into the graphics object
  texture.endDraw();
}

// Example method showing how to modify the texture
// could be called from mouse click or other event handler.
void addDiagonalLine(){
  texture.beginDraw();
  texture.stroke(255,255,0); // yellow
  texture.strokeWeight(3); // need some weight to make sure it shows
  texture.line(0,0,texture.width, texture.height);
  texture.endDraw();
}

BEWARE: I have just typed this code into the forum so may have some syntax errors.

OK final point, since you are viewing the star map from the inside of the ellipsoid it may look reversed. (Shapes3D draws textures as if viewed from outside the object) if this is the case then simple reverse the star map image in a graphics program, it will also affect the end points of any arcs.

Hope this helps.

Hello, I am trying to apply a texture on a TRIANGLES based PShape, with no success.... Any helps?

PImage img;

float[][] points = new float[100][100];
void setup () {  
  for (int i = 0; i<100; i++)
    for (int j = 0; j<100; j++) {
      int px = i-50;
      int py = j-50;
      points[i][j] = 0.1*px*py;
    }    
  CreateMesh();  
  size(1000,1000,P3D);
  img = loadImage("text1.jpg");
}


PShape mesh;
void CreateMesh() {
  mesh = createShape();
  mesh.setTexture(img);
  mesh.beginShape(TRIANGLES);
  mesh.texture(img);
  int sx = points.length;
  int sy = points[0].length; 
  float w = 500;
  float disp = w/sx;
  float d = w/2;
  for (int j = 0; j < sx-1; j ++) {      
      for (int i = 0; i < sy-1; i++) {

        mesh.vertex( i * disp-d, j * disp-d, points[i][j]);      
        mesh.vertex( i* disp-d, (j+1) * disp-d,points[i][j+1]);
        mesh.vertex( (i+1) * disp-d, j * disp-d,points[i+1][j]);

        mesh.vertex( (i+1) * disp-d, j * disp-d,points[i+1][j]);
        mesh.vertex( (i+1) * disp-d, (j+1) * disp-d,points[i+1][j+1]);
        mesh.vertex( i* disp-d, (j+1) * disp-d,points[i][j+1]);        
     }   
  } 
  mesh.endShape();
}


float a1;
float a2;
void draw() { 
  translate(width/2,height/2);
  background(0);
  lights();
  directionalLight(255, 255, 255, 0, -1, 0);
  ambientLight(-10,-10,-10); 
  rotateX(a1+=0.005);
  rotateY(a2+=0.015);
  shape(mesh,0,0);
}