# Adding a svg image to a box side

**URL:** <https://discourse.processing.org/t/adding-a-svg-image-to-a-box-side/25321>\
**Category:** Coding Questions\
**Created:** [November 10, 2020, 1:34pm UTC](https://discourse.processing.org/t/adding-a-svg-image-to-a-box-side/25321 "2020-11-10T13:34:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![raboytniksings](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@raboytniksings](https://discourse.processing.org/u/raboytniksings)\
**Post date:** [November 10, 2020, 1:34pm UTC](https://discourse.processing.org/t/adding-a-svg-image-to-a-box-side/25321/1 "2020-11-10T13:34:48Z")

</div>

I am using 3D and have created a chessboard made of 64 box(). So far so good (the full code is very long, it is very hard for me to create a MWE). Now, I am too lazy to create a 3D chess set, and I am tempted to use lichess svg images of the pieces. I have downloaded all the pieces as svg files, however I am unable to correctly place them over the chess board. For example, I have a part of the code:

```auto
PShape queen_chess;
void setup() {
  queen_chess = loadShape("wQ.svg");
}
void draw() {
shape(queen_chess, chess_square_width_and_height/2.0, chess_square_width_and_height/2.0);
}

```

But unfortunately I do not see the image. There is no way it seems to specify a z coordinate, no wonder I cannot see anything, as the image probably appears inside the boxes that make up the chessboard.

From what I understand, it is not possible to texture a side of a box(). I would have textured the top side with the svg picture. What would be a good way to achieve what I seek?

---

<div class="post-metadata">

**Author:** ![raboytniksings](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@raboytniksings](https://discourse.processing.org/u/raboytniksings)\
**Post date:** [November 10, 2020, 7:06pm UTC](https://discourse.processing.org/t/adding-a-svg-image-to-a-box-side/25321/2 "2020-11-10T19:06:03Z")

</div>

In fact I am not even able to successfully load the image, even in 2D.  
The following code:

```auto
PShape queen_chess;
int box_x = 600;
int box_y = 600;
void settings() {
  System.setProperty("jogl.disable.openglcore", "true");
  size(box_x, box_y, P2D);
}  

void setup() {
  queen_chess = loadShape("wQ.svg");
  frameRate(125);
}

void draw() {
    background(0);
shape(queen_chess, 0, 0);
}

```

returns

> Picked up \_JAVA\_OPTIONS: -Dawt.useSystemAAFontSettings=gasp  
> java.lang.ArrayIndexOutOfBoundsException: 366  
> 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.PShapeOpenGL.tessellatePath(PShapeOpenGL.java:3491)  
> at processing.opengl.PShapeOpenGL.tessellateImpl(PShapeOpenGL.java:3000)  
> at processing.opengl.PShapeOpenGL.tessellateImpl(PShapeOpenGL.java:2907)  
> at processing.opengl.PShapeOpenGL.tessellate(PShapeOpenGL.java:2854)  
> at processing.opengl.PShapeOpenGL.updateTessellation(PShapeOpenGL.java:2765)  
> at processing.opengl.PShapeOpenGL.draw(PShapeOpenGL.java:4678)  
> at processing.core.PGraphics.shape(PGraphics.java:4047)  
> at processing.opengl.PGraphics2D.shape(PGraphics2D.java:201)  
> at processing.core.PApplet.shape(PApplet.java:12909)  
> at sketch\_201110b.draw(sketch\_201110b.java:38)  
> 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  
> java.lang.ArrayIndexOutOfBoundsException: 686  
> 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.PShapeOpenGL.tessellatePath(PShapeOpenGL.java:3491)  
> at processing.opengl.PShapeOpenGL.tessellateImpl(PShapeOpenGL.java:3000)  
> at processing.opengl.PShapeOpenGL.tessellateImpl(PShapeOpenGL.java:2907)  
> at processing.opengl.PShapeOpenGL.tessellate(PShapeOpenGL.java:2854)  
> at processing.opengl.PShapeOpenGL.updateTessellation(PShapeOpenGL.java:2765)  
> at processing.opengl.PShapeOpenGL.draw(PShapeOpenGL.java:4678)  
> at processing.core.PGraphics.shape(PGraphics.java:4047)  
> at processing.opengl.PGraphics2D.shape(PGraphics2D.java:201)  
> at processing.core.PApplet.shape(PApplet.java:12909)  
> at sketch\_201110b.draw(sketch\_201110b.java:38)  
> 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)

Any idea what’s wrong? The image is a simple file.svg of a white queen chess piece.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 10, 2020, 7:39pm UTC](https://discourse.processing.org/t/adding-a-svg-image-to-a-box-side/25321/3 "2020-11-10T19:39:40Z")

</div>

Hi,

You might want to see this previous thread, it’s a known issue :

> [@Can't use P3D, can't follow an example, on Linux](https://discourse.processing.org/t/cant-use-p3d-cant-follow-an-example-on-linux/24874):
>
> I am new to Processing, I have a goal in mind and I have found some tutorials on youtube that I think I can use to reach my goal. Here’s the code I’d like to tweak: int amount = 300; int[] x = new int[amount]; int[] y = new int[amount]; int[] z = new int[amount]; void setup() { size(500,400,P3D); background(0); noFill(); stroke(255); strokeWeight(2); for(int i = 0; i\<amount; i++) { x[i] = int(random(-150, 150)); y[i] = int(random(-150, 150)); z[i] = int(random(-150, 15…

---

<div class="post-metadata">

**Author:** ![raboytniksings](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@raboytniksings](https://discourse.processing.org/u/raboytniksings)\
**Post date:** [November 11, 2020, 8:21am UTC](https://discourse.processing.org/t/adding-a-svg-image-to-a-box-side/25321/4 "2020-11-11T08:21:42Z")

</div>

Hello, I am the author of that thread, I am not sure how this is relevant. If I change to 2D, I still have problems, as I have written in my 2nd post here (the one just above yours). Am I missing something?

By the way, as you can see, I do follow the suggestion given in the solution of your link, namely the line

```auto
System.setProperty("jogl.disable.openglcore", "true");

```

---

<div class="post-metadata">

**Author:** ![raboytniksings](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@raboytniksings](https://discourse.processing.org/u/raboytniksings)\
**Post date:** [November 11, 2020, 1:30pm UTC](https://discourse.processing.org/t/adding-a-svg-image-to-a-box-side/25321/5 "2020-11-11T13:30:43Z")

</div>

Ok it works, it is just that the picture is hidden inside the box. When I choose a correct value for z, I can see the picture. The errors and warnings, I do not know how to fix them, but it doesn’t matter as I am able to achieve what I want.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 6, 2024, 3:04pm UTC](https://discourse.processing.org/t/adding-a-svg-image-to-a-box-side/25321/6 "2024-12-06T15:04:34Z")

</div>

> [@raboytniksings](#):
>
> `PShape`

when you use shape(s,0,0); you can use translate (x,y,z); before it to place in 3D.

You can also rotate to let them stand upright

Use with pushMatrix and popMatrix

Where did you download the shapes?

There are also 3D shapes to download

**Remark**

In my chess program I use images from Wikipedia, showing all pieces and empty squares as well

**Remark**

By the way When you look at my avatar image you see a 3D chessboard. The pieces are 3D, the design is from the famous Bauhaus Chessboard.