let twEnter = [];

let twExit = [];

let twPress = [];

let twRelease = [];

let num = 100;

let cnv;

​

function setup() {

  cnv = createCanvas(windowWidth, windowHeight);

  cnv.mouseOver(mouseEnterd);

  cnv.mouseOut(mouseExited);

  colorMode(HSB, 360, 100, 100, 100);

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

    ball[i] = {

      x: random(width),

      y: random(height),

      diameter: 5,

      col: color(180, 50, 100, 100),

    };

    twEnter[i] = gsap.to(ball[i], {

      diameter: 40,

      col: color(60, 40, 100, 60),

      duration: 1,

      ease: "sine.inOut",

      repeat: 100,

      yoyo: true,

      paused: true,

    });

    twExit[i] = gsap.to(ball[i], {

      diameter: 10,

      duration: 0.5,

      col: color(180, 50, 100, 50),

      ease: "expo.inOut",

      paused: true,

    });

    twPress[i] = gsap.to(ball[i], {

      diameter: height / 2,

      x: width / 2 + random(-height / 6, height / 6),

      y: height / 2 + random(-height / 6, height / 6),

      col: color(random(360), 100, 100, 5),

      duration: 1.0,

      ease: "expo.out",

      paused: true,

    });

    twRelease[i] = gsap.to(ball[i], {

      diameter: 0,

      x: random(width),

      y: random(height),

      col: color(random(360), 60, 100, 100),

      duration: 0.5,

      ease: "expo.out",

      paused: true,

    });

  }

}

​

function draw() {

  blendMode(BLEND);

  background(0);

  blendMode(ADD);

  noStroke();

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

    fill(ball[i].col);

    circle(ball[i].x, ball[i].y, ball[i].diameter);

  }

}

​

function twReset() {

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

    twEnter[i].pause();

    twExit[i].pause();

    twPress[i].pause();

    twRelease[i].pause();

  }

}

​

function mouseEnterd() {

  twReset();

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

    twEnter[i].restart();

  }

}

​

function mouseExited() {

  twReset();

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

    twExit[i].restart();

  }

}

​

function mousePressed() {

  twReset();

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

    twPress[i].restart();

  }

}

​

function mouseReleased() {

  twReset();

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

    twRelease[i].restart();

  }

}

​