Stars dance

script.js

function setup() {
  // uncomment this line to make the canvas the full size of the window
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(8);
  
  var imax = 50;
  
  for(var i = 0; i<imax; i++) {
    // Pour modifier le référentiel et revenir ensuite à un référentiel d'origine
    push();
      // Choix de la couleur
      // J'utilise sinus décalé trois fois pour avoir tout l'arc-en-ciel
      fill(sin((frameCount/10+i)/10)*255,
           sin((frameCount/10+i)/10 + 2*PI/3)*255,
           sin((frameCount/10+i)/10 + 4*PI/3)*255);
      // Pas de contour
      noStroke();
      // On se déplace au centre
      translate(width/2, height/2);
      // On tourne autour du centre
      rotate(frameCount/100 + i*2*PI/5);
      // On se déplace dans cette nouvelle direction
      translate(120, 0);
      // On tourne autour du nouveau point excentré
      rotate(frameCount/100 + i*2*PI/100);
      //
      translate(150, 0);
      rotate(frameCount/50 + i*2*PI/200);
      star(0, 0, sin((frameCount/10+i)/10)*10 + 12, sin((frameCount/10+i)/10)*5 + 7, 5);
    pop();
  }
}

function star(x, y, radius1, radius2, npoints) {
  var angle = TWO_PI / npoints;
  var halfAngle = angle/2.0;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius2;
    var sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>

Stars dance.markdown

Stars dance

A Pen by Murazaki on CodePen.

License.

style.css

body {
  padding: 0;
  margin: 0;
}