Skip to content

Instantly share code, notes, and snippets.

@anabastos
Created Aug 23, 2020
Embed
What would you like to do?
Animacao de fractal colorido em canvas
<html>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas><br>
<script>
let xmin=-2,ymin=-2,scale=50;
let x,y,i,xt;
let cx,cy;
let color;
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
let pallette=[];
// Faz as cores do role
for(x = 1; x < 256; x++) {
if(x < 85) { // colors 0-84
r=x * 3;
g=0;
b=0;
} if(x > 84 && x < 171) { // colors 85-170
r=0;
g=3 * (x-84);
b=0;
} if(x>170) { // colors 170-256
r=0;
g=0;
b=3 * (x-170);
}
r= r.toString(16); // conversion to hex
g= g.toString(16);
b= b.toString(16);
if (r.length==1) r="0"+r; // add a zero in front to change single-digit to double digit
if (g.length==1) g="0"+g;
if (b.length==1) b="0"+b;
pallette[x]="#"+r+g+b; // final hex string
console.log(pallette[x])
}
mandel();
function zoom() // Zoom em 39,-48 (mexer no xz, yz)
{
let xz = 39
let yz = -48
xmin=xmin+Math.floor(xz/4)/scale;
ymin=-Math.floor(yz/4)/scale+0.0001/scale+ymin;
scale=scale * 1.1;
mandel();
}
a=setInterval(zoom, 100);
function mandel()
{
for(x = 0; x < 200; x++)
{
for(y = 0; y < 200; y++)
{
i=0;
cx=xmin+x/scale;
cy=ymin+y/scale;
zx=0;
zy=0;
do {
xt=zx * zy;
zx=zx * zx-zy * zy+cx;
zy=2 * xt+cy;
i++;
}
while(i < 255 && (zx * zx + zy * zy) < 4);
context.beginPath();
context.rect(x * 4, 800-y * 4, 4, 4);
context.fillStyle = pallette[i];
context.fill();
}
}
}
</script>
</body>
</html>
@anabastos

This comment has been minimized.

Copy link
Owner Author

@anabastos anabastos commented Aug 23, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment