Blog example template

by mathiasisaksen

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fiddle</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
</head>
<body>
</body>
</html>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  overflow: hidden;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

canvas {
  display: block;
}

JavaScript

(()=>{var t={639:t=>{function e(t,e){this.pixelWidth=t,this.pixelHeight=e,this.asp=t/e,this.setFlipY(!0),this.setExtentWidth(2),this.setExtentCenter([0,0])}e.prototype.setFlipY=function(t){this.ySign=t?-1:1},e.prototype.setExtentWidth=function(t){this.width=t,this.height=t/this.asp},e.prototype.setExtentHeight=function(t){this.height=t,this.width=this.asp*t},e.prototype.setExtentSize=function(t){this.asp>1?this.setExtentWidth(t):this.setExtentHeight(t)},e.prototype.setExtentCenter=function(t){this.center=t},e.prototype._pixelToUnit=function(t,e){return[(t+.5)/this.pixelWidth,(e+.5)/this.pixelHeight]},e.prototype._unitToPixel=function(t,e){return[t*this.pixelWidth-.5,e*this.pixelHeight-.5]},e.prototype.fromPixel=function(t,e){void 0===e&&([t,e]=t);let[i,n]=this._pixelToUnit(t,e);const[o,s]=this.center;return[(i-.5)*this.width+o,(n-.5)*this.height*this.ySign+s]},e.prototype.toPixel=function(t,e){void 0===e&&([t,e]=t);const[i,n]=this.center,o=(t-i)/this.width+.5,s=(e-n)*this.ySign/this.height+.5;return this._unitToPixel(o,s)},e.prototype.getExtent=function(){const[t,e]=this.center,{width:i,height:n}=this;return[[t-i/2,t+i/2],[e-n/2,e+n/2]]},e.prototype.getPixelsPerUnit=function(){return this.pixelWidth/this.width},t.exports=e},551:(t,e,i)=>{const n=i(639),{getRNG:o}=i(87);let s,r,h,p,c,u,a,d,x,l=[0,0],g={placeholder:.5};window.addEventListener("keyup",(t=>{"s"===t.key&&function(t){const e=document.querySelector("canvas"),i=document.createElement("a");i.setAttribute("download","image.png"),i.setAttribute("href",e.toDataURL("image/png").replace("image/png","image/octet-stream")),i.click(),i.remove()}()})),t.exports={setup:function(t){[s,r]=[window.innerWidth,window.innerHeight],u=window.devicePixelRatio,h=Math.min(s,r),c=new n(s,r),c.setExtentCenter(l),c.setExtentSize(2),p=c.getPixelsPerUnit(),a=c.getExtent(),(new...