Code generated pattern wrap on 3D

Processing Coding Questions
4

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 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:

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

3 Likes