|
|
|
|
<!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-next">></button>
|
|
|
|
|
<button class="slider-control slider-fullscreen">Fullscreen</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<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/mbulb.mp4" controls="show"></video>
|
|
|
|
|
|
|
|
|
|
<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.c" target="_blank">3D Fractal rendering</a></li>
|
|
|
|
|
<li><a href="https://git.datenvorr.at/anton/raymarcher.c" target="_blank">Image library and bitmap encoder</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer-other">
|
|
|
|
|
© Copyright by Anton Lydike <br>
|
|
|
|
|
All fractal images and videos are hereby made public domain
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
<script src="src/main.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
