Generative Art: Spiral

Source

The Div IDs

To specify where the parts of the sketch go I added some div tags to the HTML so I'm going to create some javascript constants with the div IDs to make it easier to keep track of them.

The Sketch Div

This is the ID for the div where the main sketch will go, it gets passed to the p5 constructor, along with the sketch definition, to create the the P5 instance.

const SPIRAL_DIV = "spiral-0a168ba9";

The Slider Divs

I'm going to add some sliders to make it easier to adjust some of the parameters and see how that affects the sketch. These are the IDs of the div tags where I'm going to put the sliders to change some of the sketch values. The angle and radius sliders will set how much the angle and radius will change as the circle is drawn. If, for example, the angle slider is set to 5, then every point that's added will be rotated five degrees from the previous point, and if the radius is set to 5, then the radius will grow by 5 every time a point is added.

The circle slider is a little different in that it sets the diameter for the circles that I'm drawing to create the spiral, so it's just an aesthetic setting.

const SPIRAL_ANGLE_SLIDER = "angle-slider-0a168ba9";
const SPIRAL_RADIUS_SLIDER = "radius-slider-0a168ba9";
const SPIRAL_CIRCLE_SLIDER = "circle-slider-0a168ba9";

Text Divs

I also created some div tags that I'll put some text into to show the current value of each of the sliders.

const SPIRAL_ANGLE_TEXT = "angle-text-0a168ba9";
const SPIRAL_RADIUS_TEXT = "radius-text-0a168ba9";
const SPIRAL_CIRCLE_TEXT = "circle-text-0a168ba9";

The Slider Settings

The Validator

This is used by the settings classes to try and see if I'm passing in valid arguments.

const VALIDATOR = new Validator(document);

Angle Slider

The values used to create the angle-increment slider.

const ANGLE_SLIDER = new SliderSettings(
  0,
  40,
  5,
  0,
  SPIRAL_ANGLE_SLIDER,
  VALIDATOR
);

const ANGLE_CAPTION = new CaptionSettings(
  "Angle Increment",
  2,
  SPIRAL_ANGLE_TEXT,
  VALIDATOR
);

ANGLE_SLIDER.check_rep();
ANGLE_CAPTION.check_rep();

Radius Slider

The values used to create the radius increment slider.

const RADIUS_SLIDER = new SliderSettings(
  0,
  20,
  1,
  0,
  SPIRAL_RADIUS_SLIDER,
  VALIDATOR
);

const RADIUS_CAPTION = new CaptionSettings(
  "Radius Increment",
  2,
  SPIRAL_RADIUS_TEXT,
  VALIDATOR
);

RADIUS_SLIDER.check_rep();
RADIUS_CAPTION.check_rep();

Circle Slider

The values used to create the circle diameter slider.

const CIRCLE_SLIDER = new SliderSettings(
  1,
  100,
  1,
  0,
  SPIRAL_CIRCLE_SLIDER,
  VALIDATOR
);

const CIRCLE_CAPTION = new CaptionSettings(
  "Point Diameter",
  2,
  SPIRAL_CIRCLE_TEXT,
  VALIDATOR
);

CIRCLE_SLIDER.check_rep();
CIRCLE_CAPTION.check_rep();

The Spiralizer

Class Declaration

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

  // the starting values for the circles
  radius = 1;
  angle = 0;

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

The Constructor

constructor(p5, center_x, center_y, maximum_radius,
            angle_slider, radius_slider, circle_slider){
  this.p5 = p5;
  this.center_x = center_x;
  this.center_y = center_y;
  this.maximum_radius = maximum_radius;

  // the amount to move the points on the circle as they're drawn
  this.angle_increment = angle_slider;
  this.radius_increment = radius_slider;

  // the size of the circle to draw  the circles
  this.point_diameter = circle_slider;
} // constructor

The Draw Method

draw() {
  let radians, x, y;

  radians = this.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.value());


  this.radius += this.radius_increment.value();
  this.angle += this.angle_increment.value();

  if (this.radius >= this.maximum_radius) {
    this.radius = this.radius_increment.value();
  }
} // end draw

Reset

reset() {
  this.radius = this.radius_increment.value();
  this.angle = 0;
} // end reset

The Spiral Sketch

This is going to be the sketch that we pass to the P5 constructor to create the animation.

Function Declaration

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

  let spiralizer;
  let angle_slider;
  let radius_slider;
  let circle_slider;

Setup

Setup The Canvas and Drawing Settings

p5.setup = function(){
  p5.createCanvas(WIDTH, HEIGHT);
  p5.background("white");
  p5.stroke(POINT_COLOR);
  p5.fill(POINT_COLOR);

Create The Sliders

angle_slider = new Slidini(ANGLE_SLIDER, ANGLE_CAPTION, p5);  
radius_slider = new Slidini(RADIUS_SLIDER, RADIUS_CAPTION, p5);
circle_slider = new Slidini(CIRCLE_SLIDER, CIRCLE_CAPTION, p5);

Create the Spiralizer and End the Setup

spiralizer = new Spiralizer(p5, WIDTH/2, HEIGHT/2, WIDTH/2,
                            angle_slider.slider,
                            radius_slider.slider,
                            circle_slider.slider);

} // end setup

Draw

p5.draw = function() {
  spiralizer.draw();
  p5.background(255, 5);
}// end draw

Double-Clicked

p5.doubleClicked = function() {
  spiralizer.reset();
  p5.background("white");
} // end doubleClicked

The P5 Instance

To create the animation I'll create a p5 object by passing in the function from the previous section and the div ID to identify where in the page the sketch should go.

new p5(spiral_sketch, SPIRAL_DIV);

References