Parameterized Circular Moire

//Initialize variables

var x1;

var x2;

var x3;

var y1;

var y2;

var y3;

var diam;

var theta1;

var theta2;

var isAnimated;

var speedSlider1;

var speedSlider2;

var sizeSlider;

var ySlider1;

var ySlider2;

var colorPicker1;

var colorPicker2;

var colorPicker3;

​

function setup() {

  //Create canvas and set angle mode

  createCanvas(720,540);

  angleMode(DEGREES);

  //Set initial condition for positional variables

  x1 = 0;

  x2 = 0;

  x3 = 0;

  y1 = 0;

  y2 = 0;

  y3 = 0;

  diam = 7;

  theta1 = 0;

  theta2 = 180;

  //Create DOM objects and set initial conditions for animation on/off, size, rotation speeds, radial amplitudes, and colors

  //Checkbox status drives function toggleAnimation() to play or pause animation

  //Slider and colorPicker values feed into various equations and functions in draw() loop

  isAnimated = createCheckbox('ANIMATE',true);

  isAnimated.position(550,20);

  isAnimated.changed(toggleAnimation);

  button = createButton('SAVE IMAGE');

  button.position(20, 380);

  button.mousePressed(saver);

  sizeSlider = createSlider(0, 75, 65, 1);

  sizeSlider.position(20,20); 

  speedSlider1 = createSlider(0, 10, 2, 0.1);

  speedSlider1.position(20,60);

  speedSlider2 = createSlider(0, 10, 3, 0.1);

  speedSlider2.position(20,100);

  ySlider1 = createSlider(0, 20, 10, 0.1);

  ySlider1.position(20,140);

  ySlider2 = createSlider(0, 20, 10, 0.1);

  ySlider2.position(20,180);

  colorPicker1 = createColorPicker(color(255,0,0));

  colorPicker1.position(20,220);

  colorPicker2 = createColorPicker(color(0,255,0));

  colorPicker2.position(20,270);

  colorPicker3 = createColorPicker(color(0,0,255));

  colorPicker3.position(20,320);

  //Begin sketch in looping state

  //noLoop();

}

​

function draw() {

  //Refresh background and set noFill() for circle drawing

  background(230);

  noFill();

  //Draw circles

  //Number of circles is determined by sizeSlider.value()

  //Circles are animated using rotate() and y position offset

  //Circle stroke colors are determined using colorPicker#.value()

  for(var i = 0; i<sizeSlider.value(); i++){

    push();

    translate(400, height/2);

    push();

    stroke(colorPicker1.value());

    rotate(theta1);

    circle(x1, y1, i*diam-diam/2);

    pop();

    push();

    stroke(colorPicker2.value());

    rotate(theta2);

    circle(x2, y2, i*diam-diam/2);

    pop();

    stroke(colorPicker3.value());

    circle(x3, y3, i*diam-diam/2);

    pop();

  }

  //Draw text to describe slider and color picker functions

//  fill(0);

//  text('SIZE', sizeSlider.x, sizeSlider.y);

//  text('ROTATION SPEED 1', speedSlider1.x, speedSlider1.y);

//  text('ROTATION SPEED 2', speedSlider2.x, speedSlider2.y);

//  text('RADIAL AMPLITUDE 1', ySlider1.x, ySlider1.y);

//  text('RADIAL AMPLITUDE 2', ySlider2.x, ySlider2.y);

//  text('COLOR 1', colorPicker1.x, colorPicker1.y - 5);

//  text('COLOR 2', colorPicker2.x, colorPicker2.y - 5);

//  text('COLOR 3', colorPicker3.x, colorPicker3.y - 5);

  //Increment theta and y for rotation and positional offset animation

  //Rotational speed and y offset amplitude are determined by speedSlider#.value() and ySlider#.value()

  theta1+=sin(frameCount)*speedSlider1.value();

  theta2+=sin(frameCount)*speedSlider2.value();

  y1=sin(frameCount)*ySlider1.value();

  y2=sin(frameCount)*ySlider2.value();  

}

​

//Check checkbox status to determine whether to animate, or loop, the sketch

function toggleAnimation(){

  if(this.checked()){

    loop();

  }

  else{

  loop();

  }

}

​

function saver(){

  save('pix.jpg');

}