JSFiddle - React, Tailwind, and code Playground

by dievardump

JavaScript

const center = 200;
const radius = 100;

const colors = ['#ff0202','#fffc02','#02ffe1','#cc00ff'];

const circlesOrder = [0, 1, 2, 3];
const NB_POINTS = 260;

class Circle {
  constructor(color, offset, startAngle) {
    this.color = color;
    this.offset = offset;
    this.dots = [];
    this.startAngle = startAngle;
    
    const step = (Math.PI * 2) / NB_POINTS;
    for(let i = -step; i < Math.PI * 2; i+= step) {
        this.dots.push(
            new DotOnCircle(i, radius, center, center, this.startAngle, this.offset)
        );
    }
  }
  
  update() {
    this.dots.forEach(dot => dot.update());
  }
  
  draw() {
    noFill();
    stroke(this.color);
    strokeWeight(2);
    beginShape();
    this.dots[0].draw();
    this.dots.forEach(dot => dot.draw());
    this.dots[this.dots.length - 1].draw();
    endShape();

  }
}
class DotOnCircle {
  constructor(angle, radius, centerX, centerY, offsetAngle, offset) {
    this.angle = angle;
    this.radius = radius;
    this.centerX = centerX;
    this.centerY = centerY;    
    this.offsetAngle = offsetAngle;
    
    this.offset = offset;
    this.baseX = this.x = this.radius * Math.cos(this.angle) + this.centerX;
    this.baseY = this.y = this.radius * Math.sin(this.angle) + this.centerY;
  }  
  
  update() {
    // float x = r*cos(t) + h;
    // float y = r*sin(t) + k;
    
    // keep same angle, change radius size to get new x and y
    const radius = this.radius + noise(this.baseX / 10, this.baseY / 10, this.offset) * 80;
    this.x = radius * Math.cos(this.offsetAngle + this.angle) + this.centerX;
    this.y = radius * Math.sin(this.offsetAngle + this.angle) + this.centerY;
    this.offset += 0.00001;
  }
  
  draw() {
    curveVertex(this.x, this.y);
  }
}

let circles = [];
function setup() {
  createCanvas(400, 400);
    
  colors.forEach((color, index) => circles.push(new Circle(color, 0, random(Math.PI * 2))));
  console.log(circles);
}

function draw() {
  background('rgba(255,255,255, 0.8)');
  
 ...