Generating 3D magical images with hidden patterns graphics ref https www hidden 3d com meta charset utf 8 meta content width device width initial scale 1 name viewport h1 Stereogram Demo h1 section canvas id canvas width 400 height 400 style width 400px Sorry your browser doesn t support HTML5 Canvas canvas img id stereogram width 400 height 400 style display none src div class buttons form name brush style display none div class brush swatches Brush Density input name value type radio class brush value id brush 100 value 100 label for brush 100 label input name value type radio class brush value id brush 75 value 75 label for brush 75 label input name value type radio class brush value id brush 50 value 50 label for brush 50 label input name value type radio class brush value id brush 25 value 25 label for brush 25 label input name value type radio class brush value id brush 0 value 0 label for brush 0 label div div class brush sizes Brush Size input name size type radio class brush size id sm brush value 10 label for sm brush label input name size type radio class brush size id md brush value 20 label for md brush label input name size type radio class brush size id lg brush value 40 label for lg brush label div form div class clearfix div button id show stereogram Show Stereogram button button id show canvas Show Depth Map button button id redraw Redraw Shapes button button id draw mode Draw Your Own button button id back to shapes style display none Back to Shapes button button id clear style display none Clear button div section section hr hr p Stereogram example written in JavaScript for generating stereogram images in the browser p p In the above example pixel values from an HTML5 Canvas are turned into depth data which are then used to generate a stereogram image The code looks something like this p pre var canvas document getElementById canvas Stereogram render el stereogram depthMapper new Stereogram CanvasDepthMapper canvas pre section script type text javascript src https tony pizza github io Stereogram js stereogram js script script type text javascript src https tony pizza github io Stereogram js depthmappers CanvasDepthMapper js script script function var canvas document getElementById canvas context this canvas getContext 2d stereogram document getElementById stereogram drawMode false showingStereogram false window addEventListener resize resize false document getElementById show stereogram onclick function renderStereogram canvas style display none stereogram style display block document getElementById show stereogram style display none document getElementById show canvas style display inline showingStereogram true document getElementById show canvas onclick function stereogram style display none canvas style display block document getElementById show stereogram style display inline document getElementById show canvas style display none showingStereogram false document getElementById redraw onclick function redraw if showingStereogram renderStereogram document getElementById clear onclick function clear if showingStereogram document getElementById show canvas click for var i 0 i document brush value length i document brush value i onchange function brush value Math ceil parseInt getRadioVal document brush value 255 100 for var i 0 i document brush size length i document brush size i onchange function brush size parseInt getRadioVal document brush size function getRadioVal form name if typeof form elements name value undefined return form elements name value var val radios form elements name for var i 0 i radios length i if radios i checked val radios i value break return val function renderStereogram Stereogram render el stereogram colors generatePalette 10 depthMapper new Stereogram CanvasDepthMapper document getElementById canvas function randomRGBa return Math floor Math random 256 Math floor Math random 256 Math floor Math random 256 255 function generatePalette numColors var palette for var i 0 i numColors i palette push randomRGBa return palette function redraw var fill i width canvas width height canvas height shapes 5 shade 255 shapes clear for i shapes 1 i 0 i fill Math round shade i context fillStyle rgb fill fill fill context beginPath context moveTo Math floor Math random width Math floor Math random height context lineTo Math floor Math random width Math floor Math random height context lineTo Math floor Math random width Math floor Math random height context fill function clear context fillStyle ffffff context fillRect 0 0 canvas width canvas height function resize stereogram width canvas width window innerWidth 400 400 window innerWidth redraw drawing code document getElementById draw mode onclick function drawMode true canvas style border 1px solid aaa document getElementById redraw style display none this style display none var clearBtn document getElementById clear clearBtn click clearBtn style display inline document brush style display inline document getElementById back to shapes style display inline document getElementById back to shapes onclick function drawMode false canvas style border none document getElementById redraw style display inline this style display none var clearBtn document getElementById clear clearBtn click clearBtn style display none document brush style display none document getElementById draw mode style display inline redraw document getElementById show stereogram click var px py drawing false x 0 y 0 var brush value 0 size 10 opacity 0 5 function draw x y w v a if drawMode return var gradient context createRadialGradient x y 0 x y w gradient addColorStop 0 rgba v v v a gradient addColorStop 1 rgba v v v 0 context beginPath context arc x y w 0 2 Math PI context fillStyle gradient context fill context closePath canvas onmousedown function e if drawMode return drawing true px e pageX canvas offsetLeft py e pageY canvas offsetTop draw px py brush size brush value brush opacity document body onmouseup function if drawMode return drawing false canvas onmousemove function e if drawMode return if drawing x e pageX canvas offsetLeft y e pageY canvas offsetTop var dis Math sqrt Math pow px x 2 Math pow px y 2 for var i 0 i dis i var s i dis draw px s x 1 s py s y 1 s brush size brush value brush opacity px x py y resize document brush size 2 click document brush value 4 click document getElementById show stereogram click script
efined return form elements name value var val radios form elements name for var i 0 i radios length i if radios i checked val radios i value break return val function renderStereogram Stereogram render el stereogram colors generatePalette 10 depthMapper new Stereogram CanvasDepthMapper document getElementById canvas function randomRGBa return Math floor Math random 256 Math floor Math random 256 Math floor Math random 256 255 function generatePalette numColors var palette for var i 0 i numColors i palette push randomRGBa return palette function redraw var fill i width canvas width height canvas height shapes 5 shade 255 shapes clear for i shapes 1 i 0 i fill Math round shade i context fillStyle rgb fill fill fill context beginPath context moveTo Math floor Math random width Math floor Math random height context lineTo Math floor Math random width Math floor Math random height context lineTo Math floor Math random width Math floor Math random height context fill function clear context fillStyle ffffff context fillRect 0 0 canvas width canvas height function resize stereogram width canvas width window innerWidth 400 400 window innerWidth redraw drawing code document getElementById draw mode onclick function drawMode true canvas style border 1px solid aaa document getElementById redraw style display none this style display none var clearBtn document getElementById clear clearBtn click clearBtn style display inline document brush style display inline document getElementById back to shapes style display inline document getElementById back to shapes onclick function drawMode false canvas style border none document getElementById redraw style display inline this style display none var clearBtn document getElementById clear clearBtn click clearBtn style display none document brush style display none document getElementById draw mode style display inline redraw document getElementById show stereogram click var px py drawing false x 0 y 0 var brush value 0 size 10 opacity 0 5 function draw x y w v a if drawMode return var gradient context createRadialGradient x y 0 x y w gradient addColorStop 0 rgba v v v a gradient addColorStop 1 rgba v v v 0 context beginPath context arc x y w 0 2 Math PI context fillStyle gradient context fill context closePath canvas onmousedown function e if drawMode return drawing true px e pageX canvas offsetLeft py e pageY canvas offsetTop draw px py brush size brush value brush opacity document body onmouseup function if drawMode return drawing false canvas onmousemove function e if drawMode return if drawing x e pageX canvas offsetLeft y e pageY canvas offsetTop var dis Math sqrt Math pow px x 2 Math pow px y 2 for var i 0 i dis i var s i dis draw px s x 1 s py s y 1 s brush size brush value brush opacity px x py y resize document brush size 2 click document brush value 4 click document getElementById show stereogram click script