Rotate, skew, resize for DHTML game

[Nik Coughlin]

Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?

The functions need to be fast enough for use in a top-down scrolling game.
Or would I be better off preprocessing all of the images with something
server side such as PHP and then preloading them into my JavaScript already
manipulated?

The only thing I don't like about the idea of preprocessing the images is
that I will have to preload a very large number of images, ie all of the
sprites rotated at different angles, resized at different sizes etc.

I am considering using Flash but because it would involve learning
ActionScript I would prefer to do it with a combination of JavaScript and
PHP. The other alternative that I was considering was using SVG, but not
many people have an SVG capable browser or have downloaded the SVG plugin.

Would also appreciate any links to resources that would help me with this
sort of thing. TIA!

[Randy Webb]

Nik Coughlin wrote:

Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?

No. JS has no ability to turn, rotate or otherwise manipulate images :-\
I wish it did...

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[J. J. Cale]

I am not promoting Microsloth or any of it's products but...
AFAIK IE5.5 alows images and text to be rotated skewed and resized through
the filter and style objects
for resizing
currEl.style.zo om=var+'%';
for rotation
var deg2radians = Math.PI * 2 / 360;
currEl.style.fi lter="progid:DX ImageTransform. Microsoft.Matri x(sizingMethod= '
auto expand')";
// I use onmousemove to trap event.clientX/Y to produce 'rotation' values
so the user can rotate or skew with a mouse drag
document.onmous eover=makeRotat ionParam;
var lastX=0, lastY=0;
function makeRotationPar am() {
var x=event.clientX , y=event.clientY ;
var aValue=compute differences in current and last mouse position
according to your needs;
lastX=x;
lastY=y;
rotateObj(aValu e);
}
function rotateObj(rotat ion) {
if(rotation>=36 0) rotation=0;
var rad = rotation * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
currEl.filters. item(0).M11 = costheta;
currEl.filters. item(0).M12 = -sintheta;
currEl.filters. item(0).M21 = sintheta;
currEl.filters. item(0).M22 = costheta;
}
and if you fiddle with the filter params (M11...) and/or the rad/sin/cos
values you'll find the skew and more
Jimbo
"Randy Webb" <Hi************ @aol.com> wrote in message
news:-P************** ******@comcast. com...

Nik Coughlin wrote:

Are there methods for manipulating images in JavaScript that would allow me to write functions to rotate, skew, mask and resize images (bitmaps)?

No. JS has no ability to turn, rotate or otherwise manipulate images :-\
I wish it did...

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Ian Sedwell]

Hi Nik

You can't do this in JavaScript, but you can use JavaScript to call Java and
Java can do it. If you can get hold of J.A.Pew "Instant Java" (ISBN
0-13-565821-7), then you will find that the book comes with a CD on which
the necessary Java applets are already provided in such a way that you can
use them with getting your hands dirty. And if you can only get a
second-hand copy with the CD missing, it still has all the source code you
need.

All the best

Ian
On 2004/09/04 03:16, in article 2p************@ uni-berlin.de, "Nik Coughlin"
<nrkn!hopeful ly no sp***@woosh.co. nz> wrote:

Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?

The functions need to be fast enough for use in a top-down scrolling game.
Or would I be better off preprocessing all of the images with something
server side such as PHP and then preloading them into my JavaScript already
manipulated?

The only thing I don't like about the idea of preprocessing the images is
that I will have to preload a very large number of images, ie all of the
sprites rotated at different angles, resized at different sizes etc.

I am considering using Flash but because it would involve learning
ActionScript I would prefer to do it with a combination of JavaScript and
PHP. The other alternative that I was considering was using SVG, but not
many people have an SVG capable browser or have downloaded the SVG plugin.

Would also appreciate any links to resources that would help me with this
sort of thing. TIA!

[Jim Ley]

On Mon, 6 Sep 2004 11:36:40 +0000 (UTC), Ian Sedwell
<ia*********@bt click.com> wrote:

You can't do this in JavaScript, but you can use JavaScript to call Java and
Java can do it. If you can get hold of J.A.Pew "Instant Java" (ISBN
0-13-565821-7), then you will find that the book comes with a CD on which
the necessary Java applets are already provided in such a way that you can
use them with getting your hands dirty. And if you can only get a
second-hand copy with the CD missing, it still has all the source code you
need.

SVG, DirectAnimation and VML are also all more than capable of doing
it, I would recommend SVG as the most future proof and cross-platform,
and Directanimation as the most supported (every win32 IE since IE4)

Jim.

[Andrew Thompson]

On Mon, 6 Sep 2004 11:36:40 +0000 (UTC), Ian Sedwell wrote:

Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?

... You can't do this in JavaScript, but you can use JavaScript to call Java and
Java can do it.

Core Java will read .png, .gif and .jpeg,
but to read .bmp it would require JAI.
<http://java.sun.com/products/java-media/jai/whatis.html#fun ction>

Of course .bmp's (if that is what the OP
meant by bitmaps) are a bad format to use
on the net in any case. Gif are good for
256 color images, while jpeg is good for
natural images. Use png for everything else.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[J. J. Cale]

Sorry
document.onmous emove is what I meant;
"J. J. Cale" <ph****@netvisi on.net.il> wrote in message
news:41******** @news.012.net.i l...

I am not promoting Microsloth or any of it's products but...
AFAIK IE5.5 alows images and text to be rotated skewed and resized through
the filter and style objects
for resizing
currEl.style.zo om=var+'%';
for rotation
var deg2radians = Math.PI * 2 / 360;
currEl.style.fi lter="progid:DX ImageTransform. Microsoft.Matri x(sizingMethod= ' auto expand')";
// I use onmousemove to trap event.clientX/Y to produce 'rotation' values
so the user can rotate or skew with a mouse drag
document.onmous eover=makeRotat ionParam;
var lastX=0, lastY=0;
function makeRotationPar am() {
var x=event.clientX , y=event.clientY ;
var aValue=compute differences in current and last mouse position
according to your needs;
lastX=x;
lastY=y;
rotateObj(aValu e);
}
function rotateObj(rotat ion) {
if(rotation>=36 0) rotation=0;
var rad = rotation * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
currEl.filters. item(0).M11 = costheta;
currEl.filters. item(0).M12 = -sintheta;
currEl.filters. item(0).M21 = sintheta;
currEl.filters. item(0).M22 = costheta;
}
and if you fiddle with the filter params (M11...) and/or the rad/sin/cos
values you'll find the skew and more
Jimbo
"Randy Webb" <Hi************ @aol.com> wrote in message
news:-P************** ******@comcast. com...

Nik Coughlin wrote:

Are there methods for manipulating images in JavaScript that would

allow

me to write functions to rotate, skew, mask and resize images (bitmaps)?

No. JS has no ability to turn, rotate or otherwise manipulate images :-\
I wish it did...

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Dr John Stockton]

JRS: In article <41********@new s.012.net.il>, dated Mon, 6 Sep 2004
09:24:40, seen in news:comp.lang. javascript, J. J. Cale
<ph****@netvisi on.net.il> posted :

var deg2radians = Math.PI * 2 / 360;
Math.Pi / 180 // more elegant
if(rotation>=36 0) rotation=0;
rotation %= 360 // should be much better, in the general case.

"Randy Webb" <Hi************ @aol.com> wrote in message
news:-P************** ******@comcast. com...

Nik Coughlin wrote:

> Are the

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

Responses should go after trimmed quotes, and sigs should only be quoted
if cited. Please read the newsgroup FAQ.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[Nik Coughin]

Andrew Thompson wrote:

On Mon, 6 Sep 2004 11:36:40 +0000 (UTC), Ian Sedwell wrote:

Are there methods for manipulating images in JavaScript that would
allow me to write functions to rotate, skew, mask and resize images
(bitmaps)?

..

You can't do this in JavaScript, but you can use JavaScript to call
Java and Java can do it.

Core Java will read .png, .gif and .jpeg,
but to read .bmp it would require JAI.
<http://java.sun.com/products/java-media/jai/whatis.html#fun ction>

Of course .bmp's (if that is what the OP
meant by bitmaps) are a bad format to use
on the net in any case. Gif are good for
256 color images, while jpeg is good for
natural images. Use png for everything else.

Don't worry, I wouldn't dream of using bmps on the net. Also, there are
many instances where png is more efficient than gif for 256 color images. I
am looking for a pure JavaScript solution, so I will probably preprocess all
of the images in PHP and load them into the JavaScript already transformed.
Just means that I'm going to have a big preload time.

[Andrew Thompson]

On Tue, 7 Sep 2004 08:22:26 +1200, Nik Coughin wrote:

Don't worry, I wouldn't dream of using bmps on the net.
Aaaah ..good. I can sleep tonight.
Also, there are many instances where png is
more efficient than gif for 256 color images.

Yes, good point. I read that somewhere else
recently as well, and have been meaning to play
with a few images to see the difference in
file sizes.

All the best with your project. My usefulness
on this matter has ended, ..if I ever was of any
(use that is). ;-)

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology