Moons calendar in javascript and svg

[Roger Critchlow-2]

I've just finished reprogramming a lunar calendar that was my first
big programming project as an undergraduate back in the 70's.  Back
then it was FORTRAN on punched cards driving a Calcomp drum plotter.
The new version (http://elf.org/moons) is programmed in javascript and
produces an SVG graphic by populating an empty document with DOM
calls.

It's a demonstration of how much you can get away with inside a
browser these days.  The whole calendar runs and renders inside
Mozilla/Firefox with no plug-ins requred at all.  IE needs the Adobe
SVG viewer for the time being, but I hear that integrated SVG support
is expected around IE7.2.  I haven't had a chance to try Safari.  But
I downloaded Opera and it worked there, no problem at all.

This example is a really classical computation and a very simple
graphic, but there are lots of possible extensions to this basic
framework: you can add interactivity by hanging event handlers on the
graphics; you can mutate the graphic through the DOM at any time; you
can layer in additional information asynchronously with background
XMLHTTPRequest's; you can get a lot of additional graphic effects out
of SVG; and so on.

I think SVG+javascript is going to be a fairly useful platform for
delivering information graphics and client side number crunching on
the web.

-- rec --

[Marcus G. Daniels-3]

Quoting Roger Critchlow <rec at elf.org>:

> It's a demonstration of how much you can get away with inside a
> browser these days.  The whole calendar runs and renders inside
> Mozilla/Firefox with no plug-ins requred at all.  
[..]
> I think SVG+javascript is going to be a fairly useful platform for
> delivering information graphics and client side number crunching on
> the web.

cool!  :-)

[Giles Bowkett]

that's awesome!

can SVG be animated dependably in JavaScript with that kind of sophistication?

On 10/30/06, Roger Critchlow <rec at elf.org> wrote:

> I've just finished reprogramming a lunar calendar that was my first
> big programming project as an undergraduate back in the 70's.  Back
> then it was FORTRAN on punched cards driving a Calcomp drum plotter.
> The new version (http://elf.org/moons) is programmed in javascript and
> produces an SVG graphic by populating an empty document with DOM
> calls.
>
> It's a demonstration of how much you can get away with inside a
> browser these days.  The whole calendar runs and renders inside
> Mozilla/Firefox with no plug-ins requred at all.  IE needs the Adobe
> SVG viewer for the time being, but I hear that integrated SVG support
> is expected around IE7.2.  I haven't had a chance to try Safari.  But
> I downloaded Opera and it worked there, no problem at all.
>
> This example is a really classical computation and a very simple
> graphic, but there are lots of possible extensions to this basic
> framework: you can add interactivity by hanging event handlers on the
> graphics; you can mutate the graphic through the DOM at any time; you
> can layer in additional information asynchronously with background
> XMLHTTPRequest's; you can get a lot of additional graphic effects out
> of SVG; and so on.
>
> I think SVG+javascript is going to be a fairly useful platform for
> delivering information graphics and client side number crunching on
> the web.
>
> -- rec --
>
> ============================================================
> FRIAM Applied Complexity Group listserv
> Meets Fridays 9a-11:30 at cafe at St. John's College
> lectures, archives, unsubscribe, maps at http://www.friam.org
>

--
Giles Bowkett
http://www.gilesgoatboy.org

[Roger Critchlow-2]

Actually, there's a whole chunk of the SVG spec devoted to animation
without any scripting at all.  I haven't gotten into that yet.
There's a lot of it being used on cell phones using the SVGTiny
profile which doesn't have any scripting.

Animation with javascript all depends on how dependably your
window.setTimeout() method is behaving, which depends on everything
else running in your browser and on your machine.  I've seen the moons
calendar hiccup partway through more than a few times.

The "animation" is a side effect of avoiding the Firefox  "Some script
is taking too long to finish, shall I kill it?"  dialog box.  I
compute a month and then pass the continuation to setTimeout() with a
5ms delay.  So most of the interframe timing happens in the number
crunching to compute the month.

-- rec --

On 10/30/06, Giles Bowkett <gilesb at gmail.com> wrote:

> that's awesome!
>
> can SVG be animated dependably in JavaScript with that kind of sophistication?
>
> On 10/30/06, Roger Critchlow <rec at elf.org> wrote:
> > I've just finished reprogramming a lunar calendar that was my first
> > big programming project as an undergraduate back in the 70's.  Back
> > then it was FORTRAN on punched cards driving a Calcomp drum plotter.
> > The new version (http://elf.org/moons) is programmed in javascript and
> > produces an SVG graphic by populating an empty document with DOM
> > calls.
> >
> > It's a demonstration of how much you can get away with inside a
> > browser these days.  The whole calendar runs and renders inside
> > Mozilla/Firefox with no plug-ins requred at all.  IE needs the Adobe
> > SVG viewer for the time being, but I hear that integrated SVG support
> > is expected around IE7.2.  I haven't had a chance to try Safari.  But
> > I downloaded Opera and it worked there, no problem at all.
> >
> > This example is a really classical computation and a very simple
> > graphic, but there are lots of possible extensions to this basic
> > framework: you can add interactivity by hanging event handlers on the
> > graphics; you can mutate the graphic through the DOM at any time; you
> > can layer in additional information asynchronously with background
> > XMLHTTPRequest's; you can get a lot of additional graphic effects out
> > of SVG; and so on.
> >
> > I think SVG+javascript is going to be a fairly useful platform for
> > delivering information graphics and client side number crunching on
> > the web.
> >
> > -- rec --
> >
> > ============================================================
> > FRIAM Applied Complexity Group listserv
> > Meets Fridays 9a-11:30 at cafe at St. John's College
> > lectures, archives, unsubscribe, maps at http://www.friam.org
> >
>
>
> --
> Giles Bowkett
> http://www.gilesgoatboy.org
>
> ============================================================
> FRIAM Applied Complexity Group listserv
> Meets Fridays 9a-11:30 at cafe at St. John's College
> lectures, archives, unsubscribe, maps at http://www.friam.org
>

[Giles Bowkett]

Not in the sense of an actual continuation?

On 10/30/06, Roger Critchlow <rec at elf.org> wrote:

> Actually, there's a whole chunk of the SVG spec devoted to animation
> without any scripting at all.  I haven't gotten into that yet.
> There's a lot of it being used on cell phones using the SVGTiny
> profile which doesn't have any scripting.
>
> Animation with javascript all depends on how dependably your
> window.setTimeout() method is behaving, which depends on everything
> else running in your browser and on your machine.  I've seen the moons
> calendar hiccup partway through more than a few times.
>
> The "animation" is a side effect of avoiding the Firefox  "Some script
> is taking too long to finish, shall I kill it?"  dialog box.  I
> compute a month and then pass the continuation to setTimeout() with a
> 5ms delay.  So most of the interframe timing happens in the number
> crunching to compute the month.
>
> -- rec --
>
> On 10/30/06, Giles Bowkett <gilesb at gmail.com> wrote:
> > that's awesome!
> >
> > can SVG be animated dependably in JavaScript with that kind of sophistication?
> >
> > On 10/30/06, Roger Critchlow <rec at elf.org> wrote:
> > > I've just finished reprogramming a lunar calendar that was my first
> > > big programming project as an undergraduate back in the 70's.  Back
> > > then it was FORTRAN on punched cards driving a Calcomp drum plotter.
> > > The new version (http://elf.org/moons) is programmed in javascript and
> > > produces an SVG graphic by populating an empty document with DOM
> > > calls.
> > >
> > > It's a demonstration of how much you can get away with inside a
> > > browser these days.  The whole calendar runs and renders inside
> > > Mozilla/Firefox with no plug-ins requred at all.  IE needs the Adobe
> > > SVG viewer for the time being, but I hear that integrated SVG support
> > > is expected around IE7.2.  I haven't had a chance to try Safari.  But
> > > I downloaded Opera and it worked there, no problem at all.
> > >
> > > This example is a really classical computation and a very simple
> > > graphic, but there are lots of possible extensions to this basic
> > > framework: you can add interactivity by hanging event handlers on the
> > > graphics; you can mutate the graphic through the DOM at any time; you
> > > can layer in additional information asynchronously with background
> > > XMLHTTPRequest's; you can get a lot of additional graphic effects out
> > > of SVG; and so on.
> > >
> > > I think SVG+javascript is going to be a fairly useful platform for
> > > delivering information graphics and client side number crunching on
> > > the web.
> > >
> > > -- rec --
> > >
> > > ============================================================
> > > FRIAM Applied Complexity Group listserv
> > > Meets Fridays 9a-11:30 at cafe at St. John's College
> > > lectures, archives, unsubscribe, maps at http://www.friam.org
> > >
> >
> >
> > --
> > Giles Bowkett
> > http://www.gilesgoatboy.org
> >
> > ============================================================
> > FRIAM Applied Complexity Group listserv
> > Meets Fridays 9a-11:30 at cafe at St. John's College
> > lectures, archives, unsubscribe, maps at http://www.friam.org
> >
>
> ============================================================
> FRIAM Applied Complexity Group listserv
> Meets Fridays 9a-11:30 at cafe at St. John's College
> lectures, archives, unsubscribe, maps at http://www.friam.org
>

--
Giles Bowkett
http://www.gilesgoatboy.org

[Marcus G. Daniels-3]

Roger Critchlow wrote:
> Actually, there's a whole chunk of the SVG spec devoted to animation
> without any scripting at all.  I haven't gotten into that yet.
> There's a lot of it being used on cell phones using the SVGTiny
> profile which doesn't have any scripting.
I noticed there's a lot of string manipulation, e.g. building the polygons.
I've seen that before with SVG & JavaScript.   Kind of a bummer.    
Maybe the animation features (which I understand are barely implemented
in Firefox) will help make things like this less cumbersome.

Firefox also implements XUL, which I found to be a little easier to
manipulate in discrete pieces from the DOM.  But it has fewer vector
graphics features.   Here's an idea of what can be done with it:

http://mobster.santafe.edu/viewer/orderbook.xul

It's been a few years since I've worked on it, and I see buttons are
dead.  Presumably due to changes in XBL in recent Firefox versions).  
The top scrollbar does work through.
It's primarily implemented in XSLT, but also JavaScript.   The layout
and interface is all XUL/XBL.   Data comes off the server in XML
(describing an orderbook), and then it is XSLT'ed in the browser itself
into the screen layout.

Then there is the Canvas interface that Firefox and Safari both
implement.  It's unapologetically JavaScript.  A Canvas can also be
implemented over VML in Internet Explorer.   Here's an example:

http://www.santafe.edu/~mgd/sequenceEvolution.html

[Roger Critchlow-2]

Not in the sense of an actual continuation. In Mozilla the argument to
setTimeout() was:

        function() { generate_month(i, moon_date[8].getTime()); }

but for the benefit of IE's JScript interpreter, that had to become a string.

-- rec --

On 10/30/06, Giles Bowkett <gilesb at gmail.com> wrote:

> Not in the sense of an actual continuation?
>
> On 10/30/06, Roger Critchlow <rec at elf.org> wrote:
> > Actually, there's a whole chunk of the SVG spec devoted to animation
> > without any scripting at all.  I haven't gotten into that yet.
> > There's a lot of it being used on cell phones using the SVGTiny
> > profile which doesn't have any scripting.
> >
> > Animation with javascript all depends on how dependably your
> > window.setTimeout() method is behaving, which depends on everything
> > else running in your browser and on your machine.  I've seen the moons
> > calendar hiccup partway through more than a few times.
> >
> > The "animation" is a side effect of avoiding the Firefox  "Some script
> > is taking too long to finish, shall I kill it?"  dialog box.  I
> > compute a month and then pass the continuation to setTimeout() with a
> > 5ms delay.  So most of the interframe timing happens in the number
> > crunching to compute the month.
> >
> > -- rec --
> >
> > On 10/30/06, Giles Bowkett <gilesb at gmail.com> wrote:
> > > that's awesome!
> > >
> > > can SVG be animated dependably in JavaScript with that kind of sophistication?
> > >
> > > On 10/30/06, Roger Critchlow <rec at elf.org> wrote:
> > > > I've just finished reprogramming a lunar calendar that was my first
> > > > big programming project as an undergraduate back in the 70's.  Back
> > > > then it was FORTRAN on punched cards driving a Calcomp drum plotter.
> > > > The new version (http://elf.org/moons) is programmed in javascript and
> > > > produces an SVG graphic by populating an empty document with DOM
> > > > calls.
> > > >
> > > > It's a demonstration of how much you can get away with inside a
> > > > browser these days.  The whole calendar runs and renders inside
> > > > Mozilla/Firefox with no plug-ins requred at all.  IE needs the Adobe
> > > > SVG viewer for the time being, but I hear that integrated SVG support
> > > > is expected around IE7.2.  I haven't had a chance to try Safari.  But
> > > > I downloaded Opera and it worked there, no problem at all.
> > > >
> > > > This example is a really classical computation and a very simple
> > > > graphic, but there are lots of possible extensions to this basic
> > > > framework: you can add interactivity by hanging event handlers on the
> > > > graphics; you can mutate the graphic through the DOM at any time; you
> > > > can layer in additional information asynchronously with background
> > > > XMLHTTPRequest's; you can get a lot of additional graphic effects out
> > > > of SVG; and so on.
> > > >
> > > > I think SVG+javascript is going to be a fairly useful platform for
> > > > delivering information graphics and client side number crunching on
> > > > the web.
> > > >
> > > > -- rec --
> > > >
> > > > ============================================================
> > > > FRIAM Applied Complexity Group listserv
> > > > Meets Fridays 9a-11:30 at cafe at St. John's College
> > > > lectures, archives, unsubscribe, maps at http://www.friam.org
> > > >
> > >
> > >
> > > --
> > > Giles Bowkett
> > > http://www.gilesgoatboy.org
> > >
> > > ============================================================
> > > FRIAM Applied Complexity Group listserv
> > > Meets Fridays 9a-11:30 at cafe at St. John's College
> > > lectures, archives, unsubscribe, maps at http://www.friam.org
> > >
> >
> > ============================================================
> > FRIAM Applied Complexity Group listserv
> > Meets Fridays 9a-11:30 at cafe at St. John's College
> > lectures, archives, unsubscribe, maps at http://www.friam.org
> >
>
>
> --
> Giles Bowkett
> http://www.gilesgoatboy.org
>
> ============================================================
> FRIAM Applied Complexity Group listserv
> Meets Fridays 9a-11:30 at cafe at St. John's College
> lectures, archives, unsubscribe, maps at http://www.friam.org
>