Welcometo a veryspecialepisodeofcodingTradewith a guest.
Surely, Woo, I would I wouldsay, youknow, thefamouswhite.
That's notsanitary.
E dohave a bell.
Youcanringatonce.
Myonlyone.
Well, I don't know.
Youcouldbe.
Oh, verygood.
Okay.
Um, therearesounds.
I'm sorry.
Wehave a littletongue, sometechnicaldifficultiesingettingstartedbecause I thoughtyou a littleawkward.
We'regonnafigurethisoutaswego.
I havethistendencyto, like, Lookoverherebecause a littlebehindthesceneshere, thisiswhere I havethemonitorand I canseethechatonweaken, like, sortofseewhatthemiclevelsare.
Um, soandsurelyuses a varietyofdifferenttools I'm imaginingforyourwork.
Butoneofthetoolsyouusedfrequentlyisbiggest.
OneisStevethrew 83.
So D threeis a jobscriptlibrary.
It's alsohas a linkwithnumber.
Yeah, itisprettydifferent.
Soand I I wanttosaythat I'veneverusedthethree, butthat's notentirelytrue.
I think I'vetriedtouseitonceortwice, but I couldn't rememberwhat I didthelasttime.
Andsowhat?
ThisisgonnabesomuchsimilartowinandPJwashere.
TJshowedme a littlebitaboutreact.
Surelyisgoingtoteachmehowtouse d threeandwe'regonnamake a workshopplanned.
I'm thestudentsurelyistheteacher.
And I'm gonnaattempttocodeoverhereonmylaptop, Whichonewillkindofswitchbackandforth?
So, um, maybewhatwecoulddotogetstartedwithis, ifsurelyifyouwanttotake a minutetointroduceyourself, I kindofdid a littlebit, butifthere's anything I missedthatyouwanttosayaboutyourworkofthingsyoudoareotherthingsyouwannaplug.
Youcoulddothat.
I'm gonnajustaddonemoretechnicalfeature, whichis I wannaberecordingtwo.
Discyourlaptopscreen.
Okay?
Becauseifwedecidetomake, like, aneditedversionofthisthatgetspublisheduslike a standalone D threetutorialwithout a lotoftheextranonsenseoffiguringoutmikestuff, I workwith a videoeditorandheputsallthestufftogether.
Butifwe'renotrecordingthis, wewon't owe.
Youknow, wecoulddo, though.
Muchsimplersolution.
I'm justgonnagocapture.
Yeah.
I mean, I couldsetitup, butthisisgonnabemuchquicker.
So I'm justgonnado a newscreenrecording.
Um, and I thinkyoucouldjustdothewholescreen.
Yeah, but I wantedtojustseeifithassound, butdoesn't matter.
It's like, actuallygonnadothis.
Andnowitis.
It's recording.
Allright, That's a muchsimplersolutionon.
I won't worryabout.
I havethisothersetupthatrecordsallthevideosignals.
I don't think I focusthecamera.
Staythere.
Standthere.
Youknow, whentheyhavejustlastminuteat a secondlaptop?
Yeah, thatwasmyfault.
I like I wasallsetupandreadytogo, andthen I waslike, Damn, maybehe's goodtohave a secondlaptop.
So I'm justgonnaIfyoucouldjuststandstillfor a second, Okay?
Still, I'm gonnafocusthecameraon.
Therewego.
That's better.
Great.
Um, okay.
So I thinkwe'regoodtechnologywise.
Wehaveyourlaptop.
If I wanttoswitchtomylaptop, I needtousethismouse.
I'm justgoingtogetitready, and I justclickthisbuttonbacktomylaptop.
Um, aroundtheworld, mostlyon I'm, like, tightcosmediacompanies, journalismcompaniesand I workwiththemandtheirdatatotellvisualstoriesondso.
Someofthethings I'vedonebeforeis I'm thisone.
SothisoneisThisisreallyfun, becausethefirsttimewemet, um, butwewere, likedoingitwaswemetbecausewedid a thingwith M p J Mm e cole.
Andthenwewere, like, 40 minutesinto, like, a livestream, orlike a recording.
I'm Andthen I startedshowingthisproject, andDanwaslike, Wait, I knowthisproject.
I spent a lotoftimepokingthroughthisproject.
There's, youknow?
Yes, I'm a musicaltheatergeek.
Nerd.
I'veseenHamilton a bunchoftimesplumbingyourtime, twice.
I haveticketstosee a vetothisweekend.
Veryexcited.
I'veseenitthreetimes.
Okay, now, uh, yes.
Oh, that's oneoftheprojectsthatdidreallywell.
I'vealsoworkedwiththeGuardianonsomething a lotmoreseriousabouthomelessness, so I just I'm Yeah, myjobis I triedtotakedataSidesthat, youknow, maybewhenit's justnumbers I'm Itmightseemcoldorhardtounderstandandtrytoconveythemin a waythat's compellingandmaybeevenemotional.
Um, amfortoday.
Whatwewanttodois I hadthisprojectand I justrealizedthisisthefirstproject I everpublishedafter I wentfreelance.
Soifyouusepolarcoordinatestokindoflooparoundthepathof a circle, butadjusttheangleontheradiusasyou'removingandyoulooparound, youcouldgetthesethrowslikepatterns, So I have.
Butmostrecently, I think I did a videoaroundThemore a rose, whichis a particularwayofdoingthisanyway, justthattoelikethattogether.
Yeah.
Andsothat's whatwe'redoingtoday.
I'm andwetalkedaboutthis, and I waslike, I'm gonnagointothishavingpreppedabsolutelynothing.
Now, I usuallyusethe p fiveWebeditorwhichmostpeoplehavewatchedthechannel I'veseen, whichlookslikethis.
I cantypeJavaScriptcodehere.
If I runthisrunthissketch.
I seethecanvasoutputhere, butamazing, amazing, invisiblecupthere.
But, uh, we'regonnause a differentwebeditortoday.
Yeah, it's calledobservableobservable h q dotcom.
I think I'm justgonnagoogleitand I don't knowthat's gonnabe a goodSothisis, uh, kindofthenewestiterationofthecreatorof D threeisalsobehindthis, andit's kindoflike I thinkofitas I'm Jupiternotebook, butontheWebandkindoftailoredfordatavisualization.
So a lotofpeopleintheaudienceareprobablyfamiliarwithJupiternotebooksbecauseit's a thingthat's outtherethat a lotof a toolthatyouuse, Butit's notsayingthat I useregularonthis.
SoJupiternotebookis a, um, Paigeessentiallythatyoucanrunin a Webbrowsertypeinpythoncodeandexecuted.
I'm andthissweateris a datavisualizationofAdaLoveliesandheroverthemfortheBabbageengine.
Yeah, Sopleasedon't askmehowtoreadit, because I haven't decodedityet.
I am, But I'm justreallyexcitedtolikewherethisonyourlivecouldon.
Yeah.
Okay, solet's dospgpatstogether.
So, Dan, I knowyouwork a lotand p five, So I'm guessing I'm guessingthatyou'reextremelyfamiliarwith, like, canvas, like, Okay, I'm gonnaputitinhere, and I hope I'm gonnaputitinanotherpocketandletmeknowififaudioevergoescrazy.
We'vegotthemicinShirley's pocket.
Yes, a differentpocket, differentpot.
Different.
Goodtome.
Okay, so I'm gonnaWe'regonnasee.
So, um, I knowyouuse a lotofcanvasandyoumake a lotofshapesandcampus, butforSPDtoday, I wanttojusttalkaboutlike, spgpath.
There's, like, somuchroomuptherethatcanreach.
Umandsowhatthatlookslikeisactually, should I startfromSPGAndwhatspgYeah, sure.
Andwhat I meanby a pathstringisthatthere's a Siri's ofcommandsthatyoucanuse.
Andtoday I justwanttotalkaboutem.
L and C.
Andtheystandformovetolying.
Thio, yourhandwritingissomuchbetterthanmine.
Really, Kurt, too.
Oh, youknewoneofthethings I waslike, I'm excited, butkindoflike, apprehensiveaboutislikeyourlevelofenergyonyourvideosislike, sointense.
And I'm like, I don't knowif I'm gonna, likebeabletomatchit, butatthesametime, thatmightbetoomuchliketofor, like, bothofustobeatthatlevel.
It's OK, I'm soyeah.
Sothesandremovedtolyingtoher, too I'm instantmovedtois I'm probablythemoststraightforward, whichislike, translatein p five.
I wouldassumetranslateismovingfromonepointtoanother.
The a differenceinexit a differenceandwhy?
Oryou'removingto a directlocation?
Yes.
SomoveThio.
Thewaythat I thinkaboutitismovedtoislikeifyoutake a penorpencilandyoudropthatpenorpencilontothe X Y point.
Right?
That's how I thinkofmoveThio.
Linetwoisthen, uh, drawlinefromtheretothenexttowhereyou'refrom, whereyoumovetotothetothenext X Y.
Yes, exactly.
So I'm theway I thinkaboutoh, linetoo.
Isthatit?
Justsaysifwhen?
Whenyou'rewhenyou're I'm Ifyou're, uh, penisonthepaper, draw a straightlinetothatpoint.
I am.
Andthatmeansthat l alwaysneedstobechangedwithsomethingbeforeit.
Because I'm like, youcan't draw a lineifyou'repenisn't onthepaper.
Yes.
Soyoualwaysneedtostartyourpathstringwithan M, andthenyoucanjudgeandchainlike M l l, um, whateveryouwant.
Okay.
Gotit.
Andthencurvedthiois I thinkthefunnestonehas a littlebitof a trickylike I'm, uh, syntax.
Butonce I explainthatitwillmake a lotofsenseandthey'rejustrealized I needtomultipledifferentcolors.
Oh, wait.
Andthatisthatsomethingwehaveneverthoughtabout.
I'm sorry.
I forgotaboutthis.
I am.
I'm gonnatrymybestwithjustthese, Like a dottedline.
I knew, like, 34 differentcolors.
Soit's not.
We'llsee.
Okay.
See, I'm okay.
Suetheallright.
Thisismy, uhOkay.
So, uh, I'm gonnacall a PXone p x two.
And I thinkbythesearethecontrolpoints.
So, youknow, again, peoplemightnotbefamiliarwiththis, butifthey're a P fiveuser, thissoundslikeit's justlikethebusy a curvefunctionwhereyouhavetoendpointsandtocontrolpoints.
Exactly.
Sothisisexactlythesamemapstothatidea.
Yeah.
Sothisisbasicallyyes.
Ooh, if u N campusisexactlythesamething, I'm andsoletmeexplainthissyntax, Really?
Andandthere's a reallynicereferencewhileyou'rereadingthisout.
There's a reallynicereferenceinroomManson's programmingdesignsystemsbook, whichhas a wholepageaboutwhat a busy a curveisandhassomeinteractivewaysofplayingwithit.
And I amSoififanyoneworkswithillustrator, that's basicallyanillustrator.
Howyoudraw a curveisyoustartfrom a startingpointyoulike, make a linetoyourendingpointandthenyougettoanchorpointsthatyoucandragaround.
Yes, sir.
Here's a reallynicereference.
I'lljustswitchovertoitfor a second.
Thisis a referenceherethatshowinghowbusycurveswerecalculated.
And I thinkif I godownsomewherehere, I rememberthisnicewayofinteractingwithYes, I Maybeit's thisone.
Yeah, thisthisis a littlebitdifferent, but, um, so I thinkthisoneis a cubicher.
Oh, yeah.
Sorry.
Thisis a quadratic, thisone.
Yes.
Sothatoneis a quadraticbusiercurveandCubaCubic, andwe'redoingcubic.
Soyeah, andthereasonwhy I liketeachingthecubicbusiercurveisbecause I thinkitgivesmuchmoreoptionsthanthequadraticoneright.
I am.
Andso, yes.
Sothisishowtodoandthatspeedypath.
Andsowhat I liketodoherenowisthenaskyoutodraw a petalshapeordesignthepetalshapeandthenkindof, like, figureoutapproximatelywhere I'm thepointsareandwritethispathstring.
Sodesignithereonthewhiteboard, notjusttinkerarounddesigningherefirst, because I thinkitgivesyou, like, somaybe I'lluseuphere.
Yeah.
Okay.
So, inotherwords, a singlepedal.
Soif I thinkabout a flowerlike a singlepetalmightlooklikethisYeah, Andyouguy, I justwent a littlebittoohigh, but I'llcutitoffandyoucouldgetcreative.
Well, whatwasthat?
Whatthatwasso I couldusetwodifferentcurves.
Yes.
So I wouldstarthere, huh?
Andcurve, likeuptohere?
Yes.
Andthen I wouldstillbehereandcurvedbackdowntohere.
Yes, so I woulddo a firstmove, so I firstneedtogettothispoint.
Canyoujustconsiderthat 0.0.0?
Sure.
So I woulddo m m 00 Yes.
Andthen I needtocontrolpoints.
Oh, no, no.
Theama's justmoved.
Now I needcurvetoohurt.
So I needthreepairsofExWise.
Yes, thefirsttobeingthecontrolpoints.
Right?
SoAndhowisin p fiveif I'm in a p fivecanvass?
TheCartesianplaneissuchthatzerozero's thetopleft.
Anditwasthisway.
Whyam I goingpositive?
Andit's exactlythesame.
Yeah.
So I wouldbeif I wantmyfirstcontrolpointtobe, likeoverhere.
Yeah, itwouldbenegative.
Pixels, Yes.
Negativepixels.
Yes.
Soif I say, like, negative 10 Negative 10 Yashandthen I mightwanttogoupherethisagain.
Thisisnotascreativeasmaybe I couldbereacting.
Then I wouldsaynegative.
10.
Because I'm stillthesameexcepttogofurtherup.
So I'm gonnasay, like, negative 40.
Doyouwantdoyouwant?
Uh, doyouraisethat?
Yes, I guessso.
I wasafraidtoerase, Say, negative 10.
Negative 40.
Andthenthelastwouldbetheanchorpoint.
No, that's thelastpoint.
The U.
S.
Sothosethestwoofyourangercould I thinkofthemascontrolpoints, controlpointspoints, And I thinkofthisasananchor, but I don't thinkthat's nottherightterminology.
So I'm gonnagoback, Thio, I'm gonnaputyouthismarkeryearsone, andthen I'm gonnagobacktohereonDo I make a newcellformeandyousell, And, um, I notusing d threerightnow.
I'm justwritingSPGstuffdirectly.
I'm new.
Sothisonerightnowisjusttosell.
So, um, whatwecandohereislet's declare a variableandwhereit's goingtobeglobaltothisnotebook.
Sothenifweopenup, maybewecanmake a biggerforpeoplewhoperfectsolooks, butonLeeinlove.
But I don't seeanydiednotjoiningspecify a colororsomethinglikethat.
SoOh, youknowwhyorhoweyesthis m Itlookslikethequotesareintherebecause I thinkyouneedtogobackandputquotesaroundtheButthere's anotherreasonwhyit's notshowingup.
I'm justgonnasayrightnowthisthisisokayrightnow, But I liketosetthewidthandheightoftheSPGasattributesarethewithinhighattributesbecauseoneofthemostcommonmistakesthatpeoplewillyou, um, havewhentheyfirststartwithSPGisyoucanthinkofspgaskindoflike a windowintotheSPGworld.
Sothere's, like, thingsbeingrenderedhereandyou'rejustgetting a littleviewpoor.
I thinkmapis a functionthatwilltake a valuewith a givenrangeandreadandmapitto a newrange.
Yeah, exactly.
That's whatscalesfor D three.
So, likejustdifferentvocabulary.
I'm Andso, forexample, wehave, like, whenyourscalesthatdolike, youknow, linearleaveandthemapfunctionjustdoesitaslike a linearscale.
Okay, sothere's not a way.
There's obviouslyotherwaysyoucanthinkof a rangeandmapthevalue, butitsoundslike D threehas a lotofyeahcapabilitiesintermsofhowyoudifferentkindofscales, likelogarithmsscale.
Yes.
Sowehave, like, powerlogtime, likeyoumeanlike a mapasinput.
Likeifyouhave, like, a datelike a JavascriptStateobject, Because a lotoftimesindatayouhave, like, datesandyearsandyouwantto, like, mapthattoo.
Liketheexpositionyouwillusescaletime.
I'm oneofmypersonalfavorites.
Iskwontieslike, whichisbasicallyyougiveit a continuousinputandthenyougiveit a discreteoutput.
Nowwe'rebacktothethislaptop, and I'm goingtogethelpdotcomslashWhat's your S x Y w youondeacon?
D'ohslashYou'renotfollowing e.
Peoplefollowpeopleon.
Getupthateither.
I don't think I don't know.
I don't noticethatthere's, like, a follow.
I don't know.
You'reprobablytheonlypersonnowthat I follow.
Uh, soalso, itseemslikewe'reabouttogetthedata, whichiskindoflike a newstage, sowecouldtake, like, I oftenliketotake a breakinthemiddle, justfor a coupleminutes.