var x = 1;y = 1;

​

function setup() {

  createCanvas(500  , 500);

  stroke(47, 97, 92, 10);

  sliderSetup()

  noLoop()

}

​

function draw() {

  for (var i = 0; i < 500000; i++) {

    var oldx = x;

    var oldy = y;

    x = sin(a1 * oldx) * cos(a1 * oldy) - sin(a2 * oldx);

    y = cos(a3 * oldx) - cos(a3 * oldx) * sin(a4 * oldy);

    var scalex = map(x, -2, 2, 0, width);

    var scaley = map(y, -2, 2, 0, height);

    point(scalex, scaley);

  }

}

​

function sliderSetup() {

  // create sliders

  a1Slider = createSlider(-6, -4, a1, 0.01);

  a2Slider = createSlider(-3, 4, a2, 0.01);

  a3Slider = createSlider(-5, 5, a3, 0.01);

  a4Slider = createSlider(1.5, 5, a4, 0.01);

  a1Slider.input(sliderChange);

  a2Slider.input(sliderChange);

  a3Slider.input(sliderChange);

  a4Slider.input(sliderChange);

  valueDisplayer1 = createP()

  valueDisplayer1.position(10, height - 0)

  valueDisplayer2 = createP()

  valueDisplayer2.position(140, height - 0)

  valueDisplayer3 = createP()

  valueDisplayer3.position(280, height - 0)

  valueDisplayer4 = createP()

  valueDisplayer4.position(420, height - 0)

  valueDisplayer1.html('a1 =  ' + a1Slider.value())

  valueDisplayer2.html('a2 =  ' + a2Slider.value())

  valueDisplayer3.html('a3 =  ' + a3Slider.value())

  valueDisplayer4.html('a4 =  ' + a4Slider.value())

  function sliderChange() {

    a1 = a1Slider.value();

    a2 = a2Slider.value();

    a3 = a3Slider.value();

    a4 = a4Slider.value();

    valueDisplayer1.html('a1 =  ' + a1Slider.value())

    valueDisplayer2.html('a2 =  ' + a2Slider.value())

    valueDisplayer3.html('a3 =  ' + a3Slider.value())

    valueDisplayer4.html('a4 =  ' + a4Slider.value())

    background(255);

    draw()

  }

​

}