Topic awaiting preservation: Sine scroller

You don't see bitmap scrollers very often, but how about a 4 pixel bitmap sine scroller ???
This takes about 48% on my athlon 1800 and I`m sure it can be optimised somewhat.. I`d like to use this in future amiga conversions, but it's too damn hefty..

Cool stuff.

You really have to learn how to make your stuff work with Mozilla, though... can't stand getting over on MSIE.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

Nice.
Just a quick remake working in both IE and Gecko based browsers.



(Edited by poi on 09-19-2004 07:59)

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

InI: Did somebody steal my mojo in my sleep ?

Seriously, I've slightly updated the script and it works now @100fps in IE, and ~25fps in FF. There's still no preloading system, and the font is now in the background of some SPANs. Normally the background method is not the fastest one but using an IMG in a SPAN was surprising slow.

I wonder if the slowness is not due to the resolution of the font image : 1920x25. The rendering engine may prefer a more balanced resolution like 240x200. On the other, if I'm not wrong, we'll need to update 3 stylistic properties : 1 to move the slices up and down and 2 to move the IMG at the position of the right character.

The remake is pretty bad for me, too

I'm guessing that XP with SP2 might be a common theme to breaking otherwise good code. Does everyone who sees it run slowly run XP with SP2, or are there other OS/SP combinations that run it slowly?

Dan

It runs painfully slow on a x86 machine with Win98, IE6 and 128Mb RAM lol
It runs almost as smooth as Ray's scroller on my P4 3,53GHz Win XP SP1 with 512 Mb RAM though. Btw, does the browser use the graphichs card for rendering JavaScripts and other animations at all? I know you can't use hardware acceleration with JavaScript, but couldn't the browser do that indirectly?

/TwoD

That's pretty cool lookin'

Just for the sake of additional input: I'm on WinXP Pro, using Firefox 0.8 on a partially fiber optic network, and it worked smoothly, though kind of slowly for me.

Poi, for your version (on FF0.9.3) I'm getting a nasty effect where it wobbles, then shifts left one column, then wobbles again, shifts again... could that perhaps be a bug where you're adding the fractional part where you should be subtracting (or vice versa)?

I made a very similar-looking bug when developing the scroller in Mooncheese, where I was giving the nth letter a 'left' value of something like (letter_width * n + ((t % 100) / 100) * letter_width), where t is time... of course, the left value should be decreasing with time, so the 't' term should be subtracted.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Very slow on XP + SP1. Bizarrely, gets even slower if you refresh the page!?

Ray Norrish: Indeed, my version is 4 times slower in Gecko than in IE. I've tested it with IE5.0, FF0.9, MZ1.7.3 on W2K SP4. I knew that Gecko was significantly slower than IE, but that sine-scroller is not what I'd call an intensive task for the rendering engine. Having some problems with my computer atm, I've hardly found the motivation to code something interresting, but I'll try to find why my version of the sine-scroller is so slow in Gecko. However, have you tried to optimize yours ? or worked on another effect ?

shingebis: As you can see in IE, my scroller works fine, so the nasty effect you describe seems to come from the relative slowness of Gecko. I suspect that Gecko upates the rendering of the page whenever an element is altered while IE does it at a given interval and thus have a kind of spooler.

mInI me: Si veux un conseil de castor : rends moi mon mojo, ou tu aurras affaire à mon membre d'or.

Hi all,
I've just joined this site...

Just to add to the thread, I've always noticed a slower rendering performance in FF than IE. I've written a few dhtml games, and find that they run really well in IE but in FF the speed is inconsistent.

I like the sine scroller. The first version works really well on my winxp machine. P01's gecko fix is slow in IE.

Cheers,
Brent.

BRENT SILBY
www.def-logic.com
Neo-Arcade Videogames

bsilby: Hello! After seeing Wrayal, Robert Gamble and TwoD joining in, I wondered when you'll come to the Asylum. Welcome and enjoy your stay.

I have recently re-installed W2K on my computer, and still IE5.0 on it. I know that IE has a caching problem with background images ( which I use intensively in my current Gecko fix ), but I don't know which versions of IE are affected. I have no problem in IE5.0 with my version. It goes smoothly @ 100fps. Which version of IE do you have ?

Poi: I get the same thing as shingebis described in IE6.
The first scroller runs really smooth though.

/TwoD

Thank you for the bug report.
I've tried my script on my laptop with IE6, and indeed IE6 reloads the background image everytime an element is altered, thus the extreme slowness for such a simple effect.

Hi P01,
Thanks for the nice welcome. I've been missing the old javascript-games forum, so hopefully this will help fill the gap.

I'm using IE6 on winxp sp2. Its interesting that IE6 runs your sinescroll so slowly. Usually IE6 is fast. I've had many speed problems with Moz--especially when a large background image is used. But never on IE.

Brent.

BRENT SILBY
www.def-logic.com
Neo-Arcade Videogames

I don't mean to get off-topic, but I hadn't heard much about javascript-games.org going down. I talked a few times with Scott Porter, he seemed like a really cool guy. Any idea what happened with the site?

quote:

---

poi said:
Having some problems with my computer atm, I've hardly found the motivation to code something interresting, but I'll try to find why my version of the sine-scroller is so slow in Gecko. However, have you tried to optimize yours ? or worked on another effect ?

---

I had a look at the code for your version. In mine, I use only just enough "slices" to present the sine scroll and as they scroll off the screen, move them back into the pending queue and repopulate them. In yours, you prepare the entire scroll (which is only good for a small example.)
I have not optimised mine at all - that's why I presented it here - as I primarily attempted to generate the effect using my own (much different from yours) approach.
I have many fx I have worked on - dozens probably - perhaps you'd like to take up the challenge of improving the unlimited bobs routine ini had a look at recently
Incidentally, I agree the rendering engine shouldn't be too stressed by this - I shall post a question about this in a separate thread - as the IMG is not resized, but clipped. I have found that the 1920xwhatever dimensions of the source image I use can be prohibitive, but only when the IMG is manipulated (in IE at least).

quote:

---

Scott said:

I don't mean to get off-topic, but I hadn't heard much about javascript-games.org going down. I talked a few times with Scott Porter, he seemed like a really cool guy. Any idea what happened with the site?

---

Hi,
Scott accidentally let his domain name registration expire. An advertising site quickly acquired the domain, and are now trying to auction it off. Its a real shame, because it was an excellent site.

Brent.

BRENT SILBY
www.def-logic.com
Neo-Arcade Videogames

Ray Norrish: Here goes another version using the method you described.
There's 80 slices of 4pixels, nested in a DIV called renderSubArea that is continuously scrolled to the left. The slices going offscreen are moved at the right side of renderSubArea and the position of the IMG in those slices is adjusted to match that of the character.

The framerate on my main computer ( XP1800+, with W2Ksp4, 512Mb, GF4ti4200 ) are
100fps in IE5.0 / 25fps in MZ1.7.3 / 8fps in FF0.9

those on my laptop ( Mobile XP2600+, winXPsp1, 192Mb, S3 savage 64Mb ) are
50fps in IE6.0 / 10fps in FF0.8

On my laptop (IBM T40 @ 1.6Ghz, WinXP SP2, 512MB RAM, 32MB ATI Mobility Radeon 9000), I get 33.3 Mhz in Mozilla 1.7.3 and 100 Mhz in MSIE 6.

Nice stuff.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

(Edited by Iron Wallaby on 09-24-2004 17:32)

Thats good. Now it's about the same CPU, perhaps a tad more on my computer, but it works ok - and definately a lot cleaner than my code

On my computer, the IEXPLORER process takes 0 to 2%, and the FireFox process takes 99% ouch!!

Cool, the latest version runs smoothly on my P4 2.53GHz, 512Mb RAM, GeForce 4 Ti 4600, Win XP Sp1, IE6 at about 65 fps
CPU usage goes up and down between 10% and 25%, mostly at 15%.
/TwoD

(Edited by TwoD on 09-25-2004 00:02)

Hmm.. 52% on athlon XP1800+ and radeon 8500

quote:

---

poi said:

On my computer, the IEXPLORER process takes 0 to 2%, and the FireFox process takes 99% ouch!!

---

Ain't FireFox a pig

BRENT SILBY
www.def-logic.com
Neo-Arcade Videogames

*bump*
12.5 fps with FF1.0RC1 on my laptop

Have you a new technique for this?

nope, just a new browser
sorry I had just installed FF1.0RC1 on my laptop and wanted to try some JS with it