# LATEX in processing

**URL:** <https://discourse.processing.org/t/latex-in-processing/19691>\
**Category:** Libraries\
**Created:** [April 12, 2020, 8:05am UTC](https://discourse.processing.org/t/latex-in-processing/19691 "2020-04-12T08:05:41Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![shahroze](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@shahroze](https://discourse.processing.org/u/shahroze)\
**Post date:** [April 12, 2020, 8:05am UTC](https://discourse.processing.org/t/latex-in-processing/19691/1 "2020-04-12T08:05:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [April 12, 2020, 8:06pm UTC](https://discourse.processing.org/t/latex-in-processing/19691/2 "2020-04-12T20:06:50Z")

</div>

Welcome! Not too sure about this one, but perhaps I can get you oriented.

Have a look at [JLaTeXMath](https://github.com/opencollab/jlatexmath). You can download the latest version [here](https://search.maven.org/remotecontent?filepath=org/scilab/forge/jlatexmath/1.0.7/jlatexmath-1.0.7.jar), then drag the jar onto your Processing sketch. I skimmed the [examples](https://github.com/opencollab/jlatexmath/tree/master/jlatexmath-example-export/src/test/java/org/scilab/forge/jlatexmath/examples/export) 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](https://katex.org/) instead? Happy to get you up and running with that pair quickly.

---

<div class="post-metadata">

**Author:** ![janmaltel](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@janmaltel](https://discourse.processing.org/u/janmaltel)\
**Post date:** [June 3, 2020, 5:27pm UTC](https://discourse.processing.org/t/latex-in-processing/19691/3 "2020-06-03T17:27:04Z")

</div>

> Any chance you’re interested in working with p5.js and [KaTeX](https://katex.org/) 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](https://stackoverflow.com/questions/62156847/how-to-display-beautiful-math-equations-in-p5-js) before I discovered this post 🙂

Thanks!!

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [June 3, 2020, 9:46pm UTC](https://discourse.processing.org/t/latex-in-processing/19691/4 "2020-06-03T21:46:36Z")

</div>

Sure! The sketch below renders Poisson’s equation \nabla^{2}\Phi=\sigma(x) into a paragraph element.

```javascript
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](https://katex.org/docs/browser.html). Here is the [full example](https://editor.p5js.org/mcintyre/sketches/wpmxTA50u) in the p5.js Web Editor.

---

<div class="post-metadata">

**Author:** ![janmaltel](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@janmaltel](https://discourse.processing.org/u/janmaltel)\
**Post date:** [June 4, 2020, 8:45am UTC](https://discourse.processing.org/t/latex-in-processing/19691/5 "2020-06-04T08:45:40Z")

</div>

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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [June 4, 2020, 7:12pm UTC](https://discourse.processing.org/t/latex-in-processing/19691/6 "2020-06-04T19:12:20Z")

</div>

Another option is to set the parent element of your canvas and TeX expression. For example, if you had the following in your HTML:

```auto
<!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:

```javascript
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);
}

```

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [October 26, 2020, 11:54pm UTC](https://discourse.processing.org/t/latex-in-processing/19691/7 "2020-10-26T23:54:18Z")

</div>

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](https://github.com/opencollab/jlatexmath/blob/master/jlatexmath-example-export/src/test/java/org/scilab/forge/jlatexmath/examples/export/Example5.java)) like this:

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 27, 2020, 6:45am UTC](https://discourse.processing.org/t/latex-in-processing/19691/8 "2020-10-27T06:45:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [October 28, 2020, 10:20pm UTC](https://discourse.processing.org/t/latex-in-processing/19691/9 "2020-10-28T22:20:51Z")

</div>

> [@Chrisir](#):
>
> Did you try to drag and drop the jar onto the open processing ide Window?

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 ☹

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 28, 2020, 10:24pm UTC](https://discourse.processing.org/t/latex-in-processing/19691/10 "2020-10-28T22:24:33Z")

</div>

Darn.

It’s package

package org.scilab.forge.jlatexmath.examples.export;

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [October 29, 2020, 1:01am UTC](https://discourse.processing.org/t/latex-in-processing/19691/11 "2020-10-29T01:01:59Z")

</div>

I skimmed the source code for [Convert.java](https://github.com/opencollab/jlatexmath/blob/master/jlatexmath-example-export/src/test/java/org/scilab/forge/jlatexmath/examples/export/Convert.java) and found there are quite a few dependencies, so I went and got them 😀

[Here](https://github.com/nickmcintyre/processing-latex) is a working-ish version of your Processing sketch.

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [October 29, 2020, 1:36am UTC](https://discourse.processing.org/t/latex-in-processing/19691/12 "2020-10-29T01:36:09Z")

</div>

Wonderful! Thank you so much, @mcintyre!

I had to create an empty `data` folder before the sketch would work.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f658b3fc5e0c6ef28033fdd7f4afa3e5d1f9a1a6.png)

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [October 29, 2020, 1:50am UTC](https://discourse.processing.org/t/latex-in-processing/19691/13 "2020-10-29T01:50:10Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [October 30, 2020, 2:11am UTC](https://discourse.processing.org/t/latex-in-processing/19691/14 "2020-10-30T02:11:16Z")

</div>

Sure! I just started work on a proper library. There is a Python mode example bundled along with the [first release](https://github.com/nickmcintyre/processing-latex/releases/tag/v0.0.1).

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [October 30, 2020, 1:54pm UTC](https://discourse.processing.org/t/latex-in-processing/19691/15 "2020-10-30T13:54:03Z")

</div>

MY HERO! 💟