For this week’s assignment I wanted to experiment with angularVelocity and converting polar coordinates to cartesian coordinates

https://editor.p5js.org/wallflower/full/2Ua86XSyJ

it didnt preview the link, pls click to view!

class Balls {
  constructor(x,y, orbitSize){
    this.initialPos = createVector(x, y, );
    this.pos = createVector(x,y);
    this.vel = createVector(x,y);
    this.acc = createVector(0,0);
    this.theta = -PI/2;
    this.r = 20;
    this.dt = 5;
    this.orbitSize = orbitSize
  
  }

i used initialPos to assing the first value of the starting point to be sure they all start on the same axis and then updated the pos for the current pos

theta is the angle they are starting, i used - pi/2 to make them start at the 12 o clock pos

dt is the time variable that overtime how much the angle is changing

Orbit size is calculated in the setup to be sure they all have equal distance

update(){
    this.theta += this.dt/this.orbitSize
    this.pos.x = this.initialPos.x +this.orbitSize * cos(this.theta);
    this.pos.y = this.initialPos.y +this.orbitSize * sin(this.theta);

I used the conversion method to convert polar coordinates to cartesian because p5.js uses cartesian coordinates and increased theta - angle - proportionally to the orbit size

  show(){
    
    this.h = map(this.pos.x, 0, windowWidth, 0, 360)
    this.s = map(this.pos.y, 0, windowHeight, 0, 100)
    noStroke();
    fill(this.h, this.s,100);
    circle(this.pos.x, this.pos.y, this.r);
  }

and of course mapped the hue and saturation create a visual effect