orbiters_with_tethers.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 / 2

    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()
  }

  for (i = 0; i < numCircles; i++) {
    for (j = 0; j < numCircles; j++) {
      if (sqrt(pow((circles[i].positionX - circles[j].positionX), 2) +
          pow((circles[i].positionY - circles[j].positionY), 2)) < 55) {
        stroke(0,0,0,55-sqrt(pow((circles[i].positionX - circles[j].positionX), 2) +
          pow((circles[i].positionY - circles[j].positionY), 2)));
        line(circles[i].positionX, circles[i].positionY, circles[j].positionX, circles[j].positionY);
      }

      for (o = 0; o < circles[i].numOrbiters; o++) {
        for (k = 0; k < circles[j].numOrbiters; k++) {
          if (sqrt(pow((circles[i].orbiters[o].positionX - circles[j].orbiters[k].positionX), 2) +
              pow((circles[i].orbiters[o].positionY - circles[j].orbiters[k].positionY), 2)) < 35) {
            stroke(0,0,0,35-sqrt(pow((circles[i].orbiters[o].positionX - circles[j].orbiters[k].positionX), 2) +
              pow((circles[i].orbiters[o].positionY - circles[j].orbiters[k].positionY), 2)));
            line(circles[i].orbiters[o].positionX, circles[i].orbiters[o].positionY, circles[j].orbiters[k].positionX, circles[j].orbiters[k].positionY);
          }

        }

      }
    }
  }

}