​

function setup() {

  createCanvas(600, 600);

  dots = Array.from({length: 50}, (el, idx) => {

    return({

      speedX : random (-2, 2),

      speedY: random (-1.5, 2),

      x: random(0, 600),

      y: random(0, 600),

      sz: random(5, 50),

      col: getRandomCol(),

      activeCol: ('white'),

      clicked: false

    })

  })

}

​

function draw() {

  background('black');

  // moveDots(dots)

  // checkEdges(dots)

  beginShape()

  dots.forEach(dot => {

    moveDots(dot)

    checkEdges(dot)

    vertex(dot.x, dot.y)

    if (dot.clicked) {

      fill(dot.activeCol)

    }else{

      fill(dot.col)

    }

    circle(dot.x, dot.y, dot.sz)

    })

  stroke('white')

  noFill()

  endShape(CLOSE)

​

}

​

function mousePressed(){

  dots.forEach(dot => {

    if(dist(mouseX, mouseY, dot.x, dot.y) < dot.sz){

      dot.clicked = true

    }

  })

}

​

function mouseReleased(){

  dots.forEach(dot => {

    dot.clicked = false

    })

}

​

function mouseDragged(){

  dots.forEach(dot => {

    if(dot.clicked) {

      dot.x = mouseX

      dot.y = mouseY

    }

  })

}

​

​

function getRandomCol(){

  return [random(255), random(255), random(255)]

}

​

function moveDots(dot){

  dot.x = dot.x + dot.speedX

  dot.y = dot.y + dot.speedY

}

​

function checkEdges(dot){

  if(dot.x < 0 || dot.x > 600){

    dot.speedX = dot.speedX * -1

  }

​

  if(dot.y < 0 || dot.y > 600){

    dot.speedY = dot.speedY * -1

  }

}