// working off examples from https://github.com/CodingTrain/Rainbow-Code/tree/master/CodingChallenges/CC_30_phyllotaxis_p5.js and https://bl.ocks.org/jhubley/48406982f6988b626d9527d75a98b062

var particles, limit, cx, cy, goldenAngle, goldenRatio, circleRadius;

function setup() {

    // create canvas
    createCanvas(window.innerWidth, window.innerHeight);

    // initialise variables
    particles = [];
    limit = 1500;
    cx = width/2;
    cy = height/2;
    goldenRatio = (Math.sqrt(5)+1)/2 - 1;
    goldenAngle = goldenRatio * (2*Math.PI);
    circleRadius = (width * .5) - 20

    // initialise phyllotaxis object
    createPhyllotaxis();

}

function draw() {
    background(11);
    for(var i = 0; i < particles.length; i++) {
        particles[i].show();
        particles[i].update();
    }
}

function createPhyllotaxis() {

    for(var i = 1; i <= limit; i++) {
        var particleRadius = .006 * i;
        var ratio = i / limit;
        var angle = i * goldenAngle;
        var spiralRadius = ratio * circleRadius;
        var x = cx + cos(angle) * spiralRadius;
        var y = cy + sin(angle) * spiralRadius;
        particles.push(new Particle(x, y, particleRadius, "#fff"));
        noStroke();
        fill(255);
    }

}

function Particle(x, y, r, c) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.c = c;
    this.startX = x;
    this.startY = y;
    this.velX = 0;
    this.velY = 0;
    this.targetX = width/2;
    this.targetY = height/2;
    this.easing = 0.02;
}

Particle.prototype.show = function() {

    // draw circle
    fill(this.c);
    ellipse(this.x, this.y, this.r, this.r);

}

Particle.prototype.update = function() {

    var d = dist(this.x, this.y, this.targetX, this.targetY);
    
  
    var totalD = dist(this.startX, this.startY, width/2, height/2);
    this.easing = d/3500; 
  
    // move to position
    var dx = this.targetX - this.x;
    this.x += dx * this.easing;

    var dy = this.targetY - this.y;
    this.y += dy * this.easing;

    if(d < 10) {
        this.targetX = this.startX;
        this.targetY = this.startY;
    } 

    if(dist(this.x, this.y, this.startX, this.startY) < 20) {
        this.targetX = width/2;
        this.targetY = height/2;
    }

}