Skip to content

Instantly share code, notes, and snippets.

@esmooov

esmooov/gist:2930625

Created June 14, 2012 14:18
Show Gist options
  • Save esmooov/2930625 to your computer and use it in GitHub Desktop.
Save esmooov/2930625 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Transform</title>
<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
<script src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/ColorMatrix.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/ColorMatrixFilter.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<link type="text/css" href="./assets/css/dark-hive/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">
var manifest;
var stage;
var canvas;
var imageContainer;
var images;
var loader;
var image_width;
var image_height;
function checkerboard(mx,my,first){
if(typeof(first) == "undefined"){first = false}
var canvas = KP.canvas;
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var data = imageData.data;
var buf = new ArrayBuffer(imageData.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data32 = new Uint32Array(buf);
for (var y = 0; y < canvasHeight; ++y) {
for (var x = 0; x < canvasWidth; ++x) {
if(Math.floor((y+my)/25) % 2 == Math.floor((x+mx)/25) % 2){
value = 0xff;
} else {
value = 0x00;
}
if(first){
data32[y * canvasWidth + x] =
(255 << 24) | // alpha
(value << 16) | // blue
(value << 8) | // green
value; // red
} else {
var oldr = data[(y * canvasWidth * 4) + (x*4)];
var oldg = data[(y * canvasWidth * 4) + (x*4) + 1];
var oldb = data[(y * canvasWidth * 4) + (x*4) + 2];
var newb = (oldb ^ value) && 0xff;
var newg = (oldg ^ value) && 0xff;
var newr = (oldr ^ value) && 0xff;
data32[y * canvasWidth + x] =
(255 << 24) | // alpha
(newb << 16) | // blue
(newg << 8) | // green
newr; // red
}
}
}
imageData.data.set(buf8);
ctx.putImageData(imageData, 0, 0);
return buf;
}
function dotit(mx,my){
KP.stage = new Stage(KP.canvas);
KP.stage.autoClear = false;
var circle = new Shape();
var g = circle.graphics;
g.setStrokeStyle(15, 'round', 'round');
g.beginStroke(Graphics.getRGB(0, 0, 0));
g.beginFill(Graphics.getRGB(255, 255, 0));
var radius = Math.floor(Math.random() * 100);
g.drawCircle(mx, my, radius); //55,53
g.endFill();
g.setStrokeStyle(1, 'round', 'round');
KP.stage.addChild(circle);
KP.stage.update();
KP.stage.removeChild(circle);
}
function warp(angle,cx,cy){
var canvas = KP.canvas;
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var imageData = KP.ctx.getImageData(0,0,canvasWidth, canvasHeight);
var buf = new ArrayBuffer(imageData.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data32 = new Uint32Array(buf);
var data = imageData.data;
for (var y = 0; y < canvasHeight; ++y) {
for (var x = 0; x < canvasWidth; ++x) {
var oldCoord = warpCoords(angle,x,y,cx,cy);
//var interpColor = interp(data,oldCoord[0],oldCoord[1]);
//var interpColor = getPoint(data,Math.floor(oldCoord[0]),Math.floor(oldCoord[1]));
var oldx = oldCoord[0] % 1 > 0.5 ? Math.ceil(oldCoord[0]) : Math.floor(oldCoord[0]);
var oldy = oldCoord[1] % 1 > 0.5 ? Math.ceil(oldCoord[1]) : Math.floor(oldCoord[1]);
var interpColor = getPoint(data,oldx,oldy);
var oldr = interpColor[0];
var oldg = interpColor[1];
var oldb = interpColor[2];
data32[y * canvasWidth + x] =
(255 << 24) | // alpha
(oldb << 16) | // blue
(oldg << 8) | // green
oldr; // red
}
}
imageData.data.set(buf8);
KP.ctx.putImageData(imageData, 0, 0);
return buf8 ;
}
function getPoint(data,x,y){
var r = data[4*x+4*y*KP.canvas.width]
var g = data[1+4*x+4*y*KP.canvas.width]
var b = data[2+4*x+4*y*KP.canvas.width]
var a = data[3+4*x+4*y*KP.canvas.width]
return [r,g,b,a];
}
function weightedAvg(x,xone,xtwo,colorone,colortwo){
if(xone == xtwo){return colorone}
var weightone = (x-xone)/(xtwo-xone),
weighttwo = (xtwo-x)/(xtwo-xone),
r = weightone * colorone[0] + weighttwo * colortwo[0],
g = weightone * colorone[1] + weighttwo * colortwo[1],
b = weightone * colorone[2] + weighttwo * colortwo[2],
a = weightone * colorone[3] + weighttwo * colortwo[3];
return [r,g,b,a];
}
function interp(data,x,y){
var xone = Math.floor(x),
xtwo = Math.ceil(x),
yone = Math.floor(y),
ytwo = Math.ceil(y),
point_ul = getPoint(data,xone,yone),
point_ur = getPoint(data,xtwo,yone),
point_ll = getPoint(data,xone,ytwo),
point_lr = getPoint(data,xtwo,ytwo),
top_color = weightedAvg(x,xone,xtwo,point_ul,point_ur),
bottom_color = weightedAvg(x,xone,xtwo,point_ll,point_lr),
color = weightedAvg(y,yone,ytwo,top_color,bottom_color);
return color;
}
function warpCoords(angle,x,y,cx,cy){
var dx = x - cx,
dy = y - cy,
distance = dx*dx + dy*dy;
distance = Math.sqrt(distance);
if(distance > 300){
outx = x;
outy = y;
} else {
a = Math.atan2(dy,dx) + angle * (300 - distance) / 300;
var outx = cx + distance * Math.cos(a);
var outy = cy + distance * Math.sin(a);
}
return [outx,outy]
}
$(function(){
KP = {ctrlDown: false, shiftDown: false}
KP.canvas = document.getElementById('testCanvas');
KP.ctx = KP.canvas.getContext('2d');
KP.width = KP.canvas.width;
KP.height = KP.canvas.height;
KP.stage = new Stage(KP.canvas);
KP.stage.autoClear = false;
checkerboard(0,0,true);
$("#testCanvas").click(function(e){
if(KP.ctrlDown){
dotit(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
} else if(KP.shiftDown) {
warp(1,e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
} else {
checkerboard(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
}
});
$(document).keydown(function(e){
if(e.keyCode == 91){
KP.ctrlDown = true;
} else if (e.keyCode == 16){
KP.shiftDown = true;
}
});
$(document).keyup(function(e){
KP.ctrlDown = false;
KP.shiftDown = false;
});
})
</script>
<link rel="stylesheet" href="assets/demoStyles.css"/>
<style type="text/css">
#slider {
width:100px;
left: 830px;
top: 350px;
}
LABEL {
position: absolute;
left: 830px;
top: 330px;
width: 100px;
}
</style>
</head>
<body>
<div id="loader"></div>
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Transformation</h1>
<p>This sample shows transformations, including skews. Drag the slider to affect the skew amount.</p>
</header>
<div width="960" height="400" style="position:absolute; ">
<div id="slider" class="transformSlider"></div>
<label id="amount" style="color:#777">Amount</label>
</div>
<canvas id="testCanvas" width="960" height="400"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment