# Coordinate ranges from CreateShape (customized shape)

**URL:** <https://discourse.processing.org/t/coordinate-ranges-from-createshape-customized-shape/36306>\
**Category:** Coding Questions\
**Created:** [April 12, 2022, 5:57pm UTC](https://discourse.processing.org/t/coordinate-ranges-from-createshape-customized-shape/36306 "2022-04-12T17:57:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![DianaG](https://avatars.discourse-cdn.com/v4/letter/d/7ab992/32.png) [@DianaG](https://discourse.processing.org/u/DianaG)\
**Post date:** [April 12, 2022, 5:57pm UTC](https://discourse.processing.org/t/coordinate-ranges-from-createshape-customized-shape/36306/1 "2022-04-12T17:57:31Z")

</div>

Hello Everyone,

I am trying to recreate a basic poster with some randomness on the triangles and arcs (on key pressed).  
The range in which the shapes can move is the full length of the screen’s width and height/2. However, I would like to keep the shapes within a custom range (Blue stroke on the attached image)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/0/30aa06cfd9bb5c5ea4977c6a485ae1828d4213a0.jpeg)

My code is using the width and height range to place the shapes:

```auto
//PShape mask;

void setup() {
  size(630, 800);
  noLoop();
  //mask = createShape(ELLIPSE, width/2, height/2, 150);
}//closing setup 

void draw() {
   background(#dddddd); 

//drawing 6 arcs and triangles from origin and then translating
  for (int i= 0; i < 6; i++) {
    fill(0);
    noStroke();
    pushMatrix();
    **translate(random(width), random(height/2));**
    rotate(random(-PI/10, PI/10));
    triangle(0, 0, 50, 100, -50, 100);
    popMatrix();
    
    fill(#eeeeee);
    pushMatrix();
    **translate(random(width), random(height/2));**
    rotate(random(TWO_PI));
    arc( 0, 0, 100, 100, 0, PI+QUARTER_PI, CHORD);
    popMatrix();
  }
}//close draw function

void keyPressed() {
  redraw();
}

```

I was thinking of creating a customised shape, using createShape() and then proceeding to draw the shape with vertex. However, such variable would be a PShape, which can’t be used within the random() function.

Is it possible to draw the shape and then extract the values that I need for my range? or would I need to manually set every coordinate to create the range in which I want my shapes to appear?

Thank you !

---

<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:** [April 12, 2022, 9:33pm UTC](https://discourse.processing.org/t/coordinate-ranges-from-createshape-customized-shape/36306/2 "2022-04-12T21:33:10Z")

</div>

Hi @DianaG,

Welcome to the forum! 😉

Basically you want to do multiple things:

- Draw the polygonal blue shape which you can draw with `beginShape()`, `endShape()` and `vertex()` by having the coordinates of the polygon. You might want to store the coordinates of each vertex in an array.

- You want to randomly place a shape in the polygon which requires you to choose a random point within that polygon. To do that see a [possible implementation](https://blogs.sas.com/content/iml/2020/10/21/random-points-in-polygon.html) or this [SO thread](https://stackoverflow.com/a/19482012/11452044).

- Lastly if you don’t want your shape to intersect with the polygon you’ll need to find a way to detect intersection with the polygon and the shape. For simple shapes it’s possible for more complex shapes it can be more difficult… (this step is not mandatory since triangles can overlap and it doesn’t matter)