図形が大小するスライダー

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Mouse：０１</title>

</head>
<body>

<input type="range" min="1" max="255" id="a" value="100">
<input type="range" min="1" max="255" id="b" value="100">
<input type="range" min="1" max="255" id="c" value="100">
<input type="text" id="txt">
  

  <script src="js/p5.min.js"></script>

  <!-- 2.以下にsetup関数とdrow関数を定義 -->
  <script>
    //関数定義
    function setup() {
        createCanvas(640,480);
        background(200);
        frameRate(10);
    }
    //関数定義
    function draw() {
        
        var a = document.getElementById("a").value;
        var b = document.getElementById("b").value;
        var c = document.getElementById("c").value;
        var txt = document.getElementById("txt").value;

        
        textSize(30);
        text(txt,mouseX,mouseY);
        noStroke();
        
        fill(random(200,255),random(200,255),random(200,255),150);
        
        ellipse(random(width),random(height),mouseX,mouseX);
        
        fill(a,b,c,50);
        rect(0,0,width,height);
        fill(a,b,c);
        
 
        textSize(mouseX);
    }
      
      
      
        </script>
</body>

</html>