JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="https://gitcdn.xyz/repo/processing-js/processing-js/v1.4.8/processing.min.js"></script>
<body>
<script type="text/processing" data-processing-target="mycanvas">
  /*
  phyllotaxis.pde
  Tiago Ferreira - 2014
  http://tiagoferreira.me/projetos/phyllotaxis/
  */

  int total = 500;
  float maxRadius;
  float phi = 1.61803399;

  // slider to control the angles
  SliderVert s = new SliderVert("f", 1.5, 1.7, 30, 50, 40, 300, phi);

  // slider to control the amount of dots
  SliderVert s2 = new SliderVert("i", 10, 1000, 525, 50, 40, 300, 500);

  void setup() {
    size(600,400);
    background(240);
    // the maximum radius is 40% of the smallest dimension
    maxRadius = 0.4*(height<width ? height : width);
  }

  void draw() {
    background(240);
    stroke(0);
    fill(0);
    
    float _x, _y;
    
    // THE SPIRAL
    for(int i=0;i<total;i++){
      _x = width/2 + (map(i, 0, total, 0, maxRadius))*cos(i*phi);
      _y = height/2 + (map(i, 0, total, 0, maxRadius))*sin(i*phi);
      
      strokeWeight(map(i, 0, total, 1, 8));
      point(_x, _y);
    }
    
    // sliders
    s.update();
    s.display();
    s2.update();
    s2.display();
    
    //get the values from sliders
    phi = s.value;
    total = int(s2.value);
  }

  class SliderVert {
    float min, max, x, y, w, h, value;
    String type;
    boolean over = false;
    boolean press = false;
    boolean locked = false;
    float posY = map(value, min, max, y, h+y);
    
    SliderVert(String _type, float _min, float _max, float _x, float _y, float _w, float _h, float _def) {
      min = _min;
      max = _max; 
      x = _x;
      y = _y;
      w = _w;
      h = _h;
      value = _def;
      type = _type;
    }
    
    
    void update() {
      
      if(type == "f") {
        if(press){
          if (mouseY<y) value = map(y, y, h+y, min, max);
          else if (mouseY>y+h) value = map(y+h, y, h+y, min, max);
          else value = map(mouseY-7.5, y, h+y, min, max);
        }
    ...

CSS

* { margin:0; padding:0; }
	html, body { width:100%; height:100%; background-color:#DADADA }
	a:active { outline: none; }
	:focus { -moz-outline-style: none; }
	canvas { display:block; outline: 0; }