# Filling a vertex shape

**URL:** <https://discourse.processing.org/t/filling-a-vertex-shape/13099>\
**Category:** Coding Questions\
**Created:** [July 31, 2019, 3:00pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099 "2019-07-31T15:00:21Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 31, 2019, 3:00pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/1 "2019-07-31T15:00:21Z")

</div>

Hi im attempting to create complex shapes using a ray casting and the vertex function to fill the space that the light touches as opposed to simply drawing the lines. At the moment the code works fine but requires me to add a vertex for the mouse coordinates so the shape will fill. Is there an alternative to this.

> **[Ray Casting - OpenProcessing](https://www.openprocessing.org/sketch/741525)**
>
> Simple implementation of Ray Casting,

soz about formating (hardware constraints ATM)

```auto
void superVertex(){
  ArrayList<Line> arr = new ArrayList<Line>();
  
  for (int i=1;i<light.size()-1;i++){
    float a = light.get(i-1).line_id;
    float b = light.get(i).line_id;
    float c = light.get(i+1).line_id;
    
    if(a!=c||i==0){
    arr.add(light.get(i));
    }
  }
  if(arr.size()>0){
  arr.add(arr.get(0));
  
  }
    
   for(int i=0;i<arr.size()-1;i++){
     float x = arr.get(i).intx;
     float y = arr.get(i).inty;
     
     float x2 = arr.get(i+1).intx;
     float y2 = arr.get(i+1).inty;
     
     //stroke(255,50);
     noStroke();
     beginShape();
     fill(255,50);
     vertex(x,y);
     vertex(mouseX,mouseY);
     vertex(x2,y2);
     endShape();
   }
    
};

```

---

<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:** [July 31, 2019, 3:08pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/2 "2019-07-31T15:08:52Z")

</div>

> [@paulgoux](#):
>
> endShape();

Maybe endShape(CLOSE);

---

<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:** [July 31, 2019, 3:22pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/3 "2019-07-31T15:22:40Z")

</div>

2 points give you a line, 3 points a triangle

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 31, 2019, 4:07pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/4 "2019-07-31T16:07:22Z")

</div>

That’s my understanding too, a shape needs more than 2 vertices, however close doesn’t solve the issue.

---

<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:** [July 31, 2019, 4:10pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/5 "2019-07-31T16:10:40Z")

</div>

Can’t you make 2 additional points next to those you got?

Then you have a rectangle

---

<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:** [July 31, 2019, 4:12pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/6 "2019-07-31T16:12:26Z")

</div>

There is a fancy 3D line function that is easy to handle. (I think 1 or 2 things are not correct but it looks cool)

see: [https://github.com/Kango/Processing-snippets/blob/master/ThreeDLine/ThreeDLine.pde](https://github.com/Kango/Processing-snippets/blob/master/ThreeDLine/ThreeDLine.pde)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 31, 2019, 4:25pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/7 "2019-07-31T16:25:46Z")

</div>

Not exactly, the points are extracted from the 360 light rays cast. The rays for a shape with the static lines they are interacting with and this shape will have n sides depending on how many lines the rays have intersected. The mouse approach solves this nicely, but I’m not sure whether a whole shape is quicker to render than lots of little ones. If there’s no real speed advantage then this question is moot.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 31, 2019, 5:04pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/8 "2019-07-31T17:04:16Z")

</div>

Actually after further experimentation the mouse approach is also insufficient. It works fine providing the mouse is not going to fast, but then sometimes it will draw random triangles. I

---

<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:** [July 31, 2019, 8:32pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/9 "2019-07-31T20:32:44Z")

</div>

when you just want to have a fancy 3D effect you could calculate the light rays and store the points in an ArrayList and when you have 5 points, make a shape using vertex.

Add this to 2nd ArrayList and display it throughout.

Clear the first ArrayList after making a new shape

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 1, 2019, 8:37pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/10 "2019-08-01T20:37:00Z")

</div>

Not sure I completely understand what your suggesting. I’m creating one array at the moment, which checks to see if the line the ray is intersecting with is the different to the ray on its left and the ray on its right. if it is it becomes a point in and array in the supervertex function. I understand that a shape needs more than 2 vertices, but I don’t understand how your suggestion applies, genuinely love the feedback, just don’t understand it.

I think however i would run into the same problem i was having using 3 vertices. Note i currently have three vertices but one of them is the center point of the light. If i remove the centerpoint and utilize another ray intersection point as a vertex the shape filled looks like this.

 ![33%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f8713a7c71360e7fdb0d92888bb6f0f23b418570.jpeg) .

as opposed to this,

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/778f1207e2350664974d33d66e3afc731acb31c5.png)

the problem with my current version is it causes some “glitches” which may be due to an error in my code (I know I make a lot), but i can’t seem to identify it.

 ![35%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c79bc6887a393723e053bd2222eaac9b83030cf1.jpeg)

As you can see some of the shapes are overlapping and the light effect looses its appeal, this only happens occasionally especially, if the light has passed through one of the bounding wall, and wrapped back round.

---

<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:** [August 1, 2019, 8:43pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/11 "2019-08-01T20:43:46Z")

</div>

Here hamoid does a similar thing with random vertexes.

He‘s sorting it prior to make a shape. Bam!

> [@How to create a random convex polygon?](https://discourse.processing.org/t/how-to-create-a-random-convex-polygon/76/10):
>
> The example above was creating an array of 64 shapes. If you only need one, you don’t need that array, and you don’t need the for loop to iterate 64 times creating and drawing all shapes. You just need one I assume. You can keep the polygon function, which just returns a shape with a polygon. The following example creates and draws a polygon every time you press a key: void setup() { size(600, 600, P2D); background(255); } void draw() { } void keyPressed() { noStroke(); fill(random(2…

---

<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:** [August 1, 2019, 8:44pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/12 "2019-08-01T20:44:35Z")

</div>

Remember to use **lights();** in draw() after background() when in P3D mode

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 1, 2019, 8:59pm UTC](https://discourse.processing.org/t/filling-a-vertex-shape/13099/13 "2019-08-01T20:59:50Z")

</div>

Oh Wow, thank-you, I was over-complicating it. There was no need for multiple vertex call in the for loop, just one vertex call was needed. Face-palm.