Skip to content

Instantly share code, notes, and snippets.

@zarazum

zarazum/index.html

Created December 7, 2014 22:36
Show Gist options
  • Save zarazum/9406689ba2b8c1849578 to your computer and use it in GitHub Desktop.
Save zarazum/9406689ba2b8c1849578 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas Data Bang Making some numbers into pixels // source http://jsbin.com/sewonu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Making some numbers into pixels" />
<meta charset="utf-8">
<title>Canvas Data Bang</title>
</head>
<body>
<canvas id='zcanvas' width=256 height=256></canvas>
<script id="jsbin-javascript">
var
W = 256,
H = 256,
canvas = document.getElementById('zcanvas'),
ctx = canvas.getContext('2d'),
u32,
pixels;
// Retina doubling
// canvas.width = W*2;
// canvas.height = H*2;
// canvas.style.width = W + 'px';
// Let's draw something
ctx.fillStyle = '#000';
ctx.fillRect(0,0,W,H);
ctx.fillStyle = 'rgba(255,255,255,0.25)';
for(var i = 0; i < 32; i++){
var
x = 0 | Math.random()*W,
y = 0 | Math.random()*H,
w = 0 | Math.random()*(W>>2)+2,
h = 0 | Math.random()*(H>>2)+2;
ctx.fillRect(x,y,w,h);
}
// TBD get Uint32 view into pixel data
// TBD crush alpha with bytebeat
pixels = ctx.getImageData(0,0,W,H);
for(var i = 0; i < W*H; i++){
var a = ((((i<<3)|88) % (i*Math.random())) & 255);
pixels.data[i*4+3] = pixels.data[i*4+3]*0.5 + 0.5*a;
}
ctx.putImageData(pixels,0,0);
</script>
<script id="jsbin-source-javascript" type="text/javascript">var
W = 256,
H = 256,
canvas = document.getElementById('zcanvas'),
ctx = canvas.getContext('2d'),
u32,
pixels;
// Retina doubling
// canvas.width = W*2;
// canvas.height = H*2;
// canvas.style.width = W + 'px';
// Let's draw something
ctx.fillStyle = '#000';
ctx.fillRect(0,0,W,H);
ctx.fillStyle = 'rgba(255,255,255,0.25)';
for(var i = 0; i < 32; i++){
var
x = 0 | Math.random()*W,
y = 0 | Math.random()*H,
w = 0 | Math.random()*(W>>2)+2,
h = 0 | Math.random()*(H>>2)+2;
ctx.fillRect(x,y,w,h);
}
// TBD get Uint32 view into pixel data
// TBD crush alpha with bytebeat
pixels = ctx.getImageData(0,0,W,H);
for(var i = 0; i < W*H; i++){
var a = ((((i<<3)|88) % (i*Math.random())) & 255);
pixels.data[i*4+3] = pixels.data[i*4+3]*0.5 + 0.5*a;
}
ctx.putImageData(pixels,0,0);</script></body>
</html>
Raw
jsbin.sewonu.js
var
W = 256,
H = 256,
canvas = document.getElementById('zcanvas'),
ctx = canvas.getContext('2d'),
u32,
pixels;
// Retina doubling
// canvas.width = W*2;
// canvas.height = H*2;
// canvas.style.width = W + 'px';
// Let's draw something
ctx.fillStyle = '#000';
ctx.fillRect(0,0,W,H);
ctx.fillStyle = 'rgba(255,255,255,0.25)';
for(var i = 0; i < 32; i++){
var
x = 0 | Math.random()*W,
y = 0 | Math.random()*H,
w = 0 | Math.random()*(W>>2)+2,
h = 0 | Math.random()*(H>>2)+2;
ctx.fillRect(x,y,w,h);
}
// TBD get Uint32 view into pixel data
// TBD crush alpha with bytebeat
pixels = ctx.getImageData(0,0,W,H);
for(var i = 0; i < W*H; i++){
var a = ((((i<<3)|88) % (i*Math.random())) & 255);
pixels.data[i*4+3] = pixels.data[i*4+3]*0.5 + 0.5*a;
}
ctx.putImageData(pixels,0,0);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment