jupyter-widgets / pythreejs

A Jupyter - Three.js bridge
https://pythreejs.readthedocs.io
Other
951 stars 188 forks source link

latex annotation #24

Closed oroszl closed 2 years ago

oroszl commented 9 years ago

Is there a simple way of using Latex annotations ? I toyed around with Sprites with TextTextures and sofar managed to get subscriptions (really awkwardly with two Sprites). But it would be really useful for teaching if I could use proper latex. Is there a proper way to do this ?

jasongrout commented 9 years ago

First, you might use the make_text convenience function: https://github.com/jasongrout/pythreejs/blob/master/pythreejs/pythreejs.py#L712

Unfortunately, we use canvas to render the text (because we need to convert the text to a picture texture). That means it is not very easy, but there might be a way to do this. There are ways to render html elements (so, for example, generated by MathJax from latex) in an svg inside a canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas. This will take some work to do, though.

oroszl commented 9 years ago

I made some digging and I found that a since annotations are usually small formulas, a png might suffice. So I was wondering if there is a simple way of generating an uri from sympy pretty_printing that would hold a picture of the formula.. and just simply use an ImageTexture for the SpriteMaterial of the annotation Sprite. Was this your idea as well or you were thinking something different ? I guess svg would look better though..

oroszl commented 9 years ago

so basically my quick and dirty suggestion would be something along this line.. (I know it reeks of inappropriate misuse of matplotlib.. but hey.. i am just reading the martian.. if he gets away with the RTG I might can get away with my code.. ) from io import BytesIO import base64

def eqimg(eqstr):
    sio2=BytesIO();
    figsize(1,1);
    fig=figure();
    ax=fig.add_subplot(111);
    ax.text(0,0,eqstr,fontsize=60);
    ax.axis('off');
    fig.savefig(sio2, format="png",transparent=True)
    figstr='data:image/png;base64,'+(base64.encodebytes(sio2.getvalue()).decode());
    return figstr

and use the output like ImageTexture(imageuri=eqimg(r'$d_x$')) in a SpriteMaterial ..

vidartf commented 2 years ago

Closing as stale.