Example with UIBooster and Processing

test.pde

import uibooster.*;
import uibooster.model.*;
import nice.palettes.*;

FilledForm form;
ColorPalette palette;

int resolution = 360;
float rad;
float x = 1;
float y = 1;

float t = 0; // time passed
float tChange = .02; // how quick time flies

float nVal; // noise value
float nInt = 1; // noise intensity
float nAmp = 1; // noise amplitude

void setup() {
  size(540, 540);
  background(0);
  
  palette = new ColorPalette(this);
  palette.getPalette(int(random(100)));
  
  form = new UiBooster()
    .createForm("Your settings")
    .addSlider("Resolution", 0, 360, 250, 50, 1)
    .addSlider("Noise Intensity", 0, width, 0, 100, 1)
    .addSlider("Noise Amount", 0, height, 0, 100, 1)
    .run();
  
  stroke(255);
  pixelDensity(2);
  noiseDetail(8);
  rad = width/2;
  noFill();
}

void draw() {
  resolution = form.getByIndex(0).asInt();
  nInt = map(form.getByIndex(1).asInt(), 0, width, 0.1, 30);
  nAmp = map(form.getByIndex(1).asInt(), 0, height, 0.0, 1.0);
}

void mousePressed() {
  drawShape();
}

void keyPressed() {
  if(key == 's') {
    saveFrame("square-######.png");
  }
}

void drawShape() {
  background(0, 51, 255);
  translate(width/2, height/2);
  //nInt = 0.4;
  //nAmp = 0.5;
  for (int j = 10; j < rad; j += 2) {
    //stroke(palette.colors[round(map(j, 10, rad, 0, 4))], map(j, 10, rad, 0, 255));
    stroke(255, map(j, 10, rad, 0, 255));
    beginShape();
    for (float a = 0; a <= TWO_PI; a += TWO_PI/resolution) {
      nVal = map(noise(cos(a)*nInt, sin(a)*nInt, t ), 0.0, 1.0, nAmp, 1.0); // map noise value to match the amplitude

      x = cos(a)* j * nVal;
      y = sin(a)* j * nVal;
      curveVertex(x, y);
    }
    endShape(CLOSE);

    t += tChange;
  }
  t += 1000;
}