Unit4:Transforms

Lesson:Overview
[Drawsomesimpleobjectandtranslate,rotate,andscaleit,andsomethingelse]
1
InEnglishthewordtransformisaverbandmeansadramaticchange,suchasIsawthecube
transformintoaunicorn.Imgoingtousethemoremathematicaldefinition,wheretransformis
anoun.Atransformisanoperationthatchangestheposition,orientation,orsizeandshapeof
anobject.Transformsareakeypartof3Dcomputergraphics.
IntheselessonsIllbeexplaininghowtransformswork.Youprobablydidntrealizeit,butyouve
alreadybeenusingtransformsinafewofthepreviousexercises.Wheneveryousettheposition
ofanobjectyouwereusingatypeoftransformcalledatranslation.
[startrunningdemo,justletitrun
http://mrdoob.github.com/three.js/examples/webgl_geometry_hierarchy2.html]
Weusetransformswheneverweanimateanything:objects,lights,orcameras.Weregoingto
spendafairbitoftimeontransforms,sincetheyallowustodosomuch.
Thestudyoftransformsforcomputergraphicsisassociatedwiththefieldoflinearalgebra.This
fieldisconcernedwithvectorspaces,andisusuallyconsideredaprerequisiteforanycomputer
graphicsprogrammingcourse.Ifyouknowabitaboutlinearalgebra,greathavingadeeperand
widerunderstandingofthesubjectwillhelp.However,basiccomputergraphicsneedsjustafew
smallbitsoftheorytogetthingsgoing.Mygoalintheselessonsaheadistoteachyouthebasic
toolsyoullneedtoquicklyandeffectivelybeabletocontrolyourvirtualworld.
2
[AdditionalCourseMaterials:Thedemorunninginthislessonis
http://mrdoob.github.com/three.js/examples/webgl_geometry_hierarchy2.html]
Lesson:PointandVectorOperations
[drawpointandvector]
Apointisaposition,andavectordescribesamotion.Wecancombinepointsandvectorsin
varioususefulwaysbyaddingorsubtractingtheircoordinatesfromoneanother.
[diagram]
Tostartwith,ifyousubtractthelocationofpointAfrompointB,yougetavectordescribinghow
togetfrompointAtoB.SoBA=(BxAx,ByAy,BzAz)=V
[makethevectorsignoverallvectors!]
BA=(BxAx,ByAy,BzAz)=V
Thereverseholdstrue:A+V=B
A+V=B
Whilewecansubtractpointstogetavector,oursystemdoesn'tproduceanythinggeometrically
meaningfulifyouaddpointstogether.
3
[drawvectoraddition]
Wecanaddandsubtractvectors.Forexample,S+T=U.
S+T=U
Andwecanreversetheprocessagain,eitherway:UT=S
[negations]
UT=S
andUS=T
US=T
Onewaytothinkaboutvectorsubtractionisthatyoureinsteadaddingavectorgoingthe
oppositedirection,asshownhere.
Theotherthingcommonlydonewithvectorsandpointsistomultiplythembyascalar,thatis,a
number.Multiplyingavectorbyascalarisclearenough:youwanttodescribemovingfurtherina
givendirection.Ifyoumultiplyby1,youreversethevectorsdirection.Multiplybyadifferent
negativenumberandyoureversethedirectionandchangehowfartomove.
Multiplyingapointbyanumberisawaytomakeanobjectlargerorsmaller.Thistypeof
operation,calledscaling,welldiscussindetaillater.
CoordinateValues
[CENTERitgiveroomtotheleft.drawearth,sun,galaxy]
4

Pointsandvectorsdontrequireanynumberstobeassociatedwiththem.Forexample,Ican
saydefineavectorfromtheAndromedaGalaxytoChicago.Thatvectornowexists,butdoesnt
haveanycoordinatesuntilIdefineaframeofreferenceofsomesort.
[drawreferenceframeforearth]

Icouldask,whatarethevectorscoordinatesintermsoftheEarthslatitude,longitude,and
altitude.Thatgivesonesetofcoordinates,thoughonesthatchangeeverysecondastheearth
rotates.
[drawsunref]
5
OrIcouldsaywhatarethecoordinatesintermsofthesunslocationandtheearthspath?and
getcoordinatesthatchangemoreslowly.
[addcoordinatevalueandnumbers]
Wheneverweassignapointorvectoracoordinatevalue,itsalwayswithrespecttosome
6
frameofreferencewevedefined.
[addworldspacefigure]
Incomputergraphics,weusuallytalkaboutthelocationandmovementofobjects,lights,and
camerasintermsofworldspace.Thisframeofreferenceisusuallyrighthanded.Youcan
defineunitsforitifyoulike,suchas1unitequals1meter,oritcanbeunitlessiftheresnoneed
forthem.
Question:PointandVectorSum
Inworldspacecoordinates,given
7
[leaveroomatbottomformetowritetheanswer,inthenextvideo]
Pisapoint(7,4,14)
Eisavector(4,19,18)
Sisavector(5,6,10)
WhatisthenewlocationofpointQ=P+ES
PointQisat______,_______,______
Answer
Theequationis:
[writetotherightofthequestion]
Q=(7,4,14)+(4,19,18)(5,6,10)
WhenIdovectormath,Idontnotlikedoublenegatives,soIusuallyfoldthisminussignintothe
coordinatesthemselves:
Q=(7,4,14)+(4,19,18)+(5,6,10)=(6,9,42)
[injoke6*9=42
http://en.wikipedia.org/wiki/Answer_to_The_Ultimate_Question_of_Life,_the_Universe,_and_Ever
ything#Answer_to_the_Ultimate_Question_of_Life.2C_the_Universe.2C_and_Everything_.2842.
29]
Question:VectorOperation
[Gotodocumentationhttp://mrdoob.github.com/three.js/docs/55/#Reference/Math/Vector3and
slowlyscrollthroughwhiletalking]
8
Three.jshasmanyvectoroperationsavailable.Seethelinktothedocumentation,whichisgiven
intheadditionalcoursematerials
http://mrdoob.github.com/three.js/docs/55/#Reference/Math/Vector3.
FortheVector3class,whichmethodchangesavectorsothatitpointsthesamedirectionbutit
hasalengthofone?Heresahint:thisoperationwasusedtomakesurfacenormalsandthe
lightdirectionvectoreachbeoneunitlong.
Vector3.________()
Answer
9
Themethodsnameisnormalize.
Notethatthismethodchangesthevectoritself,inplace.Somelibrarieswillreturnaseparate,
new,normalizedvectorandleavetheoriginalvectoralone.
Lesson:Translation
Translationisjustawaytosaymovesomethingtoanewposition.Infact,inthree.jsweve
beenusingtranslationforpositioningpartsofthedrinkingbirdmodel.
Three.jshastranslationandothertransformsbuiltintoeveryobject.Inthiscodeweremoving
thecenterofthespheretotheposition(0,540,0),whichisavector.Thatis,anypointonthe
sphereisfirsttobemovedbythisvectortoanewposition,thenisrendered.
Thiscodedoesthesamething:
[writebelow(0,160,0)(0,390,0)]
Itsprettyobviousthatthisycoordinatecouldbethesumorproductofanysetofnumbers.My
pointhereisthataddingvaluestogetherlikethisisequivalenttoaddingthecoordinatesof
vectors.Sohereavector(0,160,0)andavector(0,390,0)areaddedtogethertoget(0,540,0).
Translationscanbetreatedsomewhatlikenumbersinthisrespect.Youcanaddthemtogether
inanyorderandyoullobtainafinaltranslationvectorthatsumsupallthetranslationsandtells
youthefinalposition.
10
Lesson:Rotation
Three.jsalsohassomebuiltinsupportforobjectrotation.Thecallislikethis:
YoucanspecifyX,Y,orZfortheaxisofrotation.Theobjectwillrotatearounditscenteralong
thataxis,inacounterclockwisedirection.Rememberthatwereusingarighthandedcoordinate
system,sotherighthandruleshowsusthedirectionoftheaxisanddirectionofrotation.
[gesturewithhandonscreentherighthandrule]
Theangleisspecifiedinradians,whichcomputerslike.Asahuman,Ilikedegrees,sohereIm
specifying70degrees,thenconvertingthisnumbertoradiansbymultiplyingbypiover180.
[XYZsystemandacubecentered,showrotationdirection.]
HereyoucanseethedirectioniscounterclockwiseifyouweretopointtheXaxistowardsyou.A
waytorememberthisdirectionistherighthandrule.
11
[Puthandinframe,pointingthumbintoscreenalongX]
Pointyourthumbalongtheaxisandtherotationanglewillwrapinthedirectionofyourfingers.
Thisisthedirectionofrotation.
Exercise:RotateaBlock
[putthisimagetoleft(loadthesolutionbelowinadvanceandturnofflayer,sothatwecanthe
themarginsright.]
Youllstartwithaprogramthatgivesamodellikethis.
NoticethattheX,Y,andZaxesareshown,givenasthecolorsred,green,andblue,respectively
[gesture].
Thinkofthisasaclockhand,sortof.Itpointsto12and6oclockcurrently.Wellfixthatlater.
Rotatethehandoftheclocksothatitpointsto2and8oclock,asshownhere.
[addthisonetorightoforiginalimage]
12
[exerciseisathttp://www.realtimerendering.com/udacity/?load=unit4/unit4rotation_exercise.js]
Answer
[solutionisat*redacted*]
[showansweraboveandthenaddinformationthepicturebelowisabitoutofsync,butIllbe
writingontopofthecorrectone.]
13
Thethreeelementsyoudneedtodetermineare:
[writejustleftcolumn,thendrawninbitsofinfoasItalk,torightofsolutionimage]
axis Y
angleofrotation 60 120
signofangle +
Thegreenaxisistheonewewanttorotatearound,andthisistheYaxis.
Thereare360degreesinacircle,wewanttorotate2/12thsofthewayaroundthiscircle,so
thats60degrees.
Wealsoneedtorotateinanegativedirection,sincethepositivedirectioniscounterclockwise.
Thisinformationcanbesavedinalineofcodelikethis.
Sincewecanttellwhichendiswhich,wecouldinsteadrotate120degreescounterclockwise
andgetthesameanswer,whichwouldletusputinapositiveangle.
Question:NameThatObject.
14
Yousawthehandrotatefromonepositiontoanother.Sayyourotatedthehandfrom0to360
degrees.Whatsortofvolumewouldithavesweptthrough?Thatis,ifyoumadeamillionhands,
eachoneataslightlydifferentangle,whatwouldtheyform?
()Asphere
()Adisc
()Ahemisphere
()Adoughnut
Answer
15
Theanswerisadiscshapedvolume,aprettyflatcylinder.Whateveraxisyourotatearound,
eachpointwilltraceoutacircleperpendiculartothisaxis,withacenterattheorigin.
Itsusefultothinkabouttheaxisofrotationthisway.Forexample,ifyouhavealocationand
wanttorotateittoanotherlocation,findthecirclethathasitscenterattheoriginandcontains
thesetwopoints.Thecirclescorrespondingaxisistheonetorotatearound.
Lesson:EulerAngles
[Labeleachunderneath,asshown:pitch/xroll,yaw/head/yroll,roll/zroll.Putxroll,etc.in
differentcolorbeneath]
pitch yaw/head roll
xroll yroll zroll
16
Noticethattherearethreerotationanglesonthethree.jsobject.YoucanrotatearoundtheX,Y,
orZaxis,alltogether.Ifyourecontrollingaplane,theXrotationisknownasthepitchangle,
sinceitpitchestheplaneupanddown.
[usepentogesture,aligningitwiththeplanesbody.Betteryet,makealittleplaneoutofapen
andsomepaperanduseit.]
TheYisknownastheyaworheaddirection,sincethatswheretheplaneishead.Zistheroll,
howmuchyourerotatingalongtheaxisoftheplaneitself.Ifyoureusingtheseanglesinanother
context,theyresometimescalledthexroll,yroll,andzroll.
17
LeonhardEulere,2.71828...isknownasEulersnumber.Invented symbol.
TheseanglesarecalledEulerangleswhenusedtogetherinthisway.Theyarenamedafter
18
LeonhardEuler,aSwissmathematicianandphysicistwholivedinthe18thcentury.Hewasone
ofthemostprolificmathematiciansofalltime.Ifyouhaveeverrunacrossthenumbere,thats
calledEulersnumber.Eulerinventedusingthesigmasignforsummation.Justlistingouthis
accomplishmentswouldtakeawholeunitatleast,butyougettheidea.
[starttorundemoofEuleranglesinaction:
http://www.realtimerendering.com/udacity/?load=demo/unit4euler_angles.jsthisairplanecould
getremadeforsure,rightnowitlookslikeaUAVdrone,whichdoesnthavethefriendliest
connotations!]
Inthree.jstherotationsareappliedtothemodelintheorderZ,Y,andX.Ishouldmentionthat
thisordercanbedifferentindifferentapplications.Forexample,theorderZ,X,Zisseenin
robotics.
Whathappensifyourotatearoundtwoormoreoftheseaxes?Theshortansweristhatthe
frameofreferencechangesforeachrotation.Thisisactuallyeasiertoseethantoexplain.
[rundemowhiletalkingthatllbefun...]
HereImchangingtheXrotation,andyoucanseethattheplanepitchesupanddown.Now
applyingtheYrotation,noticethatwerenotrotatingaroundtheworldsYaxis,butratheraround
aplanethatisdefinedbytheXrotation.Inotherwords,theYrotationisappliedwithrespectto
19
theplanesframeofreference,nottheworlds.Infact,allrotationsareappliedwithrespecttothe
plane.TheinitialXrotationjusthappenedtobealignedwiththeworld.
TheZrotationisalsoclearlychangingwithrespecttotheplanesorientation,rollingalongits
axis.
Euleranglesarehandyforflightsimulators,roboticsapplications,andevenmobileapplications,
astheycanbeusedtodescribetheorientationofthemobiledeviceitself.
However,Euleranglesalsocanrunintolimitations,suchastheproblemofgimballock.For
example,sayIsettheYangleto90degrees.YoucannowseethattheXrotationandZrotation
haveexactlythesameeffect.Wevelostadegreeoffreedomundertheseconditions,limiting
howwecanmoveawayfromthisorientation.
[Eulerangledemoputonscreen:
http://www.realtimerendering.com/udacity/?load=demo/unit4euler_angles.js]
IencourageyoutoplaywiththeEulerAnglesdemothatfollowsandgetafeelforthestrengths
andlimitationsofthismethodofsettingrotations.DefinitelytrysettingtheYangletoabout90
degreestoseegimballockinaction.
[AdditionalCourseInformation:TheresalotmoreaboutEuleranglesonWikipedia,
http://en.wikipedia.org/wiki/Euler_angle.IfyouwanttoplaywithEuleranglesmoreandseehow
20
theyaffectvariousobjects,youmighttrythethree.jsinteractiveeditor
http://mrdoob.github.com/three.js/editor/TheEulerquoteisfromhere
http://en.wikipedia.org/wiki/Leonhard_Euler]
Demo:EulerAngles
[demoonscreen:http://www.realtimerendering.com/udacity/?load=demo/unit4euler_angles.js]
Lesson:Scaling
[translate,rotate,scale
rigidbody
]
Toscalesomethingistomakeitlargerorsmaller.Thisoperationissomewhatdifferentthan
translationandrotation.Whenwetranslateorrotateanobject,wedontchangeitsshapeor
volume.Thesetwooperationsarecalledrigidbodytransforms.
Thenamerigidbodyisjustwhatitsays:ifyouhaveanobjectandapplyanynumberof
rotationsandtranslationstoit,youwontchangeitsshape.Itsasiftheobjectismadeoutof
something,well,rigid,andwillkeepitsform.
Scalingdoeschangeanobjectsoverallsize,soisnotarigidbodytransform.
[drawballoonand3xballoon]
21
Scalinginthree.jsissimpleenough.Justastheresatranslationandrotationparameteronthe
object,thereisalsoascalingparameter.
Heresthecodefortomakeaballoonobject3timesaslargeasitwasbefore.Notethat,unlike
reallife,thismakestheballoon3timeslargerinallways:thethicknessoftheskin,thepart
whereyousealitoff,andsoon.Likerotation,scalingisdonewithrespecttoanorigin.Sincethe
valveoftheballoonisattheorigin,thevalvewillstaystillandtheballoonwillexpandupwards.

[drawcubesquishedvertically]
22
Infact,youcanscaleanobjectdifferentlyalongeachofthethreeaxes,X,Y,andZ.Thiscodeis
scalingtheobjectalongtheYaxisbutnottheothertwo.Anumberlessthan1meansthatyoure
makingtheobjectsmaller.Thescaleshownherehastheeffectofcompressingitalongthis
axis.
Whenyouscaleanobjectthesameinalldirections,thisiscalleduniformscaling.Ifthescale
variesitscallednonuniformscaling.Uniformscalingdoesnotchangeanyangleswithinthe
modelitself.Nonuniformscalingcanmodifyanglesinotherwords,theshapeofthemodelitself
ischanged.
Exercise:ScaleaSphere
23
Iwanttoaddanotherindicatortomywatchlikeobject.Ivestartedbyputtingamagentasphere
inthescene,ofradius10.Ivepositioneditcorrectly,butitsnotlookingatalllikeahand.
Yourjobistostretchandsquishthissphereintosomethingthatlookskindoflikeaclockhand,
butcenteredattheoriginliketheotherhand.Iwantthehandtobe
hand:60unitslong
4unitshighandwide
Usethescaleparametertomodifythesphere.Onceyouveproperlyscaledthissortofanhour
hand,rotateitsothatitpointsat11and5oclock.
24
Whenyouredonethingsshouldlooklikethis.
[exerciseathttp://www.realtimerendering.com/udacity/?load=unit4/unit4scale_exercise.js]
Answer
[solutionat*redacted*]
Theaxistostretchalongisred,whichistheXaxis.
Theonetrickybitistorealizeasphereofradius10is20unitsacross.Ifwewanttogofrom20
to60units,thescalealongtheXaxisneedstobemultipliedby3.Thatis,60dividedby20gives
3.
Togofrom20unitsto4units,theothertwoaxesmustbemultipliedby0.2.
Fortherotation,wedoasbefore,rotatingaroundtheYaxis.30degreescorrespondstoone
hourofmovement.
25
Lesson:Translation,Rotation,andScale
Uptothispointwehavebeenmostlyignoringtheorderofoperations.Thatis,wevebeenmerrily
performingtranslations,rotations,andscaleswithoutworryingaboutwhetheroneneedstobe
donebeforetheother.Afterall,wefoundthattranslationscanbedoneinanyorderandthese
stilladduptoasingletranslation.Whatcouldgowrong?
[listorderbelowhere:scale,rotate,translate]
Theansweris,plenty.Ordermatterswhenrotationsorscalesareinvolved.Three.jsusesthe
followingordertoapplythetransformsonanobject:
scale,rotate,translate
varsphere=newTHREE.Mesh(
newTHREE.SphereGeometry(10,32,16),hourHandMaterial)
sphere.scale.x=3.0 //60/(2*radius10)>3
sphere.scale.y=0.2 //4/(2*radius10)>0.2
sphere.scale.z=0.2
sphere.rotation.y=30*Math.PI/180
sphere.position.y=18 //movethehandabovetheotherhand
Inthescalingexercisethree.jsfirstscaledtheclockhandmadeoutofasphere,thenrotateditto
position.Finally,itpositionedthishandtobeabovetheotherhand.Itdoesntmatterwhatorder
yousettheseparametersthree.jsalwaysevaluatesthemintheorderscale,rotation,position.
Thisisthedefaultbecauseit'softentheeasiestwaytoproducetheresultsyouwant.Ifyouhave
somethingspecialinmind,youmayfinditbesttotransforminadifferentorder.That's
possible,andinfactwe'lllaterseehowweneedtouseadifferentordertomakeourclock
examplelookreallygood.Fornow,though,we'llstickwithscaling,thenrotation,then
translation,inthatorder.
26
Letsseewhatwouldhappeniftheorderofrotationandscalingwerereversed.Thatis,firstwed
rotate,thenwedscale.
[madewithhttp://www.realtimerendering.com/udacity/?load=demo/unit4rotate_then_scale.js]
Forourclockexercise,theresultwouldlooklikethis.Therotationseemstohavehadnoeffect!
[drawsphere,rotatedsphere,stretchedsphere]
27
Thinkaboutwhattheorderofoperationsactuallydoestotheobject.Firstwerotatethesphere.
Thishaslittleeffectonwhatweseeonthescreenaspherelooksprettymuchthesamefrom
anyangle.Sobydoingtherotationfirst,weveessentiallylostitseffect.Stretchingthesphere
afterwardgivesustheshapewewant,buttherotationsalreadybeendone.
AtthispointIshouldshowyouagreatprogramforexperimentation.Seetheadditionalcourse
materialsforapointertothe
[AdditionalCoursematerials:Thethree.jsinteractivesceneeditorisat
http://mrdoob.github.com/three.js/editor/.Firstdefineadirectionallight,thenaddanobjecttothe
scene.]
Exercise:BuildaSnowman
Letsbuildasnowmanusingrotationandtranslation.Ididthefirstpart,stackingupthesnow.
28
Yourjobistopositionthepolethroughthesnowmanandgivehimarms.Thecenterofthepole
shouldbeplaced50unitsabovetheground.Whenyouredoneyoushouldseesomethinglike
this.
[Exerciseathttp://www.realtimerendering.com/udacity/?load=unit4/unit4snowman_exercise.js]
Answer
[Solutionat*redacted*]
[Keepsolutionimageon?]
TheansweristhatyourotatethepoletobehorizontalbyrotatingitalongtheXaxis90degrees,
thenmoveitup50unitsalongtheYaxis.
29
Lesson:Rotate,thenTranslate
[Imagegeneratedbyunit4snowman_half_bad.jsthestudentswillnotusethisprogramatall]
Wesawearlierhowscaling,thenrotatingisoftenthemostconvenientorder.Withoursnowman
thearmswerepositionedbyrotating,thentranslating.Heresthestickwithoutanytransformson
it.Ivemadethesnowmantransparentandremovedthegroundplanesowecanseethesticks
position.Itsactuallyinsidethesnowman,halfwaythroughtheground.Wheneveryoucreate
mostgeometricobjectsinthree.jstheobjectiscenteredaroundtheorigin.
30
TherotationalongtheXaxisputthestickintoitsproperorientation.Thenthetranslationmovedit
upwardsinworldcoordinatestotheproperlocation.
Letsseewhatwouldhappenifwefirsttranslated,thenrotated.
31
Firstwemovethestickupwards50units.Thecenterofthestickisnowinplaceinthemiddleof
thebodysofar,sogood.
32
[Generatedbyunit4snowman_whole_bad.jsnotaprogramthestudentwilluse.]
Nowifwerotatethestickafterpositioningit,wesuddenlyseeitlyingontheground.What
happened?
Theproblemisthatrotationtakesplacewithrespecttotheorigin.Inthefirststepwemovedour
stickupabovetheorigin.Inthesecondwerotatedthestick,butitrotatedaroundtheorigin.
[Drawsideviews,USELAYERSFOREACHELEMENT:stickinplacestickmovingupwards
soitscenterisat50unitsabovestickrotatingtoitsfinalposition.Labeleach!]
33
34
Letswatchthisdisasterinslowmotion.Thestickstartscenteredattheorigin.Wemoveit
upwards50units.Nowitscenterisattherightheight.However,whenwethenapplyarotation,
theobjectrotatesaroundtheorigindownhereinsteadofrotatingarounditscenter.
Anotherwaytothinkaboutitisthattranslatinganobjectmovesitscenter.Youremovingthe
objectup.Relativetothestick,youremovingthepointitwillrotatearounddown.
Weveestablishedthatscalingbeforerotatingisusuallywhatwewant,androtatingbefore
translatingisalsogenerallymoreuseful.Thisiswhythree.jsusesthisorder:scale,rotate,
35
translate,whendealingwithasingleobject.
Question:HowToPositionaClockHand
[drawasimpleclockface,circle,hourpoints,andasinglehandputhandintwopositions.]
Thinkaboutourboxyclockhand.Wewantittorotatearoundsomethingelsethanthecenter
pointofthehanditselfwewantittorotatearoundtheaxisthroughcenteroftheclockface.One
endofthehandwantstobeneartheorigin.
Whatstheorderofoperationsthatwillworkandissimplesttouse?
()Rotate,thentranslate
()Translate,thenrotate
()Scale,rotate,translate
()Translate,rotate,translate
Answer
Thefirstandthirdanswersarehowthree.jsnormallyperformsitsoperations:scale,rotate,
translate.However,thisorderdoesntworkfortheclockhand:weinfactwanttotranslateto
positionfirst.Sothree.jssbasicmethodswontwork.
Thefourthanswerwillwork,butitsnotthesimplesttouse.Thesecondtranslationisnot
needed.
Thesecondansweroftranslate,thenrotateiscorrect.Wewanttotranslatetheclockhandso
thatthepointwerotatearoundistowardstheendofthehand.Oncetheobjectistranslatedto
thisposition,wecancorrectlyrotatearounditsorigininasensibleway.
Lesson:Object3D
Weveseenthatthree.jscanteasilyletuspositionandthenrotatethehandofaclockinplace.
Theproblemisthatthree.jsrotates,thenpositions,whenwedliketodotheseintheopposite
order.
Onesimplesolutionthatthree.jsprovidesistouseObject3Dtomakeanewobjectthat
containsourclockhand.Heresthecodeforhowtodothisforaclockhand:
36
WhatishappeninghereisthattheblockisnestedinsidetheclockHandobject.Thetranslation
movestheblocksothatoneendisoverthecenteroftheclockface,sothatthehandwillrotate
aroundtheclockproperly.ByputtingthisobjectintotheclockHand,ImsayingIwanttousethe
blockinitscurrentposition.Icanthenapplyanadditionalscale,rotate,andtranslate.Inthiscase
Ijustwanttorotate.Thefinallineofcodeaddstheclockhandobjecttothescene.
ThatsonewaytolookatObject3D:itaddsmoretransformsintothelistthatyoucanthenuse.
Wenowhavesomesixtransformsthatwecouldsetinthissystem.HereIvewrittenitout:
scaleblock
rotateblock
translateblock
createclockhandfromblock
scaleclockhand
rotateclockhand
translateclockhand
37
Heresamorecompactwaytowriteouttheorderoftransforms:
ThRhShTbRbSbO
<
[thatis,drawarrowunderneathshowingorder]
Thislooksabitcrazy,Iveputtheorderofthetransformsfromrighttoleft.Theresareasonfor
that,andwelltalkaboutitwhenwegettomatrices.Fornow,justbelievemethatthisishow
mostcomputergraphicstextsshowaseriesoftransforms.
Oistheobjectweretransforming,whichinthiscasehappenstobeabox.Readingfromrightto
left,weapplytheboxsscale,rotation,andtranslation.ByinsertinganObject3Dinourcode,we
getanadditionalthreetransformswecanapplyinturn.Thatis,wecanusetheclockhands
scale,rotation,andtranslation.
[TRaSh]
ThewayIrememberthisorderisbythewordTRaSh.TheresTRSinthatword,intheproper
notationalorder.IguessIcouldusethewordTreesinsteadandnothavetothinkabouttheh.
ButIliketrashasitremindsmeoftheTRS80,calledatrash80forshort,oneofthefirst
personalcomputers,frombackwhenprogramswerestoredoncassettetapes.Onceupona
timethiscomputerruledtheearth:in1979ithadthelargestselectionofsoftwareforanyPC.
TRS,then,istheordertoremember.Inourcase,justtheboxstranslationandtheclockhands
rotationareused:
[erasetheunusedtransforms]
ThRhShTbRbSbO
Thisgetsusthecombinationwewant:translatesotheresaneworigin,thenrotatearoundthis
origin.Addingawholeobject3Dtogetasingleadditionaltransformseemslikeoverkill,butreally
itdoesntaddmuchcode.
[AdditionalCourseMaterials:theTRS80isdescribedonWikipedia
http://en.wikipedia.org/wiki/TRS80,andherehttp://oldcomputers.net/trs80i.html.]
Exercise:TwoClockHands
38
Ifyoutrytotakeaboxorsphereclockhandfromthepreviousexercisesandtrytopositionand
rotateit,youllgetsomethinglikethis.Three.jsisdoingthestandardrotate,thentranslateseries
ofoperations.Thehandsarerotatedtotheproperangles,butthetranslationsdontmovethem
alongtheiraxesbutrathermovetheminworldspace.
Thepositionsandscalesintheexerciseareallcorrect,youshouldntneedtochangethose.You
needtofigureouthowtorotatethehandssotheyareproperlyoriented.Whenyouredoneyou
shouldseethehandsasshownhere.
39
[exerciseathttp://www.realtimerendering.com/udacity/?load=unit4/unit4clock_exercise.js]
[TODOGundega:whatmightbereallycoolistoaddtwoslidersheretothecode.Namely,one
foreachhand,oftherotationangle(indegrees).Peoplethencanseethewackythingsthatgo
onwhenyourotate,thentranslateinthisway,andcantesttheirownanswers.Wecanalsotest
theiranswerbygivingdifferentanglesinourtest,tomakesuretheyrenotcheating.Easytoadd,
Ijustneedtomoveon...]
Answer
[solutionat*redacted*]
YoullneedtouseanObject3Dtoletyourotationaftertranslation.Heresmysolutionforthe
minutehand:
Thecubeistranslatedtothecorrectpivotpointbythepositionthatdoesntchange.A
minuteHandisthenaddedandrotatedintoplace.Thisnewobjectisthenaddedtothescene.Its
thisminuteHandobjectthatundergoestherotationandgivesuswhatwewant.Similarcodeis
addedforthehourhand.
Lesson:HierarchyofObjects
[parentchildDrawtwoboxes,oneaboveanother,differentcolorseachlevel,grayconnector.
Seedrawingbelow,startwiththem]
WeveusedObject3Dtogiveusaccesstoafewextratransformsinthechain.However,
Object3Disdesignedforanotherpurposethatisextremelyuseful.WhatObject3Ddoesis
createaparentchildrelationshipbetweentwoobjects.Onceanobjectisachildofanother
object,thatchildisaffectedbywhateverisdonetotheparent.
40
[scenegraphhierarchyaddintherest:drawingofscenegraphandrealobject,e.g.acar,
twodoors,fourwheels,withinawheelisrim,tire,hubcap.Usedifferentcolorsateachlevel,
connectboxeswithgray]
[WHENIDRAWTHISFORREAL:puthubcapunderwheelinsteadoftire,aswellreusethe
threeobjectsoneovertheother.]
Heresamorefleshedoutsetofparentchildrelationships.Thecarhastwodoorsandfour
wheels.Eachwheelhasarim,ahubcap,andatire.Thisisusuallycalledascenegraph,asit
definesagraphofrelationshipsofobjectsinthescene.Thiswholetreestructureiscalledthe
hierarchy(anotherfrequentlymisspelledword!).
Withthishierarchywecandoalot.Forexample,wecanmovethewholecarbyapplyinga
transformtothebody.Theotherobjectsinthehierarchywillautomaticallybeupdatedwiththis
transformandfollowalongwiththebody.Wecanalsoaffectobjectswithinthehierarchy.IfI
changethewheelsrotation,therim,hubcapandtirewillalsobeupdatedandmovealong.
[AddTcRcScTwRwSwThRhShseriesincolors,correlatetohierarchy]
41
Underthehoodwhatishappeningisthataseriesoftransformsarebeingmaintained.For
example,forthehubcapherestheseries:theresthescale/rotate/translatesetforthehubcap
itself,thenanotherSRTseriesfromthewheel,andfinallyanSRTsetfromthecarasawhole.In
practicethescalematricesareoftennotused,asmanymodelcreatorsmaketheirmodelsto
scale.
Thegoodnewsisthatthesecomplexseriesoftransformscanbecompressedintoasingle
transformthatdoesitall:itholdsallscales,rotations,andtranslations,plusanythingelsedone.
Wellshowhowthisworksintheupcominglessonsonmatrices.
[cardemohere.runitforawhileandthentalkoverit.Usecamera6,WASD
http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_dynamic.html]
42
Thatsaid,fixedhierarchiesandtheparentchildrelationshiptheyestablishareextremelyuseful.
Hierarchiesallowmostobjectstobecontrolledinanaturalway.IbelieveIvesaidthisthree
times,soIllinvokeLewisCarrollslinefromTheHuntingoftheSnark,whatItellyouthreetimes
istrue!
[Onscreen,beforesayingeachone
*Workstepbystep
*Onceyouapplyatransform,forgetaboutit.
*Drawapicture!
*Undoifyourenotmovingtowardsyourgoal.
]
Personally,whenImthinkingthroughwhatseriesoftransformsIwanttoapply,Iworkstepby
step.PerhapsthemostimportantruleIcanofferyouisthis,onceyouveappliedatransform,
forgetaboutitentirely!Thattransformsapplied,itshistory,andyounowhavesomenewobject
inanewposition,possiblywithsomenewlocationattheorigin.DrawapictureifithelpsI
usuallydo.
Onceatransformisapplied,wheredoesyournewobjectwanttomovefromthere?Ifyoufind
youvemessedupandthenewobjectisnotmovingtowardsyourgoal,undoandtryagain.
[AdditionalCourseMaterials:TheHuntingoftheSnarkishere
43
http://www.literature.org/authors/carrolllewis/thehuntingofthesnark/chapter01.html]
Question:Instancing
[showlampandthreeshadeshierarchy,showshadessharingasinglemesh]
Instancingistheideathatasinglegeometricsetoftrianglescanbereusedagainandagain.
Forexample,foralampyoumightmakeasinglepieceofgeometryforabulbfixture.Ifyouwant
threebulbfixtures,yousetupthreedifferenttransformsforwheretheobjectsgo,butreusethe
samesetoftrianglesforeachone.Inthree.jsthesetoftrianglesiscalleditsgeometry,though
oftenyoullhearitcalledtheobjectsmesh.Ameshinthree.jsisatypeofobject.
varlamp=newTHREE.Object3D()
varcylinderGeometry=newTHREE.CylinderGeometry(20,20,100,32)
for(i=0i<10i++)
{
varcylinder=newTHREE.Mesh(cylinderGeometry,cylinderMaterial)
cylinder.rotation.x=20*i*Math.PI/180
lamp.add(cylinder)
44
}
Thisiseasyenoughtodointhree.js:ifthegeometrydoesntchange,justreuseit.Heresa
simpleexample:Icreatethegeometryforacylinderandthenreuseitagainandagainforeach
meshobjectthatImake.Noticethatanobjectismakefromsomegeometryandamaterial.This
meansIcouldhavegiveneachcylinderadifferentmaterialwhilereusingthesamegeometry.
[newpage]
Sayyouhaveacarmodelwithfourtires.Thequestiontoyouis,
Whichofthesearevalidreasonsforusinginstancingfortires?
[]Itallowsanindividualtiretobeshownasoutofairandflat.
[]Itreducesthenumberoftransformsneeded.
[]Itcanuselessmemory.
[]Itallowssometirestobedrawnwithlessgeometrythanothers.
[AdditionalCourseMaterials:Seethisdemo
http://mrdoob.github.com/three.js/examples/webgl_performance_doublesided.htmlfor5000
instancedspheresonthescreen.Moreindepthcoverageofinstancingcanbefoundinthis
technicalarticle:
http://web.archive.org/web/20120426210216/http://developer.nvidia.com/node/20]
Answer
Thefirstreasonisfalse.Sinceasinglesetoftrianglesissharedbyallfourtires,eachtiremust
lookexactlythesame,atleastasfarasgeometryisconcerned.Aflattiredoesntlookthesame
astheothers.Thelastreasoncanalsoberejected,aseachtireisdrawnwiththesame
geometry.
[yes,reviewers,thisisnotentirelytrue,geometryorvertexshaderblahblah,butreallyitsnota
correctanswer.]
45
Thesecondreasonisnottrue,aseachtireneedstohaveitsowntransform.
Thethirdreasonisdefinitelytrue.Insteadofstoringfourseparatetrianglesetsforeachtire,we
storejustone.Thesavingscanbehugewhentherearemanyidenticalparts.Thisreusecan
alsoincreaseperformanceontheGPU,dependingonhowthedataispassedin.
Lesson:RobotArm
[Showforearmtestimage.]
Letsseehowasimplehierarchyworksinpractice.Illmakearobotwithtwopartstoitsarm:a
forearmandanupperarm.
Theforearmisthispiece,madeofsixobjects.Irunsometestsonitanditlooksgood.Ivemade
itsothatthepointwhereIllattachittotheupperarmisattheorigin.IdothisbecauseIknow
thatwhenarotationisapplied,therotationhappenswithrespecttothepointattheorigin.
46
Thecodetocreatemyforearmisthis.Theresnotalottoit:IcreateanObject3D,Icall
createRobotExtender,andthenIaddtheforearmtothescenesoIcanseeit.My
createRobotExtenderfunctionaddabunchofgeometricobjectstotheforearmobject.
faLengthispassedintoletthisfunctionknowhowtalltomaketheextender.
ItdoesntreallymatterwhatIaddtotheforearmobject.Theonlyruleisthat,whateverIputinto
thisobject,Ineedtorememberthatthisobjectitselfwillrotatearounditsorigin.

Makesomeroomtotheright,sowecanaddadrawing,asshown]
47
Idesignmyupperarminthesamewayandcodeitupaboutthesame.Again,itrotatesaround
theorigin.Thebitwereinterestedinishowthesetwoobjectsgethookedtogether,sothatthe
forearmisachildoftheupperarm.

Heresthecodethatattachesthetwoobjectstogether.Wemakethetwoarmpiecesthesame
asbefore.Thekeydifferenceisthat,insteadofaddingtheforearmtothesceneitself,weadd
theforearmtotheupperarm.Wealsomovetheforearmtobeatthetopoftheupperarm.
Atthispointtheupperarmcanbemovedaround,rotated,scaled,andallofitspartswillbe
transformedinthesameway.ThisiswhyIrenamedthisobjecttobethearminsteadofupper
arm,sinceinfactitholdsboththeupperarmandtheforearm.
[addbelowcodeabove]
Forexample,ifwesetarotationonthearm,thewholeobjectwillrotate.Whatsimportantto
realizehereisthatthearmdoesntparticularlyknoworcareaboutwhatsinsideanyofits
children.WhenIaddtheforearmtothearm,theforearmbecomesjustanotherpartofthearm,
nodifferentthanaddingasimplesphereorblock.
[puttorightofthiscodeTaRaTfRfO]
48
However,sincewecanmanipulateanyobjectbychangingitstransforms,wecanalsochange
thepositionoftheforearmitself.Sochangingtheanglewiththislineofcodewillchangethe
angleoftheforearm,withoutaffectinganythingelse.Thetransformorderistheforearms
rotationandtranslationfollowedbythearmsrotationandtranslation.Thismeanstheforearm
canbetransformedhoweveryouwish,withoutknowingaboutthearmasawhole.Thearms
transformsareappliedafter.
[startdemorunning:
http://www.realtimerendering.com/udacity/?load=unit4/unit4robot_arm_extended_exercise.js]
Givethedemoatry,toseehowthetwopartsinteractwiththeirseparatecontrols.
Demo:RobotArm
[http://www.realtimerendering.com/udacity/?load=unit4/unit4robot_arm_extended_exercise.js]
49
[NOTE:noconclusionneeded,astheproblemsetnaturallyflowsfromthepreviouslesson,and
Unit5iscloselytiedtoUnit4.IfIdesperatelyneedone,talkover
http://mrdoob.github.com/three.js/examples/webgl_lines_colors.html]
ProblemSet
Problem4.1:ExtendedRobotArm
[showthefinalthinghere,thenmaybetherobotbodypartinaction,byitself,similartohowwe
seetheforearminactionbyitself:
http://www.realtimerendering.com/udacity/?load=unit4/unit4robot_arm_extended_exercise.js
]
Inthisexerciseyoulladdanupperupperarmtotherobot,letscallitthebody.Thebodyis
createdbythecreateRobotBodyfunctionyoullseeinthecode.Thisbodycantiltandithasthe
upperarmattachedtoitstop.Yourjobistoaddthisbodytotherobotsdesign.
Youmightwanttoturnoffdisplayoftheothertwoarmpartswhileyouretestingoutthebody
itself.Simplycommentoutthelineofcodethataddsthearmtothescene.
50
Whenyouredone,yourrobotarmshouldlooklikethis.
Ifyoureallywanttogetfancy,youcanaddaYaxiscontrolforthebodyitself.Itsprettyeasyto
dothis,justthreelinesofcodetakealookintheuserinterfacesetupGUImethodandinthe
render()method.
Answer
Thisexerciseextendsthehierarchybyaddingthebodyobjectsothatthearmisattachedtoits
top.Insteadofaddingthearmtothesceneitself,createthebodyandattachthearmtothetopof
it.
body=newTHREE.Object3D()
varbodyLength=60
createRobotBody(body,bodyLength,robotBodyMaterial)
//Movetheupperarmitselftotheendofthebody.
arm.position.y=bodyLength
body.add(arm)
scene.add(body)
Problem4.2:RobotHand
51
[Showinitialexercisestartingconditions
http://www.realtimerendering.com/udacity/?load=unit4/unit4robot_hand_exercise.js
]
Inthisexerciseyoullfinishaddingahandtotheoriginalrobot.YoullseeintheinitialcodeIve
createdonegrabberforthehandbyusingthecreateRobotGrabberfunction.Itstartslikethis,
withjustthisonepieceofthehand.
[Showsolution*redacted*]
52
Yourgoalistocreateahandthathastwograbbersthatslidealongthecylinderandrotate
together.Ihaveprovidedslidersforbothofthesecontrols.
Whenyouredone,thehandshouldlooklikethis.Thehandzcontrolrotatesitasawhole,the
handspreadslideropensandclosesthehand.
NotethatforthisexerciseyoullhavetomodifyboththefillScene()methodandtherender()
method.
Answer
Thecodetomaketherightgrabberisessentiallythesameasfortheleftgrabber.
handRight=newTHREE.Object3D()
createRobotGrabber(handRight,handLength,robotHandRightMaterial)
//Movethehandparttotheendoftheforearm.
handRight.position.y=faLength
forearm.add(handRight)
53
Theslightlytrickybitisthatyouneedtoaddtotherender()method.Youhavetomovethe
grabberinthenegativeZdirectionwhenthesliderisslid:
handRight.rotation.z=effectController.hz*Math.PI/180 //yaw
//negatetogotheotherdirection
handRight.position.z=effectController.htz//translate
Problem4.3:SeriesofTransforms
[TaTbTcTdO
TbTdTaTcO]
Normallymatrixordermatters.IfIrotateandthentranslateanobject,Illusuallygetadifferent
resultthanifItranslateandthenrotate.However,thereareexceptions.
SayIgiveyouabunchofthesametypeoftransforms,suchasfourdifferenttranslation
matrices.IfImixeduptheorderofthesetransforms,likeonthesecondlinehere,wouldany
objectstillbetransformedinexactlythesamewaybythisneworder,ordoestheordering
matter?
YesNo
()()Canaseriesoftranslationsbedoneinanyorder?
()()Seriesofrotations?
()()Ofscales?
()()Ofrotationsandtranslationsallalongthesameaxis?
Ignoreprecisionerrorsassumeyouhaveinfiniteprecision.Alsoassumethescalesandmirrors
arenothingtricky,justthetypicaltransformsgeneratedbythree.js.
Answer
54
Translationsrepresentmovements.Justlikevectorscanbesummedtogethertomakeasingle
movementvector,translationscanbemultipliedtogethertogetasingletranslation.Theorder
thatweaddthevectorsdoesntmatter.Likewise,translationorderamongtranslationsdoesnt
matter.Sotheanswerisyes.
Rotationordercertainlydoesmatter,reversingtheorderwillnormallychangetheeffect.Sothis
secondquestionsanswerisno.
Eachaxisscaleisindependentoftheothers.IfyoustretchanobjectalongtheYaxis,itsXandZ
coordinatesdonotchange.Becauseeachisindependent,thereisnodangerofthescales
interactingwitheachother.Eachaxesscalefactorscansimplybemultipliedtogether.
Multiplicationiscommutative,sothescalescanbedoneinanyorder.Yes.
Forthislastquestion,sayyourotatealongtheYaxis,andtranslatealongthissameaxis.The
rotationscanbedoneinanyorder,sinceeachisjustananglechangearoundtheYaxis.The
rotationaffectstheXandZcoordinatesofanypointstransformed,translationaffectsonlytheY
coordinates.Sincetheseareindependentvalues,rotationsandtranslationsalonganaxiscanbe
evaluatedinanyorder.Sotheanswerisyes.
Problem4.5:MakeaFlower
First,andthisisimportant!Saveyourcodearoundforthisexercise.Youlluseitasabasisfor
thenextexercise.Wedontstartthenextexercisewiththesolutionforthisone.Atthispointyou
shouldbeusingatexteditorfortheseexercises(IlikeNotepad++,otherslikeSublimeText).By
savingcodesnippetsaroundyoucanlooktheseoverinfutureexercisesandseewhatyoudid.
Inthisexerciseyouwillmakeaflower.Youstartwiththis,astemandstamenoftheflower,with
asinglepetalpartaconesortofstuckinthestem.Istartyouoffwiththiscone,whichisa
childofapetal,whichisthechildoftheflowerasawhole.
[exerciseathttp://www.realtimerendering.com/udacity/?load=unit4/unit4flower_exercise.js]
55
Yourjobistomake24instancesofthispetalandformaflower.YoullneedtouserotationEuler
angles,appliedintheproperorder,andtranslations,andyoullneedtoapplythesetothecone
objectandthepetalobjectwhichisitsparent.Noticethatallthetipsoftheconesmeetinthe
middleofthesphere,thestamen.
[AdditionalCourseMaterials:Saveyourcodefromthisexercise!Anytexteditorisfine,Ilike
Notepad++http://notepadplusplus.org/,otherspreferSublimeText
http://www.sublimetext.com/.Forsearchingthroughtextfiles,IlikeAgentRansack
http://www.mythicsoft.com/page.aspx?type=agentransack&page=home]
Answer
Heresmysolution:
for(vari=0i<24i++)
{
varcylinder=newTHREE.Mesh(cylGeom,petalMaterial)
cylinder.position.y=petalLength/2
varpetal=newTHREE.Object3D()
petal.add(cylinder)
petal.rotation.z=90*Math.PI/180
56
petal.rotation.y=15*i*Math.PI/180
petal.position.y=flowerHeight
flower.add(petal)
}
Theloopcreates24petals.Forthecylinder,Ipositionitsothatitstipisattheorigin.Ithenknow
anyrotationsIdotothepetalwillkeepthistipthere.ThetrickiestbitisthatIfirstwanttorotate
thepetalsoitishorizontal,thenrotateitincrementsof15degreesaroundtheorigin.ThatswhyI
usetheZaxisforrotation,thentheYaxis.RememberthatEuleranglesareappliedintheorder
Z,Y,X.
Aftertherotationisdone,Ithenmovethepetaluptoitsfinalpositionattheflowersheight.
Problem4.6:ImprovedPetals
57
Startingwithyoursolutiontothepreviousproblem,maketwosmallchangesthatwillmakethe
petalslookmorerealistic.Thefirstistosquishthepetals:makethemonequarterastallasthey
werebefore.Thesecondistotiltthepetalsupby20degrees.Whenyouredoneyoushouldget
somethinglikethis,whichlooksatleastalittlebitmorelikeaflower.
Noticethatallthepointsofthepetalsshouldstillbeinthecenterofthestamen,thissphereat
thetopofthestem.WhenIfirstsolvedthisproblemmypetalswerepointingbelowthestamen,
whichisntwhatIwanted.IexpectyoucandobetterthanIfirstdid.
[exerciseat
http://www.realtimerendering.com/udacity/?load=unit4/unit4flowersquish_exercise.js]
Answer
Thecodechangesareprettysmall,thoughtheytookmeabittogetcorrect.
for(vari=0i<24i++)
{
varcylinder=newTHREE.Mesh(cylGeom,petalMaterial)
cylinder.scale.x=0.25
cylinder.position.y=petalLength/2
//cylinder.rotation.z=20*Math.PI/180
58
varpetal=newTHREE.Object3D()
petal.add(cylinder)
petal.rotation.y=15*i*Math.PI/180
petal.rotation.z=(9020)*Math.PI/180
petal.position.y=flowerHeight
flower.add(petal)
}
Thescalewaseasyenough,ImodifiedthecylindersXscaletobeonequarterofwhatitwas
before.
TheZrotationIinitiallyappliedtothecylinder,butthatwasnotcorrect.Thatrotatedthecylinder
arounditsowncenter.Thisgaveaninterestingresulttryitoutsometime!butwasntwhatI
wasaimingfor.TheproperrotationwastosimplynotrotatethepetalitselfasfaralongtheZ
axis,rotating70degreesinsteadof90.
Problem4.7:Scalevs.Translate
Justonequickquestion.SayIapplyauniformscaletoanobjectcenteredattheoriginandthen
translateit.ThatscaseA.Istartagainandapplythetranslationfirsttotheobject,thenscaleit
caseB.AssumethatthescaleandtranslationtransformsactuallydosomethingImnotscaling
by1,ormovingby0feet,oranythingsillylikethat.
59
[A:scale,thentranslateB:translate,thenscale]
Markanyofthefollowingthatarealwaystrue.
True
[]Neitherobjectscenterhasmovedfromtheorigin.
[]Theobjectisthesamesizeinbothcases.
[]Theobjectisinthesamepositioninbothcases.
[]TheobjectscenterhasmovedfartherincaseBthancaseA.
Answer
Thisfirstanswerissimplyfalse.Bothobjectsaretranslatedbysomeamountfromtheorigin.
Thissecondansweristrue.Ifyouscalebythesamescalingmatrix,theobjectsarethesame
size.Theymaybeindifferentpositions,buttheyllhavethesamedimensions.
Theobjectisnotinthesameposition.Ifyouscaleupbyamillion,thenmoveafoot,youve
movedafootforcaseA.Ifyoumoveanobjectafoot,thenscaleitupbyamillion,itsoriginwill
essentiallymoveamillionfeetforcaseB.
Thisnextonecouldbetrueorfalse,itdependsonthescalefactor.Iftheobjectisgrowinglarger,
thenitstrueBwouldmovefartherthanA.Iftheobjectisshrinking,Awouldmovefartherthan
B.
60