# Code generated pattern wrap on 3D

**URL:** <https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385>\
**Category:** Coding Questions\
**Created:** [September 9, 2018, 6:48am UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385 "2018-09-09T06:48:20Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![vallu](https://avatars.discourse-cdn.com/v4/letter/v/9fc29f/32.png) [@vallu](https://discourse.processing.org/u/vallu)\
**Post date:** [September 9, 2018, 6:48am UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/1 "2018-09-09T06:48:20Z")

</div>

Hello, I have been to trying to program a cuboid with surfaces rendered in code generated patterns (image attached). While there is a texture function for wrapping images, I couldn’t find anything for SVG’s or code generated patterns. Also, it seems texture wrap doesn’t export for pdf/svg on renderers like P3D or OpenGL. I would like to render the final output as PDF or SVG. Does anyone know how to do this?

Thanks.

 ![0TS0FYAHP2YB](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/06d994fa0797665529a18bfd1def8304716e90e8.jpeg)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [September 10, 2018, 7:49am UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/2 "2018-09-10T07:49:12Z")

</div>

Hi! What about drawing 6 planes with 6 textures? Maybe create your own function like `mycube(x, y, z, w, h, d, tex1, tex2, tex3, tex4, tex5, tex6)`? Would that work?

---

<div class="post-metadata">

**Author:** ![vallu](https://avatars.discourse-cdn.com/v4/letter/v/9fc29f/32.png) [@vallu](https://discourse.processing.org/u/vallu)\
**Post date:** [September 10, 2018, 11:20am UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/3 "2018-09-10T11:20:34Z")

</div>

@hamoid I was thinking of that as the last option, but may be I shall give it a try. To reduce some complexity, is there a way to vector mask/map procedural textures onto a 3d plane?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [September 10, 2018, 1:57pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/4 "2018-09-10T13:57:08Z")

</div>

I think there are two ways to get what you want:

1. With textures. You draw 3 shapes with 4 vertices each, like in [https://processing.org/reference/texture\_.html](https://processing.org/reference/texture_.html) Each vertex has the screen space coordinates and the texture coordinates. I find it easier to work with `textureMode(NORMAL);`, so the texture coordinates are normalized (between 0.0 and 1.0 instead of using pixel sizes, which change depending on the specific texture you use).

Since you want to generate your texture, you can create a PGraphics, draw into it and later use it as a texture for your planes.

This works, but if you want to print the result large it’s not ideal, because the pattern on each side is a bitmap and it may look pixelated if your texture is not high res enough.

1. Deforming the coordinate system with `shearX()`, `shearY()`, `rotate` etc. to simulate the perspective. It may be tricky to position each plane on the right location, but once done, you could call any function including `ellipse()` to draw on the planes directly as if they were 3 displays, without using any temporary PGraphics. This should produce a completely vector based result, so if you created an SVG or PDF you can print them as large as you want.

An example of this second approach:

```auto
void setup() {
  size(400, 400, P3D);
  noStroke();
}
void drawCircles(float x, float y) {
  for(int sz=80; sz>0; sz-=10) {
    fill(random(255));
    ellipse(x, y, sz, sz);
  }
}
void draw() {
  background(255);
  translate(width/2, height/2);

  fill(60);
  pushMatrix();
  shearX(PI/4);
  scale(1.0, 0.5);
  rect(0, 0, 100, -100);
  drawCircles(50, -50);
  popMatrix();

  fill(100);
  rect(0, 0, 100, 100);
  drawCircles(50, 50);

  fill(160);
  pushMatrix();
  shearY(PI/4);
  scale(0.5, 1.0);
  rect(0, 100, -100, -100);
  drawCircles(-50, 50);
  popMatrix();
}

```

![2018-09-10-155519_400x400_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d6eb45412b51f7366e6e425aa287b75773fb8bc7.png)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [September 10, 2018, 2:08pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/5 "2018-09-10T14:08:12Z")

</div>

A variation of 2, where you rotate the axes so you can draw in a known safe area, in this case it’s a rectangle located at 0, 0 and with dimensions 100, 100. There you could draw a grid like in your example, knowing that you stick to that safe area if you want to stay within the rectangle.

```auto
void setup() {
  size(400, 400, P3D);
  noStroke();
  rectMode(CENTER);
  hint(DISABLE_DEPTH_TEST);
}
void drawCircles(float x, float y) {
  for(int sz=80; sz>0; sz-=10) {
    fill(random(255));
    ellipse(x, y, sz, sz);
  }
}
void draw() {
  background(255);
  translate(width/2, height/2);
  rotateX(-0.5);
  scale(2.0);

  // right plane
  fill(60);
  pushMatrix();
  rotateY(PI/4);
  translate(0, 0, 50);
  rect(0, 0, 100, 100);
  drawCircles(0, 0);
  popMatrix();

  // left plane
  fill(100);
  pushMatrix();
  rotateY(-PI/4);
  translate(0, 0, 50);
  rect(0, 0, 100, 100);
  drawCircles(0, 0);
  popMatrix();

  // top plane
  fill(140);
  pushMatrix();
  rotateY(PI/4);
  rotateX(PI/2);
  translate(0, 0, 50);
  rect(0, 0, 100, 100);
  drawCircles(0, 0);
  popMatrix();
}

```

![2018-09-10-160408_400x400_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/48d590c19dca2f14f50dd022afe9de280af2387f.png)

With this approach the result is still vector data. I hope this works with PDF / SVG, I haven’t tried.

The `hint` I used forces things to be drawn to the screen in the same order as your instructions get executed. Without it I get this unwanted but nice glitch due to [z-fighting](https://en.wikipedia.org/wiki/Z-fighting):  
 ![2018-09-10-160832_400x400_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9b8ece8abe7e222efe12ef2313bc8c63205cdbce.png)

---

<div class="post-metadata">

**Author:** ![vallu](https://avatars.discourse-cdn.com/v4/letter/v/9fc29f/32.png) [@vallu](https://discourse.processing.org/u/vallu)\
**Post date:** [September 10, 2018, 5:30pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/6 "2018-09-10T17:30:12Z")

</div>

Thanks @hamoid, this approach seems interesting, will try to render a pdf from this and let you know.

---

<div class="post-metadata">

**Author:** ![vallu](https://avatars.discourse-cdn.com/v4/letter/v/9fc29f/32.png) [@vallu](https://discourse.processing.org/u/vallu)\
**Post date:** [September 10, 2018, 6:46pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/7 "2018-09-10T18:46:29Z")

</div>

It almost worked in achieving the vector output, but unfortunately it is rendering pdf/svg in triangles. I’m looking for vectors with clean paths. I would be using the vector output on a xy plotter. Im assuming there should be another way of rendering the pdf/svg output.

```auto
import processing.pdf.*;
import processing.svg.*;
float rotx = PI/4;
float roty = PI/4;
boolean record;

void setup() {
  size(400, 400, OPENGL);
  noStroke();
  rectMode(CENTER);
  hint(DISABLE_DEPTH_TEST);
  pixelDensity(2);
  ortho();
  smooth();
}
void drawCircles(float x, float y) {
  for (int sz=80; sz>0; sz-=10) {
    fill(random(255));
    ellipse(x, y, sz, sz);
  }
}
void draw() {
  background(255);

  if (record) {
    beginRaw(PDF, "output.pdf");
    //beginRaw(SVG, "output.svg");
  }

  translate(width/2, height/2);
  rotateX(rotx);
  rotateY(roty);  
  scale(2.0);

  // right plane
  fill(255, 0, 0);
  pushMatrix();
  rotateY(PI/4);
  translate(0, 0, 50);
  rect(0, 0, 100, 100);
  drawCircles(0, 0);
  popMatrix();

  // left plane
  fill(0, 100, 255);
  pushMatrix();
  rotateY(-PI/4);
  translate(0, 0, 50);
  rect(0, 0, 100, 100);
  drawCircles(0, 0);
  popMatrix();

  // top plane
  fill(255, 200, 0);
  pushMatrix();
  rotateY(PI/4);
  rotateX(PI/2);
  translate(0, 0, 50);
  rect(0, 0, 100, 100);
  drawCircles(0, 0);
  popMatrix();
  if (record) {
    endRaw();
    record = false;
  }
}

void keyPressed() {
  // Use a key press so that it doesn't make a million files
  if (key == 's') {
    record = true;
  }
}

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

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [September 10, 2018, 8:07pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/8 "2018-09-10T20:07:49Z")

</div>

It’s expected that it uses triangles, since the program uses filled shapes.

What if you replace `noStroke()` by `noFill()` and every mention of `fill(...)` by `stroke(...)`?

---

<div class="post-metadata">

**Author:** ![vallu](https://avatars.discourse-cdn.com/v4/letter/v/9fc29f/32.png) [@vallu](https://discourse.processing.org/u/vallu)\
**Post date:** [September 12, 2018, 2:01pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/9 "2018-09-12T14:01:25Z")

</div>

@hamoid Finally I managed to get the positioning of the planes and pattern mapping right. Also the issue of triangulation doesn’t appear when using strokes alone as the shapes are broken into disjointed lines - but then it gets chaotic since there is no fill. Since there are only 6 surfaces, I should be able to easily fix this in a vector editing tool as long as I’m only generating one or few cuboids.

The bigger problem starts to appear when having fills. The appearance of rendered pdf seems to be based on the actual sequence of the functions in code. While there is a function for depth sorting for 3D renders/PDF. The depth sorting seems to work only for fills - all the stroke data is pushed behind the fills if I enable hint(ENABLE\_DEPTH\_SORT); (attached).

 ![20%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e3ef78e1d05f52875ec8b741ca025c7f5dd3a329.png)

So I added the hint(DISABLE\_OPTIMIZED\_STROKE); function to get the stroke data on top, but now its not sorted as it appears on run preview (attached).  
 ![12%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dfcd97c6e586d179a0551505385c0a8e66895680.png)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [September 12, 2018, 2:30pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/10 "2018-09-12T14:30:59Z")

</div>

Cool, you’re getting closer 🙂

What if you draw only the three faces you care about. Is that an option?

---

<div class="post-metadata">

**Author:** ![vallu](https://avatars.discourse-cdn.com/v4/letter/v/9fc29f/32.png) [@vallu](https://discourse.processing.org/u/vallu)\
**Post date:** [September 12, 2018, 2:41pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/11 "2018-09-12T14:41:44Z")

</div>

The problem is I would like to have all 6 faces since the object would be rotated dynamically. But I would only need the 3 surfaces with textures that are visible, so it would definitely help I can eliminate the rest of hidden 3 surfaces during the process of generating the PDF - That way I don’t have to edit this further in illustrator or Inkscape. Is there a way to convert the 3D visual into a 2D visual and then render as 2D output - so there would be no depth issues or hidden surfaces?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [September 12, 2018, 3:32pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/12 "2018-09-12T15:32:59Z")

</div>

> [@vallu](#):
>
> Is there a way to convert the 3D visual into a 2D visual and then render as 2D output

Not that I know of.

I was taking a look at the exported svg / pdf files and it seems like the current implementation of those exporters in Processing is very simple and not optimized. Ellipse borders become tons of segments and the fills become many triangles, when the border could be just one segment with many points, same for the fill.  
The issue with that is that the resulting file is not easily editable in something like Inkscape.

I also took a look at doing the same in openFrameworks. The exporter is better (paths with many vertices are ok, circles are not made out of triangles) but I could not get 3D shapes exported correctly (in my brief tests).

I don’t know if it helps, but you could calculate which plane of each pair is closer to you and render that, skipping the one that is farther.

Update: one more option would be using three.js. It has an SVG renderer. [three.js svg - sandbox](https://threejs.org/examples/svg_sandbox.html) An example: [Using Three.js to Create Vector-Graphics from 3D-Visualizations Right in Your Browser - Felix Breuer's Blog](http://blog.felixbreuer.net/2014/08/05/using-threejs-to-create-vector-graphics-from-3d-visualizations.html)

---

<div class="post-metadata">

**Author:** ![vallu](https://avatars.discourse-cdn.com/v4/letter/v/9fc29f/32.png) [@vallu](https://discourse.processing.org/u/vallu)\
**Post date:** [September 13, 2018, 12:36pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/13 "2018-09-13T12:36:35Z")

</div>

> [@hamoid](#):
>
> I don’t know if it helps, but you could calculate which plane of each pair is closer to you and render that, skipping the one that is farther.

Will try to work around this, seems like the only option i have since I don’t know any other programming language. Thanks for the help so far @hamoid

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 13, 2018, 6:40pm UTC](https://discourse.processing.org/t/code-generated-pattern-wrap-on-3d/3385/14 "2018-09-13T18:40:46Z")

</div>

@vallu you might also be interested in @WakeMeAtThree 's morph explorations – see in particular the comment about `ortho()` mode when working in 3D.

> [@\[Processing\] Unfolding columns](https://discourse.processing.org/t/processing-unfolding-columns/610):
>
> Hello! I’m sharing the latest iteration of my morph explorations. Recently, I’ve been exploring 2D to 2D, 3D to 3D (you can check some of it on my instagram @WakeMeAtThree). This time I wanted to explore 2D to 3D. I started off designing a simple module that can alternate between these two states, and I thought of unfolding a cuboid to form a X shape that can be tiled. [output] After tiling and adding a radial delay, I came up with this: Up to now, I’ve been exploring morphing between tw…