# Creating animated Triangle Patterns

**URL:** https://discourse.processing.org/t/creating-animated-triangle-patterns/6702
**Category:** Libraries
**Created:** [December 17, 2018, 1:20pm UTC](https://discourse.processing.org/t/creating-animated-triangle-patterns/6702 "2018-12-17T13:20:57Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mmrpl](https://avatars.discourse-cdn.com/v4/letter/m/ecae2f/32.png) [@mmrpl](https://discourse.processing.org/u/mmrpl)
#### Post date: [December 17, 2018, 1:20pm UTC](https://discourse.processing.org/t/creating-animated-triangle-patterns/6702/1 "2018-12-17T13:20:57Z")

</div>

Hi there,

I’d like to create a loop animation of a triangle mesh or pattern - [like this](https://www.videoblocks.com/video/triangulation-pattern-low-poly-light-blue-triangle-mesh-background-loop-animation-hzqlhqgdfjdnkhbs6). I started looking through toxiclibs and voronoi in general. My problem though is that I don’t really know where to start and what’s already available (libraries or code snippets).

My plan so far: each triangle should be animatable (merely the color), as in the example above. Thus I would have to create a class with triangle objects and some animation. Since its a mesh, neighboring triangles share at least one coordinate which is where I struggle.

Any ideas, tipps or snippets on how to tackle this?

Best,  
Dennis

---

<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: [December 17, 2018, 2:00pm UTC](https://discourse.processing.org/t/creating-animated-triangle-patterns/6702/2 "2018-12-17T14:00:21Z")

</div>

i never try a mesh like that,  
but i play  
-a- mouse over triangle  
-b- triangle array

- -start with 2 points
- -every new point creates a triangle ( using the 2 prior )
- -for starting a new strip must start again with 2 points

-c- as a class with 3 PVector i used one color ( and a count number)  
-d- i try a color editor ( via key and mouseWheel )  
you might take a look [here](http://kll.engineering-news.org/kllfusion01/downloads/triangle_mouse_over_4.zip)

---

<div class="post-metadata">

### Author: ![mmrpl](https://avatars.discourse-cdn.com/v4/letter/m/ecae2f/32.png) [@mmrpl](https://discourse.processing.org/u/mmrpl)
#### Post date: [December 18, 2018, 7:26am UTC](https://discourse.processing.org/t/creating-animated-triangle-patterns/6702/3 "2018-12-18T07:26:17Z")

</div>

Thank you, I’ll take a look at your example!

---

<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: [December 19, 2018, 9:10pm UTC](https://discourse.processing.org/t/creating-animated-triangle-patterns/6702/4 "2018-12-19T21:10:30Z")

</div>

You may also be interested in this previous discussion – it provides a solution to triangle coloring using the Mesh library.

> [@Fill a mesh Delaunay object](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/4):
>
> Hi @BrokenCode, I’m not really familiar with Lee Byron’s “mesh” library but here is my two cents: getRegions() only work with Voronoi objects the “Triangulate” library seems more appropriate in your case You just need to: download it [here](http://n.clavaud.free.fr/processing/triangulate/triangulate-20100628.zip) import it in your sketch In setup() put all the points (PVector) you want to triangulate in an array list (let’s call it plist) call the triangulate method on that list: -\> triangles = Triangulate.triangulate(plist) display the triangles wi…

The key method is to use triangulate to get a list of triangles that you can iterate over. Then you just need to store one color per triangle, and you can change the color list to animate your rendering of the mesh.
