notes/Hidden Message Red Glasses Needed-AM6SdP0m.php.html
<!DOCTYPE HTML><html>
<!--
This could be a lot better, but it works.
Message passed to page with variable 'msg'
will be hidden under moving red text
and visable only when viewed through red glasses
Kris Occhipinti July 22, 2013
http://filmsbykris.com
-->
<head><style>
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style></head><body><canvas id="myCanvas" width="900px" height="800px"></canvas><script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var msg = "<?php echo $_GET['msg'];?>";
x = window.innerWidth/2/2;
y = 75;
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
text = "There are two types of Spies in this world. Good Spies and Bad Spies!";
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
function ani(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = 'italic 50pt Calibri';
context.fillStyle = "lightblue";
// context.fillText(msg, x, y);
wrapText(context, msg, x, y, window.innerWidth / 2 , 80)
context.save();
context.font = 'italic 20pt Calibri';
for (var i=1;i < 500;i++){
context.fillStyle = "rgb(255,0,0)";
context.rotate(Math.PI*2/Math.random()/4);
context.fillText(text, Math.random() * context.canvas.width - 200 , Math.random() * context.canvas.height);
}
for (var i=1;i < 100;i++){
context.fillStyle = "rgb(255,0,0)";
context.rotate(Math.PI*2/Math.random()/4);
context.fillText(text, Math.random() * context.canvas.width - 200 , Math.random() * context.canvas.height);
}
context.restore();
}
setInterval( function(){ani();}, 100);
</script></body></html>