Sekai ๐ŸŒ ๐Ÿ—บ

Sekai (ไธ–็•Œ) is the kanji for “the world”. That’s a great word because of the scale that it designates.

Removed jQuery Dependency from My Math Editor

Background

jQuery provides many handy functions to speed up the development, for example document.ready(), element.toggle(), element.hide(), etc. My math editor used some of them. However, I replaced them with Vanilla JavaScript at commit 4a35c45b.

Goal

Some users complained about the white background in the past versions of my editor. That had motivated me to refactor the code, so that it would be easier to maintain and to add in new features.

HTML5 input types used

Actual appearance might vary across browsers.

[Read More]

Showdown KaTeX With mhchem

mhchem support for Showdown-KaTeX

Background

I’ve written about bringing user-defined KaTeX macros into Hugo a few years ago. Looking back, I realized that I only knew how to copy code at that time.

Goal

  1. To replace the current code for my math editor with Showdown-KaTeX.
  2. To bring mhchem into my LaTeX + Markdown sandbox.

Motivation

To get the benefits of the three free (as in “freedom”) technologies.

  1. Markdown syntax is (much) simple(r than its LaTeX equivalent, especially for tables, ordered/unordered lists, etc).
  2. LaTeX syntax for math is, in the long run, worth learning, so that your fingers can stay on the keyboard while editing math expressions.
  3. mhchem allows writing chemical equations conveniently as in the previous point.

However, Rattle has pointed out the difficulties of mixing LaTeX and Markdown syntax. In his proposed solution for WordPress, he first renders KaTeX before moving to Markdown. He has provided an example use case with a dollar sign $ in a normal Markdown content (e.g. An apple costs $1.5.)

[Read More]

Exponential Function Product Rule

A first definition of exponential and logarithmic functions

Motivation from compound interest

Increase the number of times that the interest is compounded each year ($n$), so as to increase the final amount of money ($A$)

$$A = P \left(1 + \frac{r}{n}\right)^{nt}.$$

$t$ and $r$ are the number of years and the interest rate per annum.

As $n$ becomes large, we can approximate the amount by

$$A = P e^{rt}.$$

The value of $A$ in the above formula is the amount compounded continuously.

[Read More]
limits 

Existence of Four Triangle Centers

A vector proof

Settings

Let

  • $P$ be an arbitrary reference point.
  • $\triangle ABC$ be a triangle.
  • $\vec{a} = \overrightarrow{PA}$, $\vec{b} = \overrightarrow{PB}$, $\vec{c} = \overrightarrow{PC}$

Remark: $O$ is reserved for circumcenter.

symbol name meaning
$G$ centroid center of gravity
$H$ orthocenter three “heights” are concurrent
$I$ incenter center of inscribed circle
$O$ circumcenter center of circumscribed circle

Centroid

Verify that $(\vec{a} + \vec{b} + \vec{c})/3$ satisfy the constraints.

Orthocenter

Let

  • $H$ be the point of intersection of two altitudes $AA_H$ and $BB_H$
  • $\vec{h} = \overrightarrow{PH}$
\begin{align} (\vec{h} - \vec{a}) \cdot (\vec{b} - \vec{c}) &= 0 \\ (\vec{h} - \vec{b}) \cdot (\vec{c} - \vec{a}) &= 0 \end{align}

Add these two equations together.

[Read More]

Katex Boxed Equations

Goal

To render a bordered box with multiple equations.

Background

My previous article about dot products contains some boxed math expressions: some are inline and some take up the whole line.

For inline math, that’s simple: either $\fbox{text}$ or $\boxed{a=1}$ will do. For displayed math, these two KaTeX commands will ignore the newline command \\.

Solution

A simple Google search ‘“katex” AND “box”’ saved the day. It led me to this relevant Stack Overflow question, whose accepted answer suggested the use of custom CSS. I copied the CSS class name boxedmath for my blog.

[Read More]
KaTeX  CSS 

Tikz to SVG in VS Code

My little LaTeX Workshop recipe

Goal

View SVG graphics generated from TikZ code in VS Code.

LaTeX TikZ coding + SVG preview in VS Code

Compile TikZ code and preview SVG in VS Code

with LaTeX Workship and SVG Preview

Part I: generate SVG using LaTeX Workshop

From the IDE’s parameters tab, I found the tools and recipes parameters. I clicked my user settings settings.json twice: once through the tools, and once through the recipes. Each click generated an array of default recipes or tools. Each of the former is a sequence of the later, which represents a command. The official examples and placeholders are easy to follow. Here’s the two JSON objects that I added.

[Read More]

Dot Products

My complicated derivation

Preface

There’s a simpler derivation using

  1. the geometric defintion
  2. linearity from the definition
  3. orthogonality of the canonical basic vectors $\vec{i}$, $\vec{j}$ and $\vec{k}$.

If I had read that, I wouldn’t have type this document in LaTeX. The following content was transcribed from a PDF file that I made three days ago.

Content

Recall: $\sum_{i=m}^{n} a_{i}=a_{m}+a_{m+1}+a_{m+2}+\cdots +a_{n-1}+a_{n},$ where $m$, $n$ are integers.

Example: $\sum_{i=3}^6 i^2 = 3^2 + 4^2 + 5^2 + 6^2 = 86$

[Read More]

Functions for Arts

Summary of my two-day work

  1. my HTML slides
  2. You may view the source code of this blog to see the source files.

Goal

To provide an introduction to the formal definition of functions for arts stream students.

I aim to

  1. minimize the calculations
  2. use daily-life examples
  3. favor pictures over text.

IT skills used

Inkscape

  1. C-S-a for alignment.
  2. C-S-f for boundary and colors, and line patterns (i.e. arrows).
  3. C-S-d for document size.
  4. clipping process:
    1. prepare the object to be clipped.
    2. prepare the clip, which is on top of the previous object.
    3. select Object โ†’ Clip and then the first option from the top menu.

dvisvgm

Use the TEX โ†’ DVI โ†’ SVG route with latex and this tool with options --font-format=woff and -b 5 -R -d 2 to save file size and to ensure that the SVG can be correctly opened on Inkscape.

[Read More]

dvisvgm Guide for TikZ Pictures with Pattern Filling

A quick note of the right commands for the conversion

Problem

I had issues in getting a SVG from a TikZ picture containing a pattern filling: https://github.com/mgieseki/dvisvgm/issues/158. The reported issue was created last year, and it’s marked as fixed. Nonetheless, I had this issue even though my MikTeX was up-to-date.

Discussion

  1. I wanted to confirm whether my dvisvgm.exe, which had been shipped with MikTeX, was latest.
  2. I gave a MWE illustrating the problem with the graph of y = (x + 1)ยฒ with region under the curve filled with a pattern in the above issue. I knew that’s probably off-topic, but the package owner might have some insights about the problem. It turned out that PDF โ†’ SVG was partly supported by dvisvgm. Using DVI โ†’ SVG, I managed to get the filling pattern, but I lost the beautiful Computer Modern Roman fontsโ€”that’s another issue.
  3. Hoping for a response from the owner for the previous problem, I started https://github.com/mgieseki/dvisvgm/issues/186. He suggested the use of --no-fonts or --font-format=woff. I observed no difference in the local filesystem. I uploaded everything I got through GitHub so that he could see what my dvisvgm.exe had output. I didn’t expected that the Computer Modern Roman fonts disappeared on GitHub side. If I hadn’t asked there, I would have never known that it’s the web browser’s security measure not to load the embedded font data in a SVG loaded from a server.

Skills learned

Meaning of some commonly used parameters of dvisvgm:

[Read More]
LaTeX  dvisvgm  SVG 

Distance From a Line

TikZ figures for a derivation from dot product

Background

A secondary school student posted a coordinate geometry question on a Discord homework help server. A helper replied to that question with an illustration of the Perpendicular Distance Formula

$$ d((x_1,y_1), L) = \frac{\lvert Ax_1 + By_1 + C \rvert}{\sqrt{A^2 + B^2}}, $$

where $L$ is the line $Ax + By + C = 0$ without proof.

Goal

To provide an illustrated derivation of this formula.

Recall

A basic property of the dot product: the “algebraic definition” is equivalent to the “geometric definition”.

[Read More]
LaTeX