how to use latex in processing for displaying equations. Is there a library for using latex or can i create it please give a detailed solution.
2 Likes
Welcome! Not too sure about this one, but perhaps I can get you oriented.
Have a look at JLaTeXMath. You can download the latest version here, then drag the jar onto your Processing sketch. I skimmed the examples and it seems like you could generate SVG’s before displaying them with Processing.
Any chance you’re interested in working with p5.js and KaTeX instead? Happy to get you up and running with that pair quickly.
4 Likes
Any chance you’re interested in working with p5.js and KaTeX instead? Happy to get you up and running with that pair quickly.
I would be very interested. I had already posted a question on stackoverflow before I discovered this post 
Thanks!!
1 Like
Sure! The sketch below renders Poisson’s equation \nabla^{2}\Phi=\sigma(x) into a paragraph element.
let tex;
function setup() {
createCanvas(400, 400);
tex = createP();
tex.style('font-size', '20px');
tex.position(135, 165);
katex.render('\\nabla^{2}\\Phi=\\sigma(x)', tex.elt);
}
The double \\ avoids escaping characters unintentionally in the middle of your TeX expression.
You can add KaTeX to the <head></head> of your sketch’s HTML file as outlined in the library’s documentation. Here is the full example in the p5.js Web Editor.
2 Likes
That’s great, thanks!!
Your code snippet led to another small issue for me because the coordinates of tex.position(135, 165) seems to be relative to some parent element in the DOM and not to the canvas itself (it seems like both coincide in the p5.js editor). So basically, when I set tex.position(0, 0), the equation appears in the top-left corner of my page and not in the top-left corner of my canvas (which is somewhat more centered on my page).
I could fix this one myself by manually getting the position of the canvas and adding the coordinates so the tex.position arguments as follows:
let tex;
function setup() {
const cnv = createCanvas(400, 400);
tex = createP();
tex.style('font-size', '20px');
// Get the coordinates of the canvas
const { x: cnvX, y: cnvY} = cnv.position()
// Set position of the tex element relative to the canvas position
tex.position(cnvX + 135, cnvY + 165);
katex.render('\\nabla^{2}\\Phi=\\sigma(x)', tex.elt);
}
Is there a more direct way of doing this?
1 Like
Another option is to set the parent element of your canvas and TeX expression. For example, if you had the following in your HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- links, scripts, etc. -->
</head>
<body>
<script src="sketch.js"></script>
<div id="canvas"></div>
</body>
</html>
You could use the <div> like so:
let tex;
function setup() {
const cnv = createCanvas(400, 400);
cnv.parent('canvas');
tex = createP();
tex.parent('canvas');
tex.style('font-size', '20px');
tex.position(135, 165);
katex.render('\\nabla^{2}\\Phi=\\sigma(x)', tex.elt);
}
4 Likes
Hey! I’m terrible at this .jar importing thing, can anyone please help?
After adding code/jlatexmath-1.0.7.jar to my sketch, how should the import line be? I tried import org.scilab.forge.jlatexmath.*; but I still don’t get the Convert…
I was trying to run example5 (https://github.com/opencollab/jlatexmath/blob/master/jlatexmath-example-export/src/test/java/org/scilab/forge/jlatexmath/examples/export/Example5.java) like this:
import org.scilab.forge.jlatexmath.*;
import java.io.IOException;
/**
* A class to test LaTeX rendering.
**/
String latex = "\\begin{array}{|c|l|||r|c|}";
latex += "\\hline";
latex += "\\text{Matrix}&\\multicolumn{2}{|c|}{\\text{Multicolumns}}&\\text{Font sizes commands}\\cr";
latex += "\\hline";
latex += "\\begin{pmatrix}\\alpha_{11}&\\cdots&\\alpha_{1n}\\cr\\hdotsfor{3}\\cr\\alpha_{n1}&\\cdots&\\alpha_{nn}\\end{pmatrix}&\\Large \\text{Large Right}&\\small \\text{small Left}&\\tiny \\text{tiny Tiny}\\cr";
latex += "\\hline";
latex += "\\multicolumn{4}{|c|}{\\Huge \\text{Huge Multicolumns}}\\cr";
latex += "\\hline";
latex += "\\end{array}";
println(latex);
try {
Convert.toSVG(latex, "Example5.svg", false);
Convert.toSVG(latex, "Example5_shaped.svg", true);
Convert.SVGTo("Example5.svg", "Example5.pdf", Convert.PDF);
Convert.SVGTo("Example5_shaped.svg", "Example5_shaped.pdf", Convert.PDF);
Convert.SVGTo("Example5.svg", "Example5.ps", Convert.PS);
Convert.SVGTo("Example5.svg", "Example5.eps", Convert.EPS);
}
catch (IOException ex) {
throw new RuntimeException(ex);
}
Without checking :
Did you try to drag and drop the jar onto the open processing ide Window?
Not sure if the import statement is necessary here
1 Like
Hi @Chrisir! Yes, this is exactly what I did, the jar file gets added to a code folder inside the sketch folder. I tried with and without the import statement and Convert is unknown 
Darn.
It’s package
package org.scilab.forge.jlatexmath.examples.export;
I skimmed the source code for Convert.java and found there are quite a few dependencies, so I went and got them 
Here is a working-ish version of your Processing sketch.
2 Likes
Wonderful! Thank you so much, @mcintyre!
I had to create an empty data folder before the sketch would work.
1 Like
I wouldn’t want to abuse my luck (and your generosity), but as I’m mostly using Processing Python mode (which can’t have .java tabs), could you add that Convert helper to the jar file?
Sure! I just started work on a proper library. There is a Python mode example bundled along with the first release.
4 Likes
MY HERO! 