I have just begun and I'm already stuck :/

ArrayList<GameObject> objects = new ArrayList <GameObject>();

void setup() {
  size(500, 500, P3D);
  objects.add(new GameObject(150,300,25));
  objects.add(new GameObject(200,300,-2));
}

void draw() {
  background(45);
  objects.get(0).layer = width/2 - mouseX;
  for (int i = objects.size()-1; i >= 0; i--) {
    GameObject object = objects.get(i);
    pushMatrix();
    translate(object.x, object.y, object.layer);
    fill(object.c);
    noStroke();
    rect(0,0,100,100);
    popMatrix();
  }
}

class GameObject {
  int x, y, layer;
  color c = color(random(255),random(255),random(255));
  GameObject(int x, int y, int layer) {
    this.x = x;
    this.y = y;
    this.layer = layer;
  }
}

void setup() { size(200, 200); }

void draw() { background(255); stroke(0); fill(175);

int mx = constrain(mouseX, 0, width); int my = constrain(mouseY, 0, height);

translate(mx, my); ellipse(0, 0, 8, 8);

translate(100, 0); ellipse(0, 0, 8, 8);

translate(0, 100); ellipse(0, 0, 8, 8);

translate(-100, 0); ellipse(0, 0, 8, 8); }

Figure figure=new Figure();
PVector mus;
PVector dirx;
PVector diry;
float anglx;
float angly;
float locX=0;
float locY=0;


void setup()
{
  size(500,500,P3D);
  ortho();
  dirx=new PVector(0,0,0);
  diry=new PVector(0,0,0);
}



void draw()
{
  mus=new PVector(mouseX-pmouseX,mouseY-pmouseY,0);
  mus.setMag(0.04);

  dirx = new PVector(1,0,0);
  dirx.add(mus.copy());
  dirx.setMag(1);

  diry = new PVector(0,1,0);
  diry.add(mus.copy());
  diry.setMag(1);


  background(200);
  figure.display();
}



void mousePressed()
{
  locX=mouseX;
  locY=mouseY;
}



void mouseDragged()
{

  ellipse(locX,locY,5,5);

  float ax = figure.A.x-locX;
  float bx = figure.B.x-locX;
  float cx = figure.C.x-locX;

  float ay= figure.A.y-locY;
  float by= figure.B.y-locY;
  float cy= figure.C.y-locY;



  {// rotation by X axis

  float nax=(figure.A.x*1)+(0)+(0);
  float nay=(0)+(ay*dirx.x)+(figure.A.z*dirx.y);
  float naz=(0)+(ay*-dirx.y)+(figure.A.z*dirx.x);

  float nbx=(figure.B.x*1)+(0)+(0);
  float nby=(0)+(by*dirx.x)+(figure.B.z*dirx.y);
  float nbz=(0)+(by*-dirx.y)+(figure.B.z*dirx.x);

  float ncx=(figure.C.x*1)+(0)+(0);
  float ncy=(0)+(cy*dirx.x)+(figure.C.z*dirx.y);
  float ncz=(0)+(cy*-dirx.y)+(figure.C.z*dirx.x);


  figure.A.x=nax;
  figure.A.y=nay+locY;
  figure.A.z=naz;
  figure.B.x=nbx;
  figure.B.y=nby+locY;
  figure.B.z=nbz;
  figure.C.x=ncx;
  figure.C.y=ncy+locY;
  figure.C.z=ncz;
  }


  {// rotation by Y axis


  float nax=(ax*diry.y)+(0)+(figure.A.z*-diry.x);
  float nay=(0)+(figure.A.y*1)+(0);
  float naz=(ax*diry.x)+(0)+(figure.A.z*diry.y);

  float nbx=(bx*diry.y)+(0)+(figure.B.z*-diry.x);
  float nby=(0)+(figure.B.y*1)+(0);
  float nbz=(bx*diry.x)+(0)+(figure.B.z*diry.y);

  float ncx=(cx*diry.y)+(0)+(figure.C.z*-diry.x);
  float ncy=(0)+(figure.C.y*1)+(0);
  float ncz=(cx*diry.x)+(0)+(figure.C.z*diry.y);


  figure.A.x=nax+locX;
  figure.A.y=nay;
  figure.A.z=naz;
  figure.B.x=nbx+locX;
  figure.B.y=nby;
  figure.B.z=nbz;
  figure.C.x=ncx+locX;
  figure.C.y=ncy;
  figure.C.z=ncz;

  }
}




class Figure
{
  PVector A;
  PVector B;
  PVector C;


  Figure()
  {
    A=new PVector(random(width*2, width*4), random(width*2, width*4), random(width*2, width*4));
    B=new PVector(random(width*2, width*4), random(width*2, width*4), random(width*2, width*4));
    C=new PVector(random(width*2, width*4), random(width*2, width*4), random(width*2, width*4));
  }


  void display()
  {

    stroke(255, 150);
    fill(#73C1C1);

    beginShape(TRIANGLES);
    vertex(A.x, A.y, A.z);
    vertex(B.x, B.y, B.z);
    vertex(C.x, C.y, C.z);
    endShape();

    fill(255);
    text("AX="+A.x, 10, 20);
    text("AY="+A.y, 10, 40);
    text("AZ="+A.z, 10, 60);

    text("BX="+B.x, 10, 100);
    text("BY="+B.y, 10, 120);
    text("BZ="+B.z, 10, 140);

    text("CX="+B.x, 10, 180);
    text("CY="+B.y, 10, 200);
    text("CZ="+B.z, 10, 220);

    text(locX, 10, 260);
    text(locY, 10, 280);
  }
}

I am looking for a way to "build" a triangle shape (isosceles triangle) where I can specify the start point a (a1,a2), the length of the vertical direction towards the hypotenuse, and the length of the hypotenuse.

I then want to paste multiple triangles from that master shape into the sketch at positions I specify just with a point and the rotation of the triangle. For example 4 triangles in the middle of each side with the hypotenuse facing towards the middle of the sketch.

position1(  0 , height/2 ) with 90° rotation
position2( width/2 , 0 ) with 0° rotation
position3( width , height/2 ) with 180° rotation
position4( width/2 , height ) with 270° rotation

Any help is strongly appreciated.

Thanks a lot.

void setup(){

  size(300,300);
}


void draw(){

  petals(40,40,200,0,0);

  stem(50,100);
}

//Making petal function

void petals(float x,float y,float a,float b,float c){

  fill(a,b,c);

  translate(width/2,height/2);

  ellipse(0,0,x,y);

  fill(a/2,b/2,c/2);

  ellipse(0,0,x/2,y/2);
}

//Making stem function

void stem(float b,float p){

  translate(width/2,height/2);

  fill(0,p,0);

  line(0,0,0,b);

} 

void setup(){
  size(500,500);
}

float zoom=1;

void draw(){
  background(200);

  translate(mouseX,mouseY);

  scale(zoom);

  translate(-(mouseX),-(mouseY));

  ellipse(20,200,500,300);
  rect(200,400,300,300);
  ellipse(400,200,100,100);

}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  //println(e);
  zoom-=e/10;

}

function Grid(xStart, yStart, vN, hN, vW, hW, vS, hS) {
    this.x = xStart;
    this.y = yStart;
    this.vertNum = vN;
    this.horizNum = hN;
    this.vertSpace = vS;
    this.horizSpace = hS;
    this.vertWidth = vW;
    this.horizWidth = hW;
    this.gridWidth = (vN - 1) * (vW + vS);
    this.gridHeight = (hN - 1) * (hW + hS);

    this.middleX = this.x + this.gridWidth / 2;
    this.middleY = this.y + this.gridHeight / 2;
    this.underneath = this.gridHeight + 10;
    //this.angleRotated = 0;

    this.moveWithMouse = function() {
        this.x = mouseX - this.middleX;
        this.y = mouseY - this.underneath;
    }

    this.moveWithArrowKeys = function() {
        if (keyIsDown(LEFT_ARROW)) this.x -= 1;
        if (keyIsDown(RIGHT_ARROW)) this.x += 1;
        if (keyIsDown(UP_ARROW)) this.y -= 1;
        if (keyIsDown(DOWN_ARROW)) this.y += 1;
    }

    this.rotation = function() {
        if (keyIsDown(188)) {
             // If comma key, rotate me counterclockwise!!!
        }
        if (keyIsDown(190)) {
            // If period key, rotate me clockwise!!!
        }
    }

    this.display = function() {
        noStroke();
        this.drawVerticals();
        this.drawHorizontals();
    }

    this.drawVerticals = function() {
        // fill(0, 200);
        for (var ix = 0; ix < this.vertNum; ix++) {
            rect(this.x + (ix * (this.vertSpace + this.vertWidth)), this.y, this.vertWidth, this.gridHeight + this.horizWidth);
        }
    }

    this.drawHorizontals = function() {
        // fill(0, 50);
        for (var iy = 0; iy < this.horizNum; iy++) {
            rect(this.x, this.y + (iy * (this.horizSpace + this.horizWidth)), this.gridWidth + this.vertWidth, this.horizWidth);
        }
    }
}
function draw() {
    background(255);
    stroke(0);
    fill(0);
    gridObjectName.display();
}

A grid object is instantiated in setup(). I show what I do in draw() above as well.

My question is how can I take this object, which is drawn in default rectMode(CORNER) from starting point (xStart, yStart), and has attributes 'middleX' and 'middleY' (='center'), and rotate it with about its center and most importantly, save that rotation to the object (so it draws correctly rotated every keypress)?

I am currently working on a side project and I was playing with the box() object.

When I tweak the z parameter, both ends are affected.

Can I make it that only the top end is affected by the z parameter?

Thanks!

Both ellipse and rectangle plane have same rotation, and ellipse's z index is 1 higher than rectangle's. The wired thing is when the mouse position is below the rectangle's y position, the ellipse will be hidden behind the rectangle.

This trobules me a lot, anyone has a good idea?

Here is the code.

void setup() {
  frameRate(60);
  size(1000, 1000, P3D);
  smooth(6);
}

void draw() {
  background(120);

  pushMatrix();
  pushStyle();
  noStroke();
  translate(width/2, height/2, 0);
  rotateX(1);
  rectMode(CENTER);
  rect(0, 0, 800, 800);
  fill(0);
  textAlign(CENTER, CENTER);
  textSize(120);
  text("TEST", 0, 0, 1);
  popStyle();
  popMatrix();

  pushMatrix();
  pushStyle();
  translate(mouseX, mouseY, 1);
  rotateX(1);
  fill(0);
  ellipse(0, 0, 50, 50);
  popStyle();
  popMatrix();

}

Thanks

translate(150, 150); 

rotate(radians(mouseY));

fill(0);
rect(0, 0, 100, 100);
rotate(radians(mouseY));
fill(0);
rect(200, 0, 100, 100);
rotate(radians(mouseY));
fill(0);
rect(400, 0, 100, 100);

}

I am using translate to focus the view on the player. The problem is, I'm not sure how I would then calculate the distance between the player and the objects in the world if the point of origin is always the player's x and y.

Without translating I would just use "dist()" to see if there's any overlap, but I'm not sure how to apply this when using translate().

I tried in vain to draw the objects and then calculate their position in separate variables relative to the player but it was a complete headache; I'm convinced there is an easier way.

I understand there are libraries for games and collisions but that wouldn't be any fun! :)

I've stripped my code to the relative parts and put it here: http://codepen.io/swhizzle/full/OpKyJQ/

Any advice will be really appreciated!

Steve

https://processing.org/tutorials/print/

 /* 
     * Example 6: Scale and segment an image
     * 
     * Draws an image larger than the screen by tiling it into small sections.
     * The scaleValue variable sets amount of scaling: 1 is 100%, 2 is 200%, etc.
     */

    int scaleValue = 3;  // Multiplication factor
    int xoffset = 0;     // x-axis offset 
    int yoffset = 0;     // y-axis offset

    void setup() {
      size(600, 600);
      stroke(0, 100);
    }

    void draw() {
      scale(scaleValue);
      translate(xoffset * (-width/scaleValue), yoffset * (-height/scaleValue));
      line(10, 150, 500, 50);
      line(0, 600, 600, 0); 
      setOffset();
    }

    void setOffset() {
      save("lines-" + xoffset + "-" + yoffset + ".jpg");
      xoffset++;
      if (xoffset == scaleValue) {
        xoffset = 0;
        yoffset++;
        if (yoffset == scaleValue) {
          exit();
        } 
      }
      background(204);
    }

the problem is that I have to use translate() several times after this and it makes impossible exporting the image correctly. Example:

void draw() {
  scale(scaleValue);
  translate(xoffset * (-width/scaleValue), yoffset * (-height/scaleValue));
  line(10, 150, 500, 50);
 translate(0,height/2);
  line(0, 600, 600, 0); 
  setOffset();
}

I've tried another ways like: Example 4: accumulate many frames into one pdf Example 5: high-resolution off-screen buffer

The problem is that I must use "aa" < fft.specSize() in my sketch and I can't enlarge it. Also there is a lot of transparency what makes it difficult to use a pdf/svg vector mode for exporting.

Thanks, sorry for my spanglish.

Also he has translate(-100, 0) (OMG a negative) with an ellipse(0, 0, 8, 8) with a comment saying move 100 pixels left... let's just say I have no idea what that means. I would imagine translate(-100, 0) would make the top right usual (0, 0) area be (100, 0).

In another book I have "Getting Started with P5.js," the translation makes sense. Is the translation function different from Processing to P5.js?

Could you give me a topic just to fixe my code?

Tks in advance. Jose Peres.

// JPeres: 20-MAR-2017 import controlP5.*; ControlP5 cp5;

float x, y; float angle1, angle2, angle3 = 0.0;

float segLength = 100; float segLength1 = 100; // Must be equal to var segLength!!! - How to fix ?? float segLength2 = 100; // Must be equal to var segLength!!! - How to fix ??

int V01 = 0; int V02 = 0; int V03 = 0;

void setup() { size(1080, 640); strokeWeight(25); stroke(255, 160);

x = width * 0.40; y = height * 0.7;

cp5 = new ControlP5(this);

cp5.addSlider("V01") .setPosition(900, 80) .setSliderMode(Slider.FLEXIBLE) .setValue(0) .setSize(20, 300) .setRange(-90, 90);

cp5.addSlider("V02") .setPosition(940, 80) .setSliderMode(Slider.FLEXIBLE) .setValue(0) .setSize(20, 300) .setRange(-90, 90);

cp5.addSlider("V03") .setPosition(980, 80) .setSliderMode(Slider.FLEXIBLE) .setValue(0) .setSize(20, 300) .setRange(-90, 90);

cp5.addSlider("H00") .setPosition(280, height-40) .setSliderMode(Slider.FLEXIBLE) .setValue(0) .setSize(300, 30) .setRange(-90, 90);

cp5.addButton("ARM_RESET") .setPosition(900, height-100) .setSize(140, 40) .setValue(0) .activateBy(ControlP5.RELEASE);

cp5.addButton("ARM_HOME") .setPosition(900, height-50) .setSize(140, 40) .setValue(0) .activateBy(ControlP5.RELEASE); } void draw() { background(80); angle1 = ((-V01+90)/float(180)) * -PI; angle2 = (-90+V02/float(180)) * PI;

pushMatrix(); segment(x, y, angle1); segment(segLength1, 0, angle2); segment(segLength2, 0, angle3);

popMatrix(); line(x, y, x, y+80); rect(0, y+80, width, y+80); } void segment(float x, float y, float a) { translate(x, y); rotate(a); line(0, 0, segLength, 0); } public void ARM_RESET(int value) { cp5.getController("V01").setValue(0); cp5.getController("V02").setValue(0); cp5.getController("V03").setValue(0); cp5.getController("H00").setValue(0); } public void ARM_HOME(int value) { cp5.getController("V01").setValue(90); cp5.getController("V02").setValue(-90); cp5.getController("V03").setValue(-90); cp5.getController("H00").setValue(0); } // That's the end!

function setup() {
    createCanvas(
        window.innerWidth,
        window.innerHeight
    );
}

function draw() {
    background(0);
    ship(0, 0);
 }

function ship(x, y) {
    noFill();
    stroke(0, 255, 0);
    beginShape();
    vertex(200, 10);
    vertex(195, 10);
    vertex(195, 25);
    vertex(180, 25);
    vertex(180, 50);
    vertex(130, 50);
    vertex(130, 60);
    vertex(120, 60);
    vertex(120, 90); 
    vertex(280, 90);
    vertex(280, 60);
    vertex(270, 60);
    vertex(270, 50);
    vertex(220, 50);
    vertex(220, 25);
    vertex(205, 25);
    vertex(205, 10);
    vertex(200, 10)
    endShape();
}

var point = {
    x: 1;
    y: 3;
};
angle in radian

function rotate(point, angle);

thanks a lot :D.

// scaletranslate A B comparission
float mx,my,ratio,xpt,ypt,xzt,yzt,cx,cy,swt,zoom;
boolean mode=false;
void setup() {
 size(600,600);
  zoom=1.0;
  mx=width/60;
  my=mx*height/width;
  ratio=mx/my;
}
void draw() {

  if(!mode){cxcy(60,60);}
  else if(mode){scaletranslate(60,60);}
}
void mouseClicked(){
  if(mouseButton == RIGHT){
    if(mode){mode=false;}else{mode=true;}

  }
}
void mouseDragged(){
  xpt-=(pmouseX-mouseX)/zoom;
  ypt-=(pmouseY-mouseY)/zoom;
}
void mouseWheel(MouseEvent event) {
  swt-=event.getCount();
  if (swt==0) {
    zoom=1.0;
  } else if (swt>=1 && swt<=10) {
    zoom=pow(2, swt);
  } else if (swt<=-1 && swt>=-10) {
    zoom=1/pow(2, abs(swt));
  }
  xzt=((zoom-1)*width/2)/zoom;
  yzt=((zoom-1)*height/2)/zoom;
  if(event.getCount()<=-1){
  xpt-=(mouseX-width/2)/zoom;
  ypt-=(mouseY-height/2)/zoom;
  } else {
  xpt+=(mouseX-width/2)/(pow(2, swt+1));
  ypt+=(mouseY-height/2)/(pow(2, swt+1));
  }
}
void cxcy(float x, float y) {
  cx=(xpt-xzt); cy=(ypt-yzt);
  background(128);
  stroke(0);
  strokeWeight(zoom);
  for(int i = 0; i < x; i++){line(((i*width/x)+cx)*zoom,cy*zoom,((i*width/x)+cx)*zoom,(height+cy)*zoom);}
  for(int i = 0; i < y; i++){line(cx*zoom,((i*height/y)+cy)*zoom,(width+cx)*zoom,((i*height/y)+cy)*zoom);}
  fill(#ff0000);rect((cx+mx*10)*zoom,(cy+mx*10)*zoom,mx*zoom,mx*zoom);
  fill(#ffff00);rect((cx+mx*49)*zoom,(cy+mx*10)*zoom,mx*zoom,mx*zoom);
  fill(#00ff00);rect((cx+mx*10)*zoom,(cy+mx*49)*zoom,mx*zoom,mx*zoom);
  fill(#0000ff);rect((cx+mx*49)*zoom,(cy+mx*49)*zoom,mx*zoom,mx*zoom);
  fill(#abcdef);ellipse((cx+width/2)*zoom,(cy+height/2)*zoom,width/8*zoom,height/8*zoom);
  textSize(4*mx*zoom);
  fill(0);
  textAlign(CENTER);
  text("CX CY Floats",(cx+width/2)*zoom,(cy+height/2)*zoom);
}

void scaletranslate(float x, float y) {
  scale(zoom);
  translate(xpt-xzt,ypt-yzt);
  background(128);
  stroke(0);
  strokeWeight(1.0);
  for(int i = 0; i < x; i++){line(i*width/x,0,i*width/x,height);}
  for(int i = 0; i < y; i++){line(0,i*height/y,width,i*height/y);}
  fill(#ff0000);rect(mx*10,mx*10,mx,mx);
  fill(#ffff00);rect(mx*49,mx*10,mx,mx);
  fill(#00ff00);rect(mx*10,mx*49,mx,mx);
  fill(#0000ff);rect(mx*49,mx*49,mx,mx);
  fill(#abcdef);ellipse(width/2,height/2,width/8,height/8);
  textSize(4*mx);
  fill(0);
  textAlign(CENTER);
  text("Scale Translate",width/2,height/2);
}

void setup()
{
  size(1000, 600);
  noLoop();
}

void draw()
{
  scale(width/2, height/4);
  noFill();
  rect(0,0,1,1);
}

I'm expecting a unfilled rectange taking half the width and quarter the height but I'm seeing a filled rectange with strange boundaries.

Is there any reason or is this a bug ? The same happens with shapes.

"translate() with x, y, and z coordinates can only be used with a renderer that supports 3D, such as P3D. Use a version without a z-coordinate instead."

But, I cannot find a translate() w/ a z-coordinate and i wouldn't need one.

Also the sketch is running, so processing won't point to the line w/ this problem. Is there way to find this line in a compiling report or something?

I'm completely new to processing, seems a magnificent tool!

But I have a problem which in the end comes to this prototype example:

size (600,600);
translate(width/2, height/2);
background(255);
stroke(0);
noFill();

//does work
beginShape();
vertex(0,0);
vertex(20,0);
vertex(20,20);
vertex(0,20);
vertex(0,0);
endShape();

//doesn't work, no square drawn
beginShape();
vertex(0,0);
translate(50,0);
vertex(0,0);
translate(0,50);
vertex(0,0);
translate(-50,0);
vertex(0,0);
translate(0,-50);
vertex(0,0);
endShape();

It would be nice for my further application if the second square would be drawn correctly as well (I know, this example is stupid, but it's the easiest way to explain my problem I think).

Does translate not work together with vertex or beginshape/endshape?

Thanks a lot for your help!

Martin

To be clear, I already know how to achieve a sketch-wide translation effect (see below). What I want to know if there are ways to translate once efficiently (i.e. without constant push-pop-ing) and clearly (e.g. defining a setup translation in setup() or somewhere else outside the draw() loop.).

So, given this sketch of an upper-left rectangle:

void draw(){
  rect(0,0,10,10);
}

...I want to shift everything once, then program the sketch within the translated frame of reference. The translate() documentation says "If translate() is called within draw(), the transformation is reset when the loop begins again." -- which implied to me that calling translate() from before draw in setup() would not reset the translation. That approach does not appear to work, however:

void setup(){
  //// THIS DOES NOT WORK
  translate(20,20);
}
void draw(){
  rect(0,0,10,10);
}

I'm not sure why it doesn't work. My best guess is that setup's translate is cleared at the end of the first draw loop. I also tried a setup() with translate() followed by a single pushMatrix() -- this doesn't work either, perhaps because the end of the draw loop clears the entire matrix stack.

The common working example I see is to push-and-pop every single draw loop, like this:

void draw(){
 pushMatrix();
   translate(20,20);
   rect(0,0,10,10);
 popMatrix();
}

That creates the desired effect, but it pushes-and-pops n times a second to no purpose -- I just want to setup the translation once.

I've also seen some examples of using pushMatrix() from setup(), then using an inverted popMatrix()/pushMatrix() loop to retrieve it in the draw (e.g. for recording cumulative translations), like this:

void setup(){
  translate(20,20);
  pushMatrix();
}
void draw(){
  popMatrix();
  rect(0,0,10,10);
  pushMatrix();
}

...and, like the previous example, that creates the desired effect, but again it pushes-and-pops n times a second for no reason.

Are there other ways to define a one-time translation? Any suggestions or feedback would be appreciated!

PImage bird;
float x,y;
float rot;

void setup(){
size(500,500);
bird= loadImage("bird.png");
x= 100;
y=100;
rot =0;
}
void draw(){
  background(255);
  pushMatrix();

  translate(x+bird.width/2,y+bird.height/2);
      rotate(rot);

  translate(-bird.width/2,-bird.height/2);
image(bird,0,0);

popMatrix();
rot = rot+0.1;

}

void draw() { if (keys[2]) { tankRotate1-=tankRSpeed1; } if(keys[3]) { tankRotate1+=tankRSpeed1; } imageMode(CENTER); pushMatrix(); translate(tankX1, tankY1); rotate(radians(tankRotate1)); image(redTnak, 0, 0); popMatrix(); }

Let me know if more code is needed. I appreciate any help that I can get!

Is there a logical solution I don't think about right now?

I wanted to avoid using angles, but maybe that's the way. Or polygons built from overlapping triangles.

This what I have now:

Polygon Polygon1;

void setup() {
  size(600, 600);
  Polygon1 = new Polygon();
    background(204, 100, 30);
  Polygon1.display();
}

class Polygon {
  int numbercorners= int(random(3, 8));
  float xpos = 300;
  float ypos = 300;

  Polygon() {
  }

  void display() {
    println(numbercorners);
    beginShape();
    float endcornerx=random(-40, +40);
    float endcornery=random(-40, +40);    
    vertex(xpos+endcornerx, ypos+endcornery);   
    for (int i = 0; i < numbercorners-1; i++) {    
      vertex(xpos+random(-40, +40), ypos+random(-40, +40));
    }
    vertex(xpos+endcornerx, ypos+endcornery);  
    endShape();
  }
}