User:Cmglee

shaded pole motor principle.svg ☎ 4 February 2026

As I had trouble with my desk fan, I got interested in how its motor worked, and learnt about shaded-pole motors. Its article lacked an illustration showing its operation, so I decided to draw one. Reading some websites and watching YouTube suggested ways to teach it. I considered making an animation but decided that a time series of stills explains the concept better.

Though I used Pythagorean triples to get nice integer coordinates, making the oblique projection was still challenging, especially around the circular arcs. I also cheated by drawing only two states of the rotor but hope it does not detract from showing the rotating net magnetic field.

Now looking forward to international editors adding the topic to their respective Wikipedias!

tilting vessel principle.svg ☎ 13 December 2025

As I create my SVG in Notepad++, I previously saved the file, switched windows to my web browser, reloaded and switched back each time I wanted to preview my changes.

While drawing this diagram, it occurred to me to temporarily add this JavaScript snippet to continually load the page:

<script>setTimeout('location.reload()',2e3);</script>

Now all I need to do is save the file in Notepad++ and the preview automagically updates within two seconds. Much quicker!

orchard planting problem.svg ☎ 28 November 2025

I thought the orchard-planting problem article deserved an illustration showing the first few solutions and found two pages^[1][2] with them. Unfortunately, subsequent solutions employed points at infinity which are less intuitive. The mathematics reference desk didn't give me a clear solution without infinity points to continue the series. If anyone knows any, please message me.

Instead of spots, I decided that cartoon trees were more aesthetic, so copied the three-ellipse tree I made up for File:fault_types.svg. After texturing it with an feTurbulence SVG filter, blending in a displaced blurred recoloured copy gave pseudo-3D shading. As it's supposedly an orchard, I faked apples in the trees with feTurbulence and feColorMatrix.

Russian meteor events.map ☎ 18 October 2025

I saw this transport map on the Mutiara line article and thought that being able to embed custom maps in articles was amazing.

Mutiara LRT route and stations

After some dabbling with GeoJSON files, I managed to put some markers on a map. The question was then, "What topic could benefit from this?" I remembered reading that Russia had a preponderance of meteor strikes, and a map comparing their locations might be useful to some. Hence, I made my first .map:

Comparing the Tunguska (1), Chelyabinsk (2) and Kamchatka (3) events' locations

I also learnt to draw lines and shapes on maps, but have yet to found a suitable topic. Any suggestions?

Free CAT bus route map

UPDATE 2025-12-21: Made one of the CAT bus route in George Town, Penang.

flight dynamics with text.svg ☎ 18 September 2025

I drew this SVG earlier this year to replace File:Flight dynamics with text.png which I found a little confusing as its perspective makes the roll axis seemingly change direction from the front to the back of the aircraft. The 3D text also makes it hard to translate.

After putting in several languages, I ran into the issue that some languages had overly long terminology causing labels to overlap the drawing or run offscreen. Shrinking the font instead left too much whitespace for more compact languages.

By chance, Glrx (talk · contribs) taught me a CSS method to use different font-size for different languages:

text[systemLanguage="zh"] {font-family: ...;}
text[systemLanguage="ko"] {font-family: ...;}
text[systemLanguage="ja"] {font-family: ...;}

Instead of font-family, I set font-size to different percentages by eye, where needed. Annoyingly, Arabic had a different size in the upload preview thumbnail from the eventual thumbnail, so it took a few tries to get it right.

continued fraction visualisation.svg ☎ 24 August 2025

I was very pleased to learn how a continued fraction can be visualised, and found graphically, at least in theory:

Draw a rectangle with aspect ratio equal to the number, and repeatedly fit in the largest possible squares. Count the number of squares of each size, starting with the largest. The series forms the continued fraction's terms!

This explains the golden spiral: there is exactly one square of each size, thus φ is [1; 1, 1, 1, ...].

It also shows why the reciprocal of a number has its terms simply shifted by one position and a zero added (if under one) or removed (if over one): just rotate the rectangle 90°!

Finding a good value to illustrate it was a good challenge. I wanted it to start with 1 or 2 and have smallish but non-repeating terms. Square roots have repeating terms, while e has several 1s. I then thought of cube roots, and sure enough, ∛3 had just the right terms.

Sadly, in practice, drawing errors rapidly make later terms inaccurate, but it is nevertheless a good visualisation.

BlankMap-World-striped.svg ☎ 16 Jul 2025

I chanced upon WikiPate's Graphics Lab/Map workshop request for a blank world map that lets countries be shaded in stripes. For example, a map showing countries using customary units in red, and SI or metric in blue might show a country using both with red and blue stripes.

Considering it an interesting challenge, I built on my choropleth idea of drawing each state twice, once as normal and the second time in a different colour but with the relevant opacity to blend the colours. In this case, I could draw the second map with a striped mask so that the first map shows through where the mask is clear.

My initial trial worked but there was a problem: if a country was small enough to be totally covered by one stripe, the second colour would not show. Though the base map File:BlankMap-World.svg addressed small countries with spots, I thought it neater to split the spots exactly in half when striped, so I replaced each circle with two semicircles of the respective colours.

Blank world map in Robinson projection adapted to let countries be shaded in stripes

Putting it all together with examples exploring edge cases (narrow countries roughly in the direction of the stripes) suggested the stripe angle to use. Now editors can simply edit the CSS likewise:

/* Solid */
.cl { fill:#0c0; }
.st { fill:#f00; }
/* Striped */
.aq1 { fill:#ff0; } .aq2 { fill:#fc0; }
.bm1 { fill:#00f; } .bm2 { fill:#9cf; }
.cu1 { fill:#c00; } .cu2 { fill:#960; }
.it1 { fill:#09f; } .it2 { fill:#6cf; }
.jp1 { fill:#f0f; } .jp2 { fill:#f6f; }
.nz1 { fill:#000; } .nz2 { fill:#666; }

rolling shutter effect animation.gif ☎ 31 May 2025

A physics student messaged me for the source code of this animation I made 12 years ago.

As I could no longer easily access it and wasn't satisfied with the image's discontinuities, I decided to remake it by copying each row as the disc spins for a smoother effect. The frames were rendered using Python 2 with pypng, converted to GIF, made into a GIF animation, and optimised with Ezgif.

I also added the Python source code for anyone to use under CC-BY-SA 4.0 terms.

Kuntilanak.jpg ☎ 30 Apr 2025

I had a dispute with some editors over an AI image that I thought useful to illustrate a mythical creature.

If AI artwork isn't welcome on Wikipedia, the Commons upload page should clearly state so, rather than disappoint contributors after they have put in some effort.

Anyway, I've learnt my lesson – no more AI art uploads for Wiki[pm]edia!

QM_AM_GM_HM_inequality_visual_proof.svg ☎ 31 Mar 2025

Jn.mdel's idea to change the labels of some points in this diagram such that the line segments of interest serendipitously have the same initials as their respective means was pretty clever.

I initially hesitated as "O is often used to label the centre of a circle, and [A was already in use:] AC is a analogous to BC being b. Additionally, the diagram is now used in many pages, and someone has to check that any change is correctly reflected."

After some convincing, I decided on the change, "relabeling B to P as the glyph P looks like b. To continue the progression from M to P, I think N can stand in for the original A, the centre of the circle implied to also be O."

Updating pages on which it was used took quite some effort, though, especially those in languages I didn't know. Hope I got it right!

cmglee_Penang_Esplanade_tossing_orange.jpg ☎ 28 Feb 2025

On another visit to Malaysia, I was invited to help in EngageMedia's Open Tech Camp 2025, my first unconference. It was good to learn about socio-political and digital security issues.

I also attended the Chap Goh Meh festival at the Esplanade. I was surprised to learn that Lantern Festival did not mention the common Malaysian tradition of throwing oranges, so I added this photo and a write-up to Lantern Festival#Finding_love.

harmonic_mean_graphical_computation.svg ☎ 1 Jan 2025

Last summer, I discovered nomograms, a graphical calculating device from pre-smartphone days. Points on two scales representing two independent variables are joined with a straight line segment. Its intersection with a third scale yields the calculated value.

I doubled the third scale of File:Nomogramparallelresistance.svg to make one for calculating harmonic means.

The diagram shows why the harmonic mean of a number and its negative is undefined: the red line segment is parallel to the third so there's no intersection! Sure enough,

${\displaystyle {\begin{aligned}{\frac {1}{z}}&={\frac {1}{x}}+{\frac {1}{-x}}=0\\\therefore z&={\frac {1}{0}}\\\end{aligned}}}$

Adding two other nomograms gave me a set to calculate the Pythagorean means. To show it in action, I added two examples of the smallest distinct positive integer means in blue and red:

Nomograms to graphically calculate arithmetic (1), geometric (2) and harmonic (3) means

Buckyboard.svg ☎ 24 Dec 2024

I found myself into boardgames this summer and thought the articles for several popular ones could do with illustrations of their playing areas, and so I made some, ensuring that the shapes were generic enough to not violate copyright.

I also realised that the Hunt the Wumpus map, often described as a dodecahedron's vertices linked by its edges could be alternatively (and perhaps more intuitively) reimagined as regions on a spherical icosahedron linked by their common edges.

Incidentally, I found it disappointing that no area-control boardgame I knew of had a game map based on a real sphere. Global ones tend to cut off the poles even if they allow wrapping around the sides.

I then realised that Goldberg polyhedra are particularly suited. Though 20 cells have five instead of six neighbours, they almost form a hex map.

Moreover, the net for a truncated dodecahedron can be laid out very neatly, unlike that of an order-5 truncated pentagonal hexecontahedron, which has a more useful number of faces (60 hexagons and 12 pentagons).

Though I initially wanted to link faces sharing an edge in 3D with dotted lines in the net, just in case game pieces might be placed on the vertices as in Catan, I've instead connected vertices of the net which represent the same 3D vertex with dotted lines.

I finally decided on four cells of each terrain type: desert, grassland, forest and jungle, plus 14 cells denoting water and two of ice.

Template:Body_roundness_index/sandbox ☎ 5 Nov 2024

Uwappa‬ (talk · contribs) recently contacted me after I responded to a request for help on a body index calculator. I was initially interested in creating graphics like this one, but was drawn into their project to create a live calculator on Body roundness index, which I didn't realise was possible.

I was told about template:calculator and was intrigued by what Uwappa managed to achieve with the API, such as showing different divs depending on calculation results. I helped make a "filmstrip" of increasing body size to be cropped using template:CSS crop:

Generic profiles for body roundness index values from 1 to 20 assuming that the waist is circular

A clever use of the template is live conversion tables, such as on Inch#Equivalents.

Here's a simpler calculator I made to crop or rescale images to some multiples of powers of two:

Pity I couldn't find a way to do for loops or text processing. Let me know if you know of any way to do so.

visual proof cone volume.svg ☎ 27 Oct 2024

While drawing this proof without words that a cone has ⅓ the volume of a cylinder with the same radius and height, I surreptitiously found a way to shade cones semirealistically despite SVG not having conical gradients. Setting the parameters of the linearGradient to

x1="0%" y1="-10%" x2="100%" y2="20%"

causes Mach bands to simulate a convincing specular highlight.

Though I've previously used Pythagorean triples to draw projections of cones with integer coordinates (drawing lines to the ellipse's apexes results in ugly discontinuities), I've just formalised the process as on the left. The figure can be post-scaled with a transform, or pre-scaled by multiplying the x and y coordinates with appropriate integers.

cmglee Cambridge Trinity College punt names.jpg ☎ 25 Sep 2024

After a punting trip, I asked my guests the classic riddle about Trinity College's punts:

What concept have all the names in common?

(The answer is at Trinity College, Cambridge#Punt_names.)

Back home, I was surprised to learn that it was not mentioned in the article, so I wrote up a section (fortunately, its new punt Charles made the news) and went out for a photoshoot. I must've looked odd purposefully photographing just the names.

Bonus riddle: Can you tell how each name in the picture relates to the concept?

Mona Lisa face hybrid image.jpg ☎ 8 Aug 2024

As I'd been captivated by hybrid images for ages, I was delighted to find an AI tool that generates hybrid images with a seed image for the distant version and a textual prompt for the close-up one:

http://huggingface.co/spaces/AP123/IllusionDiffusion

It works best with recognisable faces in high contrast against a plain background.

I first experimented with famous pictures of Abraham Lincoln and Che Guevara against appropriate scenes before deciding that the Mona Lisa is most internationally relevant and recognisable. It was also fortunate that the prompt "colour photograph of an Italian city in the Renaissance" yielded an aesthetically pleasing fictional landscape. To make the face show up better, I overlaid a faint copy of the seed image and manually touched up artifacts.

My next step might be to find writing by Leonardo da Vinci, remove long runs of whitespace, scale it down and superimpose it on the image to make three hybrid levels. Any suggestions on how to make four levels?

• 
  Monalisano
• 
  Girl with a Dutch cityscape

UPDATE 2024-09-24: Made a hybrid image with Vermeer's Girl with a Pearl Earring.

Template:sticky header ☎ & Template:table alignment ☎ 7 Jul 2024

I recently learnt about two very useful table templates:

Template:sticky header

Makes headers of long tables stay on the screen when scrolled so that one needn't keep scrolling up to see what each column is

Template:table alignment

Lets one specify the left/centre/right-alignment of individual columns to avoid having to manually specify, say, align="right" in each cell.

An important limitation is that tables with multiple header rows must also have sortable activated. It's a shame that one cannot align decimal points.

As an example, try scrolling the page while observing the table from http://nssdc.gsfc.nasa.gov/planetary/factsheet below.

Balmyisle.pdf ☎ 6 Jun 2024

Miserly-me wanted to introduce new games to my board games group but current games break the bank.

A friend told me about print-and-play (PnP) games and I got the idea to print and insert them with old playing cards in 64 mm × 89 mm (poker) card sleeves.

Although Sprawlopolis and Air, Land and Sea were fun, Palm Island was my favourite. As there wasn't much text on the cards, I thought I could make an A4 PDF of an isomorphic version with public-domain backgrounds (to avoid copyright issues) to illustrate Wikipedia. I called it Balmy Isle.

Instead of using layout software such as LibreOffice Draw, I decided to code each page in SVG so that I could programmatically instance repeated parts for consistency.

As I intended to print each page on regular paper and insert a card in between front and back, I made the top two rows fold over. Shame that the 3×3 layout prevented this treatment on bottom rows. An A2 version with 6×6 cards would allow that.

Though librsvg did not recognise some of the emoji used, as long as they appeared in my browser, I could print each page to PDF. As I couldn't find a way to make multiple pages when printed, I built in a switch to select which page to render. Merging and optimising the soft-copies yielded the uploaded file.

solar system delta v map.svg ☎ 8 May 2024

commons:user:Emreszer contacted me about translating my delta-v map to Turkish, and I took the opportunity to add bitmaps to the diagram.

The photographs of the celestial objects I found all had black backgrounds, which I thought looked unsightly against the chart's white background, so I hacked my planet rotation animation to make them not rotate, yet have the spherised effect. I also added other objects, restored the flattening which doesn't render well in SVG animation, loaded it in Firefox, took a screenshot, massaged it into a suitable size, and embedded it into the SVG file, which crops out each object and places it at the appropriate place.

I think this makes it easier to locate the objects and makes an attractive poster, don't you? 😊

cubic graph special points repeated.svg ☎ 17 Apr 2024

In 2011, I found articles on stationary point, inflection point etc lacking diagrams showing how graphs of subsequent derivatives of a cubic function relate to one another. For my illustration, I wanted a function which had its special points have distinct integer coordinates, and the special values are non-zero.

With the help of Álvaro Lozano-Robledo, I found a family of functions, with ${\displaystyle y=x^{3}-3x^{2}-144x+432}$ having the "smallest" graph. Even so, the y values are much larger than the x ones. To get reasonable visualisation, I had to make the vertical scale 50 times the horizontal one.

It was a 12-year bone of contention until I realised this year that I could relax one condition and also show the effect of a repeated root. Using a Python script, I found a "small" function satisfying my objectives: ${\displaystyle f(x)=x^{3}-6x^{2}+9x-4}$ (it's also neat that the various roots are 1, 2, 3 and 4).

To work around the rsvg bug T97233, I decided to use prestyled Unicode characters for variables (in italics) and superscripts. Giving the factorisation of each function also shows how their roots are derived.

Thanks, too, to GalacticShoe for an algorithm to exactly draw a cubic polynomial segment with a cubic Bézier curve:
If ${\displaystyle f(x)=ax^{3}+bx^{2}+cx+d}$ and the endpoints are ${\displaystyle {\big (}p,f(p){\big )}}$, ${\displaystyle {\big (}q,f(q){\big )}}$, the control points are

${\displaystyle {\biggl (}{\frac {2p+q}{3}},\quad ap^{2}q+b{\Big (}{\frac {p^{2}+2pq}{3}}{\Big )}+c{\Big (}{\frac {2p+q}{3}}{\Big )}+d{\biggr )}}$, ${\displaystyle {\biggl (}{\frac {p+2q}{3}},\quad apq^{2}+b{\Big (}{\frac {q^{2}+2pq}{3}}{\Big )}+c{\Big (}{\frac {p+2q}{3}}{\Big )}+d{\biggr )}}$.

Can anyone improve on the function or presentation?

Kam Suan Pheng ☎ 11 Mar 2024

I came across HundenvonPenang's superb drone photography of Penang and requested a shot of the abandoned Penang Mutiara Beach Resort and the recently-opened Gurney Bay. He obliged me and also suggested meeting up as I was visiting Penang.

*angys* then joined the conversation and we decided to meet on Chap Goh Meh. We walked around George Town on a photowalk of the Tua Pek Kong procession and orange-throwing at the Esplanade. Wonderful knowing these two kind and diligent Wikipedians.

They also linked me up with a local group headed by Ultron90, and I helped organise their WikiGap event today. As the theme is on women in Malaysia, I decided to start an article on eminent geographer and environmental activist Dr Kam Suan Pheng. Have a look at her article!

commons:category:SVG_created_with_JavaScript ☎ 2 Feb 2024

I came across an ingenious idea by TilmannR to generate a static SVG from one with JavaScript, letting illustrators create layouts or graphs too complex to create manually. While I had previously generated SVG with Python and Perl, one great advantage of TilmannR's method is that editors need only a text editor and a web browser to regenerate the SVG to upload to Commons, which disallows any running scripts.

I suggested to TilmannR to embed the script as a comment in the SVG itself, so that the source is never detached from the file. We eventually came up with replacing

<script> ... </script>

<!--script> ... </script-->

which yields valid SVG, passes Commons's filter and yet easily allows the script to be restored by removing "!--" and "--". One drawback is that the script cannot contain -- (luckily, this can often be worked around with -= 1 in JavaScript). The script dumps into an SVG group with id GENERATED_CONTENT the generated content, and into one with id GENERATOR_SCRIPT the commented-out script.

My first attempt, File:Gabriel_horn_2d.svg was successful. TilmannR kindly reviewed it and recommended JavaScript best practice.

I then endeavoured to remake File:Template_map_of_U.S._states_and_District_of_Columbia.svg which relies on my Google account to run a Google Sheets spreadsheet. After consulting Timeshifter, I ported its features over to File:Template_map_of_US_states_and_District_of_Columbia.svg above. While it might take a while to document its use, I've hopefully commented the code clearly enough for third parties to generate their own choropleth map of US states and Washington D.C.

demo fireworks css animation.svg ☎ 1 Jan 2024

In the last few hours on 2023, I decided to implement an idea I'd seen on http://jsfiddle.net/elin/7m3bL years ago. I found its author, Eddie Lin had used CSS box-shadows extensively and wondered if I could do similarly with paths in SVG.

There are two sets of fireworks running simultaneously, a new firework spawning as soon as the last finishes. Having two gave the best compromise between performance and making the scene more lively.

Each firework set has two animations:

• instance controls the

1. position and
2. dasharray

of each firework, while

• burst controls the

1. transform (scale and translate),
2. stroke_width and
3. colour

of a particular instance's explosion. Strictly speaking, colour should be in instance but I put it under burst so that I could also animate the colour of the text Happy 2024 added later.

For each explosion, scale simulates the expanding particles while translate simulates gravity, ease-in making it accelerate through its cycle. colour starts with pure white to simulate high temperatures, transforming into the intended colour. stroke_width starts at 9999, combined with the increasing scale and white colour simulating the flash of each explosion, and diminishes to zero to simulate decaying particles.

position jumps to one of ten spots (the middle plus a 3×3 magic square) at the start of each explosion. dasharray determines the spacing of the particles along the given paths, simulating some randomness in the movement of the particles. For the last explosion in a sequence, quickly increasing the spacing simulates a "flying fish" effect.

Each path was initially three intersecting ellipses. In my final upload, I realised that I could pre-scale the paths to vary the particle size. For variety, I also replaced one of the paths with two intersecting stars at different scales.

Pity Commons uploads cannot have sound, so you'll have to enjoy the show in silence!

Until next post... Happy new year!

cmglee spiral staircase fight.jpg ☎ 5 Dec 2023

I thought I'd try my hand at digital painting and got myself an XP-PEN graphics tablet at a Prime Day sale.

While visiting a castle, a friend and I observed that the helical (spiral) staircase leading to the basement turned in an unconventional way. I was reminded by a "factoid" that such staircases typically turn so that the newel makes it hard for invaders, who tend to be right-handed, to swing a weapon. I wondered if this particular staircase was different because the entrance was above the room and thus invaders would be travelling downwards.

I nevertheless decided to draw the typical arrangement after finding Wikipedia lacking such an image. Alas, I later learnt that the "factoid" was a myth. Still, learning to paint in Krita was a good experience.

Ham sandwich theorem 2d.png ☎ 3 Nov 2023

Some friends and I had a scotch egg to share at a picnic many years ago. One of us remembered the ham sandwich problem and mused about how to slice it so that each half had the same amount of egg white, yolk and batter. We mistakenly thought that we could just find the plane that contained the centre of gravity of each component before realising that the centre of gravity would give us the mean instead of the median, as the mean weights each particle by the distance from the centre of gravity.

Back home, I wrote a Python script to see how lines at different angles actually divided an arbitrary two-dimensional shape into two equal areas. Using OpenCV, it read in images as 1-bit bitmaps and counted the number of black pixels.

For each angle, I filled one side of the line completely white and counted the remaining black pixels. Progressively moving the line with binary search until roughly half the black pixels remain gave me the bisector for that angle.

Repeating this every 5 degrees on assorted shapes yielded interesting loci with an odd number of cusps, even for shapes with noncontiguous parts.

Much more recently, I thought the ham sandwich theorem article could do with 2D illustration so adapted the script to work on two colours. I chose a map of the British Isles as it was conveniently divided into two (major) countries, one of them having two significant parts.

The output for Ireland and the UK was put in the red and blue, and the green channels, respectively, so that Ireland would appear green and the UK, pink. The common bisector was highlighted in black.

Cantor set radial.svg ☎ 11 Oct 2023

Though I had known about the Cantor set for many years, I was intrigued by its radial depiction at http://gist.github.com/curran/74cb4d255acf072633a2df0d9b9be7c3 and sought to recreate it.

The first row of the usual linear version becomes a circle, actually a ring with zero inner radius, since it spans the entire 360°. Subsequent rows become broken rings growing outwards. Different shades of grey distinguish the rings. Starting and ending each ring at the bottom of the figure makes it resembles a stylised bird.

The SVG was output by a Python script which generates the Cantor set as a nested list, and draws the rings (except for the innermost one) using stroke-dasharray, their final values incremented to avoid gaps due to rounding.

Do you think the figure makes a good logo for a maths society?

Zeitpyramide.svg ☎ 9 Sep 2023

Chris25689 helpfully reminded me to update my Time Pyramid diagram as a once-in-a-decade event happened today.

Ten years ago, I had already placed the 2023 block in the SVG but commented it out, so it thought it was a simple matter to uncomment it. Unfortunately, the text overran, so I needed to adjust the viewBox. Oh well, it was worth a try…

Ramanujan magic square construction.svg ☎ 28 Aug 2023

Imagine that we have 4 each of 4 different kinds of fruit. Let's arrange them in a 4 by 4 square such that each row and column has exactly one of each. Such a square is called a Latin square. We can add a requirement that the diagonals also have one of each. Mirroring a different pattern in both directions achieves this. This is called a diagonal-complete Latin square.

We could replace each fruit with a number. As each row, column and diagonal has one of each number, the sum of each is obviously the same.

Magic squares normally have different numbers, but there's a clever way to turn our Latin square into one. Let's first substitute the fruit with numbers 0 to 3. We can the copy the square with the numbers multiplied by 4. Mirror the square about a diagonal and add it to the first one. Adding one starts the numbers from one.

We can use this method to make magic squares similar to one by the famous mathematician Srinivasa Ramanujan which had his birthday, 22 December 1887 on the top row.

Breaking up a date as he did into day, month, century and year, we can instead substitute day minus one etc. These are chosen so that when the squares are added, the top row is simply the day, month, century and year.

We now have a method to generate a magic square for any date. Of course, if, for example, the month is January or February, we get negative values. Some numbers may be repeated, too, but otherwise, the square has other magic square properties.

Unfortunately, we cannot make 3 by 3 date magic squares this way as there is only one 3 by 3 Latin square, ignoring rotation and reflection, and one of its diagonals has the same number repeated.

constellations, equirectangular plot.svg ☎ 7 Jul 2023

Ten years ago, I posed a practical puzzle to @Timwi:

He solved it in no time, I made the chart, and we moved on to other things.

Then a few months ago, @Pruthviraya claimed that he or she and his or her daughters managed to make each colour have exactly 22 constellations, 88 coincidentally being a multiple of four. However, I found that his or her suggestion causes two adjacent regions to have the same colour, as the plot wraps around the sides.

I sought out Timwi again with the new constraint, and this time he solved it with a C♯ program (details on commons:File_talk:constellations,_equirectangular_plot.svg). After updating the Perl script, I regenerated the SVG above with this online Perl interpreter which allows file input and output.

It's wonderful reconnecting with old friends and revisiting old fun problems. Thanks, Timwi!

coin rotation paradox.gif ☎ 14 Jun 2023

Moving on from POV-Ray, I've started rendering animations using Blender 3.3.1.

Its physics simulation came in really useful for this rolling-sphericon GIF animation. It would've otherwise been a chore setting up keyframes to model the curious rolling motion. I was disappointed that the animation starts slowly and accelerates with time, though. Perhaps I should've let it run until it reached steady state before "recording" the action.

For the coin rotation paradox animation, I tried to use normal mapping to make the lighting more realistic, but as the texture map had strong lighting already applied, the effect wasn't as expected.

One issue with using Blender is that the source isn't text, and .blend files are disallowed on Commons. I thus couldn't upload the source for future editors to work on. As a workaround, I encoded the .blend file to with Base64 and uploaded it to a talk page. Would you know of a better solution?

Pendulum wave ☎ 3 May 2023

I was captivated by a stunt on Britain's Got Talent (series 14) the performer called a "harmonic pendulum" and found it by its usual name "pendulum wave". Surprised to find the English Wikipedia without an article, I sought to create one.

SVG animation using CSS is an ideal medium to illustrate the movement, so I made a few versions, including one with frequencies in ratios of prime numbers suggested by @Jpgordon: though it demonstrates some unexpected clustering, the pattern isn't as striking as the original.

I used the timeline idea to spatially visualise clustering in the original. It's fascinating how order emerges from chaos at certain times:

Timeline of the pendulum wave in the animation above

I then thought of the trick I used in File:Comparison_satellite_navigation_orbits.svg to add a clock to the animation to show at which part of the cycle clustering occurs.

Codewise, the animation uses the same transform keyframe technique I typically employ in animated SVG, but with ease-in-out and alternate to mimic the swing. Though not exactly simple harmonic motion, easing in and out models the pendulums sufficiently well.

Next step is to build physical apparatus with electromagnetic kickers to let the pendulums swing indefinitely. I don't think I'll make mine out of flaming cannonballs, though 😅

Nested Ellipses.svg ☎ 17 Apr 2023

I came across this 15 MB file on commons:Category:Large_SVG_files and thought it could be much optimised in size, so contacted Sarang, an expert on minimising SVG who taught me about stroke-dasharray hacking.

Mrmw reduced it to a much more reasonable 22 KB. I felt it could be further reduced as they were just a collection of 61 ellipses. On understanding its construction, I did just that and got it down to 7 KB.

Then I decided to use a trick I use to approximate ellipses to any required precision using the arc path command, e.g.

<path d="M 0,3 a 4,3 0 1 0 0.1,0"/>

is almost equivalent to

<ellipse cx="0" cy="0" rx="4" ry="3"/>

0.1 can be arbitrarily reduced to increase accuracy, but must be non-zero.

For this diagram, though, most ellipses are rotated, so I had to use the rotation parameter and calculate one of the extreme points in either x or y direction (for which a tangent to the ellipse is either vertical or horizontal).

As I had written Python code to do all that, I decided to iterate through different x and y offsets for the centroid and adjust the viewBox accordingly to minimise the SVG file size. Though I could have used gradient descent, the search space was small enough to brute-force the solution.

I was pleased to reduce the file size to 1901 bytes, 0.01% of the original, all-in-all a fun challenge in Code Golf ⛳

Map of US minimum wage by state.svg ☎ 16 Mar 2023

This month's mini-project started with Timeshifter's call on the Graphics Lab (subsequently moved) for a simple way to generate a choropleth map of US states and D.C.

Shyamal and I proposed several approaches. I settled on making a human-editable SVG supplemented by a Google Docs spreadsheet.

The method exploits SVG's handling of element opacity to do linear interpolation of the colour of each element:

Suppose one wishes to have a colour 40% of the way between orange (denoting the minimum value) and cyan (denoting the maximum value). One can draw the element in orange with 100% opacity, and then the element again in cyan with 40% opacity. In case data is missing for some states, one can first draw the whole map in grey, and skip the above two elements for states missing data.

To make editing as simple as possible, I added a stylesheet to easily change the colours, text elements for assorted labels to be used in the business logic, and structured the user-editable parts as follows:

  <style type="text/css">
<!-- Minimum, maximum and data-unavailable colours are given below -->
.min { fill:#ff6600; }
.max { fill:#99ffff; }
.n_a { fill:#cccccc; }
  </style>
  <g id="overlay">
<!-- Relative value from 0.00 (min) to 1.00 (max), and text strings are
     given below; replace href value with "#XXX" if data unavailable -->
   <use xlink:href="#AL2" fill-opacity="0.185"/><text id="AL">7.25</text>
   <use xlink:href="#AK2" fill-opacity="0.502"/><text id="AK">10.85</text>
...
   <use xlink:href="#WY2" fill-opacity="0.000"/><text id="WY">5.15</text>
   <text id="legend_min">5.15</text>
   <text id="legend_max">16.50</text>
   <text id="title">State minimum wages, in dollars. Jan 1, 2023</text>

All this was packaged as File:Template map of U.S. states and District of Columbia.svg with urbanisation statistics as an example use-case.

What remained was to generate the appropriate opacities. For that, I decided to use Google Docs as spreadsheets are more familiar to laypersons than Python, and they can be easily shared online. Timesplitter could paste the data into https://docs.google.com/spreadsheets/d/1qBwH0oA5IklYobs-igbVc0k-WsoxWPSbG0cgmGEZeys/edit, and copy and paste the code generated into the SVG file in Notepad++.

After a lot of to-and-fro, the final product is as above. Time to move on to something else...

50x50x1b.png ☎ 28 Feb 2023

Default interpolation

Nearest- neighbour

I got a clone Lego baseplate and many 1×1 plates of the same colour, and thought of making a Lego mosaic. As the size was limited to 50×50 studs (actually 48×48, to leave a 1-pixel border), resolution is extremely limited. Worse, having only one colour meant only one bit of colour.

Starting with a resolution of 16×16 and inspired by DeviantArt user Erminest-DA, I managed to make a decent representation of the anime character on the left. To add a story to the artwork, I added the inspirational quote comprising only 2-letter words, "If it is to be, it is up to me (to do it)!" I decided that italics would make it more dynamic. Coming up with a font at this resolution was a good challenge. Lastly, the addition of a sword and dragon visually illustrated the quote.

UPDATE 8 MARCH 2023: In this thread, TilmannR presented a way to use nearest-neighbour interpolation: wrap an image (with size in pixels instead of thumb) like so:

<div style="image-rendering:pixelated;">[[File:50x50x1b.png|100px]]</div>

Quick facts

Integral image (right half) of a 2-bit greyscale pixel art (left half), normalised and magnified for visibility

Close

UPDATE 6 MAY 2025: To emulate a thumbnail image with caption, try this:

{| class="wikitable infobox" style="width:1px;"
|<div style="image-rendering:pixelated;">[[File:integral_image_example.png|192px]]</div>
|-
|Integral image (right half) of a 2-bit greyscale [[pixel art]] (left half), normalised and magnified for visibility
|}

Vanishing puzzle ☎ 25 Jan 2023

I've been curious about vanishing puzzles for a while. As Wikipedia hadn't an article on it, I decided to make it a Christmas week mini-project after gathering sufficient material.

The nature of such puzzles let me use the mouse-over trick I discovered to make interactive SVG, as in The Disappearing Bicyclist example.

Though I know how it works, I've yet to find a reputable source that explains it. If anyone has a reference, please let me know.

P.S. Somewhat related, I also found a way to more simply explain the missing square puzzle:

Just use smaller Fibonacci ratios 1:2 and 2:3!

Nucleosynthesis periodic table.pdf ☎ 31 Dec 2022

I was pleasantly surprised to receive a message requesting a printable version of my infamous Nucleosynthesis periodic table.svg. The reader who called themselves Henk apparently taught physics and wanted a poster to hang in their classroom.

Honoured, I decided to both update the description on commons:file:Nucleosynthesis_periodic_table.svg, and format it nicely below the periodic table – also to make the aspect ratio a more common ${\displaystyle {\sqrt {2}}:1}$ to fit on ISO 216 international paper sizes.

To make it, I amended the SVG code, opened it in Firefox, used Print > Microsoft Print to PDF and shrunk it with http://ilovepdf.com/compress_pdf using "extreme compression".

(That makes it only the second PDF I've uploaded to Commons, after commons:file:Wikimania_2016_Dynamic_SVG_for_Wikimedia_projects.pdf – actually a backup of my Wikimania 2016 presentation, in case my laptop crashed!)

Bayes theorem assassin.svg ☎ 28 Nov 2022

A curious thing happened last month. Among Us aficionados suddenly got wind of the Among Us-parody-themed diagram I made to illustrate Bayes' theorem, leading to an edit war and a long discussion.

I actually think the example of the probability that a player's character is an assassin given their suspiciousness is a superb and accessible use of the theorem, compared to medical testing.

The other issue raised was that the icons violated copyright. I'm no copyright expert but side-by-side examination with a Crewmate in the game shows intentional distinct differences. I also avoided any game-specific terminology.

Happily, the furore subsided after the community voted to keep the image.

Taipan map.svg ☎ 30 Sep 2022

Many many years ago, I enjoyed a trading simulation game called Taipan!. On a very long coach ride from Oxford, I started drawing a retro-looking map of its trading ports for its article.

I wanted, in particular, tint bands comprising parallel lines and surmised that repeatedly drawing the coastlines with decreasing stroke-width in alternating colours would achieve this effect.

SVG filter effects were then used to fill the seas with short horizontal strokes. While toying with lighting effects, I serendipitously found a way to fake contour lines and shaded relief on the land.

It was a struggle working around differences between my browser's and rsvg rendering, but the overall result doesn't look too bad, does it?!

solar system model.svg ☎ 28 Aug 2022

1:10¹⁰ solar system model

Delighted that Cambridge has (albeit temporarily) its own 1:591 000 000 Solar System model, I updated with dynamic embedded SVG my

Solar System scale model calculator

I also uploaded arguably the most manageable scale, 1:10 000 000 000 as a standalone SVG to Commons.

Hope more scale Solar Systems pop up around the world!

Pandemic game graph.svg ☎ 4 Jul 2022

After successfully drawing the Risk game board as a graph with rectilinear and 45° edges, I decided to mark the fading of the COVID-19 pandemic with a redrawing of the Pandemic game board.

This time, I found draw.io, a free vector-drawing webapp that lets one move graph vertices around while edges move to suit. Not only did it make finding a suitable arrangement much more efficient, the diagram could be readily exported – though I redrew it in my preferred style.

hollow face illusion.gif ☎ 28 Mar 2022

Since I first saw it, the Hollow-Face illusion has fascinated me. I first made an STL file exhibiting the illusion, a good exercise to learn Blender. I managed to find a CC-BY model on Sketchfab and it was fairly easy preparing the normals and relocating the origin in Blender.

Then, I thought I could improve on the GIF animation in its article, so I continued with making my first Blender animation. Instead of a video file, I decided to make another GIF, as I had the looping issue with the video player in the section below.

Quite pleased with the result, I also made one that swings left and right to spend more time on the hollow face. Which do you prefer?

tennis racket theorem.ogv ☎ 1 Jan 2022

Presenting my first video contribution to Wiki[mp]edia!

I was surprised to find no existing video of the tennis racket theorem on Wikimedia so decided to film three demonstrations in my backyard and make a composite video. Before filming, I taped up half the racquet to distinguish its sides.

After extracting relevant frames using FFmpeg, I cropped and composited them using Python with OpenCV. As the ê₁ rotation was much quicker, I repeated each frame except the first and the last. I reversed the order of the frames at the end of the sequence so that it could seamlessly loop. Finally, I exported them as Ogg Theora video using FFmpeg.

The video looks good, albeit a bit blurry as the camera's autofocus failed to focus on the racquet. It's also a bit too short – pity I couldn't find a way to make the video player loop the clip. Anyone have any ideas?

UPDATE 2022-05-04: Made a GIF animation, File:tennis_racket_theorem.gif that runs forever.

commons:category:recreational_mathematics_timelines ☎ 27 Dec 2021

As for ant on a rubber rope, it occurred to me that solutions to river-crossing puzzles can be represented with timelines. They are most useful when units of time are involved, such as the bridge and torch problem and rope-burning puzzle, but is still beneficial when showing sequences such as in the missionaries and cannibals problem and wolf, goat and cabbage problem.

• 
  Wolf, goat and cabbage problem
• 
  Bridge and torch problem
• 
  Rope-burning puzzle
• 
  Ant on a rubber rope

commons:category:Wikimania_2021_Cambridge_Wikimedia_meetup_44 ☎ 12 Sep 2021

The Cambridge Wikimedian group organised an in-person meetup in conjunction with Wikimania 2021. I thought it appropriate to hold a photography walking tour of listed monuments nearby afterwards.

WikiShootMe identified several listed graves in the Mill Road Cemetery. Though they were overgrown, I managed to capture most of them for Wikidata. It was also great meeting old wikimates after a long pandemic lockdown.

commons:category:Fuller_projection_lists ☎ 31 Jul 2021

Lists of the largest countries, islands and lakes are sometimes illustrated with silhouettes of each object to scale. While useful, context is lost as their spatial relationships are missing.

I realised that the Fuller projection or Dymaxion maps preserve their relative positions while roughly retaining shape (conformal) and scale (equal-area), allowing the shapes, sizes and positions of these objects to be easily compared.

After finding blank Dymaxion maps, I created these three visualisations. Sadly, I had to stop the island and country diagrams at 30 to avoid too much clutter, and the lake one at 15 as the original SVG didn't have Lake Bangweulu.

SVG-wise, nothing much is new. I had to split some shapes to get the relevant part. The rest is just highlighting the appropriate shapes with CSS.

• 
  Countries
• 
  Islands
• 
  Lakes

UPDATE 2024-10-20: Very proud to learn that astronaut Chris Hadfield, my space hero, posted about my image 🥹

Oxford University colleges timeline.svg ☎ 14 Jun 2021

After making File:Cambridge_University_colleges_timeline.svg, I tried making one for Oxford but found insufficient information to get far. I was pleasantly surprised that TSventon contacted me, and through this discussion, he or she and Jonathan A Jones managed to unearth enough data to bring it to a satisfactory standard.

pastel checker.svg ☎ 31 May 2021

I chanced upon Sarang's superb ability to reduce the file size of an SVG file to just a few hundred bytes and tried to apply his or her techniques to some SVG files. The most impressive hack is using stroke-dasharray to draw repeated lines or shapes, such as this figure, of which source is below:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.05 8.05" fill="none" stroke="#000">
<circle r="99" fill="#582"/>
<path d="M0,.5h7.5v1h-7v1h7v1h-7v1h7v1h-7v1h7v1h-7" stroke="#feb" stroke-dasharray="1"/>
<path d="M4,0v9M0,4h9" stroke-width="9" stroke-dasharray=".05,.95"/>
<g stroke-width=".5" stroke-dasharray="0,2" stroke-linecap="round">
<path d="M1.5,.5h6v1h-7v1h8v3h-8m1,1h6v1h-7" stroke-width=".6"/>
<path d="M1.5,.48h6v1h-7v1h7" stroke="#c00"/>
<path d="M.5,5.48h7v1h-7v1h7" stroke="#fff"/>
</g>
</svg>

Another brilliant use of SVG dashes, in addition to tartan, and chains and gears!

generation timeline.svg ☎ 26 Apr 2021

Some1 asked me on Template_talk:Generations_sidebar whether I could simplify my image to appear on Template:Generations_sidebar at small sizes. The SVG already had Catalan internationalisation. Instead of creating another image, I thought of adding another "language" to hide details and make the text larger. lang=simple seemed the perfect "language" for this purpose. To hide objects, I found using a blank g tag simplest:

    <switch>
     <g systemLanguage="simple"/>
     <use xlink:href="#common_legend"/>
    </switch>

Font-size change could be done using a CSS class:

   <switch>
    <text id="gy-ca" transform="translate(19720,-660)" dy="0.7ex" systemLanguage="ca"><tspan class="big" id="trsvg27-ca">Millennials⧸Generació Y</tspan><tspan x="0" dy="40" id="trsvg28-ca">∗1981–96</tspan></text>
    <text id="gy-simple" transform="translate(19700,-660)" dy="0.7ex" class="simple" systemLanguage="simple"><tspan class="big" id="trsvg27">Millennials</tspan><tspan x="0" dy="45" id="trsvg28">∗1981–96</tspan></text>
    <text id="gy" transform="translate(19720,-660)" dy="0.7ex"><tspan class="big" id="trsvg27">Millennials⧸Generation Y</tspan><tspan x="0" dy="40" id="trsvg28">∗1981–96</tspan></text>
   </switch>

Egg of Columbus puzzle models.svg ☎ 8 Mar 2021

• 
  Construction of the Egg of Columbus (tangram puzzle)
• 
  Some models constructed from the 9-piece and 10-piece versions

A recent interaction with David Eppstein got me interested in colour blindness. Color blindness#Classification taught me that supporting deuteranomaly, protanomaly, protanopia and deuteranopia makes my diagrams accessible to 99.97% of the sighted. Using simulations from http://color-blindness.com/coblis-color-blindness-simulator, I wrote a Python script to come up with a websafe palette of four hues (plus grey) that maximises differences for these groups and people with normal vision, and found the best compromise

UPDATE 19 SEP 2021: The WCAG guidelines give 4.5 as the minimum contrast ratio for AA rating for normal text (or AAA for large text). Curiously, a colour of ratio around 4.6 against white is also around 4.6 against black. I've thus found 5 such colours mostly distinguishable by the colourblind and representable with 3 hex digits:

counterintuitive orbital mechanics.svg ☎ 3 Feb 2021

While debugging a librsvg bug, I learnt about the use of currentColor (case-insensitive) to inherit colours in CSS.

Suppose we have some objects of different colours, but each one's fill colour is the same as its stroke colour, as for the spots and orbits in this diagram.

<style type="text/css">
.toward  { fill:#0000ff; stroke:#0000ff; }
.forward { fill:#999999; stroke:#999999; }
.orbit   { fill:none; }
.object  { stroke:none; }
</style>
<g class="toward">
 <use class="orbit"  xlink:href="#orbit"/>
 <use class="object" xlink:href="#object"/>
</g>

works but repeats the colour codes, possibly leading one instance being updated but not the other. currentColor avoids it:

.toward  { color:#0000ff; }
.forward { color:#999999; }
.orbit   { fill:none; stroke:currentColor; }
.object  { fill:currentColor; stroke:none; }

At the top of the diagram, a satellite in a clockwise circular orbit (yellow spot) launches objects of negligible mass:

1. (blue) towards Earth
2. (red) away from Earth
3. (grey) in the direction of travel
4. (black) backwards of the direction of travel

Dashed ellipses are orbits relative to Earth. Solid curves are pertubations relative to the satellite: in one orbit, (1) and (2) return to the satellite having made a clockwise loop on either side of the satellite. Unintuitively, (3) spirals farther and farther behind whereas (4) spirals ahead.

Template:solar system bodies rotation animation.svg ☎ 31 Dec 2020

SVG provides a useful displacement map filter allowing an image to be "refracted" by another. The animated underwater scene on the left employs the idea from and but cycles the hue of the map to avoid back-and-forth artifacts.

Instead of animating a filter, I experimented with animating the object on which is applied a filter which "spherises" a square into a circle, simulating orthographic projection. I picked nine astronomical objects with textures from commons:category:Solar_System_Scope. Each texture was repeated and horizontally scrolled at the correct speed. After applying the filter, calculated using formulae from orthographic_map_projection#Mathematics, the result was cut out and shaded with a mask, and rotated to the correct axial tilt. Pity that I couldn't mimic flattening, as Firefox gave artifacts when trying to scale filtered images.

Lastly, with help from Wikipedia:SVG_help#Thumbnail_completely_black, I added an undistorted texture which is immediately hidden when the animation starts, as the thumbnail renderer doesn't recognise feDisplacementMap.

The animation shows that the gas giants rotate faster than the terrestrial planets, so much so that they are substantially flattened. Venus at the other extreme rotates so slowly that I had to settle on a compromise of 10 000× speed (and put in a marker) to visibly show movement while not making Jupiter and the Earth spin too quickly. I also find it interesting that Mercury has almost no tilt or flattening, yet its orbit is 7° inclined to the ecliptic plane.

UPDATE 20 JUN 2021: While adding the Turkish translation as Harald the Bard requested, I updated the dict2class class in my generator Python script to recursively work with nested dicts:

class dict2class(dict):
 def __getattr__(self, k): return dict2class(self[k]) if isinstance(self[k], dict) else self[k]

Everest-3D-Map-Type-EN.jpg ☎ 30 Nov 2020

Serendipity led me to this attractive 3D map and I was pleased to see that its author, Tom Patterson had generously shared it and other superb maps in the public domain.

I thus uploaded its three versions to Commons and nominated the English version as a Featured Picture. I'm glad that several other editors and admins concurred, and it's now the newest featured map.

I've emailed to congratulate Mr Patterson and asked if he might be interested to do one of Challenger Deep or the Tharsis region. Keeping fingers crossed!

commons:category:SVG orb ☎ 18 Oct 2020

In the early days of the Web, web developers loved using images of glassy orbs as bullets in unordered lists. One style I liked was Apple's shiny translucent orb effect, which could be recreated using two gradients and a filter (without which the "reflection" is sharper):

  <filter id="filter_blur"><feGaussianBlur stdDeviation="4"/></filter>
  <radialGradient id="grad_sphere" cx="50%" cy="50%" r="50%" fx="50%" fy="90%">
   <stop offset="0%"  stop-color="#000000" stop-opacity="0"/>
   <stop offset="99%" stop-color="#000000" stop-opacity="0.3"/>
  </radialGradient>
  <linearGradient id="grad_highlight" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="10%" stop-color="#ffffff" stop-opacity="0.9"/>
   <stop offset="99%" stop-color="#ffffff" stop-opacity="0"/>
  </linearGradient>
  <g id="orb" stroke="none">
   <circle  cx="0" cy="0" r="100"/>
   <circle  cx="0" cy="0" r="100" fill="url(#grad_sphere)"/>
   <ellipse cx="0" cy="-45" rx="70" ry="50" fill="url(#grad_highlight)" filter="url(#filter_blur)"/>
  </g>

As I have since made several diagrams with this effect, I decided to put them in commons:category:SVG orb, analogous to commons:category:4-3-2_trimetric_projection.

Template:Anomalous cancellation in calculus ☎ 28 Sep 2020

${\displaystyle {\begin{array}{l}\;\;\;{\dfrac {d}{dx}}{\dfrac {1}{x}}\\={\dfrac {d}{d}}{\dfrac {1}{x^{2}}}\\={\dfrac {d\!\!\!\backslash }{d\!\!\!\backslash }}{\dfrac {1}{x^{2}}}\\=-{\dfrac {1}{x^{2}}}\end{array}}}$

Anomalous cancellation in calculus

This month's post is about mathematical jokes and coincidences.

40,000 km (25,000 mi) curiously turns up repeatedly in statistics about Earth:

The radius of geostationary orbit, 42,164 kilometres (26,199 mi) is within 0.02% of the variation of the distance of the moon in a month (the difference between its apogee and perigee), 42,171 kilometres (26,204 mi), and 5% error of the length of the equator, 40,075 kilometres (24,901 mi). Similarly, Earth's escape velocity is 40,270 km/h (25,020 mph).

On the other hand, I find some fallacious reasoning amusing, such as the above anomalous cancellation that trumps
${\displaystyle {\begin{array}{ll}{\frac {19}{95}}\!\!=\!\!{\frac {1\not 9}{\not 95}}\!\!=\!\!{\frac {1}{5}}&{\frac {16}{64}}\!\!=\!\!{\frac {1\not 6}{\not 64}}\!\!=\!\!{\frac {1}{4}}\\{\frac {26}{65}}\!\!=\!\!{\frac {2\not 6}{\not 65}}\!\!=\!\!{\frac {2}{5}}&{\frac {49}{98}}\!\!=\!\!{\frac {4\not 9}{\not 98}}\!\!=\!\!{\frac {4}{8}}\!\!=\!\!{\frac {1}{2}}\end{array}}}$.

Also funny is this true observation:

I was tempted to make the density η – arranging e t a, the mass becomes eat pizza. Additionally, its weight is pizzagate – this reference might become dated very soon, though!

Ohm law mnemonic principle.svg ☎ 23 Aug 2020

I was reminded of "formula triangles" I devised to remember simple formulas at school, and found Wikipedia hadn't a diagram showing their use, so drew this. Though it's most well-known for Ohm's law, it can be applied to any formula in the form a = b · c · d · … (each parameter can be a function, but one must take the inverse of the remainder). I thus drew a chart for high-school physics students below. The exact selection depends on the syllabus, but I think I've covered the common ones.

• 
  Image mnemonics in the style of the Ohm's law formula triangle for high-school physics
• 
  Comparison of the spectra obtained from diffraction and refraction

On the subject of mnemonics, I recently discovered one to remember the order of the colours (I know Roy G Biv, but in which direction?) in refraction and diffraction spectra: Red Refraction Reduced. I struggled to find an equivalent for diffraction until I noticed the follow-up: Diffraction is Different!

It seems the reverse in rainbows: one might expect red to be inside, but there is one reflection in the raindrops for primary, and two for secondary rainbows. An apt mnemonic is Red Rainbow Rim!

historical trigonometric functions graph.svg ☎ 4 Jul 2020

I've just found a way to further enhance SVGs as teaching aids by highlighting two different parts of a diagrams to compare them using only CSS (SMIL allows highlighting any number of parts, but the code is more unwieldy and there were plans to deprecate SMIL). In this example graphic, suppose a tutor wishes to point out that the vercosine function is just the cosine function plus one. On mouse-enabled device, he or she can click on cos graph to highlight it (other graphs are faded out) then mouse-over the vercosin graph to unfade it and put a yellow glow around it.

My method hacks hyperlinks by linking to the same file using a blank anchor (#). When a link is clicked, its state becomes focus (as opposed to hover when hovered on). Below is the stylesheet – outline:none; hides the outlining of a focused link. As before, the glow is achieved with a filter:

<style type="text/css">
.main:hover   { fill-opacity:0.2; stroke-opacity:0.2; }
.active:hover { fill-opacity:1;   stroke-opacity:1; filter:url(#filter_glow); }
.active:focus { fill-opacity:1;   stroke-opacity:1; outline:none; }
.nofade       { fill-opacity:1;   stroke-opacity:1; }
</style>
<filter id="filter_glow">
 <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
 <feColorMatrix in="blur" type="matrix" values="0,0,0,0,1 0,0,0,0,1 0,0,0,0,0 0,0,0,2,0"/>
 <feBlend in="SourceGraphic"/>
</filter>

Finally, each interactive part is defined as follows:

<a class="active" xlink:href="#">...</a>

Another use might be multi-stage revelation of information. For instance, a puzzle may show a clue on hover, and an answer on click. I wonder what other uses there are for this mechanism...

Fourier series square wave circles animation.svg ☎ 28 Jun 2020

I had previously created a series of GIF animations visualising Fourier series and wanted to convert them to SVG animations, but didn't know how to make smooth nested animated objects then; my File:Rolling_circle_optical_illusion.svg was pretty jerky.

When I encountered the coin rotation paradox, I gave it another go. It contains two animations: a circle rolling along a line, and another around another circle. I found that nesting transforms without any other transforms in between worked well:

<g class="move2">
 <use class="rot1" xlink:href="#r"/>
</g>
...
<g class="rot2">
 <g transform="translate(0,-944)">
  <use class="rot1" xlink:href="#r"/>
 </g>
</g>

where move2, rot1 and rot2 are CSS animations, and r is the circle to animate.

On its success, I decided to tackle the Fourier transform problem. The hardest part was synchronising the animations. Unlike animating in, say, JavaScript, in which the rotations and translations of each frame can be specified, CSS animation requires specifying the period of each animation. Rounding errors accumulate, e.g. if circle A has a period of 1 s, and B of 0.33 s, while initially A appears to rotate 3 times faster than B, after 300 rotations, B will lag by one rotation. A solution I found was to make all the periods be fractions of their least common multiple. The θ multipliers are 1, 3, 5 and 7. Additionally for the combined figure, I needed another period to subtract the rotation of the green circle from the yellow circle etc, thus an effective multiplier of 2. Being coprime, their LCM is 2×1×3×5×7 = 210. I thus picked 21 s for the yellow circle, giving 7 s, 4.2 s and 3 s for the other circles, and 10.5 s for the difference. (I know that fifths e.g. 4.2 cannot be defined exactly in binary (as 1/3 cannot be in decimal), but think that the error is negligible.) After a lot of trial and error, it worked!

UPDATE 1 JUL 2020: Made this animation of planetary gears...

UPDATE 26 JUL 2020: ...and this animation of trigonometric functions on a unit circle.

Template:cubic_interpolation_visualisation.svg ☎ 7 Jun 2020

Back in 2012, I drew the diagram on the left to illustrate linear interpolation. I think it makes the formula much clearer. For eight years, I've sought an equivalent for cubic interpolation. After enquiring on the maths reference desk and reading up Lagrange polynomial and Cubic Hermite spline, I think I've finally found one.

I learnt that cubic interpolation is not unique as there is one unconstrained degree of freedom: Polynomial interpolation discusses various approaches. One I found suitable to visualise is the Catmull-Rom, which passes all four control points, and can thus be expressed using Lagrange basis polynomials. That's an algorithm I'll be using in my daily work!

comparison 7 bridges of Konigsberg 5 room puzzle graphs.svg ☎ 17 May 2020

A 3D-printing discussion revived my longtime interest in Euler walks – how to draw a path in one continuous stroke without double-backing. Many know that the key is having two or fewer vertices with odd edges.

Back in 2015, I found that the Eulerian path, Seven Bridges of Königsberg and Five room puzzle articles lacked diagrams that actually showed the edge count, so drew this diagram. After drawing File:Eulerian_path_puzzles.svg, I revisited it and thought the edges of the "9" vertex messy. At the time, I couldn't tell what was objectionable. I've just realised that it was likely the gaps between the paths not monotonically increasing or decreasing. I redrew them as on the right, making them start almost parallel then diverging.

A side benefit is that it looks like a small mammal like a cat or fox, with ears and whiskers 🐱

Corsica-geographic map-style no hash-en.svg ☎ 26 Apr 2020

I joined a discussion on Commons_talk:SVG_Translate_tool about the SVG Translate tool. I helped User:Ikonact debug why the tool did not show any strings to translate on File:Corsica-geographic_map-en.svg and found that having a stylesheet with an ID selector style (those starting with #) causes the tool to fail. I reported it as a serious bug, as many SVGs use them. To work around the issue, I've decided to change id="main" to class="main" in my new ones.

Another problem with the tool is that it doesn't refresh the file cache, so if a new version of a file is uploaded, it does not see it until several hours later, making it very difficult to get anything done! I resorted to sequentially numbering the uploads, putting them under a category requesting that they be deleted appealing for an admin to delete them.

A really useful takeaway from the activity was learning about the Commons SVG Checker. It's so useful to be able to see the rendered thumbnail and discover SVG errors before uploading it. A hack is to use it to render a PNG file from an SVG without uploading it – I know I can download tools to do that, but this works from any computer without installing anything!

extract_lang.py ☎ 22 Mar 2020

I had a brief collaboration with @Juandamec: and @Kirill Borisenko: about my Seven Wonders of the Ancient World timeline infographic after they kindly translated it into Spanish and Russian, respectively.

Deciding to turn it into a multilingual SVG, I found no simple way to view the non-default languages in a browser before uploading them. One way is to install and change the language of the browser and restart it, but that's a pain and it affects the whole browser interface.

I thus wrote a Python3 script to extract and write a monolingual SVG file from a multilingual SVG file. As I couldn't upload a Python file, I copied its source code to user:cmglee/extract_lang.py for anyone to copy-paste.

• 
  Find the 50% clay line
• 
  Find the 20% silt line
• 
  The intersect coincides with the 30% sand line
• 
  Other points plotted
• 
  USDA soil textural triangle

My first use of it was to hack the multilingual feature to create an SVG showing steps in making a ternary plot, as above. The nice thing about this technique is that editors can update common elements, e.g. the grid and axes in one file instead of several. Sadly, the choice of language codes is limited, so I picked aa, ba, ca and da to make a reasonable sequence.

Mapquiz USA states SMIL.svg ☎ 9 Feb 2020

I've just discovered (I think) a new application for interactive SVG without JavaScript: a quiz to let students learn the locations of geographic features, components of a system etc (basically any 1-to-1 mapping). My first example concerns the states of the USA.

I wonder if anyone here knows of an elegant way to implement counters without JavaScript. In my example, a student could start with, say, three lives. Every wrong answer (triggered by the "reset" element) deducts one life. When all lives are lost, the game is over. A workaround is to have as many reset elements as lives and delete the elements as lives are used up. That would however lead to much redundant code :-(

A less strict version just counts the number of wrong answers and shows it at the end when all states have been identified.

Alternatively, I could implement a timer that counts the number of seconds (as in my morphing demo) but pause it when all states have been identified, to show how long the student took. A workaround is to add onmousemove="document.getElementsByTagName('svg')[0].pauseAnimations();" on the win screen, but:

1. Wikimedia now rejects files with on* attributes
2. The mouse must be moved to stop the timer

(I can make a version where a timer counts down to zero, the game ending if the student fails to identify all states in time, as in my missile game, though a time limit may frustrate students.)

Would you be able to help?

http://commons.wikimedia.org/w/index.php?search=cmglee+aerial 31 Dec 2019

A joy on flights is seeing and photographing aerial views. One tip I found is to shoot as perpendicular to the window as possible, and avoid the turbulent exhaust. To remove the haze, use GIMP's quick mask to create a gradient selection from near to far and use the Curves tool to fix the colour channels, especially blue, and adjust the brightness and contrast. Reducing the colour saturation lessens the yellowness of clouds. When the air's clear, though, the results are spectacular.

• 
  Cambridge
• 
  Anglesey Abbey
• 
  Twickenham Stadium
• 
  Windsor Castle
• 
  Bandar Sunway
• 
  Bukit Jambul Complex

SVG highlight on hover template.svg ☎ 17 Nov 2019

User:Дрейгорич informed me that the trans-Neptunian object Ultima Thule had been renamed Arrokoth. While checking user:Mrmw's update to file:interstellar_probes_trajectory.svg, I thought that hovering over an interstellar probe ought to highlight all the astronomical objects it interacted with, and vice versa. Classifying the hovered object as active and its associated objects as associated, I realised that each active group could contain copies of the associated objects with pointer-events:none set, e.g.

<style type="text/css">
 #main:hover            { stroke-opacity:0.05; fill-opacity:0.05; }
 .nofade, .active:hover { stroke-opacity:1;    fill-opacity:1;    }
 .nofade, .associated   { pointer-events:none; }
 ...
</style>
...
<g class="active">
 <g class="associated">
  <use xlink:href="#p1"/><!-- Pioneer 11 -->
  <use xlink:href="#v1"/><!-- Voyager 1 -->
  <use xlink:href="#v2"/><!-- Voyager 2 -->
 </g>
 <use xlink:href="#s"/><!-- Saturn -->
</g>
...

I made this toy example so that editors can reuse this technique, and updated file:interstellar_probes_trajectory.svg accordingly.

Collins Scrabble Words 2 letters history.svg ☎ 29 Oct 2019

This year, the English Scrabble authorities added three two-letter words to the list of valid words: EW, OK and ZE – which I read as "ZE EWOK!" To mark the occasion, I made this table showing all valid two-letter words starting and ending in each letter, noting years of changes (it's a wonder PH got in).

Sadly, there's still none with V ☹ – if any of you ever become famous and invent some technology or concept involving vision, please please please call it a VI ☺

Primrose field peripheral drift illusion.svg ☎ 23 Sep 2019

Commons:User:Cwtyler messaged me about a peripheral drift optical illusion I made five years ago; he or she discovered that the colours fade out after staring at it.

Curiously, the Wikimedia thumbnail doesn't show what I had originally intended: it should've looked like the fixed version below. When I had trouble with an SVG linear gradient being transformed incorrectly for my landing systems diagram below, User:Glrx taught me to add gradientUnits="userSpaceOnUse" to make librsvg match modern web browsers. The drawback is that x and y values can't be specified in percentages.

• 
  Illusion similar to Kitaoka Akiyoshi's Primrose Field
• 
  Sunburst illusion with broken thumbnail
• 
  Sunburst illusion with fixed thumbnail
• 
  Comparison of visual landing systems

After fixing the thumbnail, I decided to render a very strong peripheral drift illusion. I found that colour is irrelevant: only luma is. Amazingly, I found that if I rotate it (e.g. on my phone) 45° in either direction, the drift stops! Can anyone explain why?

Catan Universe fixed setup.svg ☎ 14 Sep 2019

Continuing my experimentation with SVG filters, I enjoyed making textures for Catan terrain types with feTurbulence:

1. Mountains using dense cells to simulate a stone texture
2. Forests using a low frequency and large amplitude
3. Hills with a higher frequency in the vertical direction
4. Fields and pastures with higher horizontal frequency
5. Desert and water using added lighting effects

Sadly, the texture intensity on Firefox and Chrome doesn't match that of the Wikimedia (librsvg) thumbnail, textures with lighting effects to faint, and vice versa. Nevertheless, the graphic depicts the starting map of Catan Universe, the main point being the relative probability of each settlement location in yielding produce. It appears a little unbalanced, the northeast corner having several 12s and the only generic port bordered by two terrain hexes.

UPDATE 17 NOV 2019: A more real-world use of SVG textures is in file:Brooklyn_bridge_section.svg.

Template:roll_pitch_yaw_mnemonic.svg ☎ 18 Aug 2019

Greetings from Stockholm Wikimania 2019!

I had previously struggled to remember which rotations roll, pitch and yaw referred to, and came across a mnemonic of a baseball pitcher doing an overhand pitch. As sidearm pitches are more yaw instead, I thought of a water pitcher: only one sensible rotation avoids spilling water everywhere! Next, roll is unambiguous when applied to a dog or cat.

Finally, there's yaw. Sadly, a yawn, or nodding one's head to signal "yes" is more pitch-like. I then looked for words rhyming with "yaw". "Draw" describes the motion of an artist's forearm. But clearest is "door" (which rhymes in British English, without rolling the "r": /dɔː/) – not the garage variety, of course. Hence the drawing...

Nothing's special on the SVG side, except maybe using scale and rotate transforms, and stacking shapes to make the pseudo-3D arrow.

The Boat Race cumulative results.svg ☎ 29 Jun 2019

While updating this graphic, I thought of shading the gaps between the graphs of competing teams to show who's leading at any moment but couldn't think of an elegant way in SVG. This year, it occurred to me to use two clip-paths: Applyi​​ng a clip-path which selects the region above graph A to the region below the graph B leaves only regions above A but below B, and vice versa. The figure on the right explains the steps visually. To avoid overlapping regions, I decided to do it for only the Blue Boats.

To complement the dates shown on hovering over a graph or the legend, I made hovering over a blank region show the results for nearest year. Wonder how I can draw attention to the dead heat in 1877...

User:Cmglee/T symptoms man ☎ 5 Jun 2019

Shortness
of breath

Nausea

Tingling

Muscle weakness

Symptoms of Bieberitis

Ian Furst contacted me for help on a video he's working on. He wanted a template showing an outline of a human body with various symptoms overlaid on the relevant parts. Editors can easily specify the combination of symptoms shown using Wikitext.

After some deliberation, I decided to create a template wrapping around template:Location mark+. I also learned about the use of

{{#invoke:String|find|haystack|needle}}

to check whether a string contains another. Any combination of the supported symptoms can be specified like this:

{{User:Cmglee/T symptoms man|Bieberitis|nausea,shortness_of_breath,tingling,muscle_weakness}}

It would have been much better if SVG supported the ability to enable and disable its parts without JavaScript. Previously, I discovered the ability to hack the systemLanguage functionality, but with only 443 supported languages, complete freedom to support all 2ⁿ combinations allows only n=8 symptoms, despite extremely unintuitive mapping between language codes and combinations. There must be a better way...

commons:category:Cambridge Central Mosque ☎ 23 May 2019

I had a most unexpected visit to the new mosque in Cambridge. I'd been fascinated by its modern wood architecture since it opened, and was having an evening stroll when I decided to venture through the gates. A gentleman invited my companion and me inside to join the breaking of fast.

It was a very pleasant experience meeting the friendly people there and getting a brief tour of the place. Wish people could be civil to one another as they were to me on my visit...

Needless to say, the architecture was truly amazing, in particular the abstract trees and pixelated Arabic in the brickwork. Must go back at day time!

Cambridge libraries opening times.svg ☎ 28 Feb 2019

Cambridge public libraries have very complicated opening times, so I made this chart to show both when each library opens (left column), and for a given day and time, which libraries are open (right column). The latter is useful particularly when I suddenly remember that I have an overdue book and need to rush to an open library to return it a.s.a.p. ∗ahem∗

In making it, I updated my Python 2 function to read and cache web pages, images etc:

# do_refresh_cache = True
import os, urllib2, time
def read_url(url, headers={}, path_cache=None, is_verbose=True):
 if (path_cache is None):
  file_cache = os.path.basename(url)
  path_cache = os.path.join('%s.cache' % (os.path.splitext(__file__)[0]),
                            file_cache if (len(file_cache) > 0) else
                            '%s.htm' % (os.path.basename(url.rstrip('/'))))
 if (('do_refresh_cache' in globals() and do_refresh_cache) or
     (not os.path.isfile(path_cache))):
  request = urllib2.Request(url, headers=headers)
  try:                           html = urllib2.urlopen(request).read()
  except urllib2.HTTPError as e: html = ''; print(e)
  try:            os.makedirs(os.path.dirname(path_cache))
  except OSError: pass
  with open(path_cache, 'wb') as f_html: f_html.write(html)
  if (is_verbose): print('%s > %s' % (url, path_cache))
  time.sleep(1) ## avoid rate-limit-exceeded error
 else:
  with open(path_cache) as f_html: html = f_html.read()
  if (is_verbose): print('< %s' % (path_cache))
 try:                       html = html.decode('utf-8')
 except UnicodeDecodeError: pass
 return html

The resource is cached to a given path [if unspecified, the basename of the URL (if blank, the name of the last folder in the URL followed by .htm) in a folder called the name of the Python script with the extension replaced with cache] so that subsequent runs need not fetch it again. If the global variable do_refresh_cache is True, it is always fetched. A one-second delay is added to avoid overwhelming the webserver. The resource is then returned as a Unicode string.

The following example fetches the Cambridgeshire County Council library opening times page using a simple fake header – I found that the webserver refuses requests without a sensible user-agent. html_all can then be parsed as needed with xml.etree.ElementTree or regular expressions.

url      = 'http://cambridgeshire.gov.uk/residents/libraries-leisure-%26-culture/libraries/library-opening-hours/'
headers  = {'User-Agent':'Mozilla'}
html_all = read_url(url, headers=headers)

I hope to talk about this and other techniques to automagically generate SVG using Python at Wikimania 2019 – fingers crossed!

interstellar probes trajectory.svg ☎ 9 Jan 2019

It seems there's a certain fascination with my old graph file:Voyager_2_velocity_vs_distance_from_sun.svg – it regularly turns up at random places on the Web. I thought it'd be super to have a map of the five current interstellar probes, too, but that's surprisingly hard to find. Even NASA had only one up to the early 90s before New Horizons launched. So with some difficulty, I managed to find two sites that gave heliocentric coordinates of these spacecraft and the planets for each day over a period of several decades: COHOWeb and Horizons On-Line Ephemeris System.

On a long transit, I wrote a Python script to collate the data into a table, for the first of each month. I then updated my usual near-polyglot script to plot orthographic views, hopefully clearly showing each trajectory, especially the gravity assists.

Wonder if it's the first map showing all five probes to date?!

22 JAN 2019 UPDATE: I added Ultima Thule to the graphic. Guess that's one nice thing about rendering the SVG in Python: it's easy to add new bodies that New Horizons encounters in the future.

Inscribed cone sphere cylinder.svg ☎ 6 Dec 2018

I had long known that the ratio of the volumes of a cone, sphere and cylinder of the same radius and height was 1:2:3, Archimedes considering his discovery of the 2:3 ratio his masterstroke.

I was thus amazed to independently discover that the ratio of their total surface areas, including caps, was ϕ:2:3 (OK, Archimedes discovered the 2:3 bit).* That's a completely unexpected appearance of the golden ratio, so I just had to update my old drawing with my finding. An equation with both ϕ and π – how cool is that?

* The cone's curved surface can be flattened into a sector of radius r√5 (using Pythagoras' theorem) and arc length 2πr (the circumference of the cap). As a full circle of radius r√5 has circumference of 2πr√5, our sector subtends ⁠1/√5⁠ of a revolution, giving an area of ⁠1/√5⁠ · π(r√5)² = πr²√5. Add the cap and the total area is πr²√5 + πr² = ⁠√5 + 1/2⁠ · 2πr² = ϕ · 2πr².

P.S. Another coincidence is that ratios of both the volumes and surface areas of the sphere and cylinders are 2:3. As in the graph on the right, the surface-area-to-volume ratio of an object decreases with increasing roundness and volume. It's curious that, going from the sphere to the cylinder, the roundness decreases while the volume increases at exactly the same rate such that the ratio is maintained!

Cambridge Wikidata Workshop – Image Workshop ☎ 21 Oct 2018

Charles Matthews persuaded me to speak about images on Wikidata at yesterday's workshop. A night's mugging yielded this scrappy presentation touching on

1. Wikidata properties related to images
2. Adding images to SPARQL queries
3. Use of WikiData Free Image Search Tool
4. Use of WikiShootMe!
5. Tracing bitmaps in Inkscape

Magnus Manske kindly sat in, answered questions and pointed out mistakes in my understanding.

I also showed a few of my SMIL SVG – The Corpus Clock animation was especially popular.

All in all a superb little knowledge-sharing day!

Cambridge free tennis courts.svg ☎ 16 Sep 2018

SVG filters allow fun effects as in the animated light in the snow animation below, but I found some practical uses for them, too. The simplest may be drop shadows to make pseudo-3D scenes more realistic, such as the soft drop-shadows in the Plato's number graphic. To keep the filter as simple as possible, one can make two copies of the objects; applying the filter to the lower copy turns opaque areas black and blurs them:

 <filter id="filter_blur">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
 </filter>

Conversely, one could blur and turn opaque areas white to make a glow around objects, such as text, to make it easier to read. The feColorMatrix tag both colours the blurred areas white and makes them less transparent, so that the outline is more distinct. Blending with the SourceGraphic avoids needing two copies of the object:

 <filter id="filter_glow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
  <feColorMatrix in="blur" type="matrix" values="0,0,0,0,1 0,0,0,0,1 0,0,0,0,1 0,0,0,8,0" result="white"/>
  <feBlend in="SourceGraphic" in2="white"/>
 </filter>

The final example is something I'd wanted to do since I posted this question about applying a graduated outline on a shape, in particular the second case. A filter solves it elegantly; after blurring, the outline is eroded to bold the boundary then composited using the out operator:

 <filter id="filter_outline">
  <feGaussianBlur stdDeviation="4" result="blur"/>
  <feMorphology in="blur" operator="erode" radius="4" result="erode"/>
  <feComposite operator="out" in="SourceGraphic" in2="erode"/>
 </filter>

This free-tennis-court image shows my first use of the last two techniques, on the text labels and ward boundaries. Fun with filters!

Bible code example.svg ☎ 2 Sep 2018

This question made me wonder about the likelihood that profanity appears in Base64 strings which I use to embed bitmaps in my SVG. As an order-of-magnitude estimate, suppose the string comprises only letters and case doesn't matter, a random four-letter string has ⁠1/26⁴⁠ ≈ ⁠1/456 976⁠ chance of matching a given four-letter word. A 1 MB string has about 1 million of these strings, so I expect about two matches. I did a case-insensitive search of the F-word in my 1.9 MB File:Leonardo_da_Vinci_monument_in_Milan.svg (which had separate strings, but that's close enough) and indeed got three instances. Hope noone's offended by my SVG!

It reminded me of the Bible code debunking craze in Cambridge around 2010. Looking up its article, I found the PNG on the right hard to read as the text was in all-caps and the "codes" went from bottom right to top left. I thought I could make it more legible, and vectorise it at the same time: I made alternate words bold. Coincidentally, in the proper case, only the initial B was capitalised. But the best change was using 21 columns instead of 33; with the correct offset, this made the "code" left-to-right and not cross.

Since I'd written Python that actually searches through text, I decided to make a locally branded version with "wiki" and "pedia" (I couldn't find "wikipedia"). Genesis had many matches, so I picked one where they were densely packed. I couldn't avoid the crossing without distorting the "codes" too much or making them right-to-left. See below...

• 
  21-column version
• 
  "Wikipedia" version

Template:Comparison of Revised Julian and Gregorian calendar century years ☎ 30 Aug 2018

I've just learnt about the Revised Julian calendar which improves on the Gregorian calendar. Its formula to decide whether a century year (year number ending in "00") is a leap year wasn't obvious, so I decided to draw this table, which makes it obvious how there are 2 leap years every 9 century years, as compared to 2 every 8 in the Gregorian one. Its designer cleverly arranged the two in the current span of 900 years to coincide with 2000 and 2400, meaning that the calendars will perfectly agree for years 1601 to 2799, notwithstanding the Gregorian calendar reform. That should be enough for a while!

The Wikitext itself isn't terribly exciting, just wrapping the table in a div floated right to simulate an infobox. I couldn't use the infobox class as the table cells stopped being centre-aligned. I also learnt the use of template:navbar to let editors more easily edit templates and was amused by the large number of tick and cross mark templates.

demo rotation centre using CSS and SMIL.svg ☎ 30 Jun 2018

I'm delighted that Vincent Mia Edie Verheyen recently contacted me for help with interactive and animated SVG – finally found someone who shares my interest in dynamic SVG!

He found that many CSS or SMIL techniques still don't work with Internet Explorer/Edge. The only reliable interactivity seems to be hover, tooltips, hyperlinks and changing the pointer (cursor). Apparently, the :active selector also allows clicking, but the user must continuously depress the button. It seems the industry has shifted to JavaScript (no surprise really) – is there any hope of Wikimedia allowing at least some Javascript in file uploads? :-(

Anyway, I was glad to learn from Vincent of the symbol tag, as used in this animated SVG. It can do more than named objects in defs which I've been using, such as scaling the object to fit a given width and height (optionally preserving the aspect ratio). It also supports viewBox attribute like the svg tag. http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/ has a tutorial.

One limitation is that parts of the symbol with negative coordinates get cropped. A solution is to add overflow="visible", e.g.

 <symbol id="stuff" overflow="visible">
  <rect x="-10" y="-20" width="30" height="40"/>
 </symbol>
 <use xlink:href="#stuff" x="50" y="60"/>

Additionally, one can move the symbol by specifying x and y attributes in the use tag, where I might have previously used transform=translate(50,60). Three cheers for two-way knowledge exchange in Wikimedia!

Mars elevation.stl ☎ 1 May 2018

I've been experimenting with STL over the last month. User:Romanski reminded me that most of what I've made, including fractals, can already be done with other tools. Nevertheless, one area to which I think I can add are planetary elevation models, such as this one. To me, a 3D model, particularly a physical one, makes the shape much clearer than a topo map, especially features in polar regions. (Perhaps one thing lost is that the northern hemisphere is significantly lower than the southern one.) It's a shame that most STL viewers, including the Mediawiki one, doesn't support colours; that would definitely open a whole new world of possibilities.

Anyway, looking at the file's history, one can see how my technique evolved:

1. The naive way was to make rectangles along latitudes and longitudes. The drawback is that they become thinner towards the poles, wasting polygons and giving strange star shapes around the poles. (As STL works with triangles, I had to split each rectangle into two triangles – a good thing, actually, as by splitting along the diagonal with the smaller elevation difference, I could get a smoother shape, a trick I discovered while making File:Penang_island.stl.)
2. I thus tried an octahedron with each face recursively subdivided into four triangles. Each vertex is then projected to the appropriate radius. Though the resolution has increased despite using around the same number of polygons and the polar artifacts have disappeared, the surface looked very jagged, perhaps due to the triangles' acute angles.
3. Deciding to go back to rectangles in order to use the rectangle-splitting trick, I settled on projecting a subdivided cube onto a sphere. This article explains the maths well. Unfortunately, I oriented half of the polygons the wrong way! That was to be corrected in my final version...
4. In addition to fixing the orientation, I made the base model an oblate spheroid with different polar and equatorial radii. But the biggest improvement was to calculate the elevation of the centroid of each rectangle. If it was lower or higher than all four vertices, i.e. a peak or pit, I divide the rectangle into four triangles like the sides of a pyramid. Otherwise, I divide it into two as before. This considerably sharpened areas with a lot of detail at the expense of around 10% more polygons.

I made two other models with the final method:

1. Earth without liquid water
2. The Moon

The next step may be to use a triangulated irregular network, but that will need to wait for another day...

Template:gallery remainders ☎ 21 Apr 2018

As in last month's entry below, Wikipedia allows collections of images that wrap to the browser width using the <gallery> tag. My aspie side gets annoyed when there's just one lonely image on the last row, though ☹

I realised that, though I can't control how many columns there will be, I can control how many images are in the gallery, so made a little Python script to generate a table highlighting "good" numbers. Obviously, it's inevitable that there will be one left over when p = kc + 1 for any integer k, but what about other numbers?

Besides highly composite numbers like 6, 12 and 60, there are surprisingly "good" numbers like 14, 38 and 44. On the other hand, 10 and 36 are "bad" as they leave 1 remainder with 3 and 5, respectively. And numbers after highly composite ones, like 13 and 25 are especially "bad"...

As a footnote, I learned that in typography, a single word on a line at the end of a paragraph is called an orphan. Looks like I'm not the only one who finds it annoying!

commons:category:STL_files_by_cmglee ☎ 29 Mar 2018

I was delighted to learn from Charles Matthews that Wikimedia Commons now allows upload of 3D files, in the form of STL – if only it supported colour, transparency, animation etc.

As I'd enjoyed 3D modelling in a past life, I set about creating the models below using Python scripts. Since STL files don't allow embedding the scripts as comments, I added them to their file description pages. Sadly, I came across artifacts in the Wikimedia viewer and occasionally the thumbnail. I've checked that the direction of facet vertices is anticlockwise, the normals are sensible and polygons are not duplicated. It seems to happen more where the polyhedron is thin. All these polyhedra render correctly on http://viewstl.com . Let's see if they're fixable...

• 
  My very first STL, modelling a solid that rolls in a very curious manner
• 
  Visualising the diamond cubic lattice, hard to picture in 2D
• 
  One of my favourite shapes, with a frame to match
• 
  This tetrix collection's 87 380 facets don't seem to tax modern computers
• 
  From my biggest to my smallest STL, the Császár polyhedron is sheer elegance
• 
  The Szilassi polyhedron is another beauty – though not the rendering of my STL!
• 
  My first terrain model, with even worse Z-fighting...
• 
  Eight of the half-cubes can be 3D-printed and taped together to make the curious Yoshimoto Cube
• 
  Another model for 3D-printing: 6 panels slot together around a cubic hole to form a rhombic triacontahedron
• 
  The first of my models of celestial bodies with exaggerated terrain: Mars
• 
  The moon
• 
  Earth without liquid water (but with ice caps)

Foucault pendulum precession vs latitude.svg ☎ 31 Jan 2018

I had the good fortune to visit the Griffith Observatory and had a personalised explanation of its Foucault pendulum. Seeing the marks from 0 to 41 around the rim, I asked how long it takes to rotate 360° for a given place and was told it's the sine of the latitude.

Checking Wikipedia, the angle a Foucault pendulum precesses is indeed linearly proportional to sin(latitude), but there was no illustration showing the precession period. I thus drew this graph showing both the precession per day and its period. Curiously, at the axes' scales, 24 hours coincides with −360° and 4 days with 360°, letting me share the gridlines.

Footnote: I found out that the "day" is a sidereal day; the earth itself orbits the sun, so the direction of noon changes from day to day. Instead of 24 hours, it's ~23.93447 hours, but that's indistinguishable on the graph. Griffith Observatory's 34.11856°N yields a precession period of 42.67 hours, a bit more than the markings!

commons:Template:source thumb ☎ 8 Dec 2017

When uploading a derived image, I previously found specifying the file(s) from which it wad derived a bit clumsy; I could use, for instance,

• Its upload.wikimedia.org URL,
• Its file description page URL,
• Its filename,
• A link like [[:File:FILENAME]], or
• A thumbnail like [[File:FILENAME|thumb]],

none of which simultaneously lets

1. The user see an inline preview of the image,
2. The user see its filename,
3. The uploader not having to bother with wikitext, and
4. The code and presentation to be consistent among uploads perhaps years apart.

I thus decided to create a template on Commons:

<table style="display:inline;border-collapse:collapse;"><tr><td>[[File:{{{1}}}|thumb|none|[[:File:{{{1}}}|{{String replace|{{{1}}}|_|&nbsp;}}]]]]</td></tr></table>

This automatically generates a thumbnail with the filename as a caption linking to the file description page (I'd have preferred it to link directly to the actual file, but couldn't find a way to derive its URL from just the filename):

The uploader can now simply transclude the template with the filename (without "File:") as the first parameter:

{{source thumb|FILENAME}}

To make the caption more readable, I replaced underscores with non-breaking spaces. I also enclosed the thumbnail with an inline table, so that multiple thumbnails can flow side by side instead of being stacked one above another.

If there's demand, I'll add more parameters to fine-tune the thumbnail.

UPDATE 14 MARCH 2018: {{filepath:FILENAME}} gives the file URL, hence

<table style="display:inline;border-collapse:collapse;"><tr><td>[[File:{{{1}}}|thumb|none|link={{filepath:{{{1}}} }}|[[:File:{{{1}}}#filelinks|{{String replace|{{{1}}}|_|&nbsp;}}]]]]</td></tr></table>

UPDATE 21 OCTOBER 2018: I added the option of specifying the language for internationalised SVG using a second parameter, as in these thumbnails:

{{source thumb|FILENAME|LANG}}

Template:Earth Impact Database world map.svg ☎ 17 Nov 2017

I've finally found out how to have "inline" tooltips in an SVG which appear when hovered, yet allow fill and stroke opacity to be fully controlled on hover: set the unhovered font-size to a tiny value, say, 0.1 px, and the hovered one to the normal size. In this world map of confirmed impact craters, this allows both stroke and fill of a circle to fade when the user hovers over the map, but not the circle. The advantage of "inline" text is that it appears immediately on hover, unlike a regular tooltip, and allows limited styling, such as 2-columns or left and right-aligned text.

I also found that using the link paramter of the thumbnail directly loads the SVG on clicking the thumbnail, instead of the file description page. The file description page can still be accessed by clicking the icon at the right of the caption.

North West Cambridge Development ☎ 1 Oct 2017

It's great that Cambridge has an annual event where private establishments open their doors, normally a weekend before London Open House.

This year's Open Cambridge saw the public opening of Eddington, the centre of the North West Cambridge Development.

Being the resident village busybody, I couldn't help visiting, joining some tours and capturing the sights. My favourite was Fata Morgana, a "tea house" made almost entirely from steel mesh. The semi-transparent surfaces made the experience surreal. I got to chat with its artists, too, and learn about its creation.

Not realising that someone had just created an article on Eddington itself, I created North West Cambridge Development and nominated it for Did You Know. (Well, at least I didn't know how many hoops one had to jump through to get an article into Did You Know.)

And when I have more time and inclination, I'll try merging both articles...

One million dots 1080p.png ☎ 28 Aug 2017

I noticed that a full HD screen has just over 2 million pixels (1920 × 1080 = 2 073 600) and had the idea of a two-dimensional visualisation of the size of one million to complement my three-dimensional one to the left.

By using a checkerboard pattern, I could show one dot for every two dots. The naive approach would result in a big blob of a million dots without any grouping, so I wondered if there might be a way to separate them into 1000 tiles of a thousand each. Having 10 rows of 100 columns would "use up" 9 rows and 99 columns of pixels to separate the tiles, resulting in 1821 × 1071 = 1 950 291 pixels, just shy of the 2 million pixels needed. However, 10 rows of 10 columns gives 1911 × 1071 = 2 046 681 pixels, so I'm on the right track...

I could use the background of the dots to separate tiles of 1000 dots. I settled on white and very light grey to make the difference just visible yet not too distracting. Interestingly, 19 × 106 = 2014, i.e. 1007 dots, so each group of 10000 dots can be 190 pixels wide and 106 pixels tall. A 10×10 matrix of these would leave a neat 20 rows and 20 columns of pixels to separate the groups. To make the groups easier to count, I divided them as follows: 2_1_2_1_2_4_2_1_2_1_2, where _ represents a group, in both dimensions. As 7 dots had to be removed from each tile, I removed 3 from one corner and 4 from another, conveniently resulting in ticks appearing in each group.

Hacking up the Python script (which uses the png.py module) on file:one_million_dots_1080p.png, a bit of tweaking to make the graphic symmetrical, and ta-da – 1 million black dots in full HD!

Universe blocks timeline visualisation.svg ☎ 31 Jul 2017

magine a 138-page book chronicling the history of time. Each page has exactly 100 lines, and each line, exactly 100 letters. The first letters on the first page describe the most recent events; the last letters on the last page, the beginning of the Universe as we know it. If the amount of text is linearly proportional to time, how much of this tome narrates written human history?

Well, with 13.8 billion years denoted by 138 pages of 10000 letters, each letter represents 10000 years. Thus, written history is worth about half a letter!

This graphic shows where some other notable events lie. Note that everything involving humans lies on the first line, representing the most recent 1 million years.

Going down two-thirds of a page, we come to the big die-off of the dinosaurs 66 million years ago. At the end of the first page, 100 million years ago, we're firmly in dinosaur and reptilian territory. Just five pages later (500 million years earlier), complex animals hadn't evolved. After the tenth page (1 billion) years, the most complex lifeforms were green algae.

A third of the book in, the 45th page marks the formation of the Earth, the Sun and much of the rest of the Solar System. Most is unknown about the Universe until perhaps the last 8 or so pages when the first galaxies formed.

The final page, likely the 138th, is once again a hive of activity, where much of the early Universe takes place. Exactly how many lines and letters it has, noone knows...

I hope this analogy gives another perspective on the timeline of the Universe. Though one might bemoan our insignificance in the big picture, I find it amazing that scientists were able to discover these milestones in just the first half-letter.

P.S. At the same scale, how long is the Diary of the Universe to people who think it started in 4004 BC? Six-tenths of a letter! ୯ ͡°  ͜১͡° ੭

horizon distance graphs.svg ☎ 24 Jun 2017

The graph on the left employs a clever technique to have gridlines in different units, such as metric and imperial, on the same graph: by having them straddle the line!

I wondered if it might work for any odd number of graphs, and drew this month's graphic. Getting the gridlines to alternate between the curves was tricky, but creating clip-paths by alternating the directions of the paths worked. Each set of gridlines could then be made up of rects textured with their corresponding patterns. I even managed to reasonably smoothly transition from feet to miles for imperial altitude. And of course, multiplicative factors between units appear simply as translations on a logarithmic scale.

It was fun picking reference altitudes, though I couldn't find a good one between ISS and GPS orbits. It's also rather surprising how good the approximation is, and how similar the straight-line and along-Earth's-surface distances are, all the way to the official boundary of outer space.

North Korean missile range.svg ☎ 20 May 2017

User:Ethanmayersweet suggested that I update my unexpectedly popular graphic and I thought it would be the perfect opportunity to update the map to an azimuthal equidistant projection – I'd found it mildly annoying that the radii of the rings weren't to scale, and much of the globe (especially mainland USA, whose readers would most likely be interested in) was hidden.

User:Jason Davies had usefully uploaded File:North-korean-missile-ranges.svg, but I preferred a coloured globe without coastline shading. The other thing I wasn't so keen about was the 5 MB file size. So I wrote this Python script to

1. convert absolute to relative coordinates in the SVG path,
2. round to the nearest integer, and
3. simplify horizontal and vertical movements to "h" and "v" commands, respectively.

The script could have combined multiple "h" and "v", and handle commands other than "M", "L" and "Z", but that will have to wait until another day. That reduced the total file size (even after "beautification" and updating the ranges) to 162 KB, a reduction of 97%!

By the way, I found it curious that UK and mainland USA (and Africa) are just beyond 8 000 km – coincidence?

Menger sponge diagonal section.gif ☎ 29 Apr 2017

After hearing about the Menger sponge at a talk about fractals in this year's Cambridge Science Festival, I challenged my companion to guess what a cross-section along a space diagonal and passing through its centroid looks like.

Back home, it occurred to me that I could use the constructive solid geometry feature of POV-Ray to automatically generate cross-sections, and decided to make an animation of the cross-sections along the space diagonal similar to http://youtube.com/watch?v=fWsmq9E4YC0 but viewed perpendicular to the section so that each section is a true view.

The biggest challenge was coming up with an efficient way to create the sponge. The method I used to render the level-4 tetrix on the left would result in 20⁴ = 160 000 cubes – far too strenuous for my measly computer!

I eventually decided to subtract three orthogonal sets of long holes from a simple cube. My initial arrangement resulted in artifacts due to holes from different levels overlapping, but I managed to find a set without overlap – see my POV-Ray source code below if you're interested.

Additionally, I wanted to use a perspective projection for a more realistic look, but still wanted to keep every section at the same scale, so I had to translate the cube at exactly the rate which keeps the cross-section plane in place. To confirm that I got it right, I replaced the sponge with a simple cylinder with its axis perpendicular to the plane.

After a day rendering the 55 frames (27 × 2 + 1 – chosen so that every vertex has a plane passing through it), I thought the colour was a bit bland, so modified the palette after converting them into GIF in XnView's batch mode. Good thing I decided to turn off anti-aliasing to increase rendering speed.

I also decided to add pauses at the level-0 vertices, and of course, a longer one at the cross-section through the centroid.

Lastly, I came up with a tidier presentation of my POV-Ray source on the file description page, so that anyone can continue my work:

#declare HOLE1 =
 box { <1/6,1/6,0.50001>,<-1/6,-1/6,-0.50001> }
#declare HOLE2_8 =
 union {
  object { HOLE1 translate < 1, 1,0> }
  object { HOLE1 translate < 0, 1,0> }
  object { HOLE1 translate <-1, 1,0> }
  object { HOLE1 translate <-1, 0,0> }
  object { HOLE1 translate <-1,-1,0> }
  object { HOLE1 translate < 0,-1,0> }
  object { HOLE1 translate < 1,-1,0> }
  object { HOLE1 translate < 1, 0,0> }
  scale <1/3,1/3,1>
 }
#declare HOLE3_8 =
 union {
  object { HOLE2_8 translate < 1, 1,0> }
  object { HOLE2_8 translate < 0, 1,0> }
  object { HOLE2_8 translate <-1, 1,0> }
  object { HOLE2_8 translate <-1, 0,0> }
  object { HOLE2_8 translate <-1,-1,0> }
  object { HOLE2_8 translate < 0,-1,0> }
  object { HOLE2_8 translate < 1,-1,0> }
  object { HOLE2_8 translate < 1, 0,0> }
  scale <1/3,1/3,1>
 }
#declare HOLE4_8 =
 union {
  object { HOLE3_8 translate < 1, 1,0> }
  object { HOLE3_8 translate < 0, 1,0> }
  object { HOLE3_8 translate <-1, 1,0> }
  object { HOLE3_8 translate <-1, 0,0> }
  object { HOLE3_8 translate <-1,-1,0> }
  object { HOLE3_8 translate < 0,-1,0> }
  object { HOLE3_8 translate < 1,-1,0> }
  object { HOLE3_8 translate < 1, 0,0> }
  scale <1/3,1/3,1>
 }
#declare HOLE4 =
 union {
  object { HOLE1 }
  object { HOLE2_8 }
  object { HOLE3_8 }
  object { HOLE4_8 }
 }
#declare SPONGE4 =
 difference {
  box    { <0.5,0.5,0.5>, <-0.5,-0.5,-0.5> }
  union {
   object { HOLE4 }
   object { HOLE4 rotate <0,90,0> }
   object { HOLE4 rotate <90,0,0> }
  }
 }

#declare CLOCK       = 1 - 2 * clock;
//#declare CLOCK       = 0;
#declare CLOCK_PLANE =  1.5 * CLOCK;
#declare CLOCK_ALL   = -0.5 * CLOCK;
#debug concat(str(CLOCK, 8, 3), "\n")
difference {
 object {
  //cylinder { <1,1,1>, <-1,-1,-1>, 0.5 } /// check scale constant
  SPONGE4
  pigment { rgb <0.5,1,1> }
 }
 plane  { <-1,-1,-1>, 0 translate <CLOCK_PLANE,0,0> }
 translate <CLOCK_ALL,CLOCK_ALL,CLOCK_ALL>
 rotate    <0,45,degrees(-atan(1/sqrt(2)))>
 no_shadow
}

background { color 1 }
camera {
 right x * image_width / image_height
 location <3.1,0,0>
 look_at  <0,0,0>
 angle    30
}
light_source { <0,9,0> color 1 parallel }
light_source { <9,0,0> color 2 parallel }