Advertisement
metalx1000

Hidden Message - Red Glasses Needed

Jul 22nd, 2013
476
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.89 KB | None | 0 0
  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4.         <!--
  5.        This could be a lot better, but it works.
  6.        Message passed to page with variable 'msg'
  7.        will be hidden under moving red text
  8.        and visable only when viewed through red glasses
  9.  
  10.        Kris Occhipinti July 22, 2013
  11.        http://filmsbykris.com
  12.  
  13.        -->
  14.   <head>
  15.     <style>
  16.       body {
  17.         width:  100%;
  18.         height: 100%;
  19.         margin: 0px;
  20.         padding: 0px;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <canvas id="myCanvas" width="900px" height="800px"></canvas>
  26.     <script>
  27.       var canvas = document.getElementById('myCanvas');
  28.       var context = canvas.getContext('2d');
  29.         var msg = "<?php echo $_GET['msg'];?>";
  30.         x = window.innerWidth/2/2;
  31.         y = 75;
  32.  
  33.           context.canvas.width  = window.innerWidth;
  34.           context.canvas.height = window.innerHeight;
  35.  
  36.         text = "There are two types of Spies in this world.  Good Spies and Bad Spies!";
  37.  
  38.  
  39.       function wrapText(context, text, x, y, maxWidth, lineHeight) {
  40.         var words = text.split(' ');
  41.         var line = '';
  42.  
  43.         for(var n = 0; n < words.length; n++) {
  44.          var testLine = line + words[n] + ' ';
  45.          var metrics = context.measureText(testLine);
  46.          var testWidth = metrics.width;
  47.          if (testWidth > maxWidth && n > 0) {
  48.            context.fillText(line, x, y);
  49.             line = words[n] + ' ';
  50.             y += lineHeight;
  51.           }
  52.           else {
  53.             line = testLine;
  54.           }
  55.         }
  56.         context.fillText(line, x, y);
  57.       }
  58.  
  59.         function ani(){
  60.                 context.clearRect(0, 0, canvas.width, canvas.height);
  61.                 context.clearRect(0, 0, canvas.width, canvas.height);
  62.               context.font = 'italic 50pt Calibri';
  63.        
  64.                 context.fillStyle = "lightblue";
  65.        
  66. //              context.fillText(msg, x, y);
  67.  
  68.                 wrapText(context, msg, x, y, window.innerWidth / 2 , 80)
  69.  
  70.                 context.save();        
  71.                
  72.               context.font = 'italic 20pt Calibri';
  73.                for (var i=1;i < 500;i++){
  74.                        context.fillStyle = "rgb(255,0,0)";
  75.                        context.rotate(Math.PI*2/Math.random()/4);
  76.                      context.fillText(text, Math.random() * context.canvas.width - 200 , Math.random() * context.canvas.height);
  77.        
  78.                }
  79.        
  80.               for (var i=1;i < 100;i++){
  81.                        context.fillStyle = "rgb(255,0,0)";
  82.                        context.rotate(Math.PI*2/Math.random()/4);
  83.                      context.fillText(text, Math.random() * context.canvas.width - 200 , Math.random() * context.canvas.height);
  84.        
  85.                }
  86.                context.restore();
  87.  
  88.  
  89.        }
  90.  
  91.        setInterval( function(){ani();}, 100);
  92.    </script>
  93.   </body>
  94. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement