Generative Art: Concentric Circles

Source

Introduction

This is a sketch that extends the Generative Art Circles post (slightly) to make concentric circles. I was going to make a spiral but realized after I wrote out the code that I had actually made concentric circles - so it's sort of a half-step from the circle to the spiral.

The Class

The ConcentricCircles class keeps track of the parameters for the circles and draws them. Here I'm declaring the class and some fields to store the parameters.

class ConcentricCircles {
  // geometry
  degrees_in_a_circle = 360;
  to_radians = (2 * Math.PI)/ this.degrees_in_a_circle;

  // the starting values for the circles
  radius = 5;
  _step = 5;

  // the center of our sketch (and the circles)
  center_x;
  center_y;

  // the size of the circle to draw  the circles
  point_diameter = 1;

  constructor(p5, center_x, center_y, maximum_radius){
    this.p5 = p5;
    this.center_x = center_x;
    this.center_y = center_y;
    this.maximum_radius = maximum_radius;
  } // constructor

The constructor takes the p5.js object and the coordinates for the center of the circles (center_x and center_y) as well as the maximum_radius - the value at which the circles have hit their limit and should turn around. This is presumably half the width of the canvas, but since the ConcentricCircles class isn't creating the canvas I thought it should be the code that creates the sketch that decides what the limit is.

The Step

The step is the amount the radius increases between each circle. I put it in a getter so that it can check if the circles are at the limits of the expected maximum (or minimum) size and thus should change direction (shrink instead of grow or vice-versa).

get step() {
  if (this.radius > (this.maximum_radius - this._step) || this.radius <= 0) {
      this._step *= -1;
    }
  return this._step
}

The Draw

The draw method is what the sketch function calls to tell the ConcentricCircles to draw a circle. This is similar to the sketch that drew a single circle except that the radius gets incremented at after the circle is drawn.

draw() {
  let radians, x, y;

  for (let angle = 0; angle < this.degrees_in_a_circle; angle += 1){
      radians = angle * this.to_radians;
      x = this.center_x + this.radius * Math.cos(radians);
      y = this.center_y + this.radius * Math.sin(radians);
      this.p5.circle(x, y, this.point_diameter);
  }

  this.radius += this.step;
}

The Sketch Function

This is the function that gets passed to p5 to execute the setup and draw methods.

Concentric Circles

After declaring the function and some constants for the canvas, it creates an instance of the ConcentricCircles class.

function concentric_circles(p5){
  // the size of the canvas and the color of the circles
  const WIDTH = 500;
  const HEIGHT = WIDTH;
  const POINT_COLOR = "RoyalBlue";

  const circles = new ConcentricCircles(p5, WIDTH/2, HEIGHT/2, WIDTH/2);

Set Up

The setup method doesn't do anything fancy, although I did have to set the frameRate to a slower speed otherwise I couldn't see the circles being animated.

p5.setup = function(){
  p5.createCanvas(WIDTH, HEIGHT);
  p5.background("white");
  p5.stroke(POINT_COLOR);
  p5.fill(POINT_COLOR);
  p5.frameRate(10);
} // end setup

Draw

The draw method defers to the ConcentricCircles.draw method to do the actual drawing of the circles, but I added a light white overlay so that the circles fade out and you can see the animation.

p5.draw = function() {
  circles.draw();
  p5.background(255, 75);
}// end draw

Passing The Sketch to p5.js

That's pretty much it for the sketch, the last thing to do is just pass the concentric_circles function to p5 along with the id for the div where the sketch should go (which I defined but don't show in the post).

new p5(concentric_circles, CONCENTRIC_CIRCLES_DIV);

The End

And that's it for drawing concentric circles, now on to spirals.