What I want is to have a shape defined as an object and then have a grow function as part of that shape which will grow it during draw, but I'm not sure I'm even on the right track trying to have this work as an object.

My current class idea is to have the original shape and then manipulate it somehow and add it to a group of shapes which all get drawn during the display function, so it looks like the shape is growing:

class growingShape {

  PShape growths;
  PShape originalshape;

  color c;
  float originalX;
  float originalY;
  float wide;
  float high;

  float newY;
  float newX;
  float newwide;
  float newhigh;

  growingShape(color tempC, float tempXpos, float tempYpos, float tempWidth, float tempHeight) { 
    c = tempC;
    originalX = tempXpos;
    originalY = tempYpos;
    wide = tempWidth;
    high = tempHeight;
    growths = createShape(GROUP);
    originalshape = createShape(ELLIPSE,originalX,originalY,wide,high);
    originalshape.setFill(color(c));
    originalshape.setStroke(color(c));

  }

  void display() {
    shape(originalshape);
    shape(growths);
  }

  void grow() {
  // what would this look like??
  }
}

then runtime would be something like

void setup {
  example = new growingShape(#D1B319,450,100,30,30);
}

void draw {
  example.display();
  example.grow();
}

I was thinking of using translate/push/pop matrix or stuff like that to make it grow, but I don't think there's a way you can do that inside the grow function in an object?

Like I said, I might be totally overcomplicating this. I'm just looking for tips on how to make a shape that grows in a complex manner. Thanks. : )

PShape GroupBoss;
PShape GroupVice;
PShape GroupMem;
PShape[] Low = new PShape[3];
PShape Target;
PShape Target2;
//Adjust Values here, to test as simple as possible^^ (took quite some time to get all done nicely xD)
float angle = radians(01); //just change this, so it rotates around it 0-360
int Child = 0; //Change to select next Child 0,1,2 (0 = no Child selected)
int Test = 0; //0 = test Child/s rotating relative to the parent; 1 = see Child not rotating relative to Parent rotating realtive to Parent (yeah, i did write it twice intentionally xD)
//No need to interfere with any Code other than above, to make Changes. Well... except for Code changes, but not for Testing around XD please use it a bit before finding the solution (as i said... took quite some time xD)

void setup() {
  size(500, 500, P3D);
  GroupBoss = createShape(GROUP);
  GroupVice = createShape(GROUP);
  GroupMem = createShape(GROUP);

  for (int i = 0; i < Low.length; i++) {
    Low[i] = createShape();
    Low[i].beginShape(QUAD);
    Low[i].fill(i*((205/3) + 50));
    Low[i].vertex(0, 0);
    Low[i].vertex(100, 0);
    Low[i].vertex(100, 100);
    Low[i].vertex(0, 100);
    Low[i].endShape(CLOSE);
  }

  GroupBoss.addChild(GroupVice);
  GroupBoss.addChild(Low[0]);
  GroupVice.addChild(GroupMem);
  GroupVice.addChild(Low[1]);
  GroupMem.addChild(Low[2]);
  GroupBoss.translate(100, 200);
  GroupBoss.getChild(0).translate(100, 0);
  GroupBoss.getChild(0).getChild(0).translate(100, 0);
  Target = GroupBoss;
  for (int i = 0; i < Child; i++) {
    Target = Target.getChild(0);
  }
}

void draw() {
  background(150);
  shape(GroupBoss);
  if (Test == 0) {
    customRotate(Target, 0);
  } else {
    Target = GroupBoss.getChild(0);
    Target2 = GroupBoss.getChild(0).getChild(0);
    customRotate(Target, 0);
    customRotate(Target2, 1);
  }
}

void customRotate(PShape Shape, int test) {
  Shape.translate(test == 0 ? -(Child * 100 + 100) : -(2*100+100), -200);
  Shape.rotate(angle);
  Shape.translate(test == 0 ? Child * 100 + 100 : 2*100+100, 200);
}

It should be quite easy to understand where the problem lies, once you test the... test..., but just in case, i'll try to explain as detailed as i can. We have Pshape a<b<c with respective parents/childs (Parent<Child). Now if we rotate c, just c rotates like expected. If we rotate b, b and c rotate as expected together. But if we rotate b and c, b rotates like expected, but c (which should still rotate around the same axis as befor(in this case the top right corner of b))now rotates around the point where the top middle of b was before starting rotation... and i dont get why... so if anyone know why, or preferably a piece of code that solves this problem, please tell me... i'm looking for a workaround for at least 3 weeks now all over the internet and trying out everything i came up with... I'd also try complex math formuls, but since i cant access the x and y and angle of each shape, theres not much i can do... i also tried storing each x, y and ange translation/rotation in an extra PVertex/float array for each shape, but without much success(mainly cause it got a bit confusing xD)... Thanks^^

Edit: Btw, in some testing during the last weeks, i found out, that the relative position it (in this case c) rotates around, depends on the angle at which both rotate, respectively. So if both angles are equal,it goes where i said, but if one angle differs, the relative position around which c rotates changes... just like if it was changing it... but i dont know how i could counteract this. If i was able to do that, i could just come up with a way to offset it then, so that the relative position would be right again. Just said it, in case someone was gonna say, to just add x + 25 to the offset (in this case). Because even though it works here with the fixed position, it wouldnt if the angles would differ.

I get the following error when I try to use both at the same time : Cannot validate shader program:Validation Failed: Sampler error: Sampler of different types use the same texture image unit. -or- A sampler's texture unit is out of range (grater than max allowed or negative)

I dont think my unit is out of range, I think the problem is because of the same unit problem.

Exemple code :

Sketch

import queasycam.*;
import java.nio.IntBuffer;

QueasyCam cam;

PShader shader;
PShape sphere;

PImage[] skybox = new PImage[6];
PImage cubeMap;
PImage texture;

void setup() {
  fullScreen(P3D);
  noStroke();

  //Create FPS Camera
  cam = new QueasyCam(this);

  //Load Shader
  shader = loadShader("frag.glsl", "vert.glsl");

  //Load Skybox Image
  cubeMap = loadImage("skybox.jpg");
  skybox = sliceCubeMap(cubeMap);

  //Load texture
  texture = loadImage("texture.png");

  //Cube Map
  glslCubeMap(2, cubeMap);
  shader.set("cubemap", 2);

  //Diffuse Map
  shader.set("diffuseMap", texture);

  sphere = createShape(SPHERE, 150);
  sphere.setFill(color(-1, 50));
} 

void draw() {
  background(0);

  //Update Camera Position
  shader.set("camPosition", cam.position);

  //Render Shape
  shader(shader);
  shape(sphere);
}

PImage[] sliceCubeMap(PImage cubeMap) {
  PImage[] textures = new PImage[6];

  int ux = cubeMap.width/4;
  int uy = cubeMap.height/3;

  //X
  textures[0] = cubeMap.get(ux*2, uy, ux, uy);
  textures[1] = cubeMap.get(0, uy, ux, uy);

  //Y
  textures[2] = cubeMap.get(ux, 0, ux, uy);
  textures[3] = cubeMap.get(ux, uy*2, ux, uy);

  //Z
  textures[4] = cubeMap.get(ux, uy, ux, uy);
  textures[5] = cubeMap.get(ux*3, uy, ux, uy);

  return textures;
}

void glslCubeMap(int unit, PImage cubeMap) {
  glslCubeMap(unit, sliceCubeMap(cubeMap));
}

void glslCubeMap(int unit, PImage[] textures) {
  glslCubeMap(unit, textures[0], textures[1], textures[2], textures[3], textures[4], textures[5]);
}

void glslCubeMap(int unit, PImage posX, PImage negX, PImage posY, PImage negY, PImage posZ, PImage negZ) {

  PGL pgl = beginPGL();
  // create the OpenGL-based cubeMap
  IntBuffer envMapTextureID = IntBuffer.allocate(1);
  pgl.genTextures(1, envMapTextureID);
  pgl.activeTexture(PGL.TEXTURE0 + unit); // Change texture unit
  pgl.enable(PGL.TEXTURE_CUBE_MAP);  
  pgl.bindTexture(PGL.TEXTURE_CUBE_MAP, envMapTextureID.get(0));
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_WRAP_S, PGL.CLAMP_TO_EDGE);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_WRAP_T, PGL.CLAMP_TO_EDGE);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_WRAP_R, PGL.CLAMP_TO_EDGE);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_MIN_FILTER, PGL.LINEAR);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_MAG_FILTER, PGL.LINEAR);

  //Load in textures
  PImage[] textures = { posX, negX, posY, negY, posZ, negZ };
  for (int i=0; i<textures.length; i++) {
    PImage texture = textures[i];
    int w = texture.width;
    int h = texture.height;
    texture.loadPixels();
    pgl.texImage2D(PGL.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, PGL.RGBA, w, h, 0, PGL.RGBA, PGL.UNSIGNED_BYTE, IntBuffer.wrap(texture.pixels));
  }

  endPGL();
}

vert.glsl

uniform mat4 transform;
uniform mat4 modelview;
uniform mat3 normalMatrix;
uniform mat4 texMatrix;

uniform vec3 camPosition;

varying vec3 reflectVector;
varying vec3 refractVector;
varying vec4 vertTexCoord;

attribute vec4 position;
attribute vec4 vertex;
attribute vec3 normal;
attribute vec2 texCoord;

void main(void) {
    gl_Position = transform * vertex;

    vec3 unitNormal = normalize(normal);

    vec3 viewVector = normalize(vertex.xyz - camPosition);

    reflectVector = reflect(viewVector, unitNormal);
    refractVector = refract(viewVector, unitNormal, 1.0/1.33);

    //2D Texture Coordinates
    vertTexCoord = texMatrix * vec4(texCoord, 1.0, 1.0);
}

frag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

//Cube texture
uniform samplerCube cubemap;

//2D texture
uniform sampler2D diffuseMap;

varying vec3 reflectVector;
varying vec3 refractVector;

//Texture Coordinates
varying vec4 vertTexCoord;

void main(void) {
    vec4 reflectColor = texture(cubemap, -reflectVector);
    vec4 refractColor = texture(cubemap, -refractVector);

    vec4 diffuse = texture2D(diffuseMap, vertTexCoord.st);

    //Switch Red and Blue Channel (ARGB != RGBA)
    reflectColor = vec4(reflectColor.b, reflectColor.g, reflectColor.r, reflectColor.a);
    refractColor = vec4(refractColor.b, refractColor.g, refractColor.r, refractColor.a);

    vec4 materialColor = mix(reflectColor, refractColor, 1.0);

    gl_FragColor = mix(diffuse, materialColor, 0.5);
}

Here I change the unit : pgl.activeTexture(PGL.TEXTURE0 + unit); // Change texture unit

thank you in advance !

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

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

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

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

import peasy.PeasyCam;

PeasyCam cam;

final float gravity = 1; //Inaccurate gravity simulation (impulse rather than force)

// ArrayLists for the class
//ArrayList<Box3D> boxes = new ArrayList(); 
//Box3D box;

// this is a very important size: size boxes
float sizeBox = 70.0;
float sizeLimit = 180;

float rotationX;
float rotationY;
float rotationZ;

float translatex=-sizeBox;
float translatey=-sizeBox;
float translatez=0;

float z = 1.0;

int objectNumber = 0;

// folded triangle 
PShape s; 

float offsetZ=400;

color colCurrent=color(0, 0, 255);

boolean showHelpText=true; 

void setup() {

  size(500, 500, P3D);
  background(0);
  sphereDetail(32);

  cam = new PeasyCam(this, 400); // new
  //box = new Box3D(0, 0, 0, 0, 0, color(255));

  s = createShape();
  s.beginShape();
  s.fill(255, 0, 0);
  s.stroke(177);
  s.vertex(100, 0, -100);
  s.vertex(-60, 0, 200);
  s.vertex(-50, 60, -30);
  s.vertex(110, 160, 40);
  s.scale(0.4);
  s.endShape(CLOSE);
}

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

  //for (Box3D b : boxes ) {
   // box.display();
  //}

  noFill();
  box(sizeLimit*2+sizeBox); // ?

  showObject();

  cam.beginHUD(); 
  /**if (showHelpText) {
    fill(255); // white 
    text ("Use PeasyCam. Use wasd and pl; r/g/b for colors, space bar to toggle object, RETURN to enter object to list.\n\n"
      +"Use x to switch this text on and off. \n"
      +"Use Mousewheel to zoom, double click to reset view. The box you move has a white outline. An item that has been added to the list is marked with a gray box.\n"
      +"On adding to the list the placing box moves two units left. \n"
      +"Current: "
      +translatex
      +", "
      +translatey
      +", "
      +translatez, 
      19, 19);
  }*/ //HUD disabled

  if (keyPressed)
    keyPressed_ForContinuusKeyinput();

  cam.endHUD();
}

// -----------------------------------------------------------

void showObject() {

  // show object 

  pushMatrix();

  translatey+=gravity;

  translatex=constrain(translatex,-sizeLimit,sizeLimit);
  translatey=constrain(translatey,-sizeLimit,sizeLimit);
  translatez=constrain(translatez,-sizeLimit,sizeLimit);

  fill(colCurrent); // color
  //translate(width/3, height/2, 0);
  translate(translatex, translatey, translatez);
  //rotateZ(rotationZ);
  //rotateY(rotationY);
  //rotateX(rotationX);

  stroke(255); 

  if (objectNumber==0) {
    //stroke(111);
    box(sizeBox);
  } else if (objectNumber==1) {
    s.setFill(colCurrent);
    shape(s, 0, 0);
  } else if (objectNumber==2) {
    //noStroke();
    sphere(sizeBox);
  }//else 

  popMatrix();
}

// -----------------------------------------------------------

void keyPressed_ForContinuusKeyinput() {
  // keyPressed for registering a key throughout  

  float speed = 3.9; 

  //speed += gravity; //More accurate gravity simulation, may be removed

  switch(key) {

  case 'a':
    translatex-=speed;
    break; 

  case 'd':
    translatex+=speed;
    break;

  case 'w':
  case ' ':
    translatey-=speed; //Conflicting keypress info: change object
    break;

  case SHIFT:
  case 's':
    translatey+=speed;
    break;

    // --

  case 'p':
    translatez-=speed;
    break; //Unnecessary in 2D version, but useful

  case 'l':
    translatez+=speed;
    break; //Unnecessary in 2D version, but useful

    // -----

    //
  }//switch
  //
}//func

// ----------------------------

void keyPressed() {

  // keyPressed for registering a single key only 

  switch(key) {
    /**
  case ' ':
    objectNumber++;
    if (objectNumber>2)
      objectNumber=0;
    key=0;
    break;
    */ //Object switch disabled in favor of jumping

 /**
  case RETURN:
  case ENTER:
    Box3D newBox = new Box3D (
      translatex, 
      translatey, 
      translatez, 
      rotationY, 
      objectNumber, 
      colCurrent
      ); 
    boxes.add(newBox); 
    translatex-=sizeBox*2;
    break;
    */ //New object function disabled

    // ---
    //colors

  case 'r':
    colCurrent=color(255, 0, 0);
    break;

  case 'b':
    colCurrent=color(0, 0, 255);
    break;

  case 'g':
    colCurrent=color(0, 255, 0);
    break;

    // --

  case 'x':
    showHelpText = !showHelpText; 
    break;
  }//switch
  //
} //func

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

class Box3D {

  float x=mouseX, y=410, z=mouseY;

  float offsetX=0; 
  float offsetZ2=0; 

  float rotateY=0;
  color colBox = color(255, 0, 0);

  // type
  final int boxTypeUndefined = -1;
  final int boxType0   = 0;
  final int boxType1   = 1; 
  final int boxType2   = 2; 
  // more needed !!!!! ???? 
  int type = boxTypeUndefined; 

  // constr - full
  Box3D(float x_, 
    float y_, 
    float z_, 
    float rotateY_, 
    int type_, 
    color col1_) {
    //

    x=x_;
    y=y_;
    z=z_;

    rotateY= rotateY_;
    type=type_;

    colBox=col1_;
  } // constr 2 

  void display() {
    pushMatrix();

    translate(x, y, z);
    //  rotateY(radians(rotateY)); 

    fill(colBox);
    noStroke(); 

    // depending on the current buttons tag 
    // 
    switch (type) {

    case boxTypeUndefined:
      // undefined 
      break; 

    case boxType0: 
      stroke(111);
      box(sizeBox);
      break; 

    case boxType1: 
      s.setFill(colBox);
      shape(s, 0, 0);
      break;

    case boxType2: 
      noStroke();
      sphere(sizeBox);
      break;

    default:
      // error 
      break;
    }//switch 

    if (showHelpText) {
      translate(sizeBox/2, -sizeBox/2, sizeBox/2);

      fill(111);
      stroke(0);
      box(sizeBox/6);
    }

    popMatrix();
  } // method 

  String toString() {
    return
      str(x) +","+ 
      str(y) +","+ 
      str(z) +","+ 
      str(rotateY) +","+ 
      str(type) +","+ 
      str(red(colBox)) +","+ 
      str(green(colBox)) +","+ 
      str(blue(colBox)) ;
  }
  //
} // class 
//

I understand there is a redundant class "Box3D", but I will handle that before implementing whatever solution you give me.

` PShape[][] shapes = new PShape[4][4];

var boxCount = 3;
var[] positions = new var [boxCount] ;

var boxSize = 50;
var draggingBox = false;
var boxBeingDragged = 0;
var dragOffset = createVector(0, 0); 

var logo;
var index = 0;
function setup() 
{
   logo = loadImage("thesis_logo.png");
  createCanvas(1920, 1080, P2D); 
  rectMode(CENTER);

  for (var j=0; j < boxCount; j++) {
    var x = random(100, 600);
    var y = random(400, 680);
    positions[j]=  createVector(x, y);
  }
  noStroke();
  fill(#5BC0EB);

  shapes[0][0] = createShape(RECT,1440,450,boxSize,boxSize);
  fill(#000000);
  shapes[0][1] = createShape(RECT,1440,510,boxSize,boxSize);
  shapes[0][2] = createShape(RECT,1440,570,boxSize,boxSize);
  shapes[0][3] = createShape(RECT,1440,630,boxSize,boxSize);

   fill(#5BC0EB);
  shapes[1][0] = createShape(RECT,1350,540,boxSize,boxSize);
  fill(#000000);
  shapes[1][1] = createShape(RECT,1410,540,boxSize,boxSize);
  shapes[1][2] = createShape(RECT,1470,540,boxSize,boxSize);
  shapes[1][3] = createShape(RECT,1530,540,boxSize,boxSize);


  fill(#5BC0EB);
  shapes[2][0] = createShape(RECT,1410,510,boxSize,boxSize);
  fill(#000000);
  shapes[2][1] = createShape(RECT,1470,510,boxSize,boxSize);
  shapes[2][2] = createShape(RECT,1410,570,boxSize,boxSize);
  shapes[2][3] = createShape(RECT,1470,570,boxSize,boxSize);

  fill(#5BC0EB);
   shapes[3][0] = createShape(RECT,1410,480,boxSize,boxSize);
   fill(#000000);
  shapes[3][1] = createShape(RECT,1470,480,boxSize,boxSize);
  shapes[3][2] = createShape(RECT,1410,540,boxSize,boxSize);
  shapes[3][3] = createShape(RECT,1410,600,boxSize,boxSize);
  patternChange();

}

function draw() 
{ 
  background(255);
  fill(#5BC0EB);
  noStroke();
  rect(480,540,50,50);
  for(var j =0; j < 4;j++){
    fill(0);
   shape(shapes[index][j],50,50,boxSize,boxSize);
  }


    stroke(0);
  strokeWeight(2);
  line(width/2,0,width/2,height);
   for (var j=0; j < boxCount; j++) {
    if (draggingBox && j == boxBeingDragged) {
      stroke(255);  // white
    } else {
      noStroke();
    }
    rect( positions[j].x, positions[j].y, boxSize, boxSize) ;
  }

  patternChange();

image(logo, 50, 50, width/8, height/8);

}

function mousePressed() {
  grabBox();
}

function mouseReleased() {
  draggingBox = false;
}

function mouseDragged() {
  if (draggingBox) {
    positions[boxBeingDragged].x = mouseX + dragOffset.x;
    positions[boxBeingDragged].y = mouseY + dragOffset.y;
  }
}
//
function grabBox() {
  for (var i=0; i < boxCount; i++) {
    // Test if the cursor is over the box
    var left = mouseX > positions[i].x - boxSize/2;
    var right = mouseX < positions[i].x + boxSize/2;
    var top = mouseY > positions[i].y - boxSize/2;
    var bottom = mouseY < positions[i].y + boxSize/2;
    if ( left  && right && top && bottom) {
      prvarln ("mouseover box: "+i);
      boxBeingDragged=i;
      draggingBox = true;
      dragOffset.x = positions[i].x - mouseX;
      dragOffset.y = positions[i].y - mouseY;
      break;
    } else {
      draggingBox = false;
    }
  }
}


function patternChange(){

 if (keyPressed) { //switch statement for changing grid createCanvas
    switch(key){
    case '1':
index = 0;
scramble();
    break;
    case '2':
index = 1;
scramble();
    break;
       case '3':
index = 2;
scramble();
    break;

           case '4':
index = 3;
scramble();
    break;
    }
    }
}

function scramble(){
 for (var j=0; j < boxCount; j++) {
    var x = random(100, 600);
    var y = random(400, 680);
    positions[j]=  createVector(x, y);
  }
}`

VM20:145 Uncaught TypeError: circle.bind is not a function at eval (eval at attach (processing.js:872), :145:17) at Processing.Sketch.attach (processing.js:873) at executeSketch (processing.js:21501) at new Processing.Processing (processing.js:21535) at callback (processing.js:950) at XMLHttpRequest.xhr.onreadystatechange (processing.js:929)

VM20:29 Uncaught ReferenceError: createShape is not defined at Processing.Processing.setup (eval at attach (processing.js:872), :29:9) at executeSketch (processing.js:21508) at new Processing.Processing (processing.js:21535) at callback (processing.js:950) at XMLHttpRequest.xhr.onreadystatechange (processing.js:929)

I had to download the JavaScriptMode from an online source so I am not sure if it will work, but it seems to handle simple sketches just fine. Is it having problems with 2D arrays? or something else I am unaware of.

The code for one of the sketches not working is below:

` PImage logo;

// Three possible shapes
PShape[] shapes = new PShape[4]; //Pshape array
int shapesize = 100; //shape sizes
int cols = 5;
int rows = 5;
int[][] shapeNumbers;

color[][] colors; //2D color array
color[] colorsb = 
{ 
#F71F02, //red
#13C081, //green
#5BC0EB, //blue
#FDE74C, //yellow
#133C55,
//#FF00FF, //pink
//#FF8000, //orange
};




void setup() {
  size(1920, 1080, P2D);
  ellipseMode(CENTER);
 rectMode(CENTER);
 logo = loadImage("thesis_logo.png");
  shapes[0] = createShape(ELLIPSE,shapesize,shapesize,shapesize,shapesize);
  //shapes[0].setFill(color(255,0,0));
  //shapes[0].setStroke(255);
  shapes[1] = createShape(RECT,shapesize,shapesize,shapesize,shapesize);
  //shapes[1].setFill(color(0));
  //shapes[1].setStroke(255);
  shapeMode(CENTER);
  shapes[2] = createShape();  
  shapes[2].beginShape();
 //shapes[2].fill(0); //fill squares
 // shapes[2].setStroke(255);
   shapes[2].vertex(-14+shapesize, -20+shapesize);
   shapes[2].vertex(-47+shapesize, -15+shapesize);
   shapes[2].vertex(-23+shapesize, 7+shapesize);
   shapes[2].vertex(-29+shapesize, 40+shapesize);
   shapes[2].vertex(0+shapesize, 25+shapesize);
    shapes[2].vertex(29+shapesize, 40+shapesize);
    shapes[2].vertex(23+shapesize, 7+shapesize);
    shapes[2].vertex(47+shapesize, -15+shapesize);
     shapes[2].vertex(14+shapesize, -20+shapesize);
  shapes[2].vertex(0+shapesize, -50+shapesize);
  shapes[2].endShape(CLOSE);

   shapes[3] = createShape(TRIANGLE,30, 75, 58, 20, 86, 75);  


shapeNumbers = new int[rows][cols];
 colors();
mix();
}




void draw() {
  background(255);
 shapes(150,150);
  image(logo, 50, 50, width/8, height/8);



 if (keyPressed) {
      if(key==ENTER){
       mix();
       colors();
      }
    }
}

void shapes(int posx, int posy){
 pushMatrix();
  translate(width/3,200);
 for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {

      int shapeIndex = shapeNumbers[i][j];
PShape currentShape = shapes[shapeIndex];
     currentShape.setFill(colors[i][j]);
     currentShape.setStroke(false);
    shape(currentShape,i*posx,j*posy,shapesize,shapesize);

    if (mousePressed ==true){
      int x = i*posx+width/3;
      int y = j*posy+200;
     if (mouseX > x && mouseX < (x + shapesize) && mouseY > y && mouseY < (y + shapesize)){
      colors[i][j]=color(255);
    }
    }
    }
  }
    popMatrix();
}

void mix(){
 for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {

    shapeNumbers[i][j] = int(random(shapes.length));

    }}
}

void colors(){
  colors = new color[cols][rows];
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      int rand = (int)random(colorsb.length); //choose a random value in array
      colors[i][j] = color(colorsb[rand]); //random color from array
    }
  }
}`

Is there a way to make this work ?

Thanks.

(Formatted code below)

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

PeasyCam cam;

void setup(){
  size(600,600, P3D);
  cam = new PeasyCam(this, 600);
}
void draw(){
  background(255);

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

  PShape cube = createShape();
  cube.beginShape();
  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.endShape(CLOSE);

  cube.setFill(color(100,200,0));
  stroke(100,200,0);
  shape(cube);
}

This is the code I have:

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

    PeasyCam cam;

    void setup()
    {
        size(600, 600, P3D);  
        lights();
        fill(100, 200, 0);
        cam = new PeasyCam(this, 600);
    }

    void draw()
    {
        background(255);

        pushMatrix();    
        rotateX(PI/4);
        drawCylinder( 30, 100, 300 );
        popMatrix();

    }

    void drawCylinder( int sides, float r, float h)
    {
        float angle = 360 / sides;
        float halfHeight = h / 2;

        // draw top of the tube
        beginShape();
        for (int i = 0; i < sides; i++) {
            float x = cos( radians( i * angle ) ) * r;
            float y = sin( radians( i * angle ) ) * r;
            vertex( x, y, -halfHeight);
        }
        endShape(CLOSE);

        // draw bottom of the tube
        beginShape();
        for (int i = 0; i < sides; i++) {
            float x = cos( radians( i * angle ) ) * r;
            float y = sin( radians( i * angle ) ) * r;
            vertex( x, y, halfHeight);
        }
        endShape(CLOSE);

        // draw sides
        beginShape(TRIANGLE_STRIP);
        for (int i = 0; i < sides + 1; i++) {
            float x = cos( radians( i * angle ) ) * r;
            float y = sin( radians( i * angle ) ) * r;
            vertex( x, y, halfHeight);
            vertex( x, y, -halfHeight);    
        }
        endShape(CLOSE);

    }

Demo here: https://youtu.be/RTZvgVu4LeU

I tried replacing the gear shapes with PShapes and when I do rotations or translations the memory used (used heap and heap size) keeps growing!

I used Visual VM to monitor and included a screen grab.

Why does memory grow when I rotate or translate PShapes? Is this a memory leak? Seems fine if I comment out the translations and rotations.

Sample code is something I was testing and a demo of growing heap:

// Author:      GLV
// Date:        2018-03-04
// Version:     04

PShape s2;
int time_start;
PVector v1;

void settings()
  {
  size(600, 600, P2D);
  }

void setup()
  { 
  s2 = createShape();
  s2.beginShape();
  fill(102);
  stroke(255);
  strokeWeight(0);
  s2.vertex(0, 0);
  s2.vertex(0, 20);
  s2.vertex(20, 20);
  s2.vertex(20, 0);
  s2.endShape(CLOSE); 
  time_start = millis();
  v1 = new PVector(0, 0);
  }

void draw()
  {
  background(0);  
  translate(width/2, height/2);
  float radius = 20*2*40/TAU;  // radius for equal spacing of teeth
  noFill();
  strokeWeight(3);
  ellipse(0, 0, 2*radius, 2*radius);
  v1.set(0, 20*2*40/TAU);       
  for (int i=0; i<=40; i++)
    { 
    fill(255, 255, 0);
    v1.rotate(TAU/40);     
    s2.translate(-10, -10);    //Comment this line
    s2.rotate(v1.heading());   //Comment this line
    shape(s2, v1.x, v1.y); 
    s2.rotate(-v1.heading());  //Comment this line
    s2.translate(10, 10);         //Comment this line
    }    

    if((millis()-time_start) >= 10000)
      {
//      System.gc();
//      Runtime.getRuntime().gc();  
      time_start = millis();
      println("Garbage Collection");
      } 
    }

void setup() {
  size (100, 100);
  canvas = createGraphics(width, height);
}

void draw() {

  canvas.beginDraw();
  canvas.fill(255);
  canvas.stroke(255, 0, 0);
  canvas.ellipse(50, 50, 25, 25);
  canvas.endDraw();
  image(canvas, 0, 0);
}

If I replace this with:

PGraphics canvas;
PShape circle;

void setup() {
  size (100, 100);
  canvas = createGraphics(width, height);
}

void draw() {

  canvas.beginDraw();
  circle.setFill(color(255));
  circle.setStroke(color(255, 0, 0));
  circle = createShape(ELLIPSE, 50, 50, 25, 25);
  canvas.endDraw();
  image(canvas, 0, 0);
}

I get worse performance, I was under the impression that it was more efficient to use Pshapes.

I need to change to PShapes because I suspect android openGL render has a hard time with stroke, I get 1.5 fps with OPENGL on android and 7fps with JAVA2D. Also I need the Pshapes to be different sizes and colors in an array.

int n; float[][] points; float lat, lon, r, t; PVector coord;

void setup() { size(640, 480, P3D); coord = new PVector();

n = 100; // number of points r = 200; // sphere's radius t = 0; // rotation accumulator

// populate globe w/ random GPS coordinates points = new float[n][2]; for (int i=0; i<points.length; i++) { points[i][0] = random(-90, 90); // latitude points[i][1] = random(-180, 180); // longitude } }

void draw() { background(0); translate(width/2, height/2); //this centers the sphere rotateY(12 * radians(t += (TWO_PI / 365))); //change this to change the speed of rotation

// earth fill(0,125,0); stroke(0,127,255); strokeWeight(1); sphere(r);

// points fill(255,0,0); stroke(255,0,0); strokeWeight(10);

for (int i=1; i<points.length; i++) { // wgs84 -> cartesian coordinate conversion lat = radians(points[i][0]); lon = radians(points[i][1]); coord.x = r * cos(lat) * cos(lon); coord.y = r * cos(lat) * sin(lon); coord.z = r * sin(lat); point(coord.x, coord.y, coord.z); } }

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 is the code:

boolean firstPoint;

void setup(){
  size(500,500,P2D);
  firstPoint = true;
}

//for some reason point will not work without draw
void draw(){

}

void keyPressed(){
  if(key == ENTER){
    endShape(CLOSE);
    firstPoint = true;
  }
}

void mousePressed(){
  if(firstPoint){
    beginShape();
    firstPoint = false;
  }
  vertex(mouseX,mouseY);
  point(mouseX,mouseY);
}

https://pastebin.com/XNrFMtyY

So my problem is when I use "vector_construct()" it throws the error "Cannot end GROUP shape"

I wasn't able to find anything on the internet about the error.

I modified the code such that it retrieves the number of moons and the appropriate image file from a .csv, and managed to get it working.

However, I have trouble embedding it to a html file. Below are the contents of the html and processing code. I also attached an image of the working directory.

Any pointers on what's going wrong is greatly appreciated. (I have a feeling it has something to do with the *@pjs preload command of the .pde ..., but not sure)

Many thanks in advance.

-----html code--------

<html>
<head>
<title> My first webpage</title>
<script src="Processing.js"></script>
</head>

<body>
Hello World!
<marquee> this is a test!</marquee>
<canvas data-processing-sources="solargenerator_sunrotate_ver6.pde planet.pde"></canvas>
</body>
</html>

-----sketch code solargenerator_sunrotate_ver6--------

import peasy.*;
Planet[] sun;


PeasyCam cam;

PImage sunTexture;
PImage[] textures = new PImage[3];
Table holidaytable;
int nrows;

void setup() {
  size(900, 700, P3D);

  Table holidaytable=loadTable("test.csv", "header");

  textures[0] = loadImage("earth.jpg");
  textures[1] = loadImage("cmb.jpg");
  textures[2] = loadImage("sky.jpg");

  cam = new PeasyCam(this, 1000);

  int nrows =holidaytable.getRowCount(); 

  sun = new Planet[nrows];


  for (int i = 0; i < nrows; i++) {
    TableRow row = holidaytable.getRow(i);

    int ID = row.getInt("no");
    int holiday = row.getInt("holidays");
    String picture = row.getString("image");

    sunTexture= loadImage(picture);

    sun[i]= new Planet(50, 450, 0, true, ID, sunTexture);
    sun[i].spawnMoons(holiday,1); 
  }  
}

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

  for (Planet sun2 : sun) {
    sun2.show();
    sun2.orbit();
  }
}

OS: windows 10 Processing version: 3.3.4

Do you know a way of working this out?

Here is my code:

import java.util.*;
import processing.pdf.*;

float angle = 0;
float t = 0;
float offset;
ArrayList <Ellipse> circles;
PFont f; 
boolean record;

int maxCircles = 100;
float spacing(int index, int maxCircles) {
  float halfMaxCircles = maxCircles / 2.0;
  return - (float)Math.pow((index - halfMaxCircles)/halfMaxCircles, 2) + 1.01;
}


void setup() {
  size(700, 700, P3D);
  textMode(SHAPE);
  background(255);
  frameRate(60);
  noFill();
  offset = random(0.004, 0.01);
  smooth();
  f = createFont("Industry Bold.ttf",80,true);
}


class Ellipse {
  float angle;

  Ellipse (float angle) {
    this.angle = angle;
  }

  void draw () {
    translate ((width/2), height/2);
    rotateX(this.angle);
    rotateY(this.angle * noise(offset + t));
    rotateZ(t * t);
    strokeWeight(1);
    stroke(64, 90, 107);
    ellipse (0,0,160,160);
  }
}


void draw() {
  if (record) {
    beginRaw(PDF, "output-####.pdf");
  } 

  background(255);

  circles = new ArrayList <Ellipse> ();
  for (int i=0; i<maxCircles; i++){
    circles.add(0, new Ellipse(angle + 1.3*(spacing(i, maxCircles))));
  }

  for (Ellipse e: circles) {
    pushMatrix();
    e.draw();
    popMatrix();
  }

  fill(44, 181, 245);
  textFont(f, 80);
  textAlign(CENTER);
  text("U", (width/2), (height/2)+35);
  noFill();

  //saveFrame("shots/shot-####.png"); 
  if (record) {
    endRaw();
    record = false;
  }

  angle += 0.03;
  t += 0.002;
}


void keyPressed() {
  if (key == 'r') {
    record = true;
  }
}

I have this little code from the forum and I thought it would be faster to add all boxes to a group PShape instead of storing all boxes in an ArrayList.

It works up to 2 but when I go to recursion depth of 3 it totally slows everything down.

What do I do wrong?

Do I have to use endShape?

Thanks !

Best, Chrisir ;-)

import peasy.*;

PeasyCam cam; 
PShape shape1;

// ------------------------------------------------

void setup() {
  size(1200, 1000, P3D);
  cam = new PeasyCam(this, 0, 0, 0, 500);
  println("working");
  shape1 = createShape(GROUP); 

  generate(0, 0, 0, 
    2, 
    167);

  println("done ");
}

void draw() {
  background(0); 
  avoidClipping();
  lights();
  shape(shape1, 0, 0);
}

// ------------------------------------------------------

void generate(float x2, float y2, float z2, 
  int depth, 
  float r) {

  PVector pos=new PVector(x2, y2, z2); 
  int sum ;

  for (int x = -1; x < 2; x++) {
    for (int y = -1; y < 2; y++) {
      for (int z = -1; z < 2; z++) {

        sum = abs(x) + abs(y) + abs(z);

        float newR = r/3;

        if (sum > 1) {
          if (depth==0) { 
            // end of recursion
            Box b = new Box(pos.x + x*newR, 
              pos.y + y*newR, 
              pos.z + z*newR, 
              newR, 
              1); // 1 or k 

            shape1.addChild(b.getShape());
          } else
          {
            //recursion
            generate(pos.x + x*newR, 
              pos.y + y*newR, 
              pos.z + z*newR, 
              depth-1, 
              newR);
          }
        }
      }
    }
  }
  // return boxes;
}//func

void avoidClipping() {
  // avoid clipping (at camera): 
  // https : // 
  // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
  perspective(PI/3.0, (float) width/height, 1, 1000000);
}//func 


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

class Box {

  PVector pos;
  float r;
  //  int index; 

  Box(float x, float y, float z, 
    float r_, 
    int index_) {

    pos = new PVector(x, y, z);
    r = r_;
  }

  PShape getShape() {

    PShape s = createShape(BOX, r);

    s.setFill(color(255));
    s.setStroke(color(111));
    s.translate(pos.x, pos.y, pos.z); 

    //  s.endShape();

    return s;
  }
  //
}//class 
//

why does that happen?

PShape fish1, body1, tail1, eye1, fish2, body2, tail2, eye2, fish3, body3, tail3, eye3, fish4, body4, tail4, eye4;
int xPos1 = 800;
int xPos2 = 800;
int xPos3 = 800;
int xPos4 = 800;

float per1 = sin(radians(10 * frameCount)); 
float per2 = sin(radians(20 * frameCount)); 
float per3 = sin(radians(30 * frameCount)); 
float per4 = sin(radians(frameCount));
float r = random(0, 600);
float yPos1 = random(0, 400);
float yPos2 = random(0, 400);
float yPos3 = random(0, 400);
float yPos4 = random(0, 400);

boolean qPressed = false;
boolean wPressed = false;
boolean ePressed = false;
boolean rPressed = false;

void setup() {
  size(800, 700);
  background(80, 208, 232);
  smooth();
  noStroke();

  //Creating the fish as a group of shapes parented together
  //fish 1
  fish1 = createShape(GROUP);
  tail1 = createShape (TRIANGLE, 22, 0, 60, -15 + per2, 60, 15 + per2); 
  tail1.setFill(color(252, 193, 97));
  body1 = createShape (ELLIPSE, 0, 0, 70, 50);
  body1.setFill(color(252, 193, 97));
  eye1 = createShape (ELLIPSE, -15, -5, 10, 10);
  eye1.setFill(color(0));

  fish1.addChild(tail1);
  fish1.addChild(body1);
  fish1.addChild(eye1);

  //fish 2    
  fish2 = createShape(GROUP);
  tail2 = createShape (TRIANGLE, 50, 0, 65, -30 + per2, 65, 30 + per2);
  tail2.setFill(color(160, 159, 158));
  body2 = createShape (ELLIPSE, 0, 0, 100, 35);
  body2.setFill(color(160, 159, 158));
  eye2 = createShape(ELLIPSE, -30, -5, 10, 10);
  eye2.setFill(color(0));

  fish2.addChild(tail2);
  fish2.addChild(body2);
  fish2.addChild(eye2);

  //fish 3
  fish3 = createShape(GROUP);
  tail3 = createShape (TRIANGLE, 20, 0, 50, -20 + per3, 50, 20 + per3);
  tail3.setFill(color(227, 156, 214));
  body3 = createShape (ELLIPSE, 0, 0, 60, 80);
  body3.setFill(color(227, 156, 214));
  eye3 = createShape (ELLIPSE, -20, -5, 10, 10);
  eye3.setFill(color(0));

  fish3.addChild(tail3);
  fish3.addChild(body3);
  fish3.addChild(eye3);

  //fish 4
  fish4 = createShape(GROUP);
  tail4 = createShape (TRIANGLE, 15, 0, 25, -10 + per3, 25,10 + per3);
  tail4.setFill(color(195, 247, 234));
  body4 = createShape (ELLIPSE, 0, 0, 40, 20);
  body4.setFill(color(195, 247, 234));
  eye4 = createShape (ELLIPSE, -10, 0, 5, 5);
  eye4.setFill(color(0));

  fish4.addChild(tail4);
  fish4.addChild(body4);
  fish4.addChild(eye4);

}

void draw() {

  //draw a looping fish swimming horizontally across the screen in random y coordinate each time it reaches the end.
  background(80, 208, 232);

  //fish 1 loop
  shape(fish1, xPos1, yPos1);
  xPos1 = xPos1-3;

  if (xPos1<-200) {
    xPos1 = 800;
    yPos1 = random(0, 400); 
  } 

  //fish 2 loop
  shape(fish2, xPos2, yPos2);
  xPos2 = xPos2-4;

  if (xPos2<-200) {
    xPos2 = 800;
    yPos2 = random(0, 400);
  }

  //fish 3 loop
  shape(fish3, xPos3, yPos3);
  xPos3 = xPos3-2;

  if (xPos3<-200) {
    xPos3 = 800;
    yPos2 = random(0, 400);
  }

  //fish 4 loop
  shape(fish4, xPos4, yPos4);
  xPos4 = xPos4 - 5;

  if (xPos4<-200) {
    xPos4 = 800;
    yPos4 = random(0, 400);
  }

  //Boxes that have the bait in them
  noFill();
  // Q
  if(qPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(250, 620, 75, 75);

  // W
  if(wPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(330, 620, 75, 75);

  // E
  if(ePressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(410, 620, 75, 75);

  // R
  if(rPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
   strokeWeight(1);
  }
  rect(490, 620, 75, 75);

  }

void keyPressed() {

  //When 'q' or 'Q' key is pressed, the first box will turn red. When another key is pressed it will go back to black.
  if (key == 'q' || key == 'Q') {
    qPressed = true;
    wPressed = false;
    ePressed = false;
    rPressed = false;
  } 

  //When 'w' or 'W' key is pressed, the second box will turn red. When another key is pressed it will go back to black.
  else if (key == 'w' || key == 'W') {
    qPressed = false;
    wPressed = true;
    ePressed = false;
    rPressed = false;
  }

  //When 'e' or 'E' key is pressed, the third box will turn red. When another key is pressed it will go back to black.
  else if (key == 'e' || key == 'E') {
    qPressed = false;
    wPressed = false;
    ePressed = true;
    rPressed = false;
  } 

  //When 'r' or 'R' key is pressed, the fourth box will turn red. When another key is pressed it will go back to black.
  else if (key == 'r' || key == 'R') {
    qPressed = false;
    wPressed = false;
    ePressed = false;
    rPressed = true;
  }  
}

void mousePressed(){
  //When q is pressed (first box selected) and mouse is pressed on fish 1, that fish goes back to the beginning
 if (qPressed == true && dist(xPos1, yPos1, mouseX, mouseY) < 40){
  shape(fish1, xPos1, yPos1);
  xPos1 = 1000;
 }
 else if (qPressed == false && dist(xPos1, yPos1, mouseX, mouseY) < 40){
 shape(fish1, xPos1, yPos1);

 }

if (wPressed == true && dist(xPos2, yPos2, mouseX, mouseY) < 30){
  shape(fish2, xPos2, yPos2);
  xPos2 = 1200;
 }
 else if (wPressed == false && dist(xPos2, yPos2, mouseX, mouseY) < 30){
 shape(fish2, xPos2, yPos2);
 }

 if (ePressed == true && dist(xPos3, yPos3, mouseX, mouseY) < 40){
  shape(fish3, xPos3, yPos3);
  xPos3 = 1000;
 }
 else if (ePressed == false && dist(xPos3, yPos3, mouseX, mouseY) < 40){
 shape(fish3, xPos3, yPos3);
 }

if (rPressed == true && dist(xPos4, yPos4, mouseX, mouseY) < 20){
  shape(fish4, xPos4, yPos4);
  xPos4 = 1300;
 }
 else if (qPressed == false && dist(xPos4, yPos4, mouseX, mouseY) < 20){
 shape(fish4, xPos4, yPos4);
 }

}

What I'm stuck on is how to make mousePressed() only work on a particular moving fish (as well as when a certain key is pressed). At the moment I've only gotten it to work when I press anywhere on the screen. I've tried adding mouseX == xPos1 etc to the if statement In the void mousePressed() section. But it doesn't seem to work, and I'm really not sure where to go from there. Any help would be greatly appreciated.

PShape fish1, body1, tail1, eye1, fish2, body2, tail2, eye2, fish3, body3, tail3, eye3, fish4, body4, tail4, eye4;
int xPos1 = 800;
int xPos2 = 800;
int xPos3 = 800;
int xPos4 = 800;
float per1 = sin(radians(10 * frameCount)); 
float per2 = sin(radians(20 * frameCount)); 
float per3 = sin(radians(30 * frameCount)); 
float per4 = sin(radians(frameCount));
float r = random(0, 600);
float yPos1 = random(0, 400);
float yPos2 = random(0, 400);
float yPos3 = random(0, 400);
float yPos4 = random(0, 400);

boolean qPressed = false;
boolean wPressed = false;
boolean ePressed = false;
boolean rPressed = false;

void setup() {
  size(800, 700);
  background(80, 208, 232);
  smooth();
  noStroke();

  //Creating the fish as a group of shapes parented together
  //fish 1
  fish1 = createShape(GROUP);
  tail1 = createShape (TRIANGLE, 120, 70, 165, 50 + per2, 165, 100 + per2); 
  tail1.setFill(color(252, 193, 97));
  body1 = createShape (ELLIPSE, 100, 70, 70, 50);
  body1.setFill(color(252, 193, 97));
  eye1 = createShape (ELLIPSE, 80, 60, 10, 10);
  eye1.setFill(color(0));

  fish1.addChild(body1);
  fish1.addChild(tail1);
  fish1.addChild(eye1);

  //fish 2    
  fish2 = createShape(GROUP);
  tail2 = createShape (TRIANGLE, 150, 70, 165, 40 + per2, 165, 100 + per2);
  tail2.setFill(color(160, 159, 158));
  body2 = createShape (ELLIPSE, 100, 70, 100, 35);
  body2.setFill(color(160, 159, 158));
  eye2 = createShape(ELLIPSE, 70, 65, 10, 10);
  eye2.setFill(color(0));

  fish2.addChild(body2);
  fish2.addChild(tail2);
  fish2.addChild(eye2);

  //fish 3
  fish3 = createShape(GROUP);
  tail3 = createShape (TRIANGLE, 120, 70, 150, 55 + per3, 150, 85 + per3);
  tail3.setFill(color(227, 156, 214));
  body3 = createShape (ELLIPSE, 100, 70, 60, 80);
  body3.setFill(color(227, 156, 214));
  eye3 = createShape (ELLIPSE, 80, 65, 10, 10);
  eye3.setFill(color(0));

  fish3.addChild(body3);
  fish3.addChild(tail3);
  fish3.addChild(eye3);

  //fish 4
  fish4 = createShape(GROUP);
  tail4 = createShape (TRIANGLE, 115, 70, 130, 75+ per3, 130, 65 + per3);
  tail4.setFill(color(195, 247, 234));
  body4 = createShape (ELLIPSE, 100, 70, 40, 20);
  body4.setFill(color(195, 247, 234));
  eye4 = createShape (ELLIPSE, 87, 70, 5, 5);
  eye4.setFill(color(0));

  fish4.addChild(body4);
  fish4.addChild(tail4);
  fish4.addChild(eye4);
}

void draw() {

  //draw a looping fish swimming horizontally across the screen in random y coordinate each time it reaches the end.
  background(80, 208, 232);

  //fish 1 loop
  shape(fish1, xPos1, yPos1);
  xPos1 = xPos1-3;

  if (xPos1<-200) {
    xPos1 = 800;
    yPos1 = random(0, 400);
  } 

  //fish 2 loop
  shape(fish2, xPos2, yPos2);
  xPos2 = xPos2-4;

  if (xPos2<-200) {
    xPos2 = 800;
    yPos2 = random(0, 400);
  }

  //fish 3 loop
  shape(fish3, xPos3, yPos3);
  xPos3 = xPos3-2;

  if (xPos3<-200) {
    xPos3 = 800;
    yPos2 = random(0, 400);
  }

  //fish 4 loop
  shape(fish4, xPos4, yPos4);
  xPos4 = xPos4 - 5;

  if (xPos4<-200) {
    xPos4 = 800;
    yPos4 = random(0, 400);
  }

  //Boxes that have the bait in them
  noFill();
  // Q
  if(qPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(250, 620, 75, 75);

  // W
  if(wPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(330, 620, 75, 75);

  // E
  if(ePressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(410, 620, 75, 75);

  // R
  if(rPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
   strokeWeight(1);
  }
  rect(490, 620, 75, 75);

}

void keyPressed() {

  //When 'q' or 'Q' key is pressed, the first box will turn red. When another key is pressed it will go back to black.
  if (key == 'q' || key == 'Q') {
    qPressed = true;
    wPressed = false;
    ePressed = false;
    rPressed = false;
  } 

  //When 'w' or 'W' key is pressed, the second box will turn red. When another key is pressed it will go back to black.
  else if (key == 'w' || key == 'W') {
    qPressed = false;
    wPressed = true;
    ePressed = false;
    rPressed = false;
  }

  //When 'e' or 'E' key is pressed, the third box will turn red. When another key is pressed it will go back to black.
  else if (key == 'e' || key == 'E') {
    qPressed = false;
    wPressed = false;
    ePressed = true;
    rPressed = false;
  } 

  //When 'r' or 'R' key is pressed, the fourth box will turn red. When another key is pressed it will go back to black.
  else if (key == 'r' || key == 'R') {
    qPressed = false;
    wPressed = false;
    ePressed = false;
    rPressed = true;
  }  
}

void mousePressed(){
  //When q is pressed (first box selected) and mouse is pressed on fish 1, that fish goes back to the beginning
  //This is the part I'm stuck on  
 if (qPressed == true){
  shape(fish1, xPos1, yPos1);
  xPos1 = 1000;
 }
 else if (qPressed == false){
 shape(fish1, xPos1, yPos1);
 }

}

So at the moment I've got it so for the first fish, it only moves when you pressed 'q' or 'Q' , then click anywhere.

//forked from Bárbara Almeida
int tile = 15;
int[][] m; //two dimensional array
color c0, c1, c2;
PShape ellipseShape;   

void setup()
{
  size(570, 570);
  noStroke();
  smooth(8);
  //background(50); 
  ellipseShape = createShape(ELLIPSE,285,285,550,550);
  newColor();
  newPattern();
}

void draw()
{
  //frameRate(240);
  //shape(ellipseShape);  
  drawPattern();
  saveFrame();
}

void newColor()  //choose a random color
{
  //c0 = color(#77540f);
 // c1 = color(#f3fc5d);
  c0 = color(random(255), random(255), random(255));
  c1 = color(random(255), random(255), random(255));
  c2 = color(random(255), random(255), random(255));
}

void newPattern()  //create a matrix for the Truchet tiling
{
  m = new int[width/tile][height/tile];  //create 2D matrix
  for (int x = 0; x < width; x += tile)
  {
    for (int y = 0; y < height; y += tile)
    {
      m[x/tile][y/tile] = int(random(15));
    }
  }
}

void drawPattern()
{
  //squares
  for (int x = 0; x < width; x += tile)
  {
    for (int y = 0; y < height; y += tile)
    {
      if (m[x/tile][y/tile] == 0) 
      {
       fill(c0);
      }
      else ellipseShape.fill(c1);
      rect(x, y, tile, tile);
    }
  }

  //circles
  for (int x = 0; x < width + 5; x += tile)
  {
    for (int y = 0; y < height + 5; y += tile)
    {    
      int s = 0;
      if ((x+y)%2 == 0) // if remainder of x+y/2 = 0
      {
        fill(c0);
        //s = -1;
      }
      else
      {
        fill(c1);
        s = 1;
      }
      float d = map(noise(x/320.0, y/320.0, frameCount/100.0), 0.33, 0.66, -tile/2, tile/2);
      // map (noise x,y,z = to be converted), lower bound of range, upper bound of range, 
      // lower bound of target, upper bound of target
      ellipse(x, y, tile + s*d, tile + s*d);
    }
  }
}

The box on the left is drawn directly to the screen, the box on the right is drawn using a defined PShape. This is the code:

PShape s;

void setup()
{
  frameRate(50);
  size(500,300);

  s = createShape();

  s.beginShape();
  s.fill(255,0,0);
  s.vertex(100,100);
  s.vertex(200,100);
  s.vertex(200,200);
  s.vertex(100,200);
  s.beginContour();
  s.vertex(125,125);
  s.vertex(125,175);
  s.vertex(175,175);
  s.vertex(175,125);
  s.endContour();
  s.endShape(CLOSE);
}

void draw()
{
  beginShape();
  fill(255,0,0);
  vertex(100,100);
  vertex(200,100);
  vertex(200,200);
  vertex(100,200);
  beginContour();
  vertex(125,125);
  vertex(125,175);
  vertex(175,175);
  vertex(175,125);
  endContour();
  endShape(CLOSE);

  shape(s, 200, 0);
}

As you can see, I'm defining both boxes in exactly the same way, yet the PShape seems to ignore my call to beginContour()/endContour(). Is this happening to anyone else? Am I doing something wrong?

Edit: In fact, even when I copy the code from https://processing.org/reference/PShape_beginContour_.html, it gets screwed up in the same way.

Using a PGraphic this draws a straight line 200px long.

for(int i = 0; i<200;i++)
{
    pg.line(0,0,0,-1);
    pg.translate(0,-1);
}

I want to do the same thing but with a PShape and also using pushMatrix and popMatrix later on. I have tried this and it doesn't seem to work.

for(int i = 0; i<200;i++)
{
    s.vertex(0,-1);
    s.translate(0,-1);
}

Shouldn't this allow me to create a vertex at 0,-1, translate to 0,-1 and create another vertex at 0,-1 which is really just 0,-2 if I had not translated... so on.

I then draw it to a PGraphic and display it but it is always blank. What am I missing? Here is a full version of the code I am using to test this.

PShape s; 
PGraphics img;
void setup() {
  size(500, 500);
  img = createGraphics(100,100);
  s = createShape();
  s.beginShape();
  for(int i = 0; i<200;i++)
  {
    s.vertex(0,1);
    s.translate(0,-1);
  }
  s.endShape();

  img.beginDraw();
  img.shape(s);
  img.endDraw();
}

void draw() {
  image(img,250,250);
}

The reason I want to do this is beacuse I am drawing generated shapes that I don't know the size and shape of until they are drawn. I want to use a PShape because it is vector based so I can scale and move it as much as I want.

PShape grp, head, head2;

void setup() {
  size(200, 200);
  grp = createShape(GROUP);

  noStroke();

  head = createShape(ELLIPSE, 70, 70, 100, 100);
  head.setFill(color(255, 255, 255, 150));

  head2 = createShape(ELLIPSE, 120, 120, 100, 100);
  head2.setFill(color(255, 255, 255, 150));

  grp.addChild(head2);
  grp.addChild(head);
}

void draw() {
  background(150);
  shape(grp);
}

The result is:

However, what I want is like this:

Researched a bit but had no luck, is there any way to do this? Either Processing or p5.js solution is welcome, I'll be grateful. Thanks.

    PShape my_sphere;
    ArrayList<PVector> vertices = new ArrayList<PVector>();

    void setup(){
      size(800, 600, P3D);
      frameRate(60);
      smooth();
      sphereDetail(10);
      fill(255,0,0);
      my_sphere = createShape(SPHERE, 100);
    }

    void draw_sphere(){
      pushMatrix();
      translate(width/2, height/2);
      rotateZ(millis() * 0.0001 * TWO_PI);
      //rotateY(millis() * 0.0001 * TWO_PI);
      shape(my_sphere);
      my_sphere.setVisible(false);
      popMatrix();
    }

    void draw_points(){
      getVertices(my_sphere, vertices);
      for(int i=0; i < vertices.size(); i++){
        PVector vertex = vertices.get(i);
        float x = vertex.x;
        float y = vertex.y;
        float z = vertex.z;

        float s_x = screenX(x, y, z);
        float s_y = screenY(x, y, z);

        point(s_x+(width/2), s_y+(height/2));
      }
    }

    void draw(){
      background(255,255,255);
      draw_sphere();
      draw_points();
      vertices.clear();
    }

    void getVertices(PShape shape, ArrayList<PVector> vertices){
      for(int i = 0 ; i < shape.getVertexCount(); i++){
        PVector vertex = shape.getVertex(i);
        vertices.add(vertex);
      }
    }

The issue I'm seeing is that as the sphere rotates (which I've hidden) the points aren't updating to match. Why? I've tried lots of things and can't seem to figure it out. Help would be appreciated.