LATEX in processing

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 :slight_smile:

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 :frowning:

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 :grinning:

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! :heart_decoration: