Rosa matemática

by GustavoSatheler

HTML

<canvas id="canvas" width="400" height="400"> </canvas>

CSS

body {
    background-color: black;
}

#caixa {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
    border-radius: 10px;
}

JavaScript

// Por Victor Ribeiro

x = 0;
ang = 150;
angX = 1;
color = 0;

function anim() {
    c = document.getElementById("canvas").getContext("2d");
    x++;
    color++;
    if (color == 255) {
        color = 0;
    }
    if (ang < 50 || ang > 150) {
        angX = -angX;
    }
    ang += angX;
    var left = ang * Math.sin(x * 2 * Math.PI / 2000) + 200;
    var top = ang * Math.cos(x * 2 * Math.PI / 2000) + 200;
    //c.beginPath();
    //c.fillStyle = "rgba(0,0,0,0.01)";
    //c.fillRect(0,0,400,400);
    c.fillStyle = "hsl(" + color + ",100%, 50%)";
    c.fillRect(left, top, 1, 1);


    corre = setTimeout(anim, 3);
}

anim();