Skip to content

Instantly share code, notes, and snippets.

@letmaik

letmaik/ndarray.html

Created August 16, 2015 19:07
Show Gist options
  • Save letmaik/57a256e366b06773c40a to your computer and use it in GitHub Desktop.
Save letmaik/57a256e366b06773c40a to your computer and use it in GitHub Desktop.
Download ZIP
Fun with ndarray and canvas
Raw
ndarray.html
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="https://jspm.io/[email protected]"></script>
<script>
System.import('npm:ndarray').then(function(ndarray) {
System.import('npm:ndarray-warp').then(function(warp) {
var canvas = document.getElementById('canvas')
var w = canvas.width
var h = canvas.height
var ctx = canvas.getContext('2d')
ctx.fillStyle = 'white'
ctx.fillRect(0, 0, w, h)
var imgData = ctx.getImageData(0, 0, w, h)
var rgba = ndarray(imgData.data, [h, w, 4])
function random() {
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
// create random noise
rgba.set(y, x, 0, Math.random() * 255)
rgba.set(y, x, 1, Math.random() * 255)
rgba.set(y, x, 2, Math.random() * 255)
}
}
ctx.putImageData(imgData, 0, 0)
}
function foo() {
warp(rgba, rgba, function(out, inp) {
var dx = inp[0] - w/2
var dy = inp[1] - h/2
var r = Math.sqrt(dx * dx + dy * dy)
var theta = Math.atan2(dy, dx)
out[0] = 0.98 * r * Math.cos(theta + 0.01 * r) + w/2
out[1] = 0.98 * r * Math.sin(theta + 0.01 * r) + h/2
out[2] = inp[2]
})
ctx.putImageData(imgData, 0, 0)
requestAnimationFrame(foo)
}
random()
setTimeout(function() {requestAnimationFrame(foo)}, 1000)
setInterval(function() {requestAnimationFrame(random)}, 5000)
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment