# Filling a curveVertex shape

**URL:** <https://discourse.processing.org/t/filling-a-curvevertex-shape/24871>\
**Category:** Coding Questions\
**Created:** [October 24, 2020, 7:35pm UTC](https://discourse.processing.org/t/filling-a-curvevertex-shape/24871 "2020-10-24T19:35:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![travis.stdenis](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@travis.stdenis](https://discourse.processing.org/u/travis.stdenis)\
**Post date:** [October 24, 2020, 7:35pm UTC](https://discourse.processing.org/t/filling-a-curvevertex-shape/24871/1 "2020-10-24T19:35:34Z")

</div>

Hoping to get some help on a problem that has been baffling me for hours. There are two parts to the problem which may or may not be connected.

The code below will execute, but only after a length pause which I believe is tied to this error below about system memory:

java.lang.ArrayIndexOutOfBoundsException: 22  
at jogamp.opengl.glu.tessellator.PriorityQSort.pqInit(PriorityQSort.java:151)  
at jogamp.opengl.glu.tessellator.Sweep.InitPriorityQ(Sweep.java:1246)  
at jogamp.opengl.glu.tessellator.Sweep.\_\_gl\_computeInterior(Sweep.java:1313)  
at jogamp.opengl.glu.tessellator.GLUtessellatorImpl.gluTessEndPolygon(GLUtessellatorImpl.java:526)  
at com.jogamp.opengl.glu.GLU.gluTessEndPolygon(GLU.java:896)  
at processing.opengl.PJOGL$Tessellator.endPolygon(PJOGL.java:641)  
at processing.opengl.PGraphicsOpenGL$Tessellator.tessellatePolygon(PGraphicsOpenGL.java:12621)  
at processing.opengl.PGraphicsOpenGL.tessellate(PGraphicsOpenGL.java:2255)  
at processing.opengl.PGraphicsOpenGL.endShape(PGraphicsOpenGL.java:1965)  
at processing.core.PGraphics.endShape(PGraphics.java:1707)  
at processing.core.PApplet.endShape(PApplet.java:11648)  
at unknown\_pleasures\_ized.draw(unknown\_pleasures\_ized.java:81)  
at processing.core.PApplet.handleDraw(PApplet.java:2482)  
at processing.opengl.PSurfaceJOGL$DrawListener.display(PSurfaceJOGL.java:866)  
at jogamp.opengl.GLDrawableHelper.displayImpl(GLDrawableHelper.java:692)  
at jogamp.opengl.GLDrawableHelper.display(GLDrawableHelper.java:674)  
at jogamp.opengl.GLAutoDrawableBase$2.run(GLAutoDrawableBase.java:443)  
at jogamp.opengl.GLDrawableHelper.invokeGLImpl(GLDrawableHelper.java:1293)  
at jogamp.opengl.GLDrawableHelper.invokeGL(GLDrawableHelper.java:1147)  
at com.jogamp.newt.opengl.GLWindow.display(GLWindow.java:759)  
at com.jogamp.opengl.util.AWTAnimatorImpl.display(AWTAnimatorImpl.java:81)  
at com.jogamp.opengl.util.AnimatorBase.display(AnimatorBase.java:452)  
at com.jogamp.opengl.util.FPSAnimator$MainTask.run(FPSAnimator.java:178)  
at java.util.TimerThread.mainLoop(Timer.java:555)  
at java.util.TimerThread.run(Timer.java:505)  
Tessellation Error: out of memory

The second part of the problem is the resulting image doesn’t properly implement the fill() as you can see in the image below. Notice how you can see underlying lines show up through the humps where there is overlap. Strangely, just the lines (stroke) and not the fill.

 ![processing_grab](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d0cc03361d8bd27ff38efa7358b13e10932fa24f.png)

When I take out the “fill(0,0,0)” and just put in “noFill()” it runs without pause or error. But I lose the effect of the layering without the fill.

Any help on this would be greatly appreciated.

```auto
color[] colorArray = {
  color(238, 243, 239),
  color(69, 189, 207),
  color(234, 84, 93)
};

float theRad = 200;
int numLines = 20; //number per half
float segmentSize = theRad / numLines; //dy in source code
float lineSize = 4; //make odd for a center point
float yStart = segmentSize / 2;

void setup(){
  size(650, 650, P3D);
  smooth(8);
  noLoop();
}

void draw(){
  background(colorArray[0]);
  translate(width/2, height/2);
  for(int i=0; i<(numLines*2)+1; i++){
    float yVal = -theRad + (yStart + (i * segmentSize));
    float pointY = yVal/theRad;
    float pointX = cos(asin(pointY));
    int peakPt = 0 + 50;  
    float mu = randNormal(peakPt, 50);
    float sigma = randNormal(30, 30);
    
    /* make lines from curves */
    //noFill();
    fill(0,0,0);
    beginShape();
    strokeWeight(lineSize);
    stroke(colorArray[1]);
    curveVertex(pointX*theRad, pointY*theRad);
    curveVertex(pointX*theRad, pointY*theRad);
    
    float lineLength = (pointX*theRad) * 2;       
    for(int j=0; j<lineLength; j++){
      float xPos = (pointX*theRad)-j;
      float yPos = 0;
      if(i >= 7 && i <= (numLines*2) - 13){  
        yPos = (pointY*theRad) - 1000 * normalPDF(xPos, mu, sigma);
      } else{
        yPos = pointY*theRad;
      }
      float lerpAmt = map(j, 0, lineLength, 0, 1);
      stroke(lerpColor(colorArray[1], colorArray[2], lerpAmt));
      curveVertex(xPos, yPos);
    }
    stroke(colorArray[2]);
    curveVertex(-pointX*theRad, pointY*theRad);
    curveVertex(-pointX*theRad, pointY*theRad);
    endShape();
    
    // end caps
    noStroke();
    fill(colorArray[1]);
    ellipse(pointX*theRad, pointY*theRad, lineSize, lineSize);
    fill(colorArray[2]);
    ellipse(-pointX*theRad, pointY*theRad, lineSize, lineSize);
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 25, 2020, 12:06pm UTC](https://discourse.processing.org/t/filling-a-curvevertex-shape/24871/2 "2020-10-25T12:06:58Z")

</div>

Hello,

I was just tinkering a bit with your code…

Your code was not complete so I embellished.

Some success with blendMode(DARKEST) and changing order that they they were drawn.

You may notice the black under the lines once you integrate your code.  
You can spit up the curveVertex() and only fill areas you need to.

```auto
color[] colorArray = {
  color(238, 243, 239),
  color(69, 189, 207),
  color(234, 84, 93)
};

float theRad = 200;
int numLines = 20; //number per half
float segmentSize = theRad / numLines; //dy in source code
float lineSize = 4; //make odd for a center point
float yStart = segmentSize / 2;

int mul;

void setup(){
  size(650, 650, P3D);
  smooth(8);
  //noLoop();
  blendMode(DARKEST);
}

void draw()
  {
  background(colorArray[0]);
  translate(width/2, height/2);
  
  //for(int i=0; i<(numLines*2)+1; i++)
  for(int i=(numLines*2); i>=0; i--)
    {  
    float yVal = -theRad + (yStart + (i * segmentSize));
    float pointY = yVal/theRad;
    float pointX = cos(asin(pointY));
    int peakPt = 0 + 50;  
    //float mu = randNormal(peakPt, 50);
    //float sigma = randNormal(30, 30);
    
    /* make lines from curves */
    //noFill();
    fill(0,0,0);
    beginShape();
    strokeWeight(lineSize);
    stroke(colorArray[1]);
    curveVertex(pointX*theRad, pointY*theRad);
    //curveVertex(pointX*theRad, pointY*theRad);
    
    float lineLength = (pointX*theRad) * 2;       
    
    for(int j=0; j<lineLength; j++)
      {
      float xPos = (pointX*theRad)-j;
      float yPos = 0;
      //if(i >= 7 && i <= (numLines*2) - 13)
      //(i >= 10 && i <20 && xPos>-100 && xPos< 100)
      if(i >= 10 && i <20)
        {  
        //yPos = (pointY*theRad) - 1000 * normalPDF(xPos, 5, 5);
        if (i%4==0)
          mul = 2;
        else
          mul = 1;
          
        yPos = (pointY*theRad) - (abs(mul*30*sin(xPos*(TAU)/(lineLength))));  
        } 
      else
        {
        yPos = pointY*theRad;
        }
      
      float lerpAmt = map(j, 0, lineLength, 0, 1);
      stroke(lerpColor(colorArray[1], colorArray[2], lerpAmt));
      curveVertex(xPos, yPos);
      }
    stroke(colorArray[2]);
    //curveVertex(-pointX*theRad, pointY*theRad);
    curveVertex(-pointX*theRad, pointY*theRad);
    //curveVertex(pointX*theRad, pointY*theRad);
    endShape();
    
    // end caps
    //noStroke();
    //fill(colorArray[1]);
    //ellipse(pointX*theRad, pointY*theRad, lineSize, lineSize);
    //fill(colorArray[2]);
    //ellipse(-pointX*theRad, pointY*theRad, lineSize, lineSize);
    }
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5d404d1886d58476b516cf5869da20a5316f59c8.png)

`:)`

---

<div class="post-metadata">

**Author:** ![travis.stdenis](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@travis.stdenis](https://discourse.processing.org/u/travis.stdenis)\
**Post date:** [October 25, 2020, 12:49pm UTC](https://discourse.processing.org/t/filling-a-curvevertex-shape/24871/3 "2020-10-25T12:49:46Z")

</div>

> [@glv](#):
>
> ```auto
> color[] colorArray = {
> color(238, 243, 239),
> color(69, 189, 207),
> color(234, 84, 93)
> };
> 
> float theRad = 200;
> int numLines = 20; //number per half
> float segmentSize = theRad / numLines; //dy in source code
> float lineSize = 4; //make odd for a center point
> float yStart = segmentSize / 2;
> 
> int mul;
> 
> void setup(){
> size(650, 650, P3D);
> smooth(8);
> //noLoop();
> blendMode(DARKEST);
> }
> 
> void draw()
> {
> background(colorArray[0]);
> translate(width/2, height/2);
>   
> //for(int i=0; i<(numLines*2)+1; i++)
> for(int i=(numLines*2); i>=0; i--)
> {  
> float yVal = -theRad + (yStart + (i * segmentSize));
> float pointY = yVal/theRad;
> float pointX = cos(asin(pointY));
> int peakPt = 0 + 50;  
> //float mu = randNormal(peakPt, 50);
> //float sigma = randNormal(30, 30);
>     
> /* make lines from curves */
> //noFill();
> fill(0,0,0);
> beginShape();
> strokeWeight(lineSize);
> stroke(colorArray[1]);
> curveVertex(pointX*theRad, pointY*theRad);
> //curveVertex(pointX*theRad, pointY*theRad);
>     
> float lineLength = (pointX*theRad) * 2;       
>     
> for(int j=0; j<lineLength; j++)
> {
> float xPos = (pointX*theRad)-j;
> float yPos = 0;
> //if(i >= 7 && i <= (numLines*2) - 13)
> //(i >= 10 && i <20 && xPos>-100 && xPos< 100)
> if(i >= 10 && i <20)
> {  
> //yPos = (pointY*theRad) - 1000 * normalPDF(xPos, 5, 5);
> if (i%4==0)
> mul = 2;
> else
> mul = 1;
>           
> yPos = (pointY*theRad) - (abs(mul*30*sin(xPos*(TAU)/(lineLength))));  
> } 
> else
> {
> yPos = pointY*theRad;
> }
>       
> float lerpAmt = map(j, 0, lineLength, 0, 1);
> stroke(lerpColor(colorArray[1], colorArray[2], lerpAmt));
> curveVertex(xPos, yPos);
> }
> stroke(colorArray[2]);
> //curveVertex(-pointX*theRad, pointY*theRad);
> curveVertex(-pointX*theRad, pointY*theRad);
> //curveVertex(pointX*theRad, pointY*theRad);
> endShape();
>     
> // end caps
> //noStroke();
> //fill(colorArray[1]);
> //ellipse(pointX*theRad, pointY*theRad, lineSize, lineSize);
> //fill(colorArray[2]);
> //ellipse(-pointX*theRad, pointY*theRad, lineSize, lineSize);
> }
> }
> 
> ```

Thanks for the response @glv. A couple of things:

1. Getting rid of the second starting and second end curveVertex() seemed to solve the memory issue. Which I don’t quite understand because the Processing reference indicates you require both at either end.

2. Your solution seems to be contingent on the blendMode(DARKEST) but what if black is not the fill() color? And drawing from the bottom-up would produce some unexpected results if the fill() wasn’t black. I would expect that if drawing from the top-down that the lower lines with a hump would cover any already drawn lines without a blendMode().

I’d really like to understand why my code as is doesn’t overwrite pixels and you can see lines underneath the fill()?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 25, 2020, 4:00pm UTC](https://discourse.processing.org/t/filling-a-curvevertex-shape/24871/4 "2020-10-25T16:00:47Z")

</div>

Hello,

Works in P2D:

```auto
int mul;

int xPos;
int yPos;
int zPos;

void setup()
  {
  size(400, 400, P2D);
  }

void draw()
  {
  background(255);
  translate(width/2, height/2);
 
 //Try both of these:
  for(int y=-100; y<=100; y+=10)
  //for(int y=100; y>=-100; y-=10)
    {  
    fill(0);
    strokeWeight(2);
    stroke(0, 255, 0);
  
  beginShape();        
    for(int x=-100; x<=100; x+= 10)
      {      
      if (y%40==0)
        mul = 2;
      else
        mul = 1;
           
      float xPos = x;     
      float yPos = y-(mul*20+mul*20*sin((xPos*(TAU/200) +TAU/4)));  
      
      //Google 10+10*sin((x*(2*PI/200) -(2*PI)/4)
      vertex(xPos, yPos);   
      }
  endShape(CLOSE);
    }
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c386d2c6bc5cf51fe24ffc1c4d8000fb0204c19b.png)

And with z offsets in P3D:

```auto

int mul;

int xPos;
int yPos;
float zPos;

void setup()
  {
  size(400, 400, P3D);
  ortho();
  }

void draw()
  {
  background(255);
  translate(width/2, height/2);
  
  zPos = 0;
  
  for(int y=-100; y<=100; y+=10)
  //for(int y=100; y>=-100; y-=10)
    {  
    fill(0);
    strokeWeight(2);
    stroke(0, 255, 0);
  
  beginShape();        
    for(int x=-100; x<=100; x+= 10)
      {      
      if (y%40==0)
        mul = 2;
      else
        mul = 1;
           
      float xPos = x;     
      float yPos = y-(mul*20+mul*20*sin((xPos*(TAU/200) +TAU/4)));  
      //Google 10+10*sin((x*(2*PI/200) -(2*PI)/4)
      vertex(xPos, yPos, zPos+=.1);   
      }
  endShape(CLOSE);
    }
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/726e0af30531963f9483425fce979415fd13639f.png)

Related reference:

> <https://github.com/processing/processing4/issues/27#issuecomment-558570106>
>
> When the render is P3D, the stroke() overlap the image, that's not happen in classic renderer and in P2D. that's happen...

`:)`

---

<div class="post-metadata">

**Author:** ![travis.stdenis](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@travis.stdenis](https://discourse.processing.org/u/travis.stdenis)\
**Post date:** [October 25, 2020, 4:20pm UTC](https://discourse.processing.org/t/filling-a-curvevertex-shape/24871/5 "2020-10-25T16:20:27Z")

</div>

interesting, that’s helpful. the one remaining issue is that in P2D i’m not able to vary the color of the stroke as in my original sketch. if i can accomplish that in P2D somehow, that would be even better. my goal in using curveVertex() for the lines was to be able to export as a SVG and have the lines. if i just use a series of ellipses then i wouldn’t be able to get that. or would i? or (as referenced in the link provided) if i explicit ly define a Z value for each curveVertex(), would that resolve the issue by forcing a layering?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 25, 2020, 4:31pm UTC](https://discourse.processing.org/t/filling-a-curvevertex-shape/24871/6 "2020-10-25T16:31:30Z")

</div>

@travis.stdenis

This is as far as my exploration into this goes.

Keep at it!

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 25, 2020, 8:01pm UTC](https://discourse.processing.org/t/filling-a-curvevertex-shape/24871/7 "2020-10-25T20:01:14Z")

</div>

> [@travis.stdenis](#):
>
> the one remaining issue is that in P2D i’m not able to vary the color of the stroke

It is the same here in P2D as in P3D and I tried your lerp code example.

> [@travis.stdenis](#):
>
> my goal in using curveVertex() for the lines was to be able to export as a SVG and have the lines

Go for it!  
I was able to glean insight from here:  
_[SVG Export / Libraries / Processing.org](https://processing.org/reference/libraries/svg/index.html)_  
and generate an SVG within a few minutes.  
I tried both vertex() and curveVertex() and also looked at the SVG file source.

> [@travis.stdenis](#):
>
> or (as referenced in the link provided) if i explicit ly define a Z value for each curveVertex(), would that resolve the issue by forcing a layering?

Try it.  
In both of my examples I provided I explored this by writing simple code examples.

`:)`