Grain example, blend

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;
    width: 100%!important;
    height: unset!important;
}

.not-selectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

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[n,i]=this._pixelToUnit(t,e);const[o,s]=this.center;return[(n-.5)*this.width+o,(i-.5)*this.height*this.ySign+s]},e.prototype.toPixel=function(t,e){void 0===e&&([t,e]=t);const[n,i]=this.center,o=(t-n)/this.width+.5,s=(e-i)*this.ySign/this.height+.5;return this._unitToPixel(o,s)},e.prototype.getExtent=function(){const[t,e]=this.center,{width:n,height:i}=this;return[[t-n/2,t+n/2],[e-i/2,e+i/2]]},e.prototype.getPixelsPerUnit=function(){return this.pixelWidth/this.width},t.exports=e},551:(t,e,n)=>{const i=n(639),{getRNG:o}=n(87);let s,a,r,h,l,d,p,c,u=[0,0];const x=["BLEND","DARKEST","LIGHTEST","DIFFERENCE","MULTIPLY","EXCLUSION","SCREEN","OVERLAY","HARD_LIGHT","SOFT_LIGHT","DODGE","BURN","ADD","NORMAL"];let g,f,m,w,E,y,M,C={fineGrained:!1,grayscale:!0,opacity:1,minValue:0,maxValue:1,color:!1,blendMode:"SOFT_LIGHT",showAllBlendModes:!1};function v(t){M=C.fineGrained?2:1,E=t.createImage(M*s,M*a);const e=E.width,n=E.height,i=o(y),r=C.minValue,h=C.maxValue,l=C.opacity,d=()=>r+(h-r)*i();E.loadPixels();for(let t=0;t<n;t++)for(let n=0;n<e;n++){const i=4*(t*e+n);let o,s,a;if(C.grayscale){const t=d();[o,s,a]=[t,t,t]}else...