let points

let num = 50

let count = 0

let angle = 160/360

let value = 180*angle

let backs = 0

let pointss

var i = 0

​

let x = 1

let y = 1

let easing = 0.5

​

function setup() {

    colorMode(HSB,100);

    points = Array(num)

    for(i = 0; i < num; i++) {

        points[i] = createVector(width/2, height/2)

    }

  frameRate(700)

  createCanvas(windowWidth, windowHeight);

}

​

//mouse

function mouseClicked() {

    count++;

    if (count%12==0) { value = 0*angle; backs = 180*angle;}

    else if (count%12 == 1){ value = 60*angle; backs = 240*angle; }

    else if (count%12 == 2) { value = 30*angle; backs = 210*angle; }

    else if (count%12 == 3){ value =300*angle; backs = 120*angle; }

    else if (count%12 == 4){ value =150*angle; backs = 330*angle; }

    else if (count%12 == 5){ value =240*angle; backs = 60*angle; }

    else if (count%12 == 6){ value =120*angle; backs = 300*angle; }

    else if (count%12 == 7){ value =270*angle; backs = 10*angle; }

    else if (count%12 == 8){ value =180*angle; backs = 360*angle; }

    else if (count%12 == 9){ value = 90*angle; backs = 270*angle; }

    else if (count%12 == 10){ value =330*angle; backs = 150*angle; }

    else if (count%12 == 11){ value =210*angle; backs = 30*angle; }

    else { value = 0*angle; backs = 180*angle; }

}

​

/*

// touch

function touchStarted(event) {

    // console.log(event, 'started')

    count++;

    if (count%12==0) { value = 0*angle; back = 180*angle;}

    else if (count%12 == 1){ value = 60*angle; back = 240*angle; }

    else if (count%12 == 2) { value = 30*angle; back = 210*angle; }

    else if (count%12 == 3){ value =300*angle; back = 120*angle; }

    else if (count%12 == 4){ value =150*angle; back = 330*angle; }

    else if (count%12 == 5){ value =240*angle; back = 60*angle; }

    else if (count%12 == 6){ value =120*angle; back = 300*angle; }

    else if (count%12 == 7){ value =270*angle; back = 10*angle; }

    else if (count%12 == 8){ value =180*angle; back = 360*angle; }

    else if (count%12 == 9){ value = 90*angle; back = 270*angle; }

    else if (count%12 == 10){ value =330*angle; back = 150*angle; }

    else if (count%12 == 11){ value =210*angle; back = 30*angle; }

    else { value = 0*angle; back = 180*angle; }

}

​

function touchMoved() {

    //

}

​

function touchEnded(event) {

    // console.log(event, 'ended')

}

​

*/

​

function draw() {

  let j = 0

  background(backs, 25, 100);

  let targetX = mouseX

  let dx = targetX - x; // change in x

  x += dx * easing;

  let targetY = mouseY

  let dy = targetY - y; // change in y

  y += dy * easing;

  let leader = createVector(targetX, targetY)

    for (j = 0; j < num; j++) {

      c = color(value, (j + 5) * 2 / 3, 85)

      fill(c); 

      noStroke()

      smooth()

      pointss = points[i]

      distance = p5.Vector.sub(leader, pointss)

      velocity = p5.Vector.mult(distance, easing)

      pointss = p5.Vector.add(velocity) // or p5.Vector.add(velocity)

      ellipse(pointss.x, pointss.y, 100, 100)

      // vector algebra -> https://p5.readthedocs.io/en/latest/tutorials/vector.html#vectors-addition

      leader = pointss

    }

}