Created
October 16, 2012 15:58
-
-
Save lukegalea/3900188 to your computer and use it in GitHub Desktop.
Attempted radial fade in
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Ashley Madison</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" | |
content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
<script type="text/javascript" src="javascripts/libs/easeljs/easeljs-0.5.0.min.js"></script> | |
<script type="text/javascript" src="javascripts/libs/easeljs/filters/Filter.js"></script> | |
<script type="text/javascript" src="javascripts/libs/easeljs/filters/AlphaMapFilter.js"></script> | |
</head> | |
<style> | |
body { | |
background-color: black; | |
margin: 0px; | |
} | |
.is-hidden { display: none; } | |
canvas { | |
-webkit-transform: translate3d(0, 0, 0); | |
} | |
</style> | |
<script type="text/javascript"> | |
var canvas, stage, scaleFactor, circle, img, maskStage; | |
var FRAMERATE = 21; | |
var IMAGE_WIDTH = 640; | |
var CIRCLE_RADIUS = 200; | |
var CANVAS_WIDTH = window.innerWidth - 4; | |
var CANVAS_HEIGHT = window.innerHeight - 4; | |
window.onload = function() { | |
canvas = document.getElementById('videoCanvas'); | |
canvas.setAttribute('width', CANVAS_WIDTH); | |
canvas.setAttribute('height', CANVAS_HEIGHT); | |
scaleFactor = CANVAS_WIDTH / IMAGE_WIDTH; | |
var maskCanvas = document.getElementById('maskCanvas'); | |
maskCanvas.setAttribute('width', CANVAS_WIDTH); | |
maskCanvas.setAttribute('height', CANVAS_HEIGHT); | |
maskStage = new createjs.Stage(canvas); | |
maskStage.enableMouseOver(0); | |
var midX = CANVAS_WIDTH / 2; | |
var midY = CANVAS_HEIGHT / 2; | |
stage = new createjs.Stage(canvas); | |
stage.enableMouseOver(0); | |
var g = new createjs.Graphics(); | |
g.beginRadialGradientFill( | |
["#000", "#EEE"], | |
[1, 0], | |
50, 50, 0, | |
50, 50, 50 | |
); | |
g.drawCircle(50, 50, 50); | |
circle = new createjs.Shape(g); | |
circle.regX = 25; | |
circle.regY = 25; | |
circle.x = 235; | |
circle.y = 100; | |
circle.scaleX = circle.scaleY = 4; | |
maskStage.addChild(circle); | |
maskStage.update(); | |
img = new createjs.Bitmap(document.getElementById('shushblack')); | |
img.scaleX = img.scaleY = scaleFactor; | |
var filter = new createjs.AlphaMapFilter(maskStage.canvas); | |
img.filters = [filter]; | |
img.cache(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); | |
stage.addChild(img); | |
createjs.Ticker.setFPS(FRAMERATE); | |
createjs.Ticker.addListener(window); | |
console.log("Stage initialized"); | |
}; | |
function tick() { | |
circle.scaleX = circle.scaleY = circle.scaleX + 0.1; | |
maskStage.update(); | |
img.updateCache(); | |
stage.update(); | |
} | |
</script> | |
<body> | |
<img id="shushblack" class="is-hidden" src="images/shushblack.jpg"/> | |
<canvas id="videoCanvas"> | |
</canvas> | |
<canvas class="is-hidden" id="maskCanvas"> | |
</canvas> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment