let currentPoint, nextPoint;

​

var w = 600;

var h = 600;  

​

// Sliders defaults

let R = 224; // R: base radius

let r = 28; // r: second radius

let p = 93; // p: length of the pen

let slider_R, slider_r, slider_p;

​

function setup() {

  canvas = createCanvas(w, h);

  background(255);

  colorMode(HSB);

  slider_R = createSlider(10, 400, R)

    .position(10, 5)

    .style("width", "400px");

  slider_r = createSlider(10, 400, r)

    .position(10, 25)

    .style("width", "400px");

  slider_p = createSlider(10, 200, p)

    .position(10, 45)

    .style("width", "400px");

​

  currentPoint = [

    w/2 + (R - r) * cos(i) + p * cos(i * (1 - r / R)),

    h/2 + (R - r) * sin(i) - p * sin(i * (1 - r / R)),

  ];

  nextPoint = null;

  createLoop({duration: 8,

              startLoop: 0,

              //framesPerSecond: 20,

              gif: true, 

              download: true,

              fileName: 'njnk.gif',

              open: true});//*/

}

​

function draw() {

/*  

  //////////////////////// The sliders

  fill(255);

  noStroke();

  rect(0, 0, 450, 90);

  R = slider_R.value();

  r = slider_r.value();

  p = slider_p.value();

  textSize(15);

  fill(0);

  text(R, 420, 20);

  text(r, 420, 40);

  text(p, 420, 60);*/

​

  //////////////////////// The spirograph

  noFill();

  strokeWeight(2);

​

  i += PI / 20;

  nextPoint = [

    w/2 + (R - r) * cos(i) + p * cos(i * (1 - r / R)),

    h/2 + (R - r) * sin(i) - p * sin(i * (1 - r / R)),

  ];

  stroke(hue, 255, 80);

  hue += 1;

  if (hue >= 360) hue = 0;

  line(currentPoint[0], currentPoint[1], nextPoint[0], nextPoint[1]);

  currentPoint = nextPoint;

}

​

function mouseReleased() {

  background(255);

}

​

window.onresize = function () {

  w = window.innerWidth;

  h = window.innerHeight;

  canvas.size(w, h);

};

​