APL Wiki logo: Difference between revisions
Jump to navigation
Jump to search
→Making tags
Miraheze>Adám Brudzewsky |
Miraheze>Adám Brudzewsky |
||
| Line 202: | Line 202: | ||
E.g. the second row in the first layer is <math>(x,y)=(0,9)</math>. <source lang=apl inline>↑</source> is the [[Take]] function, that is, it takes the first ''N'' cells of an array, and a negative value simply means taking from the rear. | E.g. the second row in the first layer is <math>(x,y)=(0,9)</math>. <source lang=apl inline>↑</source> is the [[Take]] function, that is, it takes the first ''N'' cells of an array, and a negative value simply means taking from the rear. | ||
== Making <code><circle/></code> tags == | |||
To help us create our SVG <code><circle/></code> tags, well set up a couple of helper functions. The first function will help us create tag attributes. | To help us create our SVG <code><circle/></code> tags, well set up a couple of helper functions. The first function will help us create tag attributes. | ||
=== Formatting attributes === | |||
APL uses a [[high minus]] (<source lang=apl inline>¯</source>), to indicate that a number is negative. This avoids confusion with the [[negate]] function <source lang=apl inline>-</source>. However, SVG uses a regular dash, so we need to change our numeric arrays into character representations (using the [[format]] function, <source lang=apl inline>⍕</source>), and [[replace]] all occurrences of the symbol: | APL uses a [[high minus]] (<source lang=apl inline>¯</source>), to indicate that a number is negative. This avoids confusion with the [[negate]] function <source lang=apl inline>-</source>. However, SVG uses a regular dash, so we need to change our numeric arrays into character representations (using the [[format]] function, <source lang=apl inline>⍕</source>), and [[replace]] all occurrences of the symbol: | ||
<source lang=apl> | <source lang=apl> | ||
| Line 220: | Line 220: | ||
test="3 -1 2 -7" | test="3 -1 2 -7" | ||
</source> | </source> | ||
=== Our first function === | |||
In the most basic form, a [[dfn]] ("dee fun") is just an expression in curly braces with <source lang=apl inline>⍺</source> and <source lang=apl inline>⍵</source> representing the left and right arguments, just like they are the leftmost and rightmost letters of the [[wikipedia:Greek alphabet]]: | In the most basic form, a [[dfn]] ("dee fun") is just an expression in curly braces with <source lang=apl inline>⍺</source> and <source lang=apl inline>⍵</source> representing the left and right arguments, just like they are the leftmost and rightmost letters of the [[wikipedia:Greek alphabet]]: | ||
<source lang=apl> | <source lang=apl> | ||
| Line 234: | Line 234: | ||
└─────────┴─────────┘ | └─────────┴─────────┘ | ||
</source> | </source> | ||
=== Flattening enclosed things and enclosing flat things === | |||
Next, we make this list of strings (each of which is actually just a character list) into a simple list with the [[enlist]] function (<source lang=apl inline>∊</source>), and use above same concatenation and rotation techniques to finalise our tag: | Next, we make this list of strings (each of which is actually just a character list) into a simple list with the [[enlist]] function (<source lang=apl inline>∊</source>), and use above same concatenation and rotation techniques to finalise our tag: | ||
<source lang=apl> | <source lang=apl> | ||
| Line 248: | Line 248: | ||
└─────────────────────────────┘ | └─────────────────────────────┘ | ||
</source> | </source> | ||
Notice that a put in <source lang=apl inline>⊂</source>) which [[enclose]]s the result. This is because I want to deal with these tags a [[scalar]] elements. | Notice that a put in <source lang=apl inline>⊂</source>) which [[enclose]]s the result. This is because I want to deal with these tags a [[scalar]] elements. Now we can create our circles (and show the first three: | ||
<source lang=apl> | <source lang=apl> | ||
3↑circles←,Circle⍤1⊢xy,r | |||
┌─────────────────────────────┬─────────────────────────────┬──────────────────────────────┐ | |||
│<circle cx="0" cy="0" r="1"/>│<circle cx="0" cy="9" r="2"/>│<circle cx="0" cy="21" r="3"/>│ | |||
└─────────────────────────────┴─────────────────────────────┴──────────────────────────────┘ | |||
</source> | </source> | ||
Here we're using <source lang=apl inline>⍤</source> again, but this time only with a single argument, so we only specify one rank — the rank of the sub-arrays we want <source lang=apl inline>Circle</source> called on. Rows are vector (list), so that's rank 1. | |||
[[Monad]]ic <source lang=apl inline>,</source> is called [[Ravel]] as it unravels an array into a vector, but unlike <source lang=apl inline>∊</source> it doesn't flatten enclosed elements. | |||
== The <code><svg></code> container == | |||
[[APL Wiki]] is a [[wikipedia:MediaWiki|MediaWiki]] which has strict requirements on the dimensions of the site logo: | |||
<source lang=apl> | |||
⊢dims←∊'width' 'height'Attr¨130 | |||
width="130" height="130" | |||
</source> | |||
Since the circles on the first row and in the first column are at position 0, we need our SVG to begin a bit further to the top left. Similarly, it needs to end a bit further to the bottom right than the last circle. How much? Well, the maximum radius (which would extend up and to the left) in the first row (and column) is: | |||
<source lang=apl> | |||
⌈/1↑r | |||
3 | |||
</source> | |||
But let's add a bit more so the circles don't touch the image edge: | |||
<source lang=apl> | <source lang=apl> | ||
⊢pad←2+⌈/1↑r | |||
5 | |||
</source> | </source> | ||
=== Taking things to a higher dimension === | |||
Finding the centres of the first and last circles with <source lang=apl inline>Circle</source> but this time with a 2-element left argument (this [[take]]s the first 1 layer and the first 1 row of that, etc.), we can find out where to begin, and the size of our image, which makes up the "viewBox" attribute: | |||
<source lang=apl> | <source lang=apl> | ||
⊢first←1 1↑locs | |||
0 0 | |||
⊢last←¯1 ¯1↑locs | |||
42 42 | |||
⊢begin←first-pad | |||
¯5 ¯5 | |||
⊢size←(last-first)+2×pad | |||
52 52 | |||
⊢viewBox←'viewBox'Attr,begin,size | |||
viewBox="-5 -5 52 52" | |||
</source> | </source> | ||
The extra ravel <source lang=apl inline>,</source> is because <source lang=apl inline>begin</source> and <source lang=apl inline>size</source> are matrices, while <source lang=apl inline>Attr</source> needs a vector. | |||
Now we construct the opening tag: | |||
<source lang=apl> | |||
⊢svg←'<svg',dims,viewBox,' xmlns="http://www.w3.org/2000/svg">' | |||
<svg width="130" height="130" viewBox="-5 -5 52 52" xmlns="http://www.w3.org/2000/svg"> | |||
</source> | |||
=== In-place modification through assignment === | |||
We can do in-place concatenations to add all the circle tags and the closing tag: | |||
<source lang=apl> | |||
svg,←∊circles | |||
100↑svg,←∊circles | |||
<circle cx="0" cy="0" r="1"/><circle cx="0" cy="9" r="2"/><circle cx="0" cy="21" r="3"/><circle cx=" | |||
svg,←'</svg>' | |||
</source> | |||
You may recognise the pattern here as [[wikipedia:augmented assignment]] from C and related programming languages. APL allows you to use any function to modify values in-place. If you are not familiar with this, then just think of <source lang=apl inline>name,←value</source> as <source lang=apl inline>name←name,value</source> (but the pass-though value is whatever is on the right of the assignment arrow). | |||
</source> | |||
== Doing something with what we made === | |||
Now we we can put the SVG data into a native (OS) file: | |||
<source lang=apl> | |||
⊢svg ⎕NPUT '/tmp/aplwiki.svg' | |||
850 | |||
</source> | |||
The result is the number of bytes written (which can vary due to line ending standards). Alternatively, flatten the svg and we can show it in an embedded HTML window: | |||
<source lang=apl> | |||
]html svg | |||
</source> | |||
[[File:)HTML rendering APL Wiki logo.png|frameless|]HTML rendering APL Wiki logo]] | |||
<div class="toccolours mw-collapsible mw-collapsed"> | |||
The function contains all the code from above. It takes a file name as argument. | |||
<div class="mw-collapsible-content"> | |||
<source lang=apl> | |||
Logo←{ | |||
r←⌊∘.+⍨0.5×4!⍨⍳5 | |||
offsets←0,+\1+⌈⌿2+/sizes | |||
indices←⍳⍴r | |||
xy←indices⌷⍤0 1⊢offsets | |||
Attr←{' ',⍺,'=',1⌽'""','¯'⎕R'-'⍕⍵} | |||
Circle←{⊂2⌽'/><circle',∊'cx' 'cy' 'r'Attr¨⍵} | |||
circles←,Circle⍤1⊢xy,r | |||
dims←∊'width' 'height'Attr¨130 | |||
pad←2+⌈/0⌷sizes | |||
first←1 1↑locs | |||
last←¯1 ¯1↑locs | |||
begin←first-pad | |||
size←(last-first)+2×pad | |||
viewBox←'viewBox'Attr,begin,size | |||
svg←⊂'<svg',dims,viewBox,' xmlns="http://www.w3.org/2000/svg">' | |||
svg,←circles,⊂'</svg>' | |||
svg ⎕NPUT ⍵ | |||
} | |||
</source> | |||
</div> | |||
</div> | |||
== References == | == References == | ||
<references /> | <references /> | ||