Phyllotaxis pattern

Resources
1

Hi community!
Just a short post about how to set points in formation of phyllotaxis.

https://jsfiddle.net/prisoner849/ocgyvahf/

Phyllotaxis

var scale = 5;
var points = [];
var MAX_POINTS = 500;
var colors = [];
var color1 = new THREE.Color(0xff0000);
var color2 = new THREE.Color(0xff00ff);
var c = new THREE.Color();

for (let i = 1; i <= MAX_POINTS; i++) {
  let a = i * 2.39996;
  let x = Math.cos(a);
  let y = Math.sin(a);
  let grad = i / MAX_POINTS;
  points.push(new THREE.Vector2(x, y).multiplyScalar(scale * grad));
  c.copy(color1).lerp(color2, grad);
  colors.push(c.r, c.g, c.b);
}

var geom = new THREE.BufferGeometry().setFromPoints(points);
geom.setAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3));
var mat = new THREE.PointsMaterial({
  size: 0.25,
  vertexColors: THREE.VertexColors
});
var p = new THREE.Points(geom, mat);
scene.add(p);
11 Likes
2

Pretty :sunflower:

1 Like
3

@Fyrestar Thanks :sunflower::beers:
I was working on a scene (just for fun as usual) and found this pattern very helpful with distributing objects around a certain point.

3 Likes