Topic awaiting preservation: 286 byte Javascript Animation

I had written a Javascript program for my girlfriend some time ago, thought I'd share it with you guys.

http://www.rpi.edu/~laporj2/hoppyheart.html

It's 286 bytes without newlines, and when expanded is 5 lines of code long.

function q(a) {

   for(m=Math,b=m.sin(a),s="",y=-30-b*16;y<11;y+=(7+b)/4,s+="<br>")

      for(x=-16;u=x+x*m.sin(.5-a)/6,++x<18;s+=u*u+m.abs(u)*y+y*y<128?"M":"&nbsp;");

   setTimeout('document.getElementById("v").innerHTML=s;q('+a+'+1/8)',15)

}

q(0)

Have fun

Oh yeah, and if you remove the "+m.abs(u)*y" in the second for loop, you end up with a bouncing ball rather than a heart.

(Edited by Iron Wallaby on 05-20-2004 05:23)

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.

I would like to take Wrayal up on it... maybe next week, the next 4 or 5 days are too busy for me. :/

I have a bunch of other JS offerings (raycaster, raytracer, voxel heightmapping, 3D objects using SVG, polygon creation using DIVs, etc...) if anyone is interested in them, I can upload them for ya (though they aren't quite as tiny as this one )

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

Would very much like to see raytracer and voxel heightmapping. Not sure what SVG is. How fast is your polygon creation? I did a couple of methods (collision detection type thing and line-caster. Dunno real terms, I sort of bodged a couple of things as I went along), but they are quite catastrophically slow.
Pong maybe? I'll start working on it, if you're up for a game

Wrayal

Go to kimber-ja.demon.co.uk and click on the link to the raytracer!

Polygon renderer: http://www.rpi.edu/~laporj2/test.html
Very slow. For filled polygons, SVG is definitely the way to go... making millions of tags is not too fast, heh.

Voxel Heightmapper: http://www.rpi.edu/~laporj2/media/code/voxel/
Only 1D map, not 2D (though I have written a 2D one, but that would be way too slow for JS). If it was modified it could make a decent racing game (I'm thinking like the old Road Rash games, hehehe).

Raytracer: http://www.rpi.edu/~laporj2/media/code/raytracer.html
1 Bit ASCII. Only spheres are implemented so far, but my job started two days ago (I wrote this in a couple hours on Monday) and I haven't yet had the time to add planes, textures, reflections, etc.

"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 05-21-2004 00:19)

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.

They are all compatible with Mozilla (since it is my primary web browser, I use Linux most of the time), though I have never used Opera so I am not sure of compatibility there.

The problem with the image preloading is... there is none! It has always worked for me without problems, so I never bothered to implement it... though maybe I should. I've heard people having the same problem with images in my raycaster (the texturemapping is image-based, so if they don't load... well, it's not pretty).

So perhaps I should look into this preloading thing...

"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 05-21-2004 16:16)

InI: I'm back from my picnic with my brother and his little family. I've exposed my skin of coder to the sun to see what happens. I've discovered that my skin can tan. wouhou!!

Iron Wallaby: Welcome in the Asylum. I'm glad to see a new JS freak in the walls. Your stuffs are cool.

The "voxel" thingy flickers with my FireFox, but the images are well loaded.
I don't know if it's useful to point you to the 256b.htm contests. Whatever, there's some interresting scripts and ideas of opitimization there. On the other hand, the compatibility was not required there, so there's some really nasty things.

quote:

---

I've heard people having the same problem with images in my raycaster...

---

Did I hear raycaster ?
[edit] Indeed, the images don't have the time to be loaded in your raycaster. And I guess your host do not appreciate your _bandwidth_ungry_ script But the script works in local. [/edit]



(Edited by poi on 05-21-2004 18:12)

quote:

---

poi said:
quote:I've heard people having the same problem with images in my raycaster...Did I hear raycaster ?
[edit] Indeed, the images don't have the time to be loaded in your
raycaster. And I guess your host do not appreciate your
_bandwidth_ungry_ script But the script works in local. [/edit]

---

They havn't sent me all sorts of nasty emails yet, though I don't tend to broadcast that all over.

quote:

---

poi said:
I don't know if it's useful to point you to the 256b.htm
contests. Whatever, there's some interresting scripts and ideas of
opitimization there. On the other hand, the compatibility was not
required there, so there's some really nasty things.

---

Very interesting. Some completely awesome stuff there, too bad so little of it is cross-compatible. There are some brilliant techniques in there, though, which I should look into... 8)

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

Iron Wallaby, you've changed my life
I happend across one of your posts on http://pixeltutorial.cjb.net/ and stumbled across your collection of js demos. I have been looking for a js implementation of raycasting for years, as I've never had time to sit down and work out the math myself.

After then googling for "javascript raycaster" I again shortly found you posting links to your demos here - and having found this Asylum I feel like I've finally found folks just like me.

Anyway - I wanted to say I really like your js raycaster and was wondering if I might use some of that code in another project of mine -- with credit back to you. Also, I think I might have found a way for you to load a single image which you could then split up into slices - dramatically decreasing the socket connections and download overhead for your textures -- http://www.alistapart.com/articles/sprites/

This article talks about having a single "master image" which you can then reuse over and over only having different regions of the image display.


OK - now just to sack you with another bit of information: The reason I'm looking for a raycaster in javascript is not just to clone it directly in HTML but to adapt it for a 2d game library I'm working on using a technology called Laszlo. Basically Laszlo is a java servlet which takes XML which define UI layout and javascript which define interaction and dynamically create a flash application (for example http://laszlosystems.com/demos/weather/ ) I'm creating this 2d game library to create 2d retro style games using Laszlo...

Gah, I sound like the random stranger you meet on the street who wants to give you their life story... sorry about that. Anyway, your work is awesome, and I look forward to more stuff from you. Please let me know if it's ok to poke around with your raycaster code.

quote:

---

whisperstorm said:

Anyway - I wanted to say I really like your js raycaster and was
wondering if I might use some of that code in another project of mine
-- with credit back to you.

---

Yeah sure, knock yourself out. The code was ported from a BASIC raycaster that I co-authored with a few others way back when, with some modifications. It's not difficult to modify the raycaster to shorten the code and speed it up, but it's not difficult to do so (the proof is left as an excercise for the reader, heh).

The texture I used was blatantly ripped from http://source.bungie.org/, BTW.

quote:

---

whisperstorm said:

Also, I think I might have found a way for
you to load a single image which you could then split up into slices -
dramatically decreasing the socket connections and download overhead
for your textures -- http://www.alistapart.com/articles/sprites/

---

I tried it. Apparently, you can't do both scaling and image offsets at the same time with CSS. At least as far as I have been able to do. :X

Glad you like it, though!

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

quote:

---

Iron Wallaby said:

Apparently, you can't do both scaling and image offsets at the same time with CSS. At least as far as I have been able to do.

---

Indeed, it's not possible to scale a background picture with standard compliant CSS. You could limit yourself to IE and use the zoom attribute, but I haven't had to use that method in my own javascript raycasters.

quote:

---

poi said:

...limit yourself to IE...

---

ACK! THOSE 4 WORDS SHOULD NEVER BE USED TOGETHER!

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

Do you think I need a shock therapy for that ?

Hrm, there's gotta be a way
I wonder if instead of using images you used single pixel width tables with cells filled in:


http://www.flowerfire.com/image2html/online.html

but then theres still the scaling issue..

--- RPG Fan ---

whisperstorm: Welcome on the Asylum. Believe me, using IMG and DIV tags is the way to go to do a fast raycaster in JS.

I wonder if any techniques from something like this might be useful...
Havent dug into the source yet myself however


http://www.world-direct.com/mozilla/dhtml/fish2.htm

--- RPG Fan ---

Intruiging. His code is a mess, but I would like to look into it...

Also, it may be fun to look into advanced ray-casting techniques: polygonal sections instead of squares only. I don't think that's been done in JS yet.

"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 07-05-2004 20:44)

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.

Yeah - perhaps wrapping the image with a div, and having the scaling on the image, while having the cropping on the div would get around the limitation of not having cropping + scaling on the same element.


BTW this site is also home to a semi-famous bobs animation:

http://www.world-direct.com/mozilla/dhtml/3dcube/index.htm

This was used alot in mozilla testing to make sure dhtml was fast enough.

--- RPG Fan ---

(Edited by whisperstorm on 07-06-2004 00:02)

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.

My kingdom for a Mozilla with a really fast JavaScript rendering engine.

Ini - what is your system settings? I'm seeing the animation run ok here....

--- RPG Fan ---

No, I think InI meant that Mozilla's rendering engine isn't that fast, even with the testing they conducted.

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

whisperstorm: Try updating 2.000+ DIVs in realtime. According to my test IE is between 7 and 18 times faster than FireFox. I wish it was otherwise, but it's not. Gecko is (still) slower than IE for heavy things.

Notice, I'm on PC, so the situation may be different on MAC.



(Edited by poi on 07-06-2004 23:52)

heh, imagine a hardware accelerator for browser scripting Or have some way that the browser could tap into the graphics card for processor intensive code.

--- RPG Fan ---

Then maybe I could make use of this.

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

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.