1. I can't correctly apply a texture image to my PShapes

2. My trapezoid PShape does not fill properly

I currently have a "map.jpg" in the same folder as the processing file, so I do not think that is the issue. Any help would be greatly appreciated. Thank You.

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

    PeasyCam cam;

      PVector p1 = new PVector(0, 0, 0);
      PVector p2 = new PVector(0, -100, 0);
      PVector p3 = new PVector(-100, -100, 0);
      PVector p4 = new PVector(-100, 0, 0);
      PVector p5 = new PVector(0, 0, -100); 
      PVector p6 = new PVector(0, -100, -100);
      PVector p7 = new PVector(-100, -100, -100);
      PVector p8 = new PVector(-100, 0, -100);
      PVector p9 = new PVector(-50,0,0);
      PVector p10 = new PVector(-100,-80,0);
      PVector p11 = new PVector(-100,-80,-100);
      PVector p12 = new PVector(-50,0,-100);

      PShape cube;
      PShape cylinder;
      PShape trapezoid;

      PImage img;

    void setup(){
      size(600,600, P3D);
      background(255);
      fill(50,205,50);
      img=loadImage("map.jpg");
      //noStroke();

      cam = new PeasyCam(this, 600);

      cylinder = createCylinder(40, 100, 300);
      cube = createShape();
      cube.beginShape(QUAD);
      texture(img);
      cube.vertex(p1.x, p1.y, p1.z);
      cube.vertex(p2.x, p2.y, p2.z);
      cube.vertex(p3.x, p3.y, p3.z);
      cube.vertex(p4.x, p4.y, p4.z);

      cube.vertex(p1.x, p1.y, p1.z);
      cube.vertex(p5.x, p5.y, p5.z);
      cube.vertex(p6.x, p6.y, p6.z);
      cube.vertex(p2.x, p2.y, p2.z);

      cube.vertex(p3.x, p3.y, p3.z);
      cube.vertex(p7.x, p7.y, p7.z);
      cube.vertex(p8.x, p8.y, p8.z);
      cube.vertex(p4.x, p4.y, p4.z);

      cube.vertex(p8.x, p8.y, p8.z);
      cube.vertex(p5.x, p5.y, p5.z);
      cube.vertex(p6.x, p6.y, p6.z);
      cube.vertex(p7.x, p7.y, p7.z);

      cube.vertex(p8.x, p8.y, p8.z);
      cube.vertex(p4.x, p4.y, p4.z);
      cube.vertex(p1.x, p1.y, p1.z);
      cube.vertex(p5.x, p5.y, p5.z);

      cube.vertex(p6.x, p6.y, p6.z);
      cube.vertex(p2.x, p2.y, p2.z);
      cube.vertex(p3.x, p3.y, p3.z);
      cube.vertex(p7.x, p7.y, p7.z);
      cube.endShape(CLOSE);

      trapezoid= createShape();
      trapezoid.beginShape();
      trapezoid.vertex(p1.x, p1.y, p1.z);
      trapezoid.vertex(p2.x, p2.y, p2.z);
      trapezoid.vertex(p3.x, p3.y, p3.z);
      trapezoid.vertex(p10.x, p10.y, p10.z);
      trapezoid.vertex(p9.x, p9.y, p9.z);

      trapezoid.vertex(p1.x, p1.y, p1.z);
      trapezoid.vertex(p5.x, p5.y, p5.z);
      trapezoid.vertex(p6.x, p6.y, p6.z);
      trapezoid.vertex(p2.x, p2.y, p2.z);

      trapezoid.vertex(p3.x, p3.y, p3.z);
      trapezoid.vertex(p7.x, p7.y, p7.z);
      trapezoid.vertex(p11.x, p11.y, p11.z);
      trapezoid.vertex(p10.x, p10.y, p10.z);

      trapezoid.vertex(p11.x, p11.y, p11.z);
      trapezoid.vertex(p12.x, p12.y, p12.z);
      trapezoid.vertex(p5.x, p5.y, p5.z);
      trapezoid.vertex(p6.x, p6.y, p6.z);
      trapezoid.vertex(p7.x, p7.y, p7.z);

      trapezoid.vertex(p11.x, p11.y, p11.z);
      trapezoid.vertex(p10.x, p10.y, p10.z);
      trapezoid.vertex(p9.x, p9.y, p9.z);
      trapezoid.vertex(p12.x, p12.y, p12.z);

      trapezoid.vertex(p9.x, p9.y, p9.z);
      trapezoid.vertex(p1.x, p1.y, p1.z);
      trapezoid.vertex(p5.x, p5.y, p5.z);

      trapezoid.vertex(p6.x, p6.y, p6.z);
      trapezoid.vertex(p7.x, p7.y, p7.z);
      trapezoid.vertex(p3.x, p3.y, p3.z);
      trapezoid.vertex(p2.x, p2.y, p2.z);



      trapezoid.endShape(CLOSE);
    }
    PShape createCylinder(int sides, float r, float h) {

      PShape cylinder = createShape(GROUP);
      float angle = 360 / sides;
      float halfHeight = h / 2;

      // draw top of the cylinder
      PShape top = createShape();
      top.beginShape();
      for (int i = 0; i < sides; i++) {
        float x = cos( radians( i * angle ) ) * r;
        float y = sin( radians( i * angle ) ) * r;
        top.vertex( x, y, -halfHeight);
      }
      top.endShape(CLOSE);
      cylinder.addChild(top); //adds top to heirarchy

      // draw bottom of the cylinder
      PShape bottom = createShape();
      bottom.beginShape();
      for (int i = 0; i < sides; i++) {
        float x = cos( radians( i * angle ) ) * r;
        float y = sin( radians( i * angle ) ) * r;
        bottom.vertex( x, y, halfHeight);
      }
      bottom.endShape(CLOSE);
      cylinder.addChild(bottom); //adds bottom to heirarchy

      // draw side of the cylinder
      PShape side = createShape();
      side.beginShape(QUAD_STRIP);
      for (int i = 0; i < sides + 1; i++) {
        float x = cos( radians( i * angle ) ) * r;
        float y = sin( radians( i * angle ) ) * r;
        side.vertex( x, y, halfHeight);
        side.vertex( x, y, -halfHeight);
      }
      side.endShape(CLOSE);
      cylinder.addChild(side); //adds side to heirarchy

      return cylinder;
    }
    void draw(){
      background(255); 
      rotateX(PI/3);
      rotateZ(PI/4);
      scale(.4);
      translate(-150,0,-100);

    //LeftFoot
      pushMatrix();
      translate(100,100,-200);
      scale(1,2,.5);
      shape(cube);    
      translate(-50,-70,-20);
      scale(.3,.15,.25);
      shape(cylinder);
      translate(0,275,0);
      shape(cylinder);
      popMatrix();

      //RightFoot
      pushMatrix();
      translate(0,100,-200);
      scale(1,2,.5);
      shape(cube);    
      translate(-50,-70,-20);
      scale(.3,.15,.25);
      shape(cylinder);
      translate(0,275,0);
      shape(cylinder);
      popMatrix();

      //RightAnkle
      pushMatrix();
      translate(0,100,-200);
      scale(1,2,.5);    
      translate(-50,-70,-10);
      scale(.32,.17,.25);
      shape(cylinder);
      popMatrix();

      //LeftAnkle
      pushMatrix();
      translate(100,100,-200);
      scale(1,2,.5);
      shape(cube);    
      translate(-50,-70,-10);
      scale(.32,.17,.25);
      shape(cylinder);
      popMatrix();

      //RightLeg
      pushMatrix();
      translate(0,100,-115);
      scale(1,2,1.5);    
      translate(-50,-70,-10);
      scale(.40,.20,.25);
      shape(cylinder);
      popMatrix();

      //LeftLeg
      pushMatrix();
      translate(100,100,-115);
      scale(1,2,1.5);    
      translate(-50,-70,-10);
      scale(.40,.20,.25);
      shape(cylinder);
      popMatrix();

      //Body
      pushMatrix();
      translate(100,25,25);
      scale(2,2,1);
      shape(cube);
      popMatrix();

      pushMatrix();
      translate(100,125,125);
      scale(2,2,1);
      shape(cube);
      popMatrix();

      pushMatrix();
      translate(100,125,125);
      rotate(29.85);
      scale(1,2,1);
      shape(cube);    
      popMatrix();

      pushMatrix();
      translate(100,-275,25);
      rotate(29.85);
      scale(1,2,.3);
      shape(cube);    
      popMatrix();

      pushMatrix();
      translate(100,-475,-5);
      rotate(29.85);
      scale(3,2,.3);
      shape(cube);    
      popMatrix();

      pushMatrix();
      translate(100,-775,25);
      rotate(29.85);
      scale(4,2,.3);
      shape(cube);    
      popMatrix();

      pushMatrix();
      translate(100,-560,35);
      scale(2,2,.4);
      translate(-68,-30,-20);
      scale(.15,.15,.25);
      shape(cylinder);
      translate(0,-275,0);
      shape(cylinder);
      translate(250,0,0);
      shape(cylinder);
      translate(0,275,0);
      shape(cylinder);
      popMatrix();

      pushMatrix();
      translate(100,-390,35);
      scale(2,2,.4);
      translate(-68,-30,-20);
      scale(.15,.15,.25);
      shape(cylinder);
      translate(0,-275,0);
      shape(cylinder);
      translate(250,0,0);
      shape(cylinder);
      translate(0,275,0);
      shape(cylinder);
      popMatrix();

      pushMatrix();
      translate(100,-182.5,10);
      scale(2,2,.4);
      translate(-68,-30,-20);
      scale(.15,.15,.25);
      translate(0,-275,0);
      shape(cylinder);
      translate(250,0,0);
      shape(cylinder);
      popMatrix();

      pushMatrix();
      translate(100,25,-75);
      rotateY(PI/2);
      rotateZ(-PI/2);
      scale(2,1,2);
      shape(trapezoid);    
      popMatrix();

      pushMatrix();
      translate(100,-75,125);
      rotateY(PI/2);
      rotateZ(PI/2);
      scale(2,1,2);
      shape(trapezoid);    
      popMatrix();

      pushMatrix();
      translate(100,25,225);
      rotateY(PI/2);
      rotateZ(PI/2);
      scale(2,1,2);
      shape(trapezoid);    
      popMatrix();

      pushMatrix();
      translate(-100,25,225);
      rotateY(PI/2);
      rotateZ(PI/2);
      rotateY(PI);
      scale(2,1,2);
      shape(trapezoid);    
      popMatrix();

      //Head
      pushMatrix();
      translate(100,-75,325);
      rotate(29.85);
      scale(1,2,1);
      shape(cube);    
      popMatrix();

      pushMatrix();
      translate(100,-75,355);
      rotate(29.85);
      scale(1,2,.3);
      shape(cube);    
      popMatrix();

      pushMatrix();
      translate(-100,-75,455);
      rotateY(PI/2);
      rotateZ(PI/2);
      rotateY(PI);
      scale(2,1,2);
      shape(trapezoid);    
      popMatrix();

      pushMatrix();
      translate(100,115,470);
      scale(2,2,.3);
      translate(-68,-30,-20);
      scale(.15,.15,.25);
      translate(0,-275,0);
      shape(cylinder);
      translate(250,0,0);
      shape(cylinder);
      popMatrix();

      pushMatrix();
      translate(100,25,255);
      rotate(29.85);
      scale(3,2,.3);
      shape(cube);  
      popMatrix();

      pushMatrix();
      translate(100,415,270);
      scale(2,2,.3);
      translate(-68,-30,-20);
      scale(.15,.15,.25);
      translate(0,-275,0);
      shape(cylinder);
      translate(250,0,0);
      shape(cylinder);
      popMatrix();

      pushMatrix();
      translate(100,25,285);
      rotate(29.85);
      scale(2,2,.3);
      shape(cube);    
      popMatrix();

      pushMatrix();
      translate(-100,25,355);
      rotateY(PI/2);
      rotateZ(PI/2);
      rotateY(PI);
      scale(2,.7,2);
      shape(trapezoid);    
      popMatrix();
    }

Say I have a rectangle image. To make things easy, i started out drawing a rectangular shape as well to render the image with the texture function. I am able to draw the texture where by I map the points of the vertices to the vertices necessary for when i render the shape useing the vertex function, having it take four params now. But the thing I'm having trouble with is every time i make a cut to create a new polygon, the texture vertices are not being mapped correctly. because it looks like the two resulting shapes have overlappign portions in the texture. I'm wondering how to ensure that I will always be able to make sure that i'm cutting the piece appropriately.

github link to stuff done so far

https://github.com/aarondbaron/ProcessingSketches/tree/master/testDrawingShapeWithImage

here is the code:

  import processing.video.*;
import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.*;

PeasyCam cam;
PShader sh;
float count;
Movie mov;
PGraphics p;

void setup (){

size(1440, 900, P3D );
mov = new Movie(this, "osc_noc.mov");
mov.play();
p = createGraphics(width,height);
cam = new PeasyCam(this, 500);
sh = loadShader("basicShaderFrag.glsl", "basicShader.glsl");
}

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

void draw(){
background(0);
shader(sh);
count +=0.09;
sh.set("u_time", count);

sphere(100);
p.beginDraw();
p.background(0);
p.image(mov, 0, 0, 200, 200);
p.endDraw();
sh.set("tex",p);
// image(p, 5, 260 ,200, 200);
}

#version 150

uniform mat4 transform;
uniform sampler2D tex;

in vec4 position;
in vec2 texCoord;
in vec3 normal;

out vec2 TexCoord;

void main(){

  TexCoord = texCoord;
  gl_Position = transform * position;
}


#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14

in vec2 TexCoord;
uniform float u_time;
uniform sampler2D tex;

void main(){
  vec2 uv = TexCoord;

  gl_FragColor = vec4(texture(tex, TexCoord));
}

a white screen appears, and next it close. the console just say: "Finished". it may be a bug? i could pass a PImage as a texture. but when i link the fragment and shader program into the sketch folder then crash. ..

I'm trying to make an custom shape object that's been textured turn incrementally with rotateY() after it reaches a certain point in an oscillation. (Essentially, I'm trying to make it look like this boat image is doing a little loop around this lake if you can picture that).

Unfortunately, I'm having some difficulties in making it work properly. I've tried utilizing vectors to have the shape 'follow' the direction of motion but couldn't get that working properly. I also tried using conditionals so that when it reaches a certain point of the curve it starts to rotate X radians, but that also didn't work.

Has anyone tried something like this before?

Thank you so much!

Code below:

//tab 1

Boat boaty;
PImage background;
PImage boat;
float angle = 45;
float aVelocity = 0.01;

void setup(){
smooth();
size(638,562,P3D);
background = loadImage("background.png");
boat = loadImage("boat.png");
boaty = new Boat(boat);
}

void draw(){
image(background,0,0,width,height);
boaty.display();
boaty.move();
}

//tab 2

**class Boat {
 float r = 75;
 float theta = 0;
 float x,y,z;
 PImage img;

  Boat(PImage tempI) {
    img = tempI;
  }

  void display() {
  textureMode(NORMAL);
  noStroke();

//translating to where I want the boat to start
  translate(390,290);
  scale(.65);

// println(x,y);

// putting in variables to create the motion of the boat
  translate(x*2,y/2,50);


  pushMatrix();
  beginShape();
  texture(img);
  vertex(0,0,0,0);
  vertex(115,0,1,0);
  vertex(115,160,1,1);
  vertex(0,160,0,1);
  endShape();
  popMatrix();
  }

  void move(){
  x = r * cos(theta);
  y = r * sin(theta);
  angle += aVelocity;
  theta+= .01;
  }
}

PImage blob;
void setup() {
  size(800,800,P2D);
  blob = loadImage("ASD.jpg");
}
void draw() {
  background(255);
  beginShape(QUADS);
  texture(blob);
  noStroke();
  vertex(100,100,0,0);
  vertex(100,200,0,1);
  vertex(200,200,1,1);
  vertex(200,100,1,0);
  endShape();
}

If someone can explain to me what the 0s and 1s mean as the 3rd and 4th arguments in the vertexes of a beginShape(QUADS) function, that would be awesome!

Unable to find one, I went ahead to make a small version for my project. Right now I control the (u,v) coordinates to make an Illusion of water level moving up and down. It works fine, but I want the help of the community so that one can texture videos and also maybe dynamically control the points after being mapped.

/*Instructions: 

1.MAKE A SHAPE WITH THE POINTS
2.PRESS 'E' TO TERMINATE AND MAKE THE NEXT SHAPE
3.ONCE DONE WITH ALL SHAPE PRESS 'E' AGAIN
4.PRESS 'Z' TO LOAD THE TEXTURE AND PLAY WITH THE MOUSE VALUE

*/

ArrayList<Polygon> polygons;
PVector[][] P = new PVector[20][200];
PImage img;
boolean render;
int a=0,count=0;
float p1;

 void setup()
{
  //size(800,800,P3D);
  fullScreen(P3D); 
  img = loadImage("1.jpg");  
  smooth();
  polygons = new ArrayList<Polygon>();
}

void draw()
{

  if(render == true)
  {
     noStroke();
     //noFill();
     background(0);

     for (Polygon poly : polygons) 
     {
        p1=map(mouseX,0,width,1,0); 
        poly.Render(img,p1);
      }         

    }  
}

void mousePressed()
{ 
  ellipse(mouseX,mouseY,1,1);
  P[a][count]= new PVector(mouseX,mouseY); //Saves the mouse position and adds to the array
  println(a,count);
  count++;
}

void keyPressed()
{

 if(key=='E'||key=='e') //to terminate one shape making and start a new one
 {
    Polygon p = new Polygon(P[a]); 
    polygons.add(p);//adds to polygon arraylist
    count=0;
    a++;
 }

if(key=='z')
{
  render = true;
}

}

 class Polygon{

  PVector[] Points=new PVector[200];
  PShape s;
  int end;
  int count = 0;

  Polygon(PVector A[])
  {
    while(A[count] !=null)
    {
      count++;
    }


    for(int i=0;i<count;i++)
      Points[i] = new PVector(A[i].x,A[i].y);


   }

  void Render(PImage image,float p1)
  {

  s = createShape();
  noStroke();
  noFill();
  textureMode(NORMAL);
  s.beginShape(TRIANGLE_STRIP);

  s.texture(image); 

   if(count%2==0)//count controls the number of times the loop must go on as we alternate 2 points
    end = count/2;
   else
    end = count/2 +1;

   for(int i=0 ; i<end ; i++)
   { 
     //alternating between two points and moving down horizontally 
     s.vertex(Points[i].x , Points[i].y , 0 , p1*(i*2)/count);  
      s.vertex(Points[count-i-1].x , Points[count-i-1].y , 1 , p1*(i*2)/count);
   } 

 s.endShape(CLOSE);

 shape(s, 0, 0); //Display the shape
  }




 }

/* @pjs preload="ToxicTots.jpg","spine.jpg","top.jpg", "bottom.jpg"; */

PImage tex1; PImage tex2; PImage tex3; PImage tex4;

float rotx = PI/4; float roty = PI/4;

void setup() { size(800, 900, P3D); tex1 = loadImage("ToxicTots.jpg"); tex2 = loadImage("spine.jpg");
tex3 = loadImage("top.jpg");
tex4 = loadImage("bottom.jpg"); textureMode(NORMAL); fill(255); stroke(color(44,48,32)); }

void draw() { background(176,224,230); noStroke(); translate(width/2.0, height/3.0, -100); rotateX(rotx); rotateY(roty); scale(200); TexturedCube(tex1);
TexturedCube(tex2);
TexturedCube(tex3); TexturedCube(tex4); }

void TexturedCube(PImage tex) { beginShape(QUADS);

// +Z "front" face texture(tex1); vertex(-.25, -1, 1, 0, 0); vertex( 1, -1, 1, 1, 0); vertex( 1, 1, 1, 1, 1); vertex(-.25, 1, 1, 0, 1);

// -Z "back" face texture(tex1); vertex( 1, -1, .75, 0, 0); vertex(-.25, -1, .75, 1, 0); vertex(-.25, 1, .75, 1, 1); vertex( 1, 1, .75, 0, 1); endShape();

// +Y "bottom" face
beginShape(QUADS); texture(tex3); vertex(-.25, 1, 1, 0, 0); vertex( 1, 1, 1, 1, 0); vertex( 1, 1, .75, 1, 1); vertex(-.25, 1, .75, 0, 1); endShape();

// -Y "top" face beginShape(QUADS);
texture(tex4); vertex(-.25, -1, 1, 0, 0); vertex( 1, -1, 1, 1, 0); vertex( 1, -1, .75, 1, 1); vertex(-.25, -1, .75, 0, 1); endShape();

// +X "right" face beginShape(QUADS); texture(tex2); vertex( 1, -1, 1, 0, 0); vertex( 1, -1, .75, 1, 0); vertex( 1, 1, .75, 1, 1); vertex( 1, 1, 1, 0, 1);

// -X "left" face vertex(-.25, -1, 1, 0, 0); vertex(-.25, -1, .75, 1, 0); vertex(-.25, 1, .75, 1, 1); vertex(-.25, 1, 1, 0, 1); endShape(); }

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

The problem I'm having is already stated by someone else here: https://forum.processing.org/two/discussion/1842/opengl-mapping-texture-and-perspective

One of the suggested solutions is to divide the surface into triangle strips to reduce the effect. I tried that solution, it works and it is not what I am interested in, so I'm writing this post. What I'm interested in is the other suggested solution - to get OpenGL to use QUADS, how do I do that exactly?

I'm using Processing 3 and I know I have to do this:

import com.jogamp.opengl.GL;
import com.jogamp.opengl.GL2ES2;

and something like this somewhere:

PJOGL pgl = (PJOGL) beginPGL();  
GL2ES2 gl = pgl.gl.getGL2ES2();

but I'm not sure how to use that to achieve what I want.

Cheers,

Paolo

Excuse my very poor English.

I am a very beginner.

I would like to be guided please.

My project :
1. I have a picture for example 1200/1200 pixels.
2. At any point in the picture, I click with the mouse to have a point "c".
3. This point "c" becomes the center of 5 concentric rings.
4. I would like to turn the rings a few degrees clockwise or counter-clockwise.

I have no idea that the pixels of the original photo become the pixels of my rings.

It would be nice of me to orient myself.

Thank you

What i want to do is this but in movement....

PImage iceCream;
PImage waffleCone;

PShape cone;
PShape cream;

PShader texlightShader;
PShader shader2;
PShader toon;

float angle;
boolean button = false;
//boolean button2 = false;
//boolean button3 = false;


void setup() {
  size(800, 800, P3D);
  iceCream = loadImage("cream.jpg");
  waffleCone = loadImage("waffle.jpg");

  texlightShader = loadShader("texlightfrag.glsl", "texlightvert.glsl");
  shader2 = loadShader("lightfrag.glsl", "lightvert.glsl");

  toon = loadShader("frag.glsl", "vert.glsl");
  toon.set("fraction", 1.0);

  //noLoop();
    frameRate(30);
}

void draw() {
  background(0);
  lights();
  translate(width / 2, height / 1.5);

  ////cameras
    rotateY(angle);
    //rotateX(map(mouseX, 0, width, 0, PI));
    //rotateY(map(mouseX, 0, width, 0, PI));
    rotateZ(map(height, 0, height, 0, -PI));



  ////lights
    //pointLight(255, 255, 255, width/2, height, 600);  
    directionalLight(255,255,255, -1, 0, 0);

    //float dirY = (mouseY / float(height) - 0.5) * 2;
    //float dirX = (mouseX / float(width) - 0.5) * 2;
    //directionalLight(204, 204, 204, -dirX, -dirY, -3);


  noStroke();
  fill(0, 0, 255);
  translate(0, -40, 0);

  ///buttons to be implemented later
  //if(!button) {shader(toon);} else {resetShader();}
  //if (!button2){noStroke();}else { stroke(0);


  if(!button) {
  //shader(toon); not working must troubleshoot
  resetShader();
  drawCylinder_noTex(10, 75, 250, 16);} 

  else {
  shader(texlightShader);
  cone = drawCylinder(10, 75, 250, 16, waffleCone); }

  //cone = drawCylinder(10, 75, 250, 16, waffleCone); 
  //drawCylinder_noTex(10, 75, 250, 16);

 angle += 0.01;
}

PShape drawCylinder(float topRadius, float bottomRadius, float tall, int sides, PImage tex) {
  textureMode(NORMAL);
  PShape sh = createShape();


  sh.beginShape(QUAD_STRIP);
  //sh.noStroke();
  sh.texture(tex);

  for (int i = 0; i < sides + 1; ++i) {
    float angle = 0;
    float angleIncrement = TWO_PI / sides;

    sh.vertex(topRadius*cos(angle), 0, topRadius*sin(angle), 0);
    sh.vertex(bottomRadius*cos(angle), tall, bottomRadius*sin(angle), 100);
    angle += angleIncrement;
  }
  sh.endShape();
  return sh;  

/*
  pushMatrix();

    //ice cream
    translate(0,height/3);
    sphere(75);
  popMatrix();

*/
}

void drawCylinder_noTex(float topRadius, float bottomRadius, float tall, int sides) {
  textureMode(NORMAL);
  createShape();

  float angle = 0;
  float angleIncrement = TWO_PI / sides;
  beginShape(QUAD_STRIP);
  //sh.texture(tex);

  for (int i = 0; i < sides + 1; ++i) {
    vertex(topRadius*cos(angle), 0, topRadius*sin(angle));
    vertex(bottomRadius*cos(angle), tall, bottomRadius*sin(angle));
    angle += angleIncrement;
  }
  endShape();

/*
  pushMatrix();

    //ice cream
    translate(0,height/3);
    sphere(75);
  popMatrix();
  */
}

void keyPressed()
  {
    if (key == 'b' || key == 'B') {button = !button;}
    //if (key == 'n' || key == 'N') {button2 = !button2;}  //future implementation
    //if (key == 'm' || key == 'M') {button3 = !button3;} //future implementation  
  }

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

So my question as state in the title, how do you use PGraphics for creating textures? Or is there a better way?

Texture texture;

float radius = 300;
float angleStep = 60;

PImage img;

void setup() {
  size(800, 600, P3D);
  smooth(6);
  textureMode(NORMAL);
  texture = new Texture();
}

void draw() {
  background(255);
  texture.update();
  hexGrid();
}

void hexGrid() {
  noFill();
  noStroke();
  //stroke(0);  

  beginShape(TRIANGLE_FAN);
  translate(width/2, height/2);
  texture(texture.tex);
  vertex(0, 0, 0.5, 1); // center
  for (int i=0; i<6+1; i++) {
    float x = cos(radians(angleStep) * i) * radius;
    float y = sin(radians(angleStep) * i) * radius;

    if (i%2 == 0) {
      vertex(x, y, 0, 0);
    } else {
      vertex(x, y, 0, 1);
    }
  }
  endShape();
}

class Texture {
  PGraphics pg;
  PImage tex;

  float rot = 0;
  float z = 0;
  float max = 1000;

  Texture() {
    pg = createGraphics(width, height, P3D);
    pg.rectMode(CENTER);
    pg.noStroke();
    pg.colorMode(HSB);
  }

  void update() {
    pg.beginDraw();
    createTexture();
    pg.endDraw();
    tex = pg.get();
  }

  void createTexture() {
    float x = 0;
    while (x < width + 40) {
      float y = 0;
      while (y < height + 40) {
        float co = 255 * noise(x/500, y/500, z);
        fill(co*2, 50, co*3, co*3);
        rotRectangle(x, y, 60, rot + x + y); 
        y += 40;
      }
      x += 40;
    }
    z += 0.01;
    rot += 0.1;
  }

  void rotRectangle(float x, float y, float size, float r) {
    translate(x, y);
    //rotate(r);
    beginShape();
    vertex(-size/2, -size/2);
    vertex(size/2, -size/2);
    vertex(size/2, size/2);
    vertex(-size/2, size/2);
    endShape();
    resetMatrix();
  }
}

The texture image is just a simple ellipse (link). As you can see as soon as I wrap it on the deformed plane it looks broken

Here's my code. pg is just an image with the ellipse.

  textureMode(NORMAL);
  beginShape(TRIANGLE_FAN);

  texture(pg);
  vertex(30,20, 0, 0);
  vertex(680,62, 1, 0);
  vertex(629,478, 1, 1);
  vertex(158,499, 0, 1);

  endShape();

IMHO I was expecting a result like my mockup (link). What am I doing wrong here?

(I'm pretty new to this "Fantastic" tool so please forgive if I'm just doing something obviously wrong)

I'm trying to transform a picture interactively using mouse control.

I've created some code (pasted at the end here) and all seems working fine other than the expected behavior of applied texture to shape.

If you try extending a corner of the shape (dragging any corner) the texture is transformed only in the triangle formed by the dragged corner and the two adjacent corners.

I'm attaching here 2 pictures showing the behavior for clarity

Here's my code

class Quadro {
  float [][] vertices;
  int i;
  int indexActive = -1;
  PImage img;

  Quadro () {
    vertices = new float[2][4];
  }

  void setSize() {
    vertices[0][0] = width * 3 / 12;
    vertices[1][0] = height * 3 / 12;

    vertices[0][1] = width * 9 / 12;
    vertices[1][1] = height * 3 / 12;

    vertices[0][2] = width * 9 / 12;
    vertices[1][2] = height * 9 / 12;

    vertices[0][3] = width * 3 / 12;
    vertices[1][3] = height * 9 / 12;
  }

  void checkActiveVetices() {
    float oldDistance = 100000000;
    float distance;

    for (i = 0; i < 4; i++) {
      distance = dist(mouseX, mouseY, vertices[0][i], vertices[1][i]); 
      if (distance < oldDistance) {
        indexActive = i;
        oldDistance = distance;
      }
    }
  }

  void setActiveVertice() {
    vertices[0][indexActive] = mouseX;
    vertices[1][indexActive] = mouseY;
  }

  void setTexture(PImage i) {
    img = i;
  }

  void paint() {
    background(128, 255, 0);
    fill(255);
    noStroke();
    beginShape();
    textureMode(NORMAL);
    texture(img);
    vertex(vertices[0][0], vertices[1][0], 0, 0);
    vertex(vertices[0][1], vertices[1][1], 1, 0);
    vertex(vertices[0][2], vertices[1][2], 1, 1);
    vertex(vertices[0][3], vertices[1][3], 0, 1);
    endShape();

    if ( indexActive >= 0) {
      ellipse(vertices[0][indexActive], vertices[1][indexActive], 10, 10);
    }
    fill(255);
  }
}


// define global variables
Quadro q = new Quadro();
PImage img;

void setup() {
  size(900, 500, P3D);
  q.setTexture(loadImage("PleaseAddYourImageHere.JPG")); 
  q.setSize();
  q.paint();
}

void draw() {
  q.checkActiveVetices();
  if (mousePressed && (mouseButton == LEFT)) {
    q.setActiveVertice();
  }

  q.paint();
}

How can I transform the picture in a more expected proportional mode?

Thanks, Marco

So let me know how to do this.

PImage img;
PImage newimg;

int radius = 300;
float alpha = 0;
float r = 0.5;
float seed = -0.6;
float segments = 24;
float part = segments/2;
float x, y;
float angle_steps;
float angle_deg;
int image = 0;

float scale;

void setup() {
  size(800, 600, P3D);
  smooth(6);
  textureMode(NORMAL);
  noFill();
  stroke(0); 
  //noStroke(); 

  img = loadImage("image1.jpg");
  radius = height/2;
}

void draw() {
  background(255);
  ellipse(width/2, height/2, 300, 300);
  hexShape(radius);
}

void hexShape(int _radius) {
  pushMatrix();
  translate(width/2, height/2);
  beginShape(TRIANGLE_FAN);  
  rotate(-PI/2);
  texture(img);
  vertex(0, 0, 0.5, 0.5); // center
  for (int i=0; i<segments+1; i++) {
    angle_steps = 360/segments;
    angle_deg = angle_steps * i;

    x = cos(radians(angle_deg)) * _radius;
    y = sin(radians(angle_deg)) * _radius;

    if (i%2 == 0) {
      vertex(x, y, .5 + r * cos(alpha + PI / part) + scale, .5 + r * sin(alpha + PI / part) + scale);
    } else {
      vertex(x, y, .5 + r * cos(alpha) + scale, .5 + r * sin(alpha) + scale);
    }
  }
  endShape();  
  popMatrix();

  alpha = 1.9*sin(seed);
  seed += 0.003;
}

void scaleTexture() {
  scale = map(mouseX, 0, width, 0, 1);
}

void mouseWheel(MouseEvent event) {
  int e = event.getCount(); //returns UP:-1 DOWN:1
  segments += (e*2)*-1;
  part = segments/2;
}

void mouseClicked() {
  if (mouseButton == LEFT) {
    image++;
    if (image > 2) image = 0;
  }
  if(mouseButton == RIGHT){
    image--;
    if(image < 0) image = 2;
  }
  switch(image) {
  case 0:
    img = loadImage("image1.jpg");
    break;

  case 1:
    img = loadImage("image2.jpg");
    break;

  case 2:
    img = loadImage("image3.jpg");
    break;
  }
}

The stupid() function works but createTexture() doesn't.

PGraphics pg;
PImage img;

float size = 200;

void setup() {
  background(255);
  size(800, 600, P3D);
  textureMode(NORMAL);

  pg = createGraphics(100, 100, P3D);
  createTexture();
}

void draw() {
  background(255);  
  translate(width/2, height/2, 0);
  beginShape();
  texture(pg.get());
  fill(0);
  vertex(-size, -size, 0, 0, 0);
  vertex(size, -size, 0, 1, 0);
  vertex(size, size, 0, 1, 1);
  vertex(-size, size, 0, 0, 1);
  endShape();
}

void stupid(){
  pg.beginDraw();
  pg.background(255);
  pg.ellipse(pg.width/2, pg.height/2, 50, 50);
  pg.endDraw();
}

void createTexture() {
 pg.beginDraw();
 pg.background(255);
 pg.stroke(0);
 pg.noFill();
 drawCircle(width/2, height/2, 50);
 pg.endDraw();
}

void drawCircle(float x, float y, float d) {
  pg.ellipse(x, y, d, d);
  if (d > 2) {
    drawCircle(x+d/2, y, d/2);
    drawCircle(x-d/2, y, d/2);
  }
}

PImage img;
PImage newimg;

int radius = 100;
float alpha = 0;
float r = 0.5;
float seed = -0.6;
float segments = 6;
float part = segments/2;
float x, y;
float angle_steps;
float angle_deg;

int col = 2;
int row = 2;

void setup() {
  size(800, 600, P2D);
  smooth(6);
  textureMode(NORMAL);
  //img = loadImage("ilrae.jpg");
}

void draw() {
  background(255);
  hexGrid();
}

void hexGrid(){
  for(int y=0; y<row+1; y++){
    for(int x=0; x<col+1; y++){
      int hexHeight = radius*2;
      int hexWidth = (int) sqrt(3)/2 * hexHeight;      

      int xPos = x * hexWidth;
      int yPos = y * hexHeight;
      hexShape(radius, xPos, yPos);
    }
  }
}

void hexShape(int _radius, int _xPos, int _yPos) {
  noFill();
  stroke(0); 
  //noStroke();   

  pushMatrix();
  beginShape(TRIANGLE_FAN);
  translate(_xPos, _yPos);
  rotate(-PI/2);
  //texture(img);
  vertex(0, 0, 0.5, 0.5); // center
  for (int i=0; i<segments+1; i++) {
    angle_steps = 360/segments;
    angle_deg = angle_steps * i;

    x = cos(radians(angle_deg)) * _radius;
    y = sin(radians(angle_deg)) * _radius;

    vertex(x,y);
    //if (i%2 == 0) {
    //  vertex(x, y, .5 + r * cos(alpha + PI / part), .5 + r * sin(alpha + PI / part));
    //} else {
    //  vertex(x, y, .5 + r * cos(alpha), .5 + r * sin(alpha));
    //}
  }
  endShape();
  popMatrix();

  alpha = 1.9*sin(seed);
  seed += 0.001;
}

//void mouseWheel(MouseEvent event) {
//  int e = event.getCount(); //returns UP:-1 DOWN:1
//  segments += (e*2)*-1;
//}

I'm having trouble with a bit of code that looks like it should work fine, but doesn't.

I want to draw a texture on vertices, but all of this is happens inside a PGraphics window. In the code below, the shape gets drawn just fine with a fill, but if it's a texture then nothing works. However, when drawn outside of the window the texture works just fine. You can check by using comment/uncomment on each section.

Is this a bug? Or is there some unknown solution?

PImage photo;
PGraphics mf;

void setup(){
  size(800, 600, P3D);
  mf = createGraphics(500, 315, P3D);
  background(100);
  photo = loadImage("test.png");
  textureMode(NORMAL);
  imageMode(CENTER);
}

void draw(){
  background(150);

  //pushMatrix();
  //translate(width/2, height/2);
  //noStroke();
  //beginShape();
  // texture(photo);
  // vertex(-mf.width/2, -mf.height/2, 0, 0);
  // vertex(mf.width/2, -mf.height/2, 1, 0);
  // vertex(mf.width/2, mf.height/2, 1, 1);
  // vertex(-mf.width/2, mf.height/2, 0, 1);
  //endShape();
  //popMatrix();

  mf.beginDraw();
   mf.background(50);
   mf.pushMatrix();
   mf.translate(mf.width/2 + 10, mf.height/2 + 10);
   mf.noStroke();
   mf.beginShape();
     //mf.texture(photo);
     mf.fill(255);
     mf.vertex(-mf.width/2, -mf.height/2, 0, 0);
     mf.vertex(mf.width/2, -mf.height/2, 1, 0);
     mf.vertex(mf.width/2, mf.height/2, 1, 1);
     mf.vertex(-mf.width/2, mf.height/2, 0, 1);
   mf.endShape();
   mf.popMatrix();
  mf.endDraw();

  pushMatrix();
  translate(width/2, height/2);
  image(mf, 0, 0);
  popMatrix();
}

Note: I'm having trouble understanding the parameters of the vertex() when textures are to be applied.

I feel I am doing everything correctly but when I run the program my shape is filled with white, not the jpg. If someone sees something I'm doing wrong I would be most grateful.

PShape bw; 
PImage text4; // 

void setup () {
  size (1200, 1200, P2D);
  text4=loadImage("800x800bgd.jpg");
}

void draw() {
  background (0); 
  translate (width/2, height/2);
  makeText();
  shape(bw);
}

void makeText() {
  bw = createShape();
  bw.beginShape();
  textureMode(IMAGE);
  texture(text4);
  bw.vertex(-400, -400, 0, -400, -400); // last 2 parameters are used for coords for texture mapping
  bw.vertex(400, -400, 0, 400, -400);
  bw.vertex(400, 400, 0, 400, 400);
  bw.vertex(-400, 400, 0, 400, 400);

  bw.endShape();
}

PeasyCam cam;
Ground ground;
PImage grassTexture;

void setup(){
  size(displayWidth-100, displayHeight-100, OPENGL);
  grassTexture=loadImage("grass.jpg");
  ground=new Ground(new PVector(0,200,0), 12000, 15, 6000, 50, grassTexture);

  cam = new PeasyCam(this, 100);
  cam.setMinimumDistance(50);
  cam.setMaximumDistance(500);
}

void draw(){
  background(0,172,255);
  ambientLight(120, 120, 120);  //regular light that reaches everywhere

  lightFalloff(1, .001, .0001);
  //lightSpecular(5, 5, 5); //gives tiny glow to ground in darkness, might take out when I make ground with more segments
  directionalLight(170, 170, 170, .5, 1, 0);  //creates shadow

  ground.render();
}

class Ground {

  PVector pos;
  float gWidth, gHeight, gLength;
  float squareDim;

  PImage t;
  float[][] pointHeight;
  ArrayList<ArrayList<PVector>> normals;

  PShape ground;

  Ground(PVector pos, float gWidth, float gHeight, float gLength, float squareDim, PImage t) {
    this.pos=pos;
    this.gWidth=gWidth;
    this.gHeight=gHeight;
    this.gLength=gLength;
    this.squareDim=squareDim;
    this.t=t;
    pointHeight=new float[(int)(gWidth/squareDim)][(int)(gLength/squareDim)];
    for (int i=0; i<(int)(gLength/squareDim); i++) {
      for (int j=0; j<(int)(gWidth/squareDim); j++) {
        pointHeight[j][i]=pos.y+random(-gHeight, gHeight);
      }
    }
    ground=createShape(GROUP);
    addHills();
    assignNormals();
    draw();
  }

  void assignNormals(){
    normals=new ArrayList<ArrayList<PVector>>();
    float leftTop, leftMiddle, leftBottom, middleTop, middleMiddle, middleBottom, rightTop, rightMiddle, rightBottom;
    for (int i=0; i<gLength/squareDim; i++) {
      ArrayList<PVector> rowNormals=new ArrayList<PVector>();
      middleMiddle=pointHeight[0][i];
      leftMiddle=middleMiddle+random(-gHeight, gHeight);

      if (i>0) {
        middleTop=pointHeight[0][i-1];
        leftTop=middleTop+random(-gHeight, gHeight);
      } else {
        middleTop=middleMiddle+random(-gHeight, gHeight);
        leftTop=(middleTop+middleMiddle)/2+random(-gHeight, gHeight);
      }
      if (i<(int)gLength/squareDim-1) {
        middleBottom=pointHeight[0][i+1];
        leftBottom=middleBottom+random(-gHeight, gHeight);
      } else {
        middleBottom=middleMiddle+random(-gHeight, gHeight);
        leftBottom=(middleBottom+middleMiddle)/2+random(-gHeight, gHeight);
      } 
      for (int j=0; j<gWidth/squareDim; j++) {
        if (j>gWidth/squareDim-2) {
          println("last in column");
          rightMiddle=middleMiddle+random(-gHeight, gHeight);
          rightTop=(rightMiddle+middleTop)/2+random(-gHeight, gHeight);
          rightBottom=(rightMiddle+middleBottom)/2+random(-gHeight, gHeight);
        } else {
          //rightMiddle=middleMiddle+random(-gHeight, gHeight);
          rightMiddle=pointHeight[j+1][i];
          if (i>0) {
            //rightTop=rightMiddle+random(-gHeight, gHeight);
            rightTop=pointHeight[j+1][i-1];
          } else { 
            rightTop=rightMiddle+random(-gHeight, gHeight);
          }
          if (i<(int)gLength/squareDim-1) {
            //rightBottom=rightMiddle+random(-gHeight, gHeight);
            rightBottom=pointHeight[j+1][i+1];
          } else {
            rightBottom=rightMiddle+random(-gHeight, gHeight);
          }
        }
        float middle=(leftTop+leftMiddle+leftBottom+middleTop+middleBottom+rightTop+rightMiddle+rightBottom)/8;
        float left=(leftTop+leftMiddle+leftBottom+middleTop/2+middleBottom/2)/4;
        float top=(leftTop+middleTop+rightTop+leftMiddle/2+rightMiddle/2)/4;


        //is something wrong in here??????
////////////////////////////////////////////////////////////////////////////////////
       PVector normal=new PVector(-(left-middle), -squareDim/2, -(top-middle));
       normal.normalize();
//////////////////////////////////////////////////////////////////////////////////////


        rowNormals.add(normal);

        leftTop=middleTop;
        leftMiddle=middleMiddle;
        leftBottom=middleBottom;

        middleTop=rightTop;
        middleMiddle=rightMiddle;
        middleBottom=rightBottom;
      }
      normals.add(rowNormals);
    }
  }

  void render() {
    shape(ground);
  }

  void addHills() {
  }

  void Hill(PVector loc) {
    PVector placement=PVector.sub(loc, pos);
    placement.div(squareDim);
  }

  void draw() {
    PShape strip;
    for (int i=0; i<(int)(gLength/squareDim-1); i++) {
      strip=createShape(GROUP);
      ArrayList<PVector> top=new ArrayList<PVector>();
      ArrayList<PVector> bottom=new ArrayList<PVector>();
      top=normals.get(i);
      bottom=normals.get(i+1);
      PShape quad;
      for (int j=0; j<(int)(gWidth/squareDim-1); j++) {
        quad=createShape();
        quad.beginShape(QUAD);
        quad.textureMode(NORMAL);
        quad.texture(t);
        quad.fill(116, 74, 39);
        quad.noStroke();
        //lightVarShape(quad);
        PVector normal1=top.get(j);
        PVector normal2=bottom.get(j);
        PVector normal3=top.get(j+1);
        PVector normal4=bottom.get(j+1);
        float point1=pointHeight[j][i];
        float point2=pointHeight[j][i+1];  
        float point3=pointHeight[j+1][i];
        float point4=pointHeight[j+1][i+1];
        quad.normal(normal1.x, normal1.y, normal1.z);
        quad.vertex(pos.x-gWidth/2+squareDim*j, point1, pos.z-gLength/2+squareDim*i, 0, 0);
        quad.normal(normal3.x, normal3.y, normal3.z);
        quad.vertex(pos.x-gWidth/2+squareDim*(j+1), point3, pos.z-gLength/2+squareDim*i, 1, 0);
        quad.normal(normal4.x, normal4.y, normal4.z);
        quad.vertex(pos.x-gWidth/2+squareDim*(j+1), point4, pos.z-gLength/2+squareDim*(i+1), 1, 1);
        quad.normal(normal2.x, normal2.y, normal2.z);
        quad.vertex(pos.x-gWidth/2+squareDim*j, point2, pos.z-gLength/2+squareDim*(i+1), 0, 1);

        quad.endShape();
        strip.addChild(quad);
      }
      ground.addChild(strip);
    }
  }
}

Does anyone know how to fix this? Is it the normal that is facing into the ground?