A flow that preserves a parabola
Last active
July 20, 2021 21:07
-
-
Save robinhouston/3b83565003dac262e591bfaac3b6396e to your computer and use it in GitHub Desktop.
Parabolic flow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment