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...

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

I have a Vision of a Project for this Semester that I simply started to sketch but I don't know if it's even possible.

As for now all I have is a Globe that I can view from different angles through PeasyCam. For my Project I want specific Emojis tweeted around the Globe shown at the Location they come from on my Globe. (Live Data Visualization)

Is it even possible? Because as for now I haven't found anything similar done in Processing on the net. Is there a Tool/Library or whatever to map the GPS date in my 3D Globe?

I know its not much so far but this is the code for my Globe

import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.geometry.*;

Planet earth;  

PeasyCam cam;
PImage img;
PImage bg;

void setup() {
  size (1000, 600, P3D);
  img = loadImage("World3.jpg");
  //int i = 10;

  cam = new PeasyCam(this, 200);
  earth = new Planet(50);
}

void draw() {
  bg = loadImage("Black.png");
  background(bg);
  lights();
  earth.show();
}

______



class Planet {
  float radius;
  float angle;
  float distance;
  Planet [] planets;
  float orbitSpeed;
  PVector v;



  PShape globe;

  Planet (float r) {           
    v = PVector.random3D();
    radius = r;
    noStroke();
    noFill();
    globe = createShape(SPHERE, radius);
    globe.setTexture(img);
  }

  void show () {
    pushMatrix();
    noStroke();
    fill(255);
    //rotate(angle);
    translate(v.x, v.y, v.z);
    shape(globe);
    popMatrix();
  }
}

Thanks in advance!

    PImage img;
    PShape pyramid,side1,side2,side3,side4,base;

    void setup()
    {
      size(940, 540, P3D);
      colorMode(HSB);
      background(0);
      textureMode(NORMAL);
      img = loadImage("galaxy.jpg");


      pyramid = createShape(GROUP);

        side1 = createShape();
        side1.setTexture(img);
         side1.beginShape();
          side1.vertex(-100, -100, -100);
          side1.vertex( 100, -100, -100);
          side1.vertex(   0,    0,  100);
          side1.endShape(CLOSE);
         side2 = createShape();
         side2.setTexture(img);
         side2.beginShape();
          side2.vertex( 100, -100, -100);
          side2.vertex( 100,  100, -100);
          side2.vertex(   0,    0,  100);
         side2.endShape(CLOSE);
         side3 = createShape();
         side3.setTexture(img);
         side3.beginShape();
          side3.vertex( 100, 100, -100);
          side3.vertex(-100, 100, -100);
          side3.vertex(   0,   0,  100);
         side3.endShape(CLOSE);
         side4 = createShape();
         side4.setTexture(img);
         side4.beginShape();
          side4.vertex(-100,  100, -100);
          side4.vertex(-100, -100, -100);
          side4.vertex(   0,    0,  100);
         side4.endShape(CLOSE);
         base = createShape();
         base.setTexture(img);
         base.beginShape();
           base.vertex(-100,-100,-100);
           base.vertex(100,-100,-100);
           base.vertex(100,100,-100);
           base.vertex(-100,100,-100);
         base.endShape(CLOSE);

          pyramid.addChild(side1);
          pyramid.addChild(side2);
          pyramid.addChild(side3);
          pyramid.addChild(side4);
          pyramid.addChild(base);
    }

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

         translate(width/2, height/2, 150);
         rotateX(speedMod*(frameCount*PI/200));
         shape(pyramid);
    }
 }

Thxs, Kf

PShape boxShape;
PGraphics pg;


void setup() {
  size(320, 240, P3D);

  textSize(44);
  textAlign(CENTER, CENTER);   


  pg = createGraphics(width/2, height/2, P2D);
  pg.beginDraw();
  pg.background(0);
  // move origin to middle
  pg.translate(pg.width / 2, pg.height / 2);
  pg.noStroke();
  for (int i = 0; i < 100; i++) {
    // random semi-opaque colour
    pg.fill(random(192, 256), random(192, 256), random(192, 256), 192);
    pg.pushMatrix();
    pg.rotate(random(TWO_PI));
    pg.rect(random(pg.width) / 2, random(pg.height) / 2, 50, 50);
    pg.popMatrix();
  }
  pg.endDraw();

  boxShape = createShape(BOX, height/3);
  boxShape.setTexture(pg);
  fill(255, 255, 255);
}


void draw() {
  image(pg, 0, 0, width, height);

  pushMatrix();
  translate(width/2, height/2, 0);  
  rotateY(PI * frameCount / 500);
  shape(boxShape);  
  popMatrix();

  text("My Text", mouseX, mouseY);
}

Here is some example code, where I load in a model, and create a sphere, and apply the same texture to both. In this case, only the sphere has a texture.

PShape model;
PShape globey;
PImage pizza;

void setup() {
  size(500, 500, P3D);
  pizza = loadImage("pizza.jpg"); // load the texture
  model = loadShape("mammoth.obj");
  model.setTexture(pizza); //this does not work, the model is just black
  globey = createShape(SPHERE, 1000);
  globey.setTexture(pizza); //this DOES work. The sphere has a texture from pizza.jpg
  globey.setStroke(false);
}

void draw() {
    lights();
    directionalLight(51, 102, 126, -1, 0, 0);
    directionalLight(255, 0, 100, 1, 0, 0);
  scale(.1);
  shape(globey);
  shape(model);
}

Here is the result:

I'm trying to get the same texture to be applied to the mammoth skeleton, but it will only apply itself to the sphere, and I'm not sure why.

Any demo of anything similar would be useful.

Thanks.

Many thanks in advance.

I have found the example of how to add texture which is:

PImage img;
PShape globe;

void setup() {
  img = loadImage("earth.jpg");
  globe = createShape(SPHERE, 50);
  globe.setTexture(img);
}

Mine is certainly longer. Although I know some of it isn't relevant to the question, I'll post my whole code. The texture I'd like to use (for the sake of this) is scales. It's in the data folder and the sketch runs without errors - just a wireframe sphere though - no texture.

From what I've read and understand - the texture() must be between beginShape and endShape() and "before any calls to vertices".

Where you're using a sphere(); without explicit vertices, how can texture() be implemented?

Rather than posting separately, I have a couple more questions regarding the same code.

1. how can I slow down the movement of the camera vs mouse movement?
2. I am using the .jpg "scales" at the moment but would like to use a patchy texture with the light shining through - imagine a mosaic with every other tile removed. Is this going to be difficult to implement for an obvious beginner like me?

Many thanks in advance

   // interactive sphere
PImage img;

int rotateX = 0, rotateY = 0;
int previousX, previousY;
float distanceX = 0.0, distanceY = 0.0;


void setup(){
size(1000, 1000, P3D);
img = loadImage("scales.jpg");
}

void draw(){
// background in draw not setup so drawn on loop and new sphere replaces old  
background(0);
//lights();
// converts mouse x movement into rotation around the object - over-ridden by mouse pressed/dragged functions
camera(mouseX, height/2, (height/2) / tan(PI/3), mouseX, height/2, 0, 0, 1, 0);
// set centre of screen fro drawing sphere
translate(width/2, height/2, 0);
rotateX(rotateX + distanceY);
rotateY(rotateY + distanceX);

noFill();
stroke(255);
texture(img);
sphere (100);

}

void mousePressed()
{
previousX = mouseX;
previousY = mouseY;
}
void mouseDragged()
{
distanceX = radians(mouseX - previousX);
distanceY = radians(previousY - mouseY);
}
void mouseReleased()
{
rotateX += distanceY;
rotateY += distanceX;
distanceX = distanceY = 0.0;
}

PImage earth;
PShape globe;

void setup(){
  size(600,600,P3D);
  background(0);
  earth = loadImage("earth.jpg");
}

void draw(){
  translate(width/2,height/2);
  globe = createShape(SPHERE,50);
  globe.setTexture(earth);
}

Am I making a mistake, or is it just that my version of processing is outdated (I am running 2.1.2)? Help of any sort would be greatly appreciated. Thank you.

import shapes3d.*;
import shapes3d.animation.*;
import shapes3d.utils.*;
import processing.video.*;

/*
mix this with cam3D cube
*/
Movie mov;

Shape3D[] shapes; 
Box box;

int shapesNumTot = 1;
float angleX, angleY, angleZ;

void setup() {
  size(800, 600, P3D);

  mov = new Movie(this, "Shots.mp4");
  mov.loop();
  textureMode(NORMAL);

  shapes = new Shape3D[shapesNumTot];

  box = new Box(this);
  //box.setTexture(mov, Box.FRONT); // if I try this instead it blocks my PC.
  box.setTexture(mov); // this works as expected..
  box.setSize(100, 200, 400);
  box.drawMode(S3D.TEXTURE); 
  shapes[0] = box;
}

void draw() {
  background(100);
  pushMatrix();
  camera(0, 0, 300, 0, 0, 0, 0, 1, 0);
  angleX += radians(0.913f);
  angleY += radians(0.799f);
  angleZ += radians(1.213f);
  rotateX(angleX);
  rotateY(angleY);
  rotateZ(angleZ);
  for (int i = 0; i < shapesNumTot; i++) {
    shapes[i].draw();
  }
  popMatrix();
}

void movieEvent(Movie m) {
  m.read();
}

ERRORS

java.lang.RuntimeException: java.lang.NoSuchMethodError: processing.core.PVector.set(FFF)Lprocessing/core/PVector;
    at com.jogamp.common.util.awt.AWTEDTExecutor.invoke(AWTEDTExecutor.java:58)
    at jogamp.opengl.awt.AWTThreadingPlugin.invokeOnOpenGLThread(AWTThreadingPlugin.java:103)
    at jogamp.opengl.ThreadingImpl.invokeOnOpenGLThread(ThreadingImpl.java:206)
    at javax.media.opengl.Threading.invokeOnOpenGLThread(Threading.java:172)
    at javax.media.opengl.Threading.invoke(Threading.java:191)
    at javax.media.opengl.awt.GLCanvas.display(GLCanvas.java:541)
    at processing.opengl.PJOGL.requestDraw(PJOGL.java:688)
    at processing.opengl.PGraphicsOpenGL.requestDraw(PGraphicsOpenGL.java:1651)
    at processing.core.PApplet.run(PApplet.java:2256)
    at java.lang.Thread.run(Unknown Source)
Caused by: java.lang.NoSuchMethodError: processing.core.PVector.set(FFF)Lprocessing/core/PVector;
    at shapes3d.Box.calcXYZ(Unknown Source)
    at shapes3d.Box.calcShape(Unknown Source)
    at shapes3d.Box.<init>(Unknown Source)
    at VideoFace.setup(VideoFace.java:47)
    at processing.core.PApplet.handleDraw(PApplet.java:2361)
    at processing.opengl.PJOGL$PGLListener.display(PJOGL.java:862)
    at jogamp.opengl.GLDrawableHelper.displayImpl(GLDrawableHelper.java:665)
    at jogamp.opengl.GLDrawableHelper.display(GLDrawableHelper.java:649)
    at javax.media.opengl.awt.GLCanvas$10.run(GLCanvas.java:1289)
    at jogamp.opengl.GLDrawableHelper.invokeGLImpl(GLDrawableHelper.java:1119)
    at jogamp.opengl.GLDrawableHelper.invokeGL(GLDrawableHelper.java:994)
    at javax.media.opengl.awt.GLCanvas$11.run(GLCanvas.java:1300)
    at java.awt.event.InvocationEvent.dispatch(Unknown Source)
    at java.awt.EventQueue.dispatchEventImpl(Unknown Source)
    at java.awt.EventQueue.access$200(Unknown Source)
    at java.awt.EventQueue$3.run(Unknown Source)
    at java.awt.EventQueue$3.run(Unknown Source)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.security.ProtectionDomain$1.doIntersectionPrivilege(Unknown Source)
    at java.awt.EventQueue.dispatchEvent(Unknown Source)
    at java.awt.EventDispatchThread.pumpOneEventForFilters(Unknown Source)
    at java.awt.EventDispatchThread.pumpEventsForFilter(Unknown Source)
    at java.awt.EventDispatchThread.pumpEventsForHierarchy(Unknown Source)
    at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
    at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
    at java.awt.EventDispatchThread.run(Unknown Source)

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

import processing.video.*;

Movie mov;

Shape3D[] shapes; 
Box box;

int shapesNumTot = 1;
float angleX, angleY, angleZ;

void setup() {
  size(800, 600, P3D);

  mov = new Movie(this, "video.mp4");
  mov.loop();
  textureMode(NORMAL);

  shapes = new Shape3D[shapesNumTot];

  box = new Box(this);
  //box.setTexture(mov, Box.FRONT); // if I try this instead it blocks my PC.
  box.setTexture(mov); // this works as expected..
  box.setSize(100, 200, 400);
  box.drawMode(S3D.TEXTURE); 
  shapes[0] = box;
}

void draw() {
  background(100);
  pushMatrix();
  camera(0, 0, 300, 0, 0, 0, 0, 1, 0);
  angleX += radians(0.913f);
  angleY += radians(0.799f);
  angleZ += radians(1.213f);
  rotateX(angleX);
  rotateY(angleY);
  rotateZ(angleZ);
  for (int i = 0; i < shapesNumTot; i++) {
    shapes[i].draw();
  }
  popMatrix();
}

void movieEvent(Movie m) {
  m.read();
}

Thanks, Davide.

PShape shp;
PGraphics tex;
void setup() {
  size(300, 150);  
  shp = loadShape("https://upload.wikimedia.org/wikipedia/commons/8/88/Blue_oval.svg");

  // create a simple PGraphics as texture
  tex = createGraphics(100, 100);
  tex.beginDraw();
  tex.background(200, 0, 0);
  for(int i =0; i<100;i+=3){
    tex.line(i,0,i, 100);
  }
  tex.endDraw();
}

void draw() {

  background(255);

  image(tex, 10, 10);

  shp.disableStyle();
  shp.setTexture(tex);
  shape(shp, 150, 50);
}

This way it doesn't work and i have no idea where to set u/v-coordinates.
A workaround would be to use a mask, but maybe I'm just missing something and there is an easy way to handle this.