3D using processing.js

[Tim Lahey]

Hi,

I ran across this example of doing 3D using processing.js:

http://mdp.cti.depaul.edu/3d

although it also uses web2py. I thought it was interesting
given the various problems with jmol at times.

Cheers,

Tim.

---
Tim Lahey
PhD Candidate, Systems Design Engineering
University of Waterloo
http://www.linkedin.com/in/timlahey

[Ondrej Certik]

On Tue, Jun 16, 2009 at 7:32 PM, Tim Lahey<tim....@gmail.com> wrote:
>
> Hi,
>
> I ran across this example of doing 3D using processing.js:
>
> http://mdp.cti.depaul.edu/3d
>
> although it also uses web2py. I thought it was interesting
> given the various problems with jmol at times.

Wow, this is impressive. It works nice, but it is too choppy on my
laptop (and I have a fast laptop now). Jmol is very smooth.

My own horse is probably http://code.google.com/apis/o3d/, but we'll
still have to wait some time for it.

Ondrej

[Ondrej Certik]

But then I tried the chromium browser (linux build) and it was
absolutely smooth!

So it's just that Firefox's javascript interpreter is too slow for that.

Ondrej

[Tim Lahey]

It's perfectly smooth with Safari 4 on OS X and I'm using a base model
MacBook from June 2008 (so it's before the Nvidia graphics).

The problem with o3d is that it requires a plug-in and it only runs on
Mac and Windows.

I wonder how Firefox 3.5 does with this demo. If it does well, then it's
just Opera and IE that could pose problems.

Cheers,

Tim.

[Ondrej Certik]

Surprisingly enough, Firefox 3.5 does worse thatn Firefox 3.0 on my
Ubuntu Jaunty (it is about the same choppy and it reacts in weird way
on the mouse). I am having some development version of Firefox 3.5, so
it may improve in the future. But as I said, Chromium is perfectly
smooth.

Ondrej

[Tim Lahey]

On Jun 17, 2009, at 1:14 AM, Ondrej Certik wrote:
>
> Surprisingly enough, Firefox 3.5 does worse thatn Firefox 3.0 on my
> Ubuntu Jaunty (it is about the same choppy and it reacts in weird way
> on the mouse). I am having some development version of Firefox 3.5, so
> it may improve in the future. But as I said, Chromium is perfectly
> smooth.

Interesting. I thought it was supposed to have faster Javascript. One
of the reasons I like the processing.js method is that it should work
on browsers such as mobile Safari. Testing that site in mobile Safari
on my 1st gen iPod Touch, it loads, but it doesn't seem to pass dragging
to the javascript so I can't rotate. However, it at least loads.

[Rado]

Cool, its a 3d engine written from scratch in js (as the author says
it has nothing to do with web2py). It runs fine on my firefox 3.5b4 in
ubuntu jaunty. However, o3d uses hardware acceleration while
processing.js (which only a bit more than a parser from java->js)
doesn't so I expect it can't handle anything too complex. Then again
from what i saw jmol doesn't use hardware acc either (but java is
faster than js).

While googling around I found this: http://groups.google.com/group/canvas-3d
along with http://www.c3dl.org/ which actually looks just as promising
as the google's solution.

Rado

On Jun 17, 12:14 am, Ondrej Certik <ond...@certik.cz> wrote:

> On Tue, Jun 16, 2009 at 10:49 PM, Tim Lahey<tim.la...@gmail.com> wrote:
>
> > On Jun 17, 2009, at 12:32 AM, Ondrej Certik wrote:
>

> >> On Tue, Jun 16, 2009 at 7:32 PM, Tim Lahey<tim.la...@gmail.com> wrote:
>
> >>> Hi,
>
> >>> I ran across this example of doing 3D using processing.js:
>
> >>>http://mdp.cti.depaul.edu/3d
>
> >>> although it also uses web2py. I thought it was interesting
> >>> given the various problems with jmol at times.
>
> >> Wow, this is impressive.  It works nice, but it is too choppy on my
> >> laptop (and I have a fast laptop now). Jmol is very smooth.
>

> >> My own horse is probablyhttp://code.google.com/apis/o3d/, but we'll

[Tim Lahey]

On Jun 17, 2009, at 1:53 AM, Rado wrote:

> While googling around I found this: http://groups.google.com/group/canvas-3d
> along with http://www.c3dl.org/ which actually looks just as promising
> as the google's solution.

The problem with both of those is that they both require extensions
and in
particular, Firefox. I like the javascript-python solution since it
doesn't
require any browser additions.

[Rado]

> Interesting. I thought it was supposed to have faster Javascript. One
> of the reasons I like the processing.js method is that it should work
> on browsers such as mobile Safari. Testing that site in mobile Safari
> on my 1st gen iPod Touch, it loads, but it doesn't seem to pass dragging
> to the javascript so I can't rotate. However, it at least loads.

Hmmm, I should check the processing.js forums as my simple graph
editor :

http://www.math.uiuc.edu/~rkirov2/processing/grapheditor_live.html

has the same problem on ipod touch 2nd gen (maybe 3.0 firmware will
fix somethings). Curiously enough some clicks are registered (only if
they are adding new nodes). However, the "live" option works so you
can see how the speed compares with a PC.

Rado

[David Joyner]

Very interesting. Thanks for the link!

[Rado]

Here is an even more impressive demo, actually almost doing what we
need in js.

http://www.benjoffe.com/code/tools/functions3d/

Rado

[David Joyner]

Wow!

[William Cauchois]

At the behest of William I took a stab at implementing this very type
of renderer in Sage. My work, [with patch], is available at
<http://trac.sagemath.org/sage_trac/ticket/6447> for anyone who might
be interested.

[Tim Lahey]

On Mon, Jun 29, 2009 at 3:09 PM, William Cauchois<wcau...@gmail.com> wrote:
>
> At the behest of William I took a stab at implementing this very type
> of renderer in Sage. My work, [with patch], is available at
> <http://trac.sagemath.org/sage_trac/ticket/6447> for anyone who might
> be interested.
>

You should be able to find code for a virtual trackball to solve the
problem you're
having. It should still work in javascript since I've done it on
fairly slow machines.

http://image.diku.dk/research/trackballs/index.html

I've used Bell's Trackball that's described on that page. There is
code there that
should be able to be converted to javascript.

I haven't tested the patch since I haven't upgraded my version of Sage yet.

[William Cauchois]

On Mon, Jun 29, 2009 at 3:18 PM, Tim Lahey<tim....@gmail.com> wrote:
>
> You should be able to find code for a virtual trackball to solve the
> problem you're
> having. It should still work in javascript since I've done it on
> fairly slow machines.
>
> http://image.diku.dk/research/trackballs/index.html

I'll look into this, thanks!

[David Joyner]

On Mon, Jun 29, 2009 at 3:09 PM, William Cauchois<wcau...@gmail.com> wrote:
>

> At the behest of William I took a stab at implementing this very type
> of renderer in Sage. My work, [with patch], is available at
> <http://trac.sagemath.org/sage_trac/ticket/6447> for anyone who might
> be interested.

Very nice!

[Rob Beezer]

On Jun 29, 12:09 pm, William Cauchois <wcauch...@gmail.com> wrote:
> At the behest of William I took a stab at implementing this very type
> of renderer in Sage. My work, [with patch], is available at
> <http://trac.sagemath.org/sage_trac/ticket/6447> for anyone who might
> be interested.

Bill - Nicely done! Are 2D, interactive graphics, like Rado's graph
editor

http://www.math.uiuc.edu/~rkirov2/processing/grapheditor_live.html

possible on an HTML canvas?

Rob

[William Cauchois]

Definitely! I mean, the linked example is implemented using canvas
after all. I think there are many areas where we could make the Sage
notebook more interactive using HTML canvas and clientside JavaScript.
For anyone interested in this technology, there is an excellent
tutorial available at the Mozilla Developer Center
<https://developer.mozilla.org/en/Canvas_tutorial>.

> Rob

[Rado]

Yep, processing.js is just a parser to turn the processing java code
into javascript. At the end of the day its all executred through HTML
canvas (thats why it wont run in IE). Its was just easier for me to
write the java code than the javascript code because of the OOP.

[Rob Beezer]

Rado and Bill,

Thanks for the responses!

The tutorial Bill linked to points to a tutorial for interactive use,
and includes a nice demo of Breakout:

http://billmill.org/static/canvastutorial/index.html

Rob

[Mike Witt]

On Jun 29, 12:09 pm, William Cauchois <wcauch...@gmail.com> wrote:

> At the behest of William I took a stab at implementing this very type
> of renderer in Sage. My work, [with patch], is available at
> <http://trac.sagemath.org/sage_trac/ticket/6447> for anyone who might
> be interested.

I'd like to try this. Is there a quick example somewhere of how to use
it. I downloaded the patch, but I don't understand how to access it.

-Mike

[William Cauchois]

On Fri, Jul 10, 2009 at 12:30 PM, Mike Witt<mwg...@gmail.com> wrote:
>
>
> I'd like to try this. Is there a quick example somewhere of how to use
> it. I downloaded the patch, but I don't understand how to access it.

After you've applied the patch to your Sage repository, you should
launch the notebook and specify the keyword viewer='canvas3d' with a
3D plot (currently only plots created by the plot3d() command will
work).

Here's an example, from my comment on the ticket:

{{{
x, y = var('x y')
plot3d(sin(pi*(x^2+y^2))/2,(x,-1,1),(y,-1,1), viewer='canvas3d',
plot_points=(20, 20))
}}}

If G is a 3D plot, then G.show(viewer='canvas3d') will also work.

I hope that helps!

-- Bill

[Mike Witt]

> Here's an example, from my comment on the ticket:
>
> {{{
> x, y = var('x y')
> plot3d(sin(pi*(x^2+y^2))/2,(x,-1,1),(y,-1,1), viewer='canvas3d',
> plot_points=(20, 20))
>
> }}}

Hmm.... Well, maybe I didn't actually succeed in installing the patch.
I get: ValueError: Unknown 3d plot type: canvas3d.

I did hg_sage.apply("http://trac.sagemath.org/sage_trac/attachment/
ticket/6447/trac_6447-canvas3d.patch") and I didn't *think* I saw
anything that looked like and error message. I'm running sage-4.0.2.
I've never actually tried to apply a patch before, so I'm not too sure
what I'm doing.

Is there a section in the documentation that tells about applying
patches, and related things?

[William Cauchois]

On Fri, Jul 10, 2009 at 4:19 PM, Mike Witt<mwg...@gmail.com> wrote:
>
>
>> Here's an example, from my comment on the ticket:
>>
>> {{{
>> x, y = var('x y')
>> plot3d(sin(pi*(x^2+y^2))/2,(x,-1,1),(y,-1,1), viewer='canvas3d',
>> plot_points=(20, 20))
>>
>> }}}
>
> Hmm.... Well, maybe I didn't actually succeed in installing the patch.
> I get: ValueError: Unknown 3d plot type: canvas3d.
>
> I did hg_sage.apply("http://trac.sagemath.org/sage_trac/attachment/
> ticket/6447/trac_6447-canvas3d.patch") and I didn't *think* I saw
> anything that looked like and error message. I'm running sage-4.0.2.
> I've never actually tried to apply a patch before, so I'm not too sure
> what I'm doing.

I think I found your problem. The URL you specified points to the HTML
formatted diff that is displayed by default. If you scroll to the
bottom of that page, there's a link for "Download in other formats:
Original Format" -- the URL you want is actually
<http://trac.sagemath.org/sage_trac/raw-attachment/ticket/6447/trac_6447-canvas3d.patch>.

> Is there a section in the documentation that tells about applying
> patches, and related things?

The only relevant section I could find
<http://sagemath.org/doc/developer/producing_patches.html> describes
the opposite of what you want to do. You might want to read the bit
about branches though, if you're not familiar with that feature
already. You should run "sage -clone canvas3d" to create a new branch
and THEN import the patch, so you don't inadvertently modify the main,
stable Sage branch.

Cheers,
Bill

[Mike Witt]

On Jul 10, 4:44 pm, William Cauchois <wcauch...@gmail.com> wrote:
> On Fri, Jul 10, 2009 at 4:19 PM, Mike Witt<mwg...@gmail.com> wrote:
>
> >> Here's an example, from my comment on the ticket:
>
> >> {{{
> >> x, y = var('x y')
> >> plot3d(sin(pi*(x^2+y^2))/2,(x,-1,1),(y,-1,1), viewer='canvas3d',
> >> plot_points=(20, 20))
>
> >> }}}
>
> > Hmm.... Well, maybe I didn't actually succeed in installing the patch.
> > I get: ValueError: Unknown 3d plot type: canvas3d.
>
> > I did hg_sage.apply("http://trac.sagemath.org/sage_trac/attachment/
> > ticket/6447/trac_6447-canvas3d.patch") and I didn't *think* I saw
> > anything that looked like and error message. I'm running sage-4.0.2.
> > I've never actually tried to apply a patch before, so I'm not too sure
> > what I'm doing.
>
> I think I found your problem. The URL you specified points to the HTML
> formatted diff that is displayed by default. If you scroll to the
> bottom of that page, there's a link for "Download in other formats:
> Original Format" -- the URL you want is actually

> <http://trac.sagemath.org/sage_trac/raw-attachment/ticket/6447/trac_64...>.

>
> > Is there a section in the documentation that tells about applying
> > patches, and related things?
>
> The only relevant section I could find
> <http://sagemath.org/doc/developer/producing_patches.html> describes
> the opposite of what you want to do. You might want to read the bit
> about branches though, if you're not familiar with that feature
> already. You should run "sage -clone canvas3d" to create a new branch
> and THEN import the patch, so you don't inadvertently modify the main,
> stable Sage branch.
>
> Cheers,
> Bill

I'm afraid this looks beyond what I can manage. I was hoping it was an
"easy" tweak, like installing an spkg. I sure hope this makes it into
the "real" sage code someday. But thanks for the help.

-Mike

[Nick Alexander]

>>> I did hg_sage.apply("http://trac.sagemath.org/sage_trac/attachment/
>>> ticket/6447/trac_6447-canvas3d.patch") and I didn't *think* I saw
>>> anything that looked like and error message.

It sounds like you haven't built sage (sage -b) before rerunning it.
You might also try (from a fresh sage!) "sage -merge 6447", which
should download, import, build, and test for you.

Nick

[William Cauchois]

Is there anyone who could referee #6447, my ticket to implement
canvas3d? I think this would be a neat feature to have in Sage.

Thanks,
Bill

[leonardo parada]

wow...Congratulations.
Here there some related examples in 2D
http://jsxgraph.uni-bayreuth.de/wp/examples/
Would be interesting to integrate fully this on SAGE

2009/8/6 William Cauchois <wcau...@gmail.com>

--
Leonardo Parada
Licenciado en Ingenieria Acustica
Ingeniero en Acustica (c)
http://leonardoparada.cl

[William Stein]

On Thu, Aug 6, 2009 at 5:57 PM, William Cauchois<wcau...@gmail.com> wrote:
>
> Is there anyone who could referee #6447, my ticket to implement
> canvas3d? I think this would be a neat feature to have in Sage.

Somebody posted two good questions on the ticket in response to this:

Quick questions:

* Should the default view angle for the new viewer match that for
tachyon and jmol?

* Is it possible to enable axes?

William

>
> Thanks,
> Bill
>
> On Fri, Jul 10, 2009 at 9:23 PM, Nick Alexander<ncale...@gmail.com> wrote:
>>
>>>>> I did hg_sage.apply("http://trac.sagemath.org/sage_trac/attachment/
>>>>> ticket/6447/trac_6447-canvas3d.patch") and I didn't *think* I saw
>>>>> anything that looked like and error message.
>>
>> It sounds like you haven't built sage (sage -b) before rerunning it.
>> You might also try (from a fresh sage!) "sage -merge 6447", which
>> should download, import, build, and test for you.
>>
>> Nick
>>
>> >
>>
>
> >
>

--
William Stein
Associate Professor of Mathematics
University of Washington
http://wstein.org