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.javascript 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.zoom=var+'%';
for rotation
var deg2radians = Math.PI * 2 / 360;
currEl.style.filter="progid:DXImageTransform.Micro soft.Matrix(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.onmouseover=makeRotationParam;
var lastX=0, lastY=0;
function makeRotationParam() {
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(aValue);
}
function rotateObj(rotation) {
if(rotation>=360) 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.javascript 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!hopefully 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*********@btclick.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#function>

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.onmousemove is what I meant;
"J. J. Cale" <ph****@netvision.net.il> wrote in message
news:41********@news.012.net.il...

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.zoom=var+'%';
for rotation
var deg2radians = Math.PI * 2 / 360;
currEl.style.filter="progid:DXImageTransform.Micro soft.Matrix(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.onmouseover=makeRotationParam;
var lastX=0, lastY=0;
function makeRotationParam() {
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(aValue);
}
function rotateObj(rotation) {
if(rotation>=360) 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.javascript FAQ - http://jibbering.com/faq

[Dr John Stockton]

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

var deg2radians = Math.PI * 2 / 360;
Math.Pi / 180 // more elegant
if(rotation>=360) 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.javascript 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.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.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#function>

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

[Ian Sedwell]

On 2004/09/06 21:22, in article SF*********************@news.xtra.co.nz,
"Nik Coughin" <nr***********@woosh.co.nz> wrote:

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#function>

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.

I'm a bit uneasy about the notion of long pre-load times. Users can get
mighty impatient :-) I think you'll find Java will be quicker. Also, I am
assuming from what you have described that the image manipulations are
preset. For example, all images are in a "normal" state and also in, say, a
rotated 45° state. But what if your game evolves and you want the user to
select an arbitrary rotation by some means? You'd have to modify your PHP
and incur yet another download. Java can do it all locally much quicker than
it would take to perform the request upload / image manipulation on the
server / modified image download cycle.

[Nik Coughin]

Ian Sedwell wrote:

I'm a bit uneasy about the notion of long pre-load times. Users can
get mighty impatient :-) I think you'll find Java will be quicker.
Also, I am assuming from what you have described that the image
manipulations are preset. For example, all images are in a "normal"
state and also in, say, a rotated 45° state. But what if your game
evolves and you want the user to select an arbitrary rotation by some
means? You'd have to modify your PHP and incur yet another download.
Java can do it all locally much quicker than it would take to perform
the request upload / image manipulation on the server / modified
image download cycle.

Just occurred to me, doing it purely in Java would mean better support for
mobile devices, yeah? The whole reason I want to make a browser based game
is in order to have it run on as many platforms as possible. I have a
feeling that most mobile browsers don't implement JavaScript, though I
haven't had a chance to look into this yet.

[Jim Ley]

On Tue, 7 Sep 2004 11:15:44 +1200, "Nik Coughin"
<nr***********@woosh.co.nz> wrote:

Just occurred to me, doing it purely in Java would mean better support for
mobile devices, yeah?
Not really, mobile edition java is a different beast, and applet
support in mobile browsers isn't there.
I have a
feeling that most mobile browsers don't implement JavaScript, though I
haven't had a chance to look into this yet.

Nope plenty of javascript support on mobile devices, of course the
rotate etc. discussed earlier in the thread doesn't work.

Jim.

[Andrew Thompson]

On Mon, 06 Sep 2004 23:29:56 GMT, Jim Ley wrote:

Just occurred to me, doing it purely in Java would mean better support for
mobile devices, yeah?

Not really, mobile edition java is a different beast, and applet
support in mobile browsers isn't there.

Micro devices are covered by J2ME (Java 2
Micro Edition), which is a whole different
kettle of fish to the J2SE (standard Java)..

Many experienced Java programmers have
started J2ME projects only to be astounded
by the (almost) complete lack of the classes
they are used to. And then there are the
tight memory constraints..

[Nik Coughin]

Jim Ley wrote:

On Tue, 7 Sep 2004 11:15:44 +1200, "Nik Coughin"
<nr***********@woosh.co.nz> wrote:

Just occurred to me, doing it purely in Java would mean better
support for mobile devices, yeah?

Not really, mobile edition java is a different beast, and applet
support in mobile browsers isn't there.

I have a
feeling that most mobile browsers don't implement JavaScript, though
I haven't had a chance to look into this yet.

Nope plenty of javascript support on mobile devices, of course the
rotate etc. discussed earlier in the thread doesn't work.

Jim.

So JavaScript support is OK on mobile devices, but applet support isn't
there? Additionally, it's mobile Java and therefore a subset of Java, or
different altogether? Looks like it's back to preprocessing images with PHP
and big preload times then. You mentioned SVG, I've played with it a
little, how is support for mobile devices (I would imagine non-existent but
would love to be proven wrong)?

So, in summary:

1) JS with M$ only image filters, only works in IE therefore not an option.
2) JS, but preprocess all of the images with PHP, means big pre-load time
BUT allows me to use GD, ImageMagick etc. Best cross-platform solution,
easiest to implement, no learning curve, but load time is a major issue.
3) Use JS to call Java for image transformations, good cross-platform
support overall but inadequate support for mobile platforms.
4) Use SVG, generally requires a plug-in, I have no idea about support on
mobile devices but imagine that it's not good yet? Trivial learning curve.
5) DirectAnimation, M$ proprietary, same issue as 1).
6) VML, what level of support? I have no idea about this, haven't looked at
it for years.

Would really like some advice on the best technology to use in order to get
the widest support possible. At the moment I am leaning towards
HTML/CSS/JS.

[Andrew Thompson]

On Tue, 7 Sep 2004 12:09:17 +1200, Nik Coughin wrote:

Additionally, it's mobile Java and therefore a subset of Java, or
different altogether?

I have not dealt with J2ME myself, but perhaps this
J2ME FAQ can fill in some of those gaps for you..
<http://bellsouthpwp.net/m/c/mcpierce/j2mefaq.html>

And just to point out how different J2ME programming is to
J2SE programming, take a squiz at the 'HelloWorld' example..
<http://bellsouthpwp.net/m/c/mcpierce/j2mefaq.html#hello_world>
That would be about 5-10 lines in J2SE, with no imports..

[ If you can find a JS solution that works for
both desktop PC's and micro devices, I think
it makes sense to do it using JS.. ]

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

[Ian Sedwell]

Jim's absolutely correct, but I still think Java is your best route for the
resolution of your immediate problem. Of course none of us really know how
quickly the capability of mobile browsers will expand. I would bet on them
being able to do what you hope, but not on when.

On 2004/09/07 00:29, in article 41***************@news.individual.net, "Jim
Ley" <ji*@jibbering.com> wrote:

On Tue, 7 Sep 2004 11:15:44 +1200, "Nik Coughin"
<nr***********@woosh.co.nz> wrote:

Just occurred to me, doing it purely in Java would mean better support for
mobile devices, yeah?

Not really, mobile edition java is a different beast, and applet
support in mobile browsers isn't there.

I have a
feeling that most mobile browsers don't implement JavaScript, though I
haven't had a chance to look into this yet.

Nope plenty of javascript support on mobile devices, of course the
rotate etc. discussed earlier in the thread doesn't work.

Jim.

[Jim Ley]

On Tue, 7 Sep 2004 12:09:17 +1200, "Nik Coughin"
<nr***********@woosh.co.nz> wrote:

Looks like it's back to preprocessing images with PHP
and big preload times then.
Yes, that is the only solution, with this strange precondition about
mobile browsers. you're writing a game in HTML, that you intend to
work in a web-browser on both a tiny mobile phone screen, and a
web-browser screen, it's pretty unlikely any game is gonna work
logically on the two devices.

You mentioned SVG, I've played with it a
little, how is support for mobile devices (I would imagine non-existent but
would love to be proven wrong)?
SVG support on mobile devices is very good, lots of phones ship with
it now, and even more will once it becomes a core requirement of
vodaphone (October).
2) JS, but preprocess all of the images with PHP, means big pre-load time
BUT allows me to use GD, ImageMagick etc. Best cross-platform solution,
easiest to implement, no learning curve, but load time is a major issue.
Even this is going to be difficult, you've not explained remotely what
you're doing, but these mobile browsers JS implementations aren't
particularly up there for doing game like things.
6) VML, what level of support? I have no idea about this, haven't looked at
it for years.

It's IE5+ only, and behaviour implemented so troublesome in XP SP2

Jim.

[Nik Coughin]

Jim Ley wrote:

On Tue, 7 Sep 2004 12:09:17 +1200, "Nik Coughin"
<nr***********@woosh.co.nz> wrote:

Looks like it's back to preprocessing images with PHP
and big preload times then.
Yes, that is the only solution, with this strange precondition about
mobile browsers. you're writing a game in HTML, that you intend to
work in a web-browser on both a tiny mobile phone screen, and a
web-browser screen, it's pretty unlikely any game is gonna work
logically on the two devices.

Tile-based scrolling engine with a base of 48 pixels, so should be able to
get a viewport of at least a few tiles wide by a few tiles high on most
mobile devices.
SVG support on mobile devices is very good, lots of phones ship with
it now, and even more will once it becomes a core requirement of
vodaphone (October).
Will seriously consider it. SVG has some very cool features, I like it a
lot.
Even this is going to be difficult, you've not explained remotely what
you're doing, but these mobile browsers JS implementations aren't
particularly up there for doing game like things.

I only really need DOM support, so I can preload images and move them
around. DHTML Lemmings seems to run fairly well, have you seen it?
Admittedly I haven't seen it running on a mobile device.

http://193.151.73.87/games/lemmings/index.html

6) VML, what level of support? I have no idea about this, haven't
looked at it for years.

It's IE5+ only, and behaviour implemented so troublesome in XP SP2

Won't even bother looking into it then.

[Thomas 'PointedEars' Lahn]

Ian Sedwell wrote:

On 2004/09/06 21:22, in article SF*********************@news.xtra.co.nz,
"Nik Coughin" <nr***********@woosh.co.nz> wrote:

Please do not write attribution novels by replicating header information.

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.

I'm a bit uneasy about the notion of long pre-load times. Users can get
mighty impatient :-) I think you'll find Java will be quicker. [...]

You're wrong, it takes much more time to start an (external) Java Virtual
Machine than to invoke a (built-in and maybe already running) script
engine. Your JVM may be started when you log on, but mine[tm] is not.
PointedEars
--
This is not a self-referential headline.

[Andrew Thompson]

On Sat, 11 Sep 2004 19:20:21 +0200, Thomas 'PointedEars' Lahn wrote:

I'm a bit uneasy about the notion of long pre-load times. Users can get
mighty impatient :-) I think you'll find Java will be quicker. [...]

You're wrong, it takes much more time to start an (external) Java Virtual
Machine than to invoke a (built-in and maybe already running) script
engine. Your JVM may be started when you log on, but mine[tm] is not.

That converstaion was discussing the load
times of the *images*. The options were either..

a) load image 1 & 2 and using Java to
fade/change between them, or ..

b) load image 1 & 2, as well as an image for
each part of the transtition between the two,
and using JS to cycle the images.

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

[Dr John Stockton]

JRS: In article <11****************@PointedEars.de>, dated Sat, 11 Sep
2004 19:20:21, seen in news:comp.lang.javascript, Thomas 'PointedEars'
Lahn <Po*********@web.de> posted :

Ian Sedwell wrote:

On 2004/09/06 21:22, in article SF*********************@news.xtra.co.nz,
"Nik Coughin" <nr***********@woosh.co.nz> wrote:

Please do not write attribution novels by replicating header information.

Ignore him.

For current thinking on this matter, current thinking is visible in
work-in-progress
http://www.ietf.org/internet-drafts/...-useage-00.txt
and
http://www.ietf.org/internet-drafts/...article-13.txt

See also the references via sig line 2 below; unlike TL, TS is a
respected authority.

Lahn has not noticed that the need to correct his misguided and
dictatorial statements used more resources than reducing attributions
could possibly save, even ignoring the utility to many of us of having
fuller attributions. The situation is in fact not unlike that of his
ancestors two-thirds of a century ago (and 90%, too)

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME ©
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.