PerlinNoiseLikeBlur.html

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=5.0, user-scalable=yes" /> <script async src="https://www.googletagmanager.com/gtag/js?id=G-S72LBY47R8"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', "G-S72LBY47R8"); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PerlinNoiseLikeBlur.html - Pastebin.com</title> <link rel="shortcut icon" href="/favicon.ico" /> <meta name="description" content="Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time." /> <meta property="og:description" content="Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time." /> <meta property="fb:app_id" content="231493360234820" /> <meta property="og:title" content="PerlinNoiseLikeBlur.html - Pastebin.com" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://pastebin.com/7C5vviie" /> <meta property="og:image" content="https://pastebin.com/i/facebook.png" /> <meta property="og:site_name" content="Pastebin" /> <meta name="google-site-verification" content="jkUAIOE8owUXu8UXIhRLB9oHJsWBfOgJbZzncqHoF4A" /> <link rel="canonical" href="https://pastebin.com/7C5vviie" /> <meta name="csrf-param" content="_csrf-frontend"> <meta name="csrf-token" content="oDkN-2Z_GlEAYBN5juKsCs5VrOFtfbo-tx2WDYqcq3HqCF-DFxVAfF8nUDbpg-dbqwPtgB46yUf5St9179XAFg=="> <link href="/assets/c80611c4/css/bootstrap.min.css" rel="stylesheet"> <link href="/assets/72fc434d/dist/bootstrap-tagsinput.css" rel="stylesheet"> <link href="/themes/pastebin/css/vendors.bundle.css?30d6ece6979ee0cf5531" rel="stylesheet"> <link href="/themes/pastebin/css/app.bundle.css?30d6ece6979ee0cf5531" rel="stylesheet">  <script type="text/javascript" src="//services.vlitag.com/adv1/?q=adf050ece17b957604b4bbfc1829059f" defer="" async=""></script><script> var vitag = vitag || {};</script>  <script> vitag.smartBannerConfig= { disablePosition: "top right left", } </script> <script type="text/javascript"> if (window.location.pathname === "/") { vitag = vitag || {}; vitag.outStreamConfig = vitag.outStreamConfig || {}; vitag.outStreamConfig.enablePC = false; } </script> </head> <body class="night-auto " data-pr="" data-pa="x2xy94pJ" data-sar="1" data-abd="1" data-bd="1"> <svg style="height: 0; width: 0; position: absolute; visibility: hidden" xmlns="http://www.w3.org/2000/svg"> <symbol id="add" viewBox="0 0 1024 1024"><path fill="#ccc" d="M512 16C238 16 16 238 16 512s222 496 496 496 496-222 496-496S786 16 512 16z m288 552c0 13.2-10.8 24-24 24h-184v184c0 13.2-10.8 24-24 24h-112c-13.2 0-24-10.8-24-24v-184h-184c-13.2 0-24-10.8-24-24v-112c0-13.2 10.8-24 24-24h184v-184c0-13.2 10.8-24 24-24h112c13.2 0 24 10.8 24 24v184h184c13.2 0 24 10.8 24 24v112z"/></symbol> <symbol id="search" viewBox="0 0 512 512"><path fill="#ccc" d="M354.2,216c0-38.2-13-70.7-40-97.7c-27-27-59.6-40-97.7-40s-70.7,13-97.7,40s-40,59.6-40,97.7 s13,70.7,40,97.7s59.6,40,97.7,40s70.7-13,97.7-40C340.2,285.8,354.2,253.2,354.2,216z M511.5,472c0,10.2-3.7,19.5-12.1,27.9 c-8.4,8.4-16.8,12.1-27.9,12.1c-11.2,0-20.5-3.7-27.9-12.1L339.3,393.8c-37.2,26.1-78.2,38.2-122.9,38.2 c-29.8,0-57.7-5.6-83.8-16.8c-27-11.2-50.3-27-68.9-46.5s-34.4-42.8-46.5-68.9C6.1,272.8,0.5,244.8,0.5,216s5.6-57.7,16.8-83.8 c11.2-27,27-50.3,46.5-68.9s42.8-34.4,68.9-46.5C159.7,5.6,187.6,0,216.4,0s57.7,5.6,83.8,16.8c27,11.2,50.3,27,68.9,46.5 c18.6,19.5,34.4,42.8,46.5,68.9c11.2,27,16.8,54.9,16.8,83.8c0,44.7-13,85.6-38.2,122.9L499.4,444 C507.8,451.5,511.5,460.8,511.5,472z"/></g></symbol> </svg> <div class="wrap"> <div class="header"> <div class="container"> <div class="header__container"> <div class="header__left"> <a class="header__logo" href="/"> Pastebin </a> <div class="header__links h_1024"> <a href="/doc_api">API</a> <a href="/tools">tools</a> <a href="/faq">faq</a> </div> <a class="header__btn" href="/"> <span>paste</span> </a> <div class="header__search"> <form id="w2" class="search_form" action="https://pastebin.com/search" method="get"> <input type="text" id="q" class="search_input" name="q" maxlength="128" placeholder="Search..."> <button type="submit" class="search_btn" aria-label="Search"><svg class="icon search"><use xlink:href="#search"></use></svg></button> </form> </div> </div> <div class="header__right"> <div class="header_sign"> <a href="/login" class="btn-sign sign-in">Login</a> <a href="/signup" class="btn-sign sign-up">Sign up</a> </div> </div> </div> </div> </div> <div class="container"> <div class="content">  <div style="padding-bottom:30px; padding-top:5px;width:998px;height:290px;"> <div style="color: #999; font-size: 12px; text-align: center;">Advertisement</div> <div class="adsbyvli" data-ad-slot="vi_1282550010"></div><script>(vitag.Init = window.vitag.Init || []).push(function(){viAPItag.display("vi_1282550010")})</script> </div> <link href="/themes/pastebin/css/geshi/light/javascript.css?694707f98000ed24d865" rel="stylesheet"> <div class="post-view js-post-view"> <div class="error-summary js-rating-error hide"><ul><li></li></ul></div> <div class="details"> <div class="share h_800"> <div data-url="https://pastebin.com/7C5vviie" class="share-btn facebook js-facebook-share" title="Share on Facebook!"><span>SHARE</span></div> <div data-url="https://pastebin.com/7C5vviie" class="share-btn twitter js-twitter-share" title="Share on Twitter!"><span>TWEET</span></div> </div> <div class="user-icon"> <img src="/cache/img/11/25/7/1047605.jpg" alt="here2share"> </div> <div class="info-bar"> <div class="info-top"> <h1>PerlinNoiseLikeBlur.html</h1> </div> <div class="info-bottom"> <div class="username"> <a href="/u/here2share">here2share</a> </div> <a href="/message/compose?to=here2share" class="message" title="Send a private message to: here2share"></a> <div class="date"> <span title="Saturday 23rd of November 2024 10:40:12 AM CDT">Nov 23rd, 2024</span> </div> <div class="visits" title="Unique visits to this paste"> 157 </div> <div class="rating js-post-rating" data-key="7C5vviie" title="Rating"> 0 </div> <div class="expire" title="When this paste gets automatically deleted"> Never </div> <div class="comments-info" title="Comments"> <a href="/login?return_url=%2F7C5vviie%23add_comment">Add comment</a> </div> </div> </div> </div> <div class="page"> <div class="content__text -no-padding"> <div class="notice -post-view"> <b>Not a member of Pastebin yet?</b> <a href="/signup"><b><u>Sign Up</u></b></a>, it unlocks many cool features! </div> </div> </div> <div class="highlighted-code"> <div class="top-buttons"> <div class="left"> <a href="/archive/javascript" class="btn -small h_800">JavaScript</a> 3.00 KB <span title="Category"> | None </span> | <a class="btn -small -like" href="/login?return_url=%2F7C5vviie" title="Like" data-rating="1" data-key="7C5vviie">0</a> <a class="btn -small -dislike" href="/login?return_url=%2F7C5vviie" title="Dislike" data-rating="-1" data-key="7C5vviie">0</a> </div> <div class="right"> <a href="/raw/7C5vviie" class="btn -small">raw</a> <a href="/dl/7C5vviie" class="btn -small">download</a> <a href="/clone/7C5vviie" class="btn -small h_800">clone</a> <a href="/embed/7C5vviie" class="btn -small h_800">embed</a> <a href="/print/7C5vviie" class="btn -small h_800">print</a> <a href="/report/7C5vviie" class="btn -small">report</a> </div> </div> <div class="source javascript" style="font-size: px; line-height: px;"> <ol class="javascript"><li class="li1"><div class="de1"><span class="sy0"><!</span>DOCTYPE html<span class="sy0">></span></div></li> <li class="li1"><div class="de1"><span class="sy0"><</span>html lang<span class="sy0">=</span><span class="st0">"en"</span><span class="sy0">></span></div></li> <li class="li1"><div class="de1"><span class="sy0"><</span>head<span class="sy0">></span></div></li> <li class="li1"><div class="de1">    <span class="sy0"><</span>meta charset<span class="sy0">=</span><span class="st0">"UTF-8"</span><span class="sy0">></span></div></li> <li class="li1"><div class="de1">    <span class="sy0"><</span>meta name<span class="sy0">=</span><span class="st0">"viewport"</span> content<span class="sy0">=</span><span class="st0">"width=device-width, initial-scale=1.0"</span><span class="sy0">></span></div></li> <li class="li1"><div class="de1">    <span class="sy0"><</span>title<span class="sy0">></span>PerlinNoiseLikeBlur<span class="sy0"></</span>title<span class="sy0">></span></div></li> <li class="li1"><div class="de1">    <span class="sy0"><</span>style<span class="sy0">></span></div></li> <li class="li1"><div class="de1">        canvas <span class="br0">{</span></div></li> <li class="li1"><div class="de1">            border<span class="sy0">:</span> 1px solid black<span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="br0">}</span></div></li> <li class="li1"><div class="de1">    <span class="sy0"></</span>style<span class="sy0">></span></div></li> <li class="li1"><div class="de1"><span class="sy0"></</span>head<span class="sy0">></span></div></li> <li class="li1"><div class="de1"><span class="sy0"><</span>body<span class="sy0">></span></div></li> <li class="li1"><div class="de1">    <span class="sy0"><</span>canvas id<span class="sy0">=</span><span class="st0">"patternCanvas"</span> width<span class="sy0">=</span><span class="st0">"640"</span> height<span class="sy0">=</span><span class="st0">"640"</span><span class="sy0">></</span>canvas<span class="sy0">></span></div></li> <li class="li1"><div class="de1">    <span class="sy0"><</span>button onclick<span class="sy0">=</span><span class="st0">"createPattern()"</span><span class="sy0">></span>REGENERATE<span class="sy0"></</span>button<span class="sy0">></span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li1"><div class="de1">    <span class="sy0"><</span>script<span class="sy0">></span></div></li> <li class="li1"><div class="de1">        <span class="kw1">const</span> canvas <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'patternCanvas'</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="kw1">const</span> ctx <span class="sy0">=</span> canvas.<span class="me1">getContext</span><span class="br0">(</span><span class="st0">'2d'</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="kw1">const</span> ww <span class="sy0">=</span> canvas.<span class="me1">width</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="kw1">const</span> hh <span class="sy0">=</span> canvas.<span class="me1">height</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="kw1">const</span> p <span class="sy0">=</span> <span class="nu0">64</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="kw1">const</span> n <span class="sy0">=</span> <span class="nu0">50</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li1"><div class="de1">        <span class="kw1">function</span> createGrid<span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">const</span> grid <span class="sy0">=</span> <span class="kw1">new</span> <span class="kw4">Array</span><span class="br0">(</span>hh <span class="sy0">+</span> p<span class="br0">)</span>.<span class="me1">fill</span><span class="br0">(</span><span class="kw2">null</span><span class="br0">)</span>.<span class="me1">map</span><span class="br0">(</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">=></span> <span class="kw1">new</span> <span class="kw4">Array</span><span class="br0">(</span>ww <span class="sy0">+</span> p<span class="br0">)</span>.<span class="me1">fill</span><span class="br0">(</span><span class="nu0">255</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">for</span> <span class="br0">(</span>let y <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> y <span class="sy0"><</span> hh <span class="sy0">+</span> p<span class="sy0">;</span> y <span class="sy0">+=</span> <span class="nu0">32</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">                <span class="kw1">for</span> <span class="br0">(</span>let x <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> x <span class="sy0"><</span> ww <span class="sy0">+</span> p<span class="sy0">;</span> x <span class="sy0">+=</span> <span class="nu0">32</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">                    <span class="kw1">const</span> color <span class="sy0">=</span> <span class="kw4">Math</span>.<span class="me1">random</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">></span> <span class="nu0">0.5</span> <span class="sy0">?</span> <span class="nu0">0</span> <span class="sy0">:</span> <span class="nu0">255</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">                    <span class="kw1">for</span> <span class="br0">(</span>let i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> <span class="nu0">32</span><span class="sy0">;</span> i<span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">                        <span class="kw1">for</span> <span class="br0">(</span>let j <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> j <span class="sy0"><</span> <span class="nu0">32</span><span class="sy0">;</span> j<span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">                            grid<span class="br0">[</span>y <span class="sy0">+</span> i<span class="br0">]</span><span class="br0">[</span>x <span class="sy0">+</span> j<span class="br0">]</span> <span class="sy0">=</span> color<span class="sy0">;</span></div></li> <li class="li1"><div class="de1">                        <span class="br0">}</span></div></li> <li class="li1"><div class="de1">                    <span class="br0">}</span></div></li> <li class="li1"><div class="de1">                <span class="br0">}</span></div></li> <li class="li1"><div class="de1">            <span class="br0">}</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">return</span> grid<span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="br0">}</span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li1"><div class="de1">        <span class="kw1">function</span> displayPattern<span class="br0">(</span>grid<span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">            ctx.<span class="me1">clearRect</span><span class="br0">(</span><span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> ww<span class="sy0">,</span> hh<span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">for</span> <span class="br0">(</span>let y <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> y <span class="sy0"><</span> hh <span class="sy0">+</span> p<span class="sy0">;</span> y<span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">                <span class="kw1">for</span> <span class="br0">(</span>let x <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> x <span class="sy0"><</span> ww <span class="sy0">+</span> p<span class="sy0">;</span> x<span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">                    ctx.<span class="me1">fillStyle</span> <span class="sy0">=</span> `rgb<span class="br0">(</span>$<span class="br0">{</span>grid<span class="br0">[</span>y<span class="br0">]</span><span class="br0">[</span>x<span class="br0">]</span><span class="br0">}</span><span class="sy0">,</span> $<span class="br0">{</span>grid<span class="br0">[</span>y<span class="br0">]</span><span class="br0">[</span>x<span class="br0">]</span><span class="br0">}</span><span class="sy0">,</span> $<span class="br0">{</span>grid<span class="br0">[</span>y<span class="br0">]</span><span class="br0">[</span>x<span class="br0">]</span><span class="br0">}</span><span class="br0">)</span>`<span class="sy0">;</span></div></li> <li class="li1"><div class="de1">                    ctx.<span class="me1">fillRect</span><span class="br0">(</span>x<span class="sy0">,</span> y<span class="sy0">,</span> <span class="nu0">1</span><span class="sy0">,</span> <span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">                <span class="br0">}</span></div></li> <li class="li1"><div class="de1">            <span class="br0">}</span></div></li> <li class="li1"><div class="de1">        <span class="br0">}</span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li1"><div class="de1">        <span class="kw1">function</span> applyBlur<span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">            ctx.<span class="me1">filter</span> <span class="sy0">=</span> <span class="st0">'blur(20px)'</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            ctx.<span class="me1">drawImage</span><span class="br0">(</span>canvas<span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            ctx.<span class="me1">filter</span> <span class="sy0">=</span> <span class="st0">'none'</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="br0">}</span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li1"><div class="de1">        <span class="kw1">function</span> twoTone<span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">const</span> imageData <span class="sy0">=</span> ctx.<span class="me1">getImageData</span><span class="br0">(</span><span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> ww<span class="sy0">,</span> hh<span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">const</span> data <span class="sy0">=</span> imageData.<span class="me1">data</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">for</span> <span class="br0">(</span>let i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> data.<span class="me1">length</span><span class="sy0">;</span> i <span class="sy0">+=</span> <span class="nu0">4</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">                <span class="kw1">const</span> avg <span class="sy0">=</span> <span class="br0">(</span>data<span class="br0">[</span>i<span class="br0">]</span> <span class="sy0">+</span> data<span class="br0">[</span>i <span class="sy0">+</span> <span class="nu0">1</span><span class="br0">]</span> <span class="sy0">+</span> data<span class="br0">[</span>i <span class="sy0">+</span> <span class="nu0">2</span><span class="br0">]</span><span class="br0">)</span> <span class="sy0">/</span> <span class="nu0">3</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">                <span class="kw1">const</span> newColor <span class="sy0">=</span> avg <span class="sy0">></span> <span class="nu0">128</span> <span class="sy0">?</span> <span class="nu0">255</span> <span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">                data<span class="br0">[</span>i<span class="br0">]</span> <span class="sy0">=</span> newColor<span class="sy0">;</span></div></li> <li class="li1"><div class="de1">                data<span class="br0">[</span>i <span class="sy0">+</span> <span class="nu0">1</span><span class="br0">]</span> <span class="sy0">=</span> newColor<span class="sy0">;</span></div></li> <li class="li1"><div class="de1">                data<span class="br0">[</span>i <span class="sy0">+</span> <span class="nu0">2</span><span class="br0">]</span> <span class="sy0">=</span> newColor<span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            <span class="br0">}</span></div></li> <li class="li1"><div class="de1">            ctx.<span class="me1">putImageData</span><span class="br0">(</span>imageData<span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="br0">}</span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li1"><div class="de1">        <span class="kw1">function</span> cropAndResize<span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">const</span> croppedCanvas <span class="sy0">=</span> document.<span class="me1">createElement</span><span class="br0">(</span><span class="st0">'canvas'</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">const</span> croppedCtx <span class="sy0">=</span> croppedCanvas.<span class="me1">getContext</span><span class="br0">(</span><span class="st0">'2d'</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            croppedCanvas.<span class="me1">width</span> <span class="sy0">=</span> ww <span class="sy0">-</span> <span class="nu0">2</span> <span class="sy0">*</span> n<span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            croppedCanvas.<span class="me1">height</span> <span class="sy0">=</span> hh <span class="sy0">-</span> <span class="nu0">2</span> <span class="sy0">*</span> n<span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            croppedCtx.<span class="me1">drawImage</span><span class="br0">(</span>canvas<span class="sy0">,</span> n<span class="sy0">,</span> n<span class="sy0">,</span> ww <span class="sy0">-</span> <span class="nu0">2</span> <span class="sy0">*</span> n<span class="sy0">,</span> hh <span class="sy0">-</span> <span class="nu0">2</span> <span class="sy0">*</span> n<span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> ww <span class="sy0">-</span> <span class="nu0">2</span> <span class="sy0">*</span> n<span class="sy0">,</span> hh <span class="sy0">-</span> <span class="nu0">2</span> <span class="sy0">*</span> n<span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li1"><div class="de1">            ctx.<span class="me1">clearRect</span><span class="br0">(</span><span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> ww<span class="sy0">,</span> hh<span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            ctx.<span class="me1">drawImage</span><span class="br0">(</span>croppedCanvas<span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> ww <span class="sy0">-</span> <span class="nu0">2</span> <span class="sy0">*</span> n<span class="sy0">,</span> hh <span class="sy0">-</span> <span class="nu0">2</span> <span class="sy0">*</span> n<span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> ww<span class="sy0">,</span> hh<span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="br0">}</span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li1"><div class="de1">        <span class="kw1">function</span> createPattern<span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li> <li class="li1"><div class="de1">            <span class="kw1">const</span> grid <span class="sy0">=</span> createGrid<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            displayPattern<span class="br0">(</span>grid<span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            applyBlur<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            twoTone<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">            cropAndResize<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">        <span class="br0">}</span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li1"><div class="de1">        createPattern<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li> <li class="li1"><div class="de1">    <span class="sy0"></</span>script<span class="sy0">></span></div></li> <li class="li1"><div class="de1"><span class="sy0"></</span>body<span class="sy0">></span></div></li> <li class="li1"><div class="de1"><span class="sy0"></</span>html<span class="sy0">></span></div></li> </ol> </div> </div>  <div style="padding-bottom:10px; padding-top:10px;"> <div style="color: #999; font-size: 12px; text-align: center;">Advertisement</div> <div class="adsbyvli" style="width:970px; height:250px" data-ad-slot="vi_1282567605"></div> <script>(vitag.Init = window.vitag.Init || []).push(function () { viAPItag.display("vi_1282567605") })</script> </div> <div class="comments"> <div class="page"> <div class="content__title -no-border"> Add Comment </div> <div class="content__text -no-padding"> <div class="notice -post-view"> Please, <a href="/login?return_url=%2F7C5vviie%23add_comment"><b><u>Sign In</u></b></a> to add comment </div> </div> </div> </div> </div> <div style="clear: both;"></div>  <div style="padding-bottom:20px; padding-top:20px;"> <div style="color: #999; font-size: 12px; text-align: center;">Advertisement</div> <div class="adsbyvli" data-ad-slot="vi_1282577474" style="width: 970px; height: 90px"></div><script>(vitag.Init = window.vitag.Init || []).push(function(){viAPItag.display("vi_1282577474")})</script> </div> </div> <div class="sidebar h_1024"> <div class="sidebar__title"> <a href="/archive">Public Pastes</a> </div> <ul class="sidebar__menu"> <li> <a href="/xYrXCCnt">⭐ FREE giftcards method ON</a> <div class="details"> JavaScript | 6 min ago | 0.17 KB </div> </li> <li> <a href="/dFHfpqRS">⭐ get any gift card for FREE⭐ 2I</a> <div class="details"> JavaScript | 7 min ago | 0.17 KB </div> </li> <li> <a href="/qvu5X5RQ">Made By ZayDocs | Rivvix Team</a> <div class="details"> JavaScript | 12 min ago | 7.40 KB </div> </li> <li> <a href="/AATJ7reR">⭐ Binance Account hack QK</a> <div class="details"> JavaScript | 15 min ago | 0.17 KB </div> </li> <li> <a href="/ENiTUx8G">⭐️ EARN $500 INSTANTLY KE</a> <div class="details"> JavaScript | 15 min ago | 0.17 KB </div> </li> <li> <a href="/EgxPGZdd">⭐ get any gift card for AF</a> <div class="details"> JavaScript | 23 min ago | 0.17 KB </div> </li> <li> <a href="/zHH4NQeY">⭐️ EARN $500 INSTANTLY KE</a> <div class="details"> JavaScript | 24 min ago | 0.17 KB </div> </li> <li> <a href="/12fp4kC7">Common Elements In Two Lists</a> <div class="details"> Dart | 29 min ago | 0.85 KB </div> </li> </ul> <div class="sidebar__sticky -on">  <div style="padding-bottom:10px; padding-top:20px;"> <div style="color: #999; font-size: 12px; text-align: center;">Advertisement</div> <div class="adsbyvli" data-ad-slot="vi_1282578983" style="width: 300px; height: 600px"></div><script>(vitag.Init = window.vitag.Init || []).push(function(){viAPItag.display("vi_1282578983")})</script> </div> </div> </div> </div> </div> <div class="top-footer"> <a class="icon-link -size-24-24 -chrome" href="/tools#chrome" title="Google Chrome Extension"></a> <a class="icon-link -size-24-24 -firefox" href="/tools#firefox" title="Firefox Extension"></a> <a class="icon-link -size-24-24 -iphone" href="/tools#iphone" title="iPhone/iPad Application"></a> <a class="icon-link -size-24-24 -windows" href="/tools#windows" title="Windows Desktop Application"></a> <a class="icon-link -size-24-24 -android" href="/tools#android" title="Android Application"></a> <a class="icon-link -size-24-24 -macos" href="/tools#macos" title="MacOS X Widget"></a> <a class="icon-link -size-24-24 -opera" href="/tools#opera" title="Opera Extension"></a> <a class="icon-link -size-24-24 -unix" href="/tools#pastebincl" title="Linux Application"></a> </div> <footer class="footer"> <div class="container"> <div class="footer__container"> <div class="footer__left"> <a href="/">create new paste</a> <span class="footer__devider"> / </span> <a href="/languages">syntax languages</a> <span class="footer__devider"> / </span> <a href="/archive">archive</a> <span class="footer__devider"> / </span> <a href="/faq">faq</a> <span class="footer__devider"> / </span> <a href="/tools">tools</a> <span class="footer__devider"> / </span> <a href="/night_mode">night mode</a> <span class="footer__devider"> / </span> <a href="/doc_api">api</a> <span class="footer__devider"> / </span> <a href="/doc_scraping_api">scraping api</a> <span class="footer__devider"> / </span> <a href="/news">news</a> <span class="footer__devider"> / </span> <a href="/pro" class="pro">pro</a> <br> <a href="/doc_privacy_statement">privacy statement</a> <span class="footer__devider"> / </span> <a href="/doc_cookies_policy">cookies policy</a> <span class="footer__devider"> / </span> <a href="/doc_terms_of_service">terms of service</a><span class="footer__devider"> / </span> <a href="/doc_security_disclosure">security disclosure</a> <span class="footer__devider"> / </span> <a href="/dmca">dmca</a> <span class="footer__devider"> / </span> <a href="/report-abuse">report abuse</a> <span class="footer__devider"> / </span> <a href="/contact">contact</a> <br> <br> <span class="footer__bottom h_800"> By using Pastebin.com you agree to our <a href="/doc_cookies_policy">cookies policy</a> to enhance your experience. <br> Site design & logo © 2024 Pastebin</span> </div> <div class="footer__right h_1024"> <a class="icon-link -size-40-40 -facebook-circle" href="https://facebook.com/pastebin" rel="nofollow" title="Like us on Facebook" target="_blank"></a> <a class="icon-link -size-40-40 -twitter-circle" href="https://twitter.com/pastebin" rel="nofollow" title="Follow us on Twitter" target="_blank"></a> </div> </div> </div> </footer> <div class="popup-container"> <div class="popup-box -cookies" data-name="l2c_1"> We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the <a href="/doc_cookies_policy">Cookies Policy</a>.  <span class="cookie-button js-close-cookies">OK, I Understand</span> </div> <div class="popup-box -pro" data-name="l2c_2_pg"> <div class="pro-promo-img"> <a href="/signup" aria-label="Sign Up"> <img src="/themes/pastebin/img/hello.webp" alt=""/> </a> </div> <div class="pro-promo-text"> Not a member of Pastebin yet?<br/> <a href="/signup"><b>Sign Up</b></a>, it unlocks many cool features! </div> <div class="close js-close-pro-guest" title="Close Me"> </div> </div> </div> <span class="cd-top"></span> <script src="/assets/9ce1885/jquery.min.js"></script> <script src="/assets/f04f76b8/yii.js"></script> <script src="/assets/72fc434d/dist/bootstrap-tagsinput.js"></script> <script> const POST_EXPIRATION_NEVER = 'N'; const POST_EXPIRATION_BURN = 'B'; const POST_STATUS_PUBLIC = '0'; const POST_STATUS_UNLISTED = '1'; </script> <script src="/themes/pastebin/js/vendors.bundle.js?30d6ece6979ee0cf5531"></script> <script src="/themes/pastebin/js/app.bundle.js?30d6ece6979ee0cf5531"></script> </body> </html>

CINXE.COM

PerlinNoiseLikeBlur.html - Pastebin.com