# Lorenz Attractor from Processing to p5.js

**URL:** <https://discourse.processing.org/t/lorenz-attractor-from-processing-to-p5-js/2000>\
**Category:** Coding Questions\
**Created:** [July 23, 2018, 6:22am UTC](https://discourse.processing.org/t/lorenz-attractor-from-processing-to-p5-js/2000 "2018-07-23T06:22:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![XavierDass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/xavierdass/32/856_2.png) [@XavierDass](https://discourse.processing.org/u/XavierDass)\
**Post date:** [July 23, 2018, 6:22am UTC](https://discourse.processing.org/t/lorenz-attractor-from-processing-to-p5-js/2000/1 "2018-07-23T06:22:12Z")

</div>

I was enjoying making a little Lorenz attractor in p5.js, couldn’t figure out how to make a nice gradient, so I went searching and found @shiffman’s great example in Processing, [(here)](https://www.youtube.com/watch?v=f0lkz2gSsIk).

But I notice that p5.js does not support per-vertex stroke(), where using P3D renderer in Procesing does.

So if I’m to build roughly the same as in the video:

```auto
	beginShape();
	for (var i in vertexList) {
		stroke(col, 255, 255);
		vertex(vertexList[i][0], vertexList[i][1], vertexList[i][2]);
		col += 0.2;
		if (col > 255) {
			col = 0.0;
		}
	}
	endShape();

```

Results in a cycling of the spectrum that affects the entire shape rather than a gradient applied to each vertex.  
Any nice solutions to work around this?  
😄

EDIT: I am using the WEBGL renderer

---

<div class="post-metadata">

**Author:** ![alexr4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexr4/32/576_2.png) [@alexr4](https://discourse.processing.org/u/alexr4)\
**Post date:** [July 23, 2018, 7:30am UTC](https://discourse.processing.org/t/lorenz-attractor-from-processing-to-p5-js/2000/2 "2018-07-23T07:30:11Z")

</div>

Hi Xavier,

You could use WEBGL as renderer in order to have per-vertex color. Here a quick example : [http://alpha.editor.p5js.org/alexr4/sketches/rksQ7ZQNm](http://alpha.editor.p5js.org/alexr4/sketches/rksQ7ZQNm)

Hope this help 😉

---

<div class="post-metadata">

**Author:** ![XavierDass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/xavierdass/32/856_2.png) [@XavierDass](https://discourse.processing.org/u/XavierDass)\
**Post date:** [July 23, 2018, 7:40am UTC](https://discourse.processing.org/t/lorenz-attractor-from-processing-to-p5-js/2000/3 "2018-07-23T07:40:03Z")

</div>

Thanks for your swift response, Alex.

Unfortunately while WEBGL does support per-vertex fill, it does not appear to support per-stroke to ultimately produce an image similar to the one at the end of the linked Lorenz video.

---

<div class="post-metadata">

**Author:** ![alexr4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexr4/32/576_2.png) [@alexr4](https://discourse.processing.org/u/alexr4)\
**Post date:** [July 23, 2018, 7:51am UTC](https://discourse.processing.org/t/lorenz-attractor-from-processing-to-p5-js/2000/4 "2018-07-23T07:51:44Z")

</div>

You can draw a line mesh instead of using stroke line. In this case you will be able to apply per vertex color.  
The cons of this methods is the number of vertex which can slow down the execution of the program.  
The pros is you will be able to change the thickness of the line accross the mesh (and also per vertex shading & color)

Here a great ressources for drawing smooth line as mesh :

- 8th posts from Paul Houx has great explanation on drawing smooth thick line as mesh : [https://forum.libcinder.org/topic/smooth-thick-lines-using-geometry-shader](https://forum.libcinder.org/topic/smooth-thick-lines-using-geometry-shader)
- Another simpler way without using tangent : [http://ciechanowski.me/blog/2014/02/18/drawing-bezier-curves/](http://ciechanowski.me/blog/2014/02/18/drawing-bezier-curves/)
- Another explanation by Matt DesLauriers : [https://mattdesl.svbtle.com/drawing-lines-is-hard](https://mattdesl.svbtle.com/drawing-lines-is-hard)

---

<div class="post-metadata">

**Author:** ![XavierDass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/xavierdass/32/856_2.png) [@XavierDass](https://discourse.processing.org/u/XavierDass)\
**Post date:** [July 23, 2018, 8:33am UTC](https://discourse.processing.org/t/lorenz-attractor-from-processing-to-p5-js/2000/5 "2018-07-23T08:33:28Z")

</div>

Nice, I will have to do some study as that is a little out of the scope of my little project here. Not sure how I’d implement it, to be honest.

I’ll have to think about it! 🙂

---

<div class="post-metadata">

**Author:** ![alexr4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexr4/32/576_2.png) [@alexr4](https://discourse.processing.org/u/alexr4)\
**Post date:** [July 23, 2018, 8:52am UTC](https://discourse.processing.org/t/lorenz-attractor-from-processing-to-p5-js/2000/6 "2018-07-23T08:52:46Z")

</div>

P5.js can be tricky when using WEBGL renderer and seems sometime buggy when using complexe mesh.  
However here is a simple implementation (maybe not the best for performance but it works 😉 ):

[http://alpha.editor.p5js.org/alexr4/sketches/SkzhtWXEX](http://alpha.editor.p5js.org/alexr4/sketches/SkzhtWXEX)