commit 9cd00b06961b8a136f19d50820e5f8000f771e93 Author: Anton Lydike Date: Wed Apr 29 15:44:12 2020 +0200 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..8ddd0dc --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + + + + + + Fractal galery + + + +

+

The Results

+ + We all like fancy images, so here are some results: (the slideshow is draggable as well) + +

+

+ + + +

+ +

The Code

+ coming soon + +

What is a Mandelbulb?

+

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 nth power of a vector \(z\) (\(z^n\)) a little more complex:

+ +

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) + \] +

+ +

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).

+ +

This is where the power comes in (mentioned in the image descriptions). We can look at Mandelbulbs with powers that are not 2.

+ +

Can you animate the Mandelbulb?

+

Yes, of couse. It only takes a huge amount of time. This one rendered in about an hour:

+ +

+ +
+
+

+ + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..d14c56f --- /dev/null +++ b/src/main.js @@ -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 `

+

${slide_data.text}

+

`; +} + +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 here (beware: 250 megapixels, 14MB)." + } +]); diff --git a/src/siema.min.js b/src/siema.min.js new file mode 100644 index 0000000..48e29c7 --- /dev/null +++ b/src/siema.min.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Siema",[],t):"object"==typeof exports?exports.Siema=t():e.Siema=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(i[r])return i[r].exports;var n=i[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var i={};return t.m=e,t.c=i,t.d=function(e,i,r){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,i){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=function(){function e(e,t){for(var i=0;i=e&&(this.perPage=this.config.perPage[e])}}},{key:"prev",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments[1];if(!(this.innerElements.length<=this.perPage)){var i=this.currentSlide;if(this.config.loop){if(this.currentSlide-e<0){this.disableTransition();var r=this.currentSlide+this.innerElements.length,n=this.perPage,s=r+n,l=(this.config.rtl?1:-1)*s*(this.selectorWidth/this.perPage),o=this.config.draggable?this.drag.endX-this.drag.startX:0;this.sliderFrame.style[this.transformProperty]="translate3d("+(l+o)+"px, 0, 0)",this.currentSlide=r-e}else this.currentSlide=this.currentSlide-e}else this.currentSlide=Math.max(this.currentSlide-e,0);i!==this.currentSlide&&(this.slideToCurrent(this.config.loop),this.config.onChange.call(this),t&&t.call(this))}}},{key:"next",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments[1];if(!(this.innerElements.length<=this.perPage)){var i=this.currentSlide;if(this.config.loop){if(this.currentSlide+e>this.innerElements.length-this.perPage){this.disableTransition();var r=this.currentSlide-this.innerElements.length,n=this.perPage,s=r+n,l=(this.config.rtl?1:-1)*s*(this.selectorWidth/this.perPage),o=this.config.draggable?this.drag.endX-this.drag.startX:0;this.sliderFrame.style[this.transformProperty]="translate3d("+(l+o)+"px, 0, 0)",this.currentSlide=r+e}else this.currentSlide=this.currentSlide+e}else this.currentSlide=Math.min(this.currentSlide+e,this.innerElements.length-this.perPage);i!==this.currentSlide&&(this.slideToCurrent(this.config.loop),this.config.onChange.call(this),t&&t.call(this))}}},{key:"disableTransition",value:function(){this.sliderFrame.style.webkitTransition="all 0ms "+this.config.easing,this.sliderFrame.style.transition="all 0ms "+this.config.easing}},{key:"enableTransition",value:function(){this.sliderFrame.style.webkitTransition="all "+this.config.duration+"ms "+this.config.easing,this.sliderFrame.style.transition="all "+this.config.duration+"ms "+this.config.easing}},{key:"goTo",value:function(e,t){if(!(this.innerElements.length<=this.perPage)){var i=this.currentSlide;this.currentSlide=this.config.loop?e%this.innerElements.length:Math.min(Math.max(e,0),this.innerElements.length-this.perPage),i!==this.currentSlide&&(this.slideToCurrent(),this.config.onChange.call(this),t&&t.call(this))}}},{key:"slideToCurrent",value:function(e){var t=this,i=this.config.loop?this.currentSlide+this.perPage:this.currentSlide,r=(this.config.rtl?1:-1)*i*(this.selectorWidth/this.perPage);e?requestAnimationFrame(function(){requestAnimationFrame(function(){t.enableTransition(),t.sliderFrame.style[t.transformProperty]="translate3d("+r+"px, 0, 0)"})}):this.sliderFrame.style[this.transformProperty]="translate3d("+r+"px, 0, 0)"}},{key:"updateAfterDrag",value:function(){var e=(this.config.rtl?-1:1)*(this.drag.endX-this.drag.startX),t=Math.abs(e),i=this.config.multipleDrag?Math.ceil(t/(this.selectorWidth/this.perPage)):1,r=e>0&&this.currentSlide-i<0,n=e<0&&this.currentSlide+i>this.innerElements.length-this.perPage;e>0&&t>this.config.threshold&&this.innerElements.length>this.perPage?this.prev(i):e<0&&t>this.config.threshold&&this.innerElements.length>this.perPage&&this.next(i),this.slideToCurrent(r||n)}},{key:"resizeHandler",value:function(){this.resolveSlidesNumber(),this.currentSlide+this.perPage>this.innerElements.length&&(this.currentSlide=this.innerElements.length<=this.perPage?0:this.innerElements.length-this.perPage),this.selectorWidth=this.selector.offsetWidth,this.buildSliderFrame()}},{key:"clearDrag",value:function(){this.drag={startX:0,endX:0,startY:0,letItGo:null,preventClick:this.drag.preventClick}}},{key:"touchstartHandler",value:function(e){-1!==["TEXTAREA","OPTION","INPUT","SELECT"].indexOf(e.target.nodeName)||(e.stopPropagation(),this.pointerDown=!0,this.drag.startX=e.touches[0].pageX,this.drag.startY=e.touches[0].pageY)}},{key:"touchendHandler",value:function(e){e.stopPropagation(),this.pointerDown=!1,this.enableTransition(),this.drag.endX&&this.updateAfterDrag(),this.clearDrag()}},{key:"touchmoveHandler",value:function(e){if(e.stopPropagation(),null===this.drag.letItGo&&(this.drag.letItGo=Math.abs(this.drag.startY-e.touches[0].pageY)=this.innerElements.length)throw new Error("Item to remove doesn't exist 😭");var i=ethis.innerElements.length+1)throw new Error("Unable to inset it at this index 😭");if(-1!==this.innerElements.indexOf(e))throw new Error("The same item in a carousel? Really? Nope 😭");var r=t<=this.currentSlide>0&&this.innerElements.length;this.currentSlide=r?this.currentSlide+1:this.currentSlide,this.innerElements.splice(t,0,e),this.buildSliderFrame(),i&&i.call(this)}},{key:"prepend",value:function(e,t){this.insert(e,0),t&&t.call(this)}},{key:"append",value:function(e,t){this.insert(e,this.innerElements.length+1),t&&t.call(this)}},{key:"destroy",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(this.detachEvents(),this.selector.style.cursor="auto",e){for(var i=document.createDocumentFragment(),r=0;r * { + 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; +} \ No newline at end of file