Phyllotaxis in p5.js - rectangles!
I used Jason Davies' D3.js example and Jim Bumgardner's Processing sketch for reference.
Last active
June 29, 2016 21:14
-
-
Save jhubley/88a52b7945c77a00ff32d98046357338 to your computer and use it in GitHub Desktop.
Phyllotaxis in p5.js with rectangles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Phyllotaxis with rectangles</title> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> | |
| <script> | |
| var w = 500, h = 500; | |
| var cx = 500; | |
| var cy = 0; | |
| var circles = 2500; | |
| var golden_ratio = (Math.sqrt(5)+1)/2 - 1; | |
| var golden_angle = golden_ratio * (2* Math.PI); | |
| var circle_rad = (w * .9)-20; | |
| function setup(){ | |
| createCanvas(w,h); | |
| } | |
| function draw(){ | |
| background('#333'); | |
| rotate(45); | |
| translate(-165,-90); | |
| for (var i = 1; i <= circles; ++i) { | |
| var ratio = i / circles; | |
| var angle = i * golden_angle; | |
| var spiral_rad = ratio * circle_rad; | |
| var x = cx + cos(angle) * spiral_rad; | |
| var y = cy + sin(angle) * spiral_rad; | |
| rect(x, y, .009 * i, .009 * i, 1, 1, 1, 0); | |
| noStroke(); | |
| if (i < 800){fill('#a6cf02');} | |
| else if (i < 1300){fill('#4ba41a');} | |
| else {fill(34,153,70);} | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment