datenvorr.at
/
renders.datenvorr.at
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial commit

Browse Source
master
Anton Lydike 5 years ago
commit 9cd00b0696
5 changed files with 216 additions and 0 deletions
Show Stats Download Patch File Download Diff File

0
.gitignore vendored
Unescape Escape View File

76
index.html
Unescape Escape View File

@ -0,0 +1,76 @@
<!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">&lt;</button>
<button class="slider-control slider-next">&gt;</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 couse. It only takes a huge amount of time. This one rendered in about an hour:</p>
<video src="https://datenvorr.at/renders/mbulb.mp4" controls="show"></video>
<br/>
<br/>
</main>
<footer>
<div class="footer-inner">
<div class="footer-links">
<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">
&copy; Copyright by Anton Lydike <br>
All images are public domain
</div>
</div>
</footer>
<script src="src/main.js"></script>
</body>
</html>

56
src/main.js
Unescape Escape View File

@ -0,0 +1,56 @@
function init_slideshow(images) {
const slider = document.querySelector('.siema-slider');
slider.innerHTML = images.map(slide_template).join("\n");
const siema = new Siema({
selector: '.siema-slider',
loop: true
});
document.querySelector('.slider-control.slider-prev').addEventListener('click', () => {
siema.prev();
});
document.querySelector('.slider-control.slider-next').addEventListener('click', () => {
siema.next();
});
document.querySelector('.slider-control.slider-fullscreen').addEventListener('click', () => {
fullscreen(slider.parentElement);
});
}
function slide_template(slide_data) {
return `<div class="slide-item" style="background-image: url('${slide_data.url}')">
<p class="slide-info">${slide_data.text}</p>
</div>`;
}
function fullscreen(element) {
element.requestFullscreen();
}
function close_fullscreen(element) {
element
}
init_slideshow([
{
url: "https://datenvorr.at/renders/mandelbulb.png",
text: "A 3d rendering of a mandelbulb with a power of 2"
},
{
url: "https://datenvorr.at/renders/mbulb2.5.png",
text: "A 3d rendering of a mandelbulb with a power of 2.5"
},
{
url: "https://datenvorr.at/renders/mandelbulb-pow3.png",
text: "A Mandelbulb with power 3"
},
{
url: "https://datenvorr.at/renders/mbulb12.png",
text: "A Mandelbulb with power 12"
},
{
url: "https://datenvorr.at/renders/mandelbrot-fhd.png",
text: "A mandelbrot set, downscaled. Full image <a href=\"https://datenvorr.at/renders/mandelbrot2.png\" target=\"_blank\">here</a> (beware: 250 megapixels, 14MB)."
}
]);

1
src/siema.min.js vendored
View File

File diff suppressed because one or more lines are too long

83
src/style.css
Unescape Escape View File

@ -0,0 +1,83 @@
html, body {
margin: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
font-family: 'Open Sans', sans-serif;
min-height: 100vh;
}
body {
font-size: 16px;
line-height: 2rem;
}
.nav-inner, main, .footer-inner {
width: 70%;
max-width: 1080px;
margin: auto;
}
nav {
border-bottom: 1px solid #ddd;
background: rgba(0,0,0,0.04);
}
main {
flex-grow: 1;
}
footer {
background: #000;
color: #fff;
padding: 32px 0 8px 0;
}
.footer-inner {
display: flex;
flex-direction: row;
align-items: top;
}
.footer-inner > * {
flex-grow: 1;
}
.footer-other {
text-align: right;
}
.siema-slider {
height: 500px;
}
.slide-item {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-color: #000;
height: 500px;
}
.slide-info {
background: rgba(0,0,0,0.3);
color: #fff;
text-align: center;
}
:fullscreen .siema-slider {
height: 100vh;
}
:fullscreen .slide-item {
height: 100vh;
}
a[href] {
color: inherit;
text-decoration: underline;
}
video {
max-height: 600px;
margin: auto;
display: block;
}
Write Preview
Loading…
Cancel
Save