Created
January 21, 2015 13:15
-
-
Save nicoptere/bf03f83715f8f8bd283b to your computer and use it in GitHub Desktop.
noise function for canvas
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
/** | |
* creates a noise on the specified 2d context's canvas | |
* @ctx a 2d context | |
* @rgba color code specifies which channels are affected (default = 0 ) | |
* @min noise lower bound ( >= 0 ) | |
* @max noise upper bound ( <= 0xFF ) | |
* */ | |
function noise( ctx, rgba, min, max ) | |
{ | |
/* | |
RGBA mode. possible values | |
OPAQUE | |
0 : opaque greyscale ( white noise + black background ) | |
1 : opaque red ( red channel + black background ) | |
2 : opaque green ( green channel + black background ) | |
3 : opaque red + green | |
4 : opaque blue ( blue channel + black background ) | |
5 : opaque red + blue | |
6 : opaque green + blue | |
7 : opaque red + green + blue | |
TRANSPARENT | |
8 : transparent alpha ( black + transparent background ) | |
9 : transparent red ( red channel + transparent background ) | |
10 : transparent green ( green channel + transparent background ) | |
11 : transparent red + green | |
12 : transparent blue ( blue channel + transparent background ) | |
12 : transparent red + green | |
13 : transparent red + blue | |
14 : transparent green + blue | |
15 : transparent red + green + blue | |
*/ | |
if( rgba == null ) rgba = 0; | |
var r = ( rgba & 1 ) != 0; | |
var g = ( rgba & 2 ) != 0; | |
var b = ( rgba & 4 ) != 0; | |
var rv = r ? 1 : 0; | |
var gv = g ? 1 : 0; | |
var bv = b ? 1 : 0; | |
var color = !( !r && !g && !b ); | |
var alpha = ( rgba & 8 ) != 0; | |
var alpha_div = ( rv + gv + bv ); | |
if( alpha_div == 0 )alpha_div = 1; | |
/* | |
NOISE lower & upper bounds | |
*/ | |
min = min || 0; | |
max = max || 0xFF; | |
var delta = ( max - min ); | |
var img = ctx.getImageData( 0, 0, ctx.canvas.width, ctx.canvas.height ); | |
var data = img.data; | |
for( var i = 0; i < data.length; i += 4 ) | |
{ | |
if ( !color ) | |
{ | |
var val = min + ( parseInt(Math.random() * delta) ); | |
data[i] = data[i + 1] = data[i + 2] = val; | |
} | |
else | |
{ | |
if( r ) rv = data[i] = min + ( parseInt( Math.random() * delta ) ); | |
if( g ) gv = data[i + 1] = min + ( parseInt( Math.random() * delta ) ); | |
if( b ) bv = data[i + 2] = min + ( parseInt( Math.random() * delta ) ); | |
} | |
if( alpha ) | |
{ | |
if( color ) | |
{ | |
data[i + 3] = parseInt( ( rv + gv + bv ) / alpha_div ); | |
} | |
else | |
{ | |
data[i + 3] = parseInt( Math.random() * 0xFF ); | |
} | |
} | |
else | |
{ | |
data[i + 3] = 255; | |
} | |
} | |
ctx.putImageData( img,0,0 ); | |
} |
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
//test | |
var i = 0; | |
var w = 0xFF; | |
var h = 0x80; | |
var padding = 16; | |
for( var y = 0; y < 4; y++ ) | |
{ | |
for( var x = 0; x < 4; x++ ) | |
{ | |
//create & place canvas | |
var c = document.createElement( "canvas" ); | |
c.width = w; | |
c.height = h; | |
c.style.position = "absolute"; | |
c.style.padding = padding + "px"; | |
c.style.left = x * ( w + padding * 2 ) + "px"; | |
c.style.top = y * ( h + padding * 2 ) + "px"; | |
c.style.width = w + "px"; | |
c.style.height = h + "px"; | |
document.body.appendChild( c ); | |
//compute noise | |
var ctx = c.getContext( "2d" ); | |
noise( ctx, i, 0, 0xFF ); | |
//writing text | |
ctx.lineWidth = 2; | |
ctx.strokeStyle = "#000"; | |
ctx.fillStyle = "#FFF"; | |
ctx.font = "small-caps 14px Verdana"; | |
ctx.strokeText("noise( ctx, "+ i +", 0, 0xFF )", 16,32); | |
ctx.fillText("noise( ctx, "+ i +", 0, 0xFF )", 16,32); | |
i++; | |
} | |
} | |
//background pattern | |
var bg = document.createElement("canvas"); | |
bg.width = w = 16; | |
bg.height = h = 16; | |
ctx = bg.getContext( "2d" ); | |
ctx.strokeStyle = "#BBB"; | |
ctx.lineWidth = .1; | |
for( y = 0; y < h; y++ ) | |
{ | |
for( x = 0; x < h; x++ ) | |
{ | |
if( x == y-h/2 ) ctx.strokeRect( x, y, 1,1 ); | |
if( x == h/2-y ) ctx.strokeRect( x, y, 1,1 ); | |
if( h-x == h/2-y ) ctx.strokeRect( x, y, 1,1 ); | |
} | |
} | |
document.body.style.backgroundImage = "url(" + bg.toDataURL("image/png")+ ")"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment