class Complex { constructor(real, imaginary) { this.real = real; this.imaginary = imaginary; } get Im() { return this.imaginary; } set Im(newIm) { this.imaginary = newIm; } get Re() { return this.real; } set Re(newRe) { this.real = newRe; } static Add(c1, c2) { return new Complex(c1.Re + c2.Re, c1.Im + c2.Im); } static Square(c) { let res = new Complex(0, 0); let temp = (c.Re * c.Re) - (c.Im * c.Im); res.Im = 2 * c.Re * c.Im; res.Re = temp; return res; } static Magnitude(c) { return Math.sqrt((c.Re * c.Re) + (c.Im * c.Im)); } toString() { return `${this.real} + ${this.imaginary}i`; } }; function byId(id) { return document.getElementById(id); } var rcfy, gcfy, bcfy, rcfm, gcfm, bcfm, rcfx, gcfx, bcfx; var zoom = 1.0; var xStep = zoom*0.5; var xOffset = 0.0; var yStep = zoom*0.25; var yOffset = 0.0; function Draw(cvs, ctx) { ctx.fillStyle = "black"; ctx.fillRect(0, 0, cvs.width, cvs.height); for (var x = 0; x < cvs.width; x++) { for (var y = 0; y < cvs.height; y++) { let nx = (x - (cvs.width / (2*zoom))) / (cvs.width / (4/zoom))+(xStep*xOffset); let ny = (y - (cvs.height / (2*zoom))) / (cvs.height / (4/zoom))+(yStep*yOffset); let C = new Complex(nx, ny); let Z = new Complex(0, 0); let i = 0; while (i < 100) { i++; Z = Complex.Add(Complex.Square(Z), C); if (Complex.Magnitude(Z) > 2) break; } if (i < 100) ctx.fillStyle = `rgb(${i % rcfy * rcfx}, ${i % gcfy * gcfx}, ${i % bcfy * bcfx})`; else ctx.fillStyle = `rgb(${i}, ${i}, ${i})`; ctx.fillRect(x, y, 1, 1); } } } function yUpdate() { rcfy = byId("rngRCFy").value; gcfy = byId("rngGCFy").value; bcfy = byId("rngBCFy").value; } function mUpdate() { rcfm = byId("rngRCFm").value; gcfm = byId("rngGCFm").value; bcfm = byId("rngBCFm").value; } function xUpdate() { rcfx = Math.floor(rcfm / ((rcfy-1) % rcfy)); gcfx = Math.floor(gcfm / ((gcfy-1) % gcfy)); bcfx = Math.floor(bcfm / ((bcfy-1) % bcfy)); } function txtUpdate() { byId("txtRCF").innerHTML = `i Mod ${rcfy}(y) * ${rcfx}(x) <= ${rcfm}(m)`; byId("txtGCF").innerHTML = `i Mod ${gcfy}(y) * ${gcfx}(x) <= ${gcfm}(m)`; byId("txtBCF").innerHTML = `i Mod ${bcfy}(y) * ${bcfx}(x) <= ${bcfm}(m)`; } function allUpdate() { yUpdate(); mUpdate(); xUpdate(); txtUpdate(); } $(function(){ alert("Wait for 5-10 seconds and see magic :)"); alert("If you found any beautiful color set - write it in comments! Most beautiful will bi in preset list ;)"); alert("Y- and Scale-step customization will be added soon"); let cvs = document.getElementsByTagName("canvas")[0]; let ctx = cvs.getContext("2d"); allUpdate(); Draw(cvs, ctx); byId("btnDraw").onclick = function() { alert("Now wait 4-20 seconds..."); Draw(cvs, ctx); }; /* byId("cvs").onmousemove = function(e){ let rect = e.target.getBoundingClientRect(); let x = e.clientX - rect.left; let y = e.clientY - rect.top; let nx = (x - (cvs.width / (2*zoom))) / (cvs.width / (4/zoom)); let ny = (y - (cvs.height / (2*zoom))) / (cvs.height / (4/zoom)); byId("txtPos").value = `MouseX: ${nx}; MouseY: ${ny}`; }; */ byId("btnXplus").onclick = function(){ alert("Now wait"); xOffset += 0.5; Draw(cvs, ctx); }; byId("btnXminus").onclick = function(){ alert("Now wait"); xOffset -= 0.5; Draw(cvs, ctx); } byId("btnYplus").onclick = function(){ alert("Now wait"); yOffset += 0.5; Draw(cvs, ctx); } byId("btnYminus").onclick = function(){ alert("Now wait"); yOffset -= 0.5; Draw(cvs, ctx); } byId("btnScalePlus").onclick = function(){ alert("Now wait"); zoom += 0.5; Draw(cvs, ctx); } byId("btnScaleMinus").onclick = function(){ alert("Now wait"); zoom -= 0.5; Draw(cvs, ctx); } byId("rngXstep").onchange = function(){xStep = byId("rngXstep").value}; byId("rngRCFy").oninput = allUpdate; byId("rngRCFm").oninput = allUpdate; byId("rngGCFy").oninput = allUpdate; byId("rngGCFm").oninput = allUpdate; byId("rngBCFy").oninput = allUpdate; byId("rngBCFm").oninput = allUpdate; byId("colorPreset").onchange = function() { switch (byId("colorPreset").value) { case "wb": byId("rngRCFy").value = 2; byId("rngRCFm").value = 255; byId("rngGCFy").value = 2; byId("rngGCFm").value = 255; byId("rngBCFy").value = 2; byId("rngBCFm").value = 255; break; case "gr": byId("rngRCFy").value = 100; byId("rngRCFm").value = 255; byId("rngGCFy").value = 100; byId("rngGCFm").value = 255; byId("rngBCFy").value = 100; byId("rngBCFm").value = 255; break; case "def": byId("rngRCFy").value = 100; byId("rngRCFm").value = 255; byId("rngGCFy").value = 50; byId("rngGCFm").value = 128; byId("rngBCFy").value = 100; byId("rngBCFm").value = 255; break; case "eb": byId("rngRCFy").value = 2; byId("rngRCFm").value = 2; byId("rngGCFy").value = 50; byId("rngGCFm").value = 128; byId("rngBCFy").value = 100; byId("rngBCFm").value = 255; break; case "ep": byId("rngRCFy").value = 2; byId("rngRCFm").value = 255; byId("rngGCFy").value = 4; byId("rngGCFm").value = 255; byId("rngBCFy").value = 5; byId("rngBCFm").value = 255; break; case "pup": byId("rngRCFy").value = 21; byId("rngRCFm").value = 19; byId("rngGCFy").value = 68; byId("rngGCFm").value = 66; byId("rngBCFy").value = 63; byId("rngBCFm").value = 189; break; } allUpdate(); }; });

[WEB] Mandelbrot Set v1.0