import controlP5.*;

PShape bot, bot1, bot2;
PShape bot3, bot4, bot5;
PShape bot6, bot7, bot8;
PShape bot9, bot10, bot11;
PShape bot12, bot13, bot14;
PShape bot15, bot16;
ControlP5 cp5;
int c, c1, c2, c3, c4, c5;
float r, sc;
int i, x, y;

void setup() {
  size(900, 650,P3D);
  //size(900,650);
  smooth();
  //shapeMode(CENTER);
  bot=loadShape("cabezaverde.svg"); 
  bot1=loadShape("ojosblancos.svg"); 
  bot2=loadShape("ojosnegros.svg");
  bot3=loadShape("bocablanco.svg");
  bot4=loadShape("cuerpoblanco.svg");
  bot5=loadShape("cuerpoverde.svg");
  bot6=loadShape("espinasrojas.svg");
  bot7=loadShape("lineacaparazon.svg");
  bot8=loadShape("caparazonrojo.svg");
  bot9=loadShape("pieder.svg");
  bot10=loadShape("suelader.svg");
  bot11=loadShape("piernaizq.svg");
  bot12=loadShape("pieizq.svg");
  bot13=loadShape("suelaizq.svg");
  bot14=loadShape("brazoizq.svg");
  bot15=loadShape("brazoder.svg");
  cp5 = new ControlP5(this);

}

void draw() {
  background(173,216,230);
//  line(width/2, 0, width/2, height);
//  line(0, height/2, width, height/2);
  bot.disableStyle(); 
  bot1.disableStyle();
  bot2.disableStyle(); 
  bot3.disableStyle();
  bot4.disableStyle(); 
  bot5.disableStyle();
  bot6.disableStyle(); 
  bot7.disableStyle();
  bot8.disableStyle(); 
  bot9.disableStyle();
  bot10.disableStyle(); 
  bot11.disableStyle();
  bot12.disableStyle(); 
  bot13.disableStyle();
  bot14.disableStyle(); 
  bot15.disableStyle();
  stroke(0, 0, 0);
  strokeWeight(3);

  float dirY = (mouseY / float(height) - 0.5) * 2;
  float dirX = (mouseX / float(width) - 0.5) * 2;
  directionalLight(204, 204, 204, -dirX, -dirY, -1); 
//  if (!mousePressed) {
//    lights();
//  }

  fill(c2);
  shape(bot, 407, 160, 100, 100);//cabeza-green
  fill(c4);
  shape(bot1, 435, 168, 45, 45);//ojos-white
  fill(c1);
  shape(bot2, 442, 171, 20, 20);//ojos-black
  fill(c4);
  shape(bot4, 456, 260, 92, 94);//cuerpo-white
  fill(c2);
  shape(bot5, 470, 257, 80, 80);//cuerpo-green
  fill(c3);
  shape(bot6, 472, 197+70-25-3, 30, 45);//espinas-red
  fill(c4);
  //shape(bot3, 20, -142, 100, 100);//boca-white
  shape(bot3, 495, 208, 63, 62);
  shape(bot7, 467+200, 214+300, 100, 100);//caparazon-white
  fill(c3);
  shape(bot8, 470+200, 212+300, 100, 100);//caparazon-red
  shape(bot9, 427+200, 236+300, 100, 100);//pieder-red
  fill(c5);
  shape(bot10, 427+200, 249+300, 100, 100);//suelader-golden
  fill(c2);
  shape(bot11, 457+200, 228+300, 100, 100);//piernaizq-green
  fill(c3);
  shape(bot12, 442+200, 240+300, 100, 100);//pieizq-red
  fill(c5);
  shape(bot13, 444+200, 254+300, 100, 100);//suelaizq-golden
  fill(c2);
  shape(bot14, 444+200, 211+300, 100, 100);//brazoizq-green
  shape(bot15, 428+200, 220+300, 100, 100);//brazoder-green
  //noLoop();
}

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

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

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

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

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

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

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

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

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

def draw():
    global zangle

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

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

    noStroke()
    mesh = createShape()

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

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

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

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

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

The top loops are drawing the whole shape and the enhanced loops are drawing the shape sections. The reason for separating them into individual loops was that having them in one loop meant that things were not drawing when the tweet came in and instead everything was drawn simultaneously.

If there is a way to improve this, i'm all ears.

I haven't included the entire program due to size and that this is the only part i'm looking to optimize.

Thankyou.

    if (state == S_PLAY) { 
    shapeMode(CORNER);
    noStroke();
    fill(shapeColor);
    for (int i = 0; i < numLollipops; i++) {
      lollipopFull.disableStyle();
      shape(lollipopFull, i*SIZE, SIZE, SIZE, SIZE);
      numLollipops = check(i*SIZE, numLollipops);
    }
    for (int i = 0; i < numCircles; i++) {
      circleFull.disableStyle();
      shape(circleFull, (width-SIZE)-i*SIZE, SIZE*3, SIZE, SIZE);
      numCircles = check(i*SIZE, numCircles);
    }
    for (int i = 0; i < numLines; i++) {
      lineFull.disableStyle();
      shape(lineFull, i*SIZE, SIZE*5, SIZE, SIZE);
      numLines = check(i*SIZE, numLines);
    }
    for (int i = 0; i < numSeptagons; i++) {
      septagonFull.disableStyle();
      shape(septagonFull, (width-SIZE)-i*SIZE, SIZE*7, SIZE, SIZE);
      numSeptagons = check(i*SIZE, numSeptagons);
    }
    for (int i = 0; i < numSq; i++) {
      squareFull.disableStyle();
      shape(squareFull, i*SIZE, SIZE*9, SIZE, SIZE);
      numSq = check(i*SIZE, numSq);
    }
    for (int i = 0; i < numTriStars; i++) {
      starFull.disableStyle();
      shape(starFull, (width-SIZE)-i*SIZE, SIZE*11, SIZE, SIZE);
      numTriStars = check(i*SIZE, numTriStars);
    }
    for (int i = 0; i < numSeptagrams; i++) {
      septagramFull.disableStyle();
      shape(septagramFull, i*SIZE, SIZE*13, SIZE, SIZE);
      numSeptagrams = check(i*SIZE, numSeptagrams);
    }
    shapeMode(CENTER);
    for (Lollipop l : lollipops) l. draw();
    for (Septagon s : septagons) s. draw();
    for (Line li : lines) li.draw();
    for (Circle c : circles) c. draw();
    for (Square sq : squares) sq.draw();
    for (TriStar t : triStars) t. draw();
    for (Septagram sg : septagrams) sg.draw();
    words.clear();

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 head, body,leftleg, rightleg;

//head,body,arm1,arm2,leg1,leg2;
void setup() 
{
  size (400,300,P3D);
 // frame.setLocation(0,0);


 //parent shape
 // satori = createShape

 // PShape satori_head;
  head = createShape(SPHERE,20);
  head.setStroke(color(255));
  head.setStrokeWeight(4);
  head.setFill(color(126));

  //now unto the body
  body= createShape(LINE,0, 0,0,0,25,0);
  body.setStroke(color(255,0,0));
  body.setStrokeWeight(4);
  body.setFill(color(126));

  //drawing the left leg
  leftleg=createShape(LINE, 5,25,5,0,0,0);
  leftleg.setStroke(color(189,0,0));
  leftleg.setStrokeWeight(4);
  leftleg.setFill(color(126));

    //drawing the right leg
  //rightleg=createShape(LINE, 0,80,70,80,0,100);
  //rightleg.setStroke(color(200,0,0));
  //rightleg.setStrokeWeight(4);
  //rightleg.setFill(color(126));

}

void draw() {
  background(51);

//head translation
  translate(width/2, 50);
  shape(head);


//body translation
translate(-0,53,100);
shape(body);

//leftleg translation
translate(-0,53,100);
shape(body);

//rightleg translation
translate(-0,53,100);
shape(body);

}

like how does line in 3d works? How can i connect the line to the body to create legs and arms. Thank You ?

Thxs, Kf

PShape boxShape;
PGraphics pg;


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

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


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

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


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

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

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

I have a very simple sketch that load a 3d .obj object as a Pshape, rotates and translates it to the correct position and then renders it. This works perfectly on a windows processing 3.2.1 install (64bit), but unfortunately on my RPi the object renders flat regardless of any light specification (lights() ambienLight(), spotLight() etc).

I don't have the full sketch here at the moment, but it looks something like:

Pshape model;

void setup() {
    fullScreen(P3D);
    model = loadShape(filename);
    model.rotateX(radians(180));
    model.translate(100,-100,120);
    model.fillShape(255,255,255);
}

void draw() {
    lights();
    smooth();
    shape(model, 0, 0);
}

Is this a known issue or do I need to submit a bug report?

I've checked my original SVGs (created in Adobe Animate CC and exported frame by frame), I played with shapeMode(), I tried to translate with path coordinates from the viewBox (it didn't change anything), and I've spent way too much time searching online. Here is the code:

ArrayList<Button> buttons;

//creating grid to clarify location
int nbOfHorizontalLines = 20;
int nbOfVerticalLines = 30;

void setup() {
  size(1500, 1000);
  buttons = new ArrayList<Button>();

  // button constructor: x, y, width, height, text
  buttons.add(new Button (100, 100, 100, 100, "100,100 (top left corner of button should be drawn here)"));

}

void draw() {
  background(200);
  frameRate(20);

  //grid to clarify location
  float distanceBetweenHorizontalLines = (float)height/nbOfHorizontalLines;
  float distanceBetweenVerticalLines = (float)width/nbOfVerticalLines;

  for(int i = 0; i < nbOfHorizontalLines; i++)
  {
    stroke(#56A9FA);
    line(0, i *distanceBetweenHorizontalLines, width, i*distanceBetweenHorizontalLines);  
  }

  for(int i = 0; i < nbOfVerticalLines; i++)
  {
    stroke(#56A9FA);
    line(i*distanceBetweenVerticalLines, 0, i*distanceBetweenVerticalLines, height);
  }

  // draw buttons
  for (Button b : buttons) {
    b.drawButton();

  }
  textSize(15);
  text("~210,140", 210, 128);
}

And the Class for the Button:

class Button {

  float x, y;
  //width and height
  float w, h;
  //cycles through the animation files 
  ArrayList<PShape> restFrames;
  ArrayList<PShape> currentFrames;
  //var to load current frame
  PShape frame;
  int frameIndex;
  //assign text string from parameter to t
  String t;


  public Button(float newX, float newY, float newWidth, float newHeight, String newText) {

    x = newX;
    y = newY; 
    w = newWidth ;
    h = newHeight;
    frameIndex = 0;
    t = newText;
    restFrames = new ArrayList<PShape>();

    //animate basic unclicked button state
    int i;
    for (i = 1; i < 52; i++) {
      restFrames.add(loadShape("cleanBreathingNoBG_" + i + ".svg"));
    }
    currentFrames = restFrames;
  }

  void drawButton() {
    shapeMode(CORNER);
    PShape frame = currentFrames.get(frameIndex);

    shape(frame, x, y, w, h);  
    frameIndex++;
    if (frameIndex == currentFrames.size()) {
      frameIndex = 0;
    }
    textSize(18);
    fill(0);
    textAlign(LEFT, TOP);
    text(t, x, y);
  }
}

And finally, the code for the SVG (suspect this is where the problem is, but I have little to no experience with SVG code and I don't know what I'm looking for):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="386px" height="363px" viewBox="0 0 386 363">
<defs>
<path id="Layer0_0_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 160.95
Q 478.0671875 309.616015625 464.95 476.9"/>

<path id="Layer0_1_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 464.95 476.9
Q 607.547265625 499.9689453125 769.9 479.9"/>

<path id="Layer0_2_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 770.9 481.9
Q 761.9529296875 312.828515625 769.9 158.95"/>

<path id="Layer0_3_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 157.95
Q 614.925 174.6916015625 769.9 156.95"/>

<path id="Layer0_4_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 463.95 475.9
L 442.95 502.9"/>

<path id="Layer0_5_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 769.9 478.9
L 783.9 503.9"/>

<path id="Layer0_6_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 771.9 158.95
L 782.9 183.95"/>

<path id="Layer0_7_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 785.9 505.9
Q 781.89296875 341.61796875 784.9 187.95"/>

<path id="Layer0_8_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 446.95 504.9
Q 616.425 506.6560546875 780.9 505.9"/>

<path id="Layer0_9_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 452.95 159.95
L 439.95 182.95"/>

<path id="Layer0_10_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 442.95 501.9
Q 449.8580078125 337.425 439.95 186.95"/>
</defs>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_0_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_1_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_2_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_3_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_4_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_5_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_6_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421.7,-148.75) ">
<use xlink:href="#Layer0_7_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_8_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_9_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_10_1_STROKES"/>
</g>
</svg>

If additional information is needed, please let me know if I missed anything! I appreciate the help.

PShape s;

void setup() {
  size(500, 500, P3D);
  shapeMode(CENTER);
  s = loadShape("obj2.obj");
}

void draw() {
  background(32);
  lights();
  fill(255);
  float z = 0;
  rotateY(z);
  z += .1;
  shape(s, 100,100, 50,50);
}

My sketch is trying to emulate an image "shatter" - a bunch of different PShapes fly around, all with static UV coordinates referencing the same image. Imagine a stained glass window smashing - little bits of image everywhere.

I have things working, albeit slowly, and have been told I can improve my performance with shaders.

I've tried to create a simple working version before implementing into the full sketch. Just trying to draw one PShape with a texture.

Sketch

PShader myShader;
PShape myShape;
PImage myImage;

void setup(){
    size(200, 200, P3D);

    myImage = loadImage("Grug.jpg");
    myShader = loadShader("frag.glsl", "vert.glsl");
    myShape = createShape();

    myShape.beginShape();
    myShape.noFill();
    myShape.noStroke();
    myShape.vertex(20, 20, 20, 20);
    myShape.vertex(80, 20, 80, 20);
    myShape.vertex(80, 80, 80, 80);
    myShape.vertex(20, 80, 20, 80);
    myShape.endShape();
}

void draw(){
    background(150);
    myShader.set("myImage", myImage);
    shader(myShader);
    shape(myShape);
}

Vert shader

#define PROCESSING_TEXTURE_SHADER

uniform mat4 transform;
uniform mat4 texMatrix;

attribute vec4 vertex;
attribute vec4 color;
attribute vec2 texCoord;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main() {
  gl_Position = transform * vertex;

  vertColor = color;
  vertTexCoord = texMatrix * vec4(texCoord, 1.0, 1.0);
}

Frag shader

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

uniform sampler2D texture;
uniform sampler2D myImage;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main() {
    gl_FragColor = texture2D(myImage, vertTexCoord.st);
}

However, nothing displays. Note that I want to avoid calling myShape.texture(myImage) when defining the shape. This call does make things work, but on a large scale the framerate dives.

I'm pretty sure it's possible to have a few thousand verts flying about referencing the same texture - please correct me if I'm mistaken. What am I missing? Or is my approach a bit wonky?! Shaders have been a bit to wrap my head around.

Thanks in advance! (Mac OSX 10.11.5, Processing 3.1.1.)

Also, How can I do this action, when I click the button, only one of Shape(c) will fall down, not all of the elements?

https://www.dropbox.com/s/ern9thoo1vcsxho/sketch_im.zip?dl=0

What I'm trying to do is create a very simple program that displays the 'child' layers of an SVG in a timed sequence. I've basically managed to do that (with some small bugs at the start of my program)- my trouble is with the way that the SVG layers are filled in processing (e.g. parts of the layer that are supposed to be unfilled, have a fill).

I've tried using both PShape and the library Geomerative to render the SVG, but am getting the same fill error with both. I've checked to see if the shapes are displayed correctly using an online SVG viewer (http://garyhodgson.github.io/slic3rsvgviewer/) and in this case, the SVG is drawn the right way, so I don't think it's my SVG file that is the issue.

Any help would be appreciated!

Here is my code (using PShape):

PShape parentShape;
PShape layerShape;

int counter;
int numLayers;
float scaleFactor;

final int stateA = 67;
final int stateB = 45;
final int stateC = 20;
float m;
char state;

void setup() {
  size(1024, 768);

  background(0, 0, 0);

  noStroke();

  state='B';
  m=millis();

  scaleFactor=12.19;


  parentShape= loadShape("/Users/tom/Desktop/test.svg");

  parentShape.disableStyle();

  numLayers=parentShape.getChildCount();
  counter=0;

}

void draw() {




  background(25, 0, 0);
  layerShape= parentShape.getChild("layer"+counter);


  layerShape.disableStyle();

  timer();
  blackout();
  translate((width/2)-(parentShape.width*scaleFactor/2), (height/2)-(parentShape.height*scaleFactor/2));
  scale(scaleFactor);
  shape(layerShape);
}

void timer() {

  if (state=='B') {
    if (counter<=5) {
      if (millis()-m>stateC) {
        noStroke();
        fill(0);
        m=millis();
        state='A';
      }
    } else if (counter>5) {
      if (millis()-m>stateA) {
        noStroke();
        fill(0);
        m=millis();
        state='A';
      }
    }
  } else if (state=='A') {
    if (millis()-m>stateB) {
      noStroke();
      fill(255);
      counter=counter+1;
      m=millis();
      state='B';
      println(counter+" of "+numLayers);
    }
  }


}

void blackout() {
  if (counter==numLayers-1) {
    if (looping) { 
      noLoop();
      noStroke();
      fill(0);
    } else loop();
  }
}

Link to the SVG: http://we.tl/Zcfbcby0AB

By ~layer 100, the square developing in the centre gets filled with white and comes back at around layer 190. It should have continued black through those layers but gets filled with white.

 PShape baseMap;
 String csv[];
  String myData[][];

  //Setup BaseMap and csv info

  void setup() {
    size(3000, 1700);
    noLoop();
    baseMap = loadShape("WorldMap.svg");
    csv = loadStrings("WeatherCoordinates.csv");
    myData = new String[csv.length][5];
    for(int i=0; i<csv.length; i++) {

      myData[i] = csv[i].split(",");


 }
 }


 //draw
 void draw() {
   shape(baseMap, 0, 0, width, height);
   noStroke();


   for(int i=0; i<myData.length; i++){
     fill(25, 30, 255, 70);
     noStroke();
     float graphLong = map(float(myData[i][3]), -180, 180, 0, width);
     float graphLat = map(float(myData[i][2]), 90, -90, 0, height);
     float markerSize = 5*(float(myData[i][0]));
    println(graphLong + " / " + graphLat);  
    ellipse(graphLong, graphLat, markerSize, markerSize);


   if(i<25){
     fill(0);
     text(myData[i][1], graphLong + markerSize + 30, graphLat);
     noFill();
     stroke(0);
     line(1.2*graphLong+markerSize, graphLat, graphLong+markerSize, graphLat);
      }
     }
   }
 }

"shape(s, 25, 25);(startpoint)"

PShape s;  // The PShape object

void setup() {
  size(100, 100, P2D);
  // Creating a custom PShape as a square, by
  // specifying a series of vertices.
  s = createShape();
  s.beginShape();
  s.fill(0, 0, 255);
  s.noStroke();
  s.vertex(0, 0);
  s.vertex(0, 50);
  s.vertex(50, 50);
  s.vertex(50, 0);
  s.endShape(CLOSE);
}

void draw() {
  shape(s, 25, 25);
}

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