Latex
import
...
export
default
makeScene2D
(
function
*
(
view
)
{
const
tex
=
createRef
<
Latex
>
(
)
;
view
.
add
(
<
Latex
ref
=
{
tex
}
tex
=
"
{{y=}}{{a}}{{x^2}}
"
fill
=
"
white
"
/>
)
;
yield
*
waitFor
(
0.2
)
;
yield
*
tex
(
)
.
tex
(
'{{y=}}{{a}}{{x^2}} + {{bx}}'
,
1
)
;
yield
*
waitFor
(
0.2
)
;
yield
*
tex
(
)
.
tex
(
'{{y=}}{{\\left(}}{{a}}{{x^2}} + {{bx}}{{\\over 1}}{{\\right)}}'
,
1
,
)
;
yield
*
waitFor
(
0.2
)
;
yield
*
tex
(
)
.
tex
(
'{{y=}}{{a}}{{x^2}}'
,
1
)
;
}
)
;
The
Latex
component is used to show mathematicalformulas and animate them.
Defining LaTex
You can specify the LaTex formula to show using the
tex
property. Similarly tothe
Txt
node, you can control the color and size ofthe text using the
fill
and
fontSize
properties respectively.
Make sure to always set some
fill
color otherwise nothing will be shown!
import
...
export
default
makeScene2D
(
function
*
(
view
)
{
view
.
add
(
<
Latex
// Try editing the formula below:
tex
=
"
a^2 + b^2 = c^2
"
fill
=
"
white
"
fontSize
=
{
32
}
/>
,
)
;
}
)
;
Animating LaTex
We can animate LaTex by tweening the
tex
property. To enable deletion,insertion and transformation animation you must split the formula into severalparts. You can do this by providing an array of strings:
<
Latex
tex
=
{
[
'a^2'
,
'+'
,
'b^2'
,
'='
,
'c^2'
]
}
/>
Or by using the curly bracket (
{{}}
) syntax:
<
Latex
tex
=
"
{{a^2}} + {{b^2}} = {{c^2}}
"
/>
// equivalent to
<
Latex
tex
=
{
[
'a^2'
,
'+'
,
'b^2'
,
'='
,
'c^2'
]
}
/>
You can also mix both:
<
Latex
tex
=
{
[
'{{a}}^2'
,
'+'
,
'{{b}}^2'
,
'='
,
'{{c}}^2'
]
}
/>
// equivalent to
<
Latex
tex
=
{
[
'a'
,
'^2'
,
'+'
,
'b'
,
'^2'
,
'='
,
'c'
,
'^2'
]
}
/>
A tex part that only exists in the source formula is considered deleted and getsfaded out. Analogically, a part that only exists in the target formula is fadedin. Tex parts that exist in both the source and destination formulas will betweened:
import
...
export
default
makeScene2D
(
function
*
(
view
)
{
const
tex
=
createRef
<
Latex
>
(
)
;
view
.
add
(
<
Latex
ref
=
{
tex
}
tex
=
"
{{1}} + {{2}}
"
fill
=
"
white
"
/>
)
;
yield
*
waitFor
(
0.5
)
;
yield
*
tex
(
)
.
tex
(
[
'2'
,
'+'
,
'3'
,
'+'
,
'4'
]
,
1
)
;
}
)
;
If a given tex part occurs multiple times in the source and target formula, butthe number of occurrences does not match, the part will duplicated or merged.You can see this in action in the example above. The formula starts with onlyone plus sign (
+
), but ends with two.
Common pitfalls
Escaping slashes
The backslash character (
\
) is used as an escape character in JavaScript. Inorder to use it as part of a LaTex formula, you need to escape it by doublingit:
node
(
)
.
tex
(
'{{\\frac{1}{2}}}'
)
;
Note that this does not apply inside JSX string attributes:
// No escape needed:
<
Latex
tex
=
"
{{\frac{1}{2}}
"
/>
// Escape necessary:
<
Latex
tex
=
{
'{{\frac{1}{2}}'
}
/
>
Missing spaces
As of right now, tex parts are put together by joining them with no separator.This may break your formula if it depends on a space between two parts. Forexample, the following formula will break:
<
Latex
tex
=
{
[
'\\Delta'
,
'y'
]
}
/>
The node will attempt to parse it as
\\Deltay
instead of the correct
\\Delta y
. To prevent it, you should wrap the
y
part in curly brackets:
<
Latex
tex
=
{
[
'\\Delta'
,
'{y}'
]
}
/>
This will be parsed as
\\Delta{y}
which is correct.