topical media & game development
mobile-graphic-easel-examples-Filters-input.htm / htm
<!DOCTYPE html>
<html>
<head>
<title>EaselJS: Filters Example</title>
<link type="text/css" href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" />
<link type="text/css" href="mobile-graphic-easel-examples-assets-css-darkhive-jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Bitmap.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Rectangle.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-Filter.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-BoxBlurFilter.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-ColorFilter.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-ColorMatrix.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-ColorMatrixFilter.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script type="text/javascript">
var img;
var stage;
var bmp;
var DELTA_INDEX;
var blurXSlider;
var blurFilter, hueFilter, constrastFilter, saturationFilter, brightnessFilter;
var redChannelFilter, greenChannelFilter, blueChannelFilter;
var colorFilter;
var slideInterval = -1;
var cm;
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
document.getElementById("loader").className = "loader";
img = new Image();
img.onload = handleImageLoad;
img.src = "mobile-graphic-easel-examples-assets-flowers_small.jpg";
}
function handleImageLoad() {
document.getElementById("loader").className = "";
var canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
bmp = new createjs.Bitmap(img);
bmp.scaleX = bmp.scaleY = 2;
bmp.cache(0,0,img.width,img.height);
stage.addChild(bmp);
$(".brightnessSlider").slider({
value: 0,
min: -100,
max: 100,
disabled:false,
change:handleChange,
slide: handleSlide
});
$(".saturationSlider").slider({
value: 0,
min: -100,
max: 100,
disabled:false,
change:handleChange,
slide: handleSlide
});
$(".contrastSlider").slider({
value: 0,
min: -100,
max: 100,
disabled:false,
change:handleChange,
slide: handleSlide
});
$(".hueSlider").slider({
value: 0,
min: -100,
max: 100,
disabled:false,
change:handleChange,
slide: handleSlide
});
$(".blurYSlider").slider({
value: 0,
min: 0,
max: 30,
disabled:false,
change:handleChange,
slide: handleSlide
});
$(".blurXSlider").slider({
value: 0,
min: 0,
max: 30,
disabled:false,
change:handleChange,
slide: handleSlide
});
$(".redChannelSlider").slider({
value: 255,
min: 0,
max: 255,
disabled:false,
change:handleChange,
slide: handleSlide
});
$(".greenChannelSlider").slider({
value: 255,
min: 0,
max: 255,
disabled:false,
change:handleChange,
slide: handleSlide
});
$(".blueChannelSlider").slider({
value: 255,
min: 0,
max: 255,
disabled:false,
change:handleChange,
slide: handleSlide
});
$("#resetBtn").click(handleReset);
applyEffect();
}
function handleSlide() {
if (slideInterval == -1) {
slideInterval = setInterval(applyEffect, 250);
}
}
function handleChange() {
clearInterval(slideInterval);
slideInterval = -1;
applyEffect();
}
function applyEffect() {
var brightnessValue = $(".brightnessSlider").slider("option", "value");
var contrastValue = $(".contrastSlider").slider("option", "value");
var saturationValue = $(".saturationSlider").slider("option", "value");
var hueValue = $(".hueSlider").slider("option", "value");
var blurXValue = $(".blurXSlider").slider("option", "value");
var blurYValue = $(".blurYSlider").slider("option", "value");
var redChannelvalue = $(".redChannelSlider").slider("option", "value");
var greenChannelValue = $(".greenChannelSlider").slider("option", "value");
var blueChannelValue = $(".blueChannelSlider").slider("option", "value");
cm = new createjs.ColorMatrix();
cm.adjustColor(brightnessValue, contrastValue, saturationValue, hueValue);
colorFilter = new createjs.ColorMatrixFilter(cm);
blurFilter = new createjs.BoxBlurFilter(blurXValue, blurYValue, 2);
redChannelFilter = new createjs.ColorFilter(redChannelvalue/255,1,1,1);
greenChannelFilter = new createjs.ColorFilter(1,greenChannelValue/255,1,1);
blueChannelFilter = new createjs.ColorFilter(1,1,blueChannelValue/255,1);
updateImage();
}
function handleReset() {
$(".brightnessSlider").slider("option", "value", 0);
$(".saturationSlider").slider("option", "value", 0);
$(".hueSlider").slider("option", "value", 0);
$(".blurYSlider").slider("option", "value", 0);
$(".blurXSlider").slider("option", "value", 0);
$(".contrastSlider").slider("option", "value", 0);
$(".redChannelSlider").slider("option", "value", 255);
$(".greenChannelSlider").slider("option", "value", 255);
$(".blueChannelSlider").slider("option", "value", 255);
applyEffect();
}
function updateImage() {
bmp.filters = [colorFilter, blurFilter, redChannelFilter, greenChannelFilter, blueChannelFilter];
bmp.updateCache();
stage.update();
}
</script>
<style type="text/css">
/* define a width for the sliders by styling the wrapping div */
.hueSlider { width:100px; }
.saturationSlider { width:100px; }
.contrastSlider { width:100px; }
.brightnessSlider { width:100px; }
.blurXSlider { width:100px; }
.blurYSlider { width:100px; }
.redChannelSlider { width:100px; }
.greenChannelSlider { width:100px; }
.blueChannelSlider { width:100px; }
</style>
</head>
<body onload="init()">
<div id="loader"></div>
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Filters</h1>
<p>Demonstrates using filters. Change the values in order to preview the results. Filters are applied on top of each other.</p>
</header>
<canvas id="testCanvas" width="960" height="250"></canvas>
<table>
<td>
<table cellspacing="7" border="0" cellpadding="3">
<tr>
<th><div>Brightness:</div></th>
<td><div class="brightnessSlider"></div></td>
<td>
<th><div>Contrast:</div></th>
<td><div class="contrastSlider"></div></td>
</td>
</tr>
<tr>
<th><div>Hue:</div></th>
<td><div class="hueSlider"></div></td>
<td>
<th><div>Saturation:</div></th>
<td><div class="saturationSlider"></div></td>
</td>
</tr>
</table>
</td>
<td>
<table cellspacing="7" border="0" cellpadding="3">
<tr>
<th rowspan="1" align="center">Blur:</th>
<td>
<div class="blurXSlider"></div>
</td>
<td>
<div class="blurYSlider"></div>
</td>
</tr>
<tr>
<th><div>RGB:</div></th>
<td>
<div class="redChannelSlider"></div>
</td>
<td>
<div class="greenChannelSlider"></div>
</td>
<td>
<div class="blueChannelSlider"></div>
</td>
</tr>
</table>
</td>
</table>
<input type="button" id="resetBtn" name="resetBtn" value="Reset" />
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
