Donation
Do you like this code ? Is it worth one or two dollars ? Any donation is appreciated !
Thank you for your support :)
Source Code
library JS [crossbrowser resource] :
library/imgRotate.js
////////////////////////////////////////////////////////////
// images rotate() mini library
// IE : DXTransform Matrix filter
// Firefox/Opera : <canvas> implementation
// ===============================================
// written by Gerard Ferrandez
// initial version - July 18, 2006
// www.dhteumeuleu.com
// modified - July 20, 2006 - optional drawImage arguments
// modified - July 22, 2006 - object functions
// modified - Oct 24, 2006 - preload images
////////////////////////////////////////////////////////////
var canvas = false;
var context = false;
var isCanvas = (document.createElement("canvas").getContext) ? true : false;
createCanvas = function(o) {
if (isCanvas) {
canvas = document.createElement("canvas");
canvas.style.position = "absolute";
canvas.style.width = nw + "px";
canvas.style.height = nh + "px";
o.appendChild(canvas);
context = canvas.getContext("2d");
canvas.resize = function(w, h) {
if (canvas) {
canvas.width = w;
canvas.height = h;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
}
}
return canvas;
} else {
o.resize = function(w, h) {
return false;
}
return o;
}
}
if (isCanvas) {
/* ==== Canvas compatible ==== */
createImage = function(imgsrc, FilterType) {
img = new Image();
var cont = document.getElementById("canvasImages") ? document.getElementById("canvasImages") : document.getElementById("matrixImages");
img.src = cont.getElementsByTagName("img").item(imgsrc).src;
img.sx = 0;
img.sy = 0;
img.w = 0;
img.h = 0;
img.loaded = false;
img.onload = function(){
this.sx = this.width * .5;
this.sy = this.height * .5;
this.w = this.width;
this.h = this.height;
this.loaded = true;
}
img.drawImage = function(x, y, rotation, alpha, sx, sy, w, h) {
if (sx == undefined) sx = this.sx, sy = this.sy;
if (w == undefined) w = this.w, h = this.h;
if(this.loaded) {
context.save();
context.globalAlpha = alpha;
context.translate(x, y);
context.rotate(rotation);
context.drawImage(this, Math.round(-sx), Math.round(-sy), Math.round(w), Math.round(h));
context.restore();
}
}
return img;
}
} else {
/* ==== IE6/IE7 ==== */
createImage = function(imgsrc, FilterType) {
var o = document.createElement("img");
o.src = document.getElementById("matrixImages").getElementsByTagName("img").item(imgsrc).src;
o.style.position = "absolute";
o.style.left = "-10000px";
o.style.filter = "progid:DXImageTransform.Microsoft.matrix(FilterType="+FilterType+", sizingMethod=\"auto expand\") alpha(opacity=100)";
o.sx = 0;
o.sy = 0;
o.w = 0;
o.h = 0;
o.loaded = false;
o.rs = true;
o.drawImage = function(x, y, rotation, alpha, sx, sy, w, h) {
if (this.complete) {
if (!o.loaded) {
this.sx = this.width * .5, this.sy = this.height * .5;
this.w = this.width, this.h = this.height;
o.loaded = true;
}
if (sx == undefined) sx = this.sx, sy = this.sy;
if (w == undefined) this.rs = false, w = this.w, h = this.h;
var cos = Math.cos(rotation);
var sin = Math.sin(rotation);
var f = this.filters.item(0);
f.M11 = cos;
f.M12 = -sin;
f.M21 = sin;
f.M22 = cos;
this.style.left = Math.round(x - sin * ((sin > 0) ? h-sy : -sy) - cos * ((cos > 0) ? sx : sx-w)) + "px";
this.style.top = Math.round(y - sin * ((sin > 0) ? sx : sx-w) - cos * ((cos > 0) ? sy : sy-h)) + "px";
if (this.rs) {
this.style.width = Math.round(w) + "px";
this.style.height = Math.round(h) + "px";
}
this.filters.item(1).opacity = Math.round(alpha * 100);
}
}
canvas.appendChild(o);
return o;
}
}
//////////////////////////////////////////////////////////////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>the open door - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #111;
position: absolute;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
left: 25%;
top: 20%;
width: 50%;
height: 60%;
background: #000;
overflow: hidden;
border: #333 solid 1px;
}
#canvasImages {
visibility: hidden;
}
#matrixImages {
visibility: hidden;
}
</style>
<script type="text/javascript" src="library/imgRotate.js"></script>
<script type="text/javascript">
// ////////////////////////////////////////////
// script by Gerard Ferrandez - october 2000
// IE DXTransform Matrix filter
// <canvas> version : July 2006
// ////////////////////////////////////////////
// http://www.dhteumeuleu.com
// ////////////////////////////////////////////
function resize() {
var o = document.getElementById("screen");
nx = o.offsetLeft;
ny = o.offsetTop;
nw = o.offsetWidth;
nh = o.offsetHeight;
canvas.resize(nw, nh);
}
onresize = resize;
document.onmousemove = function(e) {
if (window.event) e=window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
}
///////////////////////////////////////////////
var xm = 200;
var ym = 0;
var nx = 0;
var ny = 0;
var nw = 0;
var nh = 0;
var v = 1;
var cy = 0;
var dOOt;
function rOt(){
if (isCanvas) context.clearRect(0, 0, nw, nh);
v += xm / 800;
v *= .99;
cy += (1.5 * (ym - (nw / 2)) - cy) / 5;
dOOt.drawImage(nw * .5, nh * .5, v, 1, Math.abs(cy), Math.abs(cy), Math.abs(cy * 2), Math.abs(cy * 2));
}
onload = function() {
/* ==== create Canvas container ==== */
canvas = createCanvas(document.getElementById("screen"));
/* ==== init ===== */
resize();
dOOt = createImage(0, "nearest");
/* ==== run ==== */
setInterval(rOt, 16);
}
</script>
</head>
<body>
<div id="screen"></div>
<div id="canvasImages">
<img alt="0" src="face5a.jpg">
</div>
<div id="matrixImages">
<img alt="0" src="face5a.jpg">
</div>
</body>
</html>
Resource Images :
../images/face5a.jpg
../images/face5a.jpg
Resource music/sound :
../sound/FF7plane.mid
All sounds and images are credited to the respective author(s).