let vl1, vl2, vl3, vl4;

function setup() {

  createCanvas(400, 400);

  frameRate(1);

  // noStroke();

  stroke(255);

}

function mouseClicked() {

 volume = random(25, 250); 

  console.log(volume);

  noLoop();

}

​

function draw() {

  let volume = mouseX;

  background(220);

  vl1 = 0.2*volume;

  vl2 = 0.3*volume;

  vl3 = 0.3*volume;

  vl4 = 0.2*volume;

  let wd1 = random(vl1/2-10, vl1/2+10);

  let hd1 = random(vl1/2-10, vl1/2+10);

  let wd2 = random(vl2/2-10, vl2/2+10);

  let hd2 = random(vl2/2-10, vl2/2+10);

  let wd3 = random(vl3/2-10, vl3/2+10);

  let hd3 = random(vl3/2-10, vl3/2+10);

  let wd4 = random(vl4/2-10, vl4/2+10);

  let hd4 = random(vl4/2-10, vl4/2+10);

  strokeWeight(20.0);

  strokeJoin(ROUND);

  stroke(255);

  beginShape();

  vertex(width / 2 - wd4, height / 2-hd3-hd4);//x5

   vertex(width / 2 - wd3, height / 2-hd3);//x4

  vertex(width / 2 - wd2, height / 2);//x3

  vertex(width / 2 - wd1, height / 2+hd2);//x2

  vertex(width / 2 - wd4, height / 2+hd1+hd2);//x1

  vertex(width / 2 + wd4, height / 2+hd1+hd2);//x1

  vertex(width / 2 + wd1, height / 2+hd2);//x2

  vertex(width / 2 + wd2, height / 2);//x3

  vertex(width / 2 + wd3, height / 2-hd3);//x4

  vertex(width / 2 + wd4, height / 2-hd3-hd4);//x5

  endShape(CLOSE);

​

  stroke(55);

  strokeWeight(5);

    point(width / 2 - wd4, height / 2-hd3-hd4);//x5

  point(width / 2 + wd4, height / 2-hd3-hd4);//x5

  point(width / 2 - wd3, height / 2-hd3);//x4

  point(width / 2 + wd3, height / 2-hd3);//x4

  point(width / 2 - wd2, height / 2);//x3

  point(width / 2 + wd2, height / 2);//x3

  point(width / 2 - wd1, height / 2+hd2);//x2

  point(width / 2 + wd1, height / 2+hd2);//x2

  point(width / 2 - wd4, height / 2+hd1+hd2);//x1

  point(width / 2 + wd4, height / 2+hd1+hd2);//x1

}