block by aaizemberg 43733cd4543379c7e610

input range slider (html5 & p5js)

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>input range slider (html5 & p5js)</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.8/p5.min.js"></script>
  <script src="sketch.js"></script>
</head>
<body>
  <input type="range" id="slider" name="slider" min="0" max="100">
</body>
</html>

sketch.js

var slider;

function setup() {
  createCanvas(960, 480);
  background(0);
  slider = document.getElementById("slider");
}

function draw() {
  for (var i=0; i < slider.value; i++) {
    fill(Math.random() * 255, Math.random() * 255, Math.random() * 255);  
    ellipse(Math.random() * 960, Math.random() * 500, Math.random() * 50, Math.random() * 50);
  }
}