68 lines
12 KiB
HTML
68 lines
12 KiB
HTML
<!doctype html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=/img/icon.png type=image/png><meta name=generator content="Hugo 0.105.0"><meta property="og:title" content="trippy perlin noise"><meta property="og:description" content="Warning: contains some intensive JavaScript that might break your computer"><meta property="og:type" content="article"><meta property="og:url" content="http://toasters.rocks/trippy-perlin-noise/"><meta property="og:image" content="http://toasters.rocks/images/2019/11/perlin.png"><meta property="article:section" content><meta property="article:published_time" content="2019-11-25T18:16:14+00:00"><meta property="article:modified_time" content="2019-11-29T01:06:04+00:00"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="http://toasters.rocks/images/2019/11/perlin.png"><meta name=twitter:title content="trippy perlin noise"><meta name=twitter:description content="Warning: contains some intensive JavaScript that might break your computer"><meta name=theme-color content="#660066"><title>trippy perlin noise - toasters rocks</title><link rel=stylesheet href=http://toasters.rocks/css/toastersrocks.min.css></head><body><header><img src=/img/icon.png><h1>toasters rocks</h1></header><main><aside><nav><a href=/><i class="fas fa-home"></i>
|
||
Home</a><br><a href=http://juju2143.ca/><i class="fas fa-user"></i>
|
||
About</a><br><a href=/fr/><i class="fas fa-globe"></i>
|
||
Français</a><br><a href=https://yukiis.moe/><i class="far fa-comment"></i>
|
||
Comics</a><br><a href=https://codewalr.us/><i class="far fa-folder-open"></i>
|
||
Forums</a><br></nav><br><nav><a title="Twitter " href=https://twitter.com/juju2143><i style=color:#4da7de class="fab fa-twitter"></i>
|
||
<span style=color:#4da7de>Twitter</span></a><br><a title="Discord " href=https://discord.gg/cuZcfcF><i style=color:#7289da class="fab fa-discord"></i>
|
||
<span style=color:#7289da>Discord</span></a><br><a title="GitHub " href=https://github.com/juju2143><i style=color:#fafafa class="fab fa-github"></i>
|
||
<span style=color:#fafafa>GitHub</span></a><br><a title="Patreon " href=https://patreon.com/juju2143><i style=color:#f96854 class="fab fa-patreon"></i>
|
||
<span style=color:#f96854>Patreon</span></a><br><a title="YouTube " href=https://youtube.com/user/julosoft><i style=color:#e02a20 class="fab fa-youtube"></i>
|
||
<span style=color:#e02a20>YouTube</span></a><br><a title="YouTube 2 " href=https://youtube.com/c/juju2143><i style=color:#e02a20 class="fab fa-youtube"></i>
|
||
<span style=color:#e02a20>YouTube 2</span></a><br><a title="Twitch " href=https://twitch.tv/juju2143><i style=color:#6441a5 class="fab fa-twitch"></i>
|
||
<span style=color:#6441a5>Twitch</span></a><br><a title="Instagram " href=https://instagram.com/j.p.savard><i style=color:#d6249f class="fab fa-instagram"></i>
|
||
<span style=color:#d6249f>Instagram</span></a><br><a title="DeviantArt " href=https://deviantart.com/juju2143><i style=color:#c5d200 class="fab fa-deviantart"></i>
|
||
<span style=color:#c5d200>DeviantArt</span></a><br><a title="SoundCloud " href=https://soundcloud.com/juju2143><i style=color:#fe3801 class="fab fa-soundcloud"></i>
|
||
<span style=color:#fe3801>SoundCloud</span></a><br></nav></aside><article style=background-image:url(/images/2019/11/perlin.png)><div class=metadata style="height:calc((var(--height) - 2em) * 1 - 3.5em)"><h2 name=top>trippy perlin noise</h2><p>Warning: contains some intensive JavaScript that might break your computer</p><i class="far fa-calendar-alt"></i>
|
||
<time datetime=2019-11-25>November 25, 2019</time><br><i class="fas fa-tags"></i>
|
||
#<a class="btn btn-sm btn-outline-dark tag-btn" href=http://toasters.rocks/tags/experiments>Experiments</a>
|
||
#<a class="btn btn-sm btn-outline-dark tag-btn" href=http://toasters.rocks/tags/p5.js>p5.js</a><br><i class="fas fa-hourglass"></i> ~2 minutes</div><script src=https://unpkg.com/p5@^0.10/lib/p5.min.js></script>
|
||
<script>function setup(){var e=createCanvas(256,256);e.parent("sketch-holder"),background(0)}function draw(){var t=0,e=1,n=.005;noiseDetail(8,.65),loadPixels();for(a=0;a<3;a++){noiseSeed(a+t);for(i=0;i<width*height*4;i+=4)x=i/4%width/width*e,y=floor(i/4/width)/height*e,pixels[i+a]=noise(x,y,frameCount*n)*255}updatePixels()}</script><p> </p><div id=sketch-holder></div><p>Now that I can easily embed JavaScript on this blog, I should put here some of my experiments and weird code that does nothing, cause why not. This one is some colored Perlin noise made using p5.js, it would be pretty cool as a background for something, isn’t it?</p><p>It is quite simple using the <code>noise</code> function, one the simplest things you can do with it is <code>color = noise(x, y, time)</code> for each pixel on the canvas, usually you make it grayscale but this time I’m generating 3 of them for each color component (red, green, blue) with a different seed. It looks pretty cool, if you ask me.</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt> 1
|
||
</span><span class=lnt> 2
|
||
</span><span class=lnt> 3
|
||
</span><span class=lnt> 4
|
||
</span><span class=lnt> 5
|
||
</span><span class=lnt> 6
|
||
</span><span class=lnt> 7
|
||
</span><span class=lnt> 8
|
||
</span><span class=lnt> 9
|
||
</span><span class=lnt>10
|
||
</span><span class=lnt>11
|
||
</span><span class=lnt>12
|
||
</span><span class=lnt>13
|
||
</span><span class=lnt>14
|
||
</span><span class=lnt>15
|
||
</span><span class=lnt>16
|
||
</span><span class=lnt>17
|
||
</span><span class=lnt>18
|
||
</span><span class=lnt>19
|
||
</span><span class=lnt>20
|
||
</span><span class=lnt>21
|
||
</span><span class=lnt>22
|
||
</span><span class=lnt>23
|
||
</span><span class=lnt>24
|
||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=kd>function</span> <span class=nx>setup</span><span class=p>()</span> <span class=p>{</span>
|
||
</span></span><span class=line><span class=cl> <span class=nx>createCanvas</span><span class=p>(</span><span class=mi>256</span><span class=p>,</span> <span class=mi>256</span><span class=p>);</span>
|
||
</span></span><span class=line><span class=cl> <span class=nx>background</span><span class=p>(</span><span class=mi>0</span><span class=p>);</span>
|
||
</span></span><span class=line><span class=cl><span class=p>}</span>
|
||
</span></span><span class=line><span class=cl>
|
||
</span></span><span class=line><span class=cl><span class=kd>function</span> <span class=nx>draw</span><span class=p>()</span> <span class=p>{</span>
|
||
</span></span><span class=line><span class=cl> <span class=kd>var</span> <span class=nx>n</span> <span class=o>=</span> <span class=mi>0</span><span class=p>;</span>
|
||
</span></span><span class=line><span class=cl> <span class=kd>var</span> <span class=nx>z</span> <span class=o>=</span> <span class=mi>1</span><span class=p>;</span>
|
||
</span></span><span class=line><span class=cl> <span class=kd>var</span> <span class=nx>speed</span> <span class=o>=</span> <span class=mf>0.005</span><span class=p>;</span>
|
||
</span></span><span class=line><span class=cl>
|
||
</span></span><span class=line><span class=cl> <span class=nx>noiseDetail</span><span class=p>(</span><span class=mi>8</span><span class=p>,</span> <span class=mf>0.65</span><span class=p>);</span>
|
||
</span></span><span class=line><span class=cl> <span class=nx>loadPixels</span><span class=p>();</span>
|
||
</span></span><span class=line><span class=cl> <span class=k>for</span><span class=p>(</span><span class=nx>a</span><span class=o>=</span><span class=mi>0</span><span class=p>;</span> <span class=nx>a</span><span class=o><</span><span class=mi>3</span><span class=p>;</span> <span class=nx>a</span><span class=o>++</span><span class=p>)</span>
|
||
</span></span><span class=line><span class=cl> <span class=p>{</span>
|
||
</span></span><span class=line><span class=cl> <span class=nx>noiseSeed</span><span class=p>(</span><span class=nx>a</span><span class=o>+</span><span class=nx>n</span><span class=p>);</span>
|
||
</span></span><span class=line><span class=cl> <span class=k>for</span><span class=p>(</span><span class=nx>i</span><span class=o>=</span><span class=mi>0</span><span class=p>;</span> <span class=nx>i</span><span class=o><</span><span class=nx>width</span><span class=o>*</span><span class=nx>height</span><span class=o>*</span><span class=mi>4</span><span class=p>;</span> <span class=nx>i</span><span class=o>+=</span><span class=mi>4</span><span class=p>)</span>
|
||
</span></span><span class=line><span class=cl> <span class=p>{</span>
|
||
</span></span><span class=line><span class=cl> <span class=nx>x</span> <span class=o>=</span> <span class=p>((</span><span class=nx>i</span><span class=o>/</span><span class=mi>4</span><span class=p>)</span><span class=o>%</span><span class=nx>width</span><span class=p>)</span><span class=o>/</span><span class=nx>width</span><span class=o>*</span><span class=nx>z</span><span class=p>;</span>
|
||
</span></span><span class=line><span class=cl> <span class=nx>y</span> <span class=o>=</span> <span class=nx>floor</span><span class=p>((</span><span class=nx>i</span><span class=o>/</span><span class=mi>4</span><span class=p>)</span><span class=o>/</span><span class=nx>width</span><span class=p>)</span><span class=o>/</span><span class=nx>height</span><span class=o>*</span><span class=nx>z</span><span class=p>;</span>
|
||
</span></span><span class=line><span class=cl> <span class=nx>pixels</span><span class=p>[</span><span class=nx>i</span><span class=o>+</span><span class=nx>a</span><span class=p>]</span> <span class=o>=</span> <span class=nx>noise</span><span class=p>(</span><span class=nx>x</span><span class=p>,</span><span class=nx>y</span><span class=p>,</span><span class=nx>frameCount</span><span class=o>*</span><span class=nx>speed</span><span class=p>)</span><span class=o>*</span><span class=mi>255</span><span class=p>;</span>
|
||
</span></span><span class=line><span class=cl> <span class=p>}</span>
|
||
</span></span><span class=line><span class=cl> <span class=p>}</span>
|
||
</span></span><span class=line><span class=cl> <span class=nx>updatePixels</span><span class=p>();</span>
|
||
</span></span><span class=line><span class=cl><span class=p>}</span>
|
||
</span></span></code></pre></td></tr></table></div></div><p>p5.js code for the above canvas.</p><p>On that, I recommend <a href=http://p5js.org>p5.js</a>, or its big sister <a href=https://processing.org>Processing</a>, if you want to learn code and do some cool artsy stuff with it, I’ve been recommending to a bunch of people lately :) If you want to learn and you’re a complete beginner, there’s a series about that on <a href="https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA">The Coding Train</a> on YouTube.</p><p>(P.S.: Sorry if I break your computer by executing some intensive JavaScript on this post! The above image isn’t an image but the actual code running in your browser, and the whole calculation is a bit intensive, so I kept the canvas size rather small so it’s bearable on older computers like mine :))</p><p>Edit (26/11): Updated the post with code and some explanations.</p></article><ul class=pagination><li class=page-item><a class=previous href=http://toasters.rocks/new-blog-again/>« New blog, again</a></li><li class=page-item><a class=next href=http://toasters.rocks/commissions/>commissions »</a></li></ul><article><div id=disqus_thread></div><script type=application/javascript>window.disqus_config=function(){},function(){if(["localhost","127.0.0.1"].indexOf(window.location.hostname)!=-1){document.getElementById("disqus_thread").innerHTML="Disqus comments not available by default when the website is previewed locally.";return}var t=document,e=t.createElement("script");e.async=!0,e.src="//juju2143.disqus.com/embed.js",e.setAttribute("data-timestamp",+new Date),(t.head||t.body).appendChild(e)}()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a href=https://disqus.com class=dsq-brlink>comments powered by <span class=logo-disqus>Disqus</span></a></article></main><footer>Copyright © 2020 J.P. Savard - Theme by <a href=https://github.com/juju2143/hugo-theme-toastersrocks>J. P. Savard</a> - Powered by Hugo 0.105.0</footer></body></html> |