http://www.ecs.soton.ac.uk/~ph
October,2002
Abstract. AnalgebraofpicturesisdescribedthatissuÆcientlypowerfultodenote
thestructureofawell-knownEscherwoodcut,SquareLimit.Adecompositionofthe
picturethatisreasonablyfaithfultoEscher'soriginaldesignisgiven.Thisillustrates
howasuitablychosenalgebraic specication canbebothaclear descriptionanda
practicalimplementationmethod.It alsoallows usto addresssome ofthe criteria
thatmakeagoodalgebraicdescription.
Keywords:Functionalprogramming,graphics,geometry,algebraicstyle,
architec-ture,specication.
1. Background
In1982, when theoriginal version ofthispaper (6)waswritten,
com-puters, computer science and functional programming were all a lot
less powerful than they are today. The idea that one could write an
algebraic description, embed it in a functional program, and execute
it directly was not new. But it was not then considered a practical
programmingtechnique.Nowweknowbetterandmanyexamplesexist
ofhowpracticalitcan beto simplywritedenotationsof what isto be
constructed, rather than to write algorithmic descriptions of how to
performthe construction.
A picture is an example of a complexobject that can be described
intermsofitsparts.Yetapictureneedsto berenderedonaprinteror
ascreenbyadevicethatexpectsto begiven asequenceofcommands.
Programmingthatsequenceofcommandsdirectlyismuchharderthan
havingan applicationgenerate the commandsautomatically from the
simpler, denotational description. Others have shown that it can be
practicaltodirectlyexecutedenotationsinothercomplexdomainssuch
asmusic(7),animation(3,8,11) anddocuments(9). Othershavealso
developedtheapplicationoftheseideastomorecomplexpictures(1,2,
4).It is appropriatenowto drawsome general conclusionsfrom those
Figure1. Thepicturesf, rot(f), flip(f) and rot(flip(f))
Figure2. above(f,f), beside(f,f), above(beside(f,f),f) and rot45(f)
paper (6) in order to understand this one, but for comparison that
earlierpaperis availableat theURLgiven inthereferences.
2. Basic Operations
The operations we will use to build pictures will be dened precisely
inSection5. Here we willdene them informally.The algebra we will
usewill allowus to place these pictures next to each other in frames.
The frames on which the pictures are based will be used to position
eachcomponent.Theoperationswewilldeneareamixtureofgeneral
operationsandonewhichismorespecialised,inawaythatwillbecome
clearwhenwestudy theEscherwoodcutinthenext section.
Consider thefour picturesshown in Figure1. The leftmost picture
is the outline of a letter. It is located within a frame, but we do not
considertheframetobepartofthepicture.Ratheritshowstheextent
of the picture. If we say that f denotes the leftmost picture, then we
denote by rot(f) the same picture rotated anticlockwise through a
right angle.Consequently,rot(rot(f))woulddenote thatthepicture
rotatedthroughafull180 degrees. When picturesarerotated, we will
always rotate them ina standard,anticlockwise direction.
We denote by flip(f) the picture f ipped through its vertical
centre axis. Figure 1 demonstrates the use of rot and flip. The
ab-stractionwhichwe have used,theobjectthat we arereferring to asa
picture,hascontent made up of some smaller graphicalobjects (here,
justlinesegments).Theposition,sizeand orientationofthepicture is
Figure3. SquareLimittodepth3
descriptionofpictures of thesort shown here very much simpler than
they might otherwise be. The frame in which a picture is placed will
be referredto asits locatingbox.
So far we have only used the ability to rotate and ip pictures
withintheboxuponwhichtheyarebased.Muchmoreinterestingisthe
abilityto lay these pictures next to each other in order to form more
complexpictures.Weintroducetwooperations,aboveandbeside,that
respectively place pictures adjacent to each other vertically and
hori-zontally. Theseconstructions areshown inFigure 2. Theconstruction
above(p,q)is the picture that has pin the upperhalf of its locating
box and q in the lower half. Similarly,the construction beside(p,q)
isthepicturethathaspinthelefthalfofitslocatingboxand qinthe
right half.
The rightmost picture in Figure 2 shows the most elaborate of the
operationswe willneed. Thepicturerot45(f)is shownsuperimposed
withtheoutlineofitsoriginallocatingbox.Unlikerotwhichrotatesa
pictureaboutitscentre, througharight angle,rot45rotatesa picture
Figure4. Thebasicsh
reduces the picture is size by p
2 , so that the diameter of its original
locating box lies along the top edge of the rotated picture's locating
box.ThisoperationisdenedpreciselyinSection5.Itisratherspecic
to theEscherpicture we aregoing to construct.
One nal operation over(p,q) overlays one picture p directly on
topof the other picture q, so that theboxes on which they arebased
arecollocated. We willsee examplesof thatinthe nextsection.
3. The Escher Woodcut - Square Limit
Escher'spictureofinterlockingshesisreproducedinoutlineinFigure
3.Theoriginal isof coursemore elaborate intermsof its shadingand
various other artistic properties. The structureis all that interests us
here.Eachshinthepicturehasthesame basicshape,reorientedand
resizedinsucha waythatit neatlyinterlockswithits neighbours.
Es-chermademanysuchpictures.Thispictureisofreasonablecomplexity
compared with his others and presents a signicant challenge. It was
chosen because the book in which it is reproduced (10) also contains
some of Escher's early drafts and sketches for it, and in particular a
geometricpresentationof thetessellation he wasplanningto use.
Intheoriginal1982 paperIchoseto startbuildingthepicturefrom
smallerparts, rather thanfrom a wholesh. The reasons for thiswill
be discussed in Section 4. It seems clear that Escher did not do this,
again forreasons I will discussin that Section. Rather, he designed a
single sh with the necessary interlocking features that establish the
tilingpropertythatthepicturerequires.Therearelessonshereforhow
wethinkaboutstructuringcomputations and how wedesignsoftware.
Theselessonswillbe returnedto inSection 6.
ThebasicshisshowninFigure4.Theshisdrawninsidealocating
boxwhosecorners have beenindicatedwithchevrons (notpart of the
picture).
Supposethatfishdenotesthebasicsh.Figure5isconstructed
us-ingover(fish, rot(rot(fish))).This construction exemplies one
Figure5. Thebasicsh,twice
Figure6. Thebasicsh,threetimes.Thetilet.
thismustteachother.Asanartist,Eschermusthavespentsometime
experimentingwithdierentcurvesinorderto achievetheappearance
that he wanted. What I have done is to read o his coordinatesfrom
thehanddrawnprototypes publishedin(10).
More remarkably, three sh t together in a triangle, as in Figure
6.Theconstruction forthispictureis
t = over(fish, over(fish2, fish3))
where
fish2 = flip(rot45(fish))
fish3 = rot(rot(rot(fish2)))
Herewe seethat fish2,whichis at thetopofthepicture,is obtained
byrotatingthebasicshanticlockwisethrough45degreesusingrot45
andthen ippingit throughits verticalcentre axisusingflip. Recall
thatrot45scalesthepictureasdescribedinthepreviousSection.The
thirdshfish3isobtainedfromfish2byrotatingitclockwisethrough
aright angle,obtainedhere bymaking three anticlockwiserotations.
Figure8. quartet(u,u,u,u)
Figure9. v = cycle(rot(t))
In fact theconstruction in Figure6 gives ustherst of two square
tilesthat we willuseto construct thenal picture.We callthistilet.
Thesecondsquaretilewewillneedisu.ThistileisshowninFigure7.
Itsconstructionis
u = over(over(fish2, rot(fish2)),
over(rot(rot(fish2)), rot(rot(rot(fish2))))
Basically, we take the 45 degree rotated sh from earlier (that has
convenientlyreducedinsizeby p
2)and overlayfourcopiesof it. This
new interlocking is a third constraint on the design of the basic sh
by Escher. In fact, the constraints that we have depicted in Figures
5,6 and 7 inducelower level constraints upon the line segments that
constitute the outline of the sh. In section 4 we will show how the
outline of the sh is the same three-section line segment reproduced
fourtimes.
We begin to see how these tiles t together in Figure 8, which is
describedbyabove(beside(u,u),beside(u,u)).Infactthe
construc-tioninFigure 8uses a utilityfunctionthat wedene asfollows
quartet(p,q,r,s) = above(beside(p,q),beside(r,s))
Figure10. quartet(v,v,v,v)
cycle(p) = quartet(p, rot(p),
rot(rot(p)), rot(rot(rot(p))))
WecanseethisfunctiondeployedinFigure9.Thisisprobablytherst
construction thatbeginsto look a bit like Escher's eventual woodcut,
havinganarrangementofshthat includesresizingand reorientation.
Itdoesn't,however, quitedemonstrate alltheconstraintsinuse. That
isremediedinFigure10,whichshouldbeselfexplanatory.Nowweare
ina positionto begin buildingthe nalpicture. Theremainder of the
constructiondenesapairofequationsthatcapturetheessenceofthe
woodcut.
The constructions we are about to make were obtainedbydetailed
inspectionof Escher's originalpicture. Theyare not theonlypossible
decompositionofthatpicturebut,toacomputerscientist,theyarethe
mostobvious.
Firstweconstruct a component thatis goingto appearon theside
of the nal picture. Figs. 11 and 12 show the rst two levels of this
constructionside1 andside2.These constructionsaredened by
side1 = quartet(blank,blank,rot(t),t)
side2 = quartet(side1,side1,rot(t),t)
andassuchare specic instancesofthe generalconstruction
side[n] = quartet(side[n-1],side[n-1],rot(t),t)
whereside[0] = blank.
If we areusinga lazylanguage,wecan simplywrite
Figure11. side1 = quartet(blank,blank,rot(t),t)
Figure12. side2 = quartet(side1,side1,rot(t),t)
andrelyuponthecodethateventuallydrawsthepictureonlyreaching
anitedistanceintothisinniteobject.Itonlyneedstobuildtheparts
ofthisobjectthatarelargeenoughto bevisibleontheoutputdevice.
The second construction we needis showninFigs. 13 and 14.Here
we have the partswhich willcomprisethe cornersof thenal picture,
to depths1 and 2respectively.Theyaredened by
corner1 = quartet(blank,blank,blank,u)
corner2 = quartet(corner1,side1,rot(side1),u)
Careful inspection of these two gures will conrm that this is
in-deedtheir description.Indeed, it wasthese precise descriptionswhich
generatedthepicturesasthey appearhere.
These two equationsarespecic instancesof theequation
corner[n] = quartet(corner[n-1],side,rot(side),u)
wherewehaveassumedbothcorner[0]andside[0]areblank.Again,
alazylanguagewouldallowusto write
corner = quartet(corner,side,rot(side),u)
InordertobuildthenalpictureasshowninFigure3,weneedtobe
abletoconstructanarrangementofninetiles.Wecallthisarrangement
Figure13. corner1 = quartet(blank,blank,blank,u)
Figure14. corner2 = quartet(corner1,side1,rot(si de1) ,u)
nonet(p, q, r,
s, t, u,
v, w, x) =
above(1,2,beside(1,2,p,beside(1,1,q,r)),
above(1,1,beside(1,2,s,beside(1,1,t,u)),
beside(1,2,v,beside(1,1,w,x))))
Herewehaveusedslightlymoreelaborateversionsofaboveandbeside.
Theadditionalparameters arenumbers,mand nsay,and the
subpic-turesare arrangedin theratio m:n. The function nonetlays outits
ninearguments inthree rowsof three.
Using these constructions we can build a simple version of Square
Limit, shown in Figure 15. This takes the detail down to level 2 and
hasthedenition
squarelimit2 =
nonet(corner2, side2, rot(rot(rot(corner2))),
rot(side2),u,rot(rot(rot(side2))),
rot(corner2),rot(rot(side2)),rot(rot(corner2)))
Figure15. SquareLimittodepth2,squarelimit2
Figure17. Theoriginaltiles, p;q;r;s,makinganapproximationoftilet
Figure16showsthepatternoftrianglesinwhichtheshforsquarelimit2
arearranged. Infact, thispicturewasdrawn withthe same equations
assquarelimit2,butwiththeshsimply replacedbya triangle.
Thenalpictureissimilar,itjustusesone morelevelofdetail.It is
showninFigure3.ThegeneraldescriptionofSquareLimitistherefore
squarelimit =
nonet(corner, side, rot(rot(rot(corner))),
rot(side),u,rot(rot(rot(side))),
rot(corner),rot(rot(side)),rot(rot(corner)))
4. Other Descriptions
Inthe 1982 version of thispaper, rather thanstart with a wholesh,
fourbasic square tiles similar to those shown in Figure 17 were used.
Thetilesp, q, r, sareshowninanarragementwhichapproximately
makes up thetilet (seeFigure 6). The onlydierenceis that thesh
arenotwhole.If we also deneu=cycle(rot(q)),whereqis thetop,
right tile inFigure 17,we can nowconstruct an approximation to the
nalpicture by usingthis tand thisu, in theequations which dene
squarelimit.
The new,squarestartingtiles p, q, r, swork because thebitsof
shmissingfromtheedgesofeachtileareincludedontheedgesofthe
othertileswhichwillabutthem.Theedgeofthenishedpicturewillbe
incomplete,ofcourse,butthismaybemorefaithfultoEscher'soriginal
asit appears in (10). However, there were other reasons for choosing
these tiles, rather than a whole sh, as a starting point. Principally,
theyavoidtheneedforarotationthroughanyangleotherthanaright
angle.Thisgreatlysimpliesthecomputationandmeansthatthe1982
picture could be calculated using 16-bit xed point numbers. It also
avoids theproblemof anylineintheoutputbeingdrawn twice, which
onthegraphplottersandhighquality(dot-matrix)printerswhichwere
Figure18. Thefouridenticalsegmentswhichcomprisetheoutlineofabasicsh
FromthedraftsEschermadeofthepicture,especiallythoseinwhich
he was experimenting with the shape of the sh, his design was of a
shwhich had the necessary properties for tilingthe plane. The four
originaltilesshowninFigure 17had no part inhisthinking.
In fact,the designoftheshcan be analysedmoreclosely thanwe
have sofar attempted. Figure 18 shows thebasic shagain,
superim-posed with four copies of a linesegment which shows how its outline
ismade up.Alsosuperimposeduponthe shisa triangleto show the
path which these four line segments follow. Along the bottom of this
pictureisthebasicsegment.Thatsegmentisrepeated,rotatedthrough
aright angle,up theleft handsideof thepicture,thusmaking up the
entire left-handsideof the sh. Thesegment is repeated again,twice,
to make up the right-hand side of the sh. These two repetitions are
mirrorimagesoftheinitialsegment,whichhavebeenrotated45degrees
andreducedby p
2 .Infact,ifsisthesegmentalongthebottomofthe
pictureinFigure 18,thenthe entireoutline is generatedby
beside(rot(s),
over(s, over(rot45(flip(rot(s))),
rot(rot(rot45(flip(rot(s))))))))
Thislittlebit of geometry explainswhythe shest together asthey
do.
It also explains whythere is amysterious triangleappearinginthe
pictures throughout this paper, from Figure 5 onwards. The triangle
canbeseendistinctlyinFigure18,undertherightwingofthesh.To
disguiseitsomewhat,twoshortlineshave beenplacedunderthewing.
Thesecan beseen mostclearlyin Figures5and 6, and have probably
worried the observant reader. When thepictures are composed, these
shortlines appearto makeup extensions to thewingsof othersh, or
as something (water?) in between them. In constructing the original
woodcut, Escher used a little artistic licence and incorporated these
0
Figure19. Thebasisvectors
notalltheshinthewoodcuthaveidenticaloutlines.Infactthere are
foursh,dependingonwhethereitherofthewingshavebeenextended,
ornot.
This is a third problem which could be avoided by starting with
the tiles in Figure 17. The triangles, which are shown in Figure 17,
were actuallyeliminatedfrom these tiles inthe 1982 paperand hence
from the nal picture. Notwithstanding this visual improvement, the
construction given in this paper is to be preferred, not least because
theoriginalintention of theartist was probablyto tilethe plane with
asingle sh.
5. ImplementationIssues
Thekey conceptual idea behind FunctionalGeometry is that we have
abstracted completely from size and absolute location. Each picture
is described in terms of subpictures and their relative locations. The
implementation, on rendering the picture, must work out from this
description, the exact size and the exact location of each part of the
picture.
Wecanbestdenethisbydescribingwhatapicturedenotes.Letus
deneapictureasa functionwhichtakes threearguments,each being
two-spacevectorsandreturnsasetofgraphicalobjectsto berendered
ontheoutputdevice.ThevectorargumentsareasshowninFigure19.
Thepicturep(a,b,c)willbedrawninaboxboundedbybandc,with
itsbottomleft-handcorneratpositiona.Thischoiceofbasisvectorsis
nottheonlyone we couldhavemade,butitdoesmaketheoperations
wemustdenevery easy. Forexample
over(p;q)(a;b;c) = p(a;b;c)[q(a;b;c)
denes the fact that over(p;q) is the picture which includes all the
objects ofp withall theobjects of q.
Allthebasicoperationscan bedened inthisway.
rot45(p)(a;b;c) = p(a+(b+c)=2;(b+c)=2;(c b)=2)
which givesa precise semanticsto the operationswe have usedin the
earlier part of this paper. For completeness we dene the remaining
twooperations, whichshouldbe obvious
beside(m;n;p;q)(a;b;c)=
p(a;bm=(m+n);c)[q(a+bm=(m+n);bn=(m+n);c)
above(m;n;p;q)(a;b;c) =
p(a+cn=(m+n);b;cm=(m+n))[q(a;b;cn=(m+n))
The denitioninterms ofsets of graphicalobjects isn't quitewhat
wewantforimplementationoftherendering.Rather,wewanttodraw
each basic graphicalobject (here, just line segments) as we construct
it and rely upon the fact that it doesn't matter if we draw the same
objecttwicebecause therenderingenginewilltake care ofthat.
In fact, we want to be ableto draw these pictureseven ifthesetof
graphical objects that they denote is innite. So the implementation
willneedto implement some rulesuch as p(a;b;c) =fg, ifjb+cj<,
whereissome dimension consideredtoosmallto draw.
Ofcourse,wehaven't denedhowbasicpictures(suchastheshin
Figure4) shouldbe created.In theimplementationusedto create the
pictures in this paper, the sh is made up of about 30 bezier curves
andisimplementedasanobjectwhichcancalculatetheparametersof
thosebeziersgiventheparametersa;b;c.Byavoidingtheuseoflls,it
isnotnecessaryto be concernedwiththeorder inwhichthegraphical
objects arerendered.
6. General Considerations
The basicidea exempliedin thispaper is simple. Denotations of
ob-jects areeasier to understand thanalgorithmic descriptions of how to
buildthose objects. Here we have used a graphicalobject, the Square
Limitpicture,and shown that a certain decompositionof it is botha
cleardescriptionof itsstructure and suÆcient informationto actually
drivethe devicethat draws thepicture.
Theconsequenceofthinkingintermsofwhat objectsdenoteisthat
rot(beside(p;q)) = above(rot(q);rot(p))
flip(beside(p;q)) = beside(flip(q);flip(p))
There are many more rules of this sort. It seems there is a positive
correlation between the simplicity of the rules and the quality of the
algebraasadescriptiontool.
The operations dened above and about which we have produced
somerulesareclearlygenericinthattheywouldbegenerallyapplicable
to the construction of many pictures. Not so generic is the operation
rot45, which is almost certainly specic to the construction behind
Square Limit. The rot45 operation is not as simple as its name
sug-gestsnorasanyof theother, more generic,operations. Infact itdoes
somethingquiteodd,rotatingthepictureaboutitstoplefthandcorner,
ratherthanaboutitscentre. Theconsequenceofthisisthatitdoesn't
enjoysimplerules.Forexample,while
rot45(rot45(p)) 6= rot(p)
a more complex rule, which approximates what we might have
ex-pected,is
above(blank;rot45(rot45(p)))=
above(quartet(blank;blank;rot(p);blank);blank)
This indicatesthat two rot45s actually move thepicture p out of the
boxonwhichitisbased,intoaboxabovethat.Also,sinceeachreduces
thepictureby p
2 , theircombination actuallyhalvesthe sizeofp.
This analysis suggests that rot45 is not the kind of operation we
would include in a general algebraic language for geometry. Rather,
we would dene more fundamental operations for scaling, rotation
and translation and allow the user to dene rot45 for this specic
application.
Others have developed the applicationof these ideasto more
com-plex pictures (1, 2, 4). In particular, Chailloux and Cousineau (2),
havingrepeatedtheSquareLimitconstruction,alsodoEscher'sCircle
Limit, based on considerably more complex transformations than are
discussedhere.
Algebraicstructures,alongthese lines,havebeendevelopedfor
ulatedwithlanguagessuchasXSLT,whichareessentiallydeclarative,
as Kay (9) explains. The general considerations which algebraic
ap-proachesrequiredoseemtoscaleuptorealisticapplications,especially
wheretheapplication domainisfairlyuniform.
7. Conclusions
HavingdeconstructedEscher'swoodcutSquareLimit,asillustratedin
(10),wehavereconstructeditusingadenotationalmetaphor.In
partic-ular,wehaveviewed picturesashierarchicalcompositionsofgraphical
objects and shown how some simple operations can together give an
algebrapowerfulenough to bothdescribe what a picture denotesand
to drivean application whichcan drawthatpicture.
Thisideaisnotnew.Itwaspublishedin1982,buteven thenitwas
basedoncontemporaryviewsofwhatwasgoodpractice indeclarative
systems. Since that time, the idea has been applied to many more
complex domains and, as time has progressed, does seem to be one
whichhascome to be applicableona more practicalscale.
Whether MauritsEscherwouldapproveofthedeconstructionofhis
elegant picture is,sadly,something we can onlywonder about.
8. Acknowledgements
I am grateful to many people who have commented on earlier drafts
of this paper and made useful suggestions. These have done much to
improve thepresentation. These helpfulpeople include OlivierDanvy,
Matthew James Henderson, Jerzy Karczmarczuk, Julia Lawall,
Hen-ningKorsholmRohde andPeng Fei Xue.Manythanks.
ThepicturesweredrawnbyaJavaprogramwhichgeneratedpostscript
commandsdirectly. The Java was written in a functional style (using
static methods) so that the denitions which were executed were
ex-actlyas they appearin thepaper, withthe addition of theoccasional
oftheACMSIGPLANWorkshoponMLanditsApplications(1992)
Elliott,ConalandPaulHudak. FunctionalReactiveAnimation.Proceedingsofthe
ACM SIGPLAN International Conference onFunctional Programming (ICFP
'97)
Finne, Sigbjorn and Simon Peyton-Jones. Pictures: A simple structured graphics
model. InGlasgowFunctionalProgrammingWorkshop,Ullapool,(July1995)
Henderson, Peter. Functional Programming - Application and Implementation.
Prentice-Hall,(1980)
Henderson, Peter. Functional Geometry. Proceedings of 1982 ACM
Sym-posium on Lisp and Funtional Programming, 179{187, ACM, (1982) (see
http://www.ecs.soton.ac.uk/~ph/funcgeo.pdf)
Hudak,Paul, TomMakucevich,SyamGaddeand BoWhong. Haskore Music
No-tation-AnAlgebraofMusic.JournalofFunctionalProgramming,vol.6,no.3,
465{483,(1996)
Hudak,Paul. Modular Domain SpecicLanguages and Tools. Proceedings:Fifth
InternationalConferenceonSoftwareReuse,IEEEComputerSocietyPress,134{
142, (1998)
Kay, M. XSLT Programmer's Reference. 2nd Ed, Wrox Press Ltd., ISBN:
1861005067, (April2001)
Locher J.L.(ed) The Worldof M.C.Escher. Harry N.AbrahamsInc., New York,
ISBN810901012,(1971)
Thompson,Simon.A FunctionalReactiveAnimationofaLiftusingFran. Journal
