a39
/
toasters.rocks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
toasters.rocks/trippy-perlin-noise/index.html

336 lines
12 KiB
HTML
Raw Normal View History

Publish site
2020-11-29 03:26:44 +00:00
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/img/icon.png" type="image/png">
<meta name="generator" content="Hugo 0.78.2" />
<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: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"/>
<title>trippy perlin noise - toasters rocks</title>
<link rel="stylesheet" href="/css/styles.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="https://kit.fontawesome.com/8ced65a629.js" crossorigin="anonymous"></script>
</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: #221e1b" class="fab fa-github"></i>
<span style="color: #221e1b">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 c = createCanvas(256, 256);
c.parent('sketch-holder');
background(0);
}
function draw() {
var n = 0;
var z = 1;
var speed = 0.005;
noiseDetail(8, 0.65);
loadPixels();
for(a=0; a<3; a++)
{
noiseSeed(a+n);
for(i=0; i<width*height*4; i+=4)
{
x = ((i/4)%width)/width*z;
y = floor((i/4)/width)/height*z;
pixels[i+a] = noise(x,y,frameCount*speed)*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&rsquo;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&rsquo;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 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 class="chroma"><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span>
<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 class="nx">background</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">draw</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">z</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<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 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 class="nx">loadPixels</span><span class="p">();</span>
<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">&lt;</span><span class="mi">3</span><span class="p">;</span> <span class="nx">a</span><span class="o">++</span><span class="p">)</span>
<span class="p">{</span>
<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 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">&lt;</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 class="p">{</span>
<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 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 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 class="p">}</span>
<span class="p">}</span>
<span class="nx">updatePixels</span><span class="p">();</span>
<span class="p">}</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&rsquo;ve been recommending to a bunch of people lately :) If you want to learn and you&rsquo;re a complete beginner, there&rsquo;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&rsquo;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&rsquo;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">
var 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 d = document, s = d.createElement('script'); s.async = true;
s.src = '//' + "juju2143" + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</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</footer>
</body>
</html>