CiCi Spiral

App.hx

import js.Browser.document;
import js.Browser.window;
import js.html.CanvasElement;
import js.html.CanvasRenderingContext2D;

class App {

    static var canvas : CanvasElement;
    static var ctx : CanvasRenderingContext2D;
    static var numCircles = 2455;
    static var circleRadius = 0.5;

    static function main() {

        canvas = document.createCanvasElement();
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        document.body.appendChild( canvas );

        canvas.style.background = '#000000';

        ctx = canvas.getContext2d();

        render();

        window.addEventListener( 'resize', e -> {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            render();
        }, false );

        window.addEventListener( 'wheel', e -> {

            numCircles += e.deltaY;
            if( numCircles < 1000 ) numCircles = 1000;
            else if( numCircles > 10000 ) numCircles = 10000;

            circleRadius += e.deltaX / 50;
            if( circleRadius < 0.01 ) circleRadius = 0.01;
            else if( circleRadius > 100 ) circleRadius = 100;

            render();
        }, false );
    }

    static function render() {

        var startRadius = 50;
        var endRadius = canvas.width / 2;

        var circleRadius = App.circleRadius;

        var rad = 0.0;
        var rot = 0.0;
        var px = 0.0;
        var py = 0.0;

        var sv = 0.4;

        ctx.fillStyle = '#000';
        ctx.fillRect( 0, 0, canvas.width, canvas.height );
        ctx.fillStyle = '#efefef';
        ctx.lineWidth = 1;

        for( i in 0...numCircles ) {

            rad += sv;
            circleRadius += 0.01;

            rot += Math.PI * 2 / numCircles * 100;
            px = canvas.width / 2 + Math.cos( rot ) * rad;
            py = canvas.height/ 2 + Math.sin( rot ) * rad;

            ctx.beginPath();
            ctx.arc( px, py, circleRadius, 0, Math.PI * 2 );
            ctx.fill();
        }
    }
}