# Transform shapes so part of wall appears to be decaying

**URL:** <https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [September 1, 2019, 11:41am UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742 "2019-09-01T11:41:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![helpMe](https://avatars.discourse-cdn.com/v4/letter/h/dfb087/32.png) [@helpMe](https://discourse.processing.org/u/helpMe)\
**Post date:** [September 1, 2019, 11:41am UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742/1 "2019-09-01T11:41:55Z")

</div>

Hi, I’m working in a project. I did some code, but which is not done. I’m very new in processing. I don’t understand properly how everything works. I’ll share the project idea and code below. Can someone help me with the code please please ?  
Thanks for your time and kind help

_ **Project Idea** _

The project model of the bridge is to create semi-circular and circular shapes on the exterior of the wall in a regular pattern using Bezier cubic curves which will be used in computer graphics which will create smooth curves at all scales.

An algorithm is required that will transform the shapes in such a way that some part of wall appears to be decaying or decompose. The algorithm will also show the rate of parameterizable, so that decay can be observed at certain level of when the sunlight reflects the wall.

_ **Code** _

```auto
void setup() {
  size(600, 600, P3D);
}

void draw() {
  background (0);
  lights();
  drawFloor();
   drawSun(width/10+60, 100, 40);
drawWall();
 
}

void drawSun(float x, float y, float z) {
  fill(255, 201, 34);//red fill
  circle(56, 46, 55);
}//func 

// ---------------------------------------------------------------------------

void drawFloor() {

  pushMatrix();

  //stroke(111); // gray 
  noStroke(); 
  fill(65,152,10); // blue
  float factor1=80.0; // dist between boxes

  translate(width/2, height/2, 0); 

  for (int x=-55; x<55; x++) {
    for (int z=-55; z<55; z++) {

      pushMatrix(); 
      translate(x*factor1 - (4*factor1/2), 
        height-111, 
        z*factor1 - (4*factor1/2) );
      box(80); // size of 40 (width, height and depth) 
      popMatrix();
    }
  }
  popMatrix();
}

void drawWall(){
   fill(250, 0, 0);
   rotateY(PI/6);
    rect(150, 350, 600, 200);
}

```

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [September 1, 2019, 11:58am UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742/2 "2019-09-01T11:58:20Z")

</div>

Interesting project! My first thought for creating a physical artifact is [toxiclibs](http://toxiclibs.org/). It enables you to generate STL files that work with many fabrication devices; I 3D printed the output of a Processing sketch last week. You can install the library [like so](https://processing.org/reference/environment/#Extensions).

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 1, 2019, 12:15pm UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742/3 "2019-09-01T12:15:48Z")

</div>

and just for you code, when you post it at the forum  
please use in processing IDE [ctrl][t] and in forum editor header menu \</\> looks like

```auto
void setup() {
  size(600, 600, P3D);
}

void draw() {
  background (0,0,100);
  lights();
  drawFloor();
  drawSun(width/10+60, 100, 40);
  drawWall();
}

void drawSun(float x, float y, float z) {
  fill(255, 201, 34);
  circle(x, y, z);
}

void drawFloor() {
  push();
  noStroke();
  fill(65, 152, 10); 
  translate(width/2, height/2, -500);
  float factor=5.0; // dist between boxes 80
  for (int x=-55; x<55; x+=factor) {
    for (int z=-55; z<55; z+=factor) {
      pushMatrix();
      float posx = x*factor + (4*factor/2);
      float posy = height/2+100;
      float posz = z*factor + (4*factor/2);
      translate(posx, posy , posz );
      box(20); //80
      popMatrix();
    }
  }
  pop();
}

void drawWall() {
  fill(250, 0, 0);
  rotateY(PI/6);
  rect(150, 350, 600, 200);
}

```

with this small changes i see

 ![bridge_3d](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bd9852077f0ff81fb82385665cf0f45ff4a7d14a.png)

if you draw 3D better also see 3D ( PTZ mouse keyboard operation )

```auto
void setup() {
  size(600, 600, P3D);
  info_print();
}

void draw() {
  background (0, 0, 100);
  lights();
  PTZ();
}

void draw_object() { // _________________ called by / from inside PTZ
  drawSun(width/10+60, 100, 40);
  drawFloor();
  drawWall();
}

void drawSun(float x, float y, float z) {
  push();
  noStroke();
  translate(x,y,z);
  fill(255, 201, 34);
  sphere(20);
  pop();
}

void drawFloor() {
  push();
  noStroke();
  fill(65, 152, 10); 
  translate(width/2, height/2, -500);
  float factor=5.0; // dist between boxes 80
  for (int x=-55; x<55; x+=factor) {
    for (int z=-55; z<55; z+=factor) {
      pushMatrix();
      float posx = x*factor + (4*factor/2);
      float posy = height/2+100;
      float posz = z*factor + (4*factor/2);
      translate(posx, posy, posz );
      box(20); //80
      popMatrix();
    }
  }
  pop();
}

void drawWall() {
  push();
  fill(250, 0, 0);
  rotateY(PI/6);
  rect(150, 350, 600, 200);
  pop();
}

// ___________________________________________ PTZ ( other TAB )
int mode = 0;
float Zmag = 1;
int Zaxis=-100;                                                       
float Xmag, Ymag = 0;
float newXmag, newYmag = 0; 
int newZmag = 0;
int zoomf = 3;
float newxpos, newypos = 0; // for PAN
float xposd, yposd = 0; // for PAN
boolean diag = false;

// _________________________________________________________________ ROTATE / TILDE and MOVE / PAN
void mousePressed() {
  if (mouseButton == LEFT) mode=1; // ORBIT
  else if (mouseButton == RIGHT) mode=2; // PAN
  // else if (mouseButton == CENTER) { mode=3; } // zoom mouse wheel
}

// _________________________________________________________________ mouse PT end
void mouseReleased() { 
  mode = 0;
}

// _________________________________________________________________ mouseWheel ZOOM
void mouseWheel(MouseEvent event) {
  int newZmag = event.getCount(); // +- 1
  Zmag += newZmag*0.05; 
}

void keyPressed() {
  if ( keyCode == UP ) Ymag -= 0.1 ;
  if ( keyCode == DOWN ) Ymag += 0.1 ;
  if ( keyCode == RIGHT) Xmag -= 0.1 ;
  if ( keyCode == LEFT ) Xmag += 0.1 ;
  if ( keyCode == 16 ) Zmag -= 0.05 ;
  if ( keyCode == 11 ) Zmag += 0.05 ;
  //println("key: "+key+" keyCode: "+keyCode);
}
// _________________________________________________________________ Pan Tilde Zoom
void PTZ() {
  pushMatrix(); 
  translate(width/2, height/2, Zaxis);
  // get new mouse operation  
  if ( mode == 2 ) { // PAN ( right mouse button pressed)
    xposd = (mouseX-float(width/2));
    yposd = (mouseY-float(height/2));
  }  
  newxpos = xposd;// xposd=0;
  newypos = yposd;// yposd = 0; 
  translate(newxpos, newypos, 0); // move object
  if ( mode == 1 ) { // ORBIT ( left mouse button pressed)
    newXmag = mouseX/float(width) * TWO_PI;
    newYmag = mouseY/float(height) * TWO_PI;

    float diff = Xmag-newXmag;
    if (abs(diff) > 0.01) {   
      Xmag -= diff/4.0;
    }
    diff = Ymag-newYmag;
    if (abs(diff) > 0.01) {   
      Ymag -= diff/4.0;
    }
  }
  rotateX(-Ymag);   
  rotateY(-Xmag);   
  scale(Zmag);

  draw_object(); // THE OBJECT
  if (diag) println(" Xmag "+nf(Xmag,0,1)+" Ymag "+nf(Ymag,0,1)+" Zmag "+nf(Zmag,0,1));
  popMatrix();
}

// _______________________________________________ SETUP PRINT INFO
void info_print() {
  println("PTZ info:");
  println("key UP DOWN RIGHT LEFT -> rotate // key PAGE UP DOWN -> zoom");
  println("mouse LEFT press drag up down right left -> rotate");
  println("mouse RIGHT press -> move ");
  println("mouse WHEEL turn -> zoom");
}

```

---

<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 1, 2019, 4:14pm UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742/4 "2019-09-01T16:14:56Z")

</div>

@helpMe – is this project / is the instruction sheet a homework assignment?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 4, 2019, 3:45am UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742/6 "2019-09-04T03:45:57Z")

</div>

what is your status?  
could you test both my code versions?

---

<div class="post-metadata">

**Author:** ![helpMe](https://avatars.discourse-cdn.com/v4/letter/h/dfb087/32.png) [@helpMe](https://discourse.processing.org/u/helpMe)\
**Post date:** [September 4, 2019, 3:48am UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742/7 "2019-09-04T03:48:52Z")

</div>

@kll yes I did both 2D and 3D, I’m trying to make circles in the wall. Do you have any idea how to make circles ?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 4, 2019, 3:55am UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742/8 "2019-09-04T03:55:25Z")

</div>

actually i am not so good with 3D,  
but when i play 3D sketchup i could make a wall, and cut out windows (push pull).

 ![myhouse](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d65dbe070729f38526117fb8d7ac901a3ee8594c.png)  
( my house left / right the sketchup planning )  
but in processing you can paint windows on a wall ( like rectangles on a big rectangle or slim cube )  
but i worry you could not LOOK THROUGH ( but not tested transparency that much… )

so actually when CUT OUT not works must work other way, construct wall shape with arcs…  
and only fill OUTside of the arcs?  
that could be your next step learn createshape…

[https://processing.org/reference/PShape.html](https://processing.org/reference/PShape.html)  
[https://processing.org/reference/createShape\_.html](https://processing.org/reference/createShape_.html)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 4, 2019, 10:30am UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742/9 "2019-09-04T10:30:55Z")

</div>

i just try a arc the shape vertex way:

```auto
PShape s; // The PShape object
int xs = 120, off = 10; // arc design
int posx = 20, posy = 20; // arc position

void my_arc(int xs, int off) { // my_arc( width (outside ) , width beam );
  // int xs = 100;
  int ys = xs/2;
  // int off = 10;
  int r = (xs - 2* off )/2;
  int mx = xs/2;
  int my = ys;  
  s = createShape();
  s.beginShape();
  s.fill(0, 0, 200);
  s.noStroke();
  s.vertex(0, 0);
  s.vertex(0, ys);
  s.vertex(off, ys);
  for ( int i =0; i<180; i++ ) {
    int x = mx+ int(r * cos(radians(i)-PI));
    int y = my+ int(r * sin(radians(i)-PI));
    s.vertex(x, y);
  }
  s.vertex(xs-off, ys);
  s.vertex(xs, ys);
  s.vertex(xs, 0);
  s.vertex(0, 0);
  s.endShape();
}

void measurement() {
  line(posx, posy+xs/2, posx, posy+xs/2+60);
  line(posx, posy + xs/2+10, posx + xs, posy + xs/2+10);
  line(posx + xs, posy+xs/2, posx + xs, posy+xs/2+60);
  text("xs="+xs, posx + xs/2-20, posy + xs/2+22);
  line(posx, posy + xs/2+30, posx + off, posy + xs/2+30);
  line(posx + off, posy+xs/2, posx + off, posy+xs/2+60);
  text("off="+off, posx+2, posy + xs/2+50);
}

void setup() {
  size(200, 200);
  my_arc(xs, off);
}

void draw() {
  background(200, 200, 0);
  shape(s, posx, posy);
  measurement();
}

```

 ![arc_design](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/01c8cc3162b9b67ceb2b0ca3d76819e0c6d8205c.png)

hope you can use?

---

<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:** [September 5, 2019, 9:16am UTC](https://discourse.processing.org/t/transform-shapes-so-part-of-wall-appears-to-be-decaying/13742/10 "2019-09-05T09:16:16Z")

</div>

Also see this : [CSG (Constructive Solid Geometry)](https://discourse.processing.org/t/csg-constructive-solid-geometry/12693/7)

CSG can cut out of existing blocks