# Amorphous/Round Shapes around Polygons/Triangles

**URL:** <https://discourse.processing.org/t/amorphous-round-shapes-around-polygons-triangles/4072>\
**Category:** Coding Questions\
**Created:** [October 3, 2018, 8:13am UTC](https://discourse.processing.org/t/amorphous-round-shapes-around-polygons-triangles/4072 "2018-10-03T08:13:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![anneklappe](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@anneklappe](https://discourse.processing.org/u/anneklappe)\
**Post date:** [October 3, 2018, 8:13am UTC](https://discourse.processing.org/t/amorphous-round-shapes-around-polygons-triangles/4072/1 "2018-10-03T08:13:38Z")

</div>

Hello,

Multiple particles are flying around in my sketch. When the points are close enough to each other, lines are drawn in between. When three points are close to each other, the lines shape a triangle between the points.

```auto
            beginShape(TRIANGLES);
            vertex(Pn1.x, Pn1.y);
            vertex(Pn2.x, Pn2.y);
            vertex(Pn3.x, Pn3.y);
            endShape();

```

Now, I would like to create more round / amorphous shapes in the background of these triangles (see orange shape in the image attached).

 ![IMG_3069](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/87d8ea8729835b26bffcd179cd63f563c43afa5b.jpeg)

I have found the “curveVertex()” function but lack programming skills to make use of it. Any help?

Thanks a lot!  
Anne

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [October 3, 2018, 10:50am UTC](https://discourse.processing.org/t/amorphous-round-shapes-around-polygons-triangles/4072/2 "2018-10-03T10:50:09Z")

</div>

There is this processing library [Handy](https://www.gicentre.net/handy/), that helps you create shapes with a hand drawn look that you might find interesting. It even formed part of a scientific [paper](http://openaccess.city.ac.uk/1274/1/wood_sketchy_2012.pdf).

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [October 3, 2018, 10:52am UTC](https://discourse.processing.org/t/amorphous-round-shapes-around-polygons-triangles/4072/3 "2018-10-03T10:52:36Z")

</div>

This might help:  
[https://processing.org/examples/morph.html](https://processing.org/examples/morph.html)

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 3, 2018, 4:42pm UTC](https://discourse.processing.org/t/amorphous-round-shapes-around-polygons-triangles/4072/4 "2018-10-03T16:42:51Z")

</div>

Hi anneklappe,

It is actually quite tricky to achieve that effect because the first thing your should do, prior to drawing the outlines, is to detect your shapes.

In your drawing, it is quite simple but what if you had one more point in the middle of your triangle that was connected to all the other points? You don’t want to consider this point as part of your shape. And what about the 3 small triangles that it is forming? Do you also want to count them as shape to outline?

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [October 4, 2018, 9:31am UTC](https://discourse.processing.org/t/amorphous-round-shapes-around-polygons-triangles/4072/5 "2018-10-04T09:31:17Z")

</div>

Here is another tutorial that also may help:  
[https://processing.org/tutorials/curves/](https://processing.org/tutorials/curves/)

---

<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:** [October 12, 2018, 2:54pm UTC](https://discourse.processing.org/t/amorphous-round-shapes-around-polygons-triangles/4072/6 "2018-10-12T14:54:46Z")

</div>

> [@anneklappe](#):
>
> would like to create more round / amorphous shapes in the background of these triangles

One way of doing it might be:

1. find a center point of the triangle
2. express the three points of the triangle as PVectors relative to that center point with PVector.sub
3. increase the magnitude of the PVectors, pushing them out from the center.

Now you have a larger triangle outside your original one.

Next you need some extra points that your curves can go through – you probably want to find 1-3 points _between_ each pair of outer points. Maybe using PVector.lerp to find points between points in your outline?

Okay, now you have a bunch of points in an outline outside your triangle. Try connecting them in a curvy way – for example, start by trying a CLOSEd curvevertex…