Lorenz Attractor from Processing to p5.js

p5.js Coding Questions
1

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).

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:

	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?
:smile:

EDIT: I am using the WEBGL renderer

2

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

Hope this help :wink:

1 Like
3

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.

4

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 :

1 Like
5

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! :slightly_smiling_face:

6

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 :wink: ):

http://alpha.editor.p5js.org/alexr4/sketches/SkzhtWXEX

1 Like