// Based on Coding Train Sketch:

// https://editor.p5js.org/codingtrain/sketches/DHetsOfgz

​

let p;

let angleDeltaSlider;

let minRadiusSlider;

let maxRadiusSlider;

let frameRateSlider;

let alphaSlider;

​

function setup() {

  createCanvas(400, 400);

​

  textSize(24);

  p = createP("");

  angleDeltaSlider = createSlider(1, 100, 80);

  angleDeltaSlider.position(10, 10);

​

  minRadiusSlider = createSlider(1, 100, 40);

  minRadiusSlider.position(10, 40);

​

  maxRadiusSlider = createSlider(1, 100, 50);

  maxRadiusSlider.position(10, 70);

  alphaSlider = createSlider(0, 255, 150);

  alphaSlider.position(10, 100);

  frameRateSlider = createSlider(0, 40, 1);

  frameRateSlider.position(10, 130);

}

​

function drawExplosion(angleDelta, minRadius, maxRadius) {

  translate(width / 2, height / 2);

  stroke(random(["orange", "darkOrange", "red"]));

  fill(random(["red","yellow"]));

  beginShape();

  for (let angle = 0; angle <= TWO_PI; angle += angleDelta) {

    let radius = random(minRadius, maxRadius);

    let x = radius * cos(angle);

    let y = radius * sin(angle);

    vertex(x, y);

  }

  endShape(CLOSE);

}

​

function draw() {

  let angleDelta = map(angleDeltaSlider.value(), 1, 100, 0.5, 0.001);

  let minRadius = map(minRadiusSlider.value(), 1, 100, 0, width * 0.4);

  let maxRadius = map(maxRadiusSlider.value(), 1, 100, width * 0.45, width * 0.6);

​

  if (frameRateSlider.value() != 0) {

    frameRate(frameRateSlider.value());

    background(245, alphaSlider.value());

    drawExplosion(angleDelta, minRadius, maxRadius);

  }

  p.html(

    "Angle Δ: " +

      round(angleDelta, 1) +

      " Min Size: " +

      round(minRadius, 1) +

      " Max Size: " +

      round(maxRadius, 1) +

      " Alpha: " +

      alphaSlider.value()

  );

}

​