class Animation { getDefaultProperties(deltaT) { var result = { 'uiSettings': { 'sphereRadius': getCurveValue([ {'x': 0, 'y': 3, 'ignorePreviousSlope': true}, {'x': 7149, 'y': 3, 'ignorePreviousSlope': true}, {'x': 7150, 'y': 6, 'ignorePreviousSlope': true}, {'x': 35160, 'y': 6, 'ignorePreviousSlope': true}, {'x': 35161, 'y': 3, 'ignorePreviousSlope': true}, {'x': 60000, 'y': 6}, {'x': 69050, 'y': 15, 'ignorePreviousSlope': true}, {'x': 70000, 'y': 15, 'ignorePreviousSlope': true}, {'x': 95349.9, 'y': 15, 'ignorePreviousSlope': true}, {'x': 95300, 'y': 4, 'ignorePreviousSlope': true}, {'x': 105000, 'y': 1.1}, {'x': 110000, 'y': 0.8} ], deltaT), 'cReal': getCurveValue([ {'x': 0, 'y': -1.63, 'ignorePreviousSlope': true}, {'x': 10000, 'y': 0}, {'x': 14000, 'y': 0.34}, {'x': 15000, 'y': 0.34}, {'x': 25000, 'y': 0.35}, {'x': 38000, 'y': 0.35}, {'x': 40000, 'y': 0.32}, {'x': 55000, 'y': 0.2, 'ignorePreviousSlope': true}, {'x': 81049.9, 'y': 0.2, 'ignorePreviousSlope': true}, {'x': 81050, 'y': 0.4702, 'ignorePreviousSlope': true}, {'x': 92850, 'y': 0.4702, 'ignorePreviousSlope': true}, {'x': 100000, 'y': 0.4702} ], deltaT), 'rotationAngle': getCurveValue([ {'x': 0, 'y': 0}, {'x': 5000, 'y': 0.2}, {'x': 15000, 'y': 1.3}, {'x': 20000, 'y': 2.5}, {'x': 29000, 'y': 6}, {'x': 33000, 'y': 7.6}, {'x': 35400, 'y': 2.55 * Math.PI}, {'x': 38000, 'y': 2.52 * Math.PI}, {'x': 45000, 'y': 2.35 * Math.PI}, {'x': 52800, 'y': 1.27 * Math.PI}, {'x': 55000, 'y': 0.99 * Math.PI}, {'x': 65000, 'y': 0.9280643189806786 * Math.PI}, {'x': 69048, 'y': 0.9280643189806786 * Math.PI, 'ignorePreviousSlope': true}, {'x': 69049, 'y': 0, 'ignorePreviousSlope': true}, {'x': 92849, 'y': 0, 'ignorePreviousSlope': true}, {'x': 92850, 'y': 0.25 * Math.PI, 'ignorePreviousSlope': true}, {'x': 105000, 'y': 0.75 * Math.PI}, ], deltaT), 'rotationRadius': getCurveValue([ {'x': 0, 'y': 5, 'ignorePreviousSlope': true}, {'x': 12000, 'y': 2}, {'x': 13200, 'y': 1.85}, {'x': 15500, 'y': 1.84}, {'x': 29000, 'y': 1.282}, {'x': 32000, 'y': 1.13}, {'x': 35000, 'y': 0.8}, {'x': 38000, 'y': 0.3}, {'x': 40000, 'y': 0.1}, {'x': 43000, 'y': 0}, {'x': 55000, 'y': 0}, {'x': 65000, 'y': -2.5}, {'x': 69049.9, 'y': -6, 'ignorePreviousSlope': true}, {'x': 69050, 'y': 6, 'ignorePreviousSlope': true}, {'x': 81049.9, 'y': -2, 'ignorePreviousSlope': true}, {'x': 81050, 'y': 4, 'ignorePreviousSlope': true}, {'x': 92849.9, 'y': 4, 'ignorePreviousSlope': true}, {'x': 92850, 'y': 2, 'ignorePreviousSlope': true}, {'x': 100000, 'y': 2}, ], deltaT), 'planeCutValue': getCurveValue([ {'x': 0, 'y': 5, 'ignorePreviousSlope': true}, {'x': 30000, 'y': 5}, {'x': 69049.9, 'y': 5, 'ignorePreviousSlope': true}, {'x': 69050, 'y': 4, 'ignorePreviousSlope': true}, {'x': 81049.9, 'y': -4, 'ignorePreviousSlope': true}, {'x': 81050, 'y': 4, 'ignorePreviousSlope': true}, {'x': 92849.9, 'y': -4, 'ignorePreviousSlope': true}, {'x': 92850, 'y': -1.5, 'ignorePreviousSlope': true}, {'x': 93500, 'y': -0.3}, {'x': 95300, 'y': 1.5, 'ignorePreviousSlope': true}, {'x': 105000, 'y': 3}, ], deltaT), 'positionY': getCurveValue([ {'x': 0, 'y': 0, 'ignorePreviousSlope': true}, {'x': 29000, 'y': 0}, {'x': 31000, 'y': 0.011}, {'x': 34000, 'y': 0.11}, {'x': 36500, 'y': 0.4}, {'x': 38000, 'y': 0.75}, {'x': 40000, 'y': 1.085}, {'x': 41400, 'y': 1.12}, {'x': 55000, 'y': 1.13}, {'x': 58500, 'y': 1.182}, {'x': 65000, 'y': 1.5}, {'x': 69049.9, 'y': 2.2, 'ignorePreviousSlope': true}, {'x': 69050, 'y': 0, 'ignorePreviousSlope': true}, {'x': 81050, 'y': 0}, {'x': 92850, 'y': 0}, ], deltaT), 'peakOpacity': getCurveValue([ {'x': 0, 'y': 0.1, 'ignorePreviousSlope': true}, {'x': 10000, 'y': 1.6}, {'x': 15000, 'y': 2}, {'x': 29000, 'y': 2}, {'x': 33000, 'y': 1.85}, {'x': 35000, 'y': 1.6}, {'x': 36500, 'y': 1.6}, {'x': 38000, 'y': 1.8}, {'x': 42000, 'y': 2}, {'x': 55000, 'y': 2}, {'x': 65000, 'y': 10.0, 'ignorePreviousSlope': true}, {'x': 81049, 'y': 10.0, 'ignorePreviousSlope': true}, {'x': 81050, 'y': 2.0, 'ignorePreviousSlope': true}, {'x': 100000, 'y': 2.0}, ], deltaT), 'ambient': getCurveValue([ {'x': 0, 'y': 0.05}, {'x': 45000, 'y': 0.05}, {'x': 50000, 'y': 0.3}, {'x': 55000, 'y': 1.0, 'ignorePreviousSlope': true}, {'x': 69050, 'y': 1.0}, {'x': 100000, 'y': 1.0}, ], deltaT), 'scaleFactor': getCurveValue([ {'x': 0, 'y': 1}, {'x': 45000, 'y': 0.73}, {'x': 50000, 'y': 0.7}, {'x': 69049.9, 'y': 0.7, 'ignorePreviousSlope': true}, {'x': 69050, 'y': 1, 'ignorePreviousSlope': true}, {'x': 200000, 'y': 1}, ], deltaT), 'displayMode': 1, 'lineThicknessFactor': 0.0005 } }; if (deltaT < 81050) result.uiSettings.planeCutAxis = 3; else if (deltaT < 92850) result.uiSettings.planeCutAxis = 2; else { result.uiSettings.planeCutAxis = 1; } return result; } getIntroProperties(deltaT) { return { 'uiSettings': { 'maxIterations': 50 } }; } getHotBrightColourProperties(deltaT) { deltaT -= 15000; return { 'uiSettings': { } }; } startRiseUp(deltaT) { deltaT -= 29000; return { 'uiSettings': { } }; } finishRiseUp(deltaT) { deltaT -= 35000; return { 'uiSettings': { } }; } startPeakView(deltaT) { deltaT -= 38000; return { 'uiSettings': { } }; } peakRotation(deltaT) { deltaT -= 45000; return { 'uiSettings': { } }; } toTheEdge(deltaT) { deltaT -= 55000; return { 'uiSettings': { } }; } cutFromTheEdge(deltaT) { deltaT -= 69050; return { 'uiSettings': { 'displayMode': 2 } }; } startVolumetricCut(deltaT) { deltaT -= 92850; return { 'uiSettings': { 'displayMode': 3 } }; } _deepCopy(o1, o2) { for (var key in o2) { if (o1[key] === undefined) o1[key] = o2[key]; else if (typeof o2[key] === 'object') { this._deepCopy(o1[key], o2[key]); } else { o1[key] = o2[key]; } } } getPropertiesForTime(deltaT) { var result = this.getDefaultProperties(deltaT); if (deltaT < 15 * 1000) { this._deepCopy(result, this.getIntroProperties(deltaT)); } else if (deltaT < 29 * 1000) { this._deepCopy(result, this.getHotBrightColourProperties(deltaT)); } else if (deltaT < 35 * 1000) { this._deepCopy(result, this.startRiseUp(deltaT)); } else if (deltaT < 38 * 1000) { this._deepCopy(result, this.finishRiseUp(deltaT)); } else if (deltaT < 45 * 1000) { this._deepCopy(result, this.startPeakView(deltaT)); } else if (deltaT < 55 * 1000) { this._deepCopy(result, this.peakRotation(deltaT)); } else if (deltaT < 69050) { this._deepCopy(result, this.toTheEdge(deltaT)); } else if (deltaT < 92850) { this._deepCopy(result, this.cutFromTheEdge(deltaT)); } else if (deltaT < 120000) { this._deepCopy(result, this.startVolumetricCut(deltaT)); } return result; } getMusicURL() { return 'https://www.bensound.com/bensound-music/bensound-slowmotion.mp3'; } getMaxTime() { return 120 * 1000; } }function getAbcFromPoints(points) { // implementation taken from: // http://smackaay.com/2009/04/29/3-point-quadratic-regression-formula/ var denominator = (points[0].x - points[1].x) * (points[0].x - points[2].x) * (points[1].x - points[2].x); var aTop = points[2].x * (-points[0].y + points[1].y) + points[1].x * (points[0].y - points[2].y) + points[0].x * (-points[1].y + points[2].y); var bTop = points[2].x * points[2].x * (points[0].y - points[1].y) + points[0].x * points[0].x * (points[1].y - points[2].y) + points[1].x * points[1].x * (-points[0].y + points[2].y); var cTop = points[2].x * (points[1].x * (points[1].x - points[2].x) * points[0].y + points[0].x * (-points[0].x + points[2].x) * points[1].y ) + points[0].x * (points[0].x - points[1].x) * points[1].x * points[2].y; var a = aTop / denominator; var b = bTop / denominator; var c = cTop / denominator; return [a, b, c]; } function getSplineCurveValue(points, x) { var slope = 0; var delta = 0.1; for (var i = 1; i < points.length; i++) { var p = points[i]; var prevP = points[i - 1]; var abc; if (prevP.ignorePreviousSlope) { // calculate slope. var m = (p.y - prevP.y) / (p.x - prevP.x); var yWhenXIsZero = p.y - m * p.x; abc = [0, m, yWhenXIsZero]; } else { var slopePoint = { 'x': prevP.x + delta, 'y': prevP.y + delta * slope }; abc = getAbcFromPoints([prevP, slopePoint, p]); } if (p.x > x) { // return result. return abc[0] * x * x + abc[1] * x + abc[2]; } slope = 2 * abc[0] * p.x + abc[1]; } // use a straight line after. return slope * (x - points[points.length - 1].x) + points[points.length - 1].y; } function getCurveValue(points, x) { if (points.length === 1) { return points[0].y; } else if (points.length === 2) { // solve straight line. var dx = points[1].x - points[0].x; // avoid division by zero. if (dx === 0) return points[0].y; var dy = points[1].y - points[0].y; var s = (x - points[1].x) / dx; return s * dy + points[1].y; } else if (points.length === 3) { var abc = getAbcFromPoints(points); return abc[0] * x * x + abc[1] * x + abc[2]; } else { return getSplineCurveValue(points, x); } } class AnimationUI { constructor(animationUpdated, downloader) { if (this.shouldBeActive()) { this.animationUpdated = animationUpdated; this.downloader = downloader; this.addElementsToDOM(); } } addElementsToDOM() { this.animation = new Animation(); var settings = document.getElementById('settings'); var div = document.createElement('div'); div.innerHTML = ` `; settings.prepend(div); var downloadAnimationButton = document.getElementById('downloadAnimationHD'); var outer = this; this.deltaTSpan = document.getElementById('deltaT'); downloadAnimationButton.addEventListener('click', function() { outer.downloadAnimation(); }); var play = document.getElementById('playAnimation'); play.addEventListener('click', function() { outer.playAnimation(); }); } shouldBeActive() { var currentHostname = window.location.hostname; return currentHostname.indexOf('sololearn') === -1 && currentHostname.indexOf('solocode') === -1; } downloadAnimation() { var fps = 60; var frameIndex = 0; var outer = this; function isFrameToSkip() { return false; } function processTimeChange(deltaT) { var eventData = new CustomEvent('animation-update', { 'detail': { 'props': outer.animation.getPropertiesForTime(deltaT), 'deltaT': deltaT } }); outer.animationUpdated(eventData); } function getFormattedFrameIndex() { var result = '' + (frameIndex + 1); while (result.length < 8) { result = '0' + result; } return result; } function downloadFrame() { while (isFrameToSkip() && frameIndex * 1000 / fps < outer.animation.getMaxTime()) { frameIndex++; } if (frameIndex * 1000 / fps > outer.animation.getMaxTime()) { return; } var frameName = 'cloud_frame_' + getFormattedFrameIndex() + '.png'; var deltaT = frameIndex * 1000 / fps; processTimeChange(deltaT); outer.downloader.download(frameName).then(function() { if (deltaT <= outer.animation.getMaxTime()) { frameIndex++; // continue downloading frames. // use setTimeout to give events a chance to be processed. downloadFrame(); } }); } downloadFrame(); } playAnimation() { var url = this.animation.getMusicURL(); var audio; var outer = this; var startTimeOffset = 0 * 1000; if (url !== undefined) { audio = new Audio(url); audio.currentTime = startTimeOffset * 0.001; } var startTime = new Date().getTime(); startTime -= startTimeOffset; if (url !== undefined) { audio.play(); } function updateAnimation() { var t = new Date().getTime(); var deltaT = (t - startTime); if (deltaT > outer.animation.getMaxTime()) { console.log('about to pause the audio and remove the time-changed listener.'); if (audio !== undefined) audio.pause(); document.removeEventListener('time-changed', updateAnimation); } else { var eventData = new CustomEvent('animation-update', { 'detail': { 'props': outer.animation.getPropertiesForTime(deltaT), 'deltaT': deltaT } }); outer.deltaTSpan.innerText = deltaT; document.dispatchEvent(eventData); } } document.addEventListener('time-changed', updateAnimation); } } function initCoords(gl, pid) { let coords = gl.getAttribLocation(pid, 'coords'); let array = new Float32Array([-1, 3, -1, -1, 3, -1]); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW); gl.vertexAttribPointer(coords, 2 /*components per vertex */, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(coords); } function loadShaders(gl, pid) { shader(gl, pid, 'script[type="glsl/vertex"]', gl.VERTEX_SHADER); shader(gl, pid, '#main-fragment-shader', gl.FRAGMENT_SHADER); gl.linkProgram(pid); gl.useProgram(pid); } function shader(gl, pid, cssSelector, type) { let src = document.querySelector(cssSelector).innerText; if (type === gl.FRAGMENT_SHADER) { var commonSrc = document.getElementById('common-fragment-shader').innerText; src = commonSrc + src; } let sid = gl.createShader(type); gl.shaderSource(sid, src); gl.compileShader(sid); gl.attachShader(pid, sid); } function copyUniform(glFrom, glDestination, pidFrom, pidDestination, key) { var locationOfUniform = glFrom.getUniformLocation(pidFrom, key); var destinationOfUniform = glDestination.getUniformLocation(pidDestination, key); if (!locationOfUniform) { console.log('Weird. Not found: ' + key + ', locationOfUniform: ', locationOfUniform); } var val = glFrom.getUniform(pidFrom, locationOfUniform); var uniformFunc; if (typeof val === 'boolean') { uniformFunc = glDestination.uniform1i; } else if (typeof val === 'number') { if (Math.floor(val) !== val || [ 'cReal', 'sphereRadiusSquared', 'peakSampleOpacity', 'planeCutValue', 'fractalIterationDelta', 'scale', 'ambientFactor', 'sphereRadiusWithPlaneLineSquared' ].indexOf(key) !== -1) uniformFunc = glDestination.uniform1f; else uniformFunc = glDestination.uniform1i; } else if (val instanceof Float32Array) { if (val.length === 2) uniformFunc = glDestination.uniform2fv; else uniformFunc = glDestination.uniform3fv; } else { throw new Error('Unrecognized uniform type for: ', val); } uniformFunc.call(glDestination, destinationOfUniform, val); } class PixelSubsampling { constructor(gl, pid) { this.DEFAULT_QUALITY = 1; this.DOWNLOAD_QUALITY = 2; this.MAX_QUALITY = 5; this.value = this.DEFAULT_QUALITY; this.mainGL = gl; this.locationOfPixelSubsampling = gl.getUniformLocation(pid, "pixelSubsampling"); this._valueUpdated(); } _valueUpdated() { this.mainGL.uniform1i(this.locationOfPixelSubsampling, this.value); } useLowestQuality() { this.value = this.DEFAULT_QUALITY; this._valueUpdated(); } decreaseQuality() { this.value = Math.max(this.DEFAULT_QUALITY, this.value - 1); this._valueUpdated(); } increaseQuality() { this.value = Math.min(this.MAX_QUALITY, this.value + 1); this._valueUpdated(); } } class SampleOpacity { constructor(gl, pid, locationOfOpacityCutOff, getPeakOpacityForLightObstructionDeltaRatio, getOpacityCutOffFromPeakSampleOpacity) { this.locationOfPeakSampleOpacity = gl.getUniformLocation(pid, 'peakSampleOpacity'); this.lightObstructionRatio = 0.3; this.mainGL = gl; this.locationOfOpacityCutOff = locationOfOpacityCutOff; this.getPeakOpacityForLightObstructionDeltaRatio = getPeakOpacityForLightObstructionDeltaRatio; this.getOpacityCutOffFromPeakSampleOpacity = getOpacityCutOffFromPeakSampleOpacity; this.setValueFromLightObstructionRatio(0.3); } _updated() { var newOpacity = this.getPeakOpacityForLightObstructionDeltaRatio(this.lightObstructionRatio); this.mainGL.uniform1f(this.locationOfPeakSampleOpacity, newOpacity); this.mainGL.uniform1f(this.locationOfOpacityCutOff, this.getOpacityCutOffFromPeakSampleOpacity(newOpacity)); } setValueFromLightObstructionRatio(lightObstructionRatio) { this.lightObstructionRatio = lightObstructionRatio; this._updated(); } } class DownloadRenderer { constructor(gl, pid, mandelbrotDisplay, pixelSubsampling, sphereRadius, isPlaneCut, drawGraphics, getScaleFromDimensions, getPeakOpacityForLightObstructionDeltaRatio, getOpacityCutOffFromPeakSampleOpacity, updateCircleRadiusRange) { this.mainGL = gl; this.mainPID = pid; this.mandelbrotDisplay = mandelbrotDisplay; this.pixelSubsampling = pixelSubsampling; this.sphereRadius = sphereRadius; this.drawGraphics = drawGraphics; this.getScaleFromDimensions = getScaleFromDimensions; this.updateCircleRadiusRange = updateCircleRadiusRange; this.isPlaneCut = isPlaneCut; this.getPeakOpacityForLightObstructionDeltaRatio = getPeakOpacityForLightObstructionDeltaRatio; this.getOpacityCutOffFromPeakSampleOpacity = getOpacityCutOffFromPeakSampleOpacity; this.filename = 'cloud.png'; this.downloadBar = document.getElementById('render-and-download-progress'); this.progressBar = document.getElementById('download-progress-bar'); this.downloadButton = document.getElementById('download-image'); var outer = this; this.downloadButton.addEventListener('click', function() { outer.startDownload(); }); this.isRenderingOrDownloading = false; this.canvas2D = document.createElement('canvas'); this.g = this.canvas2D.getContext('2d'); this.canvasWebGL = document.createElement('canvas'); this.gl = this.canvasWebGL.getContext('webgl', { 'preserveDrawingBuffer': false }); this.pid = this.gl.createProgram(); loadShaders(this.gl, this.pid); initCoords(this.gl, this.pid); this.uniforms = this.getUniforms([ 'ambientFactor', 'centre', 'circleRadiusRange', 'cReal', 'fractalIterationDelta', 'isShowingCircumference', 'displayMode', 'lightDirection', 'lightObstructionDeltaRatio', 'opacityCutOff', 'peakSampleOpacity', 'pixelSubsampling', 'planeCutValue', 'planeCutAxis', 'position3D', 'scale', 'sphereRadius', 'sphereRadiusSquared', 'sphereRadiusWithPlaneLineSquared', 'viewRotation' ]); } getUniforms(keys) { var result = {}; var outer = this; keys.forEach(function(key) { result[key] = outer.gl.getUniformLocation(outer.pid, key); }); return result; } _showDownloadProgress() { this.downloadBar.setAttribute('class', 'shown'); } _hideDownloadProgress() { this.downloadBar.setAttribute('class', ''); } _updateProgress() { this.progressBar.setAttribute('value', 100.0 * this.left / this.w); } _fillBlackBackground(g, w, h) { g.fillStyle = '#000'; g.beginPath(); g.rect(0, 0, w, h); g.closePath(); g.fill(); } download(filename) { this.filename = filename; var outer = this; var promise = new Promise(function(resolver, rejecter) { outer.downloadCompleteCallback = function() { outer.downloadCompleteCallback = undefined; outer.filename = 'cloud.png'; resolver(); }; outer.startDownload(); }); return promise; } startDownload() { this._showDownloadProgress(); this.w = 1920; this.h = 1080; var lightObstructionDeltaRatio = 0.02; this.isRenderingOrDownloading = true; this.canvas2D.setAttribute('width', this.w); this.canvas2D.setAttribute('height', this.h); var scaleValue = this.getScaleFromDimensions(this.w, this.h); this.gl.uniform1f(this.uniforms.scale, scaleValue); var maxPixelRadius = this.updateCircleRadiusRange(this.gl, this.w, this.h, scaleValue, this.uniforms.circleRadiusRange); var pixelSubsamplingQuality = this.pixelSubsampling.DEFAULT_QUALITY; if (this.isPlaneCut()) pixelSubsamplingQuality = 7; this.gl.uniform1i(this.uniforms.pixelSubsampling, pixelSubsamplingQuality); this.gl.uniform2fv(this.uniforms.centre, [this.w / 2, this.h / 2]); this.gl.uniform1f(this.uniforms.scale, this.getScaleFromDimensions(this.w, this.h)); this.gl.uniform1f(this.uniforms.lightObstructionDeltaRatio, lightObstructionDeltaRatio); var peakSampleOpacity = this.getPeakOpacityForLightObstructionDeltaRatio(lightObstructionDeltaRatio); this.gl.uniform1f(this.uniforms.peakSampleOpacity, peakSampleOpacity); this.gl.uniform1f(this.uniforms.opacityCutOff, this.getOpacityCutOffFromPeakSampleOpacity(peakSampleOpacity)); this.sphereRadius.updateUniforms(this.gl, this.w, this.h, this.uniforms.sphereRadiusSquared, this.uniforms.sphereRadiusWithPlaneLineSquared); var outer = this; ['ambientFactor', 'cReal', 'fractalIterationDelta', 'isShowingCircumference', 'displayMode', 'lightDirection', 'planeCutAxis', 'planeCutValue', 'sphereRadiusSquared', 'sphereRadiusWithPlaneLineSquared', 'position3D', 'viewRotation'].forEach(function(key) { copyUniform(outer.mainGL, outer.gl, outer.mainPID, outer.pid, key); }); this._fillBlackBackground(this.g, this.w, this.h); this.left = Math.floor(Math.max(0, this.w / 2 - maxPixelRadius)); this.maxToRender = Math.ceil(Math.min(this.w, this.w / 2 + maxPixelRadius)); this.intervalSize = 5; this.canvasWebGL.setAttribute('width', this.intervalSize); this.canvasWebGL.setAttribute('height', this.h); requestAnimationFrame(function() { outer.updateDrawing(); }); } updateDrawing() { if (this.updateLoopStartTime === undefined) { this.updateLoopStartTime = new Date().getTime(); } this.gl.uniform2fv(this.uniforms.centre, [this.w / 2 - this.left, this.h / 2]); this.drawGraphics(this.gl, this.intervalSize, this.h); var dataURL = this.canvasWebGL.toDataURL("image/png", 1.0); var img = new Image(); var outer = this; img.onload = function() { outer.g.drawImage(img, outer.left, 0); if (outer.left + outer.intervalSize >= outer.maxToRender) { if (outer.mandelbrotDisplay.shouldBeVisible()) outer.mandelbrotDisplay.drawAll(outer.canvas2D).then(function() { outer.downloadCanvas(); }); else outer.downloadCanvas(); } else { outer.left += outer.intervalSize; var newTime = new Date().getTime(); var maxLoopTime = 50; if (newTime - outer.updateLoopStartTime > maxLoopTime) { outer._updateProgress(); this.updateLoopStartTime = undefined; requestAnimationFrame(function() { outer.updateDrawing(); }); } else { // no delay. continue immediately so the // render completes faster. outer.updateDrawing(); } } } img.src = dataURL; } downloadCanvas() { var outer = this; this.canvas2D.toBlob(function(blob) { saveAs(blob, outer.filename); outer.isRenderingOrDownloading = false; outer._hideDownloadProgress(); if (typeof outer.downloadCompleteCallback === 'function') { outer.downloadCompleteCallback(); } }, 'image/png', 0.99); } isDownloading() { return this.isRenderingOrDownloading; } } class LightObstructionDelta { constructor(gl, pid, sampleOpacity, peakOpacityInput) { this.LOWEST_QUALITY = 0.3; this.LOWEST_1_PIXELSTRETCH_QUALITY = 0.2; this.DEFAULT_QUALITY = 0.1; this.DOWNLOAD_QUALITY = 0.01; this.ratio = this.DEFAULT_QUALITY; this.gl = gl; this.sampleOpacity = sampleOpacity; this.uniformLocation = gl.getUniformLocation(pid, "lightObstructionDeltaRatio"); this._ratioUpdated(); var outer = this; peakOpacityInput.addEventListener('input', function() { outer.peakOpacityInputChanged(); }); } peakOpacityInputChanged() { this._ratioUpdated(); } _ratioUpdated() { if (typeof this.ratio !== 'number' || isNaN(this.ratio) || this.ratio < this.DOWNLOAD_QUALITY) { throw new Error('Invalid ratio: ' + this.ratio); } this.sampleOpacity.setValueFromLightObstructionRatio(this.ratio); this.gl.uniform1f(this.uniformLocation, this.ratio); } decreaseQuality() { if (this.ratio < this.DEFAULT_QUALITY) { this.ratio = this.DEFAULT_QUALITY; } else if (this.ratio < this.LOWEST_1_PIXELSTRETCH_QUALITY) { this.ratio = this.LOWEST_1_PIXELSTRETCH_QUALITY; } else { this.ratio = this.LOWEST_QUALITY; } this._ratioUpdated(); } increaseQuality() { if (this.ratio > this.DEFAULT_QUALITY) this.ratio = this.DEFAULT_QUALITY; else this.ratio = Math.max(this.DOWNLOAD_QUALITY, this.ratio * 0.9); this._ratioUpdated(); } isLowestQuality() { return this.ratio >= this.LOWEST_QUALITY - 0.0001; } isLowest1PixelStretchQuality() { return this.ratio >= this.LOWEST_1_PIXELSTRETCH_QUALITY - 0.0001; } setToDefaultQuality() { this.ratio = this.DEFAULT_QUALITY; this._ratioUpdated(); } setToLowestQuality() { this.ratio = this.LOWEST_QUALITY; this._ratioUpdated(); } setToDownloadQuality() { this.ratio = this.DOWNLOAD_QUALITY; this._ratioUpdated(); } } class SphereRadius { constructor(gl, pid, planeCutValue, getPlaneCutValue, getOutlineThickness, sanitizeFloat, getWidth, getHeight, getScaleValue) { this.getPlaneCutValue = getPlaneCutValue; this.planeCutValue = planeCutValue; this.mainGL = gl; this.getOutlineThickness = getOutlineThickness; this.sanitizeFloat = sanitizeFloat; this.getWidth = getWidth; this.getHeight = getHeight; this.getScaleValue = getScaleValue; this.sphereRadiusInput = document.getElementById('sphere-radius'); this.locationOfSphereRadiusSquared = gl.getUniformLocation(pid, "sphereRadiusSquared"); this.locationOfSphereRadiusWithPlaneLineSquared = gl.getUniformLocation(pid, "sphereRadiusWithPlaneLineSquared"); let outer = this; this.sphereRadiusInput.addEventListener('input', function() { outer._updated(); }); this._updated(); } updateUniforms(gl, w, h, locationOfSphereRadiusSquared, locationOfSphereRadiusWithPlaneLineSquared) { let val = this.sanitizeFloat(this.sphereRadiusInput.value, 2); let val2 = val * (1 + this.getOutlineThickness(w, h) * this.getScaleValue()); gl.uniform1f(locationOfSphereRadiusSquared, val * val); gl.uniform1f(locationOfSphereRadiusWithPlaneLineSquared, val2 * val2); } _updated() { let val = this.getValue(); this.updateUniforms(this.mainGL, this.getWidth(), this.getHeight(), this.locationOfSphereRadiusSquared, this.locationOfSphereRadiusWithPlaneLineSquared); this.planeCutValue.setAttribute('min', -val); this.planeCutValue.setAttribute('max', val); this.planeCutValue.value = Math.max(-val, Math.min(val, this.getPlaneCutValue())); document.dispatchEvent(new Event('sphere-radius-change')); } getValue() { return this.sanitizeFloat(this.sphereRadiusInput.value, 2); } setValue(newValue) { // For efficiency's sake, check that the value actually changed. if (newValue !== this.getValue()) { this.sphereRadiusInput.value = newValue; this._updated(); } } } class MandelbrotDisplay { constructor(gl, pid, pixelStretch, sphereRadius, drawGraphics, getCRealValue, isPlaneCut, getPlaneCutAxisValue, getPlaneCutValue, getViewportDimensions, getScaleFromDimensions, getMaxCircleRadius, getCentre) { this.mainGL = gl; this.mainPID = pid; this.pixelStretch = pixelStretch; this.sphereRadius = sphereRadius; this.drawGraphics = drawGraphics; this.getViewportDimensions = getViewportDimensions; this.getScaleFromDimensions = getScaleFromDimensions; this.getPlaneCutAxisValue = getPlaneCutAxisValue; this.getPlaneCutValue = getPlaneCutValue; this.getCRealValue = getCRealValue; this.isPlaneCut = isPlaneCut; this.getCentre = getCentre; this.getMaxCircleRadius = getMaxCircleRadius; this.div = document.getElementById('mandelbrot-display'); this.canvas = this.div.querySelector('canvas'); this.g = this.canvas.getContext('2d'); var info = this._createWebGLCanvas(); Object.assign(this, info); var outer = this; document.addEventListener('sphere-radius-change', function() { outer.sphereRadiusChanged(); }); this.isVisible = false; this.updateVisibility(); } _createWebGLCanvas() { var result = {}; result.canvasWebGL = document.createElement('canvas'); var options = { 'preserveDrawingBuffer': false }; result.gl = result.canvasWebGL.getContext('webgl', options) || result.canvasWebGL.getContext('experimental-webgl', options); result.pid = result.gl.createProgram(); this.loadShaders(result.gl, result.pid); initCoords(result.gl, result.pid); result.uniforms = {}; var uniformKeys = ['centre', 'fractalIterationDelta', 'pixelSubsampling', 'scale']; uniformKeys.forEach(function(key) { result.uniforms[key] = result.gl.getUniformLocation(result.pid, key); }); return result; } loadShaders(gl, pid) { shader(gl, pid, 'script[type="glsl/vertex"]', gl.VERTEX_SHADER); shader(gl, pid, '#mandelbrot-fragment-shader', gl.FRAGMENT_SHADER); gl.linkProgram(pid); gl.useProgram(pid); } _getScaleFrom(w, h) { var r = 2; if (this.sphereRadius !== undefined) r = this.sphereRadius.getValue(); return this.getScaleFromDimensions(w, h) * 0.8 * r / 2.0; } _drawMandelbrot(glDestination, pidDestination, w, h, uniforms) { this.scale = this._getScaleFrom(w, h); glDestination.uniform1i(uniforms.pixelSubsampling, 2); glDestination.uniform1f(uniforms.scale, this.scale); glDestination.uniform2fv(uniforms.centre, [w/2, h/2]); this.sphereRadius.updateUniforms(glDestination, w, h, uniforms.sphereRadiusSquared, uniforms.sphereRadiusWithPlaneLineSquared); var outer = this; ['fractalIterationDelta'].forEach(function(key) { copyUniform(outer.mainGL, glDestination, outer.mainPID, pidDestination, key); }); this.drawGraphics(glDestination, w, h); } shouldBeVisible() { // would this mandelbrot display overlap the sphere? var dimensions = this.getViewportDimensions(); var w = dimensions[0]; var h = dimensions[1]; var size = this._getSizeFromFullCanvas(w, h); var scaleValue = this.getScaleFromDimensions(w, h); if (typeof scaleValue !== 'number' || isNaN(scaleValue)) throw new Error('scaleValue must be a number.'); var radius = this.getMaxCircleRadius(w, h, scaleValue); if (typeof radius !== 'number' || isNaN(radius)) throw new Error('radius must be a number.'); var centre = this.getCentre(); if (!(centre instanceof Array) || centre.length !== 2) { throw new Error('centre must be an Array of length 2.'); } centre = [centre[0] * this.pixelStretch, centre[1] * this.pixelStretch]; var x = size; var y = h - size; var dx = centre[0] - x; var dy = centre[1] - y; return Math.sqrt(dx * dx + dy * dy) > radius; } updateVisibility() { var shouldShow = this.shouldBeVisible(); if (shouldShow !== this.isVisible) { this.isVisible = shouldShow; if (shouldShow) { this.div.style.display = 'block'; this.updateSize(); } else { this.div.style.display = 'none'; } return true; } return false; } cRealUpdated() { this._drawCRealAndDot(); } planeCutValueUpdated() { this._drawCRealAndDot(); } planeCutAxisChanged() { this._drawCRealAndDot(); } sphereRadiusChanged() { if (!this.updateVisibility()) this._drawAll(); } maxIterationsChanged() { this._drawAll(); } _replaceWebGLImage() { this.latestImgLoaded = false; this.latestImg = new Image(); var dataURL = this.canvasWebGL.toDataURL('image/png', 1.0); var outer = this; this.latestImg.addEventListener('load', function() { outer.latestImgLoaded = true; }); this.latestImg.src = dataURL; } // The callback function is to simulate an async function. // I just don't want this to break if the browser doesn't // support keywords like async and await. _copyWebGLCanvas(successCallback) { var outer = this; if (this.latestImgLoaded) { outer.g.drawImage(outer.latestImg, 0, 0); if (successCallback) successCallback(); } else this.latestImg.addEventListener('load', function() { outer.g.drawImage(outer.latestImg, 0, 0); if (successCallback) successCallback(); }); } _drawLineAndDot(g, scale, w, h, offsetY) { var rv = this.getCRealValue(); rv = (rv / scale) + w / 2; var lineThickness = 0.03 / scale; var circleRadius = 0.05 / scale; g.fillStyle = '#fff'; g.strokeStyle = '#000'; g.lineWidth = 0.01 / scale; g.beginPath(); g.rect(rv - lineThickness * 0.5, offsetY, lineThickness, h); g.closePath(); g.fill(); g.stroke(); // if the cut plane is showing and the axis is z, show a dot. if (this.isPlaneCut() && this.getPlaneCutAxisValue() === 3 && circleRadius > 0) { var mandelbrotY = offsetY + this.getPlaneCutValue() / scale + h / 2; g.fillStyle = '#00f'; g.beginPath(); g.arc(rv, mandelbrotY, circleRadius, 0, Math.PI * 2); g.closePath(); g.fill(); g.stroke(); } } _drawCRealAndDot() { if (!this.isVisible) { return; // don't waste time if it won't show. } var outer = this; this._copyWebGLCanvas(function() { outer._drawLineAndDot(outer.g, outer.scale, outer.w, outer.h, 0); }); } _drawAll() { this._drawMandelbrot(this.gl, this.pid, this.w, this.h, this.uniforms); this.gl.finish(); this._replaceWebGLImage(); this._drawCRealAndDot(); } // Used for high quality download. drawAll(canvas) { // draw mandelbrot var outer = this; return new Promise(function(resolve, reject) { var w = canvas.getAttribute('width'); var h = canvas.getAttribute('height'); var size = outer._getSizeFromFullCanvas(w, h); var info = outer._createWebGLCanvas(); info.canvasWebGL.setAttribute('width', size); info.canvasWebGL.setAttribute('height', size); outer._drawMandelbrot(info.gl, info.pid, size, size, info.uniforms); var latestImg = new Image(); var dataURL = info.canvasWebGL.toDataURL('image/png', 1.0); latestImg.addEventListener('load', function() { var g = canvas.getContext('2d'); g.drawImage(latestImg, 0, h - size); var scale = outer._getScaleFrom(size, size); // draw the line and dot. outer._drawLineAndDot(g, scale, size, size, h - size); // Free up the context, if the extension is supported. var ext = info.gl.getExtension('WEBGL_lose_context'); if (typeof ext === 'object' && typeof ext.loseContext === 'function') { info.gl.getExtension('WEBGL_lose_context').loseContext(); } resolve(); }); latestImg.src = dataURL; }); } _getSizeFromFullCanvas(w, h) { return Math.round(Math.min(w, h) * 0.3); } updateSize() { if (!this.isVisible || this.updateVisibility()) { return; // don't waste time if it won't show. } var dimensions = this.getViewportDimensions(); var size = this._getSizeFromFullCanvas(dimensions[0], dimensions[1]); var s = size + 'px'; [this.div, this.canvas].forEach(function(e) { e.style.height = s; e.style.width = s; }); this.w = size; this.h = size; [this.canvasWebGL, this.canvas].forEach(function(c) { c.setAttribute('width', size); c.setAttribute('height', size); }); this._drawAll(); } } "use strict" /* Written by Josh Greig around October 17, 2020. */ window.addEventListener("DOMContentLoaded", function() { let showSphereOutlineInput = document.getElementById('show-outline'); let canvas = document.querySelector('#main-canvas'); let gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); let pid = gl.createProgram(); var h = canvas.clientHeight; var w = canvas.clientWidth; loadShaders(gl, pid); let locationOfCentre = gl.getUniformLocation(pid, "centre"); let locationOfPosition = gl.getUniformLocation(pid, "position3D"); let locationOfViewRotation = gl.getUniformLocation(pid, "viewRotation"); let locationOfScale = gl.getUniformLocation(pid, "scale"); let locationOfDisplayMode = gl.getUniformLocation(pid, "displayMode"); let locationOfPlaneCutValue = gl.getUniformLocation(pid, "planeCutValue"); let locationOfPlaneCutAxis = gl.getUniformLocation(pid, "planeCutAxis"); let locationOfCircleRadiusRange = gl.getUniformLocation(pid, "circleRadiusRange"); let locationOfShowingCircumference = gl.getUniformLocation(pid, "isShowingCircumference"); let locationOfOpacityCutOff = gl.getUniformLocation(pid, "opacityCutOff"); let locationOfAmbient = gl.getUniformLocation(pid, "ambientFactor"); let rotationAngle = 0; let scaleValue = 100; var planeCutValue = document.getElementById('plane-cut-value'); var peakOpacityInput = document.getElementById('peak-opacity'); var cRealInput = document.getElementById('c-real'); let pixelStretch = 3; // start fairly low quality to safely know we won't crash the browser to start with. var ambientInput = document.getElementById('ambient'); var positionY = 0; initCoords(gl, pid); var scaleFactor = 1; var lineThicknessFactor = 0.001; var times = []; var rotationRadius = 2.0; var deltaT = document.getElementById('deltaT'); var oldMouseX, oldMouseY, oldTouchX, oldTouchY; const DEFAULT_DISPLAY_MODE = 1; const PLANE_CUT_DISPLAY_MODE = 2; const MAX_CUT_VOLUME_DISPLAY_MODE = 3; const MIN_CUT_VOLUME_DISPLAY_MODE = 4; // This is important for managing browser view zoom. // A zoom other than 100% causes canvas.clientWidth != viewport width. function getViewportDimensions() { var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0); return [vw, vh]; } function getPeakOpacityForLightObstructionDeltaRatio(lightObstructionDeltaRatio) { return lightObstructionDeltaRatio * getPeakOpacityInputValue(); } function getWidth() { return w; } function getHeight() { return h; } function getScaleValue() { return scaleValue; } var sphereRadius = new SphereRadius(gl, pid, planeCutValue, getPlaneCutValue, getOutlineThickness, sanitizeFloat, getWidth, getHeight, getScaleValue); var mandelBrotDisplay = new MandelbrotDisplay(gl, pid, pixelStretch, sphereRadius, drawGraphics, getCRealValue, isPlaneCut, getPlaneCutAxisValue, getPlaneCutValue, getViewportDimensions, getScaleFromDimensions, getMaxCircleRadius, getCentre); resized(); var sampleOpacity = new SampleOpacity(gl, pid, locationOfOpacityCutOff, getPeakOpacityForLightObstructionDeltaRatio, getOpacityCutOffFromPeakSampleOpacity); var lightObstructionDeltaRatio = new LightObstructionDelta(gl, pid, sampleOpacity, peakOpacityInput); var pixelSubsampling = new PixelSubsampling(gl, pid); var downloader = new DownloadRenderer(gl, pid, mandelBrotDisplay, pixelSubsampling, sphereRadius, isPlaneCut, drawGraphics, getScaleFromDimensions, getPeakOpacityForLightObstructionDeltaRatio, getOpacityCutOffFromPeakSampleOpacity, updateCircleRadiusRange); sphereRadius._updated(); function setSphereOutlineUniformOnly(gl, locationOfShowingCircumference, newValue) { gl.uniform1i(locationOfShowingCircumference, newValue); } function showSphereOutlineChanged(gl, locationOfShowingCircumference, w, h) { setSphereOutlineUniformOnly(gl, locationOfShowingCircumference, !!showSphereOutlineInput.checked); } function sanitizeFloat(v, defaultVal) { if (typeof v === 'string') { v = v.trim(); v = parseFloat(v); } if (typeof v !== 'number' || isNaN(v)) return defaultVal; else return v; } function getPeakOpacityInputValue() { return sanitizeFloat(peakOpacityInput.value, 2.0); } function setPeakOpacityInputValue(newValue, forceChange) { var val = getPeakOpacityInputValue(); if (forceChange || val !== newValue) { peakOpacityInput.value = newValue; lightObstructionDeltaRatio.peakOpacityInputChanged(); } } function getOpacityCutOffFromPeakSampleOpacity(newOpacity) { return 0.05 * newOpacity; } function getScaleFromDimensions(w, h) { return 7.0 * scaleFactor / (w + h); } // returns value to be used in shader's uniform. // In other words, this isn't returning pixel coordinates. // You need the multiply the values by pixelStretch to get the pixel coordinates. function getCentre() { var cy = h / 2; var body = document.querySelector('body'); var bodyClass = body.class; if (!bodyClass) bodyClass = ''; // if the settings are showing and it is more than 0.3 * h, // look for a better cy. if (bodyClass.indexOf('settings-collapsed') === -1 && sphereRadius !== undefined) { var settings = document.getElementById('settings'); var settingsHeight = settings.clientHeight / pixelStretch; if (settingsHeight > 0.3 * h) { var r = sphereRadius.getValue(); if (r < 0.9 * rotationRadius && r < 0.5 * h) { r = getRadiusFromSphereRadius(r, scaleValue); var remainingHeight = h - settingsHeight; if (remainingHeight > r * 2) { cy = remainingHeight / 2; } } } } return [w / 2, cy]; } function updateCentre() { var newCentre = getCentre(); gl.uniform2fv(locationOfCentre, newCentre); mandelBrotDisplay.updateVisibility(); } function refreshPixelStretchCentreAndScale() { w = window.innerWidth; h = window.innerHeight; w /= pixelStretch; h /= pixelStretch; updateCentre(); canvas.setAttribute('width', Math.round(w)); canvas.setAttribute('height', Math.round(h)); scaleValue = getScaleFromDimensions(w, h); console.log('scaleValue updating to ' + scaleValue); gl.uniform1f(locationOfScale, scaleValue); } function resized() { refreshPixelStretchCentreAndScale(); mandelBrotDisplay.updateSize(); } function setPixelSubsampling(newValue) { isPixelSubsampling = newValue; gl.uniform1i(locationOfIsPixelSubsampling, newValue); } function setRotationAngle(newAngle) { var a = Math.PI + newAngle; gl.uniform2fv(locationOfViewRotation, [Math.cos(a), Math.sin(a)]); gl.uniform3fv(locationOfPosition, [rotationRadius * Math.sin(newAngle), positionY, rotationRadius * Math.cos(newAngle)]); } function getDisplayMode() { var input = document.querySelector('[name="display-mode"]:checked'); return parseInt(input.value); } function setDisplayMode(newDisplayMode, forceUpdate) { var currentValue = getDisplayMode(); if (forceUpdate || currentValue !== newDisplayMode) { if (currentValue !== newDisplayMode) { var id = 'display-mode-volume'; if (newDisplayMode === PLANE_CUT_DISPLAY_MODE) id = 'display-mode-plane-cut'; else if (newDisplayMode === MAX_CUT_VOLUME_DISPLAY_MODE) id = 'display-mode-max-cut-volume'; else if (newDisplayMode === MIN_CUT_VOLUME_DISPLAY_MODE) id = 'display-mode-min-cut-volume'; var input = document.getElementById(id); input.setAttribute('checked', true); if (currentValue === PLANE_CUT_DISPLAY_MODE && newDisplayMode !== PLANE_CUT_DISPLAY_MODE) { // volumetric rendering can't run at the same quality. // prevent the browser from crashing. decreaseQuality(1); } } gl.uniform1i(locationOfDisplayMode, newDisplayMode); } } function isPlaneCut() { return getDisplayMode() === PLANE_CUT_DISPLAY_MODE; } function decreaseQuality(currentFrameRate) { if (isPlaneCut()) { if (pixelStretch === 1) pixelSubsampling.decreaseQuality(); else pixelSubsampling.useLowestQuality(); } if (pixelStretch === 1 && !isPlaneCut() && !lightObstructionDeltaRatio.isLowest1PixelStretchQuality()) { lightObstructionDeltaRatio.decreaseQuality(); // If the frame rate is terrible, increase pixelStretch immediately. if (currentFrameRate < 5) { pixelStretch++; refreshPixelStretchCentreAndScale(); } else { pixelStretch++; refreshPixelStretchCentreAndScale(); } } else { pixelStretch++; refreshPixelStretchCentreAndScale(); } } function increaseQuality(currentFrameRate) { if (pixelStretch > 1) { pixelStretch--; refreshPixelStretchCentreAndScale(); } else if (!isPlaneCut()) { lightObstructionDeltaRatio.increaseQuality(); } else { if (currentFrameRate > 55) { pixelSubsampling.increaseQuality(); } } } function improveFrameRateInResponseTo(currentFrameRate) { if (currentFrameRate < 20) { decreaseQuality(currentFrameRate); } else if (currentFrameRate > 50) { increaseQuality(currentFrameRate); } } function processTimeChange() { document.dispatchEvent(new CustomEvent('time-changed', {})); var t = new Date().getTime(); times = times.filter(function(time1) { return t - time1 < 1000; }); if (times.length > 0 && Math.floor(times[times.length - 1] / 3000) !== Math.floor(t / 3000)) { improveFrameRateInResponseTo(times.length); } times.push(t); setRotationAngle(rotationAngle); } function getOutlineThickness(w, h) { return (w + h) * lineThicknessFactor; } function getRadiusFromSphereRadius(sr, scaleValue) { var sinA = sr / rotationRadius; var a = Math.asin(sinA); var rad = Math.tan(a) / scaleValue; return rad; } function getCircleRadius(w, h, scaleValue) { var r = 2; if (sphereRadius) r = sphereRadius.getValue(); if (r > 0.97 * rotationRadius) { return sanitizeFloat(w + h, 18000); } else { return getRadiusFromSphereRadius(r, scaleValue); } } function getMaxCircleRadius(w, h, scaleValue) { var r = 2; if (sphereRadius) r = sphereRadius.getValue(); var min = getCircleRadius(w, h, scaleValue); if (r > 0.97 * rotationRadius) { return min; } else { var max = getRadiusFromSphereRadius(r * (1 + getOutlineThickness(w, h) * scaleValue), scaleValue); return max; } } function updateCircleRadiusRange(gl, w, h, scaleValue, locationOfCircleRadiusRange, locationOfShowingCircumference) { var r = sphereRadius.getValue(); var min = getCircleRadius(w, h, scaleValue); var max = getMaxCircleRadius(w, h, scaleValue); if (r > 0.97 * rotationRadius) { setSphereOutlineUniformOnly(gl, locationOfShowingCircumference, false); } else { showSphereOutlineChanged(gl, locationOfShowingCircumference, w, h); gl.uniform2fv(locationOfCircleRadiusRange, [min, max]); } gl.uniform2fv(locationOfCircleRadiusRange, [min, max]); return max; } function drawGraphics(gl, w, h) { gl.viewport(0, 0, w, h); gl.clearColor(0, 0, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); } function draw() { if (!downloader.isDownloading()) { processTimeChange(); updateCircleRadiusRange(gl, w, h, scaleValue, locationOfCircleRadiusRange); drawGraphics(gl, w, h); } requestAnimationFrame(draw); } function processDrag(dx, dy) { rotationAngle += dx * 0.002; rotationRadius += dy * 0.004; mandelBrotDisplay.updateVisibility(); } function mouseMoved(event) { if (typeof oldMouseX === 'number') { var x = event.clientX; var y = event.clientY; processDrag(oldMouseX - x, oldMouseY - y); oldMouseX = x; oldMouseY = y; } } function mouseDown(event) { oldMouseX = event.clientX; oldMouseY = event.clientY; } function mouseUp(event) { oldMouseX = undefined; oldMouseY = undefined; } function touchMove(event) { if (event.targetTouches.length === 0) { /* rarely happens but I hit this case while touching and dragging a few times quickly. */ return; } var x = event.targetTouches[0].pageX; var y = event.targetTouches[0].pageY; if (typeof x === 'number' && typeof y === 'number' && typeof oldTouchX === 'number' && typeof oldTouchY === 'number') { processDrag(oldTouchX - x, oldTouchY - y); oldTouchX = x; oldTouchY = y; } } function touchStart(event) { oldTouchX = event.targetTouches[0].pageX; oldTouchY = event.targetTouches[0].pageY; } function touchEnd(event) { oldTouchX = undefined; oldTouchY = undefined; } function getPlaneCutValue() { return sanitizeFloat(planeCutValue.value, 0); } function setPlaneCutValue(newValue, forceUpdate) { if (forceUpdate || newValue !== getPlaneCutValue()) { planeCutValue.value = newValue; gl.uniform1f(locationOfPlaneCutValue, newValue); mandelBrotDisplay.planeCutValueUpdated(); } } function getPlaneCutAxisValue() { var checkedPlaneCutAxisInput = document.querySelector('[name="plane-cut-axis"]:checked'); return parseInt(checkedPlaneCutAxisInput.value); } function setPlaneCutAxis(newPlaneCutAxis, forceUpdate) { var val = getPlaneCutAxisValue(); if (forceUpdate || val !== newPlaneCutAxis) { if (val !== newPlaneCutAxis) { var planeCutAxisInput = document.querySelector('[name="plane-cut-axis"][value="' + newPlaneCutAxis + '"]'); planeCutAxisInput.checked = true; } gl.uniform1i(locationOfPlaneCutAxis, newPlaneCutAxis); mandelBrotDisplay.planeCutAxisChanged(); } } function getCRealValue() { return sanitizeFloat(cRealInput.value, 0.7); } function initPlaneCutSettings() { var lightSettings = document.getElementById('light-settings'); var wideColumn = document.getElementById('wide-column'); function displayModeUpdated() { if (!isPlaneCut()) { pixelSubsampling.useLowestQuality(); } setDisplayMode(getDisplayMode(), true); if (getDisplayMode() !== DEFAULT_DISPLAY_MODE) { wideColumn.setAttribute('class', 'show-plane-cut-settings'); } else { wideColumn.setAttribute('class', 'show-light-settings'); } mandelBrotDisplay.planeCutAxisChanged(); } function planeCutChanged() { setPlaneCutValue(getPlaneCutValue(), true); } function planeCutAxisChanged() { setPlaneCutAxis(getPlaneCutAxisValue(), true); } ['volume', 'plane-cut', 'max-cut-volume', 'min-cut-volume'].forEach(function(displayModeName) { var input = document.getElementById('display-mode-' + displayModeName); input.addEventListener('change', displayModeUpdated); }); planeCutValue.addEventListener('input', planeCutChanged); ['x', 'y', 'z'].forEach(function(axisName) { var planeCutAxis = document.getElementById('plane-cut-axis-' + axisName); planeCutAxis.addEventListener('change', planeCutAxisChanged); }); planeCutChanged(); planeCutAxisChanged(); } function setAmbientValue(newAmbientValue, forceUpdate) { var val = sanitizeFloat(ambientInput.value); if (newAmbientValue !== val || forceUpdate) { gl.uniform1f(locationOfAmbient, 1 - newAmbientValue); ambientInput.value = newAmbientValue; } } function setLineThicknessFactor(newLineThicknessFactor) { lineThicknessFactor = newLineThicknessFactor; } function initSettings() { var body = document.querySelector('body'); var settingsCloseButton = document.getElementById('collapse-settings-button'); var settingsExpandButton = document.getElementById('expand-settings-button'); var maxIterationsInput = document.getElementById('max-iterations'); var lightDirectionX = document.getElementById('light-x'); var lightDirectionY = document.getElementById('light-y'); var lightDirectionZ = document.getElementById('light-z'); let locationOfFractalIterationDeltas = gl.getUniformLocation(pid, "fractalIterationDelta"); let locationOfLightDirection = gl.getUniformLocation(pid, "lightDirection"); let locationOfCReal = gl.getUniformLocation(pid, "cReal"); function setCRealValue(newValue, forceUpdate) { if (getCRealValue() !== newValue || forceUpdate) { cRealInput.value = newValue; gl.uniform1f(locationOfCReal, newValue); mandelBrotDisplay.cRealUpdated(); } } function lightDirectionChanged() { var x = sanitizeFloat(lightDirectionX.value, 0); var y = sanitizeFloat(lightDirectionY.value, 0); var z = sanitizeFloat(lightDirectionZ.value, 0); var m = Math.sqrt(x * x + y * y + z * z); if (m === 0) { x = 1; } else { x /= m; y /= m; z /= m; } gl.uniform3fv(locationOfLightDirection, [x, y, z]); } function ambientChanged() { setAmbientValue(sanitizeFloat(ambientInput.value, 0.05), true); } function getMaxIterations() { var val = parseInt(maxIterationsInput.value); if (typeof val !== 'number' || isNaN(val)) val = 20; return val; } function setMaxIterations(newMaxIterations, forceChange) { if (typeof newMaxIterations !== 'number' || isNaN(newMaxIterations)) throw new Error('MaxIterations must be set to a number. Not: ' + newMaxIterations); var val = getMaxIterations(); if (val !== newMaxIterations || forceChange) { if (newMaxIterations > 300) throw new Error('MaxIterations can not be set to such a large number. ' + newMaxIterations); gl.uniform1f(locationOfFractalIterationDeltas, 1.0 / newMaxIterations); mandelBrotDisplay.maxIterationsChanged(); } if (!forceChange) { maxIterationsInput.value = newMaxIterations; } } function maxIterationsChanged() { setMaxIterations(getMaxIterations(), true); } function cRealChanged() { var val = getCRealValue(); gl.uniform1f(locationOfCReal, val); mandelBrotDisplay.cRealUpdated(); } function settingsClose() { body.setAttribute('class', 'settings-collapsed'); } function settingsExpand() { body.setAttribute('class', ''); } function animationUpdated(event) { if (event.detail) { var uiSettings = event.detail.props.uiSettings; rotationAngle = getDefaultedNumber(uiSettings.rotationAngle, rotationAngle); rotationRadius = getDefaultedNumber(uiSettings.rotationRadius, rotationRadius); sphereRadius.setValue(uiSettings.sphereRadius, sphereRadius.getValue()); setMaxIterations(getDefaultedInteger(uiSettings.maxIterations, getMaxIterations())); setPlaneCutAxis(getDefaultedInteger(uiSettings.planeCutAxis, getPlaneCutAxisValue()), false); setPeakOpacityInputValue(getDefaultedNumber(uiSettings.peakOpacity, getPeakOpacityInputValue())); setPlaneCutValue(getDefaultedNumber(uiSettings.planeCutValue, getPlaneCutValue())); setCRealValue(getDefaultedNumber(uiSettings.cReal, getCRealValue())); setAmbientValue(getDefaultedNumber(uiSettings.ambient, sanitizeFloat(ambientInput.value, 0.05))); positionY = getDefaultedNumber(uiSettings.positionY, positionY); scaleFactor = getDefaultedNumber(uiSettings.scaleFactor, scaleFactor); setDisplayMode(getDefaultedInteger(uiSettings.displayMode, getDisplayMode())); setLineThicknessFactor(getDefaultedNumber(uiSettings.lineThicknessFactor, 0.001)); setRotationAngle(rotationAngle); // update based on rotationRadius and rotationAngle. } } new AnimationUI(animationUpdated, downloader); showSphereOutlineInput.addEventListener('change', function() { showSphereOutlineChanged(gl, locationOfShowingCircumference, w, h); }); [lightDirectionX, lightDirectionY, lightDirectionZ].forEach(function(input) { input.addEventListener('input', lightDirectionChanged); }); maxIterationsInput.addEventListener('input', maxIterationsChanged); cRealInput.addEventListener('input', cRealChanged); settingsCloseButton.addEventListener('click', settingsClose); settingsExpandButton.addEventListener('click', settingsExpand); ambientInput.addEventListener('input', ambientChanged); showSphereOutlineChanged(gl, locationOfShowingCircumference, w, h); lightDirectionChanged(); maxIterationsChanged(); cRealChanged(); ambientChanged(); initPlaneCutSettings(); document.addEventListener('animation-update', animationUpdated); } function getDefaultedNumber(val1, defaultVal) { if (typeof val1 === 'number' && !isNaN(val1)) return val1; else return defaultVal; } function getDefaultedInteger(val1, defaultVal) { return parseInt(getDefaultedNumber(val1, defaultVal)); } function getDefaultedBool(val1, defaultVal) { if (typeof val1 === 'boolean') return val1; else return defaultVal; } initSettings(); window.addEventListener('resize', resized); canvas.addEventListener('mousemove', mouseMoved); canvas.addEventListener('mousedown', mouseDown); canvas.addEventListener('mouseup', mouseUp); canvas.addEventListener('touchstart', touchStart); canvas.addEventListener('touchmove', touchMove); canvas.addEventListener('touchend', touchEnd); resized(); draw(); mandelBrotDisplay.updateSize(); });

Volumetric 3D Julia Set Fractal Viewer