Processing Rotating inky circles

2015-08-13 [EverydaySketch]

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

/*
 title: Rotating circles
 date: 2015-08-13
 */
int num = 20; //Число объектов
int maxFrames = 90; // Максимальное число кадров за один вызов draw();
float angle;
float t;

void setup() {
  size(800, 600);
  smooth(6);
}

void draw() {
  fill(250, 250, 250, 5);
  rect(0, 0, width, height);
  noStroke();

  t = (float)frameCount/maxFrames; // Кадр#n из макс. числа кадров
  angle = TAU * t; // угол зависит от текущего кадра
  translate(width/2, height/2);
  rotate(angle/num); //вращаем в зависимости от величины угла и числа объектов

  for (int i = 1; i < num+1; i++) {
    float offset = TAU/num * i; // интервал между объектами? Отступ от текущего объекта
    fill(0, 200, 255, 10);
    rotate(offset);

    //Окружность 1 (ВНЕШНЯЯ)
    float x = 150; //расстояние от центра до точки x на внешней окружности 
    float size = map(sin(angle + offset), -1, 1, 5, 25); //размер объекта зависит от угла, интервала
    ellipse(x, 0, size, size); //Начальный размер объекта на внешней окружности
    ellipse(x, 0, size*0.6, size*0.6); //Объект увеличивается при перемещении


    //Окружность 2 (ВНУТРЕННЯЯ)
    float x2 = 90;//расстояние от центра до точки x на внутренней окружности
    float size2 = map(sin(-angle + offset), -1, 1, 5, 20); //размер объекта на внутренней окружности
    ellipse(x2, 0, size2, size2); //Начальный размер объекта на внутр. окруж.
    ellipse(x2, 0, size2*0.5, size2*0.5); //Увеличение при перемещении
  }
}