var d = 0;

var nSlider;

var dSlider;

var step = 0;

var pingPong;

​

function setup() { 

  createCanvas(400, 400).addClass('sketch');

  $('.sketch').css({

    'position': 'absolute',

    'top': $(document).height()/2 - height/2,

    'left':  $(document).width()/2 - width /2,

    'border-radius': '5pt'

  });

  nSlider = createSlider(0, 10, 1, 1);

  dSlider = createSlider(0, 10, 7, 1);

}

​

function draw() { 

  background(250, 130, 180);

  translate(width/2, height/2);

  stroke(255);

  strokeWeight(2);

  noFill();

  step += 0.06;

  n = map(sin(step), -1, 1, nSlider.value(), nSlider.value());

  d = map(sin(step), -1, 1, dSlider.value(), dSlider.value());

  if (step > 200) step = 0;

  var scale = 70;

  beginShape();

  for (var i = 0; i < d * TAU; i += 0.02) {

    var r = cos((n/d) * i) + sin(step);

    var x = r * cos(i);

    var y = r * sin(i);

    vertex(scale * x, scale * y);

  }

  endShape(CLOSE);

  line(0, 200, 0, -200);

  line(200, 0, -200, 0);

}