<div dir="ltr"><div class="markdown-here-wrapper" id="markdown-here-wrapper-563371" style="font-size:1em;font-family:Helvetica,arial,freesans,clean,sans-serif;color:rgb(34,34,34);background-color:rgb(255,255,255);border:none;line-height:1.2">

<p style="margin:1em 0px">Hi everyone,</p>
<p style="margin:1em 0px">I was at Pycon yesterday and saw a really cool IPython notebook + HTML5 talk by Matt Davis. Motivated by the talk, I was curious to see if I could get WebGL running via three.js, so I went ahead and wrote an interactive molecule viewer.</p>


<p style="margin:1em 0px"><img src="cid:ii_13d7ff1e27f70318" alt="Inline image 1" width="420" height="289"></p>
<p style="margin:1em 0px">FYI, it&#39;s a lazy first-pass port of <a href="http://www.patrick-fuller.com/molecule-viewer-alpha/" style="color:rgb(51,51,238);text-decoration:none">another molecule viewer I wrote</a>, which is itself a lazy first pass at learning webGL... which leads me to some questions :-)</p>


<ul style="padding-left:2em;margin:1em 0px">
<li style="margin:1em 0px"><p style="margin:1em 0px">I&#39;m confident that I&#39;m misusing the <code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;margin:0px 0.15em;padding:0px 0.3em;white-space:nowrap;border:1px solid rgb(234,234,234);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;display:inline">Javascript</code> and <code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;margin:0px 0.15em;padding:0px 0.3em;white-space:nowrap;border:1px solid rgb(234,234,234);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;display:inline">HTML</code> objects. The <code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;margin:0px 0.15em;padding:0px 0.3em;white-space:nowrap;border:1px solid rgb(234,234,234);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;display:inline">Javascript</code> docstring talks about a generated <code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;margin:0px 0.15em;padding:0px 0.3em;white-space:nowrap;border:1px solid rgb(234,234,234);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;display:inline">element</code> object, but I couldn&#39;t get jQuery to bind to it. My current selector is <code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;margin:0px 0.15em;padding:0px 0.3em;white-space:nowrap;border:1px solid rgb(234,234,234);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;display:inline">&quot;div.molecule&quot;</code>, which runs into some fairly obvious problems when you draw more than one molecule.</p>


</li>
<li style="margin:1em 0px"><p style="margin:1em 0px">I have no idea what the javascript variable scopes look like. Am I in danger of overwriting something important to IPython?</p>
</li>
</ul>
<p style="margin:1em 0px">Also, is there any general interest out there in exploring ipython notebook + webgl further? Are there other projects that do so?</p>
<p style="margin:1em 0px">Thanks for hearing me out (and working on such a cool open-source project!),<br>Pat</p>
</div></div>