robinhouston/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A flow that preserves a parabola

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Parabolic flow</title>
<script src="http://bl.ocks.org/robinhouston/raw/6096562/rAF.js" charset="utf-8"></script>
<script src="http://bl.ocks.org/robinhouston/raw/6151172/streamer.js" charset="utf-8"></script>
<style>
    canvas { background-color: #4C4C4C; }
</style>

<canvas width=960 height=800></canvas>

<script>
    var NUM_STREAMS = 4000,
        MAX_AGE = 30,
        FADE_RATE = 0.02,
        BORDER = 100;

    var canvas = document.getElementsByTagName("canvas")[0],
        cx = canvas.getContext("2d"),
        streamer = Streamer({
            canvas: canvas,
            num_streams: NUM_STREAMS,
            max_age: MAX_AGE,
            fade_rate: FADE_RATE,
            border: BORDER,
            velocity: to_px(5, parabolic(1, 0))
        });

    cx.strokeStyle = "rgba(255,255,255,0.2)";
    cx.fillStyle = "rgba(255,255,255,0.05)";
    cx.fillRect(0, 0, canvas.width, canvas.height);
    streamer.start();

    // * Vector field transformers

    // Transform a vector field from origin-centred coordinates to pixel coords
    function to_px(n, f) {
        return function(x_px, y_px, t) {
            var divisor = Math.min(canvas.width, canvas.height)/n,
                x = (x_px - canvas.width/2) / divisor,
                y = (y_px - canvas.height/2) / divisor;

            var v = f(x, y, t);
            return v;
        };
    }


    // * Primitive vector fields
    function parabolic() {
        return function(x, y, t) {
            return [ 5, 10 * x];
        }
    }
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Parabolic flow</title>
	<script src="http://bl.ocks.org/robinhouston/raw/6096562/rAF.js" charset="utf-8"></script>
	<script src="http://bl.ocks.org/robinhouston/raw/6151172/streamer.js" charset="utf-8"></script>
	<style>
	canvas { background-color: #4C4C4C; }
	</style>

	<canvas width=960 height=800></canvas>

	<script>
	var NUM_STREAMS = 4000,
	MAX_AGE = 30,
	FADE_RATE = 0.02,
	BORDER = 100;

	var canvas = document.getElementsByTagName("canvas")[0],
	cx = canvas.getContext("2d"),
	streamer = Streamer({
	canvas: canvas,
	num_streams: NUM_STREAMS,
	max_age: MAX_AGE,
	fade_rate: FADE_RATE,
	border: BORDER,
	velocity: to_px(5, parabolic(1, 0))
	});

	cx.strokeStyle = "rgba(255,255,255,0.2)";
	cx.fillStyle = "rgba(255,255,255,0.05)";
	cx.fillRect(0, 0, canvas.width, canvas.height);
	streamer.start();

	// * Vector field transformers

	// Transform a vector field from origin-centred coordinates to pixel coords
	function to_px(n, f) {
	return function(x_px, y_px, t) {
	var divisor = Math.min(canvas.width, canvas.height)/n,
	x = (x_px - canvas.width/2) / divisor,
	y = (y_px - canvas.height/2) / divisor;

	var v = f(x, y, t);
	return v;
	};
	}


	// * Primitive vector fields
	function parabolic() {
	return function(x, y, t) {
	return [ 5, 10 * x];
	}
	}
	</script>