When smile become great
<!--Written by Igor Kobzar ( private individual ). Is not a personal data. June 9, 2025. Tested with EDGE, Crome, Firefox, WaterFox, QQ Browser, Sleipnir, Falcon Portable and others.-->
<!--Without external libraries. Hybrid scheme with minimized value, network independent. As verified example enter parameters 30, 25, 50, 50.-->
<!DOCTYPE html>
<html>
<style>
html, body {
background: #a2a8b4;
}
</style>
<body>
<button type="button" style="background: #9197a1; color: #f4f9f1; border: none; border-radius: 12px; padding: 16px 48px; font-size: 32px; cursor: pointer;" onclick="alert('Written by Igor Kobzar. ')">Info</button>
<button type="button" style="background: #9197a3; color: #f4f9f3; border: none; border-radius: 12px; padding: 16px 48px; font-size: 32px; cursor: pointer;" onclick="location.reload()">Back</button>
<button type="button" style="background: #9197a5; color: #f4f9f5; border: none; border-radius: 12px;padding: 16px 48px; font-size: 32px; cursor: pointer;" onclick="location.href='F3.html';">Next</button>
<button type="button" style="background: #9197a7; color: #f4f9f7; border: none; border-radius: 12px;padding: 16px 48px; font-size: 32px; cursor: pointer;" onclick="location.href='F2.html';">Previous</button>
<button id="download" style="background: #9197a9; color: #f4f9f9; border: none; border-radius: 12px;padding: 16px 48px; font-size: 32px; cursor: pointer;">Download</button>
<script> document.getElementById("date").innerHTML = Date(); </script>
<p style="color:#9197a3; background-color:#f4f9f7; font-size:32px;" align="center" id="outnum"></p>
<script>outnum.innerHTML = Date();</script>
<canvas id="myCanvas" width="2000" height="2000" ></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
let r = Number(prompt('Enter index of internal iterations'));
let g = Number(prompt('Enter coefficient in interval [-100,100]'));
let t = Number(prompt('Enter coefficient in interval [-100,100]'));
let f = Number(prompt('Enter coefficient in interval [-100,100]'));
const imgData = ctx.createImageData(2000, 2000);
for (let i = 0; i < imgData.data.length; i += 4) {
a = ((i % 8000) + 13000) / 200;
h = (Math.round(i / 2000) + 8000) / 200;
s = 0;
for(let j = 0; j < r; j +=1){
s = Math.abs(h) - g;
h = Math.abs(a) + Math.abs(s) - t;
a = Math.abs(a) - Math.abs(s) + f;
}
imgData.data[i+0] = Math.abs(a * 2) % 255 ;
imgData.data[i+1] = Math.abs(h * 2) % 255 ;
imgData.data[i+2] = Math.abs(s * 2) % 255 ;
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);
const download = document.getElementById("download");
download.addEventListener("click", () => {
const link = document.createElement("a");
link.download = "image.png";
link.href = c.toDataURL();
link.click();
});
</script>
</body>
</html>
Execution of this code take a while ( some seconds ). Result will look like fractalized pattern with 4 MPixels size ( True Colour ).
