nick34992
4/19/2016 - 3:37 PM

P5 HTML. Using p5.js library.

P5 HTML. Using p5.js library.

<!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>