Hello world!

My interest in editing Wikipedia is in illustration, solet me know if you wish some article onscience,technology,architecture ormathematics illustrated. Below issome of my work to date...

As I had trouble with mydesk fan, I got interested in how its motor worked, and learnt aboutshaded-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 usedPythagorean triples to get nice integer coordinates, making theoblique projection was still challenging, especially around the circular arcs. I also cheated by drawing only two states of therotor but hope it does not detract from showing the rotating netmagnetic field.

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

As I create my SVG inNotepad++, 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!

I thought theorchard-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. Themathematics 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 forFile:fault_types.svg. After texturing it with anfeTurbulence 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 withfeTurbulence andfeColorMatrix.

I sawthis transport map on theMutiara line article and thought that being able to embed custom maps in articles was amazing.

Mutiara LRT route and stations

After some dabbling withGeoJSON 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 theTunguska (1),Chelyabinsk (2) andKamchatka (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 theCAT bus route inGeorge Town, Penang.

I drew this SVG earlier this year to replaceFile: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 mea 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 offont-family, I setfont-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.

I was very pleased to learn how acontinued 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 thegolden 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, whilee 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.

I chanced uponWikiPate'sGraphics Lab/Map workshop request for a blank world map that lets countries be shaded in stripes. For example, a map showing countries usingcustomary units in red, andSI or metric in blue might show a country using both with red and blue stripes.

Considering it an interesting challenge, I built onmy 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 mapFile: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;}

A physics studentmessaged 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 withpypng, converted to GIF, made into a GIF animation, and optimised withEzgif.

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

Ihad 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!

Jn.mdel's idea tochange 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 isa analogous to BC beingb. 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!

On another visit to Malaysia, I was invited to help inEngageMedia'sOpen Tech Camp 2025, my firstunconference. 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 thatLantern Festival did not mention the common Malaysian tradition of throwing oranges, so I added this photo and a write-up toLantern Festival#Finding_love.

Last summer, I discoverednomograms, 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 ofFile:Nomogramparallelresistance.svg to make one for calculatingharmonic 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,

Adding two other nomograms gave me a set to calculate thePythagorean 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

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 theHunt the Wumpus map, often described as adodecahedron's vertices linked by its edges could be alternatively (and perhaps more intuitively) reimagined as regions on aspherical 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 thatGoldberg polyhedra are particularly suited. Though 20 cells have five instead of six neighbours, they almost form a hex map.

Moreover, the net for atruncated dodecahedron can be laid out very neatly, unlike that of anorder-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 inCatan, 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.

Uwappa‬ (talk ·contribs) recently contacted me after I responded toa 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 onBody roundness index, which I didn't realise was possible.

I was told abouttemplate:calculator and was intrigued by what Uwappa managed to achieve with the API, such as showing differentdivs depending on calculation results. I helped make a "filmstrip" of increasing body size to be cropped usingtemplate: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 onInch#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 dofor loops or text processing. Let me know if you know of any way to do so.

While drawing thisproof 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 thelinearGradient to

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

causesMach bands to simulate a convincing specular highlight.

Though I've previously usedPythagorean 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.

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 atTrinity College, Cambridge#Punt_names.)

Back home, I was surprised to learn that it was not mentioned in thearticle, so I wrote up a section (fortunately, its new puntCharles 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?

As I'd been captivated byhybrid 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 theMona 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 byLeonardo 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'sGirl with a Pearl Earring.

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 fromhttp://nssdc.gsfc.nasa.gov/planetary/factsheet below.

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

A friend told me aboutprint-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.

AlthoughSprawlopolis andAir, 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 anisomorphic version with public-domain backgrounds (to avoid copyright issues) to illustrate Wikipedia. I called itBalmy Isle.

Instead of using layout software such asLibreOffice 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.

Thoughlibrsvg 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.

commons:user:Emreszer contacted me about translating mydelta-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 myplanet 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? 😊

In 2011, I found articles onstationary 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, they values are much larger than thex 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. Usinga 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 thersvg 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, toGalacticShoe foran algorithm to exactly draw a cubic polynomial segment with acubic Bézier curve:
If${\displaystyle f(x)=a{x}^3+b{x}^2+cx+d}$ and the endpoints are${\displaystyle (p,f(p))}$,${\displaystyle (q,f(q))}$, the control points are

${\displaystyle (\frac{2p+q}{3},a{p}^{2}q+b(\frac{p^2+2pq}{3})+c(\frac{2p+q}{3})+d)}$,${\displaystyle (\frac{p+2q}{3},ap{q}^2+b(\frac{q^2+2pq}{3})+c(\frac{p+2q}{3})+d)}$.

Can anyone improve on the function or presentation?

I came acrossHundenvonPenang's superb drone photography of Penang andrequested a shot of the abandonedPenang Mutiara Beach Resort and the recently-openedGurney Bay. He obliged me and also suggested meeting up as I was visiting Penang.

*angys* then joined the conversation and we decided to meet onChap Goh Meh. We walked aroundGeorge Town on a photowalk of theTua 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 byUltron90, and I helped organise theirWikiGap event today. As the theme is on women in Malaysia, I decided to start an article on eminent geographer and environmental activist DrKam Suan Pheng. Have a look at her article!

I came across an ingenious idea byTilmannR 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 idGENERATED_CONTENT the generated content, and into one with idGENERATOR_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 remakeFile:Template_map_of_U.S._states_and_District_of_Columbia.svg which relies on my Google account to run a Google Sheets spreadsheet. After consultingTimeshifter, I ported its features over toFile: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.

In the last few hours on 2023, I decided to implement an idea I'd seen onhttp://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 andtranslate),
2. stroke_width and
3. colour

of a particular instance's explosion. Strictly speaking,colour should be ininstance but I put it underburst so that I could also animate the colour of the textHappy 2024 added later.

For each explosion,scale simulates the expanding particles whiletranslate 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 increasingscale and whitecolour 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!

I thought I'd try my hand at digital painting and got myself anXP-PENgraphics tablet at aPrime Day sale.

While visiting a castle, a friend and I observed that thehelical (spiral) staircase leading to the basement turned in an unconventional way. I was reminded by a "factoid" that such staircases typically turn so that thenewel 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" wasa myth. Still, learning to paint inKrita was a good experience.

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.

Though I had known about theCantor set for many years, I was intrigued by itsradial depiction athttp://gist.github.com/curran/74cb4d255acf072633a2df0d9b9be7c3and 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) usingstroke-dasharray, their final values incremented to avoid gaps due to rounding.

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

Chris25689 helpfullyreminded me to update myTime 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 theviewBox. Oh well, it was worth a try…

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 aLatin 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 mathematicianSrinivasa 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.

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, @Pruthvirayaclaimed 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 suggestioncauses 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 aC♯ program (details oncommons:File_talk:constellations,_equirectangular_plot.svg). After updating the Perl script, I regenerated the SVG above withthis online Perl interpreter which allows file input and output.

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

Moving on fromPOV-Ray, I've started rendering animations usingBlender 3.3.1.

Itsphysics simulation came in really useful for this rolling-sphericonGIF animation. It would've otherwise been a chore setting upkeyframes 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 reachedsteady state before "recording" the action.

For thecoin rotation paradox animation, I tried to usenormal 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 withBase64 and uploaded it toa talk page. Would you know of a better solution?

I was captivated by a stunt onBritain'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, includingone 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 inFile: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 sametransform keyframe technique I typically employ in animated SVG, but withease-in-out andalternate to mimic the swing. Though not exactlysimple 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 😅

I came across this 15 MB file oncommons:Category:Large_SVG_files and thought it could be much optimised in size, so contactedSarang, an expert on minimising SVG who taught me aboutstroke-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 thearc path command, e.g.

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

is almost equivalent to

<ellipsecx="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 therotation 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 theviewBox 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 inCode Golf ⛳

This month's mini-project started withTimeshifter's call on theGraphics Lab (subsequentlymoved) for a simple way to generate achoropleth map of US states and D.C.

Shyamal and I proposed several approaches. I settled on making a human-editable SVG supplemented bya 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 beused in the business logic, and structured the user-editable parts as follows:

<styletype="text/css"><!--Minimum,maximumanddata-unavailablecoloursaregivenbelow-->.min{fill:#ff6600;}.max{fill:#99ffff;}.n_a{fill:#cccccc;}</style><gid="overlay"><!--Relativevaluefrom0.00(min)to1.00(max),andtextstringsaregivenbelow;replacehrefvaluewith"#XXX"ifdataunavailable--><usexlink:href="#AL2"fill-opacity="0.185"/><textid="AL">7.25</text><usexlink:href="#AK2"fill-opacity="0.502"/><textid="AK">10.85</text>...<usexlink:href="#WY2"fill-opacity="0.000"/><textid="WY">5.15</text><textid="legend_min">5.15</text><textid="legend_max">16.50</text><textid="title">Stateminimumwages,indollars.Jan1,2023</text>

All this was packaged asFile: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 intohttps://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...

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 userErminest-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: Inthis thread,TilmannR presented a way to use nearest-neighbour interpolation: wrap an image (with size in pixels instead ofthumb) like so:

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

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

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

{|class="wikitableinfobox"style="width:1px;"|<divstyle="image-rendering:pixelated;">[[File:integral_image_example.png|192px]]</div>|-|Integralimage(righthalf)ofa2-bitgreyscale[[pixelart]](lefthalf),normalisedandmagnifiedforvisibility|}

I've been curious aboutvanishing 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 makeinteractive SVG, as inThe 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 themissing square puzzle:

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

I was pleasantly surprised to receivea message requesting a printable version of my infamousNucleosynthesis 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 oncommons: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 onISO 216 international paper sizes.

To make it, Iamended the SVG code, opened it in Firefox, usedPrint >Microsoft Print to PDF and shrunk it withhttp://ilovepdf.com/compress_pdf using "extreme compression".

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

A curious thing happened last month.Among Us aficionados suddenly got wind of theAmong Us-parody-themed diagram I made to illustrateBayes' theorem, leading to anedit war anda 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 aCrewmate 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.

Many many years ago, I enjoyed a trading simulation game calledTaipan!. 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 decreasingstroke-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 fakecontour lines andshaded relief on the land.

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

1:10¹⁰ solar system model

Delighted that Cambridge has (albeit temporarily)its own1:591 000 000Solar 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 astandalone SVG to Commons.

Hope more scale Solar Systems pop up around the world!

After successfully drawing theRisk game board as a graph with rectilinear and 45° edges, I decided to mark the fading of theCOVID-19 pandemic with a redrawing of thePandemic 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.

Since I first saw it, theHollow-Face illusion has fascinated me. I first made an STL file exhibiting the illusion, a good exercise to learnBlender. I managed to finda CC-BY model onSketchfab 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 madeone that swings left and right to spend more time on the hollow face. Which do you prefer?

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

I was surprised to find no existing video of thetennis 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 usingFFmpeg, I cropped and composited them usingPython withOpenCV. 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 asOgg Theora video usingFFmpeg.

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.

As forant on a rubber rope, it occurred to me that solutions toriver-crossing puzzles can be represented withtimelines. They are most useful when units of time are involved, such as thebridge and torch problem andrope-burning puzzle, but is still beneficial when showing sequences such as in themissionaries and cannibals problem andwolf, goat and cabbage problem.

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

The Cambridge Wikimedian group organised anin-person meetup in conjunction withWikimania 2021. I thought it appropriate to holda photography walking tour of listed monuments nearby afterwards.

WikiShootMe identified several listed graves in theMill 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.

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 astronautChris Hadfield, my space hero,posted about my image 🥹

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

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

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

Another brilliant use of SVG dashes, in addition totartan, andchains and gears!

Some1 asked me onTemplate_talk:Generations_sidebar whether I could simplify my image to appear onTemplate: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 blankg tag simplest:

<switch><gsystemLanguage="simple"/><usexlink:href="#common_legend"/></switch>

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

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

• 
  Construction of theEgg 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 fromhttp://color-blindness.com/coblis-color-blindness-simulator, I wrote a Python script to come up with awebsafe 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:

While debuggingalibrsvg bug, I learnt about the use ofcurrentColor (case-insensitive) to inherit colours in CSS.

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

<styletype="text/css">.toward{fill:#0000ff;stroke:#0000ff;}.forward{fill:#999999;stroke:#999999;}.orbit{fill:none;}.object{stroke:none;}</style><gclass="toward"><useclass="orbit"xlink:href="#orbit"/><useclass="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.

SVG provides a usefuldisplacement map filter allowing an image to be "refracted" by another. The animated underwater scene on the left employs the idea from[1] and[2] 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 fromcommons:category:Solar_System_Scope. Each texture was repeated and horizontally scrolled at the correct speed. After applying the filter, calculated using formulae fromorthographic_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 fromWikipedia: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 theTurkish translation asHarald the Bardrequested, I updated thedict2class class in my generator Python script to recursively work with nesteddicts:

classdict2class(dict):def__getattr__(self,k):returndict2class(self[k])ifisinstance(self[k],dict)elseself[k]

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

I thus uploaded its three versions toCommons andnominated the English version as aFeatured Picture. I'm glad that several other editors and admins concurred, and it's now the newestfeatured map.

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

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

<filterid="filter_blur"><feGaussianBlurstdDeviation="4"/></filter><radialGradientid="grad_sphere"cx="50%"cy="50%"r="50%"fx="50%"fy="90%"><stopoffset="0%"stop-color="#000000"stop-opacity="0"/><stopoffset="99%"stop-color="#000000"stop-opacity="0.3"/></radialGradient><linearGradientid="grad_highlight"x1="0%"y1="0%"x2="0%"y2="100%"><stopoffset="10%"stop-color="#ffffff"stop-opacity="0.9"/><stopoffset="99%"stop-color="#ffffff"stop-opacity="0"/></linearGradient><gid="orb"stroke="none"><circlecx="0"cy="0"r="100"/><circlecx="0"cy="0"r="100"fill="url(#grad_sphere)"/><ellipsecx="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 incommons:category:SVG orb, analogous tocommons:category:4-3-2_trimetric_projection.

${\displaystyle \begin{array}{l}{\displaystyle \frac{d}{dx}}{\displaystyle \frac{1}{x}}\\ ={\displaystyle \frac{d}{d}}{\displaystyle \frac{1}{x^2}}\\ ={\displaystyle \frac{d\mathrm{\setminus }}{d\mathrm{\setminus }}}{\displaystyle \frac{1}{x^2}}\\ =-{\displaystyle \frac{1}{x^2}}\end{array}}$

Anomalous cancellation in calculus

This month's post is aboutmathematical jokes andcoincidences.

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

The radius ofgeostationary orbit, 42,164 kilometres (26,199 mi) is within 0.02% of thevariation 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 theequator, 40,075 kilometres (24,901 mi). Similarly, Earth'sescape velocity is 40,270 km/h (25,020 mph).

On the other hand, I find some fallacious reasoning amusing, such as the aboveanomalous cancellation that trumps
.

Also funny is this true observation:

I was tempted to make the densityη – arranginge t a, the mass becomeseat pizza. Additionally, its weight ispizzagate – this reference might become dated very soon, though!

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 forma =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 knowRoy G Biv, but in which direction?) in refraction and diffraction spectra:RedRefractionReduced. I struggled to find an equivalent for diffraction until I noticed the follow-up:Diffraction isDifferent!

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

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 thevercosine function is just thecosine function plus one. On mouse-enabled device, he or she can click oncos graph to highlight it (other graphs are faded out) then mouse-over thevercosin 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 becomesfocus (as opposed tohover 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:

<styletype="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><filterid="filter_glow"><feGaussianBlurin="SourceAlpha"stdDeviation="2"/><feColorMatrixin="blur"type="matrix"values="0,0,0,0,1 0,0,0,0,1 0,0,0,0,0 0,0,0,2,0"/><feBlendin="SourceGraphic"/></filter>

Finally, each interactive part is defined as follows:

<aclass="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...

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; myFile:Rolling_circle_optical_illusion.svg was pretty jerky.

When I encountered thecoin 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:

<gclass="move2"><useclass="rot1"xlink:href="#r"/></g>...<gclass="rot2"><gtransform="translate(0,-944)"><useclass="rot1"xlink:href="#r"/></g></g>

wheremove2,rot1 androt2 are CSS animations, andr 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 theirleast 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: ...andthis animation of trigonometric functions on a unit circle.

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 onthe maths reference desk and reading upLagrange polynomial andCubic 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!

A 3D-printing discussion revived my longtime interest inEuler 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 theEulerian path,Seven Bridges of Königsberg andFive room puzzle articles lacked diagrams that actually showed the edge count, so drew this diagram. After drawingFile:Eulerian_path_puzzles.svg, I revisited it and thoughtthe 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 🐱

I joined a discussion onCommons_talk:SVG_Translate_tool about theSVG Translate tool. I helpedUser:Ikonact debug why the tool did not show any strings to translate onFile: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 changeid="main" toclass="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 theCommons 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!

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

Deciding to turn it into amultilingual 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 touser: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 aternary 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 pickedaa,ba,ca andda to make a reasonable sequence.

I've just discovered (I think) a new application for interactive SVG without #"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 inmy morphing demo) but pause it when all states have been identified, to show how long the student took. A workaround is to addonmousemove="document.getElementsByTagName('svg')[0].pauseAnimations();"on the win screen, but:

1. Wikimedia now rejects files withon* 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 inmy missile game, though a time limit may frustrate students.)

Would you be able to help?

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

User:Дрейгорич informed me that thetrans-Neptunian objectUltima Thule had beenrenamedArrokoth. While checkinguser:Mrmw's update tofile:interstellar_probes_trajectory.svg, I thought that hovering over aninterstellar probe ought to highlight all theastronomical objects it interacted with, and vice versa. Classifying the hovered object asactive and its associated objects asassociated, I realised that each active group could contain copies of the associated objects withpointer-events:none set, e.g.

<styletype="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>...<gclass="active"><gclass="associated"><usexlink:href="#p1"/><!-- Pioneer 11 --><usexlink:href="#v1"/><!-- Voyager 1 --><usexlink:href="#v2"/><!-- Voyager 2 --></g><usexlink:href="#s"/><!-- Saturn --></g>...

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

This year, theEnglish Scrabble authorities added three two-letter words tothe list of valid words:EW,OK andZE – 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 wonderPH got in).

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

Commons:User:Cwtyler messaged me about aperipheral 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 addgradientUnits="userSpaceOnUse" to makelibrsvg match modern web browsers. The drawback is that x and y values can't be specified in percentages.

• 
  Illusion similar to Kitaoka Akiyoshi'sPrimrose 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?

Continuing my experimentation with SVG filters, I enjoyed making textures forCatan terrain types withfeTurbulence:

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 ofCatan 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 infile:Brooklyn_bridge_section.svg.

Greetings fromStockholm Wikimania 2019!

I had previously struggled to remember which rotationsroll, pitch and yaw referred to, and came across a mnemonic of a baseball pitcher doing anoverhand pitch. Assidearm 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 usingscale androtate transforms, and stacking shapes to make the pseudo-3D arrow.

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 twoclip-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 theBlue 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 thedead heat in 1877...

Shortness
of breath

Nausea

Tingling

Muscle weakness

Symptoms of Bieberitis

Ian Furst contacted me for help ona 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 aroundtemplate: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 thesystemLanguage functionality, but with only443 supported languages, complete freedom to support all 2ⁿ combinations allows onlyn=8 symptoms, despite extremely unintuitive mapping between language codes and combinations. There must be a better way...

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 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 myPython 2 function to read and cache web pages, images etc:

# do_refresh_cache = Trueimportos,urllib2,timedefread_url(url,headers={},path_cache=None,is_verbose=True):if(path_cacheisNone):file_cache=os.path.basename(url)path_cache=os.path.join('%s.cache'%(os.path.splitext(__file__)[0]),file_cacheif(len(file_cache)>0)else'%s.htm'%(os.path.basename(url.rstrip('/'))))if(('do_refresh_cache'inglobals()anddo_refresh_cache)or(notos.path.isfile(path_cache))):request=urllib2.Request(url,headers=headers)try:html=urllib2.urlopen(request).read()excepturllib2.HTTPErrorase:html='';print(e)try:os.makedirs(os.path.dirname(path_cache))exceptOSError:passwithopen(path_cache,'wb')asf_html:f_html.write(html)if(is_verbose):print('%s >%s'%(url,path_cache))time.sleep(1)## avoid rate-limit-exceeded errorelse:withopen(path_cache)asf_html:html=f_html.read()if(is_verbose):print('<%s'%(path_cache))try:html=html.decode('utf-8')exceptUnicodeDecodeError:passreturnhtml

The resource is cached to a givenpath [if unspecified, thebasename 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 theextension replaced withcache] so that subsequent runs need not fetch it again. If the global variabledo_refresh_cache isTrue, 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 theCambridgeshire County Council library opening times page using a simple fake header – I found that the webserver refuses requests without a sensibleuser-agent.html_all can then be parsed as needed withxml.etree.ElementTree orregular 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 atWikimania 2019 – fingers crossed!

It seems there's a certain fascination with my old graphfile: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 currentinterstellar probes, too, but that's surprisingly hard to find. Even NASA had onlyone up to the early 90s beforeNew Horizons launched. So with some difficulty, I managed to find two sites that gaveheliocentric coordinates of these spacecraft and the planets for each day over a period of several decades:COHOWeb andHorizons 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 thegravity assists.

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

22 JAN 2019 UPDATE: I addedUltima 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.

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 ratiohis 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 thegolden 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 radiusr√5 (using Pythagoras' theorem) and arc length 2πr (the circumference of the cap). As a full circle of radiusr√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, thesurface-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!

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

1. Wikidataproperties related to images
2. Adding images toSPARQL queries
3. Use ofWikiData Free Image Search Tool
4. Use ofWikiShootMe!
5. Tracing bitmaps inInkscape

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

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

All in all a superb little knowledge-sharing day!

SVG filters allow fun effects as in the animated light in thesnow animationbelow, 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:

<filterid="filter_blur"><feGaussianBlurin="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. ThefeColorMatrix tag both colours the blurred areas white and makes them less transparent, so that the outline is more distinct. Blending with theSourceGraphic avoids needing two copies of the object:

<filterid="filter_glow"><feGaussianBlurin="SourceAlpha"stdDeviation="1"result="blur"/><feColorMatrixin="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"/><feBlendin="SourceGraphic"in2="white"/></filter>

The final example is something I'd wanted to do since I postedthis 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 theout operator:

<filterid="filter_outline"><feGaussianBlurstdDeviation="4"result="blur"/><feMorphologyin="blur"operator="erode"radius="4"result="erode"/><feCompositeoperator="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!

This question made me wonder about the likelihood that profanity appears inBase64 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 MBFile: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 theBible 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

I've just learnt about theRevised Julian calendar which improves on theGregorian 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 theGregorian calendar reform. That should be enough for a while!

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

I'm delighted thatVincent Mia Edie Verheyen recently contacted me for help with interactive and animated SVG – finally found someone who shares my interest indynamic 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 thesymbol tag, as used in this animated SVG. It can do more than named objects indefs which I've been using, such as scaling the object to fit a given width and height (optionally preserving the aspect ratio). It also supportsviewBox attribute like thesvg 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.

<symbolid="stuff"overflow="visible"><rectx="-10"y="-20"width="30"height="40"/></symbol><usexlink:href="#stuff"x="50"y="60"/>

Additionally, one can move the symbol by specifyingx andy attributes in theuse tag, where I might have previously usedtransform=translate(50,60). Three cheers for two-way knowledge exchange in Wikimedia!

I've beenexperimenting 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 atthe 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 makingFile: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 atriangulated irregular network, but that will need to wait for another day...

As inlast 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 anorphan. Looks like I'm not the only one who finds it annoying!

I was delighted to learn fromCharles Matthews thatWikimedia Commons now allows upload of 3D files, in the form ofSTL – 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 onhttp://viewstl.com . Let's see if they're fixable...

• 
  My very first STL, modellinga solid that rolls in a very curious manner
• 
  Visualising thediamond cubic lattice, hard to picture in 2D
• 
  One of my favourite shapes, with a frame to match
• 
  Thistetrix collection's 87 380 facets don't seem to tax modern computers
• 
  From my biggest to my smallest STL, theCsászár polyhedron is sheer elegance
• 
  TheSzilassi polyhedron is another beauty – though notthe 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 curiousYoshimoto Cube
• 
  Another model for 3D-printing: 6 panels slot together around a cubic hole to form arhombic triacontahedron
• 
  The first of my models of celestial bodies with exaggerated terrain: Mars
• 
  The moon
• 
  Earth without liquid water (but with ice caps)

I had the good fortune to visit theGriffith Observatory and had a personalised explanation of itsFoucault 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 asidereal 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!

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,

• Itsupload.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:

<tablestyle="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

<tablestyle="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 inthese thumbnails:

{{source thumb|FILENAME|LANG}}

I've finally found out how to have "inline" tooltips in an SVG which appear when hovered, yet allowfill andstroke opacity to be fully controlled on hover: set the unhoveredfont-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 bothstroke andfill 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 thelink 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.

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

This year'sOpen Cambridge saw the public opening ofEddington, the centre of theNorth West Cambridge Development.

Being the resident village busybody, I couldn't help visiting, joining some tours and capturing the sights. My favourite wasFata 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 createdan article on Eddington itself, I createdNorth West Cambridge Development andnominated it forDid 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...

I noticed that afull 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 ofone 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) onfile:one_million_dots_1080p.png, a bit of tweaking to make the graphic symmetrical, and ta-da – 1 million black dots in full HD!

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!୯ ͡°  ͜১͡° ੭

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.

User:Ethanmayersweet suggested that I updatemy unexpectedly popular graphic and I thought it would be the perfect opportunity to update the map to anazimuthal 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 uploadedFile: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 wrotethis 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?

After hearing about theMenger sponge ata talk about fractals in this year'sCambridge Science Festival, I challenged my companion to guess what a cross-section along aspace diagonal and passing through itscentroid looks like.

Back home, it occurred to me that I could use theconstructive solid geometry feature ofPOV-Ray to automatically generate cross-sections, and decided to make an animation of the cross-sections along the space diagonal similar tohttp://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-4tetrix 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 inXnView's batch mode. Good thing I decided to turn offanti-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:

#declareHOLE1=box{<1/6,1/6,0.50001>,<-1/6,-1/6,-0.50001>}#declareHOLE2_8=union{object{HOLE1translate<1,1,0>}object{HOLE1translate<0,1,0>}object{HOLE1translate<-1,1,0>}object{HOLE1translate<-1,0,0>}object{HOLE1translate<-1,-1,0>}object{HOLE1translate<0,-1,0>}object{HOLE1translate<1,-1,0>}object{HOLE1translate<1,0,0>}scale<1/3,1/3,1>}#declareHOLE3_8=union{object{HOLE2_8translate<1,1,0>}object{HOLE2_8translate<0,1,0>}object{HOLE2_8translate<-1,1,0>}object{HOLE2_8translate<-1,0,0>}object{HOLE2_8translate<-1,-1,0>}object{HOLE2_8translate<0,-1,0>}object{HOLE2_8translate<1,-1,0>}object{HOLE2_8translate<1,0,0>}scale<1/3,1/3,1>}#declareHOLE4_8=union{object{HOLE3_8translate<1,1,0>}object{HOLE3_8translate<0,1,0>}object{HOLE3_8translate<-1,1,0>}object{HOLE3_8translate<-1,0,0>}object{HOLE3_8translate<-1,-1,0>}object{HOLE3_8translate<0,-1,0>}object{HOLE3_8translate<1,-1,0>}object{HOLE3_8translate<1,0,0>}scale<1/3,1/3,1>}#declareHOLE4=union{object{HOLE1}object{HOLE2_8}object{HOLE3_8}object{HOLE4_8}}#declareSPONGE4=difference{box{<0.5,0.5,0.5>,<-0.5,-0.5,-0.5>}union{object{HOLE4}object{HOLE4rotate<0,90,0>}object{HOLE4rotate<90,0,0>}}}#declareCLOCK=1-2*clock;//#declare CLOCK       = 0;#declareCLOCK_PLANE=1.5*CLOCK;#declareCLOCK_ALL=-0.5*CLOCK;#debugconcat(str(CLOCK,8,3),"\n")difference{object{//cylinder { <1,1,1>, <-1,-1,-1>, 0.5 } /// check scale constantSPONGE4pigment{rgb<0.5,1,1>}}plane{<-1,-1,-1>,0translate<CLOCK_PLANE,0,0>}translate<CLOCK_ALL,CLOCK_ALL,CLOCK_ALL>rotate<0,45,degrees(-atan(1/sqrt(2)))>no_shadow}background{color1}camera{rightx*image_width/image_heightlocation<3.1,0,0>look_at<0,0,0>angle30}light_source{<0,9,0>color1parallel}light_source{<9,0,0>color2parallel}