var angle = 0;  // initialize angle variable

var radiusX = 100; // set the distance for x-axis of ellipse

var radiusY = 100;  // set the distance for y-axis of ellipse

var centerX = 200;  // set the x-coordinate for the circle center

var centerY = 200;  // set the y-coordinate for the circle center

var speed = 0.01;   // set speed of growth for a spiral

​

// Set up sliders to change variables

var radiusXslider;

var radiusYslider;

var centerXslider;

var centerYslider;

​

function setup() {

  createCanvas(400, 400);

    background(255);

  angleMode(DEGREES);   // change the angle mode from radians to degrees

    radiusXslider = createSlider(1,200,10);

  radiusXslider.position(10,10);

  radiusXslider.style('height','8px');

  radiusYslider = createSlider(0,200,10);

  radiusYslider.position(10,30);

  radiusYslider.style('height','8px');

  centerXslider = createSlider(-5,5,0,.01);

  centerXslider.position(10,50);

  centerXslider.style('height','8px');

  centerYslider = createSlider(-5,5,0,.01);

  centerYslider.position(10,70);

  centerYslider.style('height','8px');

}

​

function draw() {

  radiusX = radiusXslider.value();

  radiusY = radiusYslider.value();

  centerX += centerXslider.value();

  centerY += centerYslider.value();

  var x = centerX + radiusX * cos(angle);

  var y = centerY + radiusY * sin(angle);

  stroke(0);

  fill(255,0,0);

  ellipse(x, y, 4);

  angle++;  // increment angle for the next frame

  // Display values of the sliders

  stroke(255);

  fill(255);

  rect(150,0,250,80);

  fill(0);

  text("radiusX = " + radiusX, 150, 20);

  text("radiusY = " + radiusY, 150, 40);

  text("centerX increment = " + centerXslider.value(), 150, 60);

  text("centerY increment = " + centerYslider.value(), 150, 80);

​

}