<!doctype html public "graphics">
<head>
<meta charset=utf-8>
<title>HTML File Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/addons/p5.dom.min.js"></script>
<!-- included DOM addon library for adding various html elements -->
<!-- paste all of this code into a text editor and saveas .html file. you're done! -->
<script>
function setup() {
createCanvas(720, 400);
}
function draw() {
background(random(0,255),random(0,255),random(0,255));
noStroke(0);
for (var i=0;i<50;i++){
var x1=random(0,width);
var y1=random(0,height);
var x2=random(0,width);
var y2=random(0,height);
var x3=random(0,width);
var y3=random(0,height);
var x4=random(0,width);
var y4=random(0,height);
fill(random(0, 255),random(0, 255),random(0, 255),random(20, 120));
arc(x1, y1, x2, y2, PI/2, PI);
arc(x3, y3, x4, y4, PI/2, PI);
rect(x1,y1,2,y2);
rect(x3,y3,x4,2);
ellipse(x1,y1,15,y2);
ellipse(x3,y3,x4,15);
}
frameRate(1);
}
</script>
<style>
body{
padding:0;margin:0;
}</style>
</head><body> </body></html>