example of how to combine techniques into a cohesive scene.
xxxxxxxxxx
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js"></script>
<script src="https://d3js.org/d3-random.v1.min.js"></script>
<script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
<script language="javascript" type="text/javascript" src="z_focused_random.js"></script>
<script language="javascript" type="text/javascript" src="p5.func.js"></script>
<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>
<script type="text/javascript" src="b64.js"></script>
<script type="text/javascript" src="z_recorder.js"></script>
<script language="javascript" type="text/javascript" src="canvas_size_normal.js"></script>
<script language="javascript" type="text/javascript" src="code.js"></script>
<style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<div class="outer">
<div class="inner">
<div id="canvasContainer"></div>
</div>
</div>
</table>
<br>
<a href="sketch.html">sketch</a><br>
<a href="code.js">source code</a><br>
<a href="preview.jpg">preview image</a><br>
<a href="code_l.html">(large)</a><br>
<a href="code_xl.html">(extra large)</a><br>
</body>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.js
https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js
https://d3js.org/d3-random.v1.min.js