You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
4.2 KiB
HTML
96 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="stylesheet" href="src/style.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap">
|
|
<script type='text/javascript' async src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML'></script>
|
|
<script src="src/siema.min.js"></script>
|
|
<title>Fractal galery</title>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="nav-inner">
|
|
<h1>2D and 3D fractal renders</h1>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
<h1>The Results</h1>
|
|
|
|
We all like fancy images, so here are some results: (the slideshow is draggable as well)
|
|
|
|
<div class="slideshow-container">
|
|
<div class="siema-slider"></div>
|
|
<button class="slider-control slider-prev"><</button>
|
|
<button class="slider-control slider-fullscreen">Fullscreen</button>
|
|
<button class="slider-control slider-next">></button>
|
|
</div>
|
|
|
|
<h1>Can you animate the Mandelbulb?</h1>
|
|
<p>Yes, of course! It only takes a huge amount of time. This one rendered in about an hour, it animates the power from 1 to 20:</p>
|
|
|
|
<video src="https://datenvorr.at/renders/mandelbulb.mp4" controls="show"></video>
|
|
|
|
<h1>The Code</h1>
|
|
<i>coming soon</i>
|
|
|
|
<h1>What is a Mandelbulb?</h1>
|
|
<p>A mandelbulb is a 3D Fractal, which was formulated in 2009 by Paul Nylander. It takes the known approach of \(z_{n+1} \to z_n^2+c\).
|
|
But he defines the <i>nth power</i> of a vector \(z\) (\(z^n\)) a little more complex:</p>
|
|
|
|
<p>Let \(v = (x,y,z)\) be a vector in \(\mathbb{R}\), then \(v^n := r^2 \cdot (\sin(n\theta)\cos(n\phi), sin(n\theta)sin(n\phi),cos(n\theta))\) where
|
|
|
|
\[
|
|
r = |x| \\
|
|
\phi = \arctan(y/x) \\
|
|
\theta = \arctan\left(\frac{\sqrt{x^2+y^2}}{z}\right)
|
|
\]
|
|
</p>
|
|
|
|
<p>The 3D Mandelbulb is now defined as the set of points, where the orbit of \(z_n\) is bounded (the vector does not grow indefinitely).</p>
|
|
|
|
<p>This is where the <i>power</i> comes in (mentioned in the image descriptions). We can look at Mandelbulbs with powers that are not 2.</p>
|
|
|
|
<h2>What happens when the power is < 1?</h2>
|
|
|
|
<p>Short answer: Weird stuff. Long answer: I don't know!</p>
|
|
<p>here are some renders with weird powers:</p>
|
|
|
|
<div class="image-board">
|
|
<div class="image-item">
|
|
<img class="embed-img-small" src="https://datenvorr.at/renders/lowres/mandelbulb0.2.png" alt="A mandelbulb rendered with power 0.2, it's just a small sphere"/>
|
|
<span class="subtitle">Mandelbulb with power 0.2</span>
|
|
</div>
|
|
<div class="image-item">
|
|
<img class="embed-img-small" src="https://datenvorr.at/renders/lowres/mandelbulb-2.png" alt="A mandelbulb rendered with power -2, it's super weird looking"/>
|
|
<span class="subtitle">Mandelbulb with power -2. Looks like a giant, interdimensional jellyfish.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
<br/>
|
|
</main>
|
|
<footer>
|
|
<div class="footer-inner">
|
|
<div class="footer-links">
|
|
<b>Source code:</b>
|
|
<ul>
|
|
<li><a href="https://git.datenvorr.at/anton/fractals2d.h" target="_blank">2D Mandelbrot rendering</a></li>
|
|
<li><a href="https://git.datenvorr.at/anton/raymarcher.h" target="_blank">3D Fractal rendering</a></li>
|
|
<li><a href="https://git.datenvorr.at/anton/images.h" target="_blank">Image library and bitmap encoder</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-other">
|
|
<b>Legal stuff:</b><br/>
|
|
© Copyright by Anton Lydike <br/>
|
|
All fractal images and videos are hereby made public domain<br/>
|
|
Image carousel built with <a href="https://github.com/pawelgrzybek/siema" target="_blank" rel="noopener">siema</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="src/main.js"></script>
|
|
</body>
|
|
</html>
|