Perlin Flow Field Vectors

Rendering a basic flow field or vector field based on the force provided by the perlin noise. Moving the mouse will change the vector length and rotation factors.

// ...

function render()
{
    _octaves[ 0 ].x += .3;
    _octaves[ 0 ].y -= .3;
    _octaves[ 1 ].x -= .5;
    _octaves[ 1 ].y += .5;

    _aFactor += ( _aFNew - _aFactor ) * 0.0652;
    _rFactor += ( _rFNew - _rFactor ) * 0.0652;

    _perlin.fill( _perlinPixels, _octaves, 0.5, 0.035 );

    _context.clearRect( 0, 0, _canvas.width, _canvas.height );

    var step = 8;

    for( var x = 0; x < _width; x += step )
    {
        for( var y = 0; y < _height; y += step )
        {
            var force = getForce( Math.floor( x / PERLIN_SCALE ), Math.floor( y / PERLIN_SCALE ) );
            var radius = force * force * force * _rFactor;
            var angle = force * Math.PI * _aFactor;

            if( force < 0.6 )
            {
                force = 0.6;
            }

            _context.beginPath();
            _context.lineWidth = 1;
            _context.strokeStyle = '#' + hsv2rgb( force * 1.2, 0.9, 0.9 ).toString( 16 );
            _context.moveTo( x, y );
            _context.lineTo( x + Math.cos( angle ) * radius, y + Math.sin( angle ) * radius );
            _context.stroke();
        }
    }
}

// ...