Archive

Posts Tagged ‘math’

ASCIIMathML WordPress Plugin

February 6th, 2009 2 comments

I’ve updated my ASCIIMathML plugin so that it doesn’t have quite so many security holes and abuse vectors. I’ve put it up for download at http://www.reversefold.com/blog/asciimathml_0.2.tgz. Please note that this requires command-line access to run, requires python and inkscape to be installed, and has been tested only on linux. There may also be security problems and bugs. I take no responsibility for anything that may happen if you should use this. The code is released under the LGPL for now.

With the disclaimers out of the way, I hope this is useful to you. Let me know if you have any issues with it or any suggestions for improvements.

This is an update of a previous post.

Categories: math, PHP Tags: , , ,

Pretty equations in HTML

November 27th, 2008 6 comments

You may have seen the nice looking equations in my last post. As part of the process of writing that post I researched MathML as a way of embedding the equations in the post. it turned out to be a complex markup language which renders very nicely but has a few big drawbacks. The first is that only Firefox supports MathML in its core so far. There is a plugin for Internet Explorer which supports it but I doubt it’s widely installed. The second problem is that you can’t just put MathML in your web page and have Firefox interpret it. It turns out you need a bit of Javascript to make it pick up and render the MathML. This is great and makes equations render very well in Firefox but writing the MathML is a pain.

Enter ASCIIMathML, a JavaScript library which converts a simple ASCII format to MathML for rendering in MathML compliant browsers. The syntax is pretty much what you would expect with a few tricks up its sleeve. A simple equation, such as `y=x^2` is written as y=x^2. A more complicated example from my last post such as:
`arc=2*cos^-1(1-r_2^2/(2*r_1^2))*r_1`
is written as:

arc=2*cos^-1(1-r_2^2/(2*r_1^2))*r_1

Another example with a square root:
`y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)`

y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)

Now, those if you viewing these posts in a non-Firefox browser are probably wondering why you are also seeing pretty equations here. The short answer is that you’re seeing images imstead of MathML rendered by your browser. The long answer involves a four part toolchain. The first piece is ASCIIMathML, slightly altered to insert an image tag instead of MathML. The images are generated by a PHP script which first runs the ASCII through ASCHIIMathPHP, a version of ASCIIMathML.js to PHP. The resulting MathML has the times symbol replace by one which the later tools understand (replace ⋅ with ·). The resulting MathML is then passed to svgmath, a python script which converts MathML to SVG. SVG would be great but Internet Explorer still doesn’t support it without a plugin. Because of this the SVG is then passed through inkscape via command-line to render out a png which is what you see in your browser.
Here’s some sample PHP to run these commands:

$ascii = 'y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)';
 
$pngFile = md5($ascii).'.png';
if (!file_exists($pngFile)) {
    require 'ASCIIMathPHP-2.0.cfg.php';
    require 'ASCIIMathPHP-2.0.class.php';
 
    $ascii_math = new ASCIIMathPHP($symbol_arr);
    $ascii_math->setExpr($ascii);
    $ascii_math->genMathML();
 
    $mathml = $ascii_math->getMathML();
 
    $mathml = str_replace('⋅', '·', $mathml);
 
    $mathmlFile = tempnam(sys_get_temp_dir(), 'mathml');
    $td = fopen($mathmlFile, 'w');
    fwrite($td, $mathml);
 
    $svgFile = tempnam(sys_get_temp_dir(), 'svg');
    system("/usr/bin/env python math2svg.py -s $mathmlFile > $svgFile");
 
    system("inkscape -f $svgFile -e $pngFile");
 }
 
header('Content-Type: image/png');
die(file_get_contents($pngFile));

All of this is also wrapped up in a WordPress plugin which includes the JS file in the header. Unfortunately, I don’t have an easy way to package this up as it requires python and inkscape but if you would like to get more info just let me know and I’ll send you more information.

UPDATE: I finally did update the plugin to be useful for others and posted it.

Fitting circles within a larger circle

November 24th, 2008 No comments

I have been working on an internal graphical tool at work and had an interesting problem arise. How can I know how many smaller circles I can fit within a larger circle? The best way to lay them out that I came up with was to put the smaller circles in an arc inside of the larger circle, just one smaller circle’s radius in from the edge of the large circle. This looks something like this:

Circles within a circle

Circles within a circle

When the first arc is filled up you then move to an arc which is the diameter of the small circles further within the large circle. The problem, however, is how to know how many circles can fit along that arc. I started originally with a simplistic realization that the arc length would be similar to the diameter of the small circles. This works out ok but ends up creating problems especially when you get close to the center of the larger circle (i.e. when the radius of the arc is close to the radius of the small circles). The correct solution is to calculate the exact angle along the arc that the circle takes up. After a few false starts with incorrect assumptions regarding tangent lines and their lengths I came up with the following.

Geometric definition

Geometric definition

  • The large circle is centered at the origin
  • `r_1` is the radius of the large circle
  • `C` is the center of the small circle
  • `r_2` is the radius of the large circle
  • `I` are the interseciton points between the circles
  • `theta` is the angle between the x axis and the line from the origin to `I`
  • `arc` is the length of the arc between the two interseciton points (`I`)

Given

`C=(r_1,0)`
`I=(x,+-y)`
`theta=cos^-1(x/r_1)`
`arc=2*theta*r_1`

Circle Equations

`x^2+y^2=r_1^2`
`(x-r_1)^2+y^2=r_2^2`

Solve for `y^2`

`y^2=r_1^2-x^2`
`y^2=r_2^2-(x-r_1)^2`

Set equal and solve for `x`

`r_2^2-(x-r_1)^2=r_1^2-x^2`
`x^2-(x^2-2*x*r_1+r_1^2)=r_1^2-r_2^2`
`2*x*r_1-r_1^2=r_1^2-r_2^2`
`2*x*r_1=2*r_1^2-r_2^2`
`x=(2*r_1^2-r_2^2)/(2*r_1)`
`x=r_1-r_2^2/(2*r_1)`

`theta` is then:

`theta=cos^-1((r_1-r_2^2/(2*r_1))/r_1)`
`theta=cos^-1(1-r_2^2/(2*r_1^2))`

You could then use `theta` directly but this will leave you with a remainder of space that’s empty in the arc. To make the circles equally spaced you need the arc length.

Replace values for a full `arc` formula

`arc=2*cos^-1(1-r_2^2/(2*r_1^2))*r_1`

You can then divide the large circle’s circumfrence by the arc length to get the actual number of circles that will fit. You then divide the circle into that many pieces and voila, you get equally spaced circles like the first image above.

`y` is not needed for the solution, but comes out to be:

`y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)`

Categories: html, JavaScript, math Tags: ,