orbiters.js

var listOfColors = ["#1c77c3","#39a9db","#40bcd8","#f39237","#d63230","#540d6e","#ee4266","#ffd23f","#f3fcf0","#1f271b"];
["#540d6e","#ee4266","#ffd23f","#f3fcf0","#1f271b"]

class Orbiter{
  constructor(cx,cy){
      this.centerX = cx
      this.centerY = cy
      
      this.positionX = 0
      this.positionY = 0
      
      this.radius = random(10, 50)
      this.speed = random(-0.05, 0.05)
      
      this.diameter = random(3, 10)
      this.angle = 0
      
      this.c = listOfColors[int(random(0, listOfColors.length))]

    }
  
    move(cx, cy){
      this.positionX = cx + this.radius * sin(this.angle)
      this.positionY = cy + this.radius * cos(this.angle)
      
      this.angle = this.angle + this.speed
    }
  
    display(cx, cy){
      noFill()
      stroke(255)
      //ellipse(cx, cy,this.radius, this.radius)
      let c = color(this.c)
      fill(c)
      noStroke()
      ellipse(this.positionX, this.positionY, this.diameter, this.diameter)
    }
}



class Circle{
    constructor(){
      this.centerX = width/2
      this.centerY = height/4
      
      this.positionX = 0
      this.positionY = 0
      
      this.radius = random(10, 250)
      this.speed = random(-0.01, 0.01)
      
      this.diameter = random(8, 25)
      this.angle = random(100)
      
      this.c = listOfColors[int(random(0, listOfColors.length))]
      
      this.numOrbiters = random(5)
      this.orbiters = []
      for(let o=0; o<this.numOrbiters;o++){
        this.orbiters.push(new Orbiter(this.positionX, this.positionY))
      }
    }
  
    move(){
      this.positionX = this.centerX + this.radius * sin(this.angle)
      this.positionY = this.centerY + this.radius * cos(this.angle)
      
      this.angle = this.angle + this.speed 
      
      for(let o=0; o<this.numOrbiters;o++){
        this.orbiters[o].move(this.positionX, this.positionY)
      }
      
      
    }
  
    display(){
      noFill()
      stroke(0)
      //ellipse(this.centerX, this.centerY, this.radius, this.radius)
      
      let c = color(this.c)
      fill(c)
      noStroke()
      ellipse(this.positionX, this.positionY, this.diameter, this.diameter)
      for(let o=0; o<this.numOrbiters;o++){
        this.orbiters[o].display(this.positionX, this.positionY)
      }
      

    }
}

function setup() { 
  createCanvas(600, 600);
}

let circles = []
let numCircles = 60

function draw() { 
  background(255);
  
  for(i=0; i<numCircles; i++){
    circles.push(new Circle())
  }
  
  for(i=0; i<numCircles; i++){
    circles[i].move()
  }
  
  for(i=0; i<numCircles; i++){
    circles[i].display()
  }
  
}