123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933693469356936693769386939694069416942694369446945694669476948694969506951695269536954695569566957695869596960696169626963696469656966696769686969697069716972697369746975697669776978697969806981698269836984698569866987698869896990699169926993699469956996699769986999700070017002700370047005700670077008700970107011701270137014701570167017701870197020702170227023702470257026702770287029703070317032703370347035703670377038703970407041704270437044704570467047704870497050705170527053705470557056705770587059706070617062706370647065706670677068706970707071707270737074707570767077707870797080708170827083708470857086708770887089709070917092709370947095709670977098709971007101710271037104710571067107710871097110711171127113711471157116711771187119712071217122712371247125712671277128712971307131713271337134713571367137713871397140714171427143714471457146714771487149715071517152715371547155715671577158715971607161716271637164716571667167716871697170717171727173717471757176717771787179718071817182718371847185718671877188718971907191719271937194719571967197719871997200720172027203720472057206720772087209721072117212721372147215721672177218721972207221722272237224722572267227722872297230723172327233723472357236723772387239724072417242724372447245724672477248724972507251725272537254725572567257725872597260726172627263726472657266726772687269727072717272727372747275727672777278727972807281728272837284728572867287728872897290729172927293729472957296729772987299730073017302730373047305730673077308730973107311731273137314731573167317731873197320732173227323732473257326732773287329733073317332733373347335733673377338733973407341734273437344734573467347734873497350735173527353735473557356735773587359736073617362736373647365736673677368736973707371737273737374737573767377737873797380738173827383738473857386738773887389739073917392739373947395739673977398739974007401740274037404740574067407740874097410741174127413741474157416741774187419742074217422742374247425742674277428742974307431743274337434743574367437743874397440744174427443744474457446744774487449745074517452745374547455745674577458745974607461746274637464746574667467746874697470747174727473747474757476747774787479748074817482748374847485748674877488748974907491749274937494749574967497749874997500750175027503750475057506750775087509751075117512751375147515751675177518751975207521752275237524752575267527752875297530753175327533753475357536753775387539754075417542754375447545754675477548754975507551755275537554755575567557755875597560756175627563756475657566756775687569757075717572757375747575757675777578757975807581758275837584758575867587758875897590759175927593759475957596759775987599760076017602760376047605760676077608760976107611761276137614761576167617761876197620762176227623762476257626762776287629763076317632763376347635763676377638763976407641764276437644764576467647764876497650765176527653765476557656765776587659766076617662766376647665766676677668766976707671767276737674767576767677767876797680768176827683768476857686768776887689769076917692769376947695769676977698769977007701770277037704770577067707770877097710771177127713771477157716771777187719772077217722772377247725772677277728772977307731773277337734773577367737773877397740774177427743774477457746774777487749775077517752775377547755775677577758775977607761776277637764776577667767776877697770777177727773777477757776777777787779778077817782778377847785778677877788778977907791779277937794779577967797779877997800780178027803780478057806780778087809781078117812781378147815781678177818781978207821782278237824782578267827782878297830783178327833783478357836783778387839784078417842784378447845784678477848784978507851785278537854785578567857785878597860786178627863786478657866786778687869787078717872787378747875787678777878787978807881788278837884788578867887788878897890789178927893789478957896789778987899790079017902790379047905790679077908790979107911791279137914791579167917791879197920792179227923792479257926792779287929793079317932793379347935793679377938793979407941794279437944794579467947794879497950795179527953795479557956795779587959796079617962796379647965796679677968796979707971797279737974797579767977797879797980798179827983798479857986798779887989799079917992799379947995799679977998799980008001800280038004800580068007800880098010801180128013801480158016801780188019802080218022802380248025802680278028802980308031803280338034803580368037803880398040804180428043804480458046804780488049805080518052805380548055805680578058805980608061806280638064806580668067806880698070807180728073807480758076807780788079808080818082808380848085808680878088808980908091809280938094809580968097809880998100810181028103810481058106810781088109811081118112811381148115811681178118811981208121812281238124812581268127812881298130813181328133813481358136813781388139814081418142814381448145814681478148814981508151815281538154815581568157815881598160816181628163816481658166816781688169817081718172817381748175817681778178817981808181818281838184818581868187818881898190819181928193819481958196819781988199820082018202820382048205820682078208820982108211821282138214821582168217821882198220822182228223822482258226822782288229823082318232823382348235823682378238823982408241824282438244824582468247824882498250825182528253825482558256825782588259826082618262826382648265826682678268826982708271827282738274827582768277827882798280828182828283828482858286828782888289829082918292829382948295829682978298829983008301830283038304830583068307830883098310831183128313831483158316831783188319832083218322832383248325832683278328832983308331833283338334833583368337833883398340834183428343834483458346834783488349835083518352835383548355835683578358835983608361836283638364836583668367836883698370837183728373837483758376837783788379838083818382838383848385838683878388838983908391839283938394839583968397839883998400840184028403840484058406840784088409841084118412841384148415841684178418841984208421842284238424842584268427842884298430843184328433843484358436843784388439844084418442844384448445844684478448844984508451845284538454845584568457845884598460846184628463846484658466846784688469847084718472847384748475847684778478847984808481848284838484848584868487848884898490849184928493849484958496849784988499850085018502850385048505850685078508850985108511851285138514851585168517851885198520852185228523852485258526852785288529853085318532853385348535853685378538853985408541854285438544854585468547854885498550855185528553855485558556855785588559856085618562856385648565856685678568856985708571857285738574857585768577857885798580858185828583858485858586858785888589859085918592859385948595859685978598859986008601860286038604860586068607860886098610861186128613861486158616861786188619862086218622862386248625862686278628862986308631863286338634863586368637863886398640864186428643864486458646864786488649865086518652865386548655865686578658865986608661866286638664866586668667866886698670867186728673867486758676867786788679868086818682868386848685868686878688868986908691869286938694869586968697869886998700870187028703870487058706870787088709871087118712871387148715871687178718871987208721872287238724872587268727872887298730873187328733873487358736873787388739874087418742874387448745874687478748874987508751875287538754875587568757875887598760876187628763876487658766876787688769877087718772877387748775877687778778877987808781878287838784878587868787878887898790879187928793879487958796879787988799880088018802880388048805880688078808880988108811881288138814881588168817881888198820882188228823882488258826882788288829883088318832883388348835883688378838883988408841884288438844884588468847884888498850885188528853885488558856885788588859886088618862886388648865886688678868886988708871887288738874887588768877887888798880888188828883888488858886888788888889889088918892889388948895889688978898889989008901890289038904890589068907890889098910891189128913891489158916891789188919892089218922892389248925892689278928892989308931893289338934893589368937893889398940894189428943894489458946894789488949895089518952895389548955895689578958895989608961896289638964896589668967896889698970897189728973897489758976897789788979898089818982898389848985898689878988898989908991899289938994899589968997899889999000900190029003900490059006900790089009901090119012901390149015901690179018901990209021902290239024902590269027902890299030903190329033903490359036903790389039904090419042904390449045904690479048904990509051905290539054905590569057905890599060906190629063906490659066906790689069907090719072907390749075907690779078907990809081908290839084908590869087908890899090909190929093909490959096909790989099910091019102910391049105910691079108910991109111911291139114911591169117911891199120912191229123912491259126912791289129913091319132913391349135913691379138913991409141914291439144914591469147914891499150915191529153915491559156915791589159916091619162916391649165916691679168916991709171917291739174917591769177917891799180918191829183918491859186918791889189919091919192919391949195919691979198919992009201920292039204920592069207920892099210921192129213921492159216921792189219922092219222922392249225922692279228922992309231923292339234923592369237923892399240924192429243924492459246924792489249925092519252925392549255925692579258925992609261926292639264926592669267926892699270927192729273927492759276927792789279928092819282928392849285928692879288928992909291929292939294929592969297929892999300930193029303930493059306930793089309931093119312931393149315931693179318931993209321932293239324932593269327932893299330933193329333933493359336933793389339934093419342934393449345934693479348934993509351935293539354935593569357935893599360936193629363936493659366936793689369937093719372937393749375937693779378937993809381938293839384938593869387938893899390939193929393939493959396939793989399940094019402940394049405940694079408940994109411941294139414941594169417941894199420942194229423942494259426942794289429943094319432943394349435943694379438943994409441944294439444944594469447944894499450945194529453945494559456945794589459946094619462946394649465946694679468946994709471947294739474947594769477947894799480948194829483948494859486948794889489949094919492949394949495949694979498949995009501950295039504950595069507950895099510951195129513951495159516951795189519952095219522952395249525952695279528952995309531953295339534953595369537953895399540954195429543954495459546954795489549955095519552955395549555955695579558955995609561956295639564956595669567956895699570957195729573957495759576957795789579958095819582958395849585958695879588958995909591959295939594959595969597959895999600960196029603960496059606960796089609961096119612961396149615961696179618961996209621962296239624962596269627962896299630963196329633963496359636963796389639964096419642964396449645964696479648964996509651965296539654965596569657965896599660966196629663966496659666966796689669967096719672967396749675967696779678967996809681968296839684968596869687968896899690969196929693969496959696969796989699970097019702970397049705970697079708970997109711971297139714971597169717971897199720972197229723972497259726972797289729973097319732973397349735973697379738973997409741974297439744974597469747974897499750975197529753975497559756975797589759976097619762976397649765976697679768976997709771977297739774977597769777977897799780978197829783978497859786978797889789979097919792979397949795979697979798979998009801980298039804980598069807980898099810981198129813981498159816981798189819982098219822982398249825982698279828982998309831983298339834983598369837983898399840984198429843984498459846984798489849985098519852985398549855985698579858985998609861986298639864986598669867986898699870987198729873987498759876987798789879988098819882988398849885988698879888988998909891989298939894989598969897989898999900990199029903990499059906990799089909991099119912991399149915991699179918991999209921992299239924992599269927992899299930993199329933993499359936993799389939994099419942994399449945994699479948994999509951995299539954995599569957995899599960996199629963996499659966996799689969997099719972997399749975997699779978997999809981998299839984998599869987998899899990999199929993999499959996999799989999100001000110002100031000410005100061000710008100091001010011100121001310014100151001610017100181001910020100211002210023100241002510026100271002810029100301003110032100331003410035100361003710038100391004010041100421004310044100451004610047100481004910050100511005210053100541005510056100571005810059100601006110062100631006410065100661006710068100691007010071100721007310074100751007610077100781007910080100811008210083100841008510086100871008810089100901009110092100931009410095100961009710098100991010010101101021010310104101051010610107101081010910110101111011210113101141011510116101171011810119101201012110122101231012410125101261012710128101291013010131101321013310134101351013610137101381013910140101411014210143101441014510146101471014810149101501015110152101531015410155101561015710158101591016010161101621016310164101651016610167101681016910170101711017210173101741017510176101771017810179101801018110182101831018410185101861018710188101891019010191101921019310194101951019610197101981019910200102011020210203102041020510206102071020810209102101021110212102131021410215102161021710218102191022010221102221022310224102251022610227102281022910230102311023210233102341023510236102371023810239102401024110242102431024410245102461024710248102491025010251102521025310254102551025610257102581025910260102611026210263102641026510266102671026810269102701027110272102731027410275102761027710278102791028010281102821028310284102851028610287102881028910290102911029210293102941029510296102971029810299103001030110302103031030410305103061030710308103091031010311103121031310314103151031610317103181031910320103211032210323103241032510326103271032810329103301033110332103331033410335103361033710338103391034010341103421034310344103451034610347103481034910350103511035210353103541035510356103571035810359103601036110362103631036410365103661036710368103691037010371103721037310374103751037610377103781037910380103811038210383103841038510386103871038810389103901039110392103931039410395103961039710398103991040010401104021040310404104051040610407104081040910410104111041210413104141041510416104171041810419104201042110422104231042410425104261042710428104291043010431104321043310434104351043610437104381043910440104411044210443104441044510446104471044810449104501045110452104531045410455104561045710458104591046010461104621046310464104651046610467104681046910470104711047210473104741047510476104771047810479104801048110482104831048410485104861048710488104891049010491104921049310494104951049610497104981049910500105011050210503105041050510506105071050810509105101051110512105131051410515105161051710518105191052010521105221052310524105251052610527105281052910530105311053210533105341053510536105371053810539105401054110542105431054410545105461054710548105491055010551105521055310554105551055610557105581055910560105611056210563105641056510566105671056810569105701057110572105731057410575105761057710578105791058010581105821058310584105851058610587105881058910590105911059210593105941059510596105971059810599106001060110602106031060410605106061060710608106091061010611106121061310614106151061610617106181061910620106211062210623106241062510626106271062810629106301063110632106331063410635106361063710638106391064010641106421064310644106451064610647106481064910650106511065210653106541065510656106571065810659106601066110662106631066410665106661066710668106691067010671106721067310674106751067610677106781067910680106811068210683106841068510686106871068810689106901069110692106931069410695106961069710698106991070010701107021070310704107051070610707107081070910710107111071210713107141071510716107171071810719107201072110722107231072410725107261072710728107291073010731107321073310734107351073610737107381073910740107411074210743107441074510746107471074810749107501075110752107531075410755107561075710758107591076010761107621076310764107651076610767107681076910770107711077210773107741077510776107771077810779107801078110782107831078410785107861078710788107891079010791107921079310794107951079610797107981079910800108011080210803108041080510806108071080810809108101081110812108131081410815108161081710818108191082010821108221082310824108251082610827108281082910830108311083210833108341083510836108371083810839108401084110842108431084410845108461084710848108491085010851108521085310854108551085610857108581085910860108611086210863108641086510866108671086810869108701087110872108731087410875108761087710878108791088010881108821088310884108851088610887108881088910890108911089210893108941089510896108971089810899109001090110902109031090410905109061090710908109091091010911109121091310914109151091610917109181091910920109211092210923109241092510926109271092810929109301093110932109331093410935109361093710938109391094010941109421094310944109451094610947109481094910950109511095210953109541095510956109571095810959109601096110962109631096410965109661096710968109691097010971109721097310974109751097610977109781097910980109811098210983109841098510986109871098810989109901099110992109931099410995109961099710998109991100011001110021100311004110051100611007110081100911010110111101211013110141101511016110171101811019110201102111022110231102411025110261102711028110291103011031110321103311034110351103611037110381103911040110411104211043110441104511046110471104811049110501105111052110531105411055110561105711058110591106011061110621106311064110651106611067110681106911070110711107211073110741107511076110771107811079110801108111082110831108411085110861108711088110891109011091110921109311094110951109611097110981109911100111011110211103111041110511106111071110811109111101111111112111131111411115111161111711118111191112011121111221112311124111251112611127111281112911130111311113211133111341113511136111371113811139111401114111142111431114411145111461114711148111491115011151111521115311154111551115611157111581115911160111611116211163111641116511166111671116811169111701117111172111731117411175111761117711178111791118011181111821118311184111851118611187111881118911190111911119211193111941119511196111971119811199112001120111202112031120411205112061120711208112091121011211112121121311214112151121611217112181121911220112211122211223112241122511226112271122811229112301123111232112331123411235112361123711238112391124011241112421124311244112451124611247112481124911250112511125211253112541125511256112571125811259112601126111262112631126411265112661126711268112691127011271112721127311274112751127611277112781127911280112811128211283112841128511286112871128811289112901129111292112931129411295112961129711298112991130011301113021130311304113051130611307113081130911310113111131211313113141131511316113171131811319113201132111322113231132411325113261132711328113291133011331113321133311334113351133611337113381133911340113411134211343113441134511346113471134811349113501135111352113531135411355113561135711358113591136011361113621136311364113651136611367113681136911370113711137211373113741137511376113771137811379113801138111382113831138411385113861138711388113891139011391113921139311394113951139611397113981139911400114011140211403114041140511406114071140811409114101141111412114131141411415114161141711418114191142011421114221142311424114251142611427114281142911430114311143211433114341143511436114371143811439114401144111442114431144411445114461144711448114491145011451114521145311454114551145611457114581145911460114611146211463114641146511466114671146811469114701147111472114731147411475114761147711478114791148011481114821148311484114851148611487114881148911490114911149211493114941149511496114971149811499115001150111502115031150411505115061150711508115091151011511115121151311514115151151611517115181151911520115211152211523115241152511526115271152811529115301153111532115331153411535115361153711538115391154011541115421154311544115451154611547115481154911550115511155211553115541155511556115571155811559115601156111562115631156411565115661156711568115691157011571115721157311574115751157611577115781157911580115811158211583115841158511586115871158811589115901159111592115931159411595115961159711598115991160011601116021160311604116051160611607116081160911610116111161211613116141161511616116171161811619116201162111622116231162411625116261162711628116291163011631116321163311634116351163611637116381163911640116411164211643116441164511646116471164811649116501165111652116531165411655116561165711658116591166011661116621166311664116651166611667116681166911670116711167211673116741167511676116771167811679116801168111682116831168411685116861168711688116891169011691116921169311694116951169611697116981169911700117011170211703117041170511706117071170811709117101171111712117131171411715117161171711718117191172011721117221172311724117251172611727117281172911730117311173211733117341173511736117371173811739117401174111742117431174411745117461174711748117491175011751117521175311754117551175611757117581175911760117611176211763117641176511766117671176811769117701177111772117731177411775117761177711778117791178011781117821178311784117851178611787117881178911790117911179211793117941179511796117971179811799118001180111802118031180411805118061180711808118091181011811118121181311814118151181611817118181181911820118211182211823118241182511826118271182811829118301183111832118331183411835118361183711838118391184011841118421184311844118451184611847118481184911850118511185211853118541185511856118571185811859118601186111862118631186411865118661186711868118691187011871118721187311874118751187611877118781187911880118811188211883118841188511886118871188811889118901189111892118931189411895118961189711898118991190011901119021190311904119051190611907119081190911910119111191211913119141191511916119171191811919119201192111922119231192411925119261192711928119291193011931119321193311934119351193611937119381193911940119411194211943119441194511946119471194811949119501195111952119531195411955119561195711958119591196011961119621196311964119651196611967119681196911970119711197211973119741197511976119771197811979119801198111982119831198411985119861198711988119891199011991119921199311994119951199611997119981199912000120011200212003120041200512006120071200812009120101201112012120131201412015120161201712018120191202012021120221202312024120251202612027120281202912030120311203212033120341203512036120371203812039120401204112042120431204412045120461204712048120491205012051120521205312054120551205612057120581205912060120611206212063120641206512066120671206812069120701207112072120731207412075120761207712078120791208012081120821208312084120851208612087120881208912090120911209212093120941209512096120971209812099121001210112102121031210412105121061210712108121091211012111121121211312114121151211612117121181211912120121211212212123121241212512126121271212812129121301213112132121331213412135121361213712138121391214012141121421214312144121451214612147121481214912150121511215212153121541215512156121571215812159121601216112162121631216412165121661216712168121691217012171121721217312174121751217612177121781217912180121811218212183121841218512186121871218812189121901219112192121931219412195121961219712198121991220012201122021220312204122051220612207122081220912210122111221212213122141221512216122171221812219122201222112222122231222412225122261222712228122291223012231122321223312234122351223612237122381223912240122411224212243122441224512246122471224812249122501225112252122531225412255122561225712258122591226012261122621226312264122651226612267122681226912270122711227212273122741227512276122771227812279122801228112282122831228412285122861228712288122891229012291122921229312294122951229612297122981229912300123011230212303123041230512306123071230812309123101231112312123131231412315123161231712318123191232012321123221232312324123251232612327123281232912330123311233212333123341233512336123371233812339123401234112342123431234412345123461234712348123491235012351123521235312354123551235612357123581235912360123611236212363123641236512366123671236812369123701237112372123731237412375123761237712378123791238012381123821238312384123851238612387123881238912390123911239212393123941239512396123971239812399124001240112402124031240412405124061240712408124091241012411124121241312414124151241612417124181241912420124211242212423124241242512426124271242812429124301243112432124331243412435124361243712438124391244012441124421244312444124451244612447124481244912450124511245212453124541245512456124571245812459124601246112462124631246412465124661246712468124691247012471124721247312474124751247612477124781247912480124811248212483124841248512486124871248812489124901249112492124931249412495124961249712498124991250012501125021250312504125051250612507125081250912510125111251212513125141251512516125171251812519125201252112522125231252412525125261252712528125291253012531125321253312534125351253612537125381253912540125411254212543125441254512546125471254812549125501255112552125531255412555125561255712558125591256012561125621256312564125651256612567125681256912570125711257212573125741257512576125771257812579125801258112582125831258412585125861258712588125891259012591125921259312594125951259612597125981259912600126011260212603126041260512606126071260812609126101261112612126131261412615126161261712618126191262012621126221262312624126251262612627126281262912630126311263212633126341263512636126371263812639126401264112642126431264412645126461264712648126491265012651126521265312654126551265612657126581265912660126611266212663126641266512666126671266812669126701267112672126731267412675126761267712678126791268012681126821268312684126851268612687126881268912690126911269212693126941269512696126971269812699127001270112702127031270412705127061270712708127091271012711127121271312714127151271612717127181271912720127211272212723127241272512726127271272812729127301273112732127331273412735127361273712738127391274012741127421274312744127451274612747127481274912750127511275212753127541275512756127571275812759127601276112762127631276412765127661276712768127691277012771127721277312774127751277612777127781277912780127811278212783127841278512786127871278812789127901279112792127931279412795127961279712798127991280012801128021280312804128051280612807128081280912810128111281212813128141281512816128171281812819128201282112822128231282412825128261282712828128291283012831128321283312834128351283612837128381283912840128411284212843128441284512846128471284812849128501285112852128531285412855128561285712858128591286012861128621286312864128651286612867128681286912870128711287212873128741287512876128771287812879128801288112882128831288412885128861288712888128891289012891128921289312894128951289612897128981289912900129011290212903129041290512906129071290812909129101291112912129131291412915129161291712918129191292012921129221292312924129251292612927129281292912930129311293212933129341293512936129371293812939129401294112942129431294412945129461294712948129491295012951129521295312954129551295612957129581295912960129611296212963129641296512966129671296812969129701297112972129731297412975129761297712978129791298012981129821298312984129851298612987129881298912990129911299212993129941299512996129971299812999130001300113002130031300413005130061300713008130091301013011130121301313014130151301613017130181301913020130211302213023130241302513026130271302813029130301303113032130331303413035130361303713038130391304013041130421304313044130451304613047130481304913050130511305213053130541305513056130571305813059130601306113062130631306413065130661306713068130691307013071130721307313074130751307613077130781307913080130811308213083130841308513086130871308813089130901309113092130931309413095130961309713098130991310013101131021310313104131051310613107131081310913110131111311213113131141311513116131171311813119131201312113122131231312413125131261312713128131291313013131131321313313134131351313613137131381313913140131411314213143131441314513146131471314813149131501315113152131531315413155131561315713158131591316013161131621316313164131651316613167131681316913170131711317213173131741317513176131771317813179131801318113182131831318413185131861318713188131891319013191131921319313194131951319613197131981319913200132011320213203132041320513206132071320813209132101321113212132131321413215132161321713218132191322013221132221322313224132251322613227132281322913230132311323213233132341323513236132371323813239132401324113242132431324413245132461324713248132491325013251132521325313254132551325613257132581325913260132611326213263132641326513266132671326813269132701327113272132731327413275132761327713278132791328013281132821328313284132851328613287132881328913290132911329213293132941329513296132971329813299133001330113302133031330413305133061330713308133091331013311133121331313314133151331613317133181331913320133211332213323133241332513326133271332813329133301333113332133331333413335133361333713338133391334013341133421334313344133451334613347133481334913350133511335213353133541335513356133571335813359133601336113362133631336413365133661336713368133691337013371133721337313374133751337613377133781337913380133811338213383133841338513386133871338813389133901339113392133931339413395133961339713398133991340013401134021340313404134051340613407134081340913410134111341213413134141341513416134171341813419134201342113422134231342413425134261342713428134291343013431134321343313434134351343613437134381343913440134411344213443134441344513446134471344813449134501345113452134531345413455134561345713458134591346013461134621346313464134651346613467134681346913470134711347213473134741347513476134771347813479134801348113482134831348413485134861348713488134891349013491134921349313494134951349613497134981349913500135011350213503135041350513506135071350813509135101351113512135131351413515135161351713518135191352013521135221352313524135251352613527135281352913530135311353213533135341353513536135371353813539135401354113542135431354413545135461354713548135491355013551135521355313554135551355613557135581355913560135611356213563135641356513566135671356813569135701357113572135731357413575135761357713578135791358013581135821358313584135851358613587135881358913590135911359213593135941359513596135971359813599136001360113602136031360413605136061360713608136091361013611136121361313614136151361613617136181361913620136211362213623136241362513626136271362813629136301363113632136331363413635136361363713638136391364013641136421364313644136451364613647136481364913650136511365213653136541365513656136571365813659136601366113662136631366413665136661366713668136691367013671136721367313674136751367613677136781367913680136811368213683136841368513686136871368813689136901369113692136931369413695136961369713698136991370013701137021370313704137051370613707137081370913710137111371213713137141371513716137171371813719137201372113722137231372413725137261372713728137291373013731137321373313734137351373613737137381373913740137411374213743137441374513746137471374813749137501375113752137531375413755137561375713758137591376013761137621376313764137651376613767137681376913770137711377213773137741377513776137771377813779137801378113782137831378413785137861378713788137891379013791137921379313794137951379613797137981379913800138011380213803138041380513806138071380813809138101381113812138131381413815138161381713818138191382013821138221382313824138251382613827138281382913830138311383213833138341383513836138371383813839138401384113842138431384413845138461384713848138491385013851138521385313854138551385613857138581385913860138611386213863138641386513866138671386813869138701387113872138731387413875138761387713878138791388013881138821388313884138851388613887138881388913890138911389213893138941389513896138971389813899139001390113902139031390413905139061390713908139091391013911139121391313914139151391613917139181391913920139211392213923139241392513926139271392813929139301393113932139331393413935139361393713938139391394013941139421394313944139451394613947139481394913950139511395213953139541395513956139571395813959139601396113962139631396413965139661396713968139691397013971139721397313974139751397613977139781397913980139811398213983139841398513986139871398813989139901399113992139931399413995139961399713998139991400014001140021400314004140051400614007140081400914010140111401214013140141401514016140171401814019140201402114022140231402414025140261402714028140291403014031140321403314034140351403614037140381403914040140411404214043140441404514046140471404814049140501405114052140531405414055140561405714058140591406014061140621406314064140651406614067140681406914070140711407214073140741407514076140771407814079140801408114082140831408414085140861408714088140891409014091140921409314094140951409614097140981409914100141011410214103141041410514106141071410814109141101411114112141131411414115141161411714118141191412014121141221412314124141251412614127141281412914130141311413214133141341413514136141371413814139141401414114142141431414414145141461414714148141491415014151141521415314154141551415614157141581415914160141611416214163141641416514166141671416814169141701417114172141731417414175141761417714178141791418014181141821418314184141851418614187141881418914190141911419214193141941419514196141971419814199142001420114202142031420414205142061420714208142091421014211142121421314214142151421614217142181421914220142211422214223142241422514226142271422814229142301423114232142331423414235142361423714238142391424014241142421424314244142451424614247142481424914250142511425214253142541425514256142571425814259142601426114262142631426414265142661426714268142691427014271142721427314274142751427614277142781427914280142811428214283142841428514286142871428814289142901429114292142931429414295142961429714298142991430014301143021430314304143051430614307143081430914310143111431214313143141431514316143171431814319143201432114322143231432414325143261432714328143291433014331143321433314334143351433614337143381433914340143411434214343143441434514346143471434814349143501435114352143531435414355143561435714358143591436014361143621436314364143651436614367143681436914370143711437214373143741437514376143771437814379143801438114382143831438414385143861438714388143891439014391143921439314394143951439614397143981439914400144011440214403144041440514406144071440814409144101441114412144131441414415144161441714418144191442014421144221442314424144251442614427144281442914430144311443214433144341443514436144371443814439144401444114442144431444414445144461444714448144491445014451144521445314454144551445614457144581445914460144611446214463144641446514466144671446814469144701447114472144731447414475144761447714478144791448014481144821448314484144851448614487144881448914490144911449214493144941449514496144971449814499145001450114502145031450414505145061450714508145091451014511145121451314514145151451614517145181451914520145211452214523145241452514526145271452814529145301453114532145331453414535145361453714538145391454014541145421454314544145451454614547145481454914550145511455214553145541455514556145571455814559145601456114562145631456414565145661456714568145691457014571145721457314574145751457614577145781457914580145811458214583145841458514586145871458814589145901459114592145931459414595145961459714598145991460014601146021460314604146051460614607146081460914610146111461214613146141461514616146171461814619146201462114622146231462414625146261462714628146291463014631146321463314634146351463614637146381463914640146411464214643146441464514646146471464814649146501465114652146531465414655146561465714658146591466014661146621466314664146651466614667146681466914670146711467214673146741467514676146771467814679146801468114682146831468414685146861468714688146891469014691146921469314694146951469614697146981469914700147011470214703147041470514706147071470814709147101471114712147131471414715147161471714718147191472014721147221472314724147251472614727147281472914730147311473214733147341473514736147371473814739147401474114742147431474414745147461474714748147491475014751147521475314754147551475614757147581475914760147611476214763147641476514766147671476814769147701477114772147731477414775147761477714778147791478014781147821478314784147851478614787147881478914790147911479214793147941479514796147971479814799148001480114802148031480414805148061480714808148091481014811148121481314814148151481614817148181481914820148211482214823148241482514826148271482814829148301483114832148331483414835148361483714838148391484014841148421484314844148451484614847148481484914850148511485214853148541485514856148571485814859148601486114862148631486414865148661486714868148691487014871148721487314874148751487614877148781487914880148811488214883148841488514886148871488814889148901489114892148931489414895148961489714898148991490014901149021490314904149051490614907149081490914910149111491214913149141491514916149171491814919149201492114922149231492414925149261492714928149291493014931149321493314934149351493614937149381493914940149411494214943149441494514946149471494814949149501495114952149531495414955149561495714958149591496014961149621496314964149651496614967149681496914970149711497214973149741497514976149771497814979149801498114982149831498414985149861498714988149891499014991149921499314994149951499614997149981499915000150011500215003150041500515006150071500815009150101501115012150131501415015150161501715018150191502015021150221502315024150251502615027150281502915030150311503215033150341503515036150371503815039150401504115042150431504415045150461504715048150491505015051150521505315054150551505615057150581505915060150611506215063150641506515066150671506815069150701507115072150731507415075150761507715078150791508015081150821508315084150851508615087150881508915090150911509215093150941509515096150971509815099151001510115102151031510415105151061510715108151091511015111151121511315114151151511615117151181511915120151211512215123151241512515126151271512815129151301513115132151331513415135151361513715138151391514015141151421514315144151451514615147151481514915150151511515215153151541515515156151571515815159151601516115162151631516415165151661516715168151691517015171151721517315174151751517615177151781517915180151811518215183151841518515186151871518815189151901519115192151931519415195151961519715198151991520015201152021520315204152051520615207152081520915210152111521215213152141521515216152171521815219152201522115222152231522415225152261522715228152291523015231152321523315234152351523615237152381523915240152411524215243152441524515246152471524815249152501525115252152531525415255152561525715258152591526015261152621526315264152651526615267152681526915270152711527215273152741527515276152771527815279152801528115282152831528415285152861528715288152891529015291152921529315294152951529615297152981529915300153011530215303153041530515306153071530815309153101531115312153131531415315153161531715318153191532015321153221532315324153251532615327153281532915330153311533215333153341533515336153371533815339153401534115342153431534415345153461534715348153491535015351153521535315354153551535615357153581535915360153611536215363153641536515366153671536815369153701537115372153731537415375153761537715378153791538015381153821538315384153851538615387153881538915390153911539215393153941539515396153971539815399154001540115402154031540415405154061540715408154091541015411154121541315414154151541615417154181541915420154211542215423154241542515426154271542815429154301543115432154331543415435154361543715438154391544015441154421544315444154451544615447154481544915450154511545215453154541545515456154571545815459154601546115462154631546415465154661546715468154691547015471154721547315474154751547615477154781547915480154811548215483154841548515486154871548815489154901549115492154931549415495154961549715498154991550015501155021550315504155051550615507155081550915510155111551215513155141551515516155171551815519155201552115522155231552415525155261552715528155291553015531155321553315534155351553615537155381553915540155411554215543155441554515546155471554815549155501555115552155531555415555155561555715558155591556015561155621556315564155651556615567155681556915570155711557215573155741557515576155771557815579155801558115582155831558415585155861558715588155891559015591155921559315594155951559615597155981559915600156011560215603156041560515606156071560815609156101561115612156131561415615156161561715618156191562015621156221562315624156251562615627156281562915630156311563215633156341563515636156371563815639156401564115642156431564415645156461564715648156491565015651156521565315654156551565615657156581565915660156611566215663156641566515666156671566815669156701567115672156731567415675156761567715678156791568015681156821568315684156851568615687156881568915690156911569215693156941569515696156971569815699157001570115702157031570415705157061570715708157091571015711157121571315714157151571615717157181571915720157211572215723157241572515726157271572815729157301573115732157331573415735157361573715738157391574015741157421574315744157451574615747157481574915750157511575215753157541575515756157571575815759157601576115762157631576415765157661576715768157691577015771157721577315774157751577615777157781577915780157811578215783157841578515786157871578815789157901579115792157931579415795157961579715798157991580015801158021580315804158051580615807158081580915810158111581215813158141581515816158171581815819158201582115822158231582415825158261582715828158291583015831158321583315834158351583615837158381583915840158411584215843158441584515846158471584815849158501585115852158531585415855158561585715858158591586015861158621586315864158651586615867158681586915870158711587215873158741587515876158771587815879158801588115882158831588415885158861588715888158891589015891158921589315894158951589615897158981589915900159011590215903159041590515906159071590815909159101591115912159131591415915159161591715918159191592015921159221592315924159251592615927159281592915930159311593215933159341593515936159371593815939159401594115942159431594415945159461594715948159491595015951159521595315954159551595615957159581595915960159611596215963159641596515966159671596815969159701597115972159731597415975159761597715978159791598015981159821598315984159851598615987159881598915990159911599215993159941599515996159971599815999160001600116002160031600416005160061600716008160091601016011160121601316014160151601616017160181601916020160211602216023160241602516026160271602816029160301603116032160331603416035160361603716038160391604016041160421604316044160451604616047160481604916050160511605216053160541605516056160571605816059160601606116062160631606416065160661606716068160691607016071160721607316074160751607616077160781607916080160811608216083160841608516086160871608816089160901609116092160931609416095160961609716098160991610016101161021610316104161051610616107161081610916110161111611216113161141611516116161171611816119161201612116122161231612416125161261612716128161291613016131161321613316134161351613616137161381613916140161411614216143161441614516146161471614816149161501615116152161531615416155161561615716158161591616016161161621616316164161651616616167161681616916170161711617216173161741617516176161771617816179161801618116182161831618416185161861618716188161891619016191161921619316194161951619616197161981619916200162011620216203162041620516206162071620816209162101621116212162131621416215162161621716218162191622016221162221622316224162251622616227162281622916230162311623216233162341623516236162371623816239162401624116242162431624416245162461624716248162491625016251162521625316254162551625616257162581625916260162611626216263162641626516266162671626816269162701627116272162731627416275162761627716278162791628016281162821628316284162851628616287162881628916290162911629216293162941629516296162971629816299163001630116302163031630416305163061630716308163091631016311163121631316314163151631616317163181631916320163211632216323163241632516326163271632816329163301633116332163331633416335163361633716338163391634016341163421634316344163451634616347163481634916350163511635216353163541635516356163571635816359163601636116362163631636416365163661636716368163691637016371163721637316374163751637616377163781637916380163811638216383163841638516386163871638816389163901639116392163931639416395163961639716398163991640016401164021640316404164051640616407164081640916410164111641216413164141641516416164171641816419164201642116422164231642416425164261642716428164291643016431164321643316434164351643616437164381643916440164411644216443164441644516446164471644816449164501645116452164531645416455164561645716458164591646016461164621646316464164651646616467164681646916470164711647216473164741647516476164771647816479164801648116482164831648416485164861648716488164891649016491164921649316494164951649616497164981649916500165011650216503165041650516506165071650816509165101651116512165131651416515165161651716518165191652016521165221652316524165251652616527165281652916530165311653216533165341653516536165371653816539165401654116542165431654416545165461654716548165491655016551165521655316554165551655616557165581655916560165611656216563165641656516566165671656816569165701657116572165731657416575165761657716578165791658016581165821658316584165851658616587165881658916590165911659216593165941659516596165971659816599166001660116602166031660416605166061660716608166091661016611166121661316614166151661616617166181661916620166211662216623166241662516626166271662816629166301663116632166331663416635166361663716638166391664016641166421664316644166451664616647166481664916650166511665216653166541665516656166571665816659166601666116662166631666416665166661666716668166691667016671166721667316674166751667616677166781667916680166811668216683166841668516686166871668816689166901669116692166931669416695166961669716698166991670016701167021670316704167051670616707167081670916710167111671216713167141671516716167171671816719167201672116722167231672416725167261672716728167291673016731167321673316734167351673616737167381673916740167411674216743167441674516746167471674816749167501675116752167531675416755167561675716758167591676016761167621676316764167651676616767167681676916770167711677216773167741677516776167771677816779167801678116782167831678416785167861678716788167891679016791167921679316794167951679616797167981679916800168011680216803168041680516806168071680816809168101681116812168131681416815168161681716818168191682016821168221682316824168251682616827168281682916830168311683216833168341683516836168371683816839168401684116842168431684416845168461684716848168491685016851168521685316854168551685616857168581685916860168611686216863168641686516866168671686816869168701687116872168731687416875168761687716878168791688016881168821688316884168851688616887168881688916890168911689216893168941689516896168971689816899169001690116902169031690416905169061690716908169091691016911169121691316914169151691616917169181691916920169211692216923169241692516926169271692816929169301693116932169331693416935169361693716938169391694016941169421694316944169451694616947169481694916950169511695216953169541695516956169571695816959169601696116962169631696416965169661696716968169691697016971169721697316974169751697616977169781697916980169811698216983169841698516986169871698816989169901699116992169931699416995169961699716998169991700017001170021700317004170051700617007170081700917010170111701217013170141701517016170171701817019170201702117022170231702417025170261702717028170291703017031170321703317034170351703617037170381703917040170411704217043170441704517046170471704817049170501705117052170531705417055170561705717058170591706017061170621706317064170651706617067170681706917070170711707217073170741707517076170771707817079170801708117082170831708417085170861708717088170891709017091170921709317094170951709617097170981709917100171011710217103171041710517106171071710817109171101711117112171131711417115171161711717118171191712017121171221712317124171251712617127171281712917130171311713217133171341713517136171371713817139171401714117142171431714417145171461714717148171491715017151171521715317154171551715617157171581715917160171611716217163171641716517166171671716817169171701717117172171731717417175171761717717178171791718017181171821718317184171851718617187171881718917190171911719217193171941719517196171971719817199172001720117202172031720417205172061720717208172091721017211172121721317214172151721617217172181721917220172211722217223172241722517226172271722817229172301723117232172331723417235172361723717238172391724017241172421724317244172451724617247172481724917250172511725217253172541725517256172571725817259172601726117262172631726417265172661726717268172691727017271172721727317274172751727617277172781727917280172811728217283172841728517286172871728817289172901729117292172931729417295172961729717298172991730017301173021730317304173051730617307173081730917310173111731217313173141731517316173171731817319173201732117322173231732417325173261732717328173291733017331173321733317334173351733617337173381733917340173411734217343173441734517346173471734817349173501735117352173531735417355173561735717358173591736017361173621736317364173651736617367173681736917370173711737217373173741737517376173771737817379173801738117382173831738417385173861738717388173891739017391173921739317394173951739617397173981739917400174011740217403174041740517406174071740817409174101741117412174131741417415174161741717418174191742017421174221742317424174251742617427174281742917430174311743217433174341743517436174371743817439174401744117442174431744417445174461744717448174491745017451174521745317454174551745617457174581745917460174611746217463174641746517466174671746817469174701747117472174731747417475174761747717478174791748017481174821748317484174851748617487174881748917490174911749217493174941749517496174971749817499175001750117502175031750417505175061750717508175091751017511175121751317514175151751617517175181751917520175211752217523175241752517526175271752817529175301753117532175331753417535175361753717538175391754017541175421754317544175451754617547175481754917550175511755217553175541755517556175571755817559175601756117562175631756417565175661756717568175691757017571175721757317574175751757617577175781757917580175811758217583175841758517586175871758817589175901759117592175931759417595175961759717598175991760017601176021760317604176051760617607176081760917610176111761217613176141761517616176171761817619176201762117622176231762417625176261762717628176291763017631176321763317634176351763617637176381763917640176411764217643176441764517646176471764817649176501765117652176531765417655176561765717658176591766017661176621766317664176651766617667176681766917670176711767217673176741767517676176771767817679176801768117682176831768417685176861768717688176891769017691176921769317694176951769617697176981769917700177011770217703177041770517706177071770817709177101771117712177131771417715177161771717718177191772017721177221772317724177251772617727177281772917730177311773217733177341773517736177371773817739177401774117742177431774417745177461774717748177491775017751177521775317754177551775617757177581775917760177611776217763177641776517766177671776817769177701777117772177731777417775177761777717778177791778017781177821778317784177851778617787177881778917790177911779217793177941779517796177971779817799178001780117802178031780417805178061780717808178091781017811178121781317814178151781617817178181781917820178211782217823178241782517826178271782817829178301783117832178331783417835178361783717838178391784017841178421784317844178451784617847178481784917850178511785217853178541785517856178571785817859178601786117862178631786417865178661786717868178691787017871178721787317874178751787617877178781787917880178811788217883178841788517886178871788817889178901789117892178931789417895178961789717898178991790017901179021790317904179051790617907179081790917910179111791217913179141791517916179171791817919179201792117922179231792417925179261792717928179291793017931179321793317934179351793617937179381793917940179411794217943179441794517946179471794817949179501795117952179531795417955179561795717958179591796017961179621796317964179651796617967179681796917970179711797217973179741797517976179771797817979179801798117982179831798417985179861798717988179891799017991179921799317994179951799617997179981799918000180011800218003180041800518006180071800818009180101801118012180131801418015180161801718018180191802018021180221802318024180251802618027180281802918030180311803218033180341803518036180371803818039180401804118042180431804418045180461804718048180491805018051180521805318054180551805618057180581805918060180611806218063180641806518066180671806818069180701807118072180731807418075180761807718078180791808018081180821808318084180851808618087180881808918090180911809218093180941809518096180971809818099181001810118102181031810418105181061810718108181091811018111181121811318114181151811618117181181811918120181211812218123181241812518126181271812818129181301813118132181331813418135181361813718138181391814018141181421814318144181451814618147181481814918150181511815218153181541815518156181571815818159181601816118162181631816418165181661816718168181691817018171181721817318174181751817618177181781817918180181811818218183181841818518186181871818818189181901819118192181931819418195181961819718198181991820018201182021820318204182051820618207182081820918210182111821218213182141821518216182171821818219182201822118222182231822418225182261822718228182291823018231182321823318234182351823618237182381823918240182411824218243182441824518246182471824818249182501825118252182531825418255182561825718258182591826018261182621826318264182651826618267182681826918270182711827218273182741827518276182771827818279182801828118282182831828418285182861828718288182891829018291182921829318294182951829618297182981829918300183011830218303183041830518306183071830818309183101831118312183131831418315183161831718318183191832018321183221832318324183251832618327183281832918330183311833218333183341833518336183371833818339183401834118342183431834418345183461834718348183491835018351183521835318354183551835618357183581835918360183611836218363183641836518366183671836818369183701837118372183731837418375183761837718378183791838018381183821838318384183851838618387183881838918390183911839218393183941839518396183971839818399184001840118402184031840418405184061840718408184091841018411184121841318414184151841618417184181841918420184211842218423184241842518426184271842818429184301843118432184331843418435184361843718438184391844018441184421844318444184451844618447184481844918450184511845218453184541845518456184571845818459184601846118462184631846418465184661846718468184691847018471184721847318474184751847618477184781847918480184811848218483184841848518486184871848818489184901849118492184931849418495184961849718498184991850018501185021850318504185051850618507185081850918510185111851218513185141851518516185171851818519185201852118522185231852418525185261852718528185291853018531185321853318534185351853618537185381853918540185411854218543185441854518546185471854818549185501855118552185531855418555185561855718558185591856018561185621856318564185651856618567185681856918570185711857218573185741857518576185771857818579185801858118582185831858418585185861858718588185891859018591185921859318594185951859618597185981859918600186011860218603186041860518606186071860818609186101861118612186131861418615186161861718618186191862018621186221862318624186251862618627186281862918630186311863218633186341863518636186371863818639186401864118642186431864418645186461864718648186491865018651186521865318654186551865618657186581865918660186611866218663186641866518666186671866818669186701867118672186731867418675186761867718678186791868018681186821868318684186851868618687186881868918690186911869218693186941869518696186971869818699187001870118702187031870418705187061870718708187091871018711187121871318714187151871618717187181871918720187211872218723187241872518726187271872818729187301873118732187331873418735187361873718738187391874018741187421874318744187451874618747187481874918750187511875218753187541875518756187571875818759187601876118762187631876418765187661876718768187691877018771187721877318774187751877618777187781877918780187811878218783187841878518786187871878818789187901879118792187931879418795187961879718798187991880018801188021880318804188051880618807188081880918810188111881218813188141881518816188171881818819188201882118822188231882418825188261882718828188291883018831188321883318834188351883618837188381883918840188411884218843188441884518846188471884818849188501885118852188531885418855188561885718858188591886018861188621886318864188651886618867188681886918870188711887218873188741887518876188771887818879188801888118882188831888418885188861888718888188891889018891188921889318894188951889618897188981889918900189011890218903189041890518906189071890818909189101891118912189131891418915189161891718918189191892018921189221892318924189251892618927189281892918930189311893218933189341893518936189371893818939189401894118942189431894418945189461894718948189491895018951189521895318954189551895618957189581895918960189611896218963189641896518966189671896818969189701897118972189731897418975189761897718978189791898018981189821898318984189851898618987189881898918990189911899218993189941899518996189971899818999190001900119002190031900419005190061900719008190091901019011190121901319014190151901619017190181901919020190211902219023190241902519026190271902819029190301903119032190331903419035190361903719038190391904019041190421904319044190451904619047190481904919050190511905219053190541905519056190571905819059190601906119062190631906419065190661906719068190691907019071190721907319074190751907619077190781907919080190811908219083190841908519086190871908819089190901909119092190931909419095190961909719098190991910019101191021910319104191051910619107191081910919110191111911219113191141911519116191171911819119191201912119122191231912419125191261912719128191291913019131191321913319134191351913619137191381913919140191411914219143191441914519146191471914819149191501915119152191531915419155191561915719158191591916019161191621916319164191651916619167191681916919170191711917219173191741917519176191771917819179191801918119182191831918419185191861918719188191891919019191191921919319194191951919619197191981919919200192011920219203192041920519206192071920819209192101921119212192131921419215192161921719218192191922019221192221922319224192251922619227192281922919230192311923219233192341923519236192371923819239192401924119242192431924419245192461924719248192491925019251192521925319254192551925619257192581925919260192611926219263192641926519266192671926819269192701927119272192731927419275192761927719278192791928019281192821928319284192851928619287192881928919290192911929219293192941929519296192971929819299193001930119302193031930419305193061930719308193091931019311193121931319314193151931619317193181931919320193211932219323193241932519326193271932819329193301933119332193331933419335193361933719338193391934019341193421934319344193451934619347193481934919350193511935219353193541935519356193571935819359193601936119362193631936419365193661936719368193691937019371193721937319374193751937619377193781937919380193811938219383193841938519386193871938819389193901939119392193931939419395193961939719398193991940019401194021940319404194051940619407194081940919410194111941219413194141941519416194171941819419194201942119422194231942419425194261942719428194291943019431194321943319434194351943619437194381943919440194411944219443194441944519446194471944819449194501945119452194531945419455194561945719458194591946019461194621946319464194651946619467194681946919470194711947219473194741947519476194771947819479194801948119482194831948419485194861948719488194891949019491194921949319494194951949619497194981949919500195011950219503195041950519506195071950819509195101951119512195131951419515195161951719518195191952019521195221952319524195251952619527195281952919530195311953219533195341953519536195371953819539195401954119542195431954419545195461954719548195491955019551195521955319554195551955619557195581955919560195611956219563195641956519566195671956819569195701957119572195731957419575195761957719578195791958019581195821958319584195851958619587195881958919590195911959219593195941959519596195971959819599196001960119602196031960419605196061960719608196091961019611196121961319614196151961619617196181961919620196211962219623196241962519626196271962819629196301963119632196331963419635196361963719638196391964019641196421964319644196451964619647196481964919650196511965219653196541965519656196571965819659196601966119662196631966419665196661966719668196691967019671196721967319674196751967619677196781967919680196811968219683196841968519686196871968819689196901969119692196931969419695196961969719698196991970019701197021970319704197051970619707197081970919710197111971219713197141971519716197171971819719197201972119722197231972419725197261972719728197291973019731197321973319734197351973619737197381973919740197411974219743197441974519746197471974819749197501975119752197531975419755197561975719758197591976019761197621976319764197651976619767197681976919770197711977219773197741977519776197771977819779197801978119782197831978419785197861978719788197891979019791197921979319794197951979619797197981979919800198011980219803198041980519806198071980819809198101981119812198131981419815198161981719818198191982019821198221982319824198251982619827198281982919830198311983219833198341983519836198371983819839198401984119842198431984419845198461984719848198491985019851198521985319854198551985619857198581985919860198611986219863198641986519866198671986819869198701987119872198731987419875198761987719878198791988019881198821988319884198851988619887198881988919890198911989219893198941989519896198971989819899199001990119902199031990419905199061990719908199091991019911199121991319914199151991619917199181991919920199211992219923199241992519926199271992819929199301993119932199331993419935199361993719938199391994019941199421994319944199451994619947199481994919950199511995219953199541995519956199571995819959199601996119962199631996419965199661996719968199691997019971199721997319974199751997619977199781997919980199811998219983199841998519986199871998819989199901999119992199931999419995199961999719998199992000020001200022000320004200052000620007200082000920010200112001220013200142001520016200172001820019200202002120022200232002420025200262002720028200292003020031200322003320034200352003620037200382003920040200412004220043200442004520046200472004820049200502005120052200532005420055200562005720058200592006020061200622006320064200652006620067200682006920070200712007220073200742007520076200772007820079200802008120082200832008420085200862008720088200892009020091200922009320094200952009620097200982009920100201012010220103201042010520106201072010820109201102011120112201132011420115201162011720118201192012020121201222012320124201252012620127201282012920130201312013220133201342013520136201372013820139201402014120142201432014420145201462014720148201492015020151201522015320154201552015620157201582015920160201612016220163201642016520166201672016820169201702017120172201732017420175201762017720178201792018020181201822018320184201852018620187201882018920190201912019220193201942019520196201972019820199202002020120202202032020420205202062020720208202092021020211202122021320214202152021620217202182021920220202212022220223202242022520226202272022820229202302023120232202332023420235202362023720238202392024020241202422024320244202452024620247202482024920250202512025220253202542025520256202572025820259202602026120262202632026420265202662026720268202692027020271202722027320274202752027620277202782027920280202812028220283202842028520286202872028820289202902029120292202932029420295202962029720298202992030020301203022030320304203052030620307203082030920310203112031220313203142031520316203172031820319203202032120322203232032420325203262032720328203292033020331203322033320334203352033620337203382033920340203412034220343203442034520346203472034820349203502035120352203532035420355203562035720358203592036020361203622036320364203652036620367203682036920370203712037220373203742037520376203772037820379203802038120382203832038420385203862038720388203892039020391203922039320394203952039620397203982039920400204012040220403204042040520406204072040820409204102041120412204132041420415204162041720418204192042020421204222042320424204252042620427204282042920430204312043220433204342043520436204372043820439204402044120442204432044420445204462044720448204492045020451204522045320454204552045620457204582045920460204612046220463204642046520466204672046820469204702047120472204732047420475204762047720478204792048020481204822048320484204852048620487204882048920490204912049220493204942049520496204972049820499205002050120502205032050420505205062050720508205092051020511205122051320514205152051620517205182051920520205212052220523205242052520526205272052820529205302053120532205332053420535205362053720538205392054020541205422054320544205452054620547205482054920550205512055220553205542055520556205572055820559205602056120562205632056420565205662056720568205692057020571205722057320574205752057620577205782057920580205812058220583205842058520586205872058820589205902059120592205932059420595205962059720598205992060020601206022060320604206052060620607206082060920610206112061220613206142061520616206172061820619206202062120622206232062420625206262062720628206292063020631206322063320634206352063620637206382063920640206412064220643206442064520646206472064820649206502065120652206532065420655206562065720658206592066020661206622066320664206652066620667206682066920670206712067220673206742067520676206772067820679206802068120682206832068420685206862068720688206892069020691206922069320694206952069620697206982069920700207012070220703207042070520706207072070820709207102071120712207132071420715207162071720718207192072020721207222072320724207252072620727207282072920730207312073220733207342073520736207372073820739207402074120742207432074420745207462074720748207492075020751207522075320754207552075620757207582075920760207612076220763207642076520766207672076820769207702077120772207732077420775207762077720778207792078020781207822078320784207852078620787207882078920790207912079220793207942079520796207972079820799208002080120802208032080420805208062080720808208092081020811208122081320814208152081620817208182081920820208212082220823208242082520826208272082820829208302083120832208332083420835208362083720838208392084020841208422084320844208452084620847208482084920850208512085220853208542085520856208572085820859208602086120862208632086420865208662086720868208692087020871208722087320874208752087620877208782087920880208812088220883208842088520886208872088820889208902089120892208932089420895208962089720898208992090020901209022090320904209052090620907209082090920910209112091220913209142091520916209172091820919209202092120922209232092420925209262092720928209292093020931209322093320934209352093620937209382093920940209412094220943209442094520946209472094820949209502095120952209532095420955209562095720958209592096020961209622096320964209652096620967209682096920970209712097220973209742097520976209772097820979209802098120982209832098420985209862098720988209892099020991209922099320994209952099620997209982099921000210012100221003210042100521006210072100821009210102101121012210132101421015210162101721018210192102021021210222102321024210252102621027210282102921030210312103221033210342103521036210372103821039210402104121042210432104421045210462104721048210492105021051210522105321054210552105621057210582105921060210612106221063210642106521066210672106821069210702107121072210732107421075210762107721078210792108021081210822108321084210852108621087210882108921090210912109221093210942109521096210972109821099211002110121102211032110421105211062110721108211092111021111211122111321114211152111621117211182111921120211212112221123211242112521126211272112821129211302113121132211332113421135211362113721138211392114021141211422114321144211452114621147211482114921150211512115221153211542115521156211572115821159211602116121162211632116421165211662116721168211692117021171211722117321174211752117621177211782117921180211812118221183211842118521186211872118821189211902119121192211932119421195211962119721198211992120021201212022120321204212052120621207212082120921210212112121221213212142121521216212172121821219212202122121222212232122421225212262122721228212292123021231212322123321234212352123621237212382123921240212412124221243212442124521246212472124821249212502125121252212532125421255212562125721258212592126021261212622126321264212652126621267212682126921270212712127221273212742127521276212772127821279212802128121282212832128421285212862128721288212892129021291212922129321294212952129621297212982129921300213012130221303213042130521306213072130821309213102131121312213132131421315213162131721318213192132021321213222132321324213252132621327213282132921330213312133221333213342133521336213372133821339213402134121342213432134421345213462134721348213492135021351213522135321354213552135621357213582135921360213612136221363213642136521366213672136821369213702137121372213732137421375213762137721378213792138021381213822138321384213852138621387213882138921390213912139221393213942139521396213972139821399214002140121402214032140421405214062140721408214092141021411214122141321414214152141621417214182141921420214212142221423214242142521426214272142821429214302143121432214332143421435214362143721438214392144021441214422144321444214452144621447214482144921450214512145221453214542145521456214572145821459214602146121462214632146421465214662146721468214692147021471214722147321474214752147621477214782147921480214812148221483214842148521486214872148821489214902149121492214932149421495214962149721498214992150021501215022150321504215052150621507215082150921510215112151221513215142151521516215172151821519215202152121522215232152421525215262152721528215292153021531215322153321534215352153621537215382153921540215412154221543215442154521546215472154821549215502155121552215532155421555215562155721558215592156021561215622156321564215652156621567215682156921570215712157221573215742157521576215772157821579215802158121582215832158421585215862158721588215892159021591215922159321594215952159621597215982159921600216012160221603216042160521606216072160821609216102161121612216132161421615216162161721618216192162021621216222162321624216252162621627216282162921630216312163221633216342163521636216372163821639216402164121642216432164421645216462164721648216492165021651216522165321654216552165621657216582165921660216612166221663216642166521666216672166821669216702167121672216732167421675216762167721678216792168021681216822168321684216852168621687216882168921690216912169221693216942169521696216972169821699217002170121702217032170421705217062170721708217092171021711217122171321714217152171621717217182171921720217212172221723217242172521726217272172821729217302173121732217332173421735217362173721738217392174021741217422174321744217452174621747217482174921750217512175221753217542175521756217572175821759217602176121762217632176421765217662176721768217692177021771217722177321774217752177621777217782177921780217812178221783217842178521786217872178821789217902179121792217932179421795217962179721798217992180021801218022180321804218052180621807218082180921810218112181221813218142181521816218172181821819218202182121822218232182421825218262182721828218292183021831218322183321834218352183621837218382183921840218412184221843218442184521846218472184821849218502185121852218532185421855218562185721858218592186021861218622186321864218652186621867218682186921870218712187221873218742187521876218772187821879218802188121882218832188421885218862188721888218892189021891218922189321894218952189621897218982189921900219012190221903219042190521906219072190821909219102191121912219132191421915219162191721918219192192021921219222192321924219252192621927219282192921930219312193221933219342193521936219372193821939219402194121942219432194421945219462194721948219492195021951219522195321954219552195621957219582195921960219612196221963219642196521966219672196821969219702197121972219732197421975219762197721978219792198021981219822198321984219852198621987219882198921990219912199221993219942199521996219972199821999220002200122002220032200422005220062200722008220092201022011220122201322014220152201622017220182201922020220212202222023220242202522026220272202822029220302203122032220332203422035220362203722038220392204022041220422204322044220452204622047220482204922050220512205222053220542205522056220572205822059220602206122062220632206422065220662206722068220692207022071220722207322074220752207622077220782207922080220812208222083220842208522086220872208822089220902209122092220932209422095220962209722098220992210022101221022210322104221052210622107221082210922110221112211222113221142211522116221172211822119221202212122122221232212422125221262212722128221292213022131221322213322134221352213622137221382213922140221412214222143221442214522146221472214822149221502215122152221532215422155221562215722158221592216022161221622216322164221652216622167221682216922170221712217222173221742217522176221772217822179221802218122182221832218422185221862218722188221892219022191221922219322194221952219622197221982219922200222012220222203222042220522206222072220822209222102221122212222132221422215222162221722218222192222022221222222222322224222252222622227222282222922230222312223222233222342223522236222372223822239222402224122242222432224422245222462224722248222492225022251222522225322254222552225622257222582225922260222612226222263222642226522266222672226822269222702227122272222732227422275222762227722278222792228022281222822228322284222852228622287222882228922290222912229222293222942229522296222972229822299223002230122302223032230422305223062230722308223092231022311223122231322314223152231622317223182231922320223212232222323223242232522326223272232822329223302233122332223332233422335223362233722338223392234022341223422234322344223452234622347223482234922350223512235222353223542235522356223572235822359223602236122362223632236422365223662236722368223692237022371223722237322374223752237622377223782237922380223812238222383223842238522386223872238822389223902239122392223932239422395223962239722398223992240022401224022240322404224052240622407224082240922410224112241222413224142241522416224172241822419224202242122422224232242422425224262242722428224292243022431224322243322434224352243622437224382243922440224412244222443224442244522446224472244822449224502245122452224532245422455224562245722458224592246022461224622246322464224652246622467224682246922470224712247222473224742247522476224772247822479224802248122482224832248422485224862248722488224892249022491224922249322494224952249622497224982249922500225012250222503225042250522506225072250822509225102251122512225132251422515225162251722518225192252022521225222252322524225252252622527225282252922530225312253222533225342253522536225372253822539225402254122542225432254422545225462254722548225492255022551225522255322554225552255622557225582255922560225612256222563225642256522566225672256822569225702257122572225732257422575225762257722578225792258022581225822258322584225852258622587225882258922590225912259222593225942259522596225972259822599226002260122602226032260422605226062260722608226092261022611226122261322614226152261622617226182261922620226212262222623226242262522626226272262822629226302263122632226332263422635226362263722638226392264022641226422264322644226452264622647226482264922650226512265222653226542265522656226572265822659226602266122662226632266422665226662266722668226692267022671226722267322674226752267622677226782267922680226812268222683226842268522686226872268822689226902269122692226932269422695226962269722698226992270022701227022270322704227052270622707227082270922710227112271222713227142271522716227172271822719227202272122722227232272422725227262272722728227292273022731227322273322734227352273622737227382273922740227412274222743227442274522746227472274822749227502275122752227532275422755227562275722758227592276022761227622276322764227652276622767227682276922770227712277222773227742277522776227772277822779227802278122782227832278422785227862278722788227892279022791227922279322794227952279622797227982279922800228012280222803228042280522806228072280822809228102281122812228132281422815228162281722818228192282022821228222282322824228252282622827228282282922830228312283222833228342283522836228372283822839228402284122842228432284422845228462284722848228492285022851228522285322854228552285622857228582285922860228612286222863228642286522866228672286822869228702287122872228732287422875228762287722878228792288022881228822288322884228852288622887228882288922890228912289222893228942289522896228972289822899229002290122902229032290422905229062290722908229092291022911229122291322914229152291622917229182291922920229212292222923229242292522926229272292822929229302293122932229332293422935229362293722938229392294022941229422294322944229452294622947229482294922950229512295222953229542295522956229572295822959229602296122962229632296422965229662296722968229692297022971229722297322974229752297622977229782297922980229812298222983229842298522986229872298822989229902299122992229932299422995229962299722998229992300023001230022300323004230052300623007230082300923010230112301223013230142301523016230172301823019230202302123022230232302423025230262302723028230292303023031230322303323034230352303623037230382303923040230412304223043230442304523046230472304823049230502305123052230532305423055230562305723058230592306023061230622306323064230652306623067230682306923070230712307223073230742307523076230772307823079230802308123082230832308423085230862308723088230892309023091230922309323094230952309623097230982309923100231012310223103231042310523106231072310823109231102311123112231132311423115231162311723118231192312023121231222312323124231252312623127231282312923130231312313223133231342313523136231372313823139231402314123142231432314423145231462314723148231492315023151231522315323154231552315623157231582315923160231612316223163231642316523166231672316823169231702317123172231732317423175231762317723178231792318023181231822318323184231852318623187231882318923190231912319223193231942319523196231972319823199232002320123202232032320423205232062320723208232092321023211232122321323214232152321623217232182321923220232212322223223232242322523226232272322823229232302323123232232332323423235232362323723238232392324023241232422324323244232452324623247232482324923250232512325223253232542325523256232572325823259232602326123262232632326423265232662326723268232692327023271232722327323274232752327623277232782327923280232812328223283232842328523286232872328823289232902329123292232932329423295232962329723298232992330023301233022330323304233052330623307233082330923310233112331223313233142331523316233172331823319233202332123322233232332423325233262332723328233292333023331233322333323334233352333623337233382333923340233412334223343233442334523346233472334823349233502335123352233532335423355233562335723358233592336023361233622336323364233652336623367233682336923370233712337223373233742337523376233772337823379233802338123382233832338423385233862338723388233892339023391233922339323394233952339623397233982339923400234012340223403234042340523406234072340823409234102341123412234132341423415234162341723418234192342023421234222342323424234252342623427234282342923430234312343223433234342343523436234372343823439234402344123442234432344423445234462344723448234492345023451234522345323454234552345623457234582345923460234612346223463234642346523466234672346823469234702347123472234732347423475234762347723478234792348023481234822348323484234852348623487234882348923490234912349223493234942349523496234972349823499235002350123502235032350423505235062350723508235092351023511235122351323514235152351623517235182351923520235212352223523235242352523526235272352823529235302353123532235332353423535235362353723538235392354023541235422354323544235452354623547235482354923550235512355223553235542355523556235572355823559235602356123562235632356423565235662356723568235692357023571235722357323574235752357623577235782357923580235812358223583235842358523586235872358823589235902359123592235932359423595235962359723598235992360023601236022360323604236052360623607236082360923610236112361223613236142361523616236172361823619236202362123622236232362423625236262362723628236292363023631236322363323634236352363623637236382363923640236412364223643236442364523646236472364823649236502365123652236532365423655236562365723658236592366023661236622366323664236652366623667236682366923670236712367223673236742367523676236772367823679236802368123682236832368423685236862368723688236892369023691236922369323694236952369623697236982369923700237012370223703237042370523706237072370823709237102371123712237132371423715237162371723718237192372023721237222372323724237252372623727237282372923730237312373223733237342373523736237372373823739237402374123742237432374423745237462374723748237492375023751237522375323754237552375623757237582375923760237612376223763237642376523766237672376823769237702377123772237732377423775237762377723778237792378023781237822378323784237852378623787237882378923790237912379223793237942379523796237972379823799238002380123802238032380423805238062380723808238092381023811238122381323814238152381623817238182381923820238212382223823238242382523826238272382823829238302383123832238332383423835238362383723838238392384023841238422384323844238452384623847238482384923850238512385223853238542385523856238572385823859238602386123862238632386423865238662386723868238692387023871238722387323874238752387623877238782387923880238812388223883238842388523886238872388823889238902389123892238932389423895238962389723898238992390023901239022390323904239052390623907239082390923910239112391223913239142391523916239172391823919239202392123922239232392423925239262392723928239292393023931239322393323934239352393623937239382393923940239412394223943239442394523946239472394823949239502395123952239532395423955239562395723958239592396023961239622396323964239652396623967239682396923970239712397223973239742397523976239772397823979239802398123982239832398423985239862398723988239892399023991239922399323994239952399623997239982399924000240012400224003240042400524006240072400824009240102401124012240132401424015240162401724018240192402024021240222402324024240252402624027240282402924030240312403224033240342403524036240372403824039240402404124042240432404424045240462404724048240492405024051240522405324054240552405624057240582405924060240612406224063240642406524066240672406824069240702407124072240732407424075240762407724078240792408024081240822408324084240852408624087240882408924090240912409224093240942409524096240972409824099241002410124102241032410424105241062410724108241092411024111241122411324114241152411624117241182411924120241212412224123241242412524126241272412824129241302413124132241332413424135241362413724138241392414024141241422414324144241452414624147241482414924150241512415224153241542415524156241572415824159241602416124162241632416424165241662416724168241692417024171241722417324174241752417624177241782417924180241812418224183241842418524186241872418824189241902419124192241932419424195241962419724198241992420024201242022420324204242052420624207242082420924210242112421224213242142421524216242172421824219242202422124222242232422424225242262422724228242292423024231242322423324234242352423624237242382423924240242412424224243242442424524246242472424824249242502425124252242532425424255242562425724258242592426024261242622426324264242652426624267242682426924270242712427224273242742427524276242772427824279242802428124282242832428424285242862428724288242892429024291242922429324294242952429624297242982429924300243012430224303243042430524306243072430824309243102431124312243132431424315243162431724318243192432024321243222432324324243252432624327243282432924330243312433224333243342433524336243372433824339243402434124342243432434424345243462434724348243492435024351243522435324354243552435624357243582435924360243612436224363243642436524366243672436824369243702437124372243732437424375243762437724378243792438024381243822438324384243852438624387243882438924390243912439224393243942439524396243972439824399244002440124402244032440424405244062440724408244092441024411244122441324414244152441624417244182441924420244212442224423244242442524426244272442824429244302443124432244332443424435244362443724438244392444024441244422444324444244452444624447244482444924450244512445224453244542445524456244572445824459244602446124462244632446424465244662446724468244692447024471244722447324474244752447624477244782447924480244812448224483244842448524486244872448824489244902449124492244932449424495244962449724498244992450024501245022450324504245052450624507245082450924510245112451224513245142451524516245172451824519245202452124522245232452424525245262452724528245292453024531245322453324534245352453624537245382453924540245412454224543245442454524546245472454824549245502455124552245532455424555245562455724558245592456024561245622456324564245652456624567245682456924570245712457224573245742457524576245772457824579245802458124582245832458424585245862458724588245892459024591245922459324594245952459624597245982459924600246012460224603246042460524606246072460824609246102461124612246132461424615246162461724618246192462024621246222462324624246252462624627246282462924630246312463224633246342463524636246372463824639246402464124642246432464424645246462464724648246492465024651246522465324654246552465624657246582465924660246612466224663246642466524666246672466824669246702467124672246732467424675246762467724678246792468024681246822468324684246852468624687246882468924690246912469224693246942469524696246972469824699247002470124702247032470424705247062470724708247092471024711247122471324714247152471624717247182471924720247212472224723247242472524726247272472824729247302473124732247332473424735247362473724738247392474024741247422474324744247452474624747247482474924750247512475224753247542475524756247572475824759247602476124762247632476424765247662476724768247692477024771247722477324774247752477624777247782477924780247812478224783247842478524786247872478824789247902479124792247932479424795247962479724798247992480024801248022480324804248052480624807248082480924810248112481224813248142481524816248172481824819248202482124822248232482424825248262482724828248292483024831248322483324834248352483624837248382483924840248412484224843248442484524846248472484824849248502485124852248532485424855248562485724858248592486024861248622486324864248652486624867248682486924870248712487224873248742487524876248772487824879248802488124882248832488424885248862488724888248892489024891248922489324894248952489624897248982489924900249012490224903249042490524906249072490824909249102491124912249132491424915249162491724918249192492024921249222492324924249252492624927249282492924930249312493224933249342493524936249372493824939249402494124942249432494424945249462494724948249492495024951249522495324954249552495624957249582495924960249612496224963249642496524966249672496824969249702497124972249732497424975249762497724978249792498024981249822498324984249852498624987249882498924990249912499224993249942499524996249972499824999250002500125002250032500425005250062500725008250092501025011250122501325014250152501625017250182501925020250212502225023250242502525026250272502825029250302503125032250332503425035250362503725038250392504025041250422504325044250452504625047250482504925050250512505225053250542505525056250572505825059250602506125062250632506425065250662506725068250692507025071250722507325074250752507625077250782507925080250812508225083250842508525086250872508825089250902509125092250932509425095250962509725098250992510025101251022510325104251052510625107251082510925110251112511225113251142511525116251172511825119251202512125122251232512425125251262512725128251292513025131251322513325134251352513625137251382513925140251412514225143251442514525146251472514825149251502515125152251532515425155251562515725158251592516025161251622516325164251652516625167251682516925170251712517225173251742517525176251772517825179251802518125182251832518425185251862518725188251892519025191251922519325194251952519625197251982519925200252012520225203252042520525206252072520825209252102521125212252132521425215252162521725218252192522025221252222522325224252252522625227252282522925230252312523225233252342523525236252372523825239252402524125242252432524425245252462524725248252492525025251252522525325254252552525625257252582525925260252612526225263252642526525266252672526825269252702527125272252732527425275252762527725278252792528025281252822528325284252852528625287252882528925290252912529225293252942529525296252972529825299253002530125302253032530425305253062530725308253092531025311253122531325314253152531625317253182531925320253212532225323253242532525326253272532825329253302533125332253332533425335253362533725338253392534025341253422534325344253452534625347253482534925350253512535225353253542535525356253572535825359253602536125362253632536425365253662536725368253692537025371253722537325374253752537625377253782537925380253812538225383253842538525386253872538825389253902539125392253932539425395253962539725398253992540025401254022540325404254052540625407254082540925410254112541225413254142541525416254172541825419254202542125422254232542425425254262542725428254292543025431254322543325434254352543625437254382543925440254412544225443254442544525446254472544825449254502545125452254532545425455254562545725458254592546025461254622546325464254652546625467254682546925470254712547225473254742547525476254772547825479254802548125482254832548425485254862548725488254892549025491254922549325494254952549625497254982549925500255012550225503255042550525506255072550825509255102551125512255132551425515255162551725518255192552025521255222552325524255252552625527255282552925530255312553225533255342553525536255372553825539255402554125542255432554425545255462554725548255492555025551255522555325554255552555625557255582555925560255612556225563255642556525566255672556825569255702557125572255732557425575255762557725578255792558025581255822558325584255852558625587255882558925590255912559225593255942559525596255972559825599256002560125602256032560425605256062560725608256092561025611256122561325614256152561625617256182561925620256212562225623256242562525626256272562825629256302563125632256332563425635256362563725638256392564025641256422564325644256452564625647256482564925650256512565225653256542565525656256572565825659256602566125662256632566425665256662566725668256692567025671256722567325674256752567625677256782567925680256812568225683256842568525686256872568825689256902569125692256932569425695256962569725698256992570025701257022570325704257052570625707257082570925710257112571225713257142571525716257172571825719257202572125722257232572425725257262572725728257292573025731257322573325734257352573625737257382573925740257412574225743257442574525746257472574825749257502575125752257532575425755257562575725758257592576025761257622576325764257652576625767257682576925770257712577225773257742577525776257772577825779257802578125782257832578425785257862578725788257892579025791257922579325794257952579625797257982579925800258012580225803258042580525806258072580825809258102581125812258132581425815258162581725818258192582025821258222582325824258252582625827258282582925830258312583225833258342583525836258372583825839258402584125842258432584425845258462584725848258492585025851258522585325854258552585625857258582585925860258612586225863258642586525866258672586825869258702587125872258732587425875258762587725878258792588025881258822588325884258852588625887258882588925890258912589225893258942589525896258972589825899259002590125902259032590425905259062590725908259092591025911259122591325914259152591625917259182591925920259212592225923259242592525926259272592825929259302593125932259332593425935259362593725938259392594025941259422594325944259452594625947259482594925950259512595225953259542595525956259572595825959259602596125962259632596425965259662596725968259692597025971259722597325974259752597625977259782597925980259812598225983259842598525986259872598825989259902599125992259932599425995259962599725998259992600026001260022600326004260052600626007260082600926010260112601226013260142601526016260172601826019260202602126022260232602426025260262602726028260292603026031260322603326034260352603626037260382603926040260412604226043260442604526046260472604826049260502605126052260532605426055260562605726058260592606026061260622606326064260652606626067260682606926070260712607226073260742607526076260772607826079260802608126082260832608426085260862608726088260892609026091260922609326094260952609626097260982609926100261012610226103261042610526106261072610826109261102611126112261132611426115261162611726118261192612026121261222612326124261252612626127261282612926130261312613226133261342613526136261372613826139261402614126142261432614426145261462614726148261492615026151261522615326154261552615626157261582615926160261612616226163261642616526166261672616826169261702617126172261732617426175261762617726178261792618026181261822618326184261852618626187261882618926190261912619226193261942619526196261972619826199262002620126202262032620426205262062620726208262092621026211262122621326214262152621626217262182621926220262212622226223262242622526226262272622826229262302623126232262332623426235262362623726238262392624026241262422624326244262452624626247262482624926250262512625226253262542625526256262572625826259262602626126262262632626426265262662626726268262692627026271262722627326274262752627626277262782627926280262812628226283262842628526286262872628826289262902629126292262932629426295262962629726298262992630026301263022630326304263052630626307263082630926310263112631226313263142631526316263172631826319263202632126322263232632426325263262632726328263292633026331263322633326334263352633626337263382633926340263412634226343263442634526346263472634826349263502635126352263532635426355263562635726358263592636026361263622636326364263652636626367263682636926370263712637226373263742637526376263772637826379263802638126382263832638426385263862638726388263892639026391263922639326394263952639626397263982639926400264012640226403264042640526406264072640826409264102641126412264132641426415264162641726418264192642026421264222642326424264252642626427264282642926430264312643226433264342643526436264372643826439264402644126442264432644426445264462644726448264492645026451264522645326454264552645626457264582645926460264612646226463264642646526466264672646826469264702647126472264732647426475264762647726478264792648026481264822648326484264852648626487264882648926490264912649226493264942649526496264972649826499265002650126502265032650426505265062650726508265092651026511265122651326514265152651626517265182651926520265212652226523265242652526526265272652826529265302653126532265332653426535265362653726538265392654026541265422654326544265452654626547265482654926550265512655226553265542655526556265572655826559265602656126562265632656426565265662656726568265692657026571265722657326574265752657626577265782657926580265812658226583265842658526586265872658826589265902659126592265932659426595265962659726598265992660026601266022660326604266052660626607266082660926610266112661226613266142661526616266172661826619266202662126622266232662426625266262662726628266292663026631266322663326634266352663626637266382663926640266412664226643266442664526646266472664826649266502665126652266532665426655266562665726658266592666026661266622666326664266652666626667266682666926670266712667226673266742667526676266772667826679266802668126682266832668426685266862668726688266892669026691266922669326694266952669626697266982669926700267012670226703267042670526706267072670826709267102671126712267132671426715267162671726718267192672026721267222672326724267252672626727267282672926730267312673226733267342673526736267372673826739267402674126742267432674426745267462674726748267492675026751267522675326754267552675626757267582675926760267612676226763267642676526766267672676826769267702677126772267732677426775267762677726778267792678026781267822678326784267852678626787267882678926790267912679226793267942679526796267972679826799268002680126802268032680426805268062680726808268092681026811268122681326814268152681626817268182681926820268212682226823268242682526826268272682826829268302683126832268332683426835268362683726838268392684026841268422684326844268452684626847268482684926850268512685226853268542685526856268572685826859268602686126862268632686426865268662686726868268692687026871268722687326874268752687626877268782687926880268812688226883268842688526886268872688826889268902689126892268932689426895268962689726898268992690026901269022690326904269052690626907269082690926910269112691226913269142691526916269172691826919269202692126922269232692426925269262692726928269292693026931269322693326934269352693626937269382693926940269412694226943269442694526946269472694826949269502695126952269532695426955269562695726958269592696026961269622696326964269652696626967269682696926970269712697226973269742697526976269772697826979269802698126982269832698426985269862698726988269892699026991269922699326994269952699626997269982699927000270012700227003270042700527006270072700827009270102701127012270132701427015270162701727018270192702027021270222702327024270252702627027270282702927030270312703227033270342703527036270372703827039270402704127042270432704427045270462704727048270492705027051270522705327054270552705627057270582705927060270612706227063270642706527066270672706827069270702707127072270732707427075270762707727078270792708027081270822708327084270852708627087270882708927090270912709227093270942709527096270972709827099271002710127102271032710427105271062710727108271092711027111271122711327114271152711627117271182711927120271212712227123271242712527126271272712827129271302713127132271332713427135271362713727138271392714027141271422714327144271452714627147271482714927150271512715227153271542715527156271572715827159271602716127162271632716427165271662716727168271692717027171271722717327174271752717627177271782717927180271812718227183271842718527186271872718827189271902719127192271932719427195271962719727198271992720027201272022720327204272052720627207272082720927210272112721227213272142721527216272172721827219272202722127222272232722427225272262722727228272292723027231272322723327234272352723627237272382723927240272412724227243272442724527246272472724827249272502725127252272532725427255272562725727258272592726027261272622726327264272652726627267272682726927270272712727227273272742727527276272772727827279272802728127282272832728427285272862728727288272892729027291272922729327294272952729627297272982729927300273012730227303273042730527306273072730827309273102731127312273132731427315273162731727318273192732027321273222732327324273252732627327273282732927330273312733227333273342733527336273372733827339273402734127342273432734427345273462734727348273492735027351273522735327354273552735627357273582735927360273612736227363273642736527366273672736827369273702737127372273732737427375273762737727378273792738027381273822738327384273852738627387273882738927390273912739227393273942739527396273972739827399274002740127402274032740427405274062740727408274092741027411274122741327414274152741627417274182741927420274212742227423274242742527426274272742827429274302743127432274332743427435274362743727438274392744027441274422744327444274452744627447274482744927450274512745227453274542745527456274572745827459274602746127462274632746427465274662746727468274692747027471274722747327474274752747627477274782747927480274812748227483274842748527486274872748827489274902749127492274932749427495274962749727498274992750027501275022750327504275052750627507275082750927510275112751227513275142751527516275172751827519275202752127522275232752427525275262752727528275292753027531275322753327534275352753627537275382753927540275412754227543275442754527546275472754827549275502755127552275532755427555275562755727558275592756027561275622756327564275652756627567275682756927570275712757227573275742757527576275772757827579275802758127582275832758427585275862758727588275892759027591275922759327594275952759627597275982759927600276012760227603276042760527606276072760827609276102761127612276132761427615276162761727618276192762027621276222762327624276252762627627276282762927630276312763227633276342763527636276372763827639276402764127642276432764427645276462764727648276492765027651276522765327654276552765627657276582765927660276612766227663276642766527666276672766827669276702767127672276732767427675276762767727678276792768027681276822768327684276852768627687276882768927690276912769227693276942769527696276972769827699277002770127702277032770427705277062770727708277092771027711277122771327714277152771627717277182771927720277212772227723277242772527726277272772827729277302773127732277332773427735277362773727738277392774027741277422774327744277452774627747277482774927750277512775227753277542775527756277572775827759277602776127762277632776427765277662776727768277692777027771277722777327774277752777627777277782777927780277812778227783277842778527786277872778827789277902779127792277932779427795277962779727798277992780027801278022780327804278052780627807278082780927810278112781227813278142781527816278172781827819278202782127822278232782427825278262782727828278292783027831278322783327834278352783627837278382783927840278412784227843278442784527846278472784827849278502785127852278532785427855278562785727858278592786027861278622786327864278652786627867278682786927870278712787227873278742787527876278772787827879278802788127882278832788427885278862788727888278892789027891278922789327894278952789627897278982789927900279012790227903279042790527906279072790827909279102791127912279132791427915279162791727918279192792027921279222792327924279252792627927279282792927930279312793227933279342793527936279372793827939279402794127942279432794427945279462794727948279492795027951279522795327954279552795627957279582795927960279612796227963279642796527966279672796827969279702797127972279732797427975279762797727978279792798027981279822798327984279852798627987279882798927990279912799227993279942799527996279972799827999280002800128002280032800428005280062800728008280092801028011280122801328014280152801628017280182801928020280212802228023280242802528026280272802828029280302803128032280332803428035280362803728038280392804028041280422804328044280452804628047280482804928050280512805228053280542805528056280572805828059280602806128062280632806428065280662806728068280692807028071280722807328074280752807628077280782807928080280812808228083280842808528086280872808828089280902809128092280932809428095280962809728098280992810028101281022810328104281052810628107281082810928110281112811228113281142811528116281172811828119281202812128122281232812428125281262812728128281292813028131281322813328134281352813628137281382813928140281412814228143281442814528146281472814828149281502815128152281532815428155281562815728158281592816028161281622816328164281652816628167281682816928170281712817228173281742817528176281772817828179281802818128182281832818428185281862818728188281892819028191281922819328194281952819628197281982819928200282012820228203282042820528206282072820828209282102821128212282132821428215282162821728218282192822028221282222822328224282252822628227282282822928230282312823228233282342823528236282372823828239282402824128242282432824428245282462824728248282492825028251282522825328254282552825628257282582825928260282612826228263282642826528266282672826828269282702827128272282732827428275282762827728278282792828028281282822828328284282852828628287282882828928290282912829228293282942829528296282972829828299283002830128302283032830428305283062830728308283092831028311283122831328314283152831628317283182831928320283212832228323283242832528326283272832828329283302833128332283332833428335283362833728338283392834028341283422834328344283452834628347283482834928350283512835228353283542835528356283572835828359283602836128362283632836428365283662836728368283692837028371283722837328374283752837628377283782837928380283812838228383283842838528386283872838828389283902839128392283932839428395283962839728398283992840028401284022840328404284052840628407284082840928410284112841228413284142841528416284172841828419284202842128422284232842428425284262842728428284292843028431284322843328434284352843628437284382843928440284412844228443284442844528446284472844828449284502845128452284532845428455284562845728458284592846028461284622846328464284652846628467284682846928470284712847228473284742847528476284772847828479284802848128482284832848428485284862848728488284892849028491284922849328494284952849628497284982849928500285012850228503285042850528506285072850828509285102851128512285132851428515285162851728518285192852028521285222852328524285252852628527285282852928530285312853228533285342853528536285372853828539285402854128542285432854428545285462854728548285492855028551285522855328554285552855628557285582855928560285612856228563285642856528566285672856828569285702857128572285732857428575285762857728578285792858028581285822858328584285852858628587285882858928590285912859228593285942859528596285972859828599286002860128602286032860428605286062860728608286092861028611286122861328614286152861628617286182861928620286212862228623286242862528626286272862828629286302863128632286332863428635286362863728638286392864028641286422864328644286452864628647286482864928650286512865228653286542865528656286572865828659286602866128662286632866428665286662866728668286692867028671286722867328674286752867628677286782867928680286812868228683286842868528686286872868828689286902869128692286932869428695286962869728698286992870028701287022870328704287052870628707287082870928710287112871228713287142871528716287172871828719287202872128722287232872428725287262872728728287292873028731287322873328734287352873628737287382873928740287412874228743287442874528746287472874828749287502875128752287532875428755287562875728758287592876028761287622876328764287652876628767287682876928770287712877228773287742877528776287772877828779287802878128782287832878428785287862878728788287892879028791287922879328794287952879628797287982879928800288012880228803288042880528806288072880828809288102881128812288132881428815288162881728818288192882028821288222882328824288252882628827288282882928830288312883228833288342883528836288372883828839288402884128842288432884428845288462884728848288492885028851288522885328854288552885628857288582885928860288612886228863288642886528866288672886828869288702887128872288732887428875288762887728878288792888028881288822888328884288852888628887288882888928890288912889228893288942889528896288972889828899289002890128902289032890428905289062890728908289092891028911289122891328914289152891628917289182891928920289212892228923289242892528926289272892828929289302893128932289332893428935289362893728938289392894028941289422894328944289452894628947289482894928950289512895228953289542895528956289572895828959289602896128962289632896428965289662896728968289692897028971289722897328974289752897628977289782897928980289812898228983289842898528986289872898828989289902899128992289932899428995289962899728998289992900029001290022900329004290052900629007290082900929010290112901229013290142901529016290172901829019290202902129022290232902429025290262902729028290292903029031290322903329034290352903629037290382903929040290412904229043290442904529046290472904829049290502905129052290532905429055290562905729058290592906029061290622906329064290652906629067290682906929070290712907229073290742907529076290772907829079290802908129082290832908429085290862908729088290892909029091290922909329094290952909629097290982909929100291012910229103291042910529106291072910829109291102911129112291132911429115291162911729118291192912029121291222912329124291252912629127291282912929130291312913229133291342913529136291372913829139291402914129142291432914429145291462914729148291492915029151291522915329154291552915629157291582915929160291612916229163291642916529166291672916829169291702917129172291732917429175291762917729178291792918029181291822918329184291852918629187291882918929190291912919229193291942919529196291972919829199292002920129202292032920429205292062920729208292092921029211292122921329214292152921629217292182921929220292212922229223292242922529226292272922829229292302923129232292332923429235292362923729238292392924029241292422924329244292452924629247292482924929250292512925229253292542925529256292572925829259292602926129262292632926429265292662926729268292692927029271292722927329274292752927629277292782927929280292812928229283292842928529286292872928829289292902929129292292932929429295292962929729298292992930029301293022930329304293052930629307293082930929310293112931229313293142931529316293172931829319293202932129322293232932429325293262932729328293292933029331293322933329334293352933629337293382933929340293412934229343293442934529346293472934829349293502935129352293532935429355293562935729358293592936029361293622936329364293652936629367293682936929370293712937229373293742937529376293772937829379293802938129382293832938429385293862938729388293892939029391293922939329394293952939629397293982939929400294012940229403294042940529406294072940829409294102941129412294132941429415294162941729418294192942029421294222942329424294252942629427294282942929430294312943229433294342943529436294372943829439294402944129442294432944429445294462944729448294492945029451294522945329454294552945629457294582945929460294612946229463294642946529466294672946829469294702947129472294732947429475294762947729478294792948029481294822948329484294852948629487294882948929490294912949229493294942949529496294972949829499295002950129502295032950429505295062950729508295092951029511295122951329514295152951629517295182951929520295212952229523295242952529526295272952829529295302953129532295332953429535295362953729538295392954029541295422954329544295452954629547295482954929550295512955229553295542955529556295572955829559295602956129562295632956429565295662956729568295692957029571295722957329574295752957629577295782957929580295812958229583295842958529586295872958829589295902959129592295932959429595295962959729598295992960029601296022960329604296052960629607296082960929610296112961229613296142961529616296172961829619296202962129622296232962429625296262962729628296292963029631296322963329634296352963629637296382963929640296412964229643296442964529646296472964829649296502965129652296532965429655296562965729658296592966029661296622966329664296652966629667296682966929670296712967229673296742967529676296772967829679296802968129682296832968429685296862968729688296892969029691296922969329694296952969629697296982969929700297012970229703297042970529706297072970829709297102971129712297132971429715297162971729718297192972029721297222972329724297252972629727297282972929730297312973229733297342973529736297372973829739297402974129742297432974429745297462974729748297492975029751297522975329754297552975629757297582975929760297612976229763297642976529766297672976829769297702977129772297732977429775297762977729778297792978029781297822978329784297852978629787297882978929790297912979229793297942979529796297972979829799298002980129802298032980429805298062980729808298092981029811298122981329814298152981629817298182981929820298212982229823298242982529826298272982829829298302983129832298332983429835298362983729838298392984029841298422984329844298452984629847298482984929850298512985229853298542985529856298572985829859298602986129862298632986429865298662986729868298692987029871298722987329874298752987629877298782987929880298812988229883298842988529886298872988829889298902989129892298932989429895298962989729898298992990029901299022990329904299052990629907299082990929910299112991229913299142991529916299172991829919299202992129922299232992429925299262992729928299292993029931299322993329934299352993629937299382993929940299412994229943299442994529946299472994829949299502995129952299532995429955299562995729958299592996029961299622996329964299652996629967299682996929970299712997229973299742997529976299772997829979299802998129982299832998429985299862998729988299892999029991299922999329994299952999629997299982999930000300013000230003300043000530006300073000830009300103001130012300133001430015300163001730018300193002030021300223002330024300253002630027300283002930030300313003230033300343003530036300373003830039300403004130042300433004430045300463004730048300493005030051300523005330054300553005630057300583005930060300613006230063300643006530066300673006830069300703007130072300733007430075300763007730078300793008030081300823008330084300853008630087300883008930090300913009230093300943009530096300973009830099301003010130102301033010430105301063010730108301093011030111301123011330114301153011630117301183011930120301213012230123301243012530126301273012830129301303013130132301333013430135301363013730138301393014030141301423014330144301453014630147301483014930150301513015230153301543015530156301573015830159301603016130162301633016430165301663016730168301693017030171301723017330174301753017630177301783017930180301813018230183301843018530186301873018830189301903019130192301933019430195301963019730198301993020030201302023020330204302053020630207302083020930210302113021230213302143021530216302173021830219302203022130222302233022430225302263022730228302293023030231302323023330234302353023630237302383023930240302413024230243302443024530246302473024830249302503025130252302533025430255302563025730258302593026030261302623026330264302653026630267302683026930270302713027230273302743027530276302773027830279302803028130282302833028430285302863028730288302893029030291302923029330294302953029630297302983029930300303013030230303303043030530306303073030830309303103031130312303133031430315303163031730318303193032030321303223032330324303253032630327303283032930330303313033230333303343033530336303373033830339303403034130342303433034430345303463034730348303493035030351303523035330354303553035630357303583035930360303613036230363303643036530366303673036830369303703037130372303733037430375303763037730378303793038030381303823038330384303853038630387303883038930390303913039230393303943039530396303973039830399304003040130402304033040430405304063040730408304093041030411304123041330414304153041630417304183041930420304213042230423304243042530426304273042830429304303043130432304333043430435304363043730438304393044030441304423044330444304453044630447304483044930450304513045230453304543045530456304573045830459304603046130462304633046430465304663046730468304693047030471304723047330474304753047630477304783047930480304813048230483304843048530486304873048830489304903049130492304933049430495304963049730498304993050030501305023050330504305053050630507305083050930510305113051230513305143051530516305173051830519305203052130522305233052430525305263052730528305293053030531305323053330534305353053630537305383053930540305413054230543305443054530546305473054830549305503055130552305533055430555305563055730558305593056030561305623056330564305653056630567305683056930570305713057230573305743057530576305773057830579305803058130582305833058430585305863058730588305893059030591305923059330594305953059630597305983059930600306013060230603306043060530606306073060830609306103061130612306133061430615306163061730618306193062030621306223062330624306253062630627306283062930630306313063230633306343063530636306373063830639306403064130642306433064430645306463064730648306493065030651306523065330654306553065630657306583065930660306613066230663306643066530666306673066830669306703067130672306733067430675306763067730678306793068030681306823068330684306853068630687306883068930690306913069230693306943069530696306973069830699307003070130702307033070430705307063070730708307093071030711307123071330714307153071630717307183071930720307213072230723307243072530726307273072830729307303073130732307333073430735307363073730738307393074030741307423074330744307453074630747307483074930750307513075230753307543075530756307573075830759307603076130762307633076430765307663076730768307693077030771307723077330774307753077630777307783077930780307813078230783307843078530786307873078830789307903079130792307933079430795307963079730798307993080030801308023080330804308053080630807308083080930810308113081230813308143081530816308173081830819308203082130822308233082430825308263082730828308293083030831308323083330834308353083630837308383083930840308413084230843308443084530846308473084830849308503085130852308533085430855308563085730858308593086030861308623086330864308653086630867308683086930870308713087230873308743087530876308773087830879308803088130882308833088430885308863088730888308893089030891308923089330894308953089630897308983089930900309013090230903309043090530906309073090830909309103091130912309133091430915309163091730918309193092030921309223092330924309253092630927309283092930930309313093230933309343093530936309373093830939309403094130942309433094430945309463094730948309493095030951309523095330954309553095630957309583095930960309613096230963309643096530966309673096830969309703097130972309733097430975309763097730978309793098030981309823098330984309853098630987309883098930990309913099230993309943099530996309973099830999310003100131002310033100431005310063100731008310093101031011310123101331014310153101631017310183101931020310213102231023310243102531026310273102831029310303103131032310333103431035310363103731038310393104031041310423104331044310453104631047310483104931050310513105231053310543105531056310573105831059310603106131062310633106431065310663106731068310693107031071310723107331074310753107631077310783107931080310813108231083310843108531086310873108831089310903109131092310933109431095310963109731098310993110031101311023110331104311053110631107311083110931110311113111231113311143111531116311173111831119311203112131122311233112431125311263112731128311293113031131311323113331134311353113631137311383113931140311413114231143311443114531146311473114831149311503115131152311533115431155311563115731158311593116031161311623116331164311653116631167311683116931170311713117231173311743117531176311773117831179311803118131182311833118431185311863118731188311893119031191311923119331194311953119631197311983119931200312013120231203312043120531206312073120831209312103121131212312133121431215312163121731218312193122031221312223122331224312253122631227312283122931230312313123231233312343123531236312373123831239312403124131242312433124431245312463124731248312493125031251312523125331254312553125631257312583125931260312613126231263312643126531266312673126831269312703127131272312733127431275312763127731278312793128031281312823128331284312853128631287312883128931290312913129231293312943129531296312973129831299313003130131302313033130431305313063130731308313093131031311313123131331314313153131631317313183131931320313213132231323313243132531326313273132831329313303133131332313333133431335313363133731338313393134031341313423134331344313453134631347313483134931350313513135231353313543135531356313573135831359313603136131362313633136431365313663136731368313693137031371313723137331374313753137631377313783137931380313813138231383313843138531386313873138831389313903139131392313933139431395313963139731398313993140031401314023140331404314053140631407314083140931410314113141231413314143141531416314173141831419314203142131422314233142431425314263142731428314293143031431314323143331434314353143631437314383143931440314413144231443314443144531446314473144831449314503145131452314533145431455314563145731458314593146031461314623146331464314653146631467314683146931470314713147231473314743147531476314773147831479314803148131482314833148431485314863148731488314893149031491314923149331494314953149631497314983149931500315013150231503315043150531506315073150831509315103151131512315133151431515315163151731518315193152031521315223152331524315253152631527315283152931530315313153231533315343153531536315373153831539315403154131542315433154431545315463154731548315493155031551315523155331554315553155631557315583155931560315613156231563315643156531566315673156831569315703157131572315733157431575315763157731578315793158031581315823158331584315853158631587315883158931590315913159231593315943159531596315973159831599316003160131602316033160431605316063160731608316093161031611316123161331614316153161631617316183161931620316213162231623316243162531626316273162831629316303163131632316333163431635316363163731638316393164031641316423164331644316453164631647316483164931650316513165231653316543165531656316573165831659316603166131662316633166431665316663166731668316693167031671316723167331674316753167631677316783167931680316813168231683316843168531686316873168831689316903169131692316933169431695316963169731698316993170031701317023170331704317053170631707317083170931710317113171231713317143171531716317173171831719317203172131722317233172431725317263172731728317293173031731317323173331734317353173631737317383173931740317413174231743317443174531746317473174831749317503175131752317533175431755317563175731758317593176031761317623176331764317653176631767317683176931770317713177231773317743177531776317773177831779317803178131782317833178431785317863178731788317893179031791317923179331794317953179631797317983179931800318013180231803318043180531806318073180831809318103181131812318133181431815318163181731818318193182031821318223182331824318253182631827318283182931830318313183231833318343183531836318373183831839318403184131842318433184431845318463184731848318493185031851318523185331854318553185631857318583185931860318613186231863318643186531866318673186831869318703187131872318733187431875318763187731878318793188031881318823188331884318853188631887318883188931890318913189231893318943189531896318973189831899319003190131902319033190431905319063190731908319093191031911319123191331914319153191631917319183191931920319213192231923319243192531926319273192831929319303193131932319333193431935319363193731938319393194031941319423194331944319453194631947319483194931950319513195231953319543195531956319573195831959319603196131962319633196431965319663196731968319693197031971319723197331974319753197631977319783197931980319813198231983319843198531986319873198831989319903199131992319933199431995319963199731998319993200032001320023200332004320053200632007320083200932010320113201232013320143201532016320173201832019320203202132022320233202432025320263202732028320293203032031320323203332034320353203632037320383203932040320413204232043320443204532046320473204832049320503205132052320533205432055320563205732058320593206032061320623206332064320653206632067320683206932070320713207232073320743207532076320773207832079320803208132082320833208432085320863208732088320893209032091320923209332094320953209632097320983209932100321013210232103321043210532106321073210832109321103211132112321133211432115321163211732118321193212032121321223212332124321253212632127321283212932130321313213232133321343213532136321373213832139321403214132142321433214432145321463214732148321493215032151321523215332154321553215632157321583215932160321613216232163321643216532166321673216832169321703217132172321733217432175321763217732178321793218032181321823218332184321853218632187321883218932190321913219232193321943219532196321973219832199322003220132202322033220432205322063220732208322093221032211322123221332214322153221632217322183221932220322213222232223322243222532226322273222832229322303223132232322333223432235322363223732238322393224032241322423224332244322453224632247322483224932250322513225232253322543225532256322573225832259322603226132262322633226432265322663226732268322693227032271322723227332274322753227632277322783227932280322813228232283322843228532286322873228832289322903229132292322933229432295322963229732298322993230032301323023230332304323053230632307323083230932310323113231232313323143231532316323173231832319323203232132322323233232432325323263232732328323293233032331323323233332334323353233632337323383233932340323413234232343323443234532346323473234832349323503235132352323533235432355323563235732358323593236032361323623236332364323653236632367323683236932370323713237232373323743237532376323773237832379323803238132382323833238432385323863238732388323893239032391323923239332394323953239632397323983239932400324013240232403324043240532406324073240832409324103241132412324133241432415324163241732418324193242032421324223242332424324253242632427324283242932430324313243232433324343243532436324373243832439324403244132442324433244432445324463244732448324493245032451324523245332454324553245632457324583245932460324613246232463324643246532466324673246832469324703247132472324733247432475324763247732478324793248032481324823248332484324853248632487324883248932490324913249232493324943249532496324973249832499325003250132502325033250432505325063250732508325093251032511325123251332514325153251632517325183251932520325213252232523325243252532526325273252832529325303253132532325333253432535325363253732538325393254032541325423254332544325453254632547325483254932550325513255232553325543255532556325573255832559325603256132562325633256432565325663256732568325693257032571325723257332574325753257632577325783257932580325813258232583325843258532586325873258832589325903259132592325933259432595325963259732598325993260032601326023260332604326053260632607326083260932610326113261232613326143261532616326173261832619326203262132622326233262432625 |
- /*! p5.js v0.5.7 February 08, 2017 */
- (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.p5 = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
-
- },{}],2:[function(_dereq_,module,exports){
- // Run-time checking of preconditions.
-
- 'use strict';
-
- // Precondition function that checks if the given predicate is true.
- // If not, it will throw an error.
- exports.argument = function(predicate, message) {
- if (!predicate) {
- throw new Error(message);
- }
- };
-
- // Precondition function that checks if the given assertion is true.
- // If not, it will throw an error.
- exports.assert = exports.argument;
-
- },{}],3:[function(_dereq_,module,exports){
- // Drawing utility functions.
-
- 'use strict';
-
- // Draw a line on the given context from point `x1,y1` to point `x2,y2`.
- function line(ctx, x1, y1, x2, y2) {
- ctx.beginPath();
- ctx.moveTo(x1, y1);
- ctx.lineTo(x2, y2);
- ctx.stroke();
- }
-
- exports.line = line;
-
- },{}],4:[function(_dereq_,module,exports){
- // Glyph encoding
-
- 'use strict';
-
- var cffStandardStrings = [
- '.notdef', 'space', 'exclam', 'quotedbl', 'numbersign', 'dollar', 'percent', 'ampersand', 'quoteright',
- 'parenleft', 'parenright', 'asterisk', 'plus', 'comma', 'hyphen', 'period', 'slash', 'zero', 'one', 'two',
- 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'colon', 'semicolon', 'less', 'equal', 'greater',
- 'question', 'at', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
- 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'bracketleft', 'backslash', 'bracketright', 'asciicircum', 'underscore',
- 'quoteleft', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
- 'u', 'v', 'w', 'x', 'y', 'z', 'braceleft', 'bar', 'braceright', 'asciitilde', 'exclamdown', 'cent', 'sterling',
- 'fraction', 'yen', 'florin', 'section', 'currency', 'quotesingle', 'quotedblleft', 'guillemotleft',
- 'guilsinglleft', 'guilsinglright', 'fi', 'fl', 'endash', 'dagger', 'daggerdbl', 'periodcentered', 'paragraph',
- 'bullet', 'quotesinglbase', 'quotedblbase', 'quotedblright', 'guillemotright', 'ellipsis', 'perthousand',
- 'questiondown', 'grave', 'acute', 'circumflex', 'tilde', 'macron', 'breve', 'dotaccent', 'dieresis', 'ring',
- 'cedilla', 'hungarumlaut', 'ogonek', 'caron', 'emdash', 'AE', 'ordfeminine', 'Lslash', 'Oslash', 'OE',
- 'ordmasculine', 'ae', 'dotlessi', 'lslash', 'oslash', 'oe', 'germandbls', 'onesuperior', 'logicalnot', 'mu',
- 'trademark', 'Eth', 'onehalf', 'plusminus', 'Thorn', 'onequarter', 'divide', 'brokenbar', 'degree', 'thorn',
- 'threequarters', 'twosuperior', 'registered', 'minus', 'eth', 'multiply', 'threesuperior', 'copyright',
- 'Aacute', 'Acircumflex', 'Adieresis', 'Agrave', 'Aring', 'Atilde', 'Ccedilla', 'Eacute', 'Ecircumflex',
- 'Edieresis', 'Egrave', 'Iacute', 'Icircumflex', 'Idieresis', 'Igrave', 'Ntilde', 'Oacute', 'Ocircumflex',
- 'Odieresis', 'Ograve', 'Otilde', 'Scaron', 'Uacute', 'Ucircumflex', 'Udieresis', 'Ugrave', 'Yacute',
- 'Ydieresis', 'Zcaron', 'aacute', 'acircumflex', 'adieresis', 'agrave', 'aring', 'atilde', 'ccedilla', 'eacute',
- 'ecircumflex', 'edieresis', 'egrave', 'iacute', 'icircumflex', 'idieresis', 'igrave', 'ntilde', 'oacute',
- 'ocircumflex', 'odieresis', 'ograve', 'otilde', 'scaron', 'uacute', 'ucircumflex', 'udieresis', 'ugrave',
- 'yacute', 'ydieresis', 'zcaron', 'exclamsmall', 'Hungarumlautsmall', 'dollaroldstyle', 'dollarsuperior',
- 'ampersandsmall', 'Acutesmall', 'parenleftsuperior', 'parenrightsuperior', '266 ff', 'onedotenleader',
- 'zerooldstyle', 'oneoldstyle', 'twooldstyle', 'threeoldstyle', 'fouroldstyle', 'fiveoldstyle', 'sixoldstyle',
- 'sevenoldstyle', 'eightoldstyle', 'nineoldstyle', 'commasuperior', 'threequartersemdash', 'periodsuperior',
- 'questionsmall', 'asuperior', 'bsuperior', 'centsuperior', 'dsuperior', 'esuperior', 'isuperior', 'lsuperior',
- 'msuperior', 'nsuperior', 'osuperior', 'rsuperior', 'ssuperior', 'tsuperior', 'ff', 'ffi', 'ffl',
- 'parenleftinferior', 'parenrightinferior', 'Circumflexsmall', 'hyphensuperior', 'Gravesmall', 'Asmall',
- 'Bsmall', 'Csmall', 'Dsmall', 'Esmall', 'Fsmall', 'Gsmall', 'Hsmall', 'Ismall', 'Jsmall', 'Ksmall', 'Lsmall',
- 'Msmall', 'Nsmall', 'Osmall', 'Psmall', 'Qsmall', 'Rsmall', 'Ssmall', 'Tsmall', 'Usmall', 'Vsmall', 'Wsmall',
- 'Xsmall', 'Ysmall', 'Zsmall', 'colonmonetary', 'onefitted', 'rupiah', 'Tildesmall', 'exclamdownsmall',
- 'centoldstyle', 'Lslashsmall', 'Scaronsmall', 'Zcaronsmall', 'Dieresissmall', 'Brevesmall', 'Caronsmall',
- 'Dotaccentsmall', 'Macronsmall', 'figuredash', 'hypheninferior', 'Ogoneksmall', 'Ringsmall', 'Cedillasmall',
- 'questiondownsmall', 'oneeighth', 'threeeighths', 'fiveeighths', 'seveneighths', 'onethird', 'twothirds',
- 'zerosuperior', 'foursuperior', 'fivesuperior', 'sixsuperior', 'sevensuperior', 'eightsuperior', 'ninesuperior',
- 'zeroinferior', 'oneinferior', 'twoinferior', 'threeinferior', 'fourinferior', 'fiveinferior', 'sixinferior',
- 'seveninferior', 'eightinferior', 'nineinferior', 'centinferior', 'dollarinferior', 'periodinferior',
- 'commainferior', 'Agravesmall', 'Aacutesmall', 'Acircumflexsmall', 'Atildesmall', 'Adieresissmall',
- 'Aringsmall', 'AEsmall', 'Ccedillasmall', 'Egravesmall', 'Eacutesmall', 'Ecircumflexsmall', 'Edieresissmall',
- 'Igravesmall', 'Iacutesmall', 'Icircumflexsmall', 'Idieresissmall', 'Ethsmall', 'Ntildesmall', 'Ogravesmall',
- 'Oacutesmall', 'Ocircumflexsmall', 'Otildesmall', 'Odieresissmall', 'OEsmall', 'Oslashsmall', 'Ugravesmall',
- 'Uacutesmall', 'Ucircumflexsmall', 'Udieresissmall', 'Yacutesmall', 'Thornsmall', 'Ydieresissmall', '001.000',
- '001.001', '001.002', '001.003', 'Black', 'Bold', 'Book', 'Light', 'Medium', 'Regular', 'Roman', 'Semibold'];
-
- var cffStandardEncoding = [
- '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
- '', '', '', '', 'space', 'exclam', 'quotedbl', 'numbersign', 'dollar', 'percent', 'ampersand', 'quoteright',
- 'parenleft', 'parenright', 'asterisk', 'plus', 'comma', 'hyphen', 'period', 'slash', 'zero', 'one', 'two',
- 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'colon', 'semicolon', 'less', 'equal', 'greater',
- 'question', 'at', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
- 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'bracketleft', 'backslash', 'bracketright', 'asciicircum', 'underscore',
- 'quoteleft', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
- 'u', 'v', 'w', 'x', 'y', 'z', 'braceleft', 'bar', 'braceright', 'asciitilde', '', '', '', '', '', '', '', '',
- '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
- 'exclamdown', 'cent', 'sterling', 'fraction', 'yen', 'florin', 'section', 'currency', 'quotesingle',
- 'quotedblleft', 'guillemotleft', 'guilsinglleft', 'guilsinglright', 'fi', 'fl', '', 'endash', 'dagger',
- 'daggerdbl', 'periodcentered', '', 'paragraph', 'bullet', 'quotesinglbase', 'quotedblbase', 'quotedblright',
- 'guillemotright', 'ellipsis', 'perthousand', '', 'questiondown', '', 'grave', 'acute', 'circumflex', 'tilde',
- 'macron', 'breve', 'dotaccent', 'dieresis', '', 'ring', 'cedilla', '', 'hungarumlaut', 'ogonek', 'caron',
- 'emdash', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'AE', '', 'ordfeminine', '', '', '',
- '', 'Lslash', 'Oslash', 'OE', 'ordmasculine', '', '', '', '', '', 'ae', '', '', '', 'dotlessi', '', '',
- 'lslash', 'oslash', 'oe', 'germandbls'];
-
- var cffExpertEncoding = [
- '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
- '', '', '', '', 'space', 'exclamsmall', 'Hungarumlautsmall', '', 'dollaroldstyle', 'dollarsuperior',
- 'ampersandsmall', 'Acutesmall', 'parenleftsuperior', 'parenrightsuperior', 'twodotenleader', 'onedotenleader',
- 'comma', 'hyphen', 'period', 'fraction', 'zerooldstyle', 'oneoldstyle', 'twooldstyle', 'threeoldstyle',
- 'fouroldstyle', 'fiveoldstyle', 'sixoldstyle', 'sevenoldstyle', 'eightoldstyle', 'nineoldstyle', 'colon',
- 'semicolon', 'commasuperior', 'threequartersemdash', 'periodsuperior', 'questionsmall', '', 'asuperior',
- 'bsuperior', 'centsuperior', 'dsuperior', 'esuperior', '', '', 'isuperior', '', '', 'lsuperior', 'msuperior',
- 'nsuperior', 'osuperior', '', '', 'rsuperior', 'ssuperior', 'tsuperior', '', 'ff', 'fi', 'fl', 'ffi', 'ffl',
- 'parenleftinferior', '', 'parenrightinferior', 'Circumflexsmall', 'hyphensuperior', 'Gravesmall', 'Asmall',
- 'Bsmall', 'Csmall', 'Dsmall', 'Esmall', 'Fsmall', 'Gsmall', 'Hsmall', 'Ismall', 'Jsmall', 'Ksmall', 'Lsmall',
- 'Msmall', 'Nsmall', 'Osmall', 'Psmall', 'Qsmall', 'Rsmall', 'Ssmall', 'Tsmall', 'Usmall', 'Vsmall', 'Wsmall',
- 'Xsmall', 'Ysmall', 'Zsmall', 'colonmonetary', 'onefitted', 'rupiah', 'Tildesmall', '', '', '', '', '', '', '',
- '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
- 'exclamdownsmall', 'centoldstyle', 'Lslashsmall', '', '', 'Scaronsmall', 'Zcaronsmall', 'Dieresissmall',
- 'Brevesmall', 'Caronsmall', '', 'Dotaccentsmall', '', '', 'Macronsmall', '', '', 'figuredash', 'hypheninferior',
- '', '', 'Ogoneksmall', 'Ringsmall', 'Cedillasmall', '', '', '', 'onequarter', 'onehalf', 'threequarters',
- 'questiondownsmall', 'oneeighth', 'threeeighths', 'fiveeighths', 'seveneighths', 'onethird', 'twothirds', '',
- '', 'zerosuperior', 'onesuperior', 'twosuperior', 'threesuperior', 'foursuperior', 'fivesuperior',
- 'sixsuperior', 'sevensuperior', 'eightsuperior', 'ninesuperior', 'zeroinferior', 'oneinferior', 'twoinferior',
- 'threeinferior', 'fourinferior', 'fiveinferior', 'sixinferior', 'seveninferior', 'eightinferior',
- 'nineinferior', 'centinferior', 'dollarinferior', 'periodinferior', 'commainferior', 'Agravesmall',
- 'Aacutesmall', 'Acircumflexsmall', 'Atildesmall', 'Adieresissmall', 'Aringsmall', 'AEsmall', 'Ccedillasmall',
- 'Egravesmall', 'Eacutesmall', 'Ecircumflexsmall', 'Edieresissmall', 'Igravesmall', 'Iacutesmall',
- 'Icircumflexsmall', 'Idieresissmall', 'Ethsmall', 'Ntildesmall', 'Ogravesmall', 'Oacutesmall',
- 'Ocircumflexsmall', 'Otildesmall', 'Odieresissmall', 'OEsmall', 'Oslashsmall', 'Ugravesmall', 'Uacutesmall',
- 'Ucircumflexsmall', 'Udieresissmall', 'Yacutesmall', 'Thornsmall', 'Ydieresissmall'];
-
- var standardNames = [
- '.notdef', '.null', 'nonmarkingreturn', 'space', 'exclam', 'quotedbl', 'numbersign', 'dollar', 'percent',
- 'ampersand', 'quotesingle', 'parenleft', 'parenright', 'asterisk', 'plus', 'comma', 'hyphen', 'period', 'slash',
- 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'colon', 'semicolon', 'less',
- 'equal', 'greater', 'question', 'at', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
- 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'bracketleft', 'backslash', 'bracketright',
- 'asciicircum', 'underscore', 'grave', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o',
- 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'braceleft', 'bar', 'braceright', 'asciitilde',
- 'Adieresis', 'Aring', 'Ccedilla', 'Eacute', 'Ntilde', 'Odieresis', 'Udieresis', 'aacute', 'agrave',
- 'acircumflex', 'adieresis', 'atilde', 'aring', 'ccedilla', 'eacute', 'egrave', 'ecircumflex', 'edieresis',
- 'iacute', 'igrave', 'icircumflex', 'idieresis', 'ntilde', 'oacute', 'ograve', 'ocircumflex', 'odieresis',
- 'otilde', 'uacute', 'ugrave', 'ucircumflex', 'udieresis', 'dagger', 'degree', 'cent', 'sterling', 'section',
- 'bullet', 'paragraph', 'germandbls', 'registered', 'copyright', 'trademark', 'acute', 'dieresis', 'notequal',
- 'AE', 'Oslash', 'infinity', 'plusminus', 'lessequal', 'greaterequal', 'yen', 'mu', 'partialdiff', 'summation',
- 'product', 'pi', 'integral', 'ordfeminine', 'ordmasculine', 'Omega', 'ae', 'oslash', 'questiondown',
- 'exclamdown', 'logicalnot', 'radical', 'florin', 'approxequal', 'Delta', 'guillemotleft', 'guillemotright',
- 'ellipsis', 'nonbreakingspace', 'Agrave', 'Atilde', 'Otilde', 'OE', 'oe', 'endash', 'emdash', 'quotedblleft',
- 'quotedblright', 'quoteleft', 'quoteright', 'divide', 'lozenge', 'ydieresis', 'Ydieresis', 'fraction',
- 'currency', 'guilsinglleft', 'guilsinglright', 'fi', 'fl', 'daggerdbl', 'periodcentered', 'quotesinglbase',
- 'quotedblbase', 'perthousand', 'Acircumflex', 'Ecircumflex', 'Aacute', 'Edieresis', 'Egrave', 'Iacute',
- 'Icircumflex', 'Idieresis', 'Igrave', 'Oacute', 'Ocircumflex', 'apple', 'Ograve', 'Uacute', 'Ucircumflex',
- 'Ugrave', 'dotlessi', 'circumflex', 'tilde', 'macron', 'breve', 'dotaccent', 'ring', 'cedilla', 'hungarumlaut',
- 'ogonek', 'caron', 'Lslash', 'lslash', 'Scaron', 'scaron', 'Zcaron', 'zcaron', 'brokenbar', 'Eth', 'eth',
- 'Yacute', 'yacute', 'Thorn', 'thorn', 'minus', 'multiply', 'onesuperior', 'twosuperior', 'threesuperior',
- 'onehalf', 'onequarter', 'threequarters', 'franc', 'Gbreve', 'gbreve', 'Idotaccent', 'Scedilla', 'scedilla',
- 'Cacute', 'cacute', 'Ccaron', 'ccaron', 'dcroat'];
-
- // This is the encoding used for fonts created from scratch.
- // It loops through all glyphs and finds the appropriate unicode value.
- // Since it's linear time, other encodings will be faster.
- function DefaultEncoding(font) {
- this.font = font;
- }
-
- DefaultEncoding.prototype.charToGlyphIndex = function(c) {
- var code = c.charCodeAt(0);
- var glyphs = this.font.glyphs;
- if (glyphs) {
- for (var i = 0; i < glyphs.length; i += 1) {
- var glyph = glyphs.get(i);
- for (var j = 0; j < glyph.unicodes.length; j += 1) {
- if (glyph.unicodes[j] === code) {
- return i;
- }
- }
- }
- } else {
- return null;
- }
- };
-
- function CmapEncoding(cmap) {
- this.cmap = cmap;
- }
-
- CmapEncoding.prototype.charToGlyphIndex = function(c) {
- return this.cmap.glyphIndexMap[c.charCodeAt(0)] || 0;
- };
-
- function CffEncoding(encoding, charset) {
- this.encoding = encoding;
- this.charset = charset;
- }
-
- CffEncoding.prototype.charToGlyphIndex = function(s) {
- var code = s.charCodeAt(0);
- var charName = this.encoding[code];
- return this.charset.indexOf(charName);
- };
-
- function GlyphNames(post) {
- var i;
- switch (post.version) {
- case 1:
- this.names = exports.standardNames.slice();
- break;
- case 2:
- this.names = new Array(post.numberOfGlyphs);
- for (i = 0; i < post.numberOfGlyphs; i++) {
- if (post.glyphNameIndex[i] < exports.standardNames.length) {
- this.names[i] = exports.standardNames[post.glyphNameIndex[i]];
- } else {
- this.names[i] = post.names[post.glyphNameIndex[i] - exports.standardNames.length];
- }
- }
-
- break;
- case 2.5:
- this.names = new Array(post.numberOfGlyphs);
- for (i = 0; i < post.numberOfGlyphs; i++) {
- this.names[i] = exports.standardNames[i + post.glyphNameIndex[i]];
- }
-
- break;
- case 3:
- this.names = [];
- break;
- }
- }
-
- GlyphNames.prototype.nameToGlyphIndex = function(name) {
- return this.names.indexOf(name);
- };
-
- GlyphNames.prototype.glyphIndexToName = function(gid) {
- return this.names[gid];
- };
-
- function addGlyphNames(font) {
- var glyph;
- var glyphIndexMap = font.tables.cmap.glyphIndexMap;
- var charCodes = Object.keys(glyphIndexMap);
-
- for (var i = 0; i < charCodes.length; i += 1) {
- var c = charCodes[i];
- var glyphIndex = glyphIndexMap[c];
- glyph = font.glyphs.get(glyphIndex);
- glyph.addUnicode(parseInt(c));
- }
-
- for (i = 0; i < font.glyphs.length; i += 1) {
- glyph = font.glyphs.get(i);
- if (font.cffEncoding) {
- glyph.name = font.cffEncoding.charset[i];
- } else {
- glyph.name = font.glyphNames.glyphIndexToName(i);
- }
- }
- }
-
- exports.cffStandardStrings = cffStandardStrings;
- exports.cffStandardEncoding = cffStandardEncoding;
- exports.cffExpertEncoding = cffExpertEncoding;
- exports.standardNames = standardNames;
- exports.DefaultEncoding = DefaultEncoding;
- exports.CmapEncoding = CmapEncoding;
- exports.CffEncoding = CffEncoding;
- exports.GlyphNames = GlyphNames;
- exports.addGlyphNames = addGlyphNames;
-
- },{}],5:[function(_dereq_,module,exports){
- // The Font object
-
- 'use strict';
-
- var path = _dereq_('./path');
- var sfnt = _dereq_('./tables/sfnt');
- var encoding = _dereq_('./encoding');
- var glyphset = _dereq_('./glyphset');
-
- // A Font represents a loaded OpenType font file.
- // It contains a set of glyphs and methods to draw text on a drawing context,
- // or to get a path representing the text.
- function Font(options) {
- options = options || {};
-
- // OS X will complain if the names are empty, so we put a single space everywhere by default.
- this.familyName = options.familyName || ' ';
- this.styleName = options.styleName || ' ';
- this.designer = options.designer || ' ';
- this.designerURL = options.designerURL || ' ';
- this.manufacturer = options.manufacturer || ' ';
- this.manufacturerURL = options.manufacturerURL || ' ';
- this.license = options.license || ' ';
- this.licenseURL = options.licenseURL || ' ';
- this.version = options.version || 'Version 0.1';
- this.description = options.description || ' ';
- this.copyright = options.copyright || ' ';
- this.trademark = options.trademark || ' ';
- this.unitsPerEm = options.unitsPerEm || 1000;
- this.ascender = options.ascender;
- this.descender = options.descender;
- this.supported = true;
- this.glyphs = new glyphset.GlyphSet(this, options.glyphs || []);
- this.encoding = new encoding.DefaultEncoding(this);
- this.tables = {};
- }
-
- // Check if the font has a glyph for the given character.
- Font.prototype.hasChar = function(c) {
- return this.encoding.charToGlyphIndex(c) !== null;
- };
-
- // Convert the given character to a single glyph index.
- // Note that this function assumes that there is a one-to-one mapping between
- // the given character and a glyph; for complex scripts this might not be the case.
- Font.prototype.charToGlyphIndex = function(s) {
- return this.encoding.charToGlyphIndex(s);
- };
-
- // Convert the given character to a single Glyph object.
- // Note that this function assumes that there is a one-to-one mapping between
- // the given character and a glyph; for complex scripts this might not be the case.
- Font.prototype.charToGlyph = function(c) {
- var glyphIndex = this.charToGlyphIndex(c);
- var glyph = this.glyphs.get(glyphIndex);
- if (!glyph) {
- // .notdef
- glyph = this.glyphs.get(0);
- }
-
- return glyph;
- };
-
- // Convert the given text to a list of Glyph objects.
- // Note that there is no strict one-to-one mapping between characters and
- // glyphs, so the list of returned glyphs can be larger or smaller than the
- // length of the given string.
- Font.prototype.stringToGlyphs = function(s) {
- var glyphs = [];
- for (var i = 0; i < s.length; i += 1) {
- var c = s[i];
- glyphs.push(this.charToGlyph(c));
- }
-
- return glyphs;
- };
-
- Font.prototype.nameToGlyphIndex = function(name) {
- return this.glyphNames.nameToGlyphIndex(name);
- };
-
- Font.prototype.nameToGlyph = function(name) {
- var glyphIndex = this.nametoGlyphIndex(name);
- var glyph = this.glyphs.get(glyphIndex);
- if (!glyph) {
- // .notdef
- glyph = this.glyphs.get(0);
- }
-
- return glyph;
- };
-
- Font.prototype.glyphIndexToName = function(gid) {
- if (!this.glyphNames.glyphIndexToName) {
- return '';
- }
-
- return this.glyphNames.glyphIndexToName(gid);
- };
-
- // Retrieve the value of the kerning pair between the left glyph (or its index)
- // and the right glyph (or its index). If no kerning pair is found, return 0.
- // The kerning value gets added to the advance width when calculating the spacing
- // between glyphs.
- Font.prototype.getKerningValue = function(leftGlyph, rightGlyph) {
- leftGlyph = leftGlyph.index || leftGlyph;
- rightGlyph = rightGlyph.index || rightGlyph;
- var gposKerning = this.getGposKerningValue;
- return gposKerning ? gposKerning(leftGlyph, rightGlyph) :
- (this.kerningPairs[leftGlyph + ',' + rightGlyph] || 0);
- };
-
- // Helper function that invokes the given callback for each glyph in the given text.
- // The callback gets `(glyph, x, y, fontSize, options)`.
- Font.prototype.forEachGlyph = function(text, x, y, fontSize, options, callback) {
- if (!this.supported) {
- return;
- }
-
- x = x !== undefined ? x : 0;
- y = y !== undefined ? y : 0;
- fontSize = fontSize !== undefined ? fontSize : 72;
- options = options || {};
- var kerning = options.kerning === undefined ? true : options.kerning;
- var fontScale = 1 / this.unitsPerEm * fontSize;
- var glyphs = this.stringToGlyphs(text);
- for (var i = 0; i < glyphs.length; i += 1) {
- var glyph = glyphs[i];
- callback(glyph, x, y, fontSize, options);
- if (glyph.advanceWidth) {
- x += glyph.advanceWidth * fontScale;
- }
-
- if (kerning && i < glyphs.length - 1) {
- var kerningValue = this.getKerningValue(glyph, glyphs[i + 1]);
- x += kerningValue * fontScale;
- }
- }
- };
-
- // Create a Path object that represents the given text.
- //
- // text - The text to create.
- // x - Horizontal position of the beginning of the text. (default: 0)
- // y - Vertical position of the *baseline* of the text. (default: 0)
- // fontSize - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`. (default: 72)
- // Options is an optional object that contains:
- // - kerning - Whether to take kerning information into account. (default: true)
- //
- // Returns a Path object.
- Font.prototype.getPath = function(text, x, y, fontSize, options) {
- var fullPath = new path.Path();
- this.forEachGlyph(text, x, y, fontSize, options, function(glyph, gX, gY, gFontSize) {
- var glyphPath = glyph.getPath(gX, gY, gFontSize);
- fullPath.extend(glyphPath);
- });
-
- return fullPath;
- };
-
- // Draw the text on the given drawing context.
- //
- // ctx - A 2D drawing context, like Canvas.
- // text - The text to create.
- // x - Horizontal position of the beginning of the text. (default: 0)
- // y - Vertical position of the *baseline* of the text. (default: 0)
- // fontSize - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`. (default: 72)
- // Options is an optional object that contains:
- // - kerning - Whether to take kerning information into account. (default: true)
- Font.prototype.draw = function(ctx, text, x, y, fontSize, options) {
- this.getPath(text, x, y, fontSize, options).draw(ctx);
- };
-
- // Draw the points of all glyphs in the text.
- // On-curve points will be drawn in blue, off-curve points will be drawn in red.
- //
- // ctx - A 2D drawing context, like Canvas.
- // text - The text to create.
- // x - Horizontal position of the beginning of the text. (default: 0)
- // y - Vertical position of the *baseline* of the text. (default: 0)
- // fontSize - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`. (default: 72)
- // Options is an optional object that contains:
- // - kerning - Whether to take kerning information into account. (default: true)
- Font.prototype.drawPoints = function(ctx, text, x, y, fontSize, options) {
- this.forEachGlyph(text, x, y, fontSize, options, function(glyph, gX, gY, gFontSize) {
- glyph.drawPoints(ctx, gX, gY, gFontSize);
- });
- };
-
- // Draw lines indicating important font measurements for all glyphs in the text.
- // Black lines indicate the origin of the coordinate system (point 0,0).
- // Blue lines indicate the glyph bounding box.
- // Green line indicates the advance width of the glyph.
- //
- // ctx - A 2D drawing context, like Canvas.
- // text - The text to create.
- // x - Horizontal position of the beginning of the text. (default: 0)
- // y - Vertical position of the *baseline* of the text. (default: 0)
- // fontSize - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`. (default: 72)
- // Options is an optional object that contains:
- // - kerning - Whether to take kerning information into account. (default: true)
- Font.prototype.drawMetrics = function(ctx, text, x, y, fontSize, options) {
- this.forEachGlyph(text, x, y, fontSize, options, function(glyph, gX, gY, gFontSize) {
- glyph.drawMetrics(ctx, gX, gY, gFontSize);
- });
- };
-
- // Validate
- Font.prototype.validate = function() {
- var warnings = [];
- var _this = this;
-
- function assert(predicate, message) {
- if (!predicate) {
- warnings.push(message);
- }
- }
-
- function assertStringAttribute(attrName) {
- assert(_this[attrName] && _this[attrName].trim().length > 0, 'No ' + attrName + ' specified.');
- }
-
- // Identification information
- assertStringAttribute('familyName');
- assertStringAttribute('weightName');
- assertStringAttribute('manufacturer');
- assertStringAttribute('copyright');
- assertStringAttribute('version');
-
- // Dimension information
- assert(this.unitsPerEm > 0, 'No unitsPerEm specified.');
- };
-
- // Convert the font object to a SFNT data structure.
- // This structure contains all the necessary tables and metadata to create a binary OTF file.
- Font.prototype.toTables = function() {
- return sfnt.fontToTable(this);
- };
-
- Font.prototype.toBuffer = function() {
- var sfntTable = this.toTables();
- var bytes = sfntTable.encode();
- var buffer = new ArrayBuffer(bytes.length);
- var intArray = new Uint8Array(buffer);
- for (var i = 0; i < bytes.length; i++) {
- intArray[i] = bytes[i];
- }
-
- return buffer;
- };
-
- // Initiate a download of the OpenType font.
- Font.prototype.download = function() {
- var fileName = this.familyName.replace(/\s/g, '') + '-' + this.styleName + '.otf';
- var buffer = this.toBuffer();
-
- window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
- window.requestFileSystem(window.TEMPORARY, buffer.byteLength, function(fs) {
- fs.root.getFile(fileName, {create: true}, function(fileEntry) {
- fileEntry.createWriter(function(writer) {
- var dataView = new DataView(buffer);
- var blob = new Blob([dataView], {type: 'font/opentype'});
- writer.write(blob);
-
- writer.addEventListener('writeend', function() {
- // Navigating to the file will download it.
- location.href = fileEntry.toURL();
- }, false);
- });
- });
- },
-
- function(err) {
- throw err;
- });
- };
-
- exports.Font = Font;
-
- },{"./encoding":4,"./glyphset":7,"./path":10,"./tables/sfnt":25}],6:[function(_dereq_,module,exports){
- // The Glyph object
-
- 'use strict';
-
- var check = _dereq_('./check');
- var draw = _dereq_('./draw');
- var path = _dereq_('./path');
-
- function getPathDefinition(glyph, path) {
- var _path = path || { commands: [] };
- return {
- configurable: true,
-
- get: function() {
- if (typeof _path === 'function') {
- _path = _path();
- }
-
- return _path;
- },
-
- set: function(p) {
- _path = p;
- }
- };
- }
-
- // A Glyph is an individual mark that often corresponds to a character.
- // Some glyphs, such as ligatures, are a combination of many characters.
- // Glyphs are the basic building blocks of a font.
- //
- // The `Glyph` class contains utility methods for drawing the path and its points.
- function Glyph(options) {
- // By putting all the code on a prototype function (which is only declared once)
- // we reduce the memory requirements for larger fonts by some 2%
- this.bindConstructorValues(options);
- }
-
- Glyph.prototype.bindConstructorValues = function(options) {
- this.index = options.index || 0;
-
- // These three values cannnot be deferred for memory optimization:
- this.name = options.name || null;
- this.unicode = options.unicode || undefined;
- this.unicodes = options.unicodes || options.unicode !== undefined ? [options.unicode] : [];
-
- // But by binding these values only when necessary, we reduce can
- // the memory requirements by almost 3% for larger fonts.
- if (options.xMin) {
- this.xMin = options.xMin;
- }
-
- if (options.yMin) {
- this.yMin = options.yMin;
- }
-
- if (options.xMax) {
- this.xMax = options.xMax;
- }
-
- if (options.yMax) {
- this.yMax = options.yMax;
- }
-
- if (options.advanceWidth) {
- this.advanceWidth = options.advanceWidth;
- }
-
- // The path for a glyph is the most memory intensive, and is bound as a value
- // with a getter/setter to ensure we actually do path parsing only once the
- // path is actually needed by anything.
- Object.defineProperty(this, 'path', getPathDefinition(this, options.path));
- };
-
- Glyph.prototype.addUnicode = function(unicode) {
- if (this.unicodes.length === 0) {
- this.unicode = unicode;
- }
-
- this.unicodes.push(unicode);
- };
-
- // Convert the glyph to a Path we can draw on a drawing context.
- //
- // x - Horizontal position of the glyph. (default: 0)
- // y - Vertical position of the *baseline* of the glyph. (default: 0)
- // fontSize - Font size, in pixels (default: 72).
- Glyph.prototype.getPath = function(x, y, fontSize) {
- x = x !== undefined ? x : 0;
- y = y !== undefined ? y : 0;
- fontSize = fontSize !== undefined ? fontSize : 72;
- var scale = 1 / this.path.unitsPerEm * fontSize;
- var p = new path.Path();
- var commands = this.path.commands;
- for (var i = 0; i < commands.length; i += 1) {
- var cmd = commands[i];
- if (cmd.type === 'M') {
- p.moveTo(x + (cmd.x * scale), y + (-cmd.y * scale));
- } else if (cmd.type === 'L') {
- p.lineTo(x + (cmd.x * scale), y + (-cmd.y * scale));
- } else if (cmd.type === 'Q') {
- p.quadraticCurveTo(x + (cmd.x1 * scale), y + (-cmd.y1 * scale),
- x + (cmd.x * scale), y + (-cmd.y * scale));
- } else if (cmd.type === 'C') {
- p.curveTo(x + (cmd.x1 * scale), y + (-cmd.y1 * scale),
- x + (cmd.x2 * scale), y + (-cmd.y2 * scale),
- x + (cmd.x * scale), y + (-cmd.y * scale));
- } else if (cmd.type === 'Z') {
- p.closePath();
- }
- }
-
- return p;
- };
-
- // Split the glyph into contours.
- // This function is here for backwards compatibility, and to
- // provide raw access to the TrueType glyph outlines.
- Glyph.prototype.getContours = function() {
- if (this.points === undefined) {
- return [];
- }
-
- var contours = [];
- var currentContour = [];
- for (var i = 0; i < this.points.length; i += 1) {
- var pt = this.points[i];
- currentContour.push(pt);
- if (pt.lastPointOfContour) {
- contours.push(currentContour);
- currentContour = [];
- }
- }
-
- check.argument(currentContour.length === 0, 'There are still points left in the current contour.');
- return contours;
- };
-
- // Calculate the xMin/yMin/xMax/yMax/lsb/rsb for a Glyph.
- Glyph.prototype.getMetrics = function() {
- var commands = this.path.commands;
- var xCoords = [];
- var yCoords = [];
- for (var i = 0; i < commands.length; i += 1) {
- var cmd = commands[i];
- if (cmd.type !== 'Z') {
- xCoords.push(cmd.x);
- yCoords.push(cmd.y);
- }
-
- if (cmd.type === 'Q' || cmd.type === 'C') {
- xCoords.push(cmd.x1);
- yCoords.push(cmd.y1);
- }
-
- if (cmd.type === 'C') {
- xCoords.push(cmd.x2);
- yCoords.push(cmd.y2);
- }
- }
-
- var metrics = {
- xMin: Math.min.apply(null, xCoords),
- yMin: Math.min.apply(null, yCoords),
- xMax: Math.max.apply(null, xCoords),
- yMax: Math.max.apply(null, yCoords),
- leftSideBearing: 0
- };
- metrics.rightSideBearing = this.advanceWidth - metrics.leftSideBearing - (metrics.xMax - metrics.xMin);
- return metrics;
- };
-
- // Draw the glyph on the given context.
- //
- // ctx - The drawing context.
- // x - Horizontal position of the glyph. (default: 0)
- // y - Vertical position of the *baseline* of the glyph. (default: 0)
- // fontSize - Font size, in pixels (default: 72).
- Glyph.prototype.draw = function(ctx, x, y, fontSize) {
- this.getPath(x, y, fontSize).draw(ctx);
- };
-
- // Draw the points of the glyph.
- // On-curve points will be drawn in blue, off-curve points will be drawn in red.
- //
- // ctx - The drawing context.
- // x - Horizontal position of the glyph. (default: 0)
- // y - Vertical position of the *baseline* of the glyph. (default: 0)
- // fontSize - Font size, in pixels (default: 72).
- Glyph.prototype.drawPoints = function(ctx, x, y, fontSize) {
-
- function drawCircles(l, x, y, scale) {
- var PI_SQ = Math.PI * 2;
- ctx.beginPath();
- for (var j = 0; j < l.length; j += 1) {
- ctx.moveTo(x + (l[j].x * scale), y + (l[j].y * scale));
- ctx.arc(x + (l[j].x * scale), y + (l[j].y * scale), 2, 0, PI_SQ, false);
- }
-
- ctx.closePath();
- ctx.fill();
- }
-
- x = x !== undefined ? x : 0;
- y = y !== undefined ? y : 0;
- fontSize = fontSize !== undefined ? fontSize : 24;
- var scale = 1 / this.path.unitsPerEm * fontSize;
-
- var blueCircles = [];
- var redCircles = [];
- var path = this.path;
- for (var i = 0; i < path.commands.length; i += 1) {
- var cmd = path.commands[i];
- if (cmd.x !== undefined) {
- blueCircles.push({x: cmd.x, y: -cmd.y});
- }
-
- if (cmd.x1 !== undefined) {
- redCircles.push({x: cmd.x1, y: -cmd.y1});
- }
-
- if (cmd.x2 !== undefined) {
- redCircles.push({x: cmd.x2, y: -cmd.y2});
- }
- }
-
- ctx.fillStyle = 'blue';
- drawCircles(blueCircles, x, y, scale);
- ctx.fillStyle = 'red';
- drawCircles(redCircles, x, y, scale);
- };
-
- // Draw lines indicating important font measurements.
- // Black lines indicate the origin of the coordinate system (point 0,0).
- // Blue lines indicate the glyph bounding box.
- // Green line indicates the advance width of the glyph.
- //
- // ctx - The drawing context.
- // x - Horizontal position of the glyph. (default: 0)
- // y - Vertical position of the *baseline* of the glyph. (default: 0)
- // fontSize - Font size, in pixels (default: 72).
- Glyph.prototype.drawMetrics = function(ctx, x, y, fontSize) {
- var scale;
- x = x !== undefined ? x : 0;
- y = y !== undefined ? y : 0;
- fontSize = fontSize !== undefined ? fontSize : 24;
- scale = 1 / this.path.unitsPerEm * fontSize;
- ctx.lineWidth = 1;
-
- // Draw the origin
- ctx.strokeStyle = 'black';
- draw.line(ctx, x, -10000, x, 10000);
- draw.line(ctx, -10000, y, 10000, y);
-
- // This code is here due to memory optimization: by not using
- // defaults in the constructor, we save a notable amount of memory.
- var xMin = this.xMin || 0;
- var yMin = this.yMin || 0;
- var xMax = this.xMax || 0;
- var yMax = this.yMax || 0;
- var advanceWidth = this.advanceWidth || 0;
-
- // Draw the glyph box
- ctx.strokeStyle = 'blue';
- draw.line(ctx, x + (xMin * scale), -10000, x + (xMin * scale), 10000);
- draw.line(ctx, x + (xMax * scale), -10000, x + (xMax * scale), 10000);
- draw.line(ctx, -10000, y + (-yMin * scale), 10000, y + (-yMin * scale));
- draw.line(ctx, -10000, y + (-yMax * scale), 10000, y + (-yMax * scale));
-
- // Draw the advance width
- ctx.strokeStyle = 'green';
- draw.line(ctx, x + (advanceWidth * scale), -10000, x + (advanceWidth * scale), 10000);
- };
-
- exports.Glyph = Glyph;
-
- },{"./check":2,"./draw":3,"./path":10}],7:[function(_dereq_,module,exports){
- // The GlyphSet object
-
- 'use strict';
-
- var _glyph = _dereq_('./glyph');
-
- // A GlyphSet represents all glyphs available in the font, but modelled using
- // a deferred glyph loader, for retrieving glyphs only once they are absolutely
- // necessary, to keep the memory footprint down.
- function GlyphSet(font, glyphs) {
- this.font = font;
- this.glyphs = {};
- if (Array.isArray(glyphs)) {
- for (var i = 0; i < glyphs.length; i++) {
- this.glyphs[i] = glyphs[i];
- }
- }
-
- this.length = (glyphs && glyphs.length) || 0;
- }
-
- GlyphSet.prototype.get = function(index) {
- if (typeof this.glyphs[index] === 'function') {
- this.glyphs[index] = this.glyphs[index]();
- }
-
- return this.glyphs[index];
- };
-
- GlyphSet.prototype.push = function(index, loader) {
- this.glyphs[index] = loader;
- this.length++;
- };
-
- function glyphLoader(font, index) {
- return new _glyph.Glyph({index: index, font: font});
- }
-
- /**
- * Generate a stub glyph that can be filled with all metadata *except*
- * the "points" and "path" properties, which must be loaded only once
- * the glyph's path is actually requested for text shaping.
- */
-
- function ttfGlyphLoader(font, index, parseGlyph, data, position, buildPath) {
- return function() {
- var glyph = new _glyph.Glyph({index: index, font: font});
-
- glyph.path = function() {
- parseGlyph(glyph, data, position);
- var path = buildPath(font.glyphs, glyph);
- path.unitsPerEm = font.unitsPerEm;
- return path;
- };
-
- return glyph;
- };
- }
-
- function cffGlyphLoader(font, index, parseCFFCharstring, charstring) {
- return function() {
- var glyph = new _glyph.Glyph({index: index, font: font});
-
- glyph.path = function() {
- var path = parseCFFCharstring(font, glyph, charstring);
- path.unitsPerEm = font.unitsPerEm;
- return path;
- };
-
- return glyph;
- };
- }
-
- exports.GlyphSet = GlyphSet;
- exports.glyphLoader = glyphLoader;
- exports.ttfGlyphLoader = ttfGlyphLoader;
- exports.cffGlyphLoader = cffGlyphLoader;
-
- },{"./glyph":6}],8:[function(_dereq_,module,exports){
- // opentype.js
- // https://github.com/nodebox/opentype.js
- // (c) 2015 Frederik De Bleser
- // opentype.js may be freely distributed under the MIT license.
-
- /* global ArrayBuffer, DataView, Uint8Array, XMLHttpRequest */
-
- 'use strict';
-
- var encoding = _dereq_('./encoding');
- var _font = _dereq_('./font');
- var glyph = _dereq_('./glyph');
- var parse = _dereq_('./parse');
- var path = _dereq_('./path');
-
- var cmap = _dereq_('./tables/cmap');
- var cff = _dereq_('./tables/cff');
- var glyf = _dereq_('./tables/glyf');
- var gpos = _dereq_('./tables/gpos');
- var head = _dereq_('./tables/head');
- var hhea = _dereq_('./tables/hhea');
- var hmtx = _dereq_('./tables/hmtx');
- var kern = _dereq_('./tables/kern');
- var loca = _dereq_('./tables/loca');
- var maxp = _dereq_('./tables/maxp');
- var _name = _dereq_('./tables/name');
- var os2 = _dereq_('./tables/os2');
- var post = _dereq_('./tables/post');
-
- // File loaders /////////////////////////////////////////////////////////
-
- // Convert a Node.js Buffer to an ArrayBuffer
- function toArrayBuffer(buffer) {
- var arrayBuffer = new ArrayBuffer(buffer.length);
- var data = new Uint8Array(arrayBuffer);
- for (var i = 0; i < buffer.length; i += 1) {
- data[i] = buffer[i];
- }
-
- return arrayBuffer;
- }
-
- function loadFromFile(path, callback) {
- var fs = _dereq_('fs');
- fs.readFile(path, function(err, buffer) {
- if (err) {
- return callback(err.message);
- }
-
- callback(null, toArrayBuffer(buffer));
- });
- }
-
- function loadFromUrl(url, callback) {
- var request = new XMLHttpRequest();
- request.open('get', url, true);
- request.responseType = 'arraybuffer';
- request.onload = function() {
- if (request.status !== 200) {
- return callback('Font could not be loaded: ' + request.statusText);
- }
-
- return callback(null, request.response);
- };
-
- request.send();
- }
-
- // Public API ///////////////////////////////////////////////////////////
-
- // Parse the OpenType file data (as an ArrayBuffer) and return a Font object.
- // If the file could not be parsed (most likely because it contains Postscript outlines)
- // we return an empty Font object with the `supported` flag set to `false`.
- function parseBuffer(buffer) {
- var indexToLocFormat;
- var hmtxOffset;
- var glyfOffset;
- var locaOffset;
- var cffOffset;
- var kernOffset;
- var gposOffset;
-
- // OpenType fonts use big endian byte ordering.
- // We can't rely on typed array view types, because they operate with the endianness of the host computer.
- // Instead we use DataViews where we can specify endianness.
-
- var font = new _font.Font();
- var data = new DataView(buffer, 0);
-
- var version = parse.getFixed(data, 0);
- if (version === 1.0) {
- font.outlinesFormat = 'truetype';
- } else {
- version = parse.getTag(data, 0);
- if (version === 'OTTO') {
- font.outlinesFormat = 'cff';
- } else {
- throw new Error('Unsupported OpenType version ' + version);
- }
- }
-
- var numTables = parse.getUShort(data, 4);
-
- // Offset into the table records.
- var p = 12;
- for (var i = 0; i < numTables; i += 1) {
- var tag = parse.getTag(data, p);
- var offset = parse.getULong(data, p + 8);
- switch (tag) {
- case 'cmap':
- font.tables.cmap = cmap.parse(data, offset);
- font.encoding = new encoding.CmapEncoding(font.tables.cmap);
- if (!font.encoding) {
- font.supported = false;
- }
-
- break;
- case 'head':
- font.tables.head = head.parse(data, offset);
- font.unitsPerEm = font.tables.head.unitsPerEm;
- indexToLocFormat = font.tables.head.indexToLocFormat;
- break;
- case 'hhea':
- font.tables.hhea = hhea.parse(data, offset);
- font.ascender = font.tables.hhea.ascender;
- font.descender = font.tables.hhea.descender;
- font.numberOfHMetrics = font.tables.hhea.numberOfHMetrics;
- break;
- case 'hmtx':
- hmtxOffset = offset;
- break;
- case 'maxp':
- font.tables.maxp = maxp.parse(data, offset);
- font.numGlyphs = font.tables.maxp.numGlyphs;
- break;
- case 'name':
- font.tables.name = _name.parse(data, offset);
- font.familyName = font.tables.name.fontFamily;
- font.styleName = font.tables.name.fontSubfamily;
- break;
- case 'OS/2':
- font.tables.os2 = os2.parse(data, offset);
- break;
- case 'post':
- font.tables.post = post.parse(data, offset);
- font.glyphNames = new encoding.GlyphNames(font.tables.post);
- break;
- case 'glyf':
- glyfOffset = offset;
- break;
- case 'loca':
- locaOffset = offset;
- break;
- case 'CFF ':
- cffOffset = offset;
- break;
- case 'kern':
- kernOffset = offset;
- break;
- case 'GPOS':
- gposOffset = offset;
- break;
- }
- p += 16;
- }
-
- if (glyfOffset && locaOffset) {
- var shortVersion = indexToLocFormat === 0;
- var locaTable = loca.parse(data, locaOffset, font.numGlyphs, shortVersion);
- font.glyphs = glyf.parse(data, glyfOffset, locaTable, font);
- hmtx.parse(data, hmtxOffset, font.numberOfHMetrics, font.numGlyphs, font.glyphs);
- encoding.addGlyphNames(font);
- } else if (cffOffset) {
- cff.parse(data, cffOffset, font);
- encoding.addGlyphNames(font);
- } else {
- font.supported = false;
- }
-
- if (font.supported) {
- if (kernOffset) {
- font.kerningPairs = kern.parse(data, kernOffset);
- } else {
- font.kerningPairs = {};
- }
-
- if (gposOffset) {
- gpos.parse(data, gposOffset, font);
- }
- }
-
- return font;
- }
-
- // Asynchronously load the font from a URL or a filesystem. When done, call the callback
- // with two arguments `(err, font)`. The `err` will be null on success,
- // the `font` is a Font object.
- //
- // We use the node.js callback convention so that
- // opentype.js can integrate with frameworks like async.js.
- function load(url, callback) {
- var isNode = typeof window === 'undefined';
- var loadFn = isNode ? loadFromFile : loadFromUrl;
- loadFn(url, function(err, arrayBuffer) {
- if (err) {
- return callback(err);
- }
-
- var font = parseBuffer(arrayBuffer);
- if (!font.supported) {
- return callback('Font is not supported (is this a Postscript font?)');
- }
-
- return callback(null, font);
- });
- }
-
- exports._parse = parse;
- exports.Font = _font.Font;
- exports.Glyph = glyph.Glyph;
- exports.Path = path.Path;
- exports.parse = parseBuffer;
- exports.load = load;
-
- },{"./encoding":4,"./font":5,"./glyph":6,"./parse":9,"./path":10,"./tables/cff":12,"./tables/cmap":13,"./tables/glyf":14,"./tables/gpos":15,"./tables/head":16,"./tables/hhea":17,"./tables/hmtx":18,"./tables/kern":19,"./tables/loca":20,"./tables/maxp":21,"./tables/name":22,"./tables/os2":23,"./tables/post":24,"fs":1}],9:[function(_dereq_,module,exports){
- // Parsing utility functions
-
- 'use strict';
-
- // Retrieve an unsigned byte from the DataView.
- exports.getByte = function getByte(dataView, offset) {
- return dataView.getUint8(offset);
- };
-
- exports.getCard8 = exports.getByte;
-
- // Retrieve an unsigned 16-bit short from the DataView.
- // The value is stored in big endian.
- exports.getUShort = function(dataView, offset) {
- return dataView.getUint16(offset, false);
- };
-
- exports.getCard16 = exports.getUShort;
-
- // Retrieve a signed 16-bit short from the DataView.
- // The value is stored in big endian.
- exports.getShort = function(dataView, offset) {
- return dataView.getInt16(offset, false);
- };
-
- // Retrieve an unsigned 32-bit long from the DataView.
- // The value is stored in big endian.
- exports.getULong = function(dataView, offset) {
- return dataView.getUint32(offset, false);
- };
-
- // Retrieve a 32-bit signed fixed-point number (16.16) from the DataView.
- // The value is stored in big endian.
- exports.getFixed = function(dataView, offset) {
- var decimal = dataView.getInt16(offset, false);
- var fraction = dataView.getUint16(offset + 2, false);
- return decimal + fraction / 65535;
- };
-
- // Retrieve a 4-character tag from the DataView.
- // Tags are used to identify tables.
- exports.getTag = function(dataView, offset) {
- var tag = '';
- for (var i = offset; i < offset + 4; i += 1) {
- tag += String.fromCharCode(dataView.getInt8(i));
- }
-
- return tag;
- };
-
- // Retrieve an offset from the DataView.
- // Offsets are 1 to 4 bytes in length, depending on the offSize argument.
- exports.getOffset = function(dataView, offset, offSize) {
- var v = 0;
- for (var i = 0; i < offSize; i += 1) {
- v <<= 8;
- v += dataView.getUint8(offset + i);
- }
-
- return v;
- };
-
- // Retrieve a number of bytes from start offset to the end offset from the DataView.
- exports.getBytes = function(dataView, startOffset, endOffset) {
- var bytes = [];
- for (var i = startOffset; i < endOffset; i += 1) {
- bytes.push(dataView.getUint8(i));
- }
-
- return bytes;
- };
-
- // Convert the list of bytes to a string.
- exports.bytesToString = function(bytes) {
- var s = '';
- for (var i = 0; i < bytes.length; i += 1) {
- s += String.fromCharCode(bytes[i]);
- }
-
- return s;
- };
-
- var typeOffsets = {
- byte: 1,
- uShort: 2,
- short: 2,
- uLong: 4,
- fixed: 4,
- longDateTime: 8,
- tag: 4
- };
-
- // A stateful parser that changes the offset whenever a value is retrieved.
- // The data is a DataView.
- function Parser(data, offset) {
- this.data = data;
- this.offset = offset;
- this.relativeOffset = 0;
- }
-
- Parser.prototype.parseByte = function() {
- var v = this.data.getUint8(this.offset + this.relativeOffset);
- this.relativeOffset += 1;
- return v;
- };
-
- Parser.prototype.parseChar = function() {
- var v = this.data.getInt8(this.offset + this.relativeOffset);
- this.relativeOffset += 1;
- return v;
- };
-
- Parser.prototype.parseCard8 = Parser.prototype.parseByte;
-
- Parser.prototype.parseUShort = function() {
- var v = this.data.getUint16(this.offset + this.relativeOffset);
- this.relativeOffset += 2;
- return v;
- };
-
- Parser.prototype.parseCard16 = Parser.prototype.parseUShort;
- Parser.prototype.parseSID = Parser.prototype.parseUShort;
- Parser.prototype.parseOffset16 = Parser.prototype.parseUShort;
-
- Parser.prototype.parseShort = function() {
- var v = this.data.getInt16(this.offset + this.relativeOffset);
- this.relativeOffset += 2;
- return v;
- };
-
- Parser.prototype.parseF2Dot14 = function() {
- var v = this.data.getInt16(this.offset + this.relativeOffset) / 16384;
- this.relativeOffset += 2;
- return v;
- };
-
- Parser.prototype.parseULong = function() {
- var v = exports.getULong(this.data, this.offset + this.relativeOffset);
- this.relativeOffset += 4;
- return v;
- };
-
- Parser.prototype.parseFixed = function() {
- var v = exports.getFixed(this.data, this.offset + this.relativeOffset);
- this.relativeOffset += 4;
- return v;
- };
-
- Parser.prototype.parseOffset16List =
- Parser.prototype.parseUShortList = function(count) {
- var offsets = new Array(count);
- var dataView = this.data;
- var offset = this.offset + this.relativeOffset;
- for (var i = 0; i < count; i++) {
- offsets[i] = exports.getUShort(dataView, offset);
- offset += 2;
- }
-
- this.relativeOffset += count * 2;
- return offsets;
- };
-
- Parser.prototype.parseString = function(length) {
- var dataView = this.data;
- var offset = this.offset + this.relativeOffset;
- var string = '';
- this.relativeOffset += length;
- for (var i = 0; i < length; i++) {
- string += String.fromCharCode(dataView.getUint8(offset + i));
- }
-
- return string;
- };
-
- Parser.prototype.parseTag = function() {
- return this.parseString(4);
- };
-
- // LONGDATETIME is a 64-bit integer.
- // JavaScript and unix timestamps traditionally use 32 bits, so we
- // only take the last 32 bits.
- Parser.prototype.parseLongDateTime = function() {
- var v = exports.getULong(this.data, this.offset + this.relativeOffset + 4);
- this.relativeOffset += 8;
- return v;
- };
-
- Parser.prototype.parseFixed = function() {
- var v = exports.getULong(this.data, this.offset + this.relativeOffset);
- this.relativeOffset += 4;
- return v / 65536;
- };
-
- Parser.prototype.parseVersion = function() {
- var major = exports.getUShort(this.data, this.offset + this.relativeOffset);
-
- // How to interpret the minor version is very vague in the spec. 0x5000 is 5, 0x1000 is 1
- // This returns the correct number if minor = 0xN000 where N is 0-9
- var minor = exports.getUShort(this.data, this.offset + this.relativeOffset + 2);
- this.relativeOffset += 4;
- return major + minor / 0x1000 / 10;
- };
-
- Parser.prototype.skip = function(type, amount) {
- if (amount === undefined) {
- amount = 1;
- }
-
- this.relativeOffset += typeOffsets[type] * amount;
- };
-
- exports.Parser = Parser;
-
- },{}],10:[function(_dereq_,module,exports){
- // Geometric objects
-
- 'use strict';
-
- // A bézier path containing a set of path commands similar to a SVG path.
- // Paths can be drawn on a context using `draw`.
- function Path() {
- this.commands = [];
- this.fill = 'black';
- this.stroke = null;
- this.strokeWidth = 1;
- }
-
- Path.prototype.moveTo = function(x, y) {
- this.commands.push({
- type: 'M',
- x: x,
- y: y
- });
- };
-
- Path.prototype.lineTo = function(x, y) {
- this.commands.push({
- type: 'L',
- x: x,
- y: y
- });
- };
-
- Path.prototype.curveTo = Path.prototype.bezierCurveTo = function(x1, y1, x2, y2, x, y) {
- this.commands.push({
- type: 'C',
- x1: x1,
- y1: y1,
- x2: x2,
- y2: y2,
- x: x,
- y: y
- });
- };
-
- Path.prototype.quadTo = Path.prototype.quadraticCurveTo = function(x1, y1, x, y) {
- this.commands.push({
- type: 'Q',
- x1: x1,
- y1: y1,
- x: x,
- y: y
- });
- };
-
- Path.prototype.close = Path.prototype.closePath = function() {
- this.commands.push({
- type: 'Z'
- });
- };
-
- // Add the given path or list of commands to the commands of this path.
- Path.prototype.extend = function(pathOrCommands) {
- if (pathOrCommands.commands) {
- pathOrCommands = pathOrCommands.commands;
- }
-
- Array.prototype.push.apply(this.commands, pathOrCommands);
- };
-
- // Draw the path to a 2D context.
- Path.prototype.draw = function(ctx) {
- ctx.beginPath();
- for (var i = 0; i < this.commands.length; i += 1) {
- var cmd = this.commands[i];
- if (cmd.type === 'M') {
- ctx.moveTo(cmd.x, cmd.y);
- } else if (cmd.type === 'L') {
- ctx.lineTo(cmd.x, cmd.y);
- } else if (cmd.type === 'C') {
- ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
- } else if (cmd.type === 'Q') {
- ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
- } else if (cmd.type === 'Z') {
- ctx.closePath();
- }
- }
-
- if (this.fill) {
- ctx.fillStyle = this.fill;
- ctx.fill();
- }
-
- if (this.stroke) {
- ctx.strokeStyle = this.stroke;
- ctx.lineWidth = this.strokeWidth;
- ctx.stroke();
- }
- };
-
- // Convert the Path to a string of path data instructions
- // See http://www.w3.org/TR/SVG/paths.html#PathData
- // Parameters:
- // - decimalPlaces: The amount of decimal places for floating-point values (default: 2)
- Path.prototype.toPathData = function(decimalPlaces) {
- decimalPlaces = decimalPlaces !== undefined ? decimalPlaces : 2;
-
- function floatToString(v) {
- if (Math.round(v) === v) {
- return '' + Math.round(v);
- } else {
- return v.toFixed(decimalPlaces);
- }
- }
-
- function packValues() {
- var s = '';
- for (var i = 0; i < arguments.length; i += 1) {
- var v = arguments[i];
- if (v >= 0 && i > 0) {
- s += ' ';
- }
-
- s += floatToString(v);
- }
-
- return s;
- }
-
- var d = '';
- for (var i = 0; i < this.commands.length; i += 1) {
- var cmd = this.commands[i];
- if (cmd.type === 'M') {
- d += 'M' + packValues(cmd.x, cmd.y);
- } else if (cmd.type === 'L') {
- d += 'L' + packValues(cmd.x, cmd.y);
- } else if (cmd.type === 'C') {
- d += 'C' + packValues(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
- } else if (cmd.type === 'Q') {
- d += 'Q' + packValues(cmd.x1, cmd.y1, cmd.x, cmd.y);
- } else if (cmd.type === 'Z') {
- d += 'Z';
- }
- }
-
- return d;
- };
-
- // Convert the path to a SVG <path> element, as a string.
- // Parameters:
- // - decimalPlaces: The amount of decimal places for floating-point values (default: 2)
- Path.prototype.toSVG = function(decimalPlaces) {
- var svg = '<path d="';
- svg += this.toPathData(decimalPlaces);
- svg += '"';
- if (this.fill & this.fill !== 'black') {
- if (this.fill === null) {
- svg += ' fill="none"';
- } else {
- svg += ' fill="' + this.fill + '"';
- }
- }
-
- if (this.stroke) {
- svg += ' stroke="' + this.stroke + '" stroke-width="' + this.strokeWidth + '"';
- }
-
- svg += '/>';
- return svg;
- };
-
- exports.Path = Path;
-
- },{}],11:[function(_dereq_,module,exports){
- // Table metadata
-
- 'use strict';
-
- var check = _dereq_('./check');
- var encode = _dereq_('./types').encode;
- var sizeOf = _dereq_('./types').sizeOf;
-
- function Table(tableName, fields, options) {
- var i;
- for (i = 0; i < fields.length; i += 1) {
- var field = fields[i];
- this[field.name] = field.value;
- }
-
- this.tableName = tableName;
- this.fields = fields;
- if (options) {
- var optionKeys = Object.keys(options);
- for (i = 0; i < optionKeys.length; i += 1) {
- var k = optionKeys[i];
- var v = options[k];
- if (this[k] !== undefined) {
- this[k] = v;
- }
- }
- }
- }
-
- Table.prototype.sizeOf = function() {
- var v = 0;
- for (var i = 0; i < this.fields.length; i += 1) {
- var field = this.fields[i];
- var value = this[field.name];
- if (value === undefined) {
- value = field.value;
- }
-
- if (typeof value.sizeOf === 'function') {
- v += value.sizeOf();
- } else {
- var sizeOfFunction = sizeOf[field.type];
- check.assert(typeof sizeOfFunction === 'function', 'Could not find sizeOf function for field' + field.name);
- v += sizeOfFunction(value);
- }
- }
-
- return v;
- };
-
- Table.prototype.encode = function() {
- return encode.TABLE(this);
- };
-
- exports.Table = Table;
-
- },{"./check":2,"./types":26}],12:[function(_dereq_,module,exports){
- // The `CFF` table contains the glyph outlines in PostScript format.
- // https://www.microsoft.com/typography/OTSPEC/cff.htm
- // http://download.microsoft.com/download/8/0/1/801a191c-029d-4af3-9642-555f6fe514ee/cff.pdf
- // http://download.microsoft.com/download/8/0/1/801a191c-029d-4af3-9642-555f6fe514ee/type2.pdf
-
- 'use strict';
-
- var encoding = _dereq_('../encoding');
- var glyphset = _dereq_('../glyphset');
- var parse = _dereq_('../parse');
- var path = _dereq_('../path');
- var table = _dereq_('../table');
-
- // Custom equals function that can also check lists.
- function equals(a, b) {
- if (a === b) {
- return true;
- } else if (Array.isArray(a) && Array.isArray(b)) {
- if (a.length !== b.length) {
- return false;
- }
-
- for (var i = 0; i < a.length; i += 1) {
- if (!equals(a[i], b[i])) {
- return false;
- }
- }
-
- return true;
- } else {
- return false;
- }
- }
-
- // Parse a `CFF` INDEX array.
- // An index array consists of a list of offsets, then a list of objects at those offsets.
- function parseCFFIndex(data, start, conversionFn) {
- //var i, objectOffset, endOffset;
- var offsets = [];
- var objects = [];
- var count = parse.getCard16(data, start);
- var i;
- var objectOffset;
- var endOffset;
- if (count !== 0) {
- var offsetSize = parse.getByte(data, start + 2);
- objectOffset = start + ((count + 1) * offsetSize) + 2;
- var pos = start + 3;
- for (i = 0; i < count + 1; i += 1) {
- offsets.push(parse.getOffset(data, pos, offsetSize));
- pos += offsetSize;
- }
-
- // The total size of the index array is 4 header bytes + the value of the last offset.
- endOffset = objectOffset + offsets[count];
- } else {
- endOffset = start + 2;
- }
-
- for (i = 0; i < offsets.length - 1; i += 1) {
- var value = parse.getBytes(data, objectOffset + offsets[i], objectOffset + offsets[i + 1]);
- if (conversionFn) {
- value = conversionFn(value);
- }
-
- objects.push(value);
- }
-
- return {objects: objects, startOffset: start, endOffset: endOffset};
- }
-
- // Parse a `CFF` DICT real value.
- function parseFloatOperand(parser) {
- var s = '';
- var eof = 15;
- var lookup = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', 'E', 'E-', null, '-'];
- while (true) {
- var b = parser.parseByte();
- var n1 = b >> 4;
- var n2 = b & 15;
-
- if (n1 === eof) {
- break;
- }
-
- s += lookup[n1];
-
- if (n2 === eof) {
- break;
- }
-
- s += lookup[n2];
- }
-
- return parseFloat(s);
- }
-
- // Parse a `CFF` DICT operand.
- function parseOperand(parser, b0) {
- var b1;
- var b2;
- var b3;
- var b4;
- if (b0 === 28) {
- b1 = parser.parseByte();
- b2 = parser.parseByte();
- return b1 << 8 | b2;
- }
-
- if (b0 === 29) {
- b1 = parser.parseByte();
- b2 = parser.parseByte();
- b3 = parser.parseByte();
- b4 = parser.parseByte();
- return b1 << 24 | b2 << 16 | b3 << 8 | b4;
- }
-
- if (b0 === 30) {
- return parseFloatOperand(parser);
- }
-
- if (b0 >= 32 && b0 <= 246) {
- return b0 - 139;
- }
-
- if (b0 >= 247 && b0 <= 250) {
- b1 = parser.parseByte();
- return (b0 - 247) * 256 + b1 + 108;
- }
-
- if (b0 >= 251 && b0 <= 254) {
- b1 = parser.parseByte();
- return -(b0 - 251) * 256 - b1 - 108;
- }
-
- throw new Error('Invalid b0 ' + b0);
- }
-
- // Convert the entries returned by `parseDict` to a proper dictionary.
- // If a value is a list of one, it is unpacked.
- function entriesToObject(entries) {
- var o = {};
- for (var i = 0; i < entries.length; i += 1) {
- var key = entries[i][0];
- var values = entries[i][1];
- var value;
- if (values.length === 1) {
- value = values[0];
- } else {
- value = values;
- }
-
- if (o.hasOwnProperty(key)) {
- throw new Error('Object ' + o + ' already has key ' + key);
- }
-
- o[key] = value;
- }
-
- return o;
- }
-
- // Parse a `CFF` DICT object.
- // A dictionary contains key-value pairs in a compact tokenized format.
- function parseCFFDict(data, start, size) {
- start = start !== undefined ? start : 0;
- var parser = new parse.Parser(data, start);
- var entries = [];
- var operands = [];
- size = size !== undefined ? size : data.length;
-
- while (parser.relativeOffset < size) {
- var op = parser.parseByte();
-
- // The first byte for each dict item distinguishes between operator (key) and operand (value).
- // Values <= 21 are operators.
- if (op <= 21) {
- // Two-byte operators have an initial escape byte of 12.
- if (op === 12) {
- op = 1200 + parser.parseByte();
- }
-
- entries.push([op, operands]);
- operands = [];
- } else {
- // Since the operands (values) come before the operators (keys), we store all operands in a list
- // until we encounter an operator.
- operands.push(parseOperand(parser, op));
- }
- }
-
- return entriesToObject(entries);
- }
-
- // Given a String Index (SID), return the value of the string.
- // Strings below index 392 are standard CFF strings and are not encoded in the font.
- function getCFFString(strings, index) {
- if (index <= 390) {
- index = encoding.cffStandardStrings[index];
- } else {
- index = strings[index - 391];
- }
-
- return index;
- }
-
- // Interpret a dictionary and return a new dictionary with readable keys and values for missing entries.
- // This function takes `meta` which is a list of objects containing `operand`, `name` and `default`.
- function interpretDict(dict, meta, strings) {
- var newDict = {};
-
- // Because we also want to include missing values, we start out from the meta list
- // and lookup values in the dict.
- for (var i = 0; i < meta.length; i += 1) {
- var m = meta[i];
- var value = dict[m.op];
- if (value === undefined) {
- value = m.value !== undefined ? m.value : null;
- }
-
- if (m.type === 'SID') {
- value = getCFFString(strings, value);
- }
-
- newDict[m.name] = value;
- }
-
- return newDict;
- }
-
- // Parse the CFF header.
- function parseCFFHeader(data, start) {
- var header = {};
- header.formatMajor = parse.getCard8(data, start);
- header.formatMinor = parse.getCard8(data, start + 1);
- header.size = parse.getCard8(data, start + 2);
- header.offsetSize = parse.getCard8(data, start + 3);
- header.startOffset = start;
- header.endOffset = start + 4;
- return header;
- }
-
- var TOP_DICT_META = [
- {name: 'version', op: 0, type: 'SID'},
- {name: 'notice', op: 1, type: 'SID'},
- {name: 'copyright', op: 1200, type: 'SID'},
- {name: 'fullName', op: 2, type: 'SID'},
- {name: 'familyName', op: 3, type: 'SID'},
- {name: 'weight', op: 4, type: 'SID'},
- {name: 'isFixedPitch', op: 1201, type: 'number', value: 0},
- {name: 'italicAngle', op: 1202, type: 'number', value: 0},
- {name: 'underlinePosition', op: 1203, type: 'number', value: -100},
- {name: 'underlineThickness', op: 1204, type: 'number', value: 50},
- {name: 'paintType', op: 1205, type: 'number', value: 0},
- {name: 'charstringType', op: 1206, type: 'number', value: 2},
- {name: 'fontMatrix', op: 1207, type: ['real', 'real', 'real', 'real', 'real', 'real'], value: [0.001, 0, 0, 0.001, 0, 0]},
- {name: 'uniqueId', op: 13, type: 'number'},
- {name: 'fontBBox', op: 5, type: ['number', 'number', 'number', 'number'], value: [0, 0, 0, 0]},
- {name: 'strokeWidth', op: 1208, type: 'number', value: 0},
- {name: 'xuid', op: 14, type: [], value: null},
- {name: 'charset', op: 15, type: 'offset', value: 0},
- {name: 'encoding', op: 16, type: 'offset', value: 0},
- {name: 'charStrings', op: 17, type: 'offset', value: 0},
- {name: 'private', op: 18, type: ['number', 'offset'], value: [0, 0]}
- ];
-
- var PRIVATE_DICT_META = [
- {name: 'subrs', op: 19, type: 'offset', value: 0},
- {name: 'defaultWidthX', op: 20, type: 'number', value: 0},
- {name: 'nominalWidthX', op: 21, type: 'number', value: 0}
- ];
-
- // Parse the CFF top dictionary. A CFF table can contain multiple fonts, each with their own top dictionary.
- // The top dictionary contains the essential metadata for the font, together with the private dictionary.
- function parseCFFTopDict(data, strings) {
- var dict = parseCFFDict(data, 0, data.byteLength);
- return interpretDict(dict, TOP_DICT_META, strings);
- }
-
- // Parse the CFF private dictionary. We don't fully parse out all the values, only the ones we need.
- function parseCFFPrivateDict(data, start, size, strings) {
- var dict = parseCFFDict(data, start, size);
- return interpretDict(dict, PRIVATE_DICT_META, strings);
- }
-
- // Parse the CFF charset table, which contains internal names for all the glyphs.
- // This function will return a list of glyph names.
- // See Adobe TN #5176 chapter 13, "Charsets".
- function parseCFFCharset(data, start, nGlyphs, strings) {
- var i;
- var sid;
- var count;
- var parser = new parse.Parser(data, start);
-
- // The .notdef glyph is not included, so subtract 1.
- nGlyphs -= 1;
- var charset = ['.notdef'];
-
- var format = parser.parseCard8();
- if (format === 0) {
- for (i = 0; i < nGlyphs; i += 1) {
- sid = parser.parseSID();
- charset.push(getCFFString(strings, sid));
- }
- } else if (format === 1) {
- while (charset.length <= nGlyphs) {
- sid = parser.parseSID();
- count = parser.parseCard8();
- for (i = 0; i <= count; i += 1) {
- charset.push(getCFFString(strings, sid));
- sid += 1;
- }
- }
- } else if (format === 2) {
- while (charset.length <= nGlyphs) {
- sid = parser.parseSID();
- count = parser.parseCard16();
- for (i = 0; i <= count; i += 1) {
- charset.push(getCFFString(strings, sid));
- sid += 1;
- }
- }
- } else {
- throw new Error('Unknown charset format ' + format);
- }
-
- return charset;
- }
-
- // Parse the CFF encoding data. Only one encoding can be specified per font.
- // See Adobe TN #5176 chapter 12, "Encodings".
- function parseCFFEncoding(data, start, charset) {
- var i;
- var code;
- var enc = {};
- var parser = new parse.Parser(data, start);
- var format = parser.parseCard8();
- if (format === 0) {
- var nCodes = parser.parseCard8();
- for (i = 0; i < nCodes; i += 1) {
- code = parser.parseCard8();
- enc[code] = i;
- }
- } else if (format === 1) {
- var nRanges = parser.parseCard8();
- code = 1;
- for (i = 0; i < nRanges; i += 1) {
- var first = parser.parseCard8();
- var nLeft = parser.parseCard8();
- for (var j = first; j <= first + nLeft; j += 1) {
- enc[j] = code;
- code += 1;
- }
- }
- } else {
- throw new Error('Unknown encoding format ' + format);
- }
-
- return new encoding.CffEncoding(enc, charset);
- }
-
- // Take in charstring code and return a Glyph object.
- // The encoding is described in the Type 2 Charstring Format
- // https://www.microsoft.com/typography/OTSPEC/charstr2.htm
- function parseCFFCharstring(font, glyph, code) {
- var c1x;
- var c1y;
- var c2x;
- var c2y;
- var p = new path.Path();
- var stack = [];
- var nStems = 0;
- var haveWidth = false;
- var width = font.defaultWidthX;
- var open = false;
- var x = 0;
- var y = 0;
-
- function newContour(x, y) {
- if (open) {
- p.closePath();
- }
-
- p.moveTo(x, y);
- open = true;
- }
-
- function parseStems() {
- var hasWidthArg;
-
- // The number of stem operators on the stack is always even.
- // If the value is uneven, that means a width is specified.
- hasWidthArg = stack.length % 2 !== 0;
- if (hasWidthArg && !haveWidth) {
- width = stack.shift() + font.nominalWidthX;
- }
-
- nStems += stack.length >> 1;
- stack.length = 0;
- haveWidth = true;
- }
-
- function parse(code) {
- var b1;
- var b2;
- var b3;
- var b4;
- var codeIndex;
- var subrCode;
- var jpx;
- var jpy;
- var c3x;
- var c3y;
- var c4x;
- var c4y;
-
- var i = 0;
- while (i < code.length) {
- var v = code[i];
- i += 1;
- switch (v) {
- case 1: // hstem
- parseStems();
- break;
- case 3: // vstem
- parseStems();
- break;
- case 4: // vmoveto
- if (stack.length > 1 && !haveWidth) {
- width = stack.shift() + font.nominalWidthX;
- haveWidth = true;
- }
-
- y += stack.pop();
- newContour(x, y);
- break;
- case 5: // rlineto
- while (stack.length > 0) {
- x += stack.shift();
- y += stack.shift();
- p.lineTo(x, y);
- }
-
- break;
- case 6: // hlineto
- while (stack.length > 0) {
- x += stack.shift();
- p.lineTo(x, y);
- if (stack.length === 0) {
- break;
- }
-
- y += stack.shift();
- p.lineTo(x, y);
- }
-
- break;
- case 7: // vlineto
- while (stack.length > 0) {
- y += stack.shift();
- p.lineTo(x, y);
- if (stack.length === 0) {
- break;
- }
-
- x += stack.shift();
- p.lineTo(x, y);
- }
-
- break;
- case 8: // rrcurveto
- while (stack.length > 0) {
- c1x = x + stack.shift();
- c1y = y + stack.shift();
- c2x = c1x + stack.shift();
- c2y = c1y + stack.shift();
- x = c2x + stack.shift();
- y = c2y + stack.shift();
- p.curveTo(c1x, c1y, c2x, c2y, x, y);
- }
-
- break;
- case 10: // callsubr
- codeIndex = stack.pop() + font.subrsBias;
- subrCode = font.subrs[codeIndex];
- if (subrCode) {
- parse(subrCode);
- }
-
- break;
- case 11: // return
- return;
- case 12: // flex operators
- v = code[i];
- i += 1;
- switch (v) {
- case 35: // flex
- // |- dx1 dy1 dx2 dy2 dx3 dy3 dx4 dy4 dx5 dy5 dx6 dy6 fd flex (12 35) |-
- c1x = x + stack.shift(); // dx1
- c1y = y + stack.shift(); // dy1
- c2x = c1x + stack.shift(); // dx2
- c2y = c1y + stack.shift(); // dy2
- jpx = c2x + stack.shift(); // dx3
- jpy = c2y + stack.shift(); // dy3
- c3x = jpx + stack.shift(); // dx4
- c3y = jpy + stack.shift(); // dy4
- c4x = c3x + stack.shift(); // dx5
- c4y = c3y + stack.shift(); // dy5
- x = c4x + stack.shift(); // dx6
- y = c4y + stack.shift(); // dy6
- stack.shift(); // flex depth
- p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
- p.curveTo(c3x, c3y, c4x, c4y, x, y);
- break;
- case 34: // hflex
- // |- dx1 dx2 dy2 dx3 dx4 dx5 dx6 hflex (12 34) |-
- c1x = x + stack.shift(); // dx1
- c1y = y; // dy1
- c2x = c1x + stack.shift(); // dx2
- c2y = c1y + stack.shift(); // dy2
- jpx = c2x + stack.shift(); // dx3
- jpy = c2y; // dy3
- c3x = jpx + stack.shift(); // dx4
- c3y = c2y; // dy4
- c4x = c3x + stack.shift(); // dx5
- c4y = y; // dy5
- x = c4x + stack.shift(); // dx6
- p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
- p.curveTo(c3x, c3y, c4x, c4y, x, y);
- break;
- case 36: // hflex1
- // |- dx1 dy1 dx2 dy2 dx3 dx4 dx5 dy5 dx6 hflex1 (12 36) |-
- c1x = x + stack.shift(); // dx1
- c1y = y + stack.shift(); // dy1
- c2x = c1x + stack.shift(); // dx2
- c2y = c1y + stack.shift(); // dy2
- jpx = c2x + stack.shift(); // dx3
- jpy = c2y; // dy3
- c3x = jpx + stack.shift(); // dx4
- c3y = c2y; // dy4
- c4x = c3x + stack.shift(); // dx5
- c4y = c3y + stack.shift(); // dy5
- x = c4x + stack.shift(); // dx6
- p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
- p.curveTo(c3x, c3y, c4x, c4y, x, y);
- break;
- case 37: // flex1
- // |- dx1 dy1 dx2 dy2 dx3 dy3 dx4 dy4 dx5 dy5 d6 flex1 (12 37) |-
- c1x = x + stack.shift(); // dx1
- c1y = y + stack.shift(); // dy1
- c2x = c1x + stack.shift(); // dx2
- c2y = c1y + stack.shift(); // dy2
- jpx = c2x + stack.shift(); // dx3
- jpy = c2y + stack.shift(); // dy3
- c3x = jpx + stack.shift(); // dx4
- c3y = jpy + stack.shift(); // dy4
- c4x = c3x + stack.shift(); // dx5
- c4y = c3y + stack.shift(); // dy5
- if (Math.abs(c4x - x) > Math.abs(c4y - y)) {
- x = c4x + stack.shift();
- } else {
- y = c4y + stack.shift();
- }
-
- p.curveTo(c1x, c1y, c2x, c2y, jpx, jpy);
- p.curveTo(c3x, c3y, c4x, c4y, x, y);
- break;
- default:
- console.log('Glyph ' + glyph.index + ': unknown operator ' + 1200 + v);
- stack.length = 0;
- }
- break;
- case 14: // endchar
- if (stack.length > 0 && !haveWidth) {
- width = stack.shift() + font.nominalWidthX;
- haveWidth = true;
- }
-
- if (open) {
- p.closePath();
- open = false;
- }
-
- break;
- case 18: // hstemhm
- parseStems();
- break;
- case 19: // hintmask
- case 20: // cntrmask
- parseStems();
- i += (nStems + 7) >> 3;
- break;
- case 21: // rmoveto
- if (stack.length > 2 && !haveWidth) {
- width = stack.shift() + font.nominalWidthX;
- haveWidth = true;
- }
-
- y += stack.pop();
- x += stack.pop();
- newContour(x, y);
- break;
- case 22: // hmoveto
- if (stack.length > 1 && !haveWidth) {
- width = stack.shift() + font.nominalWidthX;
- haveWidth = true;
- }
-
- x += stack.pop();
- newContour(x, y);
- break;
- case 23: // vstemhm
- parseStems();
- break;
- case 24: // rcurveline
- while (stack.length > 2) {
- c1x = x + stack.shift();
- c1y = y + stack.shift();
- c2x = c1x + stack.shift();
- c2y = c1y + stack.shift();
- x = c2x + stack.shift();
- y = c2y + stack.shift();
- p.curveTo(c1x, c1y, c2x, c2y, x, y);
- }
-
- x += stack.shift();
- y += stack.shift();
- p.lineTo(x, y);
- break;
- case 25: // rlinecurve
- while (stack.length > 6) {
- x += stack.shift();
- y += stack.shift();
- p.lineTo(x, y);
- }
-
- c1x = x + stack.shift();
- c1y = y + stack.shift();
- c2x = c1x + stack.shift();
- c2y = c1y + stack.shift();
- x = c2x + stack.shift();
- y = c2y + stack.shift();
- p.curveTo(c1x, c1y, c2x, c2y, x, y);
- break;
- case 26: // vvcurveto
- if (stack.length % 2) {
- x += stack.shift();
- }
-
- while (stack.length > 0) {
- c1x = x;
- c1y = y + stack.shift();
- c2x = c1x + stack.shift();
- c2y = c1y + stack.shift();
- x = c2x;
- y = c2y + stack.shift();
- p.curveTo(c1x, c1y, c2x, c2y, x, y);
- }
-
- break;
- case 27: // hhcurveto
- if (stack.length % 2) {
- y += stack.shift();
- }
-
- while (stack.length > 0) {
- c1x = x + stack.shift();
- c1y = y;
- c2x = c1x + stack.shift();
- c2y = c1y + stack.shift();
- x = c2x + stack.shift();
- y = c2y;
- p.curveTo(c1x, c1y, c2x, c2y, x, y);
- }
-
- break;
- case 28: // shortint
- b1 = code[i];
- b2 = code[i + 1];
- stack.push(((b1 << 24) | (b2 << 16)) >> 16);
- i += 2;
- break;
- case 29: // callgsubr
- codeIndex = stack.pop() + font.gsubrsBias;
- subrCode = font.gsubrs[codeIndex];
- if (subrCode) {
- parse(subrCode);
- }
-
- break;
- case 30: // vhcurveto
- while (stack.length > 0) {
- c1x = x;
- c1y = y + stack.shift();
- c2x = c1x + stack.shift();
- c2y = c1y + stack.shift();
- x = c2x + stack.shift();
- y = c2y + (stack.length === 1 ? stack.shift() : 0);
- p.curveTo(c1x, c1y, c2x, c2y, x, y);
- if (stack.length === 0) {
- break;
- }
-
- c1x = x + stack.shift();
- c1y = y;
- c2x = c1x + stack.shift();
- c2y = c1y + stack.shift();
- y = c2y + stack.shift();
- x = c2x + (stack.length === 1 ? stack.shift() : 0);
- p.curveTo(c1x, c1y, c2x, c2y, x, y);
- }
-
- break;
- case 31: // hvcurveto
- while (stack.length > 0) {
- c1x = x + stack.shift();
- c1y = y;
- c2x = c1x + stack.shift();
- c2y = c1y + stack.shift();
- y = c2y + stack.shift();
- x = c2x + (stack.length === 1 ? stack.shift() : 0);
- p.curveTo(c1x, c1y, c2x, c2y, x, y);
- if (stack.length === 0) {
- break;
- }
-
- c1x = x;
- c1y = y + stack.shift();
- c2x = c1x + stack.shift();
- c2y = c1y + stack.shift();
- x = c2x + stack.shift();
- y = c2y + (stack.length === 1 ? stack.shift() : 0);
- p.curveTo(c1x, c1y, c2x, c2y, x, y);
- }
-
- break;
- default:
- if (v < 32) {
- console.log('Glyph ' + glyph.index + ': unknown operator ' + v);
- } else if (v < 247) {
- stack.push(v - 139);
- } else if (v < 251) {
- b1 = code[i];
- i += 1;
- stack.push((v - 247) * 256 + b1 + 108);
- } else if (v < 255) {
- b1 = code[i];
- i += 1;
- stack.push(-(v - 251) * 256 - b1 - 108);
- } else {
- b1 = code[i];
- b2 = code[i + 1];
- b3 = code[i + 2];
- b4 = code[i + 3];
- i += 4;
- stack.push(((b1 << 24) | (b2 << 16) | (b3 << 8) | b4) / 65536);
- }
- }
- }
- }
-
- parse(code);
-
- glyph.advanceWidth = width;
- return p;
- }
-
- // Subroutines are encoded using the negative half of the number space.
- // See type 2 chapter 4.7 "Subroutine operators".
- function calcCFFSubroutineBias(subrs) {
- var bias;
- if (subrs.length < 1240) {
- bias = 107;
- } else if (subrs.length < 33900) {
- bias = 1131;
- } else {
- bias = 32768;
- }
-
- return bias;
- }
-
- // Parse the `CFF` table, which contains the glyph outlines in PostScript format.
- function parseCFFTable(data, start, font) {
- font.tables.cff = {};
- var header = parseCFFHeader(data, start);
- var nameIndex = parseCFFIndex(data, header.endOffset, parse.bytesToString);
- var topDictIndex = parseCFFIndex(data, nameIndex.endOffset);
- var stringIndex = parseCFFIndex(data, topDictIndex.endOffset, parse.bytesToString);
- var globalSubrIndex = parseCFFIndex(data, stringIndex.endOffset);
- font.gsubrs = globalSubrIndex.objects;
- font.gsubrsBias = calcCFFSubroutineBias(font.gsubrs);
-
- var topDictData = new DataView(new Uint8Array(topDictIndex.objects[0]).buffer);
- var topDict = parseCFFTopDict(topDictData, stringIndex.objects);
- font.tables.cff.topDict = topDict;
-
- var privateDictOffset = start + topDict['private'][1];
- var privateDict = parseCFFPrivateDict(data, privateDictOffset, topDict['private'][0], stringIndex.objects);
- font.defaultWidthX = privateDict.defaultWidthX;
- font.nominalWidthX = privateDict.nominalWidthX;
-
- if (privateDict.subrs !== 0) {
- var subrOffset = privateDictOffset + privateDict.subrs;
- var subrIndex = parseCFFIndex(data, subrOffset);
- font.subrs = subrIndex.objects;
- font.subrsBias = calcCFFSubroutineBias(font.subrs);
- } else {
- font.subrs = [];
- font.subrsBias = 0;
- }
-
- // Offsets in the top dict are relative to the beginning of the CFF data, so add the CFF start offset.
- var charStringsIndex = parseCFFIndex(data, start + topDict.charStrings);
- font.nGlyphs = charStringsIndex.objects.length;
-
- var charset = parseCFFCharset(data, start + topDict.charset, font.nGlyphs, stringIndex.objects);
- if (topDict.encoding === 0) { // Standard encoding
- font.cffEncoding = new encoding.CffEncoding(encoding.cffStandardEncoding, charset);
- } else if (topDict.encoding === 1) { // Expert encoding
- font.cffEncoding = new encoding.CffEncoding(encoding.cffExpertEncoding, charset);
- } else {
- font.cffEncoding = parseCFFEncoding(data, start + topDict.encoding, charset);
- }
-
- // Prefer the CMAP encoding to the CFF encoding.
- font.encoding = font.encoding || font.cffEncoding;
-
- font.glyphs = new glyphset.GlyphSet(font);
- for (var i = 0; i < font.nGlyphs; i += 1) {
- var charString = charStringsIndex.objects[i];
- font.glyphs.push(i, glyphset.cffGlyphLoader(font, i, parseCFFCharstring, charString));
- }
- }
-
- // Convert a string to a String ID (SID).
- // The list of strings is modified in place.
- function encodeString(s, strings) {
- var sid;
-
- // Is the string in the CFF standard strings?
- var i = encoding.cffStandardStrings.indexOf(s);
- if (i >= 0) {
- sid = i;
- }
-
- // Is the string already in the string index?
- i = strings.indexOf(s);
- if (i >= 0) {
- sid = i + encoding.cffStandardStrings.length;
- } else {
- sid = encoding.cffStandardStrings.length + strings.length;
- strings.push(s);
- }
-
- return sid;
- }
-
- function makeHeader() {
- return new table.Table('Header', [
- {name: 'major', type: 'Card8', value: 1},
- {name: 'minor', type: 'Card8', value: 0},
- {name: 'hdrSize', type: 'Card8', value: 4},
- {name: 'major', type: 'Card8', value: 1}
- ]);
- }
-
- function makeNameIndex(fontNames) {
- var t = new table.Table('Name INDEX', [
- {name: 'names', type: 'INDEX', value: []}
- ]);
- t.names = [];
- for (var i = 0; i < fontNames.length; i += 1) {
- t.names.push({name: 'name_' + i, type: 'NAME', value: fontNames[i]});
- }
-
- return t;
- }
-
- // Given a dictionary's metadata, create a DICT structure.
- function makeDict(meta, attrs, strings) {
- var m = {};
- for (var i = 0; i < meta.length; i += 1) {
- var entry = meta[i];
- var value = attrs[entry.name];
- if (value !== undefined && !equals(value, entry.value)) {
- if (entry.type === 'SID') {
- value = encodeString(value, strings);
- }
-
- m[entry.op] = {name: entry.name, type: entry.type, value: value};
- }
- }
-
- return m;
- }
-
- // The Top DICT houses the global font attributes.
- function makeTopDict(attrs, strings) {
- var t = new table.Table('Top DICT', [
- {name: 'dict', type: 'DICT', value: {}}
- ]);
- t.dict = makeDict(TOP_DICT_META, attrs, strings);
- return t;
- }
-
- function makeTopDictIndex(topDict) {
- var t = new table.Table('Top DICT INDEX', [
- {name: 'topDicts', type: 'INDEX', value: []}
- ]);
- t.topDicts = [{name: 'topDict_0', type: 'TABLE', value: topDict}];
- return t;
- }
-
- function makeStringIndex(strings) {
- var t = new table.Table('String INDEX', [
- {name: 'strings', type: 'INDEX', value: []}
- ]);
- t.strings = [];
- for (var i = 0; i < strings.length; i += 1) {
- t.strings.push({name: 'string_' + i, type: 'STRING', value: strings[i]});
- }
-
- return t;
- }
-
- function makeGlobalSubrIndex() {
- // Currently we don't use subroutines.
- return new table.Table('Global Subr INDEX', [
- {name: 'subrs', type: 'INDEX', value: []}
- ]);
- }
-
- function makeCharsets(glyphNames, strings) {
- var t = new table.Table('Charsets', [
- {name: 'format', type: 'Card8', value: 0}
- ]);
- for (var i = 0; i < glyphNames.length; i += 1) {
- var glyphName = glyphNames[i];
- var glyphSID = encodeString(glyphName, strings);
- t.fields.push({name: 'glyph_' + i, type: 'SID', value: glyphSID});
- }
-
- return t;
- }
-
- function glyphToOps(glyph) {
- var ops = [];
- var path = glyph.path;
- ops.push({name: 'width', type: 'NUMBER', value: glyph.advanceWidth});
- var x = 0;
- var y = 0;
- for (var i = 0; i < path.commands.length; i += 1) {
- var dx;
- var dy;
- var cmd = path.commands[i];
- if (cmd.type === 'Q') {
- // CFF only supports bézier curves, so convert the quad to a bézier.
- var _13 = 1 / 3;
- var _23 = 2 / 3;
-
- // We're going to create a new command so we don't change the original path.
- cmd = {
- type: 'C',
- x: cmd.x,
- y: cmd.y,
- x1: _13 * x + _23 * cmd.x1,
- y1: _13 * y + _23 * cmd.y1,
- x2: _13 * cmd.x + _23 * cmd.x1,
- y2: _13 * cmd.y + _23 * cmd.y1
- };
- }
-
- if (cmd.type === 'M') {
- dx = Math.round(cmd.x - x);
- dy = Math.round(cmd.y - y);
- ops.push({name: 'dx', type: 'NUMBER', value: dx});
- ops.push({name: 'dy', type: 'NUMBER', value: dy});
- ops.push({name: 'rmoveto', type: 'OP', value: 21});
- x = Math.round(cmd.x);
- y = Math.round(cmd.y);
- } else if (cmd.type === 'L') {
- dx = Math.round(cmd.x - x);
- dy = Math.round(cmd.y - y);
- ops.push({name: 'dx', type: 'NUMBER', value: dx});
- ops.push({name: 'dy', type: 'NUMBER', value: dy});
- ops.push({name: 'rlineto', type: 'OP', value: 5});
- x = Math.round(cmd.x);
- y = Math.round(cmd.y);
- } else if (cmd.type === 'C') {
- var dx1 = Math.round(cmd.x1 - x);
- var dy1 = Math.round(cmd.y1 - y);
- var dx2 = Math.round(cmd.x2 - cmd.x1);
- var dy2 = Math.round(cmd.y2 - cmd.y1);
- dx = Math.round(cmd.x - cmd.x2);
- dy = Math.round(cmd.y - cmd.y2);
- ops.push({name: 'dx1', type: 'NUMBER', value: dx1});
- ops.push({name: 'dy1', type: 'NUMBER', value: dy1});
- ops.push({name: 'dx2', type: 'NUMBER', value: dx2});
- ops.push({name: 'dy2', type: 'NUMBER', value: dy2});
- ops.push({name: 'dx', type: 'NUMBER', value: dx});
- ops.push({name: 'dy', type: 'NUMBER', value: dy});
- ops.push({name: 'rrcurveto', type: 'OP', value: 8});
- x = Math.round(cmd.x);
- y = Math.round(cmd.y);
- }
-
- // Contours are closed automatically.
-
- }
-
- ops.push({name: 'endchar', type: 'OP', value: 14});
- return ops;
- }
-
- function makeCharStringsIndex(glyphs) {
- var t = new table.Table('CharStrings INDEX', [
- {name: 'charStrings', type: 'INDEX', value: []}
- ]);
-
- for (var i = 0; i < glyphs.length; i += 1) {
- var glyph = glyphs.get(i);
- var ops = glyphToOps(glyph);
- t.charStrings.push({name: glyph.name, type: 'CHARSTRING', value: ops});
- }
-
- return t;
- }
-
- function makePrivateDict(attrs, strings) {
- var t = new table.Table('Private DICT', [
- {name: 'dict', type: 'DICT', value: {}}
- ]);
- t.dict = makeDict(PRIVATE_DICT_META, attrs, strings);
- return t;
- }
-
- function makePrivateDictIndex(privateDict) {
- var t = new table.Table('Private DICT INDEX', [
- {name: 'privateDicts', type: 'INDEX', value: []}
- ]);
- t.privateDicts = [{name: 'privateDict_0', type: 'TABLE', value: privateDict}];
- return t;
- }
-
- function makeCFFTable(glyphs, options) {
- var t = new table.Table('CFF ', [
- {name: 'header', type: 'TABLE'},
- {name: 'nameIndex', type: 'TABLE'},
- {name: 'topDictIndex', type: 'TABLE'},
- {name: 'stringIndex', type: 'TABLE'},
- {name: 'globalSubrIndex', type: 'TABLE'},
- {name: 'charsets', type: 'TABLE'},
- {name: 'charStringsIndex', type: 'TABLE'},
- {name: 'privateDictIndex', type: 'TABLE'}
- ]);
-
- var fontScale = 1 / options.unitsPerEm;
- // We use non-zero values for the offsets so that the DICT encodes them.
- // This is important because the size of the Top DICT plays a role in offset calculation,
- // and the size shouldn't change after we've written correct offsets.
- var attrs = {
- version: options.version,
- fullName: options.fullName,
- familyName: options.familyName,
- weight: options.weightName,
- fontMatrix: [fontScale, 0, 0, fontScale, 0, 0],
- charset: 999,
- encoding: 0,
- charStrings: 999,
- private: [0, 999]
- };
-
- var privateAttrs = {};
-
- var glyphNames = [];
- var glyph;
-
- // Skip first glyph (.notdef)
- for (var i = 1; i < glyphs.length; i += 1) {
- glyph = glyphs.get(i);
- glyphNames.push(glyph.name);
- }
-
- var strings = [];
-
- t.header = makeHeader();
- t.nameIndex = makeNameIndex([options.postScriptName]);
- var topDict = makeTopDict(attrs, strings);
- t.topDictIndex = makeTopDictIndex(topDict);
- t.globalSubrIndex = makeGlobalSubrIndex();
- t.charsets = makeCharsets(glyphNames, strings);
- t.charStringsIndex = makeCharStringsIndex(glyphs);
- var privateDict = makePrivateDict(privateAttrs, strings);
- t.privateDictIndex = makePrivateDictIndex(privateDict);
-
- // Needs to come at the end, to encode all custom strings used in the font.
- t.stringIndex = makeStringIndex(strings);
-
- var startOffset = t.header.sizeOf() +
- t.nameIndex.sizeOf() +
- t.topDictIndex.sizeOf() +
- t.stringIndex.sizeOf() +
- t.globalSubrIndex.sizeOf();
- attrs.charset = startOffset;
-
- // We use the CFF standard encoding; proper encoding will be handled in cmap.
- attrs.encoding = 0;
- attrs.charStrings = attrs.charset + t.charsets.sizeOf();
- attrs.private[1] = attrs.charStrings + t.charStringsIndex.sizeOf();
-
- // Recreate the Top DICT INDEX with the correct offsets.
- topDict = makeTopDict(attrs, strings);
- t.topDictIndex = makeTopDictIndex(topDict);
-
- return t;
- }
-
- exports.parse = parseCFFTable;
- exports.make = makeCFFTable;
-
- },{"../encoding":4,"../glyphset":7,"../parse":9,"../path":10,"../table":11}],13:[function(_dereq_,module,exports){
- // The `cmap` table stores the mappings from characters to glyphs.
- // https://www.microsoft.com/typography/OTSPEC/cmap.htm
-
- 'use strict';
-
- var check = _dereq_('../check');
- var parse = _dereq_('../parse');
- var table = _dereq_('../table');
-
- // Parse the `cmap` table. This table stores the mappings from characters to glyphs.
- // There are many available formats, but we only support the Windows format 4.
- // This function returns a `CmapEncoding` object or null if no supported format could be found.
- function parseCmapTable(data, start) {
- var i;
- var cmap = {};
- cmap.version = parse.getUShort(data, start);
- check.argument(cmap.version === 0, 'cmap table version should be 0.');
-
- // The cmap table can contain many sub-tables, each with their own format.
- // We're only interested in a "platform 3" table. This is a Windows format.
- cmap.numTables = parse.getUShort(data, start + 2);
- var offset = -1;
- for (i = 0; i < cmap.numTables; i += 1) {
- var platformId = parse.getUShort(data, start + 4 + (i * 8));
- var encodingId = parse.getUShort(data, start + 4 + (i * 8) + 2);
- if (platformId === 3 && (encodingId === 1 || encodingId === 0)) {
- offset = parse.getULong(data, start + 4 + (i * 8) + 4);
- break;
- }
- }
-
- if (offset === -1) {
- // There is no cmap table in the font that we support, so return null.
- // This font will be marked as unsupported.
- return null;
- }
-
- var p = new parse.Parser(data, start + offset);
- cmap.format = p.parseUShort();
- check.argument(cmap.format === 4, 'Only format 4 cmap tables are supported.');
-
- // Length in bytes of the sub-tables.
- cmap.length = p.parseUShort();
- cmap.language = p.parseUShort();
-
- // segCount is stored x 2.
- var segCount;
- cmap.segCount = segCount = p.parseUShort() >> 1;
-
- // Skip searchRange, entrySelector, rangeShift.
- p.skip('uShort', 3);
-
- // The "unrolled" mapping from character codes to glyph indices.
- cmap.glyphIndexMap = {};
-
- var endCountParser = new parse.Parser(data, start + offset + 14);
- var startCountParser = new parse.Parser(data, start + offset + 16 + segCount * 2);
- var idDeltaParser = new parse.Parser(data, start + offset + 16 + segCount * 4);
- var idRangeOffsetParser = new parse.Parser(data, start + offset + 16 + segCount * 6);
- var glyphIndexOffset = start + offset + 16 + segCount * 8;
- for (i = 0; i < segCount - 1; i += 1) {
- var glyphIndex;
- var endCount = endCountParser.parseUShort();
- var startCount = startCountParser.parseUShort();
- var idDelta = idDeltaParser.parseShort();
- var idRangeOffset = idRangeOffsetParser.parseUShort();
- for (var c = startCount; c <= endCount; c += 1) {
- if (idRangeOffset !== 0) {
- // The idRangeOffset is relative to the current position in the idRangeOffset array.
- // Take the current offset in the idRangeOffset array.
- glyphIndexOffset = (idRangeOffsetParser.offset + idRangeOffsetParser.relativeOffset - 2);
-
- // Add the value of the idRangeOffset, which will move us into the glyphIndex array.
- glyphIndexOffset += idRangeOffset;
-
- // Then add the character index of the current segment, multiplied by 2 for USHORTs.
- glyphIndexOffset += (c - startCount) * 2;
- glyphIndex = parse.getUShort(data, glyphIndexOffset);
- if (glyphIndex !== 0) {
- glyphIndex = (glyphIndex + idDelta) & 0xFFFF;
- }
- } else {
- glyphIndex = (c + idDelta) & 0xFFFF;
- }
-
- cmap.glyphIndexMap[c] = glyphIndex;
- }
- }
-
- return cmap;
- }
-
- function addSegment(t, code, glyphIndex) {
- t.segments.push({
- end: code,
- start: code,
- delta: -(code - glyphIndex),
- offset: 0
- });
- }
-
- function addTerminatorSegment(t) {
- t.segments.push({
- end: 0xFFFF,
- start: 0xFFFF,
- delta: 1,
- offset: 0
- });
- }
-
- function makeCmapTable(glyphs) {
- var i;
- var t = new table.Table('cmap', [
- {name: 'version', type: 'USHORT', value: 0},
- {name: 'numTables', type: 'USHORT', value: 1},
- {name: 'platformID', type: 'USHORT', value: 3},
- {name: 'encodingID', type: 'USHORT', value: 1},
- {name: 'offset', type: 'ULONG', value: 12},
- {name: 'format', type: 'USHORT', value: 4},
- {name: 'length', type: 'USHORT', value: 0},
- {name: 'language', type: 'USHORT', value: 0},
- {name: 'segCountX2', type: 'USHORT', value: 0},
- {name: 'searchRange', type: 'USHORT', value: 0},
- {name: 'entrySelector', type: 'USHORT', value: 0},
- {name: 'rangeShift', type: 'USHORT', value: 0}
- ]);
-
- t.segments = [];
- for (i = 0; i < glyphs.length; i += 1) {
- var glyph = glyphs.get(i);
- for (var j = 0; j < glyph.unicodes.length; j += 1) {
- addSegment(t, glyph.unicodes[j], i);
- }
-
- t.segments = t.segments.sort(function(a, b) {
- return a.start - b.start;
- });
- }
-
- addTerminatorSegment(t);
-
- var segCount;
- segCount = t.segments.length;
- t.segCountX2 = segCount * 2;
- t.searchRange = Math.pow(2, Math.floor(Math.log(segCount) / Math.log(2))) * 2;
- t.entrySelector = Math.log(t.searchRange / 2) / Math.log(2);
- t.rangeShift = t.segCountX2 - t.searchRange;
-
- // Set up parallel segment arrays.
- var endCounts = [];
- var startCounts = [];
- var idDeltas = [];
- var idRangeOffsets = [];
- var glyphIds = [];
-
- for (i = 0; i < segCount; i += 1) {
- var segment = t.segments[i];
- endCounts = endCounts.concat({name: 'end_' + i, type: 'USHORT', value: segment.end});
- startCounts = startCounts.concat({name: 'start_' + i, type: 'USHORT', value: segment.start});
- idDeltas = idDeltas.concat({name: 'idDelta_' + i, type: 'SHORT', value: segment.delta});
- idRangeOffsets = idRangeOffsets.concat({name: 'idRangeOffset_' + i, type: 'USHORT', value: segment.offset});
- if (segment.glyphId !== undefined) {
- glyphIds = glyphIds.concat({name: 'glyph_' + i, type: 'USHORT', value: segment.glyphId});
- }
- }
-
- t.fields = t.fields.concat(endCounts);
- t.fields.push({name: 'reservedPad', type: 'USHORT', value: 0});
- t.fields = t.fields.concat(startCounts);
- t.fields = t.fields.concat(idDeltas);
- t.fields = t.fields.concat(idRangeOffsets);
- t.fields = t.fields.concat(glyphIds);
-
- t.length = 14 + // Subtable header
- endCounts.length * 2 +
- 2 + // reservedPad
- startCounts.length * 2 +
- idDeltas.length * 2 +
- idRangeOffsets.length * 2 +
- glyphIds.length * 2;
-
- return t;
- }
-
- exports.parse = parseCmapTable;
- exports.make = makeCmapTable;
-
- },{"../check":2,"../parse":9,"../table":11}],14:[function(_dereq_,module,exports){
- // The `glyf` table describes the glyphs in TrueType outline format.
- // http://www.microsoft.com/typography/otspec/glyf.htm
-
- 'use strict';
-
- var check = _dereq_('../check');
- var glyphset = _dereq_('../glyphset');
- var parse = _dereq_('../parse');
- var path = _dereq_('../path');
-
- // Parse the coordinate data for a glyph.
- function parseGlyphCoordinate(p, flag, previousValue, shortVectorBitMask, sameBitMask) {
- var v;
- if ((flag & shortVectorBitMask) > 0) {
- // The coordinate is 1 byte long.
- v = p.parseByte();
- // The `same` bit is re-used for short values to signify the sign of the value.
- if ((flag & sameBitMask) === 0) {
- v = -v;
- }
-
- v = previousValue + v;
- } else {
- // The coordinate is 2 bytes long.
- // If the `same` bit is set, the coordinate is the same as the previous coordinate.
- if ((flag & sameBitMask) > 0) {
- v = previousValue;
- } else {
- // Parse the coordinate as a signed 16-bit delta value.
- v = previousValue + p.parseShort();
- }
- }
-
- return v;
- }
-
- // Parse a TrueType glyph.
- function parseGlyph(glyph, data, start) {
- var p = new parse.Parser(data, start);
- glyph.numberOfContours = p.parseShort();
- glyph.xMin = p.parseShort();
- glyph.yMin = p.parseShort();
- glyph.xMax = p.parseShort();
- glyph.yMax = p.parseShort();
- var flags;
- var flag;
- if (glyph.numberOfContours > 0) {
- var i;
- // This glyph is not a composite.
- var endPointIndices = glyph.endPointIndices = [];
- for (i = 0; i < glyph.numberOfContours; i += 1) {
- endPointIndices.push(p.parseUShort());
- }
-
- glyph.instructionLength = p.parseUShort();
- glyph.instructions = [];
- for (i = 0; i < glyph.instructionLength; i += 1) {
- glyph.instructions.push(p.parseByte());
- }
-
- var numberOfCoordinates = endPointIndices[endPointIndices.length - 1] + 1;
- flags = [];
- for (i = 0; i < numberOfCoordinates; i += 1) {
- flag = p.parseByte();
- flags.push(flag);
- // If bit 3 is set, we repeat this flag n times, where n is the next byte.
- if ((flag & 8) > 0) {
- var repeatCount = p.parseByte();
- for (var j = 0; j < repeatCount; j += 1) {
- flags.push(flag);
- i += 1;
- }
- }
- }
-
- check.argument(flags.length === numberOfCoordinates, 'Bad flags.');
-
- if (endPointIndices.length > 0) {
- var points = [];
- var point;
- // X/Y coordinates are relative to the previous point, except for the first point which is relative to 0,0.
- if (numberOfCoordinates > 0) {
- for (i = 0; i < numberOfCoordinates; i += 1) {
- flag = flags[i];
- point = {};
- point.onCurve = !!(flag & 1);
- point.lastPointOfContour = endPointIndices.indexOf(i) >= 0;
- points.push(point);
- }
-
- var px = 0;
- for (i = 0; i < numberOfCoordinates; i += 1) {
- flag = flags[i];
- point = points[i];
- point.x = parseGlyphCoordinate(p, flag, px, 2, 16);
- px = point.x;
- }
-
- var py = 0;
- for (i = 0; i < numberOfCoordinates; i += 1) {
- flag = flags[i];
- point = points[i];
- point.y = parseGlyphCoordinate(p, flag, py, 4, 32);
- py = point.y;
- }
- }
-
- glyph.points = points;
- } else {
- glyph.points = [];
- }
- } else if (glyph.numberOfContours === 0) {
- glyph.points = [];
- } else {
- glyph.isComposite = true;
- glyph.points = [];
- glyph.components = [];
- var moreComponents = true;
- while (moreComponents) {
- flags = p.parseUShort();
- var component = {
- glyphIndex: p.parseUShort(),
- xScale: 1,
- scale01: 0,
- scale10: 0,
- yScale: 1,
- dx: 0,
- dy: 0
- };
- if ((flags & 1) > 0) {
- // The arguments are words
- component.dx = p.parseShort();
- component.dy = p.parseShort();
- } else {
- // The arguments are bytes
- component.dx = p.parseChar();
- component.dy = p.parseChar();
- }
-
- if ((flags & 8) > 0) {
- // We have a scale
- component.xScale = component.yScale = p.parseF2Dot14();
- } else if ((flags & 64) > 0) {
- // We have an X / Y scale
- component.xScale = p.parseF2Dot14();
- component.yScale = p.parseF2Dot14();
- } else if ((flags & 128) > 0) {
- // We have a 2x2 transformation
- component.xScale = p.parseF2Dot14();
- component.scale01 = p.parseF2Dot14();
- component.scale10 = p.parseF2Dot14();
- component.yScale = p.parseF2Dot14();
- }
-
- glyph.components.push(component);
- moreComponents = !!(flags & 32);
- }
- }
- }
-
- // Transform an array of points and return a new array.
- function transformPoints(points, transform) {
- var newPoints = [];
- for (var i = 0; i < points.length; i += 1) {
- var pt = points[i];
- var newPt = {
- x: transform.xScale * pt.x + transform.scale01 * pt.y + transform.dx,
- y: transform.scale10 * pt.x + transform.yScale * pt.y + transform.dy,
- onCurve: pt.onCurve,
- lastPointOfContour: pt.lastPointOfContour
- };
- newPoints.push(newPt);
- }
-
- return newPoints;
- }
-
- function getContours(points) {
- var contours = [];
- var currentContour = [];
- for (var i = 0; i < points.length; i += 1) {
- var pt = points[i];
- currentContour.push(pt);
- if (pt.lastPointOfContour) {
- contours.push(currentContour);
- currentContour = [];
- }
- }
-
- check.argument(currentContour.length === 0, 'There are still points left in the current contour.');
- return contours;
- }
-
- // Convert the TrueType glyph outline to a Path.
- function getPath(points) {
- var p = new path.Path();
- if (!points) {
- return p;
- }
-
- var contours = getContours(points);
- for (var i = 0; i < contours.length; i += 1) {
- var contour = contours[i];
- var firstPt = contour[0];
- var lastPt = contour[contour.length - 1];
- var curvePt;
- var realFirstPoint;
- if (firstPt.onCurve) {
- curvePt = null;
- // The first point will be consumed by the moveTo command,
- // so skip it in the loop.
- realFirstPoint = true;
- } else {
- if (lastPt.onCurve) {
- // If the first point is off-curve and the last point is on-curve,
- // start at the last point.
- firstPt = lastPt;
- } else {
- // If both first and last points are off-curve, start at their middle.
- firstPt = { x: (firstPt.x + lastPt.x) / 2, y: (firstPt.y + lastPt.y) / 2 };
- }
-
- curvePt = firstPt;
- // The first point is synthesized, so don't skip the real first point.
- realFirstPoint = false;
- }
-
- p.moveTo(firstPt.x, firstPt.y);
-
- for (var j = realFirstPoint ? 1 : 0; j < contour.length; j += 1) {
- var pt = contour[j];
- var prevPt = j === 0 ? firstPt : contour[j - 1];
- if (prevPt.onCurve && pt.onCurve) {
- // This is a straight line.
- p.lineTo(pt.x, pt.y);
- } else if (prevPt.onCurve && !pt.onCurve) {
- curvePt = pt;
- } else if (!prevPt.onCurve && !pt.onCurve) {
- var midPt = { x: (prevPt.x + pt.x) / 2, y: (prevPt.y + pt.y) / 2 };
- p.quadraticCurveTo(prevPt.x, prevPt.y, midPt.x, midPt.y);
- curvePt = pt;
- } else if (!prevPt.onCurve && pt.onCurve) {
- // Previous point off-curve, this point on-curve.
- p.quadraticCurveTo(curvePt.x, curvePt.y, pt.x, pt.y);
- curvePt = null;
- } else {
- throw new Error('Invalid state.');
- }
- }
-
- if (firstPt !== lastPt) {
- // Connect the last and first points
- if (curvePt) {
- p.quadraticCurveTo(curvePt.x, curvePt.y, firstPt.x, firstPt.y);
- } else {
- p.lineTo(firstPt.x, firstPt.y);
- }
- }
- }
-
- p.closePath();
- return p;
- }
-
- function buildPath(glyphs, glyph) {
- if (glyph.isComposite) {
- for (var j = 0; j < glyph.components.length; j += 1) {
- var component = glyph.components[j];
- var componentGlyph = glyphs.get(component.glyphIndex);
- if (componentGlyph.points) {
- var transformedPoints = transformPoints(componentGlyph.points, component);
- glyph.points = glyph.points.concat(transformedPoints);
- }
- }
- }
-
- return getPath(glyph.points);
- }
-
- // Parse all the glyphs according to the offsets from the `loca` table.
- function parseGlyfTable(data, start, loca, font) {
- var glyphs = new glyphset.GlyphSet(font);
- var i;
-
- // The last element of the loca table is invalid.
- for (i = 0; i < loca.length - 1; i += 1) {
- var offset = loca[i];
- var nextOffset = loca[i + 1];
- if (offset !== nextOffset) {
- glyphs.push(i, glyphset.ttfGlyphLoader(font, i, parseGlyph, data, start + offset, buildPath));
- } else {
- glyphs.push(i, glyphset.glyphLoader(font, i));
- }
- }
-
- return glyphs;
- }
-
- exports.parse = parseGlyfTable;
-
- },{"../check":2,"../glyphset":7,"../parse":9,"../path":10}],15:[function(_dereq_,module,exports){
- // The `GPOS` table contains kerning pairs, among other things.
- // https://www.microsoft.com/typography/OTSPEC/gpos.htm
-
- 'use strict';
-
- var check = _dereq_('../check');
- var parse = _dereq_('../parse');
-
- // Parse ScriptList and FeatureList tables of GPOS, GSUB, GDEF, BASE, JSTF tables.
- // These lists are unused by now, this function is just the basis for a real parsing.
- function parseTaggedListTable(data, start) {
- var p = new parse.Parser(data, start);
- var n = p.parseUShort();
- var list = [];
- for (var i = 0; i < n; i++) {
- list[p.parseTag()] = { offset: p.parseUShort() };
- }
-
- return list;
- }
-
- // Parse a coverage table in a GSUB, GPOS or GDEF table.
- // Format 1 is a simple list of glyph ids,
- // Format 2 is a list of ranges. It is expanded in a list of glyphs, maybe not the best idea.
- function parseCoverageTable(data, start) {
- var p = new parse.Parser(data, start);
- var format = p.parseUShort();
- var count = p.parseUShort();
- if (format === 1) {
- return p.parseUShortList(count);
- }
- else if (format === 2) {
- var coverage = [];
- for (; count--;) {
- var begin = p.parseUShort();
- var end = p.parseUShort();
- var index = p.parseUShort();
- for (var i = begin; i <= end; i++) {
- coverage[index++] = i;
- }
- }
-
- return coverage;
- }
- }
-
- // Parse a Class Definition Table in a GSUB, GPOS or GDEF table.
- // Returns a function that gets a class value from a glyph ID.
- function parseClassDefTable(data, start) {
- var p = new parse.Parser(data, start);
- var format = p.parseUShort();
- if (format === 1) {
- // Format 1 specifies a range of consecutive glyph indices, one class per glyph ID.
- var startGlyph = p.parseUShort();
- var glyphCount = p.parseUShort();
- var classes = p.parseUShortList(glyphCount);
- return function(glyphID) {
- return classes[glyphID - startGlyph] || 0;
- };
- }
- else if (format === 2) {
- // Format 2 defines multiple groups of glyph indices that belong to the same class.
- var rangeCount = p.parseUShort();
- var startGlyphs = [];
- var endGlyphs = [];
- var classValues = [];
- for (var i = 0; i < rangeCount; i++) {
- startGlyphs[i] = p.parseUShort();
- endGlyphs[i] = p.parseUShort();
- classValues[i] = p.parseUShort();
- }
-
- return function(glyphID) {
- var l = 0;
- var r = startGlyphs.length - 1;
- while (l < r) {
- var c = (l + r + 1) >> 1;
- if (glyphID < startGlyphs[c]) {
- r = c - 1;
- } else {
- l = c;
- }
- }
-
- if (startGlyphs[l] <= glyphID && glyphID <= endGlyphs[l]) {
- return classValues[l] || 0;
- }
-
- return 0;
- };
- }
- }
-
- // Parse a pair adjustment positioning subtable, format 1 or format 2
- // The subtable is returned in the form of a lookup function.
- function parsePairPosSubTable(data, start) {
- var p = new parse.Parser(data, start);
- // This part is common to format 1 and format 2 subtables
- var format = p.parseUShort();
- var coverageOffset = p.parseUShort();
- var coverage = parseCoverageTable(data, start + coverageOffset);
- // valueFormat 4: XAdvance only, 1: XPlacement only, 0: no ValueRecord for second glyph
- // Only valueFormat1=4 and valueFormat2=0 is supported.
- var valueFormat1 = p.parseUShort();
- var valueFormat2 = p.parseUShort();
- var value1;
- var value2;
- if (valueFormat1 !== 4 || valueFormat2 !== 0) return;
- var sharedPairSets = {};
- if (format === 1) {
- // Pair Positioning Adjustment: Format 1
- var pairSetCount = p.parseUShort();
- var pairSet = [];
- // Array of offsets to PairSet tables-from beginning of PairPos subtable-ordered by Coverage Index
- var pairSetOffsets = p.parseOffset16List(pairSetCount);
- for (var firstGlyph = 0; firstGlyph < pairSetCount; firstGlyph++) {
- var pairSetOffset = pairSetOffsets[firstGlyph];
- var sharedPairSet = sharedPairSets[pairSetOffset];
- if (!sharedPairSet) {
- // Parse a pairset table in a pair adjustment subtable format 1
- sharedPairSet = {};
- p.relativeOffset = pairSetOffset;
- var pairValueCount = p.parseUShort();
- for (; pairValueCount--;) {
- var secondGlyph = p.parseUShort();
- if (valueFormat1) value1 = p.parseShort();
- if (valueFormat2) value2 = p.parseShort();
- // We only support valueFormat1 = 4 and valueFormat2 = 0,
- // so value1 is the XAdvance and value2 is empty.
- sharedPairSet[secondGlyph] = value1;
- }
- }
-
- pairSet[coverage[firstGlyph]] = sharedPairSet;
- }
-
- return function(leftGlyph, rightGlyph) {
- var pairs = pairSet[leftGlyph];
- if (pairs) return pairs[rightGlyph];
- };
- }
- else if (format === 2) {
- // Pair Positioning Adjustment: Format 2
- var classDef1Offset = p.parseUShort();
- var classDef2Offset = p.parseUShort();
- var class1Count = p.parseUShort();
- var class2Count = p.parseUShort();
- var getClass1 = parseClassDefTable(data, start + classDef1Offset);
- var getClass2 = parseClassDefTable(data, start + classDef2Offset);
-
- // Parse kerning values by class pair.
- var kerningMatrix = [];
- for (var i = 0; i < class1Count; i++) {
- var kerningRow = kerningMatrix[i] = [];
- for (var j = 0; j < class2Count; j++) {
- if (valueFormat1) value1 = p.parseShort();
- if (valueFormat2) value2 = p.parseShort();
- // We only support valueFormat1 = 4 and valueFormat2 = 0,
- // so value1 is the XAdvance and value2 is empty.
- kerningRow[j] = value1;
- }
- }
-
- // Convert coverage list to a hash
- var covered = {};
- for (i = 0; i < coverage.length; i++) covered[coverage[i]] = 1;
-
- // Get the kerning value for a specific glyph pair.
- return function(leftGlyph, rightGlyph) {
- if (!covered[leftGlyph]) return;
- var class1 = getClass1(leftGlyph);
- var class2 = getClass2(rightGlyph);
- var kerningRow = kerningMatrix[class1];
-
- if (kerningRow) {
- return kerningRow[class2];
- }
- };
- }
- }
-
- // Parse a LookupTable (present in of GPOS, GSUB, GDEF, BASE, JSTF tables).
- function parseLookupTable(data, start) {
- var p = new parse.Parser(data, start);
- var lookupType = p.parseUShort();
- var lookupFlag = p.parseUShort();
- var useMarkFilteringSet = lookupFlag & 0x10;
- var subTableCount = p.parseUShort();
- var subTableOffsets = p.parseOffset16List(subTableCount);
- var table = {
- lookupType: lookupType,
- lookupFlag: lookupFlag,
- markFilteringSet: useMarkFilteringSet ? p.parseUShort() : -1
- };
- // LookupType 2, Pair adjustment
- if (lookupType === 2) {
- var subtables = [];
- for (var i = 0; i < subTableCount; i++) {
- subtables.push(parsePairPosSubTable(data, start + subTableOffsets[i]));
- }
- // Return a function which finds the kerning values in the subtables.
- table.getKerningValue = function(leftGlyph, rightGlyph) {
- for (var i = subtables.length; i--;) {
- var value = subtables[i](leftGlyph, rightGlyph);
- if (value !== undefined) return value;
- }
-
- return 0;
- };
- }
-
- return table;
- }
-
- // Parse the `GPOS` table which contains, among other things, kerning pairs.
- // https://www.microsoft.com/typography/OTSPEC/gpos.htm
- function parseGposTable(data, start, font) {
- var p = new parse.Parser(data, start);
- var tableVersion = p.parseFixed();
- check.argument(tableVersion === 1, 'Unsupported GPOS table version.');
-
- // ScriptList and FeatureList - ignored for now
- parseTaggedListTable(data, start + p.parseUShort());
- // 'kern' is the feature we are looking for.
- parseTaggedListTable(data, start + p.parseUShort());
-
- // LookupList
- var lookupListOffset = p.parseUShort();
- p.relativeOffset = lookupListOffset;
- var lookupCount = p.parseUShort();
- var lookupTableOffsets = p.parseOffset16List(lookupCount);
- var lookupListAbsoluteOffset = start + lookupListOffset;
- for (var i = 0; i < lookupCount; i++) {
- var table = parseLookupTable(data, lookupListAbsoluteOffset + lookupTableOffsets[i]);
- if (table.lookupType === 2 && !font.getGposKerningValue) font.getGposKerningValue = table.getKerningValue;
- }
- }
-
- exports.parse = parseGposTable;
-
- },{"../check":2,"../parse":9}],16:[function(_dereq_,module,exports){
- // The `head` table contains global information about the font.
- // https://www.microsoft.com/typography/OTSPEC/head.htm
-
- 'use strict';
-
- var check = _dereq_('../check');
- var parse = _dereq_('../parse');
- var table = _dereq_('../table');
-
- // Parse the header `head` table
- function parseHeadTable(data, start) {
- var head = {};
- var p = new parse.Parser(data, start);
- head.version = p.parseVersion();
- head.fontRevision = Math.round(p.parseFixed() * 1000) / 1000;
- head.checkSumAdjustment = p.parseULong();
- head.magicNumber = p.parseULong();
- check.argument(head.magicNumber === 0x5F0F3CF5, 'Font header has wrong magic number.');
- head.flags = p.parseUShort();
- head.unitsPerEm = p.parseUShort();
- head.created = p.parseLongDateTime();
- head.modified = p.parseLongDateTime();
- head.xMin = p.parseShort();
- head.yMin = p.parseShort();
- head.xMax = p.parseShort();
- head.yMax = p.parseShort();
- head.macStyle = p.parseUShort();
- head.lowestRecPPEM = p.parseUShort();
- head.fontDirectionHint = p.parseShort();
- head.indexToLocFormat = p.parseShort(); // 50
- head.glyphDataFormat = p.parseShort();
- return head;
- }
-
- function makeHeadTable(options) {
- return new table.Table('head', [
- {name: 'version', type: 'FIXED', value: 0x00010000},
- {name: 'fontRevision', type: 'FIXED', value: 0x00010000},
- {name: 'checkSumAdjustment', type: 'ULONG', value: 0},
- {name: 'magicNumber', type: 'ULONG', value: 0x5F0F3CF5},
- {name: 'flags', type: 'USHORT', value: 0},
- {name: 'unitsPerEm', type: 'USHORT', value: 1000},
- {name: 'created', type: 'LONGDATETIME', value: 0},
- {name: 'modified', type: 'LONGDATETIME', value: 0},
- {name: 'xMin', type: 'SHORT', value: 0},
- {name: 'yMin', type: 'SHORT', value: 0},
- {name: 'xMax', type: 'SHORT', value: 0},
- {name: 'yMax', type: 'SHORT', value: 0},
- {name: 'macStyle', type: 'USHORT', value: 0},
- {name: 'lowestRecPPEM', type: 'USHORT', value: 0},
- {name: 'fontDirectionHint', type: 'SHORT', value: 2},
- {name: 'indexToLocFormat', type: 'SHORT', value: 0},
- {name: 'glyphDataFormat', type: 'SHORT', value: 0}
- ], options);
- }
-
- exports.parse = parseHeadTable;
- exports.make = makeHeadTable;
-
- },{"../check":2,"../parse":9,"../table":11}],17:[function(_dereq_,module,exports){
- // The `hhea` table contains information for horizontal layout.
- // https://www.microsoft.com/typography/OTSPEC/hhea.htm
-
- 'use strict';
-
- var parse = _dereq_('../parse');
- var table = _dereq_('../table');
-
- // Parse the horizontal header `hhea` table
- function parseHheaTable(data, start) {
- var hhea = {};
- var p = new parse.Parser(data, start);
- hhea.version = p.parseVersion();
- hhea.ascender = p.parseShort();
- hhea.descender = p.parseShort();
- hhea.lineGap = p.parseShort();
- hhea.advanceWidthMax = p.parseUShort();
- hhea.minLeftSideBearing = p.parseShort();
- hhea.minRightSideBearing = p.parseShort();
- hhea.xMaxExtent = p.parseShort();
- hhea.caretSlopeRise = p.parseShort();
- hhea.caretSlopeRun = p.parseShort();
- hhea.caretOffset = p.parseShort();
- p.relativeOffset += 8;
- hhea.metricDataFormat = p.parseShort();
- hhea.numberOfHMetrics = p.parseUShort();
- return hhea;
- }
-
- function makeHheaTable(options) {
- return new table.Table('hhea', [
- {name: 'version', type: 'FIXED', value: 0x00010000},
- {name: 'ascender', type: 'FWORD', value: 0},
- {name: 'descender', type: 'FWORD', value: 0},
- {name: 'lineGap', type: 'FWORD', value: 0},
- {name: 'advanceWidthMax', type: 'UFWORD', value: 0},
- {name: 'minLeftSideBearing', type: 'FWORD', value: 0},
- {name: 'minRightSideBearing', type: 'FWORD', value: 0},
- {name: 'xMaxExtent', type: 'FWORD', value: 0},
- {name: 'caretSlopeRise', type: 'SHORT', value: 1},
- {name: 'caretSlopeRun', type: 'SHORT', value: 0},
- {name: 'caretOffset', type: 'SHORT', value: 0},
- {name: 'reserved1', type: 'SHORT', value: 0},
- {name: 'reserved2', type: 'SHORT', value: 0},
- {name: 'reserved3', type: 'SHORT', value: 0},
- {name: 'reserved4', type: 'SHORT', value: 0},
- {name: 'metricDataFormat', type: 'SHORT', value: 0},
- {name: 'numberOfHMetrics', type: 'USHORT', value: 0}
- ], options);
- }
-
- exports.parse = parseHheaTable;
- exports.make = makeHheaTable;
-
- },{"../parse":9,"../table":11}],18:[function(_dereq_,module,exports){
- // The `hmtx` table contains the horizontal metrics for all glyphs.
- // https://www.microsoft.com/typography/OTSPEC/hmtx.htm
-
- 'use strict';
-
- var parse = _dereq_('../parse');
- var table = _dereq_('../table');
-
- // Parse the `hmtx` table, which contains the horizontal metrics for all glyphs.
- // This function augments the glyph array, adding the advanceWidth and leftSideBearing to each glyph.
- function parseHmtxTable(data, start, numMetrics, numGlyphs, glyphs) {
- var advanceWidth;
- var leftSideBearing;
- var p = new parse.Parser(data, start);
- for (var i = 0; i < numGlyphs; i += 1) {
- // If the font is monospaced, only one entry is needed. This last entry applies to all subsequent glyphs.
- if (i < numMetrics) {
- advanceWidth = p.parseUShort();
- leftSideBearing = p.parseShort();
- }
-
- var glyph = glyphs.get(i);
- glyph.advanceWidth = advanceWidth;
- glyph.leftSideBearing = leftSideBearing;
- }
- }
-
- function makeHmtxTable(glyphs) {
- var t = new table.Table('hmtx', []);
- for (var i = 0; i < glyphs.length; i += 1) {
- var glyph = glyphs.get(i);
- var advanceWidth = glyph.advanceWidth || 0;
- var leftSideBearing = glyph.leftSideBearing || 0;
- t.fields.push({name: 'advanceWidth_' + i, type: 'USHORT', value: advanceWidth});
- t.fields.push({name: 'leftSideBearing_' + i, type: 'SHORT', value: leftSideBearing});
- }
-
- return t;
- }
-
- exports.parse = parseHmtxTable;
- exports.make = makeHmtxTable;
-
- },{"../parse":9,"../table":11}],19:[function(_dereq_,module,exports){
- // The `kern` table contains kerning pairs.
- // Note that some fonts use the GPOS OpenType layout table to specify kerning.
- // https://www.microsoft.com/typography/OTSPEC/kern.htm
-
- 'use strict';
-
- var check = _dereq_('../check');
- var parse = _dereq_('../parse');
-
- // Parse the `kern` table which contains kerning pairs.
- function parseKernTable(data, start) {
- var pairs = {};
- var p = new parse.Parser(data, start);
- var tableVersion = p.parseUShort();
- check.argument(tableVersion === 0, 'Unsupported kern table version.');
- // Skip nTables.
- p.skip('uShort', 1);
- var subTableVersion = p.parseUShort();
- check.argument(subTableVersion === 0, 'Unsupported kern sub-table version.');
- // Skip subTableLength, subTableCoverage
- p.skip('uShort', 2);
- var nPairs = p.parseUShort();
- // Skip searchRange, entrySelector, rangeShift.
- p.skip('uShort', 3);
- for (var i = 0; i < nPairs; i += 1) {
- var leftIndex = p.parseUShort();
- var rightIndex = p.parseUShort();
- var value = p.parseShort();
- pairs[leftIndex + ',' + rightIndex] = value;
- }
-
- return pairs;
- }
-
- exports.parse = parseKernTable;
-
- },{"../check":2,"../parse":9}],20:[function(_dereq_,module,exports){
- // The `loca` table stores the offsets to the locations of the glyphs in the font.
- // https://www.microsoft.com/typography/OTSPEC/loca.htm
-
- 'use strict';
-
- var parse = _dereq_('../parse');
-
- // Parse the `loca` table. This table stores the offsets to the locations of the glyphs in the font,
- // relative to the beginning of the glyphData table.
- // The number of glyphs stored in the `loca` table is specified in the `maxp` table (under numGlyphs)
- // The loca table has two versions: a short version where offsets are stored as uShorts, and a long
- // version where offsets are stored as uLongs. The `head` table specifies which version to use
- // (under indexToLocFormat).
- function parseLocaTable(data, start, numGlyphs, shortVersion) {
- var p = new parse.Parser(data, start);
- var parseFn = shortVersion ? p.parseUShort : p.parseULong;
- // There is an extra entry after the last index element to compute the length of the last glyph.
- // That's why we use numGlyphs + 1.
- var glyphOffsets = [];
- for (var i = 0; i < numGlyphs + 1; i += 1) {
- var glyphOffset = parseFn.call(p);
- if (shortVersion) {
- // The short table version stores the actual offset divided by 2.
- glyphOffset *= 2;
- }
-
- glyphOffsets.push(glyphOffset);
- }
-
- return glyphOffsets;
- }
-
- exports.parse = parseLocaTable;
-
- },{"../parse":9}],21:[function(_dereq_,module,exports){
- // The `maxp` table establishes the memory requirements for the font.
- // We need it just to get the number of glyphs in the font.
- // https://www.microsoft.com/typography/OTSPEC/maxp.htm
-
- 'use strict';
-
- var parse = _dereq_('../parse');
- var table = _dereq_('../table');
-
- // Parse the maximum profile `maxp` table.
- function parseMaxpTable(data, start) {
- var maxp = {};
- var p = new parse.Parser(data, start);
- maxp.version = p.parseVersion();
- maxp.numGlyphs = p.parseUShort();
- if (maxp.version === 1.0) {
- maxp.maxPoints = p.parseUShort();
- maxp.maxContours = p.parseUShort();
- maxp.maxCompositePoints = p.parseUShort();
- maxp.maxCompositeContours = p.parseUShort();
- maxp.maxZones = p.parseUShort();
- maxp.maxTwilightPoints = p.parseUShort();
- maxp.maxStorage = p.parseUShort();
- maxp.maxFunctionDefs = p.parseUShort();
- maxp.maxInstructionDefs = p.parseUShort();
- maxp.maxStackElements = p.parseUShort();
- maxp.maxSizeOfInstructions = p.parseUShort();
- maxp.maxComponentElements = p.parseUShort();
- maxp.maxComponentDepth = p.parseUShort();
- }
-
- return maxp;
- }
-
- function makeMaxpTable(numGlyphs) {
- return new table.Table('maxp', [
- {name: 'version', type: 'FIXED', value: 0x00005000},
- {name: 'numGlyphs', type: 'USHORT', value: numGlyphs}
- ]);
- }
-
- exports.parse = parseMaxpTable;
- exports.make = makeMaxpTable;
-
- },{"../parse":9,"../table":11}],22:[function(_dereq_,module,exports){
- // The `name` naming table.
- // https://www.microsoft.com/typography/OTSPEC/name.htm
-
- 'use strict';
-
- var encode = _dereq_('../types').encode;
- var parse = _dereq_('../parse');
- var table = _dereq_('../table');
-
- // NameIDs for the name table.
- var nameTableNames = [
- 'copyright', // 0
- 'fontFamily', // 1
- 'fontSubfamily', // 2
- 'uniqueID', // 3
- 'fullName', // 4
- 'version', // 5
- 'postScriptName', // 6
- 'trademark', // 7
- 'manufacturer', // 8
- 'designer', // 9
- 'description', // 10
- 'manufacturerURL', // 11
- 'designerURL', // 12
- 'licence', // 13
- 'licenceURL', // 14
- 'reserved', // 15
- 'preferredFamily', // 16
- 'preferredSubfamily', // 17
- 'compatibleFullName', // 18
- 'sampleText', // 19
- 'postScriptFindFontName', // 20
- 'wwsFamily', // 21
- 'wwsSubfamily' // 22
- ];
-
- // Parse the naming `name` table
- // Only Windows Unicode English names are supported.
- // Format 1 additional fields are not supported
- function parseNameTable(data, start) {
- var name = {};
- var p = new parse.Parser(data, start);
- name.format = p.parseUShort();
- var count = p.parseUShort();
- var stringOffset = p.offset + p.parseUShort();
- var unknownCount = 0;
- for (var i = 0; i < count; i++) {
- var platformID = p.parseUShort();
- var encodingID = p.parseUShort();
- var languageID = p.parseUShort();
- var nameID = p.parseUShort();
- var property = nameTableNames[nameID];
- var byteLength = p.parseUShort();
- var offset = p.parseUShort();
- // platformID - encodingID - languageID standard combinations :
- // 1 - 0 - 0 : Macintosh, Roman, English
- // 3 - 1 - 0x409 : Windows, Unicode BMP (UCS-2), en-US
- if (platformID === 3 && encodingID === 1 && languageID === 0x409) {
- var codePoints = [];
- var length = byteLength / 2;
- for (var j = 0; j < length; j++, offset += 2) {
- codePoints[j] = parse.getShort(data, stringOffset + offset);
- }
-
- var str = String.fromCharCode.apply(null, codePoints);
- if (property) {
- name[property] = str;
- }
- else {
- unknownCount++;
- name['unknown' + unknownCount] = str;
- }
- }
-
- }
-
- if (name.format === 1) {
- name.langTagCount = p.parseUShort();
- }
-
- return name;
- }
-
- function makeNameRecord(platformID, encodingID, languageID, nameID, length, offset) {
- return new table.Table('NameRecord', [
- {name: 'platformID', type: 'USHORT', value: platformID},
- {name: 'encodingID', type: 'USHORT', value: encodingID},
- {name: 'languageID', type: 'USHORT', value: languageID},
- {name: 'nameID', type: 'USHORT', value: nameID},
- {name: 'length', type: 'USHORT', value: length},
- {name: 'offset', type: 'USHORT', value: offset}
- ]);
- }
-
- function addMacintoshNameRecord(t, recordID, s, offset) {
- // Macintosh, Roman, English
- var stringBytes = encode.STRING(s);
- t.records.push(makeNameRecord(1, 0, 0, recordID, stringBytes.length, offset));
- t.strings.push(stringBytes);
- offset += stringBytes.length;
- return offset;
- }
-
- function addWindowsNameRecord(t, recordID, s, offset) {
- // Windows, Unicode BMP (UCS-2), US English
- var utf16Bytes = encode.UTF16(s);
- t.records.push(makeNameRecord(3, 1, 0x0409, recordID, utf16Bytes.length, offset));
- t.strings.push(utf16Bytes);
- offset += utf16Bytes.length;
- return offset;
- }
-
- function makeNameTable(options) {
- var t = new table.Table('name', [
- {name: 'format', type: 'USHORT', value: 0},
- {name: 'count', type: 'USHORT', value: 0},
- {name: 'stringOffset', type: 'USHORT', value: 0}
- ]);
- t.records = [];
- t.strings = [];
- var offset = 0;
- var i;
- var s;
- // Add Macintosh records first
- for (i = 0; i < nameTableNames.length; i += 1) {
- if (options[nameTableNames[i]] !== undefined) {
- s = options[nameTableNames[i]];
- offset = addMacintoshNameRecord(t, i, s, offset);
- }
- }
- // Then add Windows records
- for (i = 0; i < nameTableNames.length; i += 1) {
- if (options[nameTableNames[i]] !== undefined) {
- s = options[nameTableNames[i]];
- offset = addWindowsNameRecord(t, i, s, offset);
- }
- }
-
- t.count = t.records.length;
- t.stringOffset = 6 + t.count * 12;
- for (i = 0; i < t.records.length; i += 1) {
- t.fields.push({name: 'record_' + i, type: 'TABLE', value: t.records[i]});
- }
-
- for (i = 0; i < t.strings.length; i += 1) {
- t.fields.push({name: 'string_' + i, type: 'LITERAL', value: t.strings[i]});
- }
-
- return t;
- }
-
- exports.parse = parseNameTable;
- exports.make = makeNameTable;
-
- },{"../parse":9,"../table":11,"../types":26}],23:[function(_dereq_,module,exports){
- // The `OS/2` table contains metrics required in OpenType fonts.
- // https://www.microsoft.com/typography/OTSPEC/os2.htm
-
- 'use strict';
-
- var parse = _dereq_('../parse');
- var table = _dereq_('../table');
-
- var unicodeRanges = [
- {begin: 0x0000, end: 0x007F}, // Basic Latin
- {begin: 0x0080, end: 0x00FF}, // Latin-1 Supplement
- {begin: 0x0100, end: 0x017F}, // Latin Extended-A
- {begin: 0x0180, end: 0x024F}, // Latin Extended-B
- {begin: 0x0250, end: 0x02AF}, // IPA Extensions
- {begin: 0x02B0, end: 0x02FF}, // Spacing Modifier Letters
- {begin: 0x0300, end: 0x036F}, // Combining Diacritical Marks
- {begin: 0x0370, end: 0x03FF}, // Greek and Coptic
- {begin: 0x2C80, end: 0x2CFF}, // Coptic
- {begin: 0x0400, end: 0x04FF}, // Cyrillic
- {begin: 0x0530, end: 0x058F}, // Armenian
- {begin: 0x0590, end: 0x05FF}, // Hebrew
- {begin: 0xA500, end: 0xA63F}, // Vai
- {begin: 0x0600, end: 0x06FF}, // Arabic
- {begin: 0x07C0, end: 0x07FF}, // NKo
- {begin: 0x0900, end: 0x097F}, // Devanagari
- {begin: 0x0980, end: 0x09FF}, // Bengali
- {begin: 0x0A00, end: 0x0A7F}, // Gurmukhi
- {begin: 0x0A80, end: 0x0AFF}, // Gujarati
- {begin: 0x0B00, end: 0x0B7F}, // Oriya
- {begin: 0x0B80, end: 0x0BFF}, // Tamil
- {begin: 0x0C00, end: 0x0C7F}, // Telugu
- {begin: 0x0C80, end: 0x0CFF}, // Kannada
- {begin: 0x0D00, end: 0x0D7F}, // Malayalam
- {begin: 0x0E00, end: 0x0E7F}, // Thai
- {begin: 0x0E80, end: 0x0EFF}, // Lao
- {begin: 0x10A0, end: 0x10FF}, // Georgian
- {begin: 0x1B00, end: 0x1B7F}, // Balinese
- {begin: 0x1100, end: 0x11FF}, // Hangul Jamo
- {begin: 0x1E00, end: 0x1EFF}, // Latin Extended Additional
- {begin: 0x1F00, end: 0x1FFF}, // Greek Extended
- {begin: 0x2000, end: 0x206F}, // General Punctuation
- {begin: 0x2070, end: 0x209F}, // Superscripts And Subscripts
- {begin: 0x20A0, end: 0x20CF}, // Currency Symbol
- {begin: 0x20D0, end: 0x20FF}, // Combining Diacritical Marks For Symbols
- {begin: 0x2100, end: 0x214F}, // Letterlike Symbols
- {begin: 0x2150, end: 0x218F}, // Number Forms
- {begin: 0x2190, end: 0x21FF}, // Arrows
- {begin: 0x2200, end: 0x22FF}, // Mathematical Operators
- {begin: 0x2300, end: 0x23FF}, // Miscellaneous Technical
- {begin: 0x2400, end: 0x243F}, // Control Pictures
- {begin: 0x2440, end: 0x245F}, // Optical Character Recognition
- {begin: 0x2460, end: 0x24FF}, // Enclosed Alphanumerics
- {begin: 0x2500, end: 0x257F}, // Box Drawing
- {begin: 0x2580, end: 0x259F}, // Block Elements
- {begin: 0x25A0, end: 0x25FF}, // Geometric Shapes
- {begin: 0x2600, end: 0x26FF}, // Miscellaneous Symbols
- {begin: 0x2700, end: 0x27BF}, // Dingbats
- {begin: 0x3000, end: 0x303F}, // CJK Symbols And Punctuation
- {begin: 0x3040, end: 0x309F}, // Hiragana
- {begin: 0x30A0, end: 0x30FF}, // Katakana
- {begin: 0x3100, end: 0x312F}, // Bopomofo
- {begin: 0x3130, end: 0x318F}, // Hangul Compatibility Jamo
- {begin: 0xA840, end: 0xA87F}, // Phags-pa
- {begin: 0x3200, end: 0x32FF}, // Enclosed CJK Letters And Months
- {begin: 0x3300, end: 0x33FF}, // CJK Compatibility
- {begin: 0xAC00, end: 0xD7AF}, // Hangul Syllables
- {begin: 0xD800, end: 0xDFFF}, // Non-Plane 0 *
- {begin: 0x10900, end: 0x1091F}, // Phoenicia
- {begin: 0x4E00, end: 0x9FFF}, // CJK Unified Ideographs
- {begin: 0xE000, end: 0xF8FF}, // Private Use Area (plane 0)
- {begin: 0x31C0, end: 0x31EF}, // CJK Strokes
- {begin: 0xFB00, end: 0xFB4F}, // Alphabetic Presentation Forms
- {begin: 0xFB50, end: 0xFDFF}, // Arabic Presentation Forms-A
- {begin: 0xFE20, end: 0xFE2F}, // Combining Half Marks
- {begin: 0xFE10, end: 0xFE1F}, // Vertical Forms
- {begin: 0xFE50, end: 0xFE6F}, // Small Form Variants
- {begin: 0xFE70, end: 0xFEFF}, // Arabic Presentation Forms-B
- {begin: 0xFF00, end: 0xFFEF}, // Halfwidth And Fullwidth Forms
- {begin: 0xFFF0, end: 0xFFFF}, // Specials
- {begin: 0x0F00, end: 0x0FFF}, // Tibetan
- {begin: 0x0700, end: 0x074F}, // Syriac
- {begin: 0x0780, end: 0x07BF}, // Thaana
- {begin: 0x0D80, end: 0x0DFF}, // Sinhala
- {begin: 0x1000, end: 0x109F}, // Myanmar
- {begin: 0x1200, end: 0x137F}, // Ethiopic
- {begin: 0x13A0, end: 0x13FF}, // Cherokee
- {begin: 0x1400, end: 0x167F}, // Unified Canadian Aboriginal Syllabics
- {begin: 0x1680, end: 0x169F}, // Ogham
- {begin: 0x16A0, end: 0x16FF}, // Runic
- {begin: 0x1780, end: 0x17FF}, // Khmer
- {begin: 0x1800, end: 0x18AF}, // Mongolian
- {begin: 0x2800, end: 0x28FF}, // Braille Patterns
- {begin: 0xA000, end: 0xA48F}, // Yi Syllables
- {begin: 0x1700, end: 0x171F}, // Tagalog
- {begin: 0x10300, end: 0x1032F}, // Old Italic
- {begin: 0x10330, end: 0x1034F}, // Gothic
- {begin: 0x10400, end: 0x1044F}, // Deseret
- {begin: 0x1D000, end: 0x1D0FF}, // Byzantine Musical Symbols
- {begin: 0x1D400, end: 0x1D7FF}, // Mathematical Alphanumeric Symbols
- {begin: 0xFF000, end: 0xFFFFD}, // Private Use (plane 15)
- {begin: 0xFE00, end: 0xFE0F}, // Variation Selectors
- {begin: 0xE0000, end: 0xE007F}, // Tags
- {begin: 0x1900, end: 0x194F}, // Limbu
- {begin: 0x1950, end: 0x197F}, // Tai Le
- {begin: 0x1980, end: 0x19DF}, // New Tai Lue
- {begin: 0x1A00, end: 0x1A1F}, // Buginese
- {begin: 0x2C00, end: 0x2C5F}, // Glagolitic
- {begin: 0x2D30, end: 0x2D7F}, // Tifinagh
- {begin: 0x4DC0, end: 0x4DFF}, // Yijing Hexagram Symbols
- {begin: 0xA800, end: 0xA82F}, // Syloti Nagri
- {begin: 0x10000, end: 0x1007F}, // Linear B Syllabary
- {begin: 0x10140, end: 0x1018F}, // Ancient Greek Numbers
- {begin: 0x10380, end: 0x1039F}, // Ugaritic
- {begin: 0x103A0, end: 0x103DF}, // Old Persian
- {begin: 0x10450, end: 0x1047F}, // Shavian
- {begin: 0x10480, end: 0x104AF}, // Osmanya
- {begin: 0x10800, end: 0x1083F}, // Cypriot Syllabary
- {begin: 0x10A00, end: 0x10A5F}, // Kharoshthi
- {begin: 0x1D300, end: 0x1D35F}, // Tai Xuan Jing Symbols
- {begin: 0x12000, end: 0x123FF}, // Cuneiform
- {begin: 0x1D360, end: 0x1D37F}, // Counting Rod Numerals
- {begin: 0x1B80, end: 0x1BBF}, // Sundanese
- {begin: 0x1C00, end: 0x1C4F}, // Lepcha
- {begin: 0x1C50, end: 0x1C7F}, // Ol Chiki
- {begin: 0xA880, end: 0xA8DF}, // Saurashtra
- {begin: 0xA900, end: 0xA92F}, // Kayah Li
- {begin: 0xA930, end: 0xA95F}, // Rejang
- {begin: 0xAA00, end: 0xAA5F}, // Cham
- {begin: 0x10190, end: 0x101CF}, // Ancient Symbols
- {begin: 0x101D0, end: 0x101FF}, // Phaistos Disc
- {begin: 0x102A0, end: 0x102DF}, // Carian
- {begin: 0x1F030, end: 0x1F09F} // Domino Tiles
- ];
-
- function getUnicodeRange(unicode) {
- for (var i = 0; i < unicodeRanges.length; i += 1) {
- var range = unicodeRanges[i];
- if (unicode >= range.begin && unicode < range.end) {
- return i;
- }
- }
-
- return -1;
- }
-
- // Parse the OS/2 and Windows metrics `OS/2` table
- function parseOS2Table(data, start) {
- var os2 = {};
- var p = new parse.Parser(data, start);
- os2.version = p.parseUShort();
- os2.xAvgCharWidth = p.parseShort();
- os2.usWeightClass = p.parseUShort();
- os2.usWidthClass = p.parseUShort();
- os2.fsType = p.parseUShort();
- os2.ySubscriptXSize = p.parseShort();
- os2.ySubscriptYSize = p.parseShort();
- os2.ySubscriptXOffset = p.parseShort();
- os2.ySubscriptYOffset = p.parseShort();
- os2.ySuperscriptXSize = p.parseShort();
- os2.ySuperscriptYSize = p.parseShort();
- os2.ySuperscriptXOffset = p.parseShort();
- os2.ySuperscriptYOffset = p.parseShort();
- os2.yStrikeoutSize = p.parseShort();
- os2.yStrikeoutPosition = p.parseShort();
- os2.sFamilyClass = p.parseShort();
- os2.panose = [];
- for (var i = 0; i < 10; i++) {
- os2.panose[i] = p.parseByte();
- }
-
- os2.ulUnicodeRange1 = p.parseULong();
- os2.ulUnicodeRange2 = p.parseULong();
- os2.ulUnicodeRange3 = p.parseULong();
- os2.ulUnicodeRange4 = p.parseULong();
- os2.achVendID = String.fromCharCode(p.parseByte(), p.parseByte(), p.parseByte(), p.parseByte());
- os2.fsSelection = p.parseUShort();
- os2.usFirstCharIndex = p.parseUShort();
- os2.usLastCharIndex = p.parseUShort();
- os2.sTypoAscender = p.parseShort();
- os2.sTypoDescender = p.parseShort();
- os2.sTypoLineGap = p.parseShort();
- os2.usWinAscent = p.parseUShort();
- os2.usWinDescent = p.parseUShort();
- if (os2.version >= 1) {
- os2.ulCodePageRange1 = p.parseULong();
- os2.ulCodePageRange2 = p.parseULong();
- }
-
- if (os2.version >= 2) {
- os2.sxHeight = p.parseShort();
- os2.sCapHeight = p.parseShort();
- os2.usDefaultChar = p.parseUShort();
- os2.usBreakChar = p.parseUShort();
- os2.usMaxContent = p.parseUShort();
- }
-
- return os2;
- }
-
- function makeOS2Table(options) {
- return new table.Table('OS/2', [
- {name: 'version', type: 'USHORT', value: 0x0003},
- {name: 'xAvgCharWidth', type: 'SHORT', value: 0},
- {name: 'usWeightClass', type: 'USHORT', value: 0},
- {name: 'usWidthClass', type: 'USHORT', value: 0},
- {name: 'fsType', type: 'USHORT', value: 0},
- {name: 'ySubscriptXSize', type: 'SHORT', value: 650},
- {name: 'ySubscriptYSize', type: 'SHORT', value: 699},
- {name: 'ySubscriptXOffset', type: 'SHORT', value: 0},
- {name: 'ySubscriptYOffset', type: 'SHORT', value: 140},
- {name: 'ySuperscriptXSize', type: 'SHORT', value: 650},
- {name: 'ySuperscriptYSize', type: 'SHORT', value: 699},
- {name: 'ySuperscriptXOffset', type: 'SHORT', value: 0},
- {name: 'ySuperscriptYOffset', type: 'SHORT', value: 479},
- {name: 'yStrikeoutSize', type: 'SHORT', value: 49},
- {name: 'yStrikeoutPosition', type: 'SHORT', value: 258},
- {name: 'sFamilyClass', type: 'SHORT', value: 0},
- {name: 'bFamilyType', type: 'BYTE', value: 0},
- {name: 'bSerifStyle', type: 'BYTE', value: 0},
- {name: 'bWeight', type: 'BYTE', value: 0},
- {name: 'bProportion', type: 'BYTE', value: 0},
- {name: 'bContrast', type: 'BYTE', value: 0},
- {name: 'bStrokeVariation', type: 'BYTE', value: 0},
- {name: 'bArmStyle', type: 'BYTE', value: 0},
- {name: 'bLetterform', type: 'BYTE', value: 0},
- {name: 'bMidline', type: 'BYTE', value: 0},
- {name: 'bXHeight', type: 'BYTE', value: 0},
- {name: 'ulUnicodeRange1', type: 'ULONG', value: 0},
- {name: 'ulUnicodeRange2', type: 'ULONG', value: 0},
- {name: 'ulUnicodeRange3', type: 'ULONG', value: 0},
- {name: 'ulUnicodeRange4', type: 'ULONG', value: 0},
- {name: 'achVendID', type: 'CHARARRAY', value: 'XXXX'},
- {name: 'fsSelection', type: 'USHORT', value: 0},
- {name: 'usFirstCharIndex', type: 'USHORT', value: 0},
- {name: 'usLastCharIndex', type: 'USHORT', value: 0},
- {name: 'sTypoAscender', type: 'SHORT', value: 0},
- {name: 'sTypoDescender', type: 'SHORT', value: 0},
- {name: 'sTypoLineGap', type: 'SHORT', value: 0},
- {name: 'usWinAscent', type: 'USHORT', value: 0},
- {name: 'usWinDescent', type: 'USHORT', value: 0},
- {name: 'ulCodePageRange1', type: 'ULONG', value: 0},
- {name: 'ulCodePageRange2', type: 'ULONG', value: 0},
- {name: 'sxHeight', type: 'SHORT', value: 0},
- {name: 'sCapHeight', type: 'SHORT', value: 0},
- {name: 'usDefaultChar', type: 'USHORT', value: 0},
- {name: 'usBreakChar', type: 'USHORT', value: 0},
- {name: 'usMaxContext', type: 'USHORT', value: 0}
- ], options);
- }
-
- exports.unicodeRanges = unicodeRanges;
- exports.getUnicodeRange = getUnicodeRange;
- exports.parse = parseOS2Table;
- exports.make = makeOS2Table;
-
- },{"../parse":9,"../table":11}],24:[function(_dereq_,module,exports){
- // The `post` table stores additional PostScript information, such as glyph names.
- // https://www.microsoft.com/typography/OTSPEC/post.htm
-
- 'use strict';
-
- var encoding = _dereq_('../encoding');
- var parse = _dereq_('../parse');
- var table = _dereq_('../table');
-
- // Parse the PostScript `post` table
- function parsePostTable(data, start) {
- var post = {};
- var p = new parse.Parser(data, start);
- var i;
- post.version = p.parseVersion();
- post.italicAngle = p.parseFixed();
- post.underlinePosition = p.parseShort();
- post.underlineThickness = p.parseShort();
- post.isFixedPitch = p.parseULong();
- post.minMemType42 = p.parseULong();
- post.maxMemType42 = p.parseULong();
- post.minMemType1 = p.parseULong();
- post.maxMemType1 = p.parseULong();
- switch (post.version) {
- case 1:
- post.names = encoding.standardNames.slice();
- break;
- case 2:
- post.numberOfGlyphs = p.parseUShort();
- post.glyphNameIndex = new Array(post.numberOfGlyphs);
- for (i = 0; i < post.numberOfGlyphs; i++) {
- post.glyphNameIndex[i] = p.parseUShort();
- }
-
- post.names = [];
- for (i = 0; i < post.numberOfGlyphs; i++) {
- if (post.glyphNameIndex[i] >= encoding.standardNames.length) {
- var nameLength = p.parseChar();
- post.names.push(p.parseString(nameLength));
- }
- }
-
- break;
- case 2.5:
- post.numberOfGlyphs = p.parseUShort();
- post.offset = new Array(post.numberOfGlyphs);
- for (i = 0; i < post.numberOfGlyphs; i++) {
- post.offset[i] = p.parseChar();
- }
-
- break;
- }
- return post;
- }
-
- function makePostTable() {
- return new table.Table('post', [
- {name: 'version', type: 'FIXED', value: 0x00030000},
- {name: 'italicAngle', type: 'FIXED', value: 0},
- {name: 'underlinePosition', type: 'FWORD', value: 0},
- {name: 'underlineThickness', type: 'FWORD', value: 0},
- {name: 'isFixedPitch', type: 'ULONG', value: 0},
- {name: 'minMemType42', type: 'ULONG', value: 0},
- {name: 'maxMemType42', type: 'ULONG', value: 0},
- {name: 'minMemType1', type: 'ULONG', value: 0},
- {name: 'maxMemType1', type: 'ULONG', value: 0}
- ]);
- }
-
- exports.parse = parsePostTable;
- exports.make = makePostTable;
-
- },{"../encoding":4,"../parse":9,"../table":11}],25:[function(_dereq_,module,exports){
- // The `sfnt` wrapper provides organization for the tables in the font.
- // It is the top-level data structure in a font.
- // https://www.microsoft.com/typography/OTSPEC/otff.htm
- // Recommendations for creating OpenType Fonts:
- // http://www.microsoft.com/typography/otspec140/recom.htm
-
- 'use strict';
-
- var check = _dereq_('../check');
- var table = _dereq_('../table');
-
- var cmap = _dereq_('./cmap');
- var cff = _dereq_('./cff');
- var head = _dereq_('./head');
- var hhea = _dereq_('./hhea');
- var hmtx = _dereq_('./hmtx');
- var maxp = _dereq_('./maxp');
- var _name = _dereq_('./name');
- var os2 = _dereq_('./os2');
- var post = _dereq_('./post');
-
- function log2(v) {
- return Math.log(v) / Math.log(2) | 0;
- }
-
- function computeCheckSum(bytes) {
- while (bytes.length % 4 !== 0) {
- bytes.push(0);
- }
-
- var sum = 0;
- for (var i = 0; i < bytes.length; i += 4) {
- sum += (bytes[i] << 24) +
- (bytes[i + 1] << 16) +
- (bytes[i + 2] << 8) +
- (bytes[i + 3]);
- }
-
- sum %= Math.pow(2, 32);
- return sum;
- }
-
- function makeTableRecord(tag, checkSum, offset, length) {
- return new table.Table('Table Record', [
- {name: 'tag', type: 'TAG', value: tag !== undefined ? tag : ''},
- {name: 'checkSum', type: 'ULONG', value: checkSum !== undefined ? checkSum : 0},
- {name: 'offset', type: 'ULONG', value: offset !== undefined ? offset : 0},
- {name: 'length', type: 'ULONG', value: length !== undefined ? length : 0}
- ]);
- }
-
- function makeSfntTable(tables) {
- var sfnt = new table.Table('sfnt', [
- {name: 'version', type: 'TAG', value: 'OTTO'},
- {name: 'numTables', type: 'USHORT', value: 0},
- {name: 'searchRange', type: 'USHORT', value: 0},
- {name: 'entrySelector', type: 'USHORT', value: 0},
- {name: 'rangeShift', type: 'USHORT', value: 0}
- ]);
- sfnt.tables = tables;
- sfnt.numTables = tables.length;
- var highestPowerOf2 = Math.pow(2, log2(sfnt.numTables));
- sfnt.searchRange = 16 * highestPowerOf2;
- sfnt.entrySelector = log2(highestPowerOf2);
- sfnt.rangeShift = sfnt.numTables * 16 - sfnt.searchRange;
-
- var recordFields = [];
- var tableFields = [];
-
- var offset = sfnt.sizeOf() + (makeTableRecord().sizeOf() * sfnt.numTables);
- while (offset % 4 !== 0) {
- offset += 1;
- tableFields.push({name: 'padding', type: 'BYTE', value: 0});
- }
-
- for (var i = 0; i < tables.length; i += 1) {
- var t = tables[i];
- check.argument(t.tableName.length === 4, 'Table name' + t.tableName + ' is invalid.');
- var tableLength = t.sizeOf();
- var tableRecord = makeTableRecord(t.tableName, computeCheckSum(t.encode()), offset, tableLength);
- recordFields.push({name: tableRecord.tag + ' Table Record', type: 'TABLE', value: tableRecord});
- tableFields.push({name: t.tableName + ' table', type: 'TABLE', value: t});
- offset += tableLength;
- check.argument(!isNaN(offset), 'Something went wrong calculating the offset.');
- while (offset % 4 !== 0) {
- offset += 1;
- tableFields.push({name: 'padding', type: 'BYTE', value: 0});
- }
- }
-
- // Table records need to be sorted alphabetically.
- recordFields.sort(function(r1, r2) {
- if (r1.value.tag > r2.value.tag) {
- return 1;
- } else {
- return -1;
- }
- });
-
- sfnt.fields = sfnt.fields.concat(recordFields);
- sfnt.fields = sfnt.fields.concat(tableFields);
- return sfnt;
- }
-
- // Get the metrics for a character. If the string has more than one character
- // this function returns metrics for the first available character.
- // You can provide optional fallback metrics if no characters are available.
- function metricsForChar(font, chars, notFoundMetrics) {
- for (var i = 0; i < chars.length; i += 1) {
- var glyphIndex = font.charToGlyphIndex(chars[i]);
- if (glyphIndex > 0) {
- var glyph = font.glyphs.get(glyphIndex);
- return glyph.getMetrics();
- }
- }
-
- return notFoundMetrics;
- }
-
- function average(vs) {
- var sum = 0;
- for (var i = 0; i < vs.length; i += 1) {
- sum += vs[i];
- }
-
- return sum / vs.length;
- }
-
- // Convert the font object to a SFNT data structure.
- // This structure contains all the necessary tables and metadata to create a binary OTF file.
- function fontToSfntTable(font) {
- var xMins = [];
- var yMins = [];
- var xMaxs = [];
- var yMaxs = [];
- var advanceWidths = [];
- var leftSideBearings = [];
- var rightSideBearings = [];
- var firstCharIndex;
- var lastCharIndex = 0;
- var ulUnicodeRange1 = 0;
- var ulUnicodeRange2 = 0;
- var ulUnicodeRange3 = 0;
- var ulUnicodeRange4 = 0;
-
- for (var i = 0; i < font.glyphs.length; i += 1) {
- var glyph = font.glyphs.get(i);
- var unicode = glyph.unicode | 0;
- if (firstCharIndex > unicode || firstCharIndex === null) {
- firstCharIndex = unicode;
- }
-
- if (lastCharIndex < unicode) {
- lastCharIndex = unicode;
- }
-
- var position = os2.getUnicodeRange(unicode);
- if (position < 32) {
- ulUnicodeRange1 |= 1 << position;
- } else if (position < 64) {
- ulUnicodeRange2 |= 1 << position - 32;
- } else if (position < 96) {
- ulUnicodeRange3 |= 1 << position - 64;
- } else if (position < 123) {
- ulUnicodeRange4 |= 1 << position - 96;
- } else {
- throw new Error('Unicode ranges bits > 123 are reserved for internal usage');
- }
- // Skip non-important characters.
- if (glyph.name === '.notdef') continue;
- var metrics = glyph.getMetrics();
- xMins.push(metrics.xMin);
- yMins.push(metrics.yMin);
- xMaxs.push(metrics.xMax);
- yMaxs.push(metrics.yMax);
- leftSideBearings.push(metrics.leftSideBearing);
- rightSideBearings.push(metrics.rightSideBearing);
- advanceWidths.push(glyph.advanceWidth);
- }
-
- var globals = {
- xMin: Math.min.apply(null, xMins),
- yMin: Math.min.apply(null, yMins),
- xMax: Math.max.apply(null, xMaxs),
- yMax: Math.max.apply(null, yMaxs),
- advanceWidthMax: Math.max.apply(null, advanceWidths),
- advanceWidthAvg: average(advanceWidths),
- minLeftSideBearing: Math.min.apply(null, leftSideBearings),
- maxLeftSideBearing: Math.max.apply(null, leftSideBearings),
- minRightSideBearing: Math.min.apply(null, rightSideBearings)
- };
- globals.ascender = font.ascender !== undefined ? font.ascender : globals.yMax;
- globals.descender = font.descender !== undefined ? font.descender : globals.yMin;
-
- var headTable = head.make({
- unitsPerEm: font.unitsPerEm,
- xMin: globals.xMin,
- yMin: globals.yMin,
- xMax: globals.xMax,
- yMax: globals.yMax
- });
-
- var hheaTable = hhea.make({
- ascender: globals.ascender,
- descender: globals.descender,
- advanceWidthMax: globals.advanceWidthMax,
- minLeftSideBearing: globals.minLeftSideBearing,
- minRightSideBearing: globals.minRightSideBearing,
- xMaxExtent: globals.maxLeftSideBearing + (globals.xMax - globals.xMin),
- numberOfHMetrics: font.glyphs.length
- });
-
- var maxpTable = maxp.make(font.glyphs.length);
-
- var os2Table = os2.make({
- xAvgCharWidth: Math.round(globals.advanceWidthAvg),
- usWeightClass: 500, // Medium FIXME Make this configurable
- usWidthClass: 5, // Medium (normal) FIXME Make this configurable
- usFirstCharIndex: firstCharIndex,
- usLastCharIndex: lastCharIndex,
- ulUnicodeRange1: ulUnicodeRange1,
- ulUnicodeRange2: ulUnicodeRange2,
- ulUnicodeRange3: ulUnicodeRange3,
- ulUnicodeRange4: ulUnicodeRange4,
- // See http://typophile.com/node/13081 for more info on vertical metrics.
- // We get metrics for typical characters (such as "x" for xHeight).
- // We provide some fallback characters if characters are unavailable: their
- // ordering was chosen experimentally.
- sTypoAscender: globals.ascender,
- sTypoDescender: globals.descender,
- sTypoLineGap: 0,
- usWinAscent: globals.ascender,
- usWinDescent: -globals.descender,
- sxHeight: metricsForChar(font, 'xyvw', {yMax: 0}).yMax,
- sCapHeight: metricsForChar(font, 'HIKLEFJMNTZBDPRAGOQSUVWXY', globals).yMax,
- usBreakChar: font.hasChar(' ') ? 32 : 0 // Use space as the break character, if available.
- });
-
- var hmtxTable = hmtx.make(font.glyphs);
- var cmapTable = cmap.make(font.glyphs);
-
- var fullName = font.familyName + ' ' + font.styleName;
- var postScriptName = font.familyName.replace(/\s/g, '') + '-' + font.styleName;
- var nameTable = _name.make({
- copyright: font.copyright,
- fontFamily: font.familyName,
- fontSubfamily: font.styleName,
- uniqueID: font.manufacturer + ':' + fullName,
- fullName: fullName,
- version: font.version,
- postScriptName: postScriptName,
- trademark: font.trademark,
- manufacturer: font.manufacturer,
- designer: font.designer,
- description: font.description,
- manufacturerURL: font.manufacturerURL,
- designerURL: font.designerURL,
- license: font.license,
- licenseURL: font.licenseURL,
- preferredFamily: font.familyName,
- preferredSubfamily: font.styleName
- });
- var postTable = post.make();
- var cffTable = cff.make(font.glyphs, {
- version: font.version,
- fullName: fullName,
- familyName: font.familyName,
- weightName: font.styleName,
- postScriptName: postScriptName,
- unitsPerEm: font.unitsPerEm
- });
- // Order the tables according to the the OpenType specification 1.4.
- var tables = [headTable, hheaTable, maxpTable, os2Table, nameTable, cmapTable, postTable, cffTable, hmtxTable];
-
- var sfntTable = makeSfntTable(tables);
-
- // Compute the font's checkSum and store it in head.checkSumAdjustment.
- var bytes = sfntTable.encode();
- var checkSum = computeCheckSum(bytes);
- var tableFields = sfntTable.fields;
- var checkSumAdjusted = false;
- for (i = 0; i < tableFields.length; i += 1) {
- if (tableFields[i].name === 'head table') {
- tableFields[i].value.checkSumAdjustment = 0xB1B0AFBA - checkSum;
- checkSumAdjusted = true;
- break;
- }
- }
-
- if (!checkSumAdjusted) {
- throw new Error('Could not find head table with checkSum to adjust.');
- }
-
- return sfntTable;
- }
-
- exports.computeCheckSum = computeCheckSum;
- exports.make = makeSfntTable;
- exports.fontToTable = fontToSfntTable;
-
- },{"../check":2,"../table":11,"./cff":12,"./cmap":13,"./head":16,"./hhea":17,"./hmtx":18,"./maxp":21,"./name":22,"./os2":23,"./post":24}],26:[function(_dereq_,module,exports){
- // Data types used in the OpenType font file.
- // All OpenType fonts use Motorola-style byte ordering (Big Endian)
-
- /* global WeakMap */
-
- 'use strict';
-
- var check = _dereq_('./check');
-
- var LIMIT16 = 32768; // The limit at which a 16-bit number switches signs == 2^15
- var LIMIT32 = 2147483648; // The limit at which a 32-bit number switches signs == 2 ^ 31
-
- var decode = {};
- var encode = {};
- var sizeOf = {};
-
- // Return a function that always returns the same value.
- function constant(v) {
- return function() {
- return v;
- };
- }
-
- // OpenType data types //////////////////////////////////////////////////////
-
- // Convert an 8-bit unsigned integer to a list of 1 byte.
- encode.BYTE = function(v) {
- check.argument(v >= 0 && v <= 255, 'Byte value should be between 0 and 255.');
- return [v];
- };
-
- sizeOf.BYTE = constant(1);
-
- // Convert a 8-bit signed integer to a list of 1 byte.
- encode.CHAR = function(v) {
- return [v.charCodeAt(0)];
- };
-
- sizeOf.BYTE = constant(1);
-
- // Convert an ASCII string to a list of bytes.
- encode.CHARARRAY = function(v) {
- var b = [];
- for (var i = 0; i < v.length; i += 1) {
- b.push(v.charCodeAt(i));
- }
-
- return b;
- };
-
- sizeOf.CHARARRAY = function(v) {
- return v.length;
- };
-
- // Convert a 16-bit unsigned integer to a list of 2 bytes.
- encode.USHORT = function(v) {
- return [(v >> 8) & 0xFF, v & 0xFF];
- };
-
- sizeOf.USHORT = constant(2);
-
- // Convert a 16-bit signed integer to a list of 2 bytes.
- encode.SHORT = function(v) {
- // Two's complement
- if (v >= LIMIT16) {
- v = -(2 * LIMIT16 - v);
- }
-
- return [(v >> 8) & 0xFF, v & 0xFF];
- };
-
- sizeOf.SHORT = constant(2);
-
- // Convert a 24-bit unsigned integer to a list of 3 bytes.
- encode.UINT24 = function(v) {
- return [(v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF];
- };
-
- sizeOf.UINT24 = constant(3);
-
- // Convert a 32-bit unsigned integer to a list of 4 bytes.
- encode.ULONG = function(v) {
- return [(v >> 24) & 0xFF, (v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF];
- };
-
- sizeOf.ULONG = constant(4);
-
- // Convert a 32-bit unsigned integer to a list of 4 bytes.
- encode.LONG = function(v) {
- // Two's complement
- if (v >= LIMIT32) {
- v = -(2 * LIMIT32 - v);
- }
-
- return [(v >> 24) & 0xFF, (v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF];
- };
-
- sizeOf.LONG = constant(4);
-
- encode.FIXED = encode.ULONG;
- sizeOf.FIXED = sizeOf.ULONG;
-
- encode.FWORD = encode.SHORT;
- sizeOf.FWORD = sizeOf.SHORT;
-
- encode.UFWORD = encode.USHORT;
- sizeOf.UFWORD = sizeOf.USHORT;
-
- // FIXME Implement LONGDATETIME
- encode.LONGDATETIME = function() {
- return [0, 0, 0, 0, 0, 0, 0, 0];
- };
-
- sizeOf.LONGDATETIME = constant(8);
-
- // Convert a 4-char tag to a list of 4 bytes.
- encode.TAG = function(v) {
- check.argument(v.length === 4, 'Tag should be exactly 4 ASCII characters.');
- return [v.charCodeAt(0),
- v.charCodeAt(1),
- v.charCodeAt(2),
- v.charCodeAt(3)];
- };
-
- sizeOf.TAG = constant(4);
-
- // CFF data types ///////////////////////////////////////////////////////////
-
- encode.Card8 = encode.BYTE;
- sizeOf.Card8 = sizeOf.BYTE;
-
- encode.Card16 = encode.USHORT;
- sizeOf.Card16 = sizeOf.USHORT;
-
- encode.OffSize = encode.BYTE;
- sizeOf.OffSize = sizeOf.BYTE;
-
- encode.SID = encode.USHORT;
- sizeOf.SID = sizeOf.USHORT;
-
- // Convert a numeric operand or charstring number to a variable-size list of bytes.
- encode.NUMBER = function(v) {
- if (v >= -107 && v <= 107) {
- return [v + 139];
- } else if (v >= 108 && v <= 1131) {
- v = v - 108;
- return [(v >> 8) + 247, v & 0xFF];
- } else if (v >= -1131 && v <= -108) {
- v = -v - 108;
- return [(v >> 8) + 251, v & 0xFF];
- } else if (v >= -32768 && v <= 32767) {
- return encode.NUMBER16(v);
- } else {
- return encode.NUMBER32(v);
- }
- };
-
- sizeOf.NUMBER = function(v) {
- return encode.NUMBER(v).length;
- };
-
- // Convert a signed number between -32768 and +32767 to a three-byte value.
- // This ensures we always use three bytes, but is not the most compact format.
- encode.NUMBER16 = function(v) {
- return [28, (v >> 8) & 0xFF, v & 0xFF];
- };
-
- sizeOf.NUMBER16 = constant(2);
-
- // Convert a signed number between -(2^31) and +(2^31-1) to a four-byte value.
- // This is useful if you want to be sure you always use four bytes,
- // at the expense of wasting a few bytes for smaller numbers.
- encode.NUMBER32 = function(v) {
- return [29, (v >> 24) & 0xFF, (v >> 16) & 0xFF, (v >> 8) & 0xFF, v & 0xFF];
- };
-
- sizeOf.NUMBER32 = constant(4);
-
- encode.REAL = function(v) {
- var value = v.toString();
-
- // Some numbers use an epsilon to encode the value. (e.g. JavaScript will store 0.0000001 as 1e-7)
- // This code converts it back to a number without the epsilon.
- var m = /\.(\d*?)(?:9{5,20}|0{5,20})\d{0,2}(?:e(.+)|$)/.exec(value);
- if (m) {
- var epsilon = parseFloat('1e' + ((m[2] ? +m[2] : 0) + m[1].length));
- value = (Math.round(v * epsilon) / epsilon).toString();
- }
-
- var nibbles = '';
- var i;
- var ii;
- for (i = 0, ii = value.length; i < ii; i += 1) {
- var c = value[i];
- if (c === 'e') {
- nibbles += value[++i] === '-' ? 'c' : 'b';
- } else if (c === '.') {
- nibbles += 'a';
- } else if (c === '-') {
- nibbles += 'e';
- } else {
- nibbles += c;
- }
- }
-
- nibbles += (nibbles.length & 1) ? 'f' : 'ff';
- var out = [30];
- for (i = 0, ii = nibbles.length; i < ii; i += 2) {
- out.push(parseInt(nibbles.substr(i, 2), 16));
- }
-
- return out;
- };
-
- sizeOf.REAL = function(v) {
- return encode.REAL(v).length;
- };
-
- encode.NAME = encode.CHARARRAY;
- sizeOf.NAME = sizeOf.CHARARRAY;
-
- encode.STRING = encode.CHARARRAY;
- sizeOf.STRING = sizeOf.CHARARRAY;
-
- // Convert a ASCII string to a list of UTF16 bytes.
- encode.UTF16 = function(v) {
- var b = [];
- for (var i = 0; i < v.length; i += 1) {
- b.push(0);
- b.push(v.charCodeAt(i));
- }
-
- return b;
- };
-
- sizeOf.UTF16 = function(v) {
- return v.length * 2;
- };
-
- // Convert a list of values to a CFF INDEX structure.
- // The values should be objects containing name / type / value.
- encode.INDEX = function(l) {
- var i;
- //var offset, offsets, offsetEncoder, encodedOffsets, encodedOffset, data,
- // dataSize, i, v;
- // Because we have to know which data type to use to encode the offsets,
- // we have to go through the values twice: once to encode the data and
- // calculate the offets, then again to encode the offsets using the fitting data type.
- var offset = 1; // First offset is always 1.
- var offsets = [offset];
- var data = [];
- var dataSize = 0;
- for (i = 0; i < l.length; i += 1) {
- var v = encode.OBJECT(l[i]);
- Array.prototype.push.apply(data, v);
- dataSize += v.length;
- offset += v.length;
- offsets.push(offset);
- }
-
- if (data.length === 0) {
- return [0, 0];
- }
-
- var encodedOffsets = [];
- var offSize = (1 + Math.floor(Math.log(dataSize) / Math.log(2)) / 8) | 0;
- var offsetEncoder = [undefined, encode.BYTE, encode.USHORT, encode.UINT24, encode.ULONG][offSize];
- for (i = 0; i < offsets.length; i += 1) {
- var encodedOffset = offsetEncoder(offsets[i]);
- Array.prototype.push.apply(encodedOffsets, encodedOffset);
- }
-
- return Array.prototype.concat(encode.Card16(l.length),
- encode.OffSize(offSize),
- encodedOffsets,
- data);
- };
-
- sizeOf.INDEX = function(v) {
- return encode.INDEX(v).length;
- };
-
- // Convert an object to a CFF DICT structure.
- // The keys should be numeric.
- // The values should be objects containing name / type / value.
- encode.DICT = function(m) {
- var d = [];
- var keys = Object.keys(m);
- var length = keys.length;
-
- for (var i = 0; i < length; i += 1) {
- // Object.keys() return string keys, but our keys are always numeric.
- var k = parseInt(keys[i], 0);
- var v = m[k];
- // Value comes before the key.
- d = d.concat(encode.OPERAND(v.value, v.type));
- d = d.concat(encode.OPERATOR(k));
- }
-
- return d;
- };
-
- sizeOf.DICT = function(m) {
- return encode.DICT(m).length;
- };
-
- encode.OPERATOR = function(v) {
- if (v < 1200) {
- return [v];
- } else {
- return [12, v - 1200];
- }
- };
-
- encode.OPERAND = function(v, type) {
- var d = [];
- if (Array.isArray(type)) {
- for (var i = 0; i < type.length; i += 1) {
- check.argument(v.length === type.length, 'Not enough arguments given for type' + type);
- d = d.concat(encode.OPERAND(v[i], type[i]));
- }
- } else {
- if (type === 'SID') {
- d = d.concat(encode.NUMBER(v));
- } else if (type === 'offset') {
- // We make it easy for ourselves and always encode offsets as
- // 4 bytes. This makes offset calculation for the top dict easier.
- d = d.concat(encode.NUMBER32(v));
- } else if (type === 'number') {
- d = d.concat(encode.NUMBER(v));
- } else if (type === 'real') {
- d = d.concat(encode.REAL(v));
- } else {
- throw new Error('Unknown operand type ' + type);
- // FIXME Add support for booleans
- }
- }
-
- return d;
- };
-
- encode.OP = encode.BYTE;
- sizeOf.OP = sizeOf.BYTE;
-
- // memoize charstring encoding using WeakMap if available
- var wmm = typeof WeakMap === 'function' && new WeakMap();
- // Convert a list of CharString operations to bytes.
- encode.CHARSTRING = function(ops) {
- if (wmm && wmm.has(ops)) {
- return wmm.get(ops);
- }
-
- var d = [];
- var length = ops.length;
-
- for (var i = 0; i < length; i += 1) {
- var op = ops[i];
- d = d.concat(encode[op.type](op.value));
- }
-
- if (wmm) {
- wmm.set(ops, d);
- }
-
- return d;
- };
-
- sizeOf.CHARSTRING = function(ops) {
- return encode.CHARSTRING(ops).length;
- };
-
- // Utility functions ////////////////////////////////////////////////////////
-
- // Convert an object containing name / type / value to bytes.
- encode.OBJECT = function(v) {
- var encodingFunction = encode[v.type];
- check.argument(encodingFunction !== undefined, 'No encoding function for type ' + v.type);
- return encodingFunction(v.value);
- };
-
- // Convert a table object to bytes.
- // A table contains a list of fields containing the metadata (name, type and default value).
- // The table itself has the field values set as attributes.
- encode.TABLE = function(table) {
- var d = [];
- var length = table.fields.length;
-
- for (var i = 0; i < length; i += 1) {
- var field = table.fields[i];
- var encodingFunction = encode[field.type];
- check.argument(encodingFunction !== undefined, 'No encoding function for field type ' + field.type);
- var value = table[field.name];
- if (value === undefined) {
- value = field.value;
- }
-
- var bytes = encodingFunction(value);
- d = d.concat(bytes);
- }
-
- return d;
- };
-
- // Merge in a list of bytes.
- encode.LITERAL = function(v) {
- return v;
- };
-
- sizeOf.LITERAL = function(v) {
- return v.length;
- };
-
- exports.decode = decode;
- exports.encode = encode;
- exports.sizeOf = sizeOf;
-
- },{"./check":2}],27:[function(_dereq_,module,exports){
- /*!
- * Reqwest! A general purpose XHR connection manager
- * license MIT (c) Dustin Diaz 2014
- * https://github.com/ded/reqwest
- */
-
- !function (name, context, definition) {
- if (typeof module != 'undefined' && module.exports) module.exports = definition()
- else if (typeof define == 'function' && define.amd) define(definition)
- else context[name] = definition()
- }('reqwest', this, function () {
-
- var win = window
- , doc = document
- , httpsRe = /^http/
- , protocolRe = /(^\w+):\/\//
- , twoHundo = /^(20\d|1223)$/ //http://stackoverflow.com/questions/10046972/msie-returns-status-code-of-1223-for-ajax-request
- , byTag = 'getElementsByTagName'
- , readyState = 'readyState'
- , contentType = 'Content-Type'
- , requestedWith = 'X-Requested-With'
- , head = doc[byTag]('head')[0]
- , uniqid = 0
- , callbackPrefix = 'reqwest_' + (+new Date())
- , lastValue // data stored by the most recent JSONP callback
- , xmlHttpRequest = 'XMLHttpRequest'
- , xDomainRequest = 'XDomainRequest'
- , noop = function () {}
-
- , isArray = typeof Array.isArray == 'function'
- ? Array.isArray
- : function (a) {
- return a instanceof Array
- }
-
- , defaultHeaders = {
- 'contentType': 'application/x-www-form-urlencoded'
- , 'requestedWith': xmlHttpRequest
- , 'accept': {
- '*': 'text/javascript, text/html, application/xml, text/xml, */*'
- , 'xml': 'application/xml, text/xml'
- , 'html': 'text/html'
- , 'text': 'text/plain'
- , 'json': 'application/json, text/javascript'
- , 'js': 'application/javascript, text/javascript'
- }
- }
-
- , xhr = function(o) {
- // is it x-domain
- if (o['crossOrigin'] === true) {
- var xhr = win[xmlHttpRequest] ? new XMLHttpRequest() : null
- if (xhr && 'withCredentials' in xhr) {
- return xhr
- } else if (win[xDomainRequest]) {
- return new XDomainRequest()
- } else {
- throw new Error('Browser does not support cross-origin requests')
- }
- } else if (win[xmlHttpRequest]) {
- return new XMLHttpRequest()
- } else {
- return new ActiveXObject('Microsoft.XMLHTTP')
- }
- }
- , globalSetupOptions = {
- dataFilter: function (data) {
- return data
- }
- }
-
- function succeed(r) {
- var protocol = protocolRe.exec(r.url);
- protocol = (protocol && protocol[1]) || window.location.protocol;
- return httpsRe.test(protocol) ? twoHundo.test(r.request.status) : !!r.request.response;
- }
-
- function handleReadyState(r, success, error) {
- return function () {
- // use _aborted to mitigate against IE err c00c023f
- // (can't read props on aborted request objects)
- if (r._aborted) return error(r.request)
- if (r._timedOut) return error(r.request, 'Request is aborted: timeout')
- if (r.request && r.request[readyState] == 4) {
- r.request.onreadystatechange = noop
- if (succeed(r)) success(r.request)
- else
- error(r.request)
- }
- }
- }
-
- function setHeaders(http, o) {
- var headers = o['headers'] || {}
- , h
-
- headers['Accept'] = headers['Accept']
- || defaultHeaders['accept'][o['type']]
- || defaultHeaders['accept']['*']
-
- var isAFormData = typeof FormData === 'function' && (o['data'] instanceof FormData);
- // breaks cross-origin requests with legacy browsers
- if (!o['crossOrigin'] && !headers[requestedWith]) headers[requestedWith] = defaultHeaders['requestedWith']
- if (!headers[contentType] && !isAFormData) headers[contentType] = o['contentType'] || defaultHeaders['contentType']
- for (h in headers)
- headers.hasOwnProperty(h) && 'setRequestHeader' in http && http.setRequestHeader(h, headers[h])
- }
-
- function setCredentials(http, o) {
- if (typeof o['withCredentials'] !== 'undefined' && typeof http.withCredentials !== 'undefined') {
- http.withCredentials = !!o['withCredentials']
- }
- }
-
- function generalCallback(data) {
- lastValue = data
- }
-
- function urlappend (url, s) {
- return url + (/\?/.test(url) ? '&' : '?') + s
- }
-
- function handleJsonp(o, fn, err, url) {
- var reqId = uniqid++
- , cbkey = o['jsonpCallback'] || 'callback' // the 'callback' key
- , cbval = o['jsonpCallbackName'] || reqwest.getcallbackPrefix(reqId)
- , cbreg = new RegExp('((^|\\?|&)' + cbkey + ')=([^&]+)')
- , match = url.match(cbreg)
- , script = doc.createElement('script')
- , loaded = 0
- , isIE10 = navigator.userAgent.indexOf('MSIE 10.0') !== -1
-
- if (match) {
- if (match[3] === '?') {
- url = url.replace(cbreg, '$1=' + cbval) // wildcard callback func name
- } else {
- cbval = match[3] // provided callback func name
- }
- } else {
- url = urlappend(url, cbkey + '=' + cbval) // no callback details, add 'em
- }
-
- win[cbval] = generalCallback
-
- script.type = 'text/javascript'
- script.src = url
- script.async = true
- if (typeof script.onreadystatechange !== 'undefined' && !isIE10) {
- // need this for IE due to out-of-order onreadystatechange(), binding script
- // execution to an event listener gives us control over when the script
- // is executed. See http://jaubourg.net/2010/07/loading-script-as-onclick-handler-of.html
- script.htmlFor = script.id = '_reqwest_' + reqId
- }
-
- script.onload = script.onreadystatechange = function () {
- if ((script[readyState] && script[readyState] !== 'complete' && script[readyState] !== 'loaded') || loaded) {
- return false
- }
- script.onload = script.onreadystatechange = null
- script.onclick && script.onclick()
- // Call the user callback with the last value stored and clean up values and scripts.
- fn(lastValue)
- lastValue = undefined
- head.removeChild(script)
- loaded = 1
- }
-
- // Add the script to the DOM head
- head.appendChild(script)
-
- // Enable JSONP timeout
- return {
- abort: function () {
- script.onload = script.onreadystatechange = null
- err({}, 'Request is aborted: timeout', {})
- lastValue = undefined
- head.removeChild(script)
- loaded = 1
- }
- }
- }
-
- function getRequest(fn, err) {
- var o = this.o
- , method = (o['method'] || 'GET').toUpperCase()
- , url = typeof o === 'string' ? o : o['url']
- // convert non-string objects to query-string form unless o['processData'] is false
- , data = (o['processData'] !== false && o['data'] && typeof o['data'] !== 'string')
- ? reqwest.toQueryString(o['data'])
- : (o['data'] || null)
- , http
- , sendWait = false
-
- // if we're working on a GET request and we have data then we should append
- // query string to end of URL and not post data
- if ((o['type'] == 'jsonp' || method == 'GET') && data) {
- url = urlappend(url, data)
- data = null
- }
-
- if (o['type'] == 'jsonp') return handleJsonp(o, fn, err, url)
-
- // get the xhr from the factory if passed
- // if the factory returns null, fall-back to ours
- http = (o.xhr && o.xhr(o)) || xhr(o)
-
- http.open(method, url, o['async'] === false ? false : true)
- setHeaders(http, o)
- setCredentials(http, o)
- if (win[xDomainRequest] && http instanceof win[xDomainRequest]) {
- http.onload = fn
- http.onerror = err
- // NOTE: see
- // http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/30ef3add-767c-4436-b8a9-f1ca19b4812e
- http.onprogress = function() {}
- sendWait = true
- } else {
- http.onreadystatechange = handleReadyState(this, fn, err)
- }
- o['before'] && o['before'](http)
- if (sendWait) {
- setTimeout(function () {
- http.send(data)
- }, 200)
- } else {
- http.send(data)
- }
- return http
- }
-
- function Reqwest(o, fn) {
- this.o = o
- this.fn = fn
-
- init.apply(this, arguments)
- }
-
- function setType(header) {
- // json, javascript, text/plain, text/html, xml
- if (header.match('json')) return 'json'
- if (header.match('javascript')) return 'js'
- if (header.match('text')) return 'html'
- if (header.match('xml')) return 'xml'
- }
-
- function init(o, fn) {
-
- this.url = typeof o == 'string' ? o : o['url']
- this.timeout = null
-
- // whether request has been fulfilled for purpose
- // of tracking the Promises
- this._fulfilled = false
- // success handlers
- this._successHandler = function(){}
- this._fulfillmentHandlers = []
- // error handlers
- this._errorHandlers = []
- // complete (both success and fail) handlers
- this._completeHandlers = []
- this._erred = false
- this._responseArgs = {}
-
- var self = this
-
- fn = fn || function () {}
-
- if (o['timeout']) {
- this.timeout = setTimeout(function () {
- timedOut()
- }, o['timeout'])
- }
-
- if (o['success']) {
- this._successHandler = function () {
- o['success'].apply(o, arguments)
- }
- }
-
- if (o['error']) {
- this._errorHandlers.push(function () {
- o['error'].apply(o, arguments)
- })
- }
-
- if (o['complete']) {
- this._completeHandlers.push(function () {
- o['complete'].apply(o, arguments)
- })
- }
-
- function complete (resp) {
- o['timeout'] && clearTimeout(self.timeout)
- self.timeout = null
- while (self._completeHandlers.length > 0) {
- self._completeHandlers.shift()(resp)
- }
- }
-
- function success (resp) {
- var type = o['type'] || resp && setType(resp.getResponseHeader('Content-Type')) // resp can be undefined in IE
- resp = (type !== 'jsonp') ? self.request : resp
- // use global data filter on response text
- var filteredResponse = globalSetupOptions.dataFilter(resp.responseText, type)
- , r = filteredResponse
- try {
- resp.responseText = r
- } catch (e) {
- // can't assign this in IE<=8, just ignore
- }
- if (r) {
- switch (type) {
- case 'json':
- try {
- resp = win.JSON ? win.JSON.parse(r) : eval('(' + r + ')')
- } catch (err) {
- return error(resp, 'Could not parse JSON in response', err)
- }
- break
- case 'js':
- resp = eval(r)
- break
- case 'html':
- resp = r
- break
- case 'xml':
- resp = resp.responseXML
- && resp.responseXML.parseError // IE trololo
- && resp.responseXML.parseError.errorCode
- && resp.responseXML.parseError.reason
- ? null
- : resp.responseXML
- break
- }
- }
-
- self._responseArgs.resp = resp
- self._fulfilled = true
- fn(resp)
- self._successHandler(resp)
- while (self._fulfillmentHandlers.length > 0) {
- resp = self._fulfillmentHandlers.shift()(resp)
- }
-
- complete(resp)
- }
-
- function timedOut() {
- self._timedOut = true
- self.request.abort()
- }
-
- function error(resp, msg, t) {
- resp = self.request
- self._responseArgs.resp = resp
- self._responseArgs.msg = msg
- self._responseArgs.t = t
- self._erred = true
- while (self._errorHandlers.length > 0) {
- self._errorHandlers.shift()(resp, msg, t)
- }
- complete(resp)
- }
-
- this.request = getRequest.call(this, success, error)
- }
-
- Reqwest.prototype = {
- abort: function () {
- this._aborted = true
- this.request.abort()
- }
-
- , retry: function () {
- init.call(this, this.o, this.fn)
- }
-
- /**
- * Small deviation from the Promises A CommonJs specification
- * http://wiki.commonjs.org/wiki/Promises/A
- */
-
- /**
- * `then` will execute upon successful requests
- */
- , then: function (success, fail) {
- success = success || function () {}
- fail = fail || function () {}
- if (this._fulfilled) {
- this._responseArgs.resp = success(this._responseArgs.resp)
- } else if (this._erred) {
- fail(this._responseArgs.resp, this._responseArgs.msg, this._responseArgs.t)
- } else {
- this._fulfillmentHandlers.push(success)
- this._errorHandlers.push(fail)
- }
- return this
- }
-
- /**
- * `always` will execute whether the request succeeds or fails
- */
- , always: function (fn) {
- if (this._fulfilled || this._erred) {
- fn(this._responseArgs.resp)
- } else {
- this._completeHandlers.push(fn)
- }
- return this
- }
-
- /**
- * `fail` will execute when the request fails
- */
- , fail: function (fn) {
- if (this._erred) {
- fn(this._responseArgs.resp, this._responseArgs.msg, this._responseArgs.t)
- } else {
- this._errorHandlers.push(fn)
- }
- return this
- }
- , 'catch': function (fn) {
- return this.fail(fn)
- }
- }
-
- function reqwest(o, fn) {
- return new Reqwest(o, fn)
- }
-
- // normalize newline variants according to spec -> CRLF
- function normalize(s) {
- return s ? s.replace(/\r?\n/g, '\r\n') : ''
- }
-
- function serial(el, cb) {
- var n = el.name
- , t = el.tagName.toLowerCase()
- , optCb = function (o) {
- // IE gives value="" even where there is no value attribute
- // 'specified' ref: http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-862529273
- if (o && !o['disabled'])
- cb(n, normalize(o['attributes']['value'] && o['attributes']['value']['specified'] ? o['value'] : o['text']))
- }
- , ch, ra, val, i
-
- // don't serialize elements that are disabled or without a name
- if (el.disabled || !n) return
-
- switch (t) {
- case 'input':
- if (!/reset|button|image|file/i.test(el.type)) {
- ch = /checkbox/i.test(el.type)
- ra = /radio/i.test(el.type)
- val = el.value
- // WebKit gives us "" instead of "on" if a checkbox has no value, so correct it here
- ;(!(ch || ra) || el.checked) && cb(n, normalize(ch && val === '' ? 'on' : val))
- }
- break
- case 'textarea':
- cb(n, normalize(el.value))
- break
- case 'select':
- if (el.type.toLowerCase() === 'select-one') {
- optCb(el.selectedIndex >= 0 ? el.options[el.selectedIndex] : null)
- } else {
- for (i = 0; el.length && i < el.length; i++) {
- el.options[i].selected && optCb(el.options[i])
- }
- }
- break
- }
- }
-
- // collect up all form elements found from the passed argument elements all
- // the way down to child elements; pass a '<form>' or form fields.
- // called with 'this'=callback to use for serial() on each element
- function eachFormElement() {
- var cb = this
- , e, i
- , serializeSubtags = function (e, tags) {
- var i, j, fa
- for (i = 0; i < tags.length; i++) {
- fa = e[byTag](tags[i])
- for (j = 0; j < fa.length; j++) serial(fa[j], cb)
- }
- }
-
- for (i = 0; i < arguments.length; i++) {
- e = arguments[i]
- if (/input|select|textarea/i.test(e.tagName)) serial(e, cb)
- serializeSubtags(e, [ 'input', 'select', 'textarea' ])
- }
- }
-
- // standard query string style serialization
- function serializeQueryString() {
- return reqwest.toQueryString(reqwest.serializeArray.apply(null, arguments))
- }
-
- // { 'name': 'value', ... } style serialization
- function serializeHash() {
- var hash = {}
- eachFormElement.apply(function (name, value) {
- if (name in hash) {
- hash[name] && !isArray(hash[name]) && (hash[name] = [hash[name]])
- hash[name].push(value)
- } else hash[name] = value
- }, arguments)
- return hash
- }
-
- // [ { name: 'name', value: 'value' }, ... ] style serialization
- reqwest.serializeArray = function () {
- var arr = []
- eachFormElement.apply(function (name, value) {
- arr.push({name: name, value: value})
- }, arguments)
- return arr
- }
-
- reqwest.serialize = function () {
- if (arguments.length === 0) return ''
- var opt, fn
- , args = Array.prototype.slice.call(arguments, 0)
-
- opt = args.pop()
- opt && opt.nodeType && args.push(opt) && (opt = null)
- opt && (opt = opt.type)
-
- if (opt == 'map') fn = serializeHash
- else if (opt == 'array') fn = reqwest.serializeArray
- else fn = serializeQueryString
-
- return fn.apply(null, args)
- }
-
- reqwest.toQueryString = function (o, trad) {
- var prefix, i
- , traditional = trad || false
- , s = []
- , enc = encodeURIComponent
- , add = function (key, value) {
- // If value is a function, invoke it and return its value
- value = ('function' === typeof value) ? value() : (value == null ? '' : value)
- s[s.length] = enc(key) + '=' + enc(value)
- }
- // If an array was passed in, assume that it is an array of form elements.
- if (isArray(o)) {
- for (i = 0; o && i < o.length; i++) add(o[i]['name'], o[i]['value'])
- } else {
- // If traditional, encode the "old" way (the way 1.3.2 or older
- // did it), otherwise encode params recursively.
- for (prefix in o) {
- if (o.hasOwnProperty(prefix)) buildParams(prefix, o[prefix], traditional, add)
- }
- }
-
- // spaces should be + according to spec
- return s.join('&').replace(/%20/g, '+')
- }
-
- function buildParams(prefix, obj, traditional, add) {
- var name, i, v
- , rbracket = /\[\]$/
-
- if (isArray(obj)) {
- // Serialize array item.
- for (i = 0; obj && i < obj.length; i++) {
- v = obj[i]
- if (traditional || rbracket.test(prefix)) {
- // Treat each array item as a scalar.
- add(prefix, v)
- } else {
- buildParams(prefix + '[' + (typeof v === 'object' ? i : '') + ']', v, traditional, add)
- }
- }
- } else if (obj && obj.toString() === '[object Object]') {
- // Serialize object item.
- for (name in obj) {
- buildParams(prefix + '[' + name + ']', obj[name], traditional, add)
- }
-
- } else {
- // Serialize scalar item.
- add(prefix, obj)
- }
- }
-
- reqwest.getcallbackPrefix = function () {
- return callbackPrefix
- }
-
- // jQuery and Zepto compatibility, differences can be remapped here so you can call
- // .ajax.compat(options, callback)
- reqwest.compat = function (o, fn) {
- if (o) {
- o['type'] && (o['method'] = o['type']) && delete o['type']
- o['dataType'] && (o['type'] = o['dataType'])
- o['jsonpCallback'] && (o['jsonpCallbackName'] = o['jsonpCallback']) && delete o['jsonpCallback']
- o['jsonp'] && (o['jsonpCallback'] = o['jsonp'])
- }
- return new Reqwest(o, fn)
- }
-
- reqwest.ajaxSetup = function (options) {
- options = options || {}
- for (var k in options) {
- globalSetupOptions[k] = options[k]
- }
- }
-
- return reqwest
- });
-
- },{}],28:[function(_dereq_,module,exports){
-
- 'use strict';
-
- var p5 = _dereq_('./core/core');
- _dereq_('./color/p5.Color');
- _dereq_('./core/p5.Element');
- _dereq_('./typography/p5.Font');
- _dereq_('./core/p5.Graphics');
- _dereq_('./core/p5.Renderer2D');
-
- _dereq_('./image/p5.Image');
- _dereq_('./math/p5.Vector');
- _dereq_('./io/p5.TableRow');
- _dereq_('./io/p5.Table');
- _dereq_('./io/p5.XML');
-
- _dereq_('./color/creating_reading');
- _dereq_('./color/setting');
- _dereq_('./core/constants');
- _dereq_('./utilities/conversion');
- _dereq_('./utilities/array_functions');
- _dereq_('./utilities/string_functions');
- _dereq_('./core/environment');
- _dereq_('./image/image');
- _dereq_('./image/loading_displaying');
- _dereq_('./image/pixels');
- _dereq_('./io/files');
- _dereq_('./events/keyboard');
- _dereq_('./events/acceleration'); //john
- _dereq_('./events/mouse');
- _dereq_('./utilities/time_date');
- _dereq_('./events/touch');
- _dereq_('./math/math');
- _dereq_('./math/calculation');
- _dereq_('./math/random');
- _dereq_('./math/noise');
- _dereq_('./math/trigonometry');
- _dereq_('./core/rendering');
- _dereq_('./core/2d_primitives');
-
- _dereq_('./core/attributes');
- _dereq_('./core/curves');
- _dereq_('./core/vertex');
- _dereq_('./core/structure');
- _dereq_('./core/transform');
- _dereq_('./typography/attributes');
- _dereq_('./typography/loading_displaying');
-
- _dereq_('./webgl/p5.RendererGL');
- _dereq_('./webgl/p5.Geometry');
- _dereq_('./webgl/p5.RendererGL.Retained');
- _dereq_('./webgl/p5.RendererGL.Immediate');
- _dereq_('./webgl/primitives');
- _dereq_('./webgl/loading');
- _dereq_('./webgl/p5.Matrix');
- _dereq_('./webgl/material');
- _dereq_('./webgl/light');
- _dereq_('./webgl/shader');
- _dereq_('./webgl/camera');
- _dereq_('./webgl/interaction');
-
- /**
- * _globalInit
- *
- * TODO: ???
- * if sketch is on window
- * assume "global" mode
- * and instantiate p5 automatically
- * otherwise do nothing
- *
- * @return {Undefined}
- */
- var _globalInit = function() {
- if (!window.PHANTOMJS && !window.mocha) {
- // If there is a setup or draw function on the window
- // then instantiate p5 in "global" mode
- if(((window.setup && typeof window.setup === 'function') ||
- (window.draw && typeof window.draw === 'function')) &&
- !p5.instance) {
- new p5();
- }
- }
- };
-
- // TODO: ???
- if (document.readyState === 'complete') {
- _globalInit();
- } else {
- window.addEventListener('load', _globalInit , false);
- }
-
- module.exports = p5;
-
- },{"./color/creating_reading":30,"./color/p5.Color":31,"./color/setting":32,"./core/2d_primitives":33,"./core/attributes":34,"./core/constants":36,"./core/core":37,"./core/curves":38,"./core/environment":39,"./core/p5.Element":41,"./core/p5.Graphics":42,"./core/p5.Renderer2D":44,"./core/rendering":45,"./core/structure":47,"./core/transform":48,"./core/vertex":49,"./events/acceleration":50,"./events/keyboard":51,"./events/mouse":52,"./events/touch":53,"./image/image":55,"./image/loading_displaying":56,"./image/p5.Image":57,"./image/pixels":58,"./io/files":59,"./io/p5.Table":60,"./io/p5.TableRow":61,"./io/p5.XML":62,"./math/calculation":63,"./math/math":64,"./math/noise":65,"./math/p5.Vector":66,"./math/random":68,"./math/trigonometry":69,"./typography/attributes":70,"./typography/loading_displaying":71,"./typography/p5.Font":72,"./utilities/array_functions":73,"./utilities/conversion":74,"./utilities/string_functions":75,"./utilities/time_date":76,"./webgl/camera":77,"./webgl/interaction":78,"./webgl/light":79,"./webgl/loading":80,"./webgl/material":81,"./webgl/p5.Geometry":82,"./webgl/p5.Matrix":83,"./webgl/p5.RendererGL":86,"./webgl/p5.RendererGL.Immediate":84,"./webgl/p5.RendererGL.Retained":85,"./webgl/primitives":87,"./webgl/shader":88}],29:[function(_dereq_,module,exports){
- /**
- * module Conversion
- * submodule Color Conversion
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- /**
- * Conversions adapted from <http://www.easyrgb.com/math.html>.
- *
- * In these functions, hue is always in the range [0,1); all other components
- * are in the range [0,1]. 'Brightness' and 'value' are used interchangeably.
- */
-
- var p5 = _dereq_('../core/core');
- p5.ColorConversion = {};
-
- /**
- * Convert an HSBA array to HSLA.
- */
- p5.ColorConversion._hsbaToHSLA = function(hsba) {
- var hue = hsba[0];
- var sat = hsba[1];
- var val = hsba[2];
-
- // Calculate lightness.
- var li = (2 - sat) * val / 2;
-
- // Convert saturation.
- if (li !== 0) {
- if (li === 1) {
- sat = 0;
- } else if (li < 0.5) {
- sat = sat / (2 - sat);
- } else {
- sat = sat * val / (2 - li * 2);
- }
- }
-
- // Hue and alpha stay the same.
- return [hue, sat, li, hsba[3]];
- };
-
- /**
- * Convert an HSBA array to RGBA.
- */
- p5.ColorConversion._hsbaToRGBA = function(hsba) {
- var hue = hsba[0] * 6; // We will split hue into 6 sectors.
- var sat = hsba[1];
- var val = hsba[2];
-
- var RGBA = [];
-
- if (sat === 0) {
- RGBA = [val, val, val, hsba[3]]; // Return early if grayscale.
- } else {
- var sector = Math.floor(hue);
- var tint1 = val * (1 - sat);
- var tint2 = val * (1 - sat * (hue - sector));
- var tint3 = val * (1 - sat * (1 + sector - hue));
- var red, green, blue;
- if (sector === 1) { // Yellow to green.
- red = tint2;
- green = val;
- blue = tint1;
- } else if (sector === 2) { // Green to cyan.
- red = tint1;
- green = val;
- blue = tint3;
- } else if (sector === 3) { // Cyan to blue.
- red = tint1;
- green = tint2;
- blue = val;
- } else if (sector === 4) { // Blue to magenta.
- red = tint3;
- green = tint1;
- blue = val;
- } else if (sector === 5) { // Magenta to red.
- red = val;
- green = tint1;
- blue = tint2;
- } else { // Red to yellow (sector could be 0 or 6).
- red = val;
- green = tint3;
- blue = tint1;
- }
- RGBA = [red, green, blue, hsba[3]];
- }
-
- return RGBA;
- };
-
- /**
- * Convert an HSLA array to HSBA.
- */
- p5.ColorConversion._hslaToHSBA = function(hsla) {
- var hue = hsla[0];
- var sat = hsla[1];
- var li = hsla[2];
-
- // Calculate brightness.
- var val;
- if (li < 0.5) {
- val = (1 + sat) * li;
- } else {
- val = li + sat - li * sat;
- }
-
- // Convert saturation.
- sat = 2 * (val - li) / val;
-
- // Hue and alpha stay the same.
- return [hue, sat, val, hsla[3]];
- };
-
- /**
- * Convert an HSLA array to RGBA.
- *
- * We need to change basis from HSLA to something that can be more easily be
- * projected onto RGBA. We will choose hue and brightness as our first two
- * components, and pick a convenient third one ('zest') so that we don't need
- * to calculate formal HSBA saturation.
- */
- p5.ColorConversion._hslaToRGBA = function(hsla){
- var hue = hsla[0] * 6; // We will split hue into 6 sectors.
- var sat = hsla[1];
- var li = hsla[2];
-
- var RGBA = [];
-
- if (sat === 0) {
- RGBA = [li, li, li, hsla[3]]; // Return early if grayscale.
- } else {
-
- // Calculate brightness.
- var val;
- if (li < 0.5) {
- val = (1 + sat) * li;
- } else {
- val = li + sat - li * sat;
- }
-
- // Define zest.
- var zest = 2 * li - val;
-
- // Implement projection (project onto green by default).
- var hzvToRGB = function(hue, zest, val) {
- if (hue < 0) { // Hue must wrap to allow projection onto red and blue.
- hue += 6;
- } else if (hue >= 6) {
- hue -= 6;
- }
- if (hue < 1) { // Red to yellow (increasing green).
- return (zest + (val - zest) * hue);
- } else if (hue < 3) { // Yellow to cyan (greatest green).
- return val;
- } else if (hue < 4) { // Cyan to blue (decreasing green).
- return (zest + (val - zest) * (4 - hue));
- } else { // Blue to red (least green).
- return zest;
- }
- };
-
- // Perform projections, offsetting hue as necessary.
- RGBA = [hzvToRGB(hue + 2, zest, val),
- hzvToRGB(hue , zest, val),
- hzvToRGB(hue - 2, zest, val),
- hsla[3]];
- }
-
- return RGBA;
- };
-
- /**
- * Convert an RGBA array to HSBA.
- */
- p5.ColorConversion._rgbaToHSBA = function(rgba) {
- var red = rgba[0];
- var green = rgba[1];
- var blue = rgba[2];
-
- var val = Math.max(red, green, blue);
- var chroma = val - Math.min(red, green, blue);
-
- var hue, sat;
- if (chroma === 0) { // Return early if grayscale.
- hue = 0;
- sat = 0;
- }
- else {
- sat = chroma / val;
- if (red === val) { // Magenta to yellow.
- hue = (green - blue) / chroma;
- } else if (green === val) { // Yellow to cyan.
- hue = 2 + (blue - red) / chroma;
- } else if (blue === val) { // Cyan to magenta.
- hue = 4 + (red - green) / chroma;
- }
- if (hue < 0) { // Confine hue to the interval [0, 1).
- hue += 6;
- } else if (hue >= 6) {
- hue -= 6;
- }
- }
-
- return [hue / 6, sat, val, rgba[3]];
- };
-
- /**
- * Convert an RGBA array to HSLA.
- */
- p5.ColorConversion._rgbaToHSLA = function(rgba) {
- var red = rgba[0];
- var green = rgba[1];
- var blue = rgba[2];
-
- var val = Math.max(red, green, blue);
- var min = Math.min(red, green, blue);
- var li = val + min; // We will halve this later.
- var chroma = val - min;
-
- var hue, sat;
- if (chroma === 0) { // Return early if grayscale.
- hue = 0;
- sat = 0;
- } else {
- if (li < 1) {
- sat = chroma / li;
- } else {
- sat = chroma / (2 - li);
- }
- if (red === val) { // Magenta to yellow.
- hue = (green - blue) / chroma;
- } else if (green === val) { // Yellow to cyan.
- hue = 2 + (blue - red) / chroma;
- } else if (blue === val) { // Cyan to magenta.
- hue = 4 + (red - green) / chroma;
- }
- if (hue < 0) { // Confine hue to the interval [0, 1).
- hue += 6;
- } else if (hue >= 6) {
- hue -= 6;
- }
- }
-
- return [hue / 6, sat, li / 2, rgba[3]];
- };
-
- module.exports = p5.ColorConversion;
-
- },{"../core/core":37}],30:[function(_dereq_,module,exports){
- /**
- * @module Color
- * @submodule Creating & Reading
- * @for p5
- * @requires core
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var constants = _dereq_('../core/constants');
- _dereq_('./p5.Color');
-
- /**
- * Extracts the alpha value from a color or pixel array.
- *
- * @method alpha
- * @param {Object} obj p5.Color object or pixel array
- * @example
- * <div>
- * <code>
- * noStroke();
- * c = color(0, 126, 255, 102);
- * fill(c);
- * rect(15, 15, 35, 70);
- * value = alpha(c); // Sets 'value' to 102
- * fill(value);
- * rect(50, 15, 35, 70);
- * </code>
- * </div>
- *
- * @alt
- * Left half of canvas light blue and right half light charcoal grey.
- * Left half of canvas light purple and right half a royal blue.
- * Left half of canvas salmon pink and the right half white.
- * Yellow rect in middle right of canvas, with 55 pixel width and height.
- * Yellow ellipse in top left canvas, black ellipse in bottom right,both 80x80.
- * Bright fuschia rect in middle of canvas, 60 pixel width and height.
- * Two bright green rects on opposite sides of the canvas, both 45x80.
- * Four blue rects in each corner of the canvas, each are 35x35.
- * Bright sea green rect on left and darker rect on right of canvas, both 45x80.
- * Dark green rect on left and light green rect on right of canvas, both 45x80.
- * Dark blue rect on left and light teal rect on right of canvas, both 45x80.
- * blue rect on left and green on right, both with black outlines & 35x60.
- * salmon pink rect on left and black on right, both 35x60.
- * 4 rects, tan, brown, brownish purple and purple, with white outlines & 20x60.
- * light pastel green rect on left and dark grey rect on right, both 35x60.
- * yellow rect on left and red rect on right, both with black outlines & 35x60.
- * grey canvas
- * deep pink rect on left and grey rect on right, both 35x60.
- */
- p5.prototype.alpha = function(c) {
- if (c instanceof p5.Color || c instanceof Array) {
- return this.color(c)._getAlpha();
- } else {
- throw new Error('Needs p5.Color or pixel array as argument.');
- }
- };
-
- /**
- * Extracts the blue value from a color or pixel array.
- *
- * @method blue
- * @param {Object} obj p5.Color object or pixel array
- * @example
- * <div>
- * <code>
- * c = color(175, 100, 220); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(15, 20, 35, 60); // Draw left rectangle
- *
- * blueValue = blue(c); // Get blue in 'c'
- * print(blueValue); // Prints "220.0"
- * fill(0, 0, blueValue); // Use 'blueValue' in new fill
- * rect(50, 20, 35, 60); // Draw right rectangle
- * </code>
- * </div>
- *
- * @alt
- * Left half of canvas light purple and right half a royal blue.
- *
- */
- p5.prototype.blue = function(c) {
- if (c instanceof p5.Color || c instanceof Array) {
- return this.color(c)._getBlue();
- } else {
- throw new Error('Needs p5.Color or pixel array as argument.');
- }
- };
-
- /**
- * Extracts the HSB brightness value from a color or pixel array.
- *
- * @method brightness
- * @param {Object} color p5.Color object or pixel array
- * @example
- * <div>
- * <code>
- * noStroke();
- * colorMode(HSB, 255);
- * c = color(0, 126, 255);
- * fill(c);
- * rect(15, 20, 35, 60);
- * value = brightness(c); // Sets 'value' to 255
- * fill(value);
- * rect(50, 20, 35, 60);
- * </code>
- * </div>
- *
- * @alt
- * Left half of canvas salmon pink and the right half white.
- *
- */
- p5.prototype.brightness = function(c) {
- if (c instanceof p5.Color || c instanceof Array) {
- return this.color(c)._getBrightness();
- } else {
- throw new Error('Needs p5.Color or pixel array as argument.');
- }
- };
-
- /**
- * Creates colors for storing in variables of the color datatype. The
- * parameters are interpreted as RGB or HSB values depending on the
- * current colorMode(). The default mode is RGB values from 0 to 255
- * and, therefore, the function call color(255, 204, 0) will return a
- * bright yellow color.
- * <br><br>
- * Note that if only one value is provided to color(), it will be interpreted
- * as a grayscale value. Add a second value, and it will be used for alpha
- * transparency. When three values are specified, they are interpreted as
- * either RGB or HSB values. Adding a fourth value applies alpha
- * transparency. If a single string parameter is provided it will be
- * interpreted as a CSS-compatible color string.
- *
- * Colors are stored as Numbers or Arrays.
- *
- * @method color
- * @param {Number|String} gray number specifying value between white
- * and black.
- * @param {Number} [alpha] alpha value relative to current color range
- * (default is 0-255)
- * @return {Array} resulting color
- *
- * @example
- * <div>
- * <code>
- * var c = color(255, 204, 0); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * noStroke(); // Don't draw a stroke around shapes
- * rect(30, 20, 55, 55); // Draw rectangle
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var c = color(255, 204, 0); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * noStroke(); // Don't draw a stroke around shapes
- * ellipse(25, 25, 80, 80); // Draw left circle
- *
- * // Using only one value with color()
- * // generates a grayscale value.
- * var c = color(65); // Update 'c' with grayscale value
- * fill(c); // Use updated 'c' as fill color
- * ellipse(75, 75, 80, 80); // Draw right circle
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // Named SVG & CSS colors may be used,
- * var c = color('magenta');
- * fill(c); // Use 'c' as fill color
- * noStroke(); // Don't draw a stroke around shapes
- * rect(20, 20, 60, 60); // Draw rectangle
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // as can hex color codes:
- * noStroke(); // Don't draw a stroke around shapes
- * var c = color('#0f0');
- * fill(c); // Use 'c' as fill color
- * rect(0, 10, 45, 80); // Draw rectangle
- *
- * c = color('#00ff00');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 45, 80); // Draw rectangle
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // RGB and RGBA color strings are also supported:
- * // these all set to the same color (solid blue)
- * var c;
- * noStroke(); // Don't draw a stroke around shapes
- * c = color('rgb(0,0,255)');
- * fill(c); // Use 'c' as fill color
- * rect(10, 10, 35, 35); // Draw rectangle
- *
- * c = color('rgb(0%, 0%, 100%)');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 35, 35); // Draw rectangle
- *
- * c = color('rgba(0, 0, 255, 1)');
- * fill(c); // Use updated 'c' as fill color
- * rect(10, 55, 35, 35); // Draw rectangle
- *
- * c = color('rgba(0%, 0%, 100%, 1)');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 55, 35, 35); // Draw rectangle
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // HSL color is also supported and can be specified
- * // by value
- * var c;
- * noStroke(); // Don't draw a stroke around shapes
- * c = color('hsl(160, 100%, 50%)');
- * fill(c); // Use 'c' as fill color
- * rect(0, 10, 45, 80); // Draw rectangle
- *
- * c = color('hsla(160, 100%, 50%, 0.5)');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 45, 80); // Draw rectangle
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // HSB color is also supported and can be specified
- * // by value
- * var c;
- * noStroke(); // Don't draw a stroke around shapes
- * c = color('hsb(160, 100%, 50%)');
- * fill(c); // Use 'c' as fill color
- * rect(0, 10, 45, 80); // Draw rectangle
- *
- * c = color('hsba(160, 100%, 50%, 0.5)');
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 45, 80); // Draw rectangle
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var c; // Declare color 'c'
- * noStroke(); // Don't draw a stroke around shapes
- *
- * // If no colorMode is specified, then the
- * // default of RGB with scale of 0-255 is used.
- * c = color(50, 55, 100); // Create a color for 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(0, 10, 45, 80); // Draw left rect
- *
- * colorMode(HSB, 100); // Use HSB with scale of 0-100
- * c = color(50, 55, 100); // Update 'c' with new color
- * fill(c); // Use updated 'c' as fill color
- * rect(55, 10, 45, 80); // Draw right rect
- * </code>
- * </div>
- *
- * @alt
- * Yellow rect in middle right of canvas, with 55 pixel width and height.
- * Yellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.
- * Bright fuschia rect in middle of canvas, 60 pixel width and height.
- * Two bright green rects on opposite sides of the canvas, both 45x80.
- * Four blue rects in each corner of the canvas, each are 35x35.
- * Bright sea green rect on left and darker rect on right of canvas, both 45x80.
- * Dark green rect on left and lighter green rect on right of canvas, both 45x80.
- * Dark blue rect on left and light teal rect on right of canvas, both 45x80.
- *
- */
-
- /**
- * @method color
- * @param {Number|String} v1 red or hue value relative to
- * the current color range, or a color string
- * @param {Number} v2 green or saturation value
- * relative to the current color range
- * @param {Number} v3 blue or brightness value
- * relative to the current color range
- * @param {Number} [alpha]
- */
-
- p5.prototype.color = function() {
- if (arguments[0] instanceof p5.Color) {
- return arguments[0]; // Do nothing if argument is already a color object.
- } else if (arguments[0] instanceof Array) {
- if (this instanceof p5.Renderer) {
- return new p5.Color(this, arguments[0]);
- } else {
- return new p5.Color(this._renderer, arguments[0]);
- }
- } else {
- if (this instanceof p5.Renderer) {
- return new p5.Color(this, arguments);
- } else {
- return new p5.Color(this._renderer, arguments);
- }
- }
- };
-
- /**
- * Extracts the green value from a color or pixel array.
- *
- * @method green
- * @param {Object} color p5.Color object or pixel array
- * @example
- * <div>
- * <code>
- * c = color(20, 75, 200); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(15, 20, 35, 60); // Draw left rectangle
- *
- * greenValue = green(c); // Get green in 'c'
- * print(greenValue); // Print "75.0"
- * fill(0, greenValue, 0); // Use 'greenValue' in new fill
- * rect(50, 20, 35, 60); // Draw right rectangle
- * </code>
- * </div>
- *
- * @alt
- * blue rect on left and green on right, both with black outlines & 35x60.
- *
- */
-
- p5.prototype.green = function(c) {
- if (c instanceof p5.Color || c instanceof Array) {
- return this.color(c)._getGreen();
- } else {
- throw new Error('Needs p5.Color or pixel array as argument.');
- }
- };
-
- /**
- * Extracts the hue value from a color or pixel array.
- *
- * Hue exists in both HSB and HSL. This function will return the
- * HSB-normalized hue when supplied with an HSB color object (or when supplied
- * with a pixel array while the color mode is HSB), but will default to the
- * HSL-normalized hue otherwise. (The values will only be different if the
- * maximum hue setting for each system is different.)
- *
- * @method hue
- * @param {Object} color p5.Color object or pixel array
- * @example
- * <div>
- * <code>
- * noStroke();
- * colorMode(HSB, 255);
- * c = color(0, 126, 255);
- * fill(c);
- * rect(15, 20, 35, 60);
- * value = hue(c); // Sets 'value' to "0"
- * fill(value);
- * rect(50, 20, 35, 60);
- * </code>
- * </div>
- *
- * @alt
- * salmon pink rect on left and black on right, both 35x60.
- *
- */
-
- p5.prototype.hue = function(c) {
- if (c instanceof p5.Color || c instanceof Array) {
- return this.color(c)._getHue();
- } else {
- throw new Error('Needs p5.Color or pixel array as argument.');
- }
- };
-
- /**
- * Blends two colors to find a third color somewhere between them. The amt
- * parameter is the amount to interpolate between the two values where 0.0
- * equal to the first color, 0.1 is very near the first color, 0.5 is halfway
- * in between, etc. An amount below 0 will be treated as 0. Likewise, amounts
- * above 1 will be capped at 1. This is different from the behavior of lerp(),
- * but necessary because otherwise numbers outside the range will produce
- * strange and unexpected colors.
- * <br><br>
- * The way that colours are interpolated depends on the current color mode.
- *
- * @method lerpColor
- * @param {Array/Number} c1 interpolate from this color
- * @param {Array/Number} c2 interpolate to this color
- * @param {Number} amt number between 0 and 1
- * @return {Array/Number} interpolated color
- * @example
- * <div>
- * <code>
- * colorMode(RGB);
- * stroke(255);
- * background(51);
- * from = color(218, 165, 32);
- * to = color(72, 61, 139);
- * colorMode(RGB); // Try changing to HSB.
- * interA = lerpColor(from, to, .33);
- * interB = lerpColor(from, to, .66);
- * fill(from);
- * rect(10, 20, 20, 60);
- * fill(interA);
- * rect(30, 20, 20, 60);
- * fill(interB);
- * rect(50, 20, 20, 60);
- * fill(to);
- * rect(70, 20, 20, 60);
- * </code>
- * </div>
- *
- * @alt
- * 4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60
- *
- */
-
- p5.prototype.lerpColor = function(c1, c2, amt) {
- var mode = this._renderer._colorMode;
- var maxes = this._renderer._colorMaxes;
- var l0, l1, l2, l3;
- var fromArray, toArray;
-
- if (mode === constants.RGB) {
- fromArray = c1.levels.map(function(level) {
- return level / 255;
- });
- toArray = c2.levels.map(function(level) {
- return level / 255;
- });
- } else if (mode === constants.HSB) {
- c1._getBrightness(); // Cache hsba so it definitely exists.
- c2._getBrightness();
- fromArray = c1.hsba;
- toArray = c2.hsba;
- } else if (mode === constants.HSL) {
- c1._getLightness(); // Cache hsla so it definitely exists.
- c2._getLightness();
- fromArray = c1.hsla;
- toArray = c2.hsla;
- } else {
- throw new Error (mode + 'cannot be used for interpolation.');
- }
-
- // Prevent extrapolation.
- amt = Math.max(Math.min(amt, 1), 0);
-
- // Perform interpolation.
- l0 = this.lerp(fromArray[0], toArray[0], amt);
- l1 = this.lerp(fromArray[1], toArray[1], amt);
- l2 = this.lerp(fromArray[2], toArray[2], amt);
- l3 = this.lerp(fromArray[3], toArray[3], amt);
-
- // Scale components.
- l0 *= maxes[mode][0];
- l1 *= maxes[mode][1];
- l2 *= maxes[mode][2];
- l3 *= maxes[mode][3];
-
- return this.color(l0, l1, l2, l3);
- };
-
- /**
- * Extracts the HSL lightness value from a color or pixel array.
- *
- * @method lightness
- * @param {Object} color p5.Color object or pixel array
- * @example
- * <div>
- * <code>
- * noStroke();
- * colorMode(HSL);
- * c = color(156, 100, 50, 1);
- * fill(c);
- * rect(15, 20, 35, 60);
- * value = lightness(c); // Sets 'value' to 50
- * fill(value);
- * rect(50, 20, 35, 60);
- * </code>
- * </div>
- *
- * @alt
- * light pastel green rect on left and dark grey rect on right, both 35x60.
- *
- */
- p5.prototype.lightness = function(c) {
- if (c instanceof p5.Color || c instanceof Array) {
- return this.color(c)._getLightness();
- } else {
- throw new Error('Needs p5.Color or pixel array as argument.');
- }
- };
-
- /**
- * Extracts the red value from a color or pixel array.
- *
- * @method red
- * @param {Object} obj p5.Color object or pixel array
- * @example
- * <div>
- * <code>
- * c = color(255, 204, 0); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(15, 20, 35, 60); // Draw left rectangle
- *
- * redValue = red(c); // Get red in 'c'
- * print(redValue); // Print "255.0"
- * fill(redValue, 0, 0); // Use 'redValue' in new fill
- * rect(50, 20, 35, 60); // Draw right rectangle
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * colorMode(RGB, 255);
- * var c = color(127, 255, 0);
- * colorMode(RGB, 1);
- * var myColor = red(c);
- * print(myColor);
- * </code>
- * </div>
- *
- * @alt
- * yellow rect on left and red rect on right, both with black outlines and 35x60.
- * grey canvas
- */
- p5.prototype.red = function(c) {
- if (c instanceof p5.Color || c instanceof Array) {
- return this.color(c)._getRed();
- } else {
- throw new Error('Needs p5.Color or pixel array as argument.');
- }
- };
-
- /**
- * Extracts the saturation value from a color or pixel array.
- *
- * Saturation is scaled differently in HSB and HSL. This function will return
- * the HSB saturation when supplied with an HSB color object (or when supplied
- * with a pixel array while the color mode is HSB), but will default to the
- * HSL saturation otherwise.
- *
- * @method saturation
- * @param {Object} color p5.Color object or pixel array
- * @example
- * <div>
- * <code>
- * noStroke();
- * colorMode(HSB, 255);
- * c = color(0, 126, 255);
- * fill(c);
- * rect(15, 20, 35, 60);
- * value = saturation(c); // Sets 'value' to 126
- * fill(value);
- * rect(50, 20, 35, 60);
- * </code>
- * </div>
- *
- * @alt
- *deep pink rect on left and grey rect on right, both 35x60.
- *
- */
-
- p5.prototype.saturation = function(c) {
- if (c instanceof p5.Color || c instanceof Array) {
- return this.color(c)._getSaturation();
- } else {
- throw new Error('Needs p5.Color or pixel array as argument.');
- }
- };
-
- module.exports = p5;
-
- },{"../core/constants":36,"../core/core":37,"./p5.Color":31}],31:[function(_dereq_,module,exports){
- /**
- * @module Color
- * @submodule Creating & Reading
- * @for p5
- * @requires core
- * @requires constants
- * @requires color_conversion
- */
-
- var p5 = _dereq_('../core/core');
- var constants = _dereq_('../core/constants');
- var color_conversion = _dereq_('./color_conversion');
-
- /**
- * We define colors to be immutable objects. Each color stores the color mode
- * and level maxes that applied at the time of its construction. These are
- * used to interpret the input arguments and to format the output e.g. when
- * saturation() is requested.
- *
- * Internally we store an array representing the ideal RGBA values in floating
- * point form, normalized from 0 to 1. From this we calculate the closest
- * screen color (RGBA levels from 0 to 255) and expose this to the renderer.
- *
- * We also cache normalized, floating point components of the color in various
- * representations as they are calculated. This is done to prevent repeating a
- * conversion that has already been performed.
- *
- * @class p5.Color
- * @constructor
- */
- p5.Color = function(renderer, vals) {
-
- // Record color mode and maxes at time of construction.
- this.mode = renderer._colorMode;
- this.maxes = renderer._colorMaxes;
-
- // Calculate normalized RGBA values.
- if (this.mode !== constants.RGB &&
- this.mode !== constants.HSL &&
- this.mode !== constants.HSB) {
- throw new Error(this.mode + ' is an invalid colorMode.');
- } else {
- this._array = p5.Color._parseInputs.apply(renderer, vals);
- }
-
- // Expose closest screen color.
- this.levels = this._array.map(function(level) {
- return Math.round(level * 255);
- });
-
- return this;
- };
-
- p5.Color.prototype.toString = function() {
- var a = this.levels;
- var alpha = this._array[3]; // String representation uses normalized alpha.
- return 'rgba('+a[0]+','+a[1]+','+a[2]+','+ alpha +')';
- };
-
- p5.Color.prototype._getAlpha = function() {
- return this._array[3] * this.maxes[this.mode][3];
- };
-
- p5.Color.prototype._getBlue = function() {
- return this._array[2] * this.maxes[constants.RGB][2];
- };
-
- p5.Color.prototype._getBrightness = function() {
- if (!this.hsba) {
- this.hsba = color_conversion._rgbaToHSBA(this._array);
- }
- return this.hsba[2] * this.maxes[constants.HSB][2];
- };
-
- p5.Color.prototype._getGreen = function() {
- return this._array[1] * this.maxes[constants.RGB][1];
- };
-
- /**
- * Hue is the same in HSB and HSL, but the maximum value may be different.
- * This function will return the HSB-normalized saturation when supplied with
- * an HSB color object, but will default to the HSL-normalized saturation
- * otherwise.
- */
- p5.Color.prototype._getHue = function() {
- if (this.mode === constants.HSB) {
- if (!this.hsba) {
- this.hsba = color_conversion._rgbaToHSBA(this._array);
- }
- return this.hsba[0] * this.maxes[constants.HSB][0];
- } else {
- if (!this.hsla) {
- this.hsla = color_conversion._rgbaToHSLA(this._array);
- }
- return this.hsla[0] * this.maxes[constants.HSL][0];
- }
- };
-
- p5.Color.prototype._getLightness = function() {
- if (!this.hsla) {
- this.hsla = color_conversion._rgbaToHSLA(this._array);
- }
- return this.hsla[2] * this.maxes[constants.HSL][2];
- };
-
- p5.Color.prototype._getRed = function() {
- return this._array[0] * this.maxes[constants.RGB][0];
- };
-
- /**
- * Saturation is scaled differently in HSB and HSL. This function will return
- * the HSB saturation when supplied with an HSB color object, but will default
- * to the HSL saturation otherwise.
- */
- p5.Color.prototype._getSaturation = function() {
- if (this.mode === constants.HSB) {
- if (!this.hsba) {
- this.hsba = color_conversion._rgbaToHSBA(this._array);
- }
- return this.hsba[1] * this.maxes[constants.HSB][1];
- } else {
- if (!this.hsla) {
- this.hsla = color_conversion._rgbaToHSLA(this._array);
- }
- return this.hsla[1] * this.maxes[constants.HSL][1];
- }
- };
-
- /**
- * CSS named colors.
- */
- var namedColors = {
- aliceblue: '#f0f8ff',
- antiquewhite: '#faebd7',
- aqua: '#00ffff',
- aquamarine: '#7fffd4',
- azure: '#f0ffff',
- beige: '#f5f5dc',
- bisque: '#ffe4c4',
- black: '#000000',
- blanchedalmond: '#ffebcd',
- blue: '#0000ff',
- blueviolet: '#8a2be2',
- brown: '#a52a2a',
- burlywood: '#deb887',
- cadetblue: '#5f9ea0',
- chartreuse: '#7fff00',
- chocolate: '#d2691e',
- coral: '#ff7f50',
- cornflowerblue: '#6495ed',
- cornsilk: '#fff8dc',
- crimson: '#dc143c',
- cyan: '#00ffff',
- darkblue: '#00008b',
- darkcyan: '#008b8b',
- darkgoldenrod: '#b8860b',
- darkgray: '#a9a9a9',
- darkgreen: '#006400',
- darkgrey: '#a9a9a9',
- darkkhaki: '#bdb76b',
- darkmagenta: '#8b008b',
- darkolivegreen: '#556b2f',
- darkorange: '#ff8c00',
- darkorchid: '#9932cc',
- darkred: '#8b0000',
- darksalmon: '#e9967a',
- darkseagreen: '#8fbc8f',
- darkslateblue: '#483d8b',
- darkslategray: '#2f4f4f',
- darkslategrey: '#2f4f4f',
- darkturquoise: '#00ced1',
- darkviolet: '#9400d3',
- deeppink: '#ff1493',
- deepskyblue: '#00bfff',
- dimgray: '#696969',
- dimgrey: '#696969',
- dodgerblue: '#1e90ff',
- firebrick: '#b22222',
- floralwhite: '#fffaf0',
- forestgreen: '#228b22',
- fuchsia: '#ff00ff',
- gainsboro: '#dcdcdc',
- ghostwhite: '#f8f8ff',
- gold: '#ffd700',
- goldenrod: '#daa520',
- gray: '#808080',
- green: '#008000',
- greenyellow: '#adff2f',
- grey: '#808080',
- honeydew: '#f0fff0',
- hotpink: '#ff69b4',
- indianred: '#cd5c5c',
- indigo: '#4b0082',
- ivory: '#fffff0',
- khaki: '#f0e68c',
- lavender: '#e6e6fa',
- lavenderblush: '#fff0f5',
- lawngreen: '#7cfc00',
- lemonchiffon: '#fffacd',
- lightblue: '#add8e6',
- lightcoral: '#f08080',
- lightcyan: '#e0ffff',
- lightgoldenrodyellow: '#fafad2',
- lightgray: '#d3d3d3',
- lightgreen: '#90ee90',
- lightgrey: '#d3d3d3',
- lightpink: '#ffb6c1',
- lightsalmon: '#ffa07a',
- lightseagreen: '#20b2aa',
- lightskyblue: '#87cefa',
- lightslategray: '#778899',
- lightslategrey: '#778899',
- lightsteelblue: '#b0c4de',
- lightyellow: '#ffffe0',
- lime: '#00ff00',
- limegreen: '#32cd32',
- linen: '#faf0e6',
- magenta: '#ff00ff',
- maroon: '#800000',
- mediumaquamarine: '#66cdaa',
- mediumblue: '#0000cd',
- mediumorchid: '#ba55d3',
- mediumpurple: '#9370db',
- mediumseagreen: '#3cb371',
- mediumslateblue: '#7b68ee',
- mediumspringgreen: '#00fa9a',
- mediumturquoise: '#48d1cc',
- mediumvioletred: '#c71585',
- midnightblue: '#191970',
- mintcream: '#f5fffa',
- mistyrose: '#ffe4e1',
- moccasin: '#ffe4b5',
- navajowhite: '#ffdead',
- navy: '#000080',
- oldlace: '#fdf5e6',
- olive: '#808000',
- olivedrab: '#6b8e23',
- orange: '#ffa500',
- orangered: '#ff4500',
- orchid: '#da70d6',
- palegoldenrod: '#eee8aa',
- palegreen: '#98fb98',
- paleturquoise: '#afeeee',
- palevioletred: '#db7093',
- papayawhip: '#ffefd5',
- peachpuff: '#ffdab9',
- peru: '#cd853f',
- pink: '#ffc0cb',
- plum: '#dda0dd',
- powderblue: '#b0e0e6',
- purple: '#800080',
- red: '#ff0000',
- rosybrown: '#bc8f8f',
- royalblue: '#4169e1',
- saddlebrown: '#8b4513',
- salmon: '#fa8072',
- sandybrown: '#f4a460',
- seagreen: '#2e8b57',
- seashell: '#fff5ee',
- sienna: '#a0522d',
- silver: '#c0c0c0',
- skyblue: '#87ceeb',
- slateblue: '#6a5acd',
- slategray: '#708090',
- slategrey: '#708090',
- snow: '#fffafa',
- springgreen: '#00ff7f',
- steelblue: '#4682b4',
- tan: '#d2b48c',
- teal: '#008080',
- thistle: '#d8bfd8',
- tomato: '#ff6347',
- turquoise: '#40e0d0',
- violet: '#ee82ee',
- wheat: '#f5deb3',
- white: '#ffffff',
- whitesmoke: '#f5f5f5',
- yellow: '#ffff00',
- yellowgreen: '#9acd32'
- };
-
- /**
- * These regular expressions are used to build up the patterns for matching
- * viable CSS color strings: fragmenting the regexes in this way increases the
- * legibility and comprehensibility of the code.
- *
- * Note that RGB values of .9 are not parsed by IE, but are supported here for
- * color string consistency.
- */
- var WHITESPACE = /\s*/; // Match zero or more whitespace characters.
- var INTEGER = /(\d{1,3})/; // Match integers: 79, 255, etc.
- var DECIMAL = /((?:\d+(?:\.\d+)?)|(?:\.\d+))/; // Match 129.6, 79, .9, etc.
- var PERCENT = new RegExp(DECIMAL.source + '%'); // Match 12.9%, 79%, .9%, etc.
-
- /**
- * Full color string patterns. The capture groups are necessary.
- */
- var colorPatterns = {
- // Match colors in format #XXX, e.g. #416.
- HEX3: /^#([a-f0-9])([a-f0-9])([a-f0-9])$/i,
-
- // Match colors in format #XXXXXX, e.g. #b4d455.
- HEX6: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
-
- // Match colors in format rgb(R, G, B), e.g. rgb(255, 0, 128).
- RGB: new RegExp([
- '^rgb\\(',
- INTEGER.source,
- ',',
- INTEGER.source,
- ',',
- INTEGER.source,
- '\\)$'
- ].join(WHITESPACE.source), 'i'),
-
- // Match colors in format rgb(R%, G%, B%), e.g. rgb(100%, 0%, 28.9%).
- RGB_PERCENT: new RegExp([
- '^rgb\\(',
- PERCENT.source,
- ',',
- PERCENT.source,
- ',',
- PERCENT.source,
- '\\)$'
- ].join(WHITESPACE.source), 'i'),
-
- // Match colors in format rgb(R, G, B, A), e.g. rgb(255, 0, 128, 0.25).
- RGBA: new RegExp([
- '^rgba\\(',
- INTEGER.source,
- ',',
- INTEGER.source,
- ',',
- INTEGER.source,
- ',',
- DECIMAL.source,
- '\\)$'
- ].join(WHITESPACE.source), 'i'),
-
- // Match colors in format rgb(R%, G%, B%, A), e.g. rgb(100%, 0%, 28.9%, 0.5).
- RGBA_PERCENT: new RegExp([
- '^rgba\\(',
- PERCENT.source,
- ',',
- PERCENT.source,
- ',',
- PERCENT.source,
- ',',
- DECIMAL.source,
- '\\)$'
- ].join(WHITESPACE.source), 'i'),
-
- // Match colors in format hsla(H, S%, L%), e.g. hsl(100, 40%, 28.9%).
- HSL: new RegExp([
- '^hsl\\(',
- INTEGER.source,
- ',',
- PERCENT.source,
- ',',
- PERCENT.source,
- '\\)$'
- ].join(WHITESPACE.source), 'i'),
-
- // Match colors in format hsla(H, S%, L%, A), e.g. hsla(100, 40%, 28.9%, 0.5).
- HSLA: new RegExp([
- '^hsla\\(',
- INTEGER.source,
- ',',
- PERCENT.source,
- ',',
- PERCENT.source,
- ',',
- DECIMAL.source,
- '\\)$'
- ].join(WHITESPACE.source), 'i'),
-
- // Match colors in format hsb(H, S%, B%), e.g. hsb(100, 40%, 28.9%).
- HSB: new RegExp([
- '^hsb\\(',
- INTEGER.source,
- ',',
- PERCENT.source,
- ',',
- PERCENT.source,
- '\\)$'
- ].join(WHITESPACE.source), 'i'),
-
- // Match colors in format hsba(H, S%, B%, A), e.g. hsba(100, 40%, 28.9%, 0.5).
- HSBA: new RegExp([
- '^hsba\\(',
- INTEGER.source,
- ',',
- PERCENT.source,
- ',',
- PERCENT.source,
- ',',
- DECIMAL.source,
- '\\)$'
- ].join(WHITESPACE.source), 'i')
- };
-
- /**
- * For a number of different inputs, returns a color formatted as [r, g, b, a]
- * arrays, with each component normalized between 0 and 1.
- *
- * @param {Array-like} args An 'array-like' object that represents a list of
- * arguments
- * @return {Array} a color formatted as [r, g, b, a]
- * Example:
- * input ==> output
- * g ==> [g, g, g, 255]
- * g,a ==> [g, g, g, a]
- * r, g, b ==> [r, g, b, 255]
- * r, g, b, a ==> [r, g, b, a]
- * [g] ==> [g, g, g, 255]
- * [g, a] ==> [g, g, g, a]
- * [r, g, b] ==> [r, g, b, 255]
- * [r, g, b, a] ==> [r, g, b, a]
- * @example
- * <div>
- * <code>
- * // todo
- * </code>
- * </div>
- *
- * @alt
- * //todo
- *
- */
- p5.Color._parseInputs = function() {
- var numArgs = arguments.length;
- var mode = this._colorMode;
- var maxes = this._colorMaxes;
- var results = [];
-
- if (numArgs >= 3) { // Argument is a list of component values.
-
- results[0] = arguments[0] / maxes[mode][0];
- results[1] = arguments[1] / maxes[mode][1];
- results[2] = arguments[2] / maxes[mode][2];
-
- // Alpha may be undefined, so default it to 100%.
- if (typeof arguments[3] === 'number') {
- results[3] = arguments[3] / maxes[mode][3];
- } else {
- results[3] = 1;
- }
-
- // Constrain components to the range [0,1].
- results = results.map(function(value) {
- return Math.max(Math.min(value, 1), 0);
- });
-
- // Convert to RGBA and return.
- if (mode === constants.HSL) {
- return color_conversion._hslaToRGBA(results);
- } else if (mode === constants.HSB) {
- return color_conversion._hsbaToRGBA(results);
- } else {
- return results;
- }
-
- } else if (numArgs === 1 && typeof arguments[0] === 'string') {
-
- var str = arguments[0].trim().toLowerCase();
-
- // Return if string is a named colour.
- if (namedColors[str]) {
- return p5.Color._parseInputs.apply(this, [namedColors[str]]);
- }
-
- // Try RGBA pattern matching.
- if (colorPatterns.HEX3.test(str)) { // #rgb
- results = colorPatterns.HEX3.exec(str).slice(1).map(function(color) {
- return parseInt(color + color, 16) / 255;
- });
- results[3] = 1;
- return results;
- } else if (colorPatterns.HEX6.test(str)) { // #rrggbb
- results = colorPatterns.HEX6.exec(str).slice(1).map(function(color) {
- return parseInt(color, 16) / 255;
- });
- results[3] = 1;
- return results;
- } else if (colorPatterns.RGB.test(str)) { // rgb(R,G,B)
- results = colorPatterns.RGB.exec(str).slice(1).map(function(color) {
- return color / 255;
- });
- results[3] = 1;
- return results;
- } else if (colorPatterns.RGB_PERCENT.test(str)) { // rgb(R%,G%,B%)
- results = colorPatterns.RGB_PERCENT.exec(str).slice(1)
- .map(function(color) {
- return parseFloat(color) / 100;
- });
- results[3] = 1;
- return results;
- } else if (colorPatterns.RGBA.test(str)) { // rgba(R,G,B,A)
- results = colorPatterns.RGBA.exec(str).slice(1)
- .map(function(color, idx) {
- if (idx === 3) {
- return parseFloat(color);
- }
- return color / 255;
- });
- return results;
- } else if (colorPatterns.RGBA_PERCENT.test(str)) { // rgba(R%,G%,B%,A%)
- results = colorPatterns.RGBA_PERCENT.exec(str).slice(1)
- .map(function(color, idx) {
- if (idx === 3) {
- return parseFloat(color);
- }
- return parseFloat(color) / 100;
- });
- return results;
- }
-
- // Try HSLA pattern matching.
- if (colorPatterns.HSL.test(str)) { // hsl(H,S,L)
- results = colorPatterns.HSL.exec(str).slice(1)
- .map(function(color, idx) {
- if (idx === 0) {
- return parseInt(color, 10) / 360;
- }
- return parseInt(color, 10) / 100;
- });
- results[3] = 1;
- } else if (colorPatterns.HSLA.test(str)) { // hsla(H,S,L,A)
- results = colorPatterns.HSLA.exec(str).slice(1)
- .map(function(color, idx) {
- if (idx === 0) {
- return parseInt(color, 10) / 360;
- }
- else if (idx === 3) {
- return parseFloat(color);
- }
- return parseInt(color, 10) / 100;
- });
- }
- if (results.length) {
- return color_conversion._hslaToRGBA(results);
- }
-
- // Try HSBA pattern matching.
- if (colorPatterns.HSB.test(str)) { // hsb(H,S,B)
- results = colorPatterns.HSB.exec(str).slice(1)
- .map(function(color, idx) {
- if (idx === 0) {
- return parseInt(color, 10) / 360;
- }
- return parseInt(color, 10) / 100;
- });
- results[3] = 1;
- } else if (colorPatterns.HSBA.test(str)) { // hsba(H,S,B,A)
- results = colorPatterns.HSBA.exec(str).slice(1)
- .map(function(color, idx) {
- if (idx === 0) {
- return parseInt(color, 10) / 360;
- }
- else if (idx === 3) {
- return parseFloat(color);
- }
- return parseInt(color, 10) / 100;
- });
- }
- if (results.length) {
- return color_conversion._hsbaToRGBA(results);
- }
-
- // Input did not match any CSS color pattern: default to white.
- results = [1, 1, 1, 1];
-
- } else if ((numArgs === 1 || numArgs === 2) &&
- typeof arguments[0] === 'number') { // 'Grayscale' mode.
-
- /**
- * For HSB and HSL, interpret the gray level as a brightness/lightness
- * value (they are equivalent when chroma is zero). For RGB, normalize the
- * gray level according to the blue maximum.
- */
- results[0] = arguments[0] / maxes[mode][2];
- results[1] = arguments[0] / maxes[mode][2];
- results[2] = arguments[0] / maxes[mode][2];
-
- // Alpha may be undefined, so default it to 100%.
- if (typeof arguments[1] === 'number') {
- results[3] = arguments[1] / maxes[mode][3];
- } else {
- results[3] = 1;
- }
-
- // Constrain components to the range [0,1].
- results = results.map(function(value) {
- return Math.max(Math.min(value, 1), 0);
- });
-
- } else {
- throw new Error (arguments + 'is not a valid color representation.');
- }
-
- return results;
- };
-
- module.exports = p5.Color;
-
- },{"../core/constants":36,"../core/core":37,"./color_conversion":29}],32:[function(_dereq_,module,exports){
- /**
- * @module Color
- * @submodule Setting
- * @for p5
- * @requires core
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var constants = _dereq_('../core/constants');
- _dereq_('./p5.Color');
-
- /**
- * The background() function sets the color used for the background of the
- * p5.js canvas. The default background is light gray. This function is
- * typically used within draw() to clear the display window at the beginning
- * of each frame, but it can be used inside setup() to set the background on
- * the first frame of animation or if the background need only be set once.
- *
- * @method background
- * @param {p5.Color} color any value created by the color() function
- * @param {Number} [a] opacity of the background relative to current
- * color range (default is 0-100)
- *
- * @example
- * <div>
- * <code>
- * // Grayscale integer value
- * background(51);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // R, G & B integer values
- * background(255, 204, 0);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // H, S & B integer values
- * colorMode(HSB);
- * background(255, 204, 100);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // Named SVG/CSS color string
- * background('red');
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // three-digit hexadecimal RGB notation
- * background('#fae');
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // six-digit hexadecimal RGB notation
- * background('#222222');
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // integer RGB notation
- * background('rgb(0,255,0)');
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // integer RGBA notation
- * background('rgba(0,255,0, 0.25)');
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // percentage RGB notation
- * background('rgb(100%,0%,10%)');
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // percentage RGBA notation
- * background('rgba(100%,0%,100%,0.5)');
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // p5 Color object
- * background(color(0, 0, 255));
- * </code>
- * </div>
- *
- * @alt
- * canvas with darkest charcoal grey background.
- * canvas with yellow background.
- * canvas with royal blue background.
- * canvas with red background.
- * canvas with pink background.
- * canvas with black background.
- * canvas with bright green background.
- * canvas with soft green background.
- * canvas with red background.
- * canvas with light purple background.
- * canvas with blue background.
- */
-
- /**
- * @method background
- * @param {String} colorstring color string, possible formats include: integer
- * rgb() or rgba(), percentage rgb() or rgba(),
- * 3-digit hex, 6-digit hex
- * @param {Number} [a]
- */
-
- /**
- * @method background
- * @param {Number} gray specifies a value between white and black
- * @param {Number} [a]
- */
-
- /**
- * @method background
- * @param {Number} v1 red or hue value (depending on the current color
- * mode)
- * @param {Number} v2 green or saturation value (depending on the current
- * color mode)
- * @param {Number} v3 blue or brightness value (depending on the current
- * color mode)
- * @param {Number} [a]
- */
-
- /**
- * @method background
- * @param {p5.Image} image image created with loadImage() or createImage(),
- * to set as background
- * (must be same size as the sketch window)
- * @param {Number} [a]
- */
- p5.prototype.background = function() {
- if (arguments[0] instanceof p5.Image) {
- this.image(arguments[0], 0, 0, this.width, this.height);
- } else {
- this._renderer.background.apply(this._renderer, arguments);
- }
- return this;
- };
-
- /**
- * Clears the pixels within a buffer. This function only works on p5.Canvas
- * objects created with the createCanvas() function; it won't work with the
- * main display window. Unlike the main graphics context, pixels in
- * additional graphics areas created with createGraphics() can be entirely
- * or partially transparent. This function clears everything to make all of
- * the pixels 100% transparent.
- *
- * @method clear
- * @example
- * <div>
- * <code>
- * // Clear the screen on mouse press.
- * function setup() {
- * createCanvas(100, 100);
- * }
- *
- * function draw() {
- * ellipse(mouseX, mouseY, 20, 20);
- * }
- *
- * function mousePressed() {
- * clear();
- * }
- * </code>
- * </div>
- *
- * @alt
- * 20x20 white ellipses are continually drawn at mouse x and y coordinates.
- *
- */
-
- p5.prototype.clear = function() {
- this._renderer.clear();
- return this;
- };
-
- /**
- * colorMode() changes the way p5.js interprets color data. By default, the
- * parameters for fill(), stroke(), background(), and color() are defined by
- * values between 0 and 255 using the RGB color model. This is equivalent to
- * setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB
- * system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You
- * can also use HSL.
- * <br><br>
- * Note: existing color objects remember the mode that they were created in,
- * so you can change modes as you like without affecting their appearance.
- *
- * @method colorMode
- * @param {Constant} mode either RGB or HSB, corresponding to
- * Red/Green/Blue and Hue/Saturation/Brightness
- * (or Lightness)
- * @param {Number} [max1] range for the red or hue depending on the
- * current color mode, or range for all values
- * @param {Number} [max2] range for the green or saturation depending
- * on the current color mode
- * @param {Number} [max3] range for the blue or brightness/lighntess
- * depending on the current color mode
- * @param {Number} [maxA] range for the alpha
- * @example
- * <div>
- * <code>
- * noStroke();
- * colorMode(RGB, 100);
- * for (i = 0; i < 100; i++) {
- * for (j = 0; j < 100; j++) {
- * stroke(i, j, 0);
- * point(i, j);
- * }
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * noStroke();
- * colorMode(HSB, 100);
- * for (i = 0; i < 100; i++) {
- * for (j = 0; j < 100; j++) {
- * stroke(i, j, 100);
- * point(i, j);
- * }
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * colorMode(RGB, 255);
- * var c = color(127, 255, 0);
- *
- * colorMode(RGB, 1);
- * var myColor = c._getRed();
- * text(myColor, 10, 10, 80, 80);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * noFill();
- * colorMode(RGB, 255, 255, 255, 1);
- * background(255);
- *
- * strokeWeight(4);
- * stroke(255, 0 , 10, 0.3);
- * ellipse(40, 40, 50, 50);
- * ellipse(50, 50, 40, 40);
- * </code>
- * </div>
- *
- * @alt
- *Green to red gradient from bottom L to top R. shading originates from top left.
- *Rainbow gradient from left to right. Brightness increasing to white at top.
- *unknown image.
- *50x50 ellipse at middle L & 40x40 ellipse at center. Transluscent pink outlines.
- *
- */
- p5.prototype.colorMode = function() {
- if (arguments[0] === constants.RGB ||
- arguments[0] === constants.HSB ||
- arguments[0] === constants.HSL) {
-
- // Set color mode.
- this._renderer._colorMode = arguments[0];
-
- // Set color maxes.
- var maxes = this._renderer._colorMaxes[this._renderer._colorMode];
- if (arguments.length === 2) {
- maxes[0] = arguments[1]; // Red
- maxes[1] = arguments[1]; // Green
- maxes[2] = arguments[1]; // Blue
- maxes[3] = arguments[1]; // Alpha
- } else if (arguments.length === 4) {
- maxes[0] = arguments[1]; // Red
- maxes[1] = arguments[2]; // Green
- maxes[2] = arguments[3]; // Blue
- } else if (arguments.length === 5) {
- maxes[0] = arguments[1]; // Red
- maxes[1] = arguments[2]; // Green
- maxes[2] = arguments[3]; // Blue
- maxes[3] = arguments[4]; // Alpha
- }
- }
-
- return this;
- };
-
- /**
- * Sets the color used to fill shapes. For example, if you run
- * fill(204, 102, 0), all subsequent shapes will be filled with orange. This
- * color is either specified in terms of the RGB or HSB color depending on
- * the current colorMode(). (The default color space is RGB, with each value
- * in the range from 0 to 255).
- * <br><br>
- * If a single string argument is provided, RGB, RGBA and Hex CSS color strings
- * and all named color strings are supported. A p5 Color object can also be
- * provided to set the fill color.
- *
- * @method fill
- * @param {Number|Array|String|p5.Color} v1 gray value, red or hue value
- * (depending on the current color
- * mode), or color Array, or CSS
- * color string
- * @param {Number} [v2] green or saturation value
- * (depending on the current
- * color mode)
- * @param {Number} [v3] blue or brightness value
- * (depending on the current
- * color mode)
- * @param {Number} [a] opacity of the background
- *
- * @example
- * <div>
- * <code>
- * // Grayscale integer value
- * fill(51);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // R, G & B integer values
- * fill(255, 204, 0);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // H, S & B integer values
- * colorMode(HSB);
- * fill(255, 204, 100);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // Named SVG/CSS color string
- * fill('red');
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // three-digit hexadecimal RGB notation
- * fill('#fae');
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // six-digit hexadecimal RGB notation
- * fill('#222222');
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // integer RGB notation
- * fill('rgb(0,255,0)');
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // integer RGBA notation
- * fill('rgba(0,255,0, 0.25)');
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // percentage RGB notation
- * fill('rgb(100%,0%,10%)');
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // percentage RGBA notation
- * fill('rgba(100%,0%,100%,0.5)');
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // p5 Color object
- * fill(color(0, 0, 255));
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- * @alt
- * 60x60 dark charcoal grey rect with black outline in center of canvas.
- * 60x60 yellow rect with black outline in center of canvas.
- * 60x60 royal blue rect with black outline in center of canvas.
- * 60x60 red rect with black outline in center of canvas.
- * 60x60 pink rect with black outline in center of canvas.
- * 60x60 black rect with black outline in center of canvas.
- * 60x60 light green rect with black outline in center of canvas.
- * 60x60 soft green rect with black outline in center of canvas.
- * 60x60 red rect with black outline in center of canvas.
- * 60x60 dark fushcia rect with black outline in center of canvas.
- * 60x60 blue rect with black outline in center of canvas.
- */
-
- p5.prototype.fill = function() {
- this._renderer._setProperty('_fillSet', true);
- this._renderer._setProperty('_doFill', true);
- this._renderer.fill.apply(this._renderer, arguments);
- return this;
- };
-
- /**
- * Disables filling geometry. If both noStroke() and noFill() are called,
- * nothing will be drawn to the screen.
- *
- * @method noFill
- * @example
- * <div>
- * <code>
- * rect(15, 10, 55, 55);
- * noFill();
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- * @alt
- * white rect top middle and noFill rect center. Both 60x60 with black outlines.
- */
- p5.prototype.noFill = function() {
- this._renderer._setProperty('_doFill', false);
- return this;
- };
-
- /**
- * Disables drawing the stroke (outline). If both noStroke() and noFill()
- * are called, nothing will be drawn to the screen.
- *
- * @method noStroke
- * @example
- * <div>
- * <code>
- * noStroke();
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- *
- * @alt
- *60x60 white rect at center. no outline.
- *
- */
-
- p5.prototype.noStroke = function() {
- this._renderer._setProperty('_doStroke', false);
- return this;
- };
-
- /**
- * Sets the color used to draw lines and borders around shapes. This color
- * is either specified in terms of the RGB or HSB color depending on the
- * current colorMode() (the default color space is RGB, with each value in
- * the range from 0 to 255).
- * <br><br>
- * If a single string argument is provided, RGB, RGBA and Hex CSS color
- * strings and all named color strings are supported. A p5 Color object
- * can also be provided to set the stroke color.
- *
- * @method stroke
- * @param {Number|Array|String|p5.Color} v1 gray value, red or hue value
- * (depending on the current color
- * mode), or color Array, or CSS
- * color string
- * @param {Number} [v2] green or saturation value
- * (depending on the current
- * color mode)
- * @param {Number} [v3] blue or brightness value
- * (depending on the current
- * color mode)
- * @param {Number} [a] opacity of the background
- *
- * @example
- * <div>
- * <code>
- * // Grayscale integer value
- * strokeWeight(4);
- * stroke(51);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // R, G & B integer values
- * stroke(255, 204, 0);
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // H, S & B integer values
- * colorMode(HSB);
- * strokeWeight(4);
- * stroke(255, 204, 100);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // Named SVG/CSS color string
- * stroke('red');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // three-digit hexadecimal RGB notation
- * stroke('#fae');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // six-digit hexadecimal RGB notation
- * stroke('#222222');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // integer RGB notation
- * stroke('rgb(0,255,0)');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // integer RGBA notation
- * stroke('rgba(0,255,0,0.25)');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // percentage RGB notation
- * stroke('rgb(100%,0%,10%)');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // percentage RGBA notation
- * stroke('rgba(100%,0%,100%,0.5)');
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // p5 Color object
- * stroke(color(0, 0, 255));
- * strokeWeight(4);
- * rect(20, 20, 60, 60);
- * </code>
- * </div>
- *
- * @alt
- * 60x60 white rect at center. Dark charcoal grey outline.
- * 60x60 white rect at center. Yellow outline.
- * 60x60 white rect at center. Royal blue outline.
- * 60x60 white rect at center. Red outline.
- * 60x60 white rect at center. Pink outline.
- * 60x60 white rect at center. Black outline.
- * 60x60 white rect at center. Bright green outline.
- * 60x60 white rect at center. Soft green outline.
- * 60x60 white rect at center. Red outline.
- * 60x60 white rect at center. Dark fushcia outline.
- * 60x60 white rect at center. Blue outline.
- */
-
- p5.prototype.stroke = function() {
- this._renderer._setProperty('_strokeSet', true);
- this._renderer._setProperty('_doStroke', true);
- this._renderer.stroke.apply(this._renderer, arguments);
- return this;
- };
-
- module.exports = p5;
-
- },{"../core/constants":36,"../core/core":37,"./p5.Color":31}],33:[function(_dereq_,module,exports){
- /**
- * @module Shape
- * @submodule 2D Primitives
- * @for p5
- * @requires core
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('./core');
- var constants = _dereq_('./constants');
- var canvas = _dereq_('./canvas');
- _dereq_('./error_helpers');
-
- /**
- * Draw an arc to the screen. If called with only a, b, c, d, start, and
- * stop, the arc will be drawn as an open pie. If mode is provided, the arc
- * will be drawn either open, as a chord, or as a pie as specified. The
- * origin may be changed with the ellipseMode() function.<br><br>
- * Note that drawing a full circle (ex: 0 to TWO_PI) will appear blank
- * because 0 and TWO_PI are the same position on the unit circle. The
- * best way to handle this is by using the ellipse() function instead
- * to create a closed ellipse, and to use the arc() function
- * only to draw parts of an ellipse.
- *
- * @method arc
- * @param {Number} a x-coordinate of the arc's ellipse
- * @param {Number} b y-coordinate of the arc's ellipse
- * @param {Number} c width of the arc's ellipse by default
- * @param {Number} d height of the arc's ellipse by default
- * @param {Number} start angle to start the arc, specified in radians
- * @param {Number} stop angle to stop the arc, specified in radians
- * @param {Constant} [mode] optional parameter to determine the way of drawing
- * the arc
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * arc(50, 55, 50, 50, 0, HALF_PI);
- * noFill();
- * arc(50, 55, 60, 60, HALF_PI, PI);
- * arc(50, 55, 70, 70, PI, PI+QUARTER_PI);
- * arc(50, 55, 80, 80, PI+QUARTER_PI, TWO_PI);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * arc(50, 50, 80, 80, 0, PI+QUARTER_PI, OPEN);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * arc(50, 50, 80, 80, 0, PI+QUARTER_PI, CHORD);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * arc(50, 50, 80, 80, 0, PI+QUARTER_PI, PIE);
- * </code>
- * </div>
- *
- * @alt
- *shattered outline of an ellipse with a quarter of a white circle bottom-right.
- *white ellipse with black outline with top right missing.
- *white ellipse with top right missing with black outline around shape.
- *white ellipse with top right quarter missing with black outline around the shape.
- *
- */
- p5.prototype.arc = function(x, y, w, h, start, stop, mode) {
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- if (!this._renderer._doStroke && !this._renderer._doFill) {
- return this;
- }
- if (this._angleMode === constants.DEGREES) {
- start = this.radians(start);
- stop = this.radians(stop);
- }
-
- // Make all angles positive...
- while (start < 0) {
- start += constants.TWO_PI;
- }
- while (stop < 0) {
- stop += constants.TWO_PI;
- }
- // ...and confine them to the interval [0,TWO_PI).
- start %= constants.TWO_PI;
- stop %= constants.TWO_PI;
-
- // account for full circle
- if (stop === start) {
- stop += constants.TWO_PI;
- }
-
- // Adjust angles to counter linear scaling.
- if (start <= constants.HALF_PI) {
- start = Math.atan(w / h * Math.tan(start));
- } else if (start > constants.HALF_PI && start <= 3 * constants.HALF_PI) {
- start = Math.atan(w / h * Math.tan(start)) + constants.PI;
- } else {
- start = Math.atan(w / h * Math.tan(start)) + constants.TWO_PI;
- }
- if (stop <= constants.HALF_PI) {
- stop = Math.atan(w / h * Math.tan(stop));
- } else if (stop > constants.HALF_PI && stop <= 3 * constants.HALF_PI) {
- stop = Math.atan(w / h * Math.tan(stop)) + constants.PI;
- } else {
- stop = Math.atan(w / h * Math.tan(stop)) + constants.TWO_PI;
- }
-
- // Exceed the interval if necessary in order to preserve the size and
- // orientation of the arc.
- if (start > stop) {
- stop += constants.TWO_PI;
- }
- // p5 supports negative width and heights for ellipses
- w = Math.abs(w);
- h = Math.abs(h);
- this._renderer.arc(x, y, w, h, start, stop, mode);
- return this;
- };
-
- /**
- * Draws an ellipse (oval) to the screen. An ellipse with equal width and
- * height is a circle. By default, the first two parameters set the location,
- * and the third and fourth parameters set the shape's width and height. If
- * no height is specified, the value of width is used for both the width and
- * height. If a negative height or width is specified, the absolute value is taken.
- * The origin may be changed with the ellipseMode() function.
- *
- * @method ellipse
- * @param {Number} x x-coordinate of the ellipse.
- * @param {Number} y y-coordinate of the ellipse.
- * @param {Number} w width of the ellipse.
- * @param {Number} [h] height of the ellipse.
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * ellipse(56, 46, 55, 55);
- * </code>
- * </div>
- *
- * @alt
- *white ellipse with black outline in middle-right of canvas that is 55x55.
- *
- */
- /**
- * @method ellipse
- * @param {Number} x
- * @param {Number} y
- * @param {Number} w
- * @param {Number} [h]
- * @return {p5}
- */
- p5.prototype.ellipse = function() {
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- // Duplicate 3rd argument if only 3 given.
- if (args.length === 3) {
- args.push(args[2]);
- }
- // p5 supports negative width and heights for rects
- if (args[2] < 0){args[2] = Math.abs(args[2]);}
- if (args[3] < 0){args[3] = Math.abs(args[3]);}
- if (!this._renderer._doStroke && !this._renderer._doFill) {
- return this;
- }
- var vals = canvas.modeAdjust(
- args[0],
- args[1],
- args[2],
- args[3],
- this._renderer._ellipseMode);
- args[0] = vals.x;
- args[1] = vals.y;
- args[2] = vals.w;
- args[3] = vals.h;
- this._renderer.ellipse(args);
- return this;
- };
- /**
- * Draws a line (a direct path between two points) to the screen. The version
- * of line() with four parameters draws the line in 2D. To color a line, use
- * the stroke() function. A line cannot be filled, therefore the fill()
- * function will not affect the color of a line. 2D lines are drawn with a
- * width of one pixel by default, but this can be changed with the
- * strokeWeight() function.
- *
- * @method line
- * @param {Number} x1 the x-coordinate of the first point
- * @param {Number} y1 the y-coordinate of the first point
- * @param {Number} x2 the x-coordinate of the second point
- * @param {Number} y2 the y-coordinate of the second point
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * line(30, 20, 85, 75);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * line(30, 20, 85, 20);
- * stroke(126);
- * line(85, 20, 85, 75);
- * stroke(255);
- * line(85, 75, 30, 75);
- * </code>
- * </div>
- *
- * @alt
- *line 78 pixels long running from mid-top to bottom-right of canvas.
- *3 lines of various stroke sizes. Form top, bottom and right sides of a square.
- *
- */
- ////commented out original
- // p5.prototype.line = function(x1, y1, x2, y2) {
- // if (!this._renderer._doStroke) {
- // return this;
- // }
- // if(this._renderer.isP3D){
- // } else {
- // this._renderer.line(x1, y1, x2, y2);
- // }
- // };
- p5.prototype.line = function() {
- if (!this._renderer._doStroke) {
- return this;
- }
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- //check whether we should draw a 3d line or 2d
- if(this._renderer.isP3D){
- this._renderer.line(
- args[0],
- args[1],
- args[2],
- args[3],
- args[4],
- args[5]);
- } else {
- this._renderer.line(
- args[0],
- args[1],
- args[2],
- args[3]);
- }
- return this;
- };
-
- /**
- * Draws a point, a coordinate in space at the dimension of one pixel.
- * The first parameter is the horizontal value for the point, the second
- * value is the vertical value for the point. The color of the point is
- * determined by the current stroke.
- *
- * @method point
- * @param {Number} x the x-coordinate
- * @param {Number} y the y-coordinate
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * point(30, 20);
- * point(85, 20);
- * point(85, 75);
- * point(30, 75);
- * </code>
- * </div>
- *
- * @alt
- *4 points centered in the middle-right of the canvas.
- *
- */
- p5.prototype.point = function() {
- if (!this._renderer._doStroke) {
- return this;
- }
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- //check whether we should draw a 3d line or 2d
- if(this._renderer.isP3D){
- this._renderer.point(
- args[0],
- args[1],
- args[2]
- );
- } else {
- this._renderer.point(
- args[0],
- args[1]
- );
- }
- return this;
- };
-
-
- /**
- * Draw a quad. A quad is a quadrilateral, a four sided polygon. It is
- * similar to a rectangle, but the angles between its edges are not
- * constrained to ninety degrees. The first pair of parameters (x1,y1)
- * sets the first vertex and the subsequent pairs should proceed
- * clockwise or counter-clockwise around the defined shape.
- *
- * @method quad
- * @param {Number} x1 the x-coordinate of the first point
- * @param {Number} y1 the y-coordinate of the first point
- * @param {Number} x2 the x-coordinate of the second point
- * @param {Number} y2 the y-coordinate of the second point
- * @param {Number} x3 the x-coordinate of the third point
- * @param {Number} y3 the y-coordinate of the third point
- * @param {Number} x4 the x-coordinate of the fourth point
- * @param {Number} y4 the y-coordinate of the fourth point
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * quad(38, 31, 86, 20, 69, 63, 30, 76);
- * </code>
- * </div>
- *
- * @alt
- *irregular white quadrilateral shape with black outline mid-right of canvas.
- *
- */
- /**
- * @method quad
- * @param {Number} x1
- * @param {Number} y1
- * @param {Number} x2
- * @param {Number} y2
- * @param {Number} x3
- * @param {Number} y3
- * @param {Number} x4
- * @param {Number} y4
- * @return {p5} the p5 object
- */
- p5.prototype.quad = function() {
- if (!this._renderer._doStroke && !this._renderer._doFill) {
- return this;
- }
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- if(this._renderer.isP3D){
- this._renderer.quad(
- args[0],
- args[1],
- args[2],
- args[3],
- args[4],
- args[5],
- args[6],
- args[7],
- args[8],
- args[9],
- args[10],
- args[11]
- );
- } else {
- this._renderer.quad(
- args[0],
- args[1],
- args[2],
- args[3],
- args[4],
- args[5],
- args[6],
- args[7]
- );
- }
- return this;
- };
-
- /**
- * Draws a rectangle to the screen. A rectangle is a four-sided shape with
- * every angle at ninety degrees. By default, the first two parameters set
- * the location of the upper-left corner, the third sets the width, and the
- * fourth sets the height. The way these parameters are interpreted, however,
- * may be changed with the rectMode() function.
- * <br><br>
- * The fifth, sixth, seventh and eighth parameters, if specified,
- * determine corner radius for the top-right, top-left, lower-right and
- * lower-left corners, respectively. An omitted corner radius parameter is set
- * to the value of the previously specified radius value in the parameter list.
- *
- * @method rect
- * @param {Number} x x-coordinate of the rectangle.
- * @param {Number} y y-coordinate of the rectangle.
- * @param {Number} w width of the rectangle.
- * @param {Number} h height of the rectangle.
- * @param {Number} [tl] optional radius of top-left corner.
- * @param {Number} [tr] optional radius of top-right corner.
- * @param {Number} [br] optional radius of bottom-right corner.
- * @param {Number} [bl] optional radius of bottom-left corner.
- * @return {p5} the p5 object.
- * @example
- * <div>
- * <code>
- * // Draw a rectangle at location (30, 20) with a width and height of 55.
- * rect(30, 20, 55, 55);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // Draw a rectangle with rounded corners, each having a radius of 20.
- * rect(30, 20, 55, 55, 20);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // Draw a rectangle with rounded corners having the following radii:
- * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
- * rect(30, 20, 55, 55, 20, 15, 10, 5);
- * </code>
- * </div>
- *
- * @alt
- * 55x55 white rect with black outline in mid-right of canvas.
- * 55x55 white rect with black outline and rounded edges in mid-right of canvas.
- * 55x55 white rect with black outline and rounded edges of different radii.
- */
- /**
- * @method rect
- * @param {Number} x
- * @param {Number} y
- * @param {Number} w
- * @param {Number} h
- * @param {Number} [detailX]
- * @param {Number} [detailY]
- * @return {p5} the p5 object.
- */
- p5.prototype.rect = function () {
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- if (!this._renderer._doStroke && !this._renderer._doFill) {
- return;
- }
- var vals = canvas.modeAdjust(
- args[0],
- args[1],
- args[2],
- args[3],
- this._renderer._rectMode);
- args[0] = vals.x;
- args[1] = vals.y;
- args[2] = vals.w;
- args[3] = vals.h;
- this._renderer.rect(args);
- return this;
- };
-
- /**
- * A triangle is a plane created by connecting three points. The first two
- * arguments specify the first point, the middle two arguments specify the
- * second point, and the last two arguments specify the third point.
- *
- * @method triangle
- * @param {Number} x1 x-coordinate of the first point
- * @param {Number} y1 y-coordinate of the first point
- * @param {Number} x2 x-coordinate of the second point
- * @param {Number} y2 y-coordinate of the second point
- * @param {Number} x3 x-coordinate of the third point
- * @param {Number} y3 y-coordinate of the third point
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * triangle(30, 75, 58, 20, 86, 75);
- * </code>
- * </div>
- *
- *@alt
- * white triangle with black outline in mid-right of canvas.
- *
- */
- p5.prototype.triangle = function() {
-
- if (!this._renderer._doStroke && !this._renderer._doFill) {
- return this;
- }
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- this._renderer.triangle(args);
- return this;
- };
-
- module.exports = p5;
-
- },{"./canvas":35,"./constants":36,"./core":37,"./error_helpers":40}],34:[function(_dereq_,module,exports){
- /**
- * @module Shape
- * @submodule Attributes
- * @for p5
- * @requires core
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('./core');
- var constants = _dereq_('./constants');
-
- /**
- * Modifies the location from which ellipses are drawn by changing the way
- * in which parameters given to ellipse() are interpreted.
- * <br><br>
- * The default mode is ellipseMode(CENTER), which interprets the first two
- * parameters of ellipse() as the shape's center point, while the third and
- * fourth parameters are its width and height.
- * <br><br>
- * ellipseMode(RADIUS) also uses the first two parameters of ellipse() as
- * the shape's center point, but uses the third and fourth parameters to
- * specify half of the shapes's width and height.
- * <br><br>
- * ellipseMode(CORNER) interprets the first two parameters of ellipse() as
- * the upper-left corner of the shape, while the third and fourth parameters
- * are its width and height.
- * <br><br>
- * ellipseMode(CORNERS) interprets the first two parameters of ellipse() as
- * the location of one corner of the ellipse's bounding box, and the third
- * and fourth parameters as the location of the opposite corner.
- * <br><br>
- * The parameter must be written in ALL CAPS because Javascript is a
- * case-sensitive language.
- *
- * @method ellipseMode
- * @param {Constant} mode either CENTER, RADIUS, CORNER, or CORNERS
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * ellipseMode(RADIUS); // Set ellipseMode to RADIUS
- * fill(255); // Set fill to white
- * ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode
- *
- * ellipseMode(CENTER); // Set ellipseMode to CENTER
- * fill(100); // Set fill to gray
- * ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * ellipseMode(CORNER); // Set ellipseMode is CORNER
- * fill(255); // Set fill to white
- * ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode
- *
- * ellipseMode(CORNERS); // Set ellipseMode to CORNERS
- * fill(100); // Set fill to gray
- * ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
- * </code>
- * </div>
- *
- * @alt
- * 60x60 white ellipse and 30x30 grey ellipse with black outlines at center.
- * 60x60 white ellipse @center and 30x30 grey ellipse top-right, black outlines.
- *
- */
- p5.prototype.ellipseMode = function(m) {
- if (m === constants.CORNER ||
- m === constants.CORNERS ||
- m === constants.RADIUS ||
- m === constants.CENTER) {
- this._renderer._ellipseMode = m;
- }
- return this;
- };
-
- /**
- * Draws all geometry with jagged (aliased) edges. Note that smooth() is
- * active by default, so it is necessary to call noSmooth() to disable
- * smoothing of geometry, images, and fonts.
- *
- * @method noSmooth
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * background(0);
- * noStroke();
- * smooth();
- * ellipse(30, 48, 36, 36);
- * noSmooth();
- * ellipse(70, 48, 36, 36);
- * </code>
- * </div>
- *
- * @alt
- * 2 pixelated 36x36 white ellipses to left & right of center, black background
- *
- */
- p5.prototype.noSmooth = function() {
- this._renderer.noSmooth();
- return this;
- };
-
- /**
- * Modifies the location from which rectangles are drawn by changing the way
- * in which parameters given to rect() are interpreted.
- * <br><br>
- * The default mode is rectMode(CORNER), which interprets the first two
- * parameters of rect() as the upper-left corner of the shape, while the
- * third and fourth parameters are its width and height.
- * <br><br>
- * rectMode(CORNERS) interprets the first two parameters of rect() as the
- * location of one corner, and the third and fourth parameters as the
- * location of the opposite corner.
- * <br><br>
- * rectMode(CENTER) interprets the first two parameters of rect() as the
- * shape's center point, while the third and fourth parameters are its
- * width and height.
- * <br><br>
- * rectMode(RADIUS) also uses the first two parameters of rect() as the
- * shape's center point, but uses the third and fourth parameters to specify
- * half of the shapes's width and height.
- * <br><br>
- * The parameter must be written in ALL CAPS because Javascript is a
- * case-sensitive language.
- *
- * @method rectMode
- * @param {Constant} mode either CORNER, CORNERS, CENTER, or RADIUS
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * rectMode(CORNER); // Default rectMode is CORNER
- * fill(255); // Set fill to white
- * rect(25, 25, 50, 50); // Draw white rect using CORNER mode
- *
- * rectMode(CORNERS); // Set rectMode to CORNERS
- * fill(100); // Set fill to gray
- * rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * rectMode(RADIUS); // Set rectMode to RADIUS
- * fill(255); // Set fill to white
- * rect(50, 50, 30, 30); // Draw white rect using RADIUS mode
- *
- * rectMode(CENTER); // Set rectMode to CENTER
- * fill(100); // Set fill to gray
- * rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
- * </code>
- * </div>
- *
- * @alt
- * 50x50 white rect at center and 25x25 grey rect in the top left of the other.
- * 50x50 white rect at center and 25x25 grey rect in the center of the other.
- *
- */
- p5.prototype.rectMode = function(m) {
- if (m === constants.CORNER ||
- m === constants.CORNERS ||
- m === constants.RADIUS ||
- m === constants.CENTER) {
- this._renderer._rectMode = m;
- }
- return this;
- };
-
- /**
- * Draws all geometry with smooth (anti-aliased) edges. smooth() will also
- * improve image quality of resized images. Note that smooth() is active by
- * default; noSmooth() can be used to disable smoothing of geometry,
- * images, and fonts.
- *
- * @method smooth
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * background(0);
- * noStroke();
- * smooth();
- * ellipse(30, 48, 36, 36);
- * noSmooth();
- * ellipse(70, 48, 36, 36);
- * </code>
- * </div>
- *
- * @alt
- * 2 pixelated 36x36 white ellipses one left one right of center. On black.
- *
- */
- p5.prototype.smooth = function() {
- this._renderer.smooth();
- return this;
- };
-
- /**
- * Sets the style for rendering line endings. These ends are either squared,
- * extended, or rounded, each of which specified with the corresponding
- * parameters: SQUARE, PROJECT, and ROUND. The default cap is ROUND.
- *
- * @method strokeCap
- * @param {Number/Constant} cap either SQUARE, PROJECT, or ROUND
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * strokeWeight(12.0);
- * strokeCap(ROUND);
- * line(20, 30, 80, 30);
- * strokeCap(SQUARE);
- * line(20, 50, 80, 50);
- * strokeCap(PROJECT);
- * line(20, 70, 80, 70);
- * </code>
- * </div>
- *
- * @alt
- * 3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.
- *
- */
- p5.prototype.strokeCap = function(cap) {
- if (cap === constants.ROUND ||
- cap === constants.SQUARE ||
- cap === constants.PROJECT) {
- this._renderer.strokeCap(cap);
- }
- return this;
- };
-
- /**
- * Sets the style of the joints which connect line segments. These joints
- * are either mitered, beveled, or rounded and specified with the
- * corresponding parameters MITER, BEVEL, and ROUND. The default joint is
- * MITER.
- *
- * @method strokeJoin
- * @param {Number/Constant} join either MITER, BEVEL, ROUND
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * noFill();
- * strokeWeight(10.0);
- * strokeJoin(MITER);
- * beginShape();
- * vertex(35, 20);
- * vertex(65, 50);
- * vertex(35, 80);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * noFill();
- * strokeWeight(10.0);
- * strokeJoin(BEVEL);
- * beginShape();
- * vertex(35, 20);
- * vertex(65, 50);
- * vertex(35, 80);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * noFill();
- * strokeWeight(10.0);
- * strokeJoin(ROUND);
- * beginShape();
- * vertex(35, 20);
- * vertex(65, 50);
- * vertex(35, 80);
- * endShape();
- * </code>
- * </div>
- *
- * @alt
- * Right-facing arrowhead shape with pointed tip in center of canvas.
- * Right-facing arrowhead shape with flat tip in center of canvas.
- * Right-facing arrowhead shape with rounded tip in center of canvas.
- *
- */
- p5.prototype.strokeJoin = function(join) {
- if (join === constants.ROUND ||
- join === constants.BEVEL ||
- join === constants.MITER) {
- this._renderer.strokeJoin(join);
- }
- return this;
- };
-
- /**
- * Sets the width of the stroke used for lines, points, and the border
- * around shapes. All widths are set in units of pixels.
- *
- * @method strokeWeight
- * @param {Number} weight the weight (in pixels) of the stroke
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * strokeWeight(1); // Default
- * line(20, 20, 80, 20);
- * strokeWeight(4); // Thicker
- * line(20, 40, 80, 40);
- * strokeWeight(10); // Beastly
- * line(20, 70, 80, 70);
- * </code>
- * </div>
- *
- * @alt
- * 3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.
- *
- */
- p5.prototype.strokeWeight = function(w) {
- this._renderer.strokeWeight(w);
- return this;
- };
-
- module.exports = p5;
-
- },{"./constants":36,"./core":37}],35:[function(_dereq_,module,exports){
- /**
- * @requires constants
- */
-
- var constants = _dereq_('./constants');
-
- module.exports = {
-
- modeAdjust: function(a, b, c, d, mode) {
- if (mode === constants.CORNER) {
- return { x: a, y: b, w: c, h: d };
- } else if (mode === constants.CORNERS) {
- return { x: a, y: b, w: c-a, h: d-b };
- } else if (mode === constants.RADIUS) {
- return { x: a-c, y: b-d, w: 2*c, h: 2*d };
- } else if (mode === constants.CENTER) {
- return { x: a-c*0.5, y: b-d*0.5, w: c, h: d };
- }
- },
-
- arcModeAdjust: function(a, b, c, d, mode) {
- if (mode === constants.CORNER) {
- return { x: a+c*0.5, y: b+d*0.5, w: c, h: d };
- } else if (mode === constants.CORNERS) {
- return { x: a, y: b, w: c+a, h: d+b };
- } else if (mode === constants.RADIUS) {
- return { x: a, y: b, w: 2*c, h: 2*d };
- } else if (mode === constants.CENTER) {
- return { x: a, y: b, w: c, h: d };
- }
- }
-
- };
-
-
- },{"./constants":36}],36:[function(_dereq_,module,exports){
- /**
- * @module Constants
- * @submodule Constants
- * @for p5
- */
-
- var PI = Math.PI;
-
- module.exports = {
-
- // GRAPHICS RENDERER
- P2D: 'p2d',
- WEBGL: 'webgl',
-
- // ENVIRONMENT
- ARROW: 'default',
- CROSS: 'crosshair',
- HAND: 'pointer',
- MOVE: 'move',
- TEXT: 'text',
- WAIT: 'wait',
-
- // TRIGONOMETRY
-
- /**
- * HALF_PI is a mathematical constant with the value
- * 1.57079632679489661923. It is half the ratio of the
- * circumference of a circle to its diameter. It is useful in
- * combination with the trigonometric functions sin() and cos().
- *
- * @property HALF_PI
- *
- * @example
- * <div><code>
- * arc(50, 50, 80, 80, 0, HALF_PI);
- * </code></div>
- *
- * @alt
- * 80x80 white quarter-circle with curve toward bottom right of canvas.
- *
- */
- HALF_PI: PI / 2,
- /**
- * PI is a mathematical constant with the value
- * 3.14159265358979323846. It is the ratio of the circumference
- * of a circle to its diameter. It is useful in combination with
- * the trigonometric functions sin() and cos().
- *
- * @property PI
- *
- * @example
- * <div><code>
- * arc(50, 50, 80, 80, 0, PI);
- * </code></div>
- *
- * @alt
- * white half-circle with curve toward bottom of canvas.
- *
- */
- PI: PI,
- /**
- * QUARTER_PI is a mathematical constant with the value 0.7853982.
- * It is one quarter the ratio of the circumference of a circle to
- * its diameter. It is useful in combination with the trigonometric
- * functions sin() and cos().
- *
- * @property QUARTER_PI
- *
- * @example
- * <div><code>
- * arc(50, 50, 80, 80, 0, QUARTER_PI);
- * </code></div>
- *
- * @alt
- * white eighth-circle rotated about 40 degrees with curve bottom right canvas.
- *
- */
- QUARTER_PI: PI / 4,
- /**
- * TAU is an alias for TWO_PI, a mathematical constant with the
- * value 6.28318530717958647693. It is twice the ratio of the
- * circumference of a circle to its diameter. It is useful in
- * combination with the trigonometric functions sin() and cos().
- *
- * @property TAU
- *
- * @example
- * <div><code>
- * arc(50, 50, 80, 80, 0, TAU);
- * </code></div>
- *
- * @alt
- * 80x80 white ellipse shape in center of canvas.
- *
- */
- TAU: PI * 2,
- /**
- * TWO_PI is a mathematical constant with the value
- * 6.28318530717958647693. It is twice the ratio of the
- * circumference of a circle to its diameter. It is useful in
- * combination with the trigonometric functions sin() and cos().
- *
- * @property TWO_PI
- *
- * @example
- * <div><code>
- * arc(50, 50, 80, 80, 0, TWO_PI);
- * </code></div>
- *
- * @alt
- * 80x80 white ellipse shape in center of canvas.
- *
- */
- TWO_PI: PI * 2,
- DEGREES: 'degrees',
- RADIANS: 'radians',
-
- // SHAPE
- CORNER: 'corner',
- CORNERS: 'corners',
- RADIUS: 'radius',
- RIGHT: 'right',
- LEFT: 'left',
- CENTER: 'center',
- TOP: 'top',
- BOTTOM: 'bottom',
- BASELINE: 'alphabetic',
- POINTS: 0x0000,
- LINES: 0x0001,
- LINE_STRIP: 0x0003,
- LINE_LOOP: 0x0002,
- TRIANGLES: 0x0004,
- TRIANGLE_FAN: 0x0006,
- TRIANGLE_STRIP: 0x0005,
- QUADS: 'quads',
- QUAD_STRIP: 'quad_strip',
- CLOSE: 'close',
- OPEN: 'open',
- CHORD: 'chord',
- PIE: 'pie',
- PROJECT: 'square', // PEND: careful this is counterintuitive
- SQUARE: 'butt',
- ROUND: 'round',
- BEVEL: 'bevel',
- MITER: 'miter',
-
- // COLOR
- RGB: 'rgb',
- HSB: 'hsb',
- HSL: 'hsl',
-
- // DOM EXTENSION
- AUTO: 'auto',
-
- // INPUT
- ALT: 18,
- BACKSPACE: 8,
- CONTROL: 17,
- DELETE: 46,
- DOWN_ARROW: 40,
- ENTER: 13,
- ESCAPE: 27,
- LEFT_ARROW: 37,
- OPTION: 18,
- RETURN: 13,
- RIGHT_ARROW: 39,
- SHIFT: 16,
- TAB: 9,
- UP_ARROW: 38,
-
- // RENDERING
- BLEND: 'normal',
- ADD: 'lighter',
- //ADD: 'add', //
- //SUBTRACT: 'subtract', //
- DARKEST: 'darken',
- LIGHTEST: 'lighten',
- DIFFERENCE: 'difference',
- EXCLUSION: 'exclusion',
- MULTIPLY: 'multiply',
- SCREEN: 'screen',
- REPLACE: 'source-over',
- OVERLAY: 'overlay',
- HARD_LIGHT: 'hard-light',
- SOFT_LIGHT: 'soft-light',
- DODGE: 'color-dodge',
- BURN: 'color-burn',
-
- // FILTERS
- THRESHOLD: 'threshold',
- GRAY: 'gray',
- OPAQUE: 'opaque',
- INVERT: 'invert',
- POSTERIZE: 'posterize',
- DILATE: 'dilate',
- ERODE: 'erode',
- BLUR: 'blur',
-
- // TYPOGRAPHY
- NORMAL: 'normal',
- ITALIC: 'italic',
- BOLD: 'bold',
-
- // TYPOGRAPHY-INTERNAL
- _DEFAULT_TEXT_FILL: '#000000',
- _DEFAULT_LEADMULT: 1.25,
- _CTX_MIDDLE: 'middle',
-
- // VERTICES
- LINEAR: 'linear',
- QUADRATIC: 'quadratic',
- BEZIER: 'bezier',
- CURVE: 'curve',
-
- // DEFAULTS
- _DEFAULT_STROKE: '#000000',
- _DEFAULT_FILL: '#FFFFFF'
-
- };
-
- },{}],37:[function(_dereq_,module,exports){
- /**
- * @module Structure
- * @submodule Structure
- * @for p5
- * @requires constants
- */
-
- 'use strict';
-
- _dereq_('./shim');
-
- // Core needs the PVariables object
- var constants = _dereq_('./constants');
-
- /**
- * This is the p5 instance constructor.
- *
- * A p5 instance holds all the properties and methods related to
- * a p5 sketch. It expects an incoming sketch closure and it can also
- * take an optional node parameter for attaching the generated p5 canvas
- * to a node. The sketch closure takes the newly created p5 instance as
- * its sole argument and may optionally set preload(), setup(), and/or
- * draw() properties on it for running a sketch.
- *
- * A p5 sketch can run in "global" or "instance" mode:
- * "global" - all properties and methods are attached to the window
- * "instance" - all properties and methods are bound to this p5 object
- *
- * @param {Function} sketch a closure that can set optional preload(),
- * setup(), and/or draw() properties on the
- * given p5 instance
- * @param {HTMLElement|boolean} [node] element to attach canvas to, if a
- * boolean is passed in use it as sync
- * @param {boolean} [sync] start synchronously (optional)
- * @return {p5} a p5 instance
- */
- var p5 = function(sketch, node, sync) {
-
- if (arguments.length === 2 && typeof node === 'boolean') {
- sync = node;
- node = undefined;
- }
-
- //////////////////////////////////////////////
- // PUBLIC p5 PROPERTIES AND METHODS
- //////////////////////////////////////////////
-
-
- /**
- * Called directly before setup(), the preload() function is used to handle
- * asynchronous loading of external files. If a preload function is
- * defined, setup() will wait until any load calls within have finished.
- * Nothing besides load calls should be inside preload (loadImage,
- * loadJSON, loadFont, loadStrings, etc).<br><br>
- * By default the text "loading..." will be displayed. To make your own
- * loading page, include an HTML element with id "p5_loading" in your
- * page. More information <a href="http://bit.ly/2kQ6Nio">here</a>.
- *
- * @method preload
- * @example
- * <div><code>
- * var img;
- * var c;
- * function preload() { // preload() runs once
- * img = loadImage('assets/laDefense.jpg');
- * }
- *
- * function setup() { // setup() waits until preload() is done
- * img.loadPixels();
- * // get color of middle pixel
- * c = img.get(img.width/2, img.height/2);
- * }
- *
- * function draw() {
- * background(c);
- * image(img, 25, 25, 50, 50);
- * }
- * </code></div>
- *
- * @alt
- * nothing displayed
- *
- */
-
- /**
- * The setup() function is called once when the program starts. It's used to
- * define initial environment properties such as screen size and background
- * color and to load media such as images and fonts as the program starts.
- * There can only be one setup() function for each program and it shouldn't
- * be called again after its initial execution.
- * <br><br>
- * Note: Variables declared within setup() are not accessible within other
- * functions, including draw().
- *
- * @method setup
- * @example
- * <div><code>
- * var a = 0;
- *
- * function setup() {
- * background(0);
- * noStroke();
- * fill(102);
- * }
- *
- * function draw() {
- * rect(a++%width, 10, 2, 80);
- * }
- * </code></div>
- *
- * @alt
- * nothing displayed
- *
- */
-
- /**
- * Called directly after setup(), the draw() function continuously executes
- * the lines of code contained inside its block until the program is stopped
- * or noLoop() is called. Note if noLoop() is called in setup(), draw() will
- * still be executed once before stopping. draw() is called automatically and
- * should never be called explicitly.
- * <br><br>
- * It should always be controlled with noLoop(), redraw() and loop(). After
- * noLoop() stops the code in draw() from executing, redraw() causes the
- * code inside draw() to execute once, and loop() will cause the code
- * inside draw() to resume executing continuously.
- * <br><br>
- * The number of times draw() executes in each second may be controlled with
- * the frameRate() function.
- * <br><br>
- * There can only be one draw() function for each sketch, and draw() must
- * exist if you want the code to run continuously, or to process events such
- * as mousePressed(). Sometimes, you might have an empty call to draw() in
- * your program, as shown in the above example.
- * <br><br>
- * It is important to note that the drawing coordinate system will be reset
- * at the beginning of each draw() call. If any transformations are performed
- * within draw() (ex: scale, rotate, translate, their effects will be
- * undone at the beginning of draw(), so transformations will not accumulate
- * over time. On the other hand, styling applied (ex: fill, stroke, etc) will
- * remain in effect.
- *
- * @method draw
- * @example
- * <div><code>
- * var yPos = 0;
- * function setup() { // setup() runs once
- * frameRate(30);
- * }
- * function draw() { // draw() loops forever, until stopped
- * background(204);
- * yPos = yPos - 1;
- * if (yPos < 0) {
- * yPos = height;
- * }
- * line(0, yPos, width, yPos);
- * }
- * </code></div>
- *
- * @alt
- * nothing displayed
- *
- */
-
-
- //////////////////////////////////////////////
- // PRIVATE p5 PROPERTIES AND METHODS
- //////////////////////////////////////////////
-
- this._setupDone = false;
- // for handling hidpi
- this._pixelDensity = Math.ceil(window.devicePixelRatio) || 1;
- this._userNode = node;
- this._curElement = null;
- this._elements = [];
- this._requestAnimId = 0;
- this._preloadCount = 0;
- this._isGlobal = false;
- this._loop = true;
- this._styles = [];
- this._defaultCanvasSize = {
- width: 100,
- height: 100
- };
- this._events = { // keep track of user-events for unregistering later
- 'mousemove': null,
- 'mousedown': null,
- 'mouseup': null,
- 'dragend': null,
- 'dragover': null,
- 'click': null,
- 'mouseover': null,
- 'mouseout': null,
- 'keydown': null,
- 'keyup': null,
- 'keypress': null,
- 'touchstart': null,
- 'touchmove': null,
- 'touchend': null,
- 'resize': null,
- 'blur': null
- };
-
- this._events.wheel = null;
- this._loadingScreenId = 'p5_loading';
-
- if (window.DeviceOrientationEvent) {
- this._events.deviceorientation = null;
- }
- if (window.DeviceMotionEvent && !window._isNodeWebkit) {
- this._events.devicemotion = null;
- }
-
- this._start = function () {
- // Find node if id given
- if (this._userNode) {
- if (typeof this._userNode === 'string') {
- this._userNode = document.getElementById(this._userNode);
- }
- }
-
- var userPreload = this.preload || window.preload; // look for "preload"
- if (userPreload) {
-
- // Setup loading screen
- // Set loading scfeen into dom if not present
- // Otherwise displays and removes user provided loading screen
- var loadingScreen = document.getElementById(this._loadingScreenId);
- if(!loadingScreen){
- loadingScreen = document.createElement('div');
- loadingScreen.innerHTML = 'Loading...';
- loadingScreen.style.position = 'absolute';
- loadingScreen.id = this._loadingScreenId;
- var node = this._userNode || document.body;
- node.appendChild(loadingScreen);
- }
- // var methods = this._preloadMethods;
- for (var method in this._preloadMethods){
- // default to p5 if no object defined
- this._preloadMethods[method] = this._preloadMethods[method] || p5;
- var obj = this._preloadMethods[method];
- //it's p5, check if it's global or instance
- if (obj === p5.prototype || obj === p5){
- obj = this._isGlobal ? window : this;
- }
- this._registeredPreloadMethods[method] = obj[method];
- obj[method] = this._wrapPreload(obj, method);
- }
-
- userPreload();
- this._runIfPreloadsAreDone();
- } else {
- this._setup();
- this._runFrames();
- this._draw();
- }
- }.bind(this);
-
- this._runIfPreloadsAreDone = function(){
- var context = this._isGlobal ? window : this;
- if (context._preloadCount === 0) {
- var loadingScreen = document.getElementById(context._loadingScreenId);
- if (loadingScreen) {
- loadingScreen.parentNode.removeChild(loadingScreen);
- }
- context._setup();
- context._runFrames();
- context._draw();
- }
- };
-
- this._decrementPreload = function(){
- var context = this._isGlobal ? window : this;
- context._setProperty('_preloadCount', context._preloadCount - 1);
- context._runIfPreloadsAreDone();
- };
-
- this._wrapPreload = function(obj, fnName){
- return function(){
- //increment counter
- this._incrementPreload();
- //call original function
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- args.push(this._decrementPreload.bind(this));
- return this._registeredPreloadMethods[fnName].apply(obj, args);
- }.bind(this);
- };
-
- this._incrementPreload = function(){
- var context = this._isGlobal ? window : this;
- context._setProperty('_preloadCount', context._preloadCount + 1);
- };
-
- this._setup = function() {
-
- // Always create a default canvas.
- // Later on if the user calls createCanvas, this default one
- // will be replaced
- this.createCanvas(
- this._defaultCanvasSize.width,
- this._defaultCanvasSize.height,
- 'p2d',
- true
- );
-
- // return preload functions to their normal vals if switched by preload
- var context = this._isGlobal ? window : this;
- if (typeof context.preload === 'function') {
- for (var f in this._preloadMethods) {
- context[f] = this._preloadMethods[f][f];
- if (context[f] && this) {
- context[f] = context[f].bind(this);
- }
- }
- }
-
- // Short-circuit on this, in case someone used the library in "global"
- // mode earlier
- if (typeof context.setup === 'function') {
- context.setup();
- }
-
- // unhide any hidden canvases that were created
- var canvases = document.getElementsByTagName('canvas');
- for (var i = 0; i < canvases.length; i++) {
- var k = canvases[i];
- if (k.dataset.hidden === 'true') {
- k.style.visibility = '';
- delete(k.dataset.hidden);
- }
- }
- this._setupDone = true;
-
- }.bind(this);
-
- this._draw = function () {
- var now = window.performance.now();
- var time_since_last = now - this._lastFrameTime;
- var target_time_between_frames = 1000 / this._targetFrameRate;
-
- // only draw if we really need to; don't overextend the browser.
- // draw if we're within 5ms of when our next frame should paint
- // (this will prevent us from giving up opportunities to draw
- // again when it's really about time for us to do so). fixes an
- // issue where the frameRate is too low if our refresh loop isn't
- // in sync with the browser. note that we have to draw once even
- // if looping is off, so we bypass the time delay if that
- // is the case.
- var epsilon = 5;
- if (!this._loop ||
- time_since_last >= target_time_between_frames - epsilon) {
-
- //mandatory update values(matrixs and stack)
-
- this._setProperty('frameCount', this.frameCount + 1);
- this.redraw();
- this._updateMouseCoords();
- this._frameRate = 1000.0/(now - this._lastFrameTime);
- this._lastFrameTime = now;
- }
-
- // get notified the next time the browser gives us
- // an opportunity to draw.
- if (this._loop) {
- this._requestAnimId = window.requestAnimationFrame(this._draw);
- }
- }.bind(this);
-
- this._runFrames = function() {
- if (this._updateInterval) {
- clearInterval(this._updateInterval);
- }
- }.bind(this);
-
- this._setProperty = function(prop, value) {
- this[prop] = value;
- if (this._isGlobal) {
- window[prop] = value;
- }
- }.bind(this);
-
- /**
- * Removes the entire p5 sketch. This will remove the canvas and any
- * elements created by p5.js. It will also stop the draw loop and unbind
- * any properties or methods from the window global scope. It will
- * leave a variable p5 in case you wanted to create a new p5 sketch.
- * If you like, you can set p5 = null to erase it.
- * @method remove
- * @example
- * <div class='norender'><code>
- * function draw() {
- * ellipse(50, 50, 10, 10);
- * }
- *
- * function mousePressed() {
- * remove(); // remove whole sketch on mouse press
- * }
- * </code></div>
- *
- * @alt
- * nothing displayed
- *
- */
- this.remove = function() {
- if (this._curElement) {
-
- // stop draw
- this._loop = false;
- if (this._requestAnimId) {
- window.cancelAnimationFrame(this._requestAnimId);
- }
-
- // unregister events sketch-wide
- for (var ev in this._events) {
- window.removeEventListener(ev, this._events[ev]);
- }
-
- // remove DOM elements created by p5, and listeners
- for (var i=0; i<this._elements.length; i++) {
- var e = this._elements[i];
- if (e.elt.parentNode) {
- e.elt.parentNode.removeChild(e.elt);
- }
- for (var elt_ev in e._events) {
- e.elt.removeEventListener(elt_ev, e._events[elt_ev]);
- }
- }
-
- // call any registered remove functions
- var self = this;
- this._registeredMethods.remove.forEach(function (f) {
- if (typeof(f) !== 'undefined') {
- f.call(self);
- }
- });
-
- // remove window bound properties and methods
- if (this._isGlobal) {
- for (var p in p5.prototype) {
- try {
- delete window[p];
- } catch (x) {
- window[p] = undefined;
- }
- }
- for (var p2 in this) {
- if (this.hasOwnProperty(p2)) {
- try {
- delete window[p2];
- } catch (x) {
- window[p2] = undefined;
- }
- }
- }
- }
- }
- // window.p5 = undefined;
- }.bind(this);
-
- // call any registered init functions
- this._registeredMethods.init.forEach(function (f) {
- if (typeof(f) !== 'undefined') {
- f.call(this);
- }
- }, this);
-
- var friendlyBindGlobal = this._createFriendlyGlobalFunctionBinder();
-
- // If the user has created a global setup or draw function,
- // assume "global" mode and make everything global (i.e. on the window)
- if (!sketch) {
- this._isGlobal = true;
- p5.instance = this;
- // Loop through methods on the prototype and attach them to the window
- for (var p in p5.prototype) {
- if(typeof p5.prototype[p] === 'function') {
- var ev = p.substring(2);
- if (!this._events.hasOwnProperty(ev)) {
- if (Math.hasOwnProperty(p) && (Math[p] === p5.prototype[p])) {
- // Multiple p5 methods are just native Math functions. These can be
- // called without any binding.
- friendlyBindGlobal(p, p5.prototype[p]);
- } else {
- friendlyBindGlobal(p, p5.prototype[p].bind(this));
- }
- }
- } else {
- friendlyBindGlobal(p, p5.prototype[p]);
- }
- }
- // Attach its properties to the window
- for (var p2 in this) {
- if (this.hasOwnProperty(p2)) {
- friendlyBindGlobal(p2, this[p2]);
- }
- }
-
- } else {
- // Else, the user has passed in a sketch closure that may set
- // user-provided 'setup', 'draw', etc. properties on this instance of p5
- sketch(this);
- }
-
- // Bind events to window (not using container div bc key events don't work)
-
- for (var e in this._events) {
- var f = this['_on'+e];
- if (f) {
- var m = f.bind(this);
- window.addEventListener(e, m);
- this._events[e] = m;
- }
- }
-
- var focusHandler = function() {
- this._setProperty('focused', true);
- }.bind(this);
- var blurHandler = function() {
- this._setProperty('focused', false);
- }.bind(this);
- window.addEventListener('focus', focusHandler);
- window.addEventListener('blur', blurHandler);
- this.registerMethod('remove', function() {
- window.removeEventListener('focus', focusHandler);
- window.removeEventListener('blur', blurHandler);
- });
-
- if (sync) {
- this._start();
- } else {
- if (document.readyState === 'complete') {
- this._start();
- } else {
- window.addEventListener('load', this._start.bind(this), false);
- }
- }
- };
-
- // This is a pointer to our global mode p5 instance, if we're in
- // global mode.
- p5.instance = null;
-
- // Allows for the friendly error system to be turned off when creating a sketch,
- // which can give a significant boost to performance when needed.
- p5.disableFriendlyErrors = false;
-
- // attach constants to p5 prototype
- for (var k in constants) {
- p5.prototype[k] = constants[k];
- }
-
- // functions that cause preload to wait
- // more can be added by using registerPreloadMethod(func)
- p5.prototype._preloadMethods = {
- loadJSON: p5.prototype,
- loadImage: p5.prototype,
- loadStrings: p5.prototype,
- loadXML: p5.prototype,
- loadShape: p5.prototype,
- loadTable: p5.prototype,
- loadFont: p5.prototype,
- loadModel: p5.prototype
- };
-
- p5.prototype._registeredMethods = { init: [], pre: [], post: [], remove: [] };
-
- p5.prototype._registeredPreloadMethods = {};
-
- p5.prototype.registerPreloadMethod = function(fnString, obj) {
- // obj = obj || p5.prototype;
- if (!p5.prototype._preloadMethods.hasOwnProperty(fnString)) {
- p5.prototype._preloadMethods[fnString] = obj;
- }
- };
-
- p5.prototype.registerMethod = function(name, m) {
- if (!p5.prototype._registeredMethods.hasOwnProperty(name)) {
- p5.prototype._registeredMethods[name] = [];
- }
- p5.prototype._registeredMethods[name].push(m);
- };
-
- p5.prototype._createFriendlyGlobalFunctionBinder = function(options) {
- options = options || {};
-
- var globalObject = options.globalObject || window;
- var log = options.log || console.log.bind(console);
- var propsToForciblyOverwrite = {
- // p5.print actually always overwrites an existing global function,
- // albeit one that is very unlikely to be used:
- //
- // https://developer.mozilla.org/en-US/docs/Web/API/Window/print
- 'print': true
- };
-
- return function(prop, value) {
- if (!p5.disableFriendlyErrors &&
- typeof(IS_MINIFIED) === 'undefined' &&
- typeof(value) === 'function' &&
- !(prop in p5.prototype._preloadMethods)) {
- try {
- // Because p5 has so many common function names, it's likely
- // that users may accidentally overwrite global p5 functions with
- // their own variables. Let's allow this but log a warning to
- // help users who may be doing this unintentionally.
- //
- // For more information, see:
- //
- // https://github.com/processing/p5.js/issues/1317
-
- if (prop in globalObject && !(prop in propsToForciblyOverwrite)) {
- throw new Error('global "' + prop + '" already exists');
- }
-
- // It's possible that this might throw an error because there
- // are a lot of edge-cases in which `Object.defineProperty` might
- // not succeed; since this functionality is only intended to
- // help beginners anyways, we'll just catch such an exception
- // if it occurs, and fall back to legacy behavior.
- Object.defineProperty(globalObject, prop, {
- configurable: true,
- enumerable: true,
- get: function() {
- return value;
- },
- set: function(newValue) {
- Object.defineProperty(globalObject, prop, {
- configurable: true,
- enumerable: true,
- value: newValue,
- writable: true
- });
- log(
- 'You just changed the value of "' + prop + '", which was ' +
- 'a p5 function. This could cause problems later if you\'re ' +
- 'not careful.'
- );
- }
- });
- } catch (e) {
- log(
- 'p5 had problems creating the global function "' + prop + '", ' +
- 'possibly because your code is already using that name as ' +
- 'a variable. You may want to rename your variable to something ' +
- 'else.'
- );
- globalObject[prop] = value;
- }
- } else {
- globalObject[prop] = value;
- }
- };
- };
-
- module.exports = p5;
-
- },{"./constants":36,"./shim":46}],38:[function(_dereq_,module,exports){
- /**
- * @module Shape
- * @submodule Curves
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('./core');
-
- _dereq_('./error_helpers');
-
- var bezierDetail = 20;
- var curveDetail = 20;
-
- /**
- * Draws a cubic Bezier curve on the screen. These curves are defined by a
- * series of anchor and control points. The first two parameters specify
- * the first anchor point and the last two parameters specify the other
- * anchor point, which become the first and last points on the curve. The
- * middle parameters specify the two control points which define the shape
- * of the curve. Approximately speaking, control points "pull" the curve
- * towards them.<br /><br />Bezier curves were developed by French
- * automotive engineer Pierre Bezier, and are commonly used in computer
- * graphics to define gently sloping curves. See also curve().
- *
- * @method bezier
- * @param {Number} x1 x-coordinate for the first anchor point
- * @param {Number} y1 y-coordinate for the first anchor point
- * @param {Number} x2 x-coordinate for the first control point
- * @param {Number} y2 y-coordinate for the first control point
- * @param {Number} x3 x-coordinate for the second control point
- * @param {Number} y3 y-coordinate for the second control point
- * @param {Number} x4 x-coordinate for the second anchor point
- * @param {Number} y4 y-coordinate for the second anchor point
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * noFill();
- * stroke(255, 102, 0);
- * line(85, 20, 10, 10);
- * line(90, 90, 15, 80);
- * stroke(0, 0, 0);
- * bezier(85, 20, 10, 10, 90, 90, 15, 80);
- * </code>
- * </div>
- * @alt
- * stretched black s-shape in center with orange lines extending from end points.
- * stretched black s-shape with 10 5x5 white ellipses along the shape.
- * stretched black s-shape with 7 5x5 ellipses and orange lines along the shape.
- * stretched black s-shape with 17 small orange lines extending from under shape.
- * horseshoe shape with orange ends facing left and black curved center.
- * horseshoe shape with orange ends facing left and black curved center.
- * Line shaped like right-facing arrow,points move with mouse-x and warp shape.
- * horizontal line that hooks downward on the right and 13 5x5 ellipses along it.
- * right curving line mid-right of canvas with 7 short lines radiating from it.
- */
- /**
- * @method bezier
- * @param {Number} z1 z-coordinate for the first anchor point
- * @param {Number} z2 z-coordinate for the first control point
- * @param {Number} z3 z-coordinate for the first anchor point
- * @param {Number} z4 z-coordinate for the first control point
- * @return {p5.Renderer3D} [description]
- * @example
- * <div>
- * <code>
- *background(0, 0, 0);
- *noFill();
- *stroke(255);
- *bezier(250,250,0, 100,100,0, 100,0,0, 0,100,0);
- * </code>
- * </div>
- */
- p5.prototype.bezier = function() {
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- if (!this._renderer._doStroke && !this._renderer._doFill) {
- return this;
- }
- if (this._renderer.isP3D){
- args.push(bezierDetail);//adding value of bezier detail to the args array
- this._renderer.bezier(args);
- } else{
- this._renderer.bezier(args[0],args[1],
- args[2],args[3],
- args[4],args[5],
- args[6],args[7]);
- }
-
- return this;
- };
-
- /**
- * Sets the resolution at which Beziers display.
- *
- * The default value is 20.
- *
- * @param {Number} detail resolution of the curves
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * background(204);
- * bezierDetail(50);
- * bezier(85, 20, 10, 10, 90, 90, 15, 80);
- * </code>
- * </div>
- *
- * @alt
- * stretched black s-shape with 7 5x5 ellipses and orange lines along the shape.
- *
- */
- p5.prototype.bezierDetail = function(d) {
- bezierDetail = d;
- return this;
- };
-
- /**
- * Evaluates the Bezier at position t for points a, b, c, d.
- * The parameters a and d are the first and last points
- * on the curve, and b and c are the control points.
- * The final parameter t varies between 0 and 1.
- * This can be done once with the x coordinates and a second time
- * with the y coordinates to get the location of a bezier curve at t.
- *
- * @method bezierPoint
- * @param {Number} a coordinate of first point on the curve
- * @param {Number} b coordinate of first control point
- * @param {Number} c coordinate of second control point
- * @param {Number} d coordinate of second point on the curve
- * @param {Number} t value between 0 and 1
- * @return {Number} the value of the Bezier at position t
- * @example
- * <div>
- * <code>
- * noFill();
- * x1 = 85, x2 = 10, x3 = 90, x4 = 15;
- * y1 = 20, y2 = 10, y3 = 90, y4 = 80;
- * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
- * fill(255);
- * steps = 10;
- * for (i = 0; i <= steps; i++) {
- * t = i / steps;
- * x = bezierPoint(x1, x2, x3, x4, t);
- * y = bezierPoint(y1, y2, y3, y4, t);
- * ellipse(x, y, 5, 5);
- * }
- * </code>
- * </div>
- *
- * @alt
- * stretched black s-shape with 17 small orange lines extending from under shape.
- *
- */
- p5.prototype.bezierPoint = function(a, b, c, d, t) {
- var adjustedT = 1-t;
- return Math.pow(adjustedT,3)*a +
- 3*(Math.pow(adjustedT,2))*t*b +
- 3*adjustedT*Math.pow(t,2)*c +
- Math.pow(t,3)*d;
- };
-
- /**
- * Evaluates the tangent to the Bezier at position t for points a, b, c, d.
- * The parameters a and d are the first and last points
- * on the curve, and b and c are the control points.
- * The final parameter t varies between 0 and 1.
- *
- * @method bezierTangent
- * @param {Number} a coordinate of first point on the curve
- * @param {Number} b coordinate of first control point
- * @param {Number} c coordinate of second control point
- * @param {Number} d coordinate of second point on the curve
- * @param {Number} t value between 0 and 1
- * @return {Number} the tangent at position t
- * @example
- * <div>
- * <code>
- * noFill();
- * bezier(85, 20, 10, 10, 90, 90, 15, 80);
- * steps = 6;
- * fill(255);
- * for (i = 0; i <= steps; i++) {
- * t = i / steps;
- * // Get the location of the point
- * x = bezierPoint(85, 10, 90, 15, t);
- * y = bezierPoint(20, 10, 90, 80, t);
- * // Get the tangent points
- * tx = bezierTangent(85, 10, 90, 15, t);
- * ty = bezierTangent(20, 10, 90, 80, t);
- * // Calculate an angle from the tangent points
- * a = atan2(ty, tx);
- * a += PI;
- * stroke(255, 102, 0);
- * line(x, y, cos(a)*30 + x, sin(a)*30 + y);
- * // The following line of code makes a line
- * // inverse of the above line
- * //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);
- * stroke(0);
- * ellipse(x, y, 5, 5);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * noFill();
- * bezier(85, 20, 10, 10, 90, 90, 15, 80);
- * stroke(255, 102, 0);
- * steps = 16;
- * for (i = 0; i <= steps; i++) {
- * t = i / steps;
- * x = bezierPoint(85, 10, 90, 15, t);
- * y = bezierPoint(20, 10, 90, 80, t);
- * tx = bezierTangent(85, 10, 90, 15, t);
- * ty = bezierTangent(20, 10, 90, 80, t);
- * a = atan2(ty, tx);
- * a -= HALF_PI;
- * line(x, y, cos(a)*8 + x, sin(a)*8 + y);
- * }
- * </code>
- * </div>
- *
- * @alt
- * s-shaped line with 17 short orange lines extending from underside of shape
- *
- */
- p5.prototype.bezierTangent = function(a, b, c, d, t) {
- var adjustedT = 1-t;
- return 3*d*Math.pow(t,2) -
- 3*c*Math.pow(t,2) +
- 6*c*adjustedT*t -
- 6*b*adjustedT*t +
- 3*b*Math.pow(adjustedT,2) -
- 3*a*Math.pow(adjustedT,2);
- };
-
- /**
- * Draws a curved line on the screen between two points, given as the
- * middle four parameters. The first two parameters are a control point, as
- * if the curve came from this point even though it's not drawn. The last
- * two parameters similarly describe the other control point. <br /><br />
- * Longer curves can be created by putting a series of curve() functions
- * together or using curveVertex(). An additional function called
- * curveTightness() provides control for the visual quality of the curve.
- * The curve() function is an implementation of Catmull-Rom splines.
- *
- * @method curve
- * @param {Number} x1 x-coordinate for the beginning control point
- * @param {Number} y1 y-coordinate for the beginning control point
- * @param {Number} x2 x-coordinate for the first point
- * @param {Number} y2 y-coordinate for the first point
- * @param {Number} x3 x-coordinate for the second point
- * @param {Number} y3 y-coordinate for the second point
- * @param {Number} x4 x-coordinate for the ending control point
- * @param {Number} y4 y-coordinate for the ending control point
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * noFill();
- * stroke(255, 102, 0);
- * curve(5, 26, 5, 26, 73, 24, 73, 61);
- * stroke(0);
- * curve(5, 26, 73, 24, 73, 61, 15, 65);
- * stroke(255, 102, 0);
- * curve(73, 24, 73, 61, 15, 65, 15, 65);
- * </code>
- * </div>
- * <div>
- * <code>
- * // Define the curve points as JavaScript objects
- * p1 = {x: 5, y: 26}, p2 = {x: 73, y: 24}
- * p3 = {x: 73, y: 61}, p4 = {x: 15, y: 65}
- * noFill();
- * stroke(255, 102, 0);
- * curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y)
- * stroke(0);
- * curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y)
- * stroke(255, 102, 0);
- * curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y)
- * </code>
- * </div>
- *
- * @alt
- * horseshoe shape with orange ends facing left and black curved center.
- * horseshoe shape with orange ends facing left and black curved center.
- *
- */
- /**
- * @method curve
- * @param {Number} z1 z-coordinate for the beginning control point
- * @param {Number} z2 z-coordinate for the first point
- * @param {Number} z3 z-coordinate for the second point
- * @param {Number} z4 z-coordinate for the ending control point
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * noFill();
- * stroke(255, 102, 0);
- * curve(5,26,0, 5,26,0, 73,24,0, 73,61,0);
- * stroke(0);
- * curve(5,26,0, 73,24,0, 73,61,0, 15,65,0);
- * stroke(255, 102, 0);
- * curve(73,24,0, 73,61,0, 15,65,0, 15,65,0);
- * </code>
- * </div>
- *
- * @alt
- * curving black and orange lines.
- */
- p5.prototype.curve = function() {
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- if (!this._renderer._doStroke) {
- return this;
- }
- if (this._renderer.isP3D){
- args.push(curveDetail);
- this._renderer.curve(args);
- } else{
- this._renderer.curve(args[0],args[1],
- args[2],args[3],
- args[4],args[5],
- args[6],args[7]);
- }
- return this;
- };
-
- /**
- * Sets the resolution at which curves display.
- *
- * The default value is 20.
- *
- * @param {Number} resolution of the curves
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * background(204);
- * curveDetail(20);
- * curve(5, 26, 5, 26, 73, 24, 73, 61);
- * </code>
- * </div>
- *
- * @alt
- * white arch shape in top-mid canvas.
- *
- */
- p5.prototype.curveDetail = function(d) {
- curveDetail = d;
- return this;
- };
-
- /**
- * Modifies the quality of forms created with curve() and curveVertex().
- * The parameter tightness determines how the curve fits to the vertex
- * points. The value 0.0 is the default value for tightness (this value
- * defines the curves to be Catmull-Rom splines) and the value 1.0 connects
- * all the points with straight lines. Values within the range -5.0 and 5.0
- * will deform the curves but will leave them recognizable and as values
- * increase in magnitude, they will continue to deform.
- *
- * @method curveTightness
- * @param {Number} amount of deformation from the original vertices
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * // Move the mouse left and right to see the curve change
- *
- * function setup() {
- * createCanvas(100, 100);
- * noFill();
- * }
- *
- * function draw() {
- * background(204);
- * var t = map(mouseX, 0, width, -5, 5);
- * curveTightness(t);
- * beginShape();
- * curveVertex(10, 26);
- * curveVertex(10, 26);
- * curveVertex(83, 24);
- * curveVertex(83, 61);
- * curveVertex(25, 65);
- * curveVertex(25, 65);
- * endShape();
- * }
- * </code>
- * </div>
- *
- * @alt
- * Line shaped like right-facing arrow,points move with mouse-x and warp shape.
- */
- p5.prototype.curveTightness = function (t) {
- this._renderer._curveTightness = t;
- };
-
- /**
- * Evaluates the curve at position t for points a, b, c, d.
- * The parameter t varies between 0 and 1, a and d are points
- * on the curve, and b and c are the control points.
- * This can be done once with the x coordinates and a second time
- * with the y coordinates to get the location of a curve at t.
- *
- * @method curvePoint
- * @param {Number} a coordinate of first point on the curve
- * @param {Number} b coordinate of first control point
- * @param {Number} c coordinate of second control point
- * @param {Number} d coordinate of second point on the curve
- * @param {Number} t value between 0 and 1
- * @return {Number} bezier value at position t
- * @example
- * <div>
- * <code>
- * noFill();
- * curve(5, 26, 5, 26, 73, 24, 73, 61);
- * curve(5, 26, 73, 24, 73, 61, 15, 65);
- * fill(255);
- * ellipseMode(CENTER);
- * steps = 6;
- * for (i = 0; i <= steps; i++) {
- * t = i / steps;
- * x = curvePoint(5, 5, 73, 73, t);
- * y = curvePoint(26, 26, 24, 61, t);
- * ellipse(x, y, 5, 5);
- * x = curvePoint(5, 73, 73, 15, t);
- * y = curvePoint(26, 24, 61, 65, t);
- * ellipse(x, y, 5, 5);
- * }
- * </code>
- * </div>
- *
- *line hooking down to right-bottom with 13 5x5 white ellipse points
- */
- p5.prototype.curvePoint = function(a, b, c, d, t) {
- var t3 = t*t*t,
- t2 = t*t,
- f1 = -0.5 * t3 + t2 - 0.5 * t,
- f2 = 1.5 * t3 - 2.5 * t2 + 1.0,
- f3 = -1.5 * t3 + 2.0 * t2 + 0.5 * t,
- f4 = 0.5 * t3 - 0.5 * t2;
- return a*f1 + b*f2 + c*f3 + d*f4;
- };
-
- /**
- * Evaluates the tangent to the curve at position t for points a, b, c, d.
- * The parameter t varies between 0 and 1, a and d are points on the curve,
- * and b and c are the control points.
- *
- * @method curveTangent
- * @param {Number} a coordinate of first point on the curve
- * @param {Number} b coordinate of first control point
- * @param {Number} c coordinate of second control point
- * @param {Number} d coordinate of second point on the curve
- * @param {Number} t value between 0 and 1
- * @return {Number} the tangent at position t
- * @example
- * <div>
- * <code>
- * noFill();
- * curve(5, 26, 73, 24, 73, 61, 15, 65);
- * steps = 6;
- * for (i = 0; i <= steps; i++) {
- * t = i / steps;
- * x = curvePoint(5, 73, 73, 15, t);
- * y = curvePoint(26, 24, 61, 65, t);
- * //ellipse(x, y, 5, 5);
- * tx = curveTangent(5, 73, 73, 15, t);
- * ty = curveTangent(26, 24, 61, 65, t);
- * a = atan2(ty, tx);
- * a -= PI/2.0;
- * line(x, y, cos(a)*8 + x, sin(a)*8 + y);
- * }
- * </code>
- * </div>
- *
- * @alt
- *right curving line mid-right of canvas with 7 short lines radiating from it.
- */
- p5.prototype.curveTangent = function(a, b,c, d, t) {
- var t2 = t*t,
- f1 = (-3*t2)/2 + 2*t - 0.5,
- f2 = (9*t2)/2 - 5*t,
- f3 = (-9*t2)/2 + 4*t + 0.5,
- f4 = (3*t2)/2 - t;
- return a*f1 + b*f2 + c*f3 + d*f4;
- };
-
- module.exports = p5;
-
- },{"./core":37,"./error_helpers":40}],39:[function(_dereq_,module,exports){
- /**
- * @module Environment
- * @submodule Environment
- * @for p5
- * @requires core
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('./core');
- var C = _dereq_('./constants');
-
- var standardCursors = [C.ARROW, C.CROSS, C.HAND, C.MOVE, C.TEXT, C.WAIT];
-
- p5.prototype._frameRate = 0;
- p5.prototype._lastFrameTime = window.performance.now();
- p5.prototype._targetFrameRate = 60;
-
- var _windowPrint = window.print;
-
-
- if (window.console && console.log) {
- /**
- * The print() function writes to the console area of your browser.
- * This function is often helpful for looking at the data a program is
- * producing. This function creates a new line of text for each call to
- * the function. Individual elements can be
- * separated with quotes ("") and joined with the addition operator (+).
- * <br><br>
- * While print() is similar to console.log(), it does not directly map to
- * it in order to simulate easier to understand behavior than
- * console.log(). Due to this, it is slower. For fastest results, use
- * console.log().
- *
- * @method print
- * @param {Any} contents any combination of Number, String, Object, Boolean,
- * Array to print
- * @example
- * <div><code class='norender'>
- * var x = 10;
- * print("The value of x is " + x);
- * // prints "The value of x is 10"
- * </code></div>
- * @alt
- * default grey canvas
- */
- // Converts passed args into a string and then parses that string to
- // simulate synchronous behavior. This is a hack and is gross.
- // Since this will not work on all objects, particularly circular
- // structures, simply console.log() on error.
- p5.prototype.print = function(args) {
- try {
- if (arguments.length === 0) {
- _windowPrint();
- }
- else if (arguments.length > 1) {
- console.log.apply(console, arguments);
- } else {
- var newArgs = JSON.parse(JSON.stringify(args));
- console.log(newArgs);
- }
- } catch(err) {
- console.log(args);
- }
- };
- } else {
- p5.prototype.print = function() {};
- }
-
-
- /**
- * The system variable frameCount contains the number of frames that have
- * been displayed since the program started. Inside setup() the value is 0,
- * after the first iteration of draw it is 1, etc.
- *
- * @property frameCount
- * @example
- * <div><code>
- * function setup() {
- * frameRate(30);
- * textSize(20);
- * textSize(30);
- * textAlign(CENTER);
- * }
- *
- * function draw() {
- * background(200);
- * text(frameCount, width/2, height/2);
- * }
- * </code></div>
- *
- * @alt
- * numbers rapidly counting upward with frame count set to 30.
- *
- */
- p5.prototype.frameCount = 0;
-
- /**
- * Confirms if the window a p5.js program is in is "focused," meaning that
- * the sketch will accept mouse or keyboard input. This variable is
- * "true" if the window is focused and "false" if not.
- *
- * @property focused
- * @example
- * <div><code>
- * // To demonstrate, put two windows side by side.
- * // Click on the window that the p5 sketch isn't in!
- * function draw() {
- * background(200);
- * noStroke();
- * fill(0, 200, 0);
- * ellipse(25, 25, 50, 50);
- *
- * if (!focused) { // or "if (focused === false)"
- * stroke(200,0,0);
- * line(0, 0, 100, 100);
- * line(100, 0, 0, 100);
- * }
- * }
- * </code></div>
- *
- * @alt
- * green 50x50 ellipse at top left. Red X covers canvas when page focus changes
- *
- */
- p5.prototype.focused = (document.hasFocus());
-
- /**
- * Sets the cursor to a predefined symbol or an image, or makes it visible
- * if already hidden. If you are trying to set an image as the cursor, the
- * recommended size is 16x16 or 32x32 pixels. It is not possible to load an
- * image as the cursor if you are exporting your program for the Web, and not
- * all MODES work with all browsers. The values for parameters x and y must
- * be less than the dimensions of the image.
- *
- * @method cursor
- * @param {Number/Constant} type either ARROW, CROSS, HAND, MOVE, TEXT, or
- * WAIT, or path for image
- * @param {Number} [x] the horizontal active spot of the cursor
- * @param {Number} [y] the vertical active spot of the cursor
- * @example
- * <div><code>
- * // Move the mouse left and right across the image
- * // to see the cursor change from a cross to a hand
- * function draw() {
- * line(width/2, 0, width/2, height);
- * if (mouseX < 50) {
- * cursor(CROSS);
- * } else {
- * cursor(HAND);
- * }
- * }
- * </code></div>
- *
- * @alt
- * horizontal line divides canvas. cursor on left is a cross, right is hand.
- *
- */
- p5.prototype.cursor = function(type, x, y) {
- var cursor = 'auto';
- var canvas = this._curElement.elt;
- if (standardCursors.indexOf(type) > -1) {
- // Standard css cursor
- cursor = type;
- } else if (typeof type === 'string') {
- var coords = '';
- if (x && y && (typeof x === 'number' && typeof y === 'number')) {
- // Note that x and y values must be unit-less positive integers < 32
- // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
- coords = x + ' ' + y;
- }
- if ((type.substring(0, 7) === 'http://') ||
- (type.substring(0, 8) === 'https://')) {
- // Image (absolute url)
- cursor = 'url(' + type + ') ' + coords + ', auto';
- } else if (/\.(cur|jpg|jpeg|gif|png|CUR|JPG|JPEG|GIF|PNG)$/.test(type)) {
- // Image file (relative path) - Separated for performance reasons
- cursor = 'url(' + type + ') ' + coords + ', auto';
- } else {
- // Any valid string for the css cursor property
- cursor = type;
- }
- }
- canvas.style.cursor = cursor;
- };
-
- /**
- * Specifies the number of frames to be displayed every second. For example,
- * the function call frameRate(30) will attempt to refresh 30 times a second.
- * If the processor is not fast enough to maintain the specified rate, the
- * frame rate will not be achieved. Setting the frame rate within setup() is
- * recommended. The default rate is 60 frames per second. This is the same as
- * setFrameRate(val).
- * <br><br>
- * Calling frameRate() with no arguments returns the current framerate. This
- * is the same as getFrameRate().
- * <br><br>
- * Calling frameRate() with arguments that are not of the type numbers
- * or are non positive also returns current framerate.
- *
- * @method frameRate
- * @param {Number} [fps] number of frames to be displayed every second
- * @return {Number} current frameRate
- * @example
- *
- * <div><code>
- * var rectX = 0;
- * var fr = 30; //starting FPS
- * var clr;
- *
- * function setup() {
- * background(200);
- * frameRate(fr); // Attempt to refresh at starting FPS
- * clr = color(255,0,0);
- * }
- *
- * function draw() {
- * background(200);
- * rectX = rectX += 1; // Move Rectangle
- *
- * if (rectX >= width) { // If you go off screen.
- * if (fr == 30) {
- * clr = color(0,0,255);
- * fr = 10;
- * frameRate(fr); // make frameRate 10 FPS
- * } else {
- * clr = color(255,0,0);
- * fr = 30;
- * frameRate(fr); // make frameRate 30 FPS
- * }
- * rectX = 0;
- * }
- * fill(clr);
- * rect(rectX, 40, 20,20);
- * }
- * </div></code>
- *
- * @alt
- * blue rect moves left to right, followed by red rect moving faster. Loops.
- *
- */
- p5.prototype.frameRate = function(fps) {
- if (typeof fps !== 'number' || fps <= 0) {
- return this._frameRate;
- } else {
- this._setProperty('_targetFrameRate', fps);
- this._runFrames();
- return this;
- }
- };
- /**
- * Returns the current framerate.
- *
- * @return {Number} current frameRate
- */
- p5.prototype.getFrameRate = function() {
- return this.frameRate();
- };
-
- /**
- * Specifies the number of frames to be displayed every second. For example,
- * the function call frameRate(30) will attempt to refresh 30 times a second.
- * If the processor is not fast enough to maintain the specified rate, the
- * frame rate will not be achieved. Setting the frame rate within setup() is
- * recommended. The default rate is 60 frames per second.
- *
- * Calling frameRate() with no arguments returns the current framerate.
- *
- * @param {Number} [fps] number of frames to be displayed every second
- */
- p5.prototype.setFrameRate = function(fps) {
- return this.frameRate(fps);
- };
-
- /**
- * Hides the cursor from view.
- *
- * @method noCursor
- * @example
- * <div><code>
- * function setup() {
- * noCursor();
- * }
- *
- * function draw() {
- * background(200);
- * ellipse(mouseX, mouseY, 10, 10);
- * }
- * </code></div>
- *
- *
- * @alt
- * cursor becomes 10x 10 white ellipse the moves with mouse x and y.
- *
- */
- p5.prototype.noCursor = function() {
- this._curElement.elt.style.cursor = 'none';
- };
-
-
- /**
- * System variable that stores the width of the entire screen display. This
- * is used to run a full-screen program on any display size.
- *
- * @property displayWidth
- * @example
- * <div class="norender"><code>
- * createCanvas(displayWidth, displayHeight);
- * </code></div>
- *
- * @alt
- * cursor becomes 10x 10 white ellipse the moves with mouse x and y.
- *
- */
- p5.prototype.displayWidth = screen.width;
-
- /**
- * System variable that stores the height of the entire screen display. This
- * is used to run a full-screen program on any display size.
- *
- * @property displayHeight
- * @example
- * <div class="norender"><code>
- * createCanvas(displayWidth, displayHeight);
- * </code></div>
- *
- * @alt
- * no display.
- *
- */
- p5.prototype.displayHeight = screen.height;
-
- /**
- * System variable that stores the width of the inner window, it maps to
- * window.innerWidth.
- *
- * @property windowWidth
- * @example
- * <div class="norender"><code>
- * createCanvas(windowWidth, windowHeight);
- * </code></div>
- *
- * @alt
- * no display.
- *
- */
- p5.prototype.windowWidth = getWindowWidth();
- /**
- * System variable that stores the height of the inner window, it maps to
- * window.innerHeight.
- *
- * @property windowHeight
- * @example
- * <div class="norender"><code>
- * createCanvas(windowWidth, windowHeight);
- * </code></div>
- *@alt
- * no display.
- *
- */
- p5.prototype.windowHeight = getWindowHeight();
-
- /**
- * The windowResized() function is called once every time the browser window
- * is resized. This is a good place to resize the canvas or do any other
- * adjustments to accommodate the new window size.
- *
- * @method windowResized
- * @example
- * <div class="norender"><code>
- * function setup() {
- * createCanvas(windowWidth, windowHeight);
- * }
- *
- * function draw() {
- * background(0, 100, 200);
- * }
- *
- * function windowResized() {
- * resizeCanvas(windowWidth, windowHeight);
- * }
- * </code></div>
- * @alt
- * no display.
- */
- p5.prototype._onresize = function(e){
- this._setProperty('windowWidth', getWindowWidth());
- this._setProperty('windowHeight', getWindowHeight());
- var context = this._isGlobal ? window : this;
- var executeDefault;
- if (typeof context.windowResized === 'function') {
- executeDefault = context.windowResized(e);
- if (executeDefault !== undefined && !executeDefault) {
- e.preventDefault();
- }
- }
- };
-
- function getWindowWidth() {
- return window.innerWidth ||
- document.documentElement && document.documentElement.clientWidth ||
- document.body && document.body.clientWidth ||
- 0;
- }
-
- function getWindowHeight() {
- return window.innerHeight ||
- document.documentElement && document.documentElement.clientHeight ||
- document.body && document.body.clientHeight ||
- 0;
- }
-
- /**
- * System variable that stores the width of the drawing canvas. This value
- * is set by the first parameter of the createCanvas() function.
- * For example, the function call createCanvas(320, 240) sets the width
- * variable to the value 320. The value of width defaults to 100 if
- * createCanvas() is not used in a program.
- *
- * @property width
- */
- p5.prototype.width = 0;
-
- /**
- * System variable that stores the height of the drawing canvas. This value
- * is set by the second parameter of the createCanvas() function. For
- * example, the function call createCanvas(320, 240) sets the height
- * variable to the value 240. The value of height defaults to 100 if
- * createCanvas() is not used in a program.
- *
- * @property height
- */
- p5.prototype.height = 0;
-
- /**
- * If argument is given, sets the sketch to fullscreen or not based on the
- * value of the argument. If no argument is given, returns the current
- * fullscreen state. Note that due to browser restrictions this can only
- * be called on user input, for example, on mouse press like the example
- * below.
- *
- * @method fullscreen
- * @param {Boolean} [val] whether the sketch should be in fullscreen mode
- * or not
- * @return {Boolean} current fullscreen state
- * @example
- * <div>
- * <code>
- * // Clicking in the box toggles fullscreen on and off.
- * function setup() {
- * background(200);
- * }
- * function mousePressed() {
- * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
- * var fs = fullscreen();
- * fullscreen(!fs);
- * }
- * }
- * </code>
- * </div>
- *
- * @alt
- * no display.
- *
- */
- p5.prototype.fullscreen = function(val) {
- // no arguments, return fullscreen or not
- if (typeof val === 'undefined') {
- return document.fullscreenElement ||
- document.webkitFullscreenElement ||
- document.mozFullScreenElement ||
- document.msFullscreenElement;
- } else { // otherwise set to fullscreen or not
- if (val) {
- launchFullscreen(document.documentElement);
- } else {
- exitFullscreen();
- }
- }
- };
-
- /**
- * Sets the pixel scaling for high pixel density displays. By default
- * pixel density is set to match display density, call pixelDensity(1)
- * to turn this off. Calling pixelDensity() with no arguments returns
- * the current pixel density of the sketch.
- *
- *
- * @method pixelDensity
- * @param {Number} [val] whether or how much the sketch should scale
- * @returns {Number} current pixel density of the sketch
- * @example
- * <div>
- * <code>
- * function setup() {
- * pixelDensity(1);
- * createCanvas(100, 100);
- * background(200);
- * ellipse(width/2, height/2, 50, 50);
- * }
- * </code>
- * </div>
- * <div>
- * <code>
- * function setup() {
- * pixelDensity(3.0);
- * createCanvas(100, 100);
- * background(200);
- * ellipse(width/2, height/2, 50, 50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * fuzzy 50x50 white ellipse with black outline in center of canvas.
- * sharp 50x50 white ellipse with black outline in center of canvas.
- */
- p5.prototype.pixelDensity = function(val) {
- if (typeof val === 'number') {
- this._pixelDensity = val;
- } else {
- return this._pixelDensity;
- }
- this.resizeCanvas(this.width, this.height, true);
- };
-
- /**
- * Returns the pixel density of the current display the sketch is running on.
- *
- * @method displayDensity
- * @returns {Number} current pixel density of the display
- * @example
- * <div>
- * <code>
- * function setup() {
- * var density = displayDensity();
- * pixelDensity(density);
- * createCanvas(100, 100);
- * background(200);
- * ellipse(width/2, height/2, 50, 50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * 50x50 white ellipse with black outline in center of canvas.
- */
- p5.prototype.displayDensity = function() {
- return window.devicePixelRatio;
- };
-
- function launchFullscreen(element) {
- var enabled = document.fullscreenEnabled ||
- document.webkitFullscreenEnabled ||
- document.mozFullScreenEnabled ||
- document.msFullscreenEnabled;
- if (!enabled) {
- throw new Error('Fullscreen not enabled in this browser.');
- }
- if(element.requestFullscreen) {
- element.requestFullscreen();
- } else if(element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- } else if(element.webkitRequestFullscreen) {
- element.webkitRequestFullscreen();
- } else if(element.msRequestFullscreen) {
- element.msRequestFullscreen();
- }
- }
-
- function exitFullscreen() {
- if(document.exitFullscreen) {
- document.exitFullscreen();
- } else if(document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- } else if(document.webkitExitFullscreen) {
- document.webkitExitFullscreen();
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen();
- }
- }
-
-
- /**
- * Gets the current URL.
- * @method getURL
- * @return {String} url
- * @example
- * <div>
- * <code>
- * var url;
- * var x = 100;
- *
- * function setup() {
- * fill(0);
- * noStroke();
- * url = getURL();
- * }
- *
- * function draw() {
- * background(200);
- * text(url, x, height/2);
- * x--;
- * }
- * </code>
- * </div>
- *
- * @alt
- * current url (http://p5js.org/reference/#/p5/getURL) moves right to left.
- *
- */
- p5.prototype.getURL = function() {
- return location.href;
- };
- /**
- * Gets the current URL path as an array.
- * @method getURLPath
- * @return {Array} path components
- * @example
- * <div class='norender'><code>
- * function setup() {
- * var urlPath = getURLPath();
- * for (var i=0; i<urlPath.length; i++) {
- * text(urlPath[i], 10, i*20+20);
- * }
- * }
- * </code></div>
- *
- * @alt
- *no display
- *
- */
- p5.prototype.getURLPath = function() {
- return location.pathname.split('/').filter(function(v){return v!=='';});
- };
- /**
- * Gets the current URL params as an Object.
- * @method getURLParams
- * @return {Object} URL params
- * @example
- * <div class='norender'>
- * <code>
- * // Example: http://p5js.org?year=2014&month=May&day=15
- *
- * function setup() {
- * var params = getURLParams();
- * text(params.day, 10, 20);
- * text(params.month, 10, 40);
- * text(params.year, 10, 60);
- * }
- * </code>
- * </div>
- * @alt
- * no display.
- *
- */
- p5.prototype.getURLParams = function() {
- var re = /[?&]([^&=]+)(?:[&=])([^&=]+)/gim;
- var m;
- var v={};
- while ((m = re.exec(location.search)) != null) {
- if (m.index === re.lastIndex) {
- re.lastIndex++;
- }
- v[m[1]]=m[2];
- }
- return v;
- };
-
- module.exports = p5;
-
- },{"./constants":36,"./core":37}],40:[function(_dereq_,module,exports){
- /**
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('./core');
- var doFriendlyWelcome = false; // TEMP until we get it all working LM
-
- // -- Borrowed from jQuery 1.11.3 --
- var class2type = {};
- var toString = class2type.toString;
- var names = ['Boolean', 'Number', 'String', 'Function',
- 'Array', 'Date', 'RegExp', 'Object', 'Error'];
- for (var n=0; n<names.length; n++) {
- class2type[ '[object ' + names[n] + ']' ] = names[n].toLowerCase();
- }
- var getType = function( obj ) {
- if ( obj == null ) {
- return obj + '';
- }
- return typeof obj === 'object' || typeof obj === 'function' ?
- class2type[ toString.call(obj) ] || 'object' :
- typeof obj;
- };
-
- // -- End borrow --
-
-
- /**
- * Prints out a fancy, colorful message to the console log
- *
- * @param {String} message the words to be said
- * @param {String} func the name of the function to link
- * @param {Integer/Color String} color CSS color string or error type
- *
- * @return console logs
- */
- // Wrong number of params, undefined param, wrong type
- var FILE_LOAD = 3;
- // p5.js blue, p5.js orange, auto dark green; fallback p5.js darkened magenta
- // See testColors below for all the color codes and names
- var typeColors = ['#2D7BB6', '#EE9900', '#4DB200', '#C83C00'];
- function report(message, func, color) {
- if(doFriendlyWelcome){
- friendlyWelcome();
- doFriendlyWelcome =false;
- }
- if ('undefined' === getType(color)) {
- color = '#B40033'; // dark magenta
- } else if (getType(color) === 'number') { // Type to color
- color = typeColors[color];
- }
- // LM TEMP commenting this out until we get the whole system working
- // if (func.substring(0,4) === 'load'){
- // console.log(
- // '%c> p5.js says: '+message+'%c'+
- // '[https://github.com/processing/p5.js/wiki/Local-server]',
- // 'background-color:' + color + ';color:#FFF;',
- // 'background-color:transparent;color:' + color +';',
- // 'background-color:' + color + ';color:#FFF;',
- // 'background-color:transparent;color:' + color +';'
- // );
- // }
- // else{
- // console.log(
- // '%c> p5.js says: '+message+'%c [http://p5js.org/reference/#p5/'+func+
- // ']', 'background-color:' + color + ';color:#FFF;',
- // 'background-color:transparent;color:' + color +';'
- // );
- // }
- }
-
- var errorCases = {
- '0': {
- fileType: 'image',
- method: 'loadImage',
- message: ' hosting the image online,'
- },
- '1': {
- fileType: 'XML file',
- method: 'loadXML'
- },
- '2': {
- fileType: 'table file',
- method: 'loadTable'
- },
- '3': {
- fileType: 'text file',
- method: 'loadStrings'
- },
- '4': {
- fileType: 'font',
- method: 'loadFont',
- message: ' hosting the font online,'
- },
- };
- p5._friendlyFileLoadError = function (errorType, filePath) {
- var errorInfo = errorCases[ errorType ];
- var message = 'It looks like there was a problem' +
- ' loading your ' + errorInfo.fileType + '.' +
- ' Try checking if the file path%c [' + filePath + '] %cis correct,' +
- (errorInfo.message || '') + ' or running a local server.';
- report(message, errorInfo.method, FILE_LOAD);
- };
-
- function friendlyWelcome() {
- // p5.js brand - magenta: #ED225D
- var astrixBgColor = 'transparent';
- var astrixTxtColor = '#ED225D';
- var welcomeBgColor = '#ED225D';
- var welcomeTextColor = 'white';
- console.log(
- '%c _ \n'+
- ' /\\| |/\\ \n'+
- ' \\ ` \' / \n'+
- ' / , . \\ \n'+
- ' \\/|_|\\/ '+
- '\n\n%c> p5.js says: Welcome! '+
- 'This is your friendly debugger. ' +
- 'To turn me off switch to using “p5.min.js”.',
- 'background-color:'+astrixBgColor+';color:' + astrixTxtColor +';',
- 'background-color:'+welcomeBgColor+';color:' + welcomeTextColor +';'
- );
- }
-
- /**
- * Prints out all the colors in the color pallete with white text.
- * For color blindness testing.
- */
- /* function testColors() {
- var str = 'A box of biscuits, a box of mixed biscuits and a biscuit mixer';
- report(str, 'print', '#ED225D'); // p5.js magenta
- report(str, 'print', '#2D7BB6'); // p5.js blue
- report(str, 'print', '#EE9900'); // p5.js orange
- report(str, 'print', '#A67F59'); // p5.js light brown
- report(str, 'print', '#704F21'); // p5.js gold
- report(str, 'print', '#1CC581'); // auto cyan
- report(str, 'print', '#FF6625'); // auto orange
- report(str, 'print', '#79EB22'); // auto green
- report(str, 'print', '#B40033'); // p5.js darkened magenta
- report(str, 'print', '#084B7F'); // p5.js darkened blue
- report(str, 'print', '#945F00'); // p5.js darkened orange
- report(str, 'print', '#6B441D'); // p5.js darkened brown
- report(str, 'print', '#2E1B00'); // p5.js darkened gold
- report(str, 'print', '#008851'); // auto dark cyan
- report(str, 'print', '#C83C00'); // auto dark orange
- report(str, 'print', '#4DB200'); // auto dark green
- } */
-
- // This is a lazily-defined list of p5 symbols that may be
- // misused by beginners at top-level code, outside of setup/draw. We'd like
- // to detect these errors and help the user by suggesting they move them
- // into setup/draw.
- //
- // For more details, see https://github.com/processing/p5.js/issues/1121.
- var misusedAtTopLevelCode = null;
- var FAQ_URL = 'https://github.com/processing/p5.js/wiki/' +
- 'Frequently-Asked-Questions' +
- '#why-cant-i-assign-variables-using-p5-functions-and-' +
- 'variables-before-setup';
-
- function defineMisusedAtTopLevelCode() {
- var uniqueNamesFound = {};
-
- var getSymbols = function(obj) {
- return Object.getOwnPropertyNames(obj).filter(function(name) {
- if (name[0] === '_') {
- return false;
- }
- if (name in uniqueNamesFound) {
- return false;
- }
-
- uniqueNamesFound[name] = true;
-
- return true;
- }).map(function(name) {
- var type;
-
- if (typeof(obj[name]) === 'function') {
- type = 'function';
- } else if (name === name.toUpperCase()) {
- type = 'constant';
- } else {
- type = 'variable';
- }
-
- return {name: name, type: type};
- });
- };
-
- misusedAtTopLevelCode = [].concat(
- getSymbols(p5.prototype),
- // At present, p5 only adds its constants to p5.prototype during
- // construction, which may not have happened at the time a
- // ReferenceError is thrown, so we'll manually add them to our list.
- getSymbols(_dereq_('./constants'))
- );
-
- // This will ultimately ensure that we report the most specific error
- // possible to the user, e.g. advising them about HALF_PI instead of PI
- // when their code misuses the former.
- misusedAtTopLevelCode.sort(function(a, b) {
- return b.name.length - a.name.length;
- });
- }
-
- function helpForMisusedAtTopLevelCode(e, log) {
- if (!log) {
- log = console.log.bind(console);
- }
-
- if (!misusedAtTopLevelCode) {
- defineMisusedAtTopLevelCode();
- }
-
- // If we find that we're logging lots of false positives, we can
- // uncomment the following code to avoid displaying anything if the
- // user's code isn't likely to be using p5's global mode. (Note that
- // setup/draw are more likely to be defined due to JS function hoisting.)
- //
- //if (!('setup' in window || 'draw' in window)) {
- // return;
- //}
-
- misusedAtTopLevelCode.some(function(symbol) {
- // Note that while just checking for the occurrence of the
- // symbol name in the error message could result in false positives,
- // a more rigorous test is difficult because different browsers
- // log different messages, and the format of those messages may
- // change over time.
- //
- // For example, if the user uses 'PI' in their code, it may result
- // in any one of the following messages:
- //
- // * 'PI' is undefined (Microsoft Edge)
- // * ReferenceError: PI is undefined (Firefox)
- // * Uncaught ReferenceError: PI is not defined (Chrome)
-
- if (e.message && e.message.match('\\W?'+symbol.name+'\\W') !== null) {
- log('%cDid you just try to use p5.js\'s ' + symbol.name +
- (symbol.type === 'function' ? '() ' : ' ') + symbol.type +
- '? If so, you may want to ' +
- 'move it into your sketch\'s setup() function.\n\n' +
- 'For more details, see: ' + FAQ_URL,
- 'color: #B40033' /* Dark magenta */);
- return true;
- }
- });
- }
-
- // Exposing this primarily for unit testing.
- p5.prototype._helpForMisusedAtTopLevelCode = helpForMisusedAtTopLevelCode;
-
- if (document.readyState !== 'complete') {
- window.addEventListener('error', helpForMisusedAtTopLevelCode, false);
-
- // Our job is only to catch ReferenceErrors that are thrown when
- // global (non-instance mode) p5 APIs are used at the top-level
- // scope of a file, so we'll unbind our error listener now to make
- // sure we don't log false positives later.
- window.addEventListener('load', function() {
- window.removeEventListener('error', helpForMisusedAtTopLevelCode, false);
- });
- }
-
- module.exports = p5;
-
- },{"./constants":36,"./core":37}],41:[function(_dereq_,module,exports){
- /**
- * @module DOM
- * @submodule DOM
- * @for p5.Element
- */
-
- var p5 = _dereq_('./core');
-
- /**
- * Base class for all elements added to a sketch, including canvas,
- * graphics buffers, and other HTML elements. Methods in blue are
- * included in the core functionality, methods in brown are added
- * with the <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom
- * library</a>.
- * It is not called directly, but p5.Element
- * objects are created by calling createCanvas, createGraphics,
- * or in the p5.dom library, createDiv, createImg, createInput, etc.
- *
- * @class p5.Element
- * @constructor
- * @param {String} elt DOM node that is wrapped
- * @param {Object} [pInst] pointer to p5 instance
- */
- p5.Element = function(elt, pInst) {
- /**
- * Underlying HTML element. All normal HTML methods can be called on this.
- *
- * @property elt
- */
- this.elt = elt;
- this._pInst = pInst;
- this._events = {};
- this.width = this.elt.offsetWidth;
- this.height = this.elt.offsetHeight;
- };
-
- /**
- *
- * Attaches the element to the parent specified. A way of setting
- * the container for the element. Accepts either a string ID, DOM
- * node, or p5.Element. If no arguments given, parent node is returned.
- * For more ways to position the canvas, see the
- * <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>
- * positioning the canvas</a> wiki page.
- *
- * @method parent
- * @param {String|Object} parent the ID, DOM node, or p5.Element
- * of desired parent element
- * @return {p5.Element}
- * @example
- * <div class="norender"><code>
- * // in the html file:
- * <div id="myContainer"></div>
- * // in the js file:
- * var cnv = createCanvas(100, 100);
- * cnv.parent("myContainer");
- * </code></div>
- * <div class='norender'><code>
- * var div0 = createDiv('this is the parent');
- * var div1 = createDiv('this is the child');
- * div1.parent(div0); // use p5.Element
- * </code></div>
- * <div class='norender'><code>
- * var div0 = createDiv('this is the parent');
- * div0.id('apples');
- * var div1 = createDiv('this is the child');
- * div1.parent('apples'); // use id
- * </code></div>
- * <div class='norender'><code>
- * var elt = document.getElementById('myParentDiv');
- * var div1 = createDiv('this is the child');
- * div1.parent(elt); // use element from page
- * </code></div>
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.parent = function(p) {
- if (arguments.length === 0){
- return this.elt.parentNode;
- } else {
- if (typeof p === 'string') {
- if (p[0] === '#') {
- p = p.substring(1);
- }
- p = document.getElementById(p);
- } else if (p instanceof p5.Element) {
- p = p.elt;
- }
- p.appendChild(this.elt);
- return this;
- }
- };
-
- /**
- *
- * Sets the ID of the element. If no ID argument is passed in, it instead
- * returns the current ID of the element.
- *
- * @method id
- * @param {String} [id] ID of the element
- * @return {p5.Element|String}
- * @example
- * <div><code class='norender'>
- * function setup() {
- * var cnv = createCanvas(100, 100);
- * // Assigns a CSS selector ID to
- * // the canvas element.
- * cnv.id("mycanvas");
- * }
- * </code></div>
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.id = function(id) {
- if (arguments.length === 0) {
- return this.elt.id;
- } else {
- this.elt.id = id;
- this.width = this.elt.offsetWidth;
- this.height = this.elt.offsetHeight;
- return this;
- }
- };
-
- /**
- *
- * Adds given class to the element. If no class argument is passed in, it
- * instead returns a string containing the current class(es) of the element.
- *
- * @method class
- * @param {String} [class] class to add
- * @return {p5.Element|String}
- */
- p5.Element.prototype.class = function(c) {
- if (arguments.length === 0) {
- return this.elt.className;
- } else {
- this.elt.className = c;
- return this;
- }
- };
-
- /**
- * The .mousePressed() function is called once after every time a
- * mouse button is pressed over the element. This can be used to
- * attach element specific event listeners.
- *
- * @method mousePressed
- * @param {Function} fxn function to be fired when mouse is
- * pressed over the element.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * var cnv;
- * var d;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.mousePressed(changeGray); // attach listener for
- * // canvas click only
- * d = 10;
- * g = 100;
- * }
- *
- * function draw() {
- * background(g);
- * ellipse(width/2, height/2, d, d);
- * }
- *
- * // this function fires with any click anywhere
- * function mousePressed() {
- * d = d + 10;
- * }
- *
- * // this function fires only when cnv is clicked
- * function changeGray() {
- * g = random(0, 255);
- * }
- * </code></div>
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.mousePressed = function (fxn) {
- attachListener('mousedown', fxn, this);
- attachListener('touchstart', fxn, this);
- return this;
- };
-
- /**
- * The .mouseWheel() function is called once after every time a
- * mouse wheel is scrolled over the element. This can be used to
- * attach element specific event listeners.
- * <br><br>
- * The function accepts a callback function as argument which will be executed
- * when the `wheel` event is triggered on the element, the callabck function is
- * passed one argument `event`. The `event.deltaY` property returns negative
- * values if the mouse wheel is rotated up or away from the user and positive
- * in the other direction. The `event.deltaX` does the same as `event.deltaY`
- * except it reads the horizontal wheel scroll of the mouse wheel.
- * <br><br>
- * On OS X with "natural" scrolling enabled, the `event.deltaY` values are
- * reversed.
- *
- * @method mouseWheel
- * @param {Function} fxn function to be fired when mouse wheel is
- * scrolled over the element.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * var cnv;
- * var d;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.mouseWheel(changeSize); // attach listener for
- * // activity on canvas only
- * d = 10;
- * g = 100;
- * }
- *
- * function draw() {
- * background(g);
- * ellipse(width/2, height/2, d, d);
- * }
- *
- * // this function fires with mousewheel movement
- * // anywhere on screen
- * function mouseWheel() {
- * g = g + 10;
- * }
- *
- * // this function fires with mousewheel movement
- * // over canvas only
- * function changeSize(event) {
- * if (event.deltaY > 0) {
- * d = d + 10;
- * } else {
- * d = d - 10;
- * }
- * }
- * </code></div>
- *
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.mouseWheel = function (fxn) {
- attachListener('wheel', fxn, this);
- return this;
- };
-
- /**
- * The .mouseReleased() function is called once after every time a
- * mouse button is released over the element. This can be used to
- * attach element specific event listeners.
- *
- * @method mouseReleased
- * @param {Function} fxn function to be fired when mouse is
- * released over the element.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * var cnv;
- * var d;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.mouseReleased(changeGray); // attach listener for
- * // activity on canvas only
- * d = 10;
- * g = 100;
- * }
- *
- * function draw() {
- * background(g);
- * ellipse(width/2, height/2, d, d);
- * }
- *
- * // this function fires after the mouse has been
- * // released
- * function mouseReleased() {
- * d = d + 10;
- * }
- *
- * // this function fires after the mouse has been
- * // released while on canvas
- * function changeGray() {
- * g = random(0, 255);
- * }
- * </code></div>
- *
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.mouseReleased = function (fxn) {
- attachListener('mouseup', fxn, this);
- attachListener('touchend', fxn, this);
- return this;
- };
-
-
- /**
- * The .mouseClicked() function is called once after a mouse button is
- * pressed and released over the element. This can be used to
- * attach element specific event listeners.
- *
- * @method mouseClicked
- * @param {Function} fxn function to be fired when mouse is
- * clicked over the element.
- * @return {p5.Element}
- * @example
- * var cnv;
- * var d;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.mouseClicked(changeGray); // attach listener for
- * // activity on canvas only
- * d = 10;
- * g = 100;
- * }
- *
- * function draw() {
- * background(g);
- * ellipse(width/2, height/2, d, d);
- * }
- *
- * // this function fires after the mouse has been
- * // clicked anywhere
- * function mouseClicked() {
- * d = d + 10;
- * }
- *
- * // this function fires after the mouse has been
- * // clicked on canvas
- * function changeGray() {
- * g = random(0, 255);
- * }
- * </code></div>
- *
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.mouseClicked = function (fxn) {
- attachListener('click', fxn, this);
- return this;
- };
-
- /**
- * The .mouseMoved() function is called once every time a
- * mouse moves over the element. This can be used to attach an
- * element specific event listener.
- *
- * @method mouseMoved
- * @param {Function} fxn function to be fired when mouse is
- * moved over the element.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * var cnv;
- * var d = 30;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.mouseMoved(changeSize); // attach listener for
- * // activity on canvas only
- * d = 10;
- * g = 100;
- * }
- *
- * function draw() {
- * background(g);
- * fill(200);
- * ellipse(width/2, height/2, d, d);
- * }
- *
- * // this function fires when mouse moves anywhere on
- * // page
- * function mouseMoved() {
- * g = g + 5;
- * if (g > 255) {
- * g = 0;
- * }
- * }
- *
- * // this function fires when mouse moves over canvas
- * function changeSize() {
- * d = d + 2;
- * if (d > 100) {
- * d = 0;
- * }
- * }
- * </code></div>
- *
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.mouseMoved = function (fxn) {
- attachListener('mousemove', fxn, this);
- attachListener('touchmove', fxn, this);
- return this;
- };
-
- /**
- * The .mouseOver() function is called once after every time a
- * mouse moves onto the element. This can be used to attach an
- * element specific event listener.
- *
- * @method mouseOver
- * @param {Function} fxn function to be fired when mouse is
- * moved over the element.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * var cnv;
- * var d;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.mouseOver(changeGray);
- * d = 10;
- * }
- *
- * function draw() {
- * ellipse(width/2, height/2, d, d);
- * }
- *
- * function changeGray() {
- * d = d + 10;
- * if (d > 100) {
- * d = 0;
- * }
- * }
- * </code></div>
- *
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.mouseOver = function (fxn) {
- attachListener('mouseover', fxn, this);
- return this;
- };
-
-
- /**
- * The .changed() function is called when the value of an
- * element is changed.
- * This can be used to attach an element specific event listener.
- *
- * @method changed
- * @param {Function} fxn function to be fired when the value of an
- * element changes.
- * @return {p5.Element}
- * @example
- * <div><code>
- * var sel;
- *
- * function setup() {
- * textAlign(CENTER);
- * background(200);
- * sel = createSelect();
- * sel.position(10, 10);
- * sel.option('pear');
- * sel.option('kiwi');
- * sel.option('grape');
- * sel.changed(mySelectEvent);
- * }
- *
- * function mySelectEvent() {
- * var item = sel.value();
- * background(200);
- * text("it's a "+item+"!", 50, 50);
- * }
- * </code></div>
- * <div><code>
- * var checkbox;
- * var cnv;
- *
- * function setup() {
- * checkbox = createCheckbox(" fill");
- * checkbox.changed(changeFill);
- * cnv = createCanvas(100, 100);
- * cnv.position(0, 30);
- * noFill();
- * }
- *
- * function draw() {
- * background(200);
- * ellipse(50, 50, 50, 50);
- * }
- *
- * function changeFill() {
- * if (checkbox.checked()) {
- * fill(0);
- * } else {
- * noFill();
- * }
- * }
- * </code></div>
- *
- * @alt
- * dropdown: pear, kiwi, grape. When selected text "its a" + selection shown.
- *
- */
- p5.Element.prototype.changed = function (fxn) {
- attachListener('change', fxn, this);
- return this;
- };
-
- /**
- * The .input() function is called when any user input is
- * detected with an element. The input event is often used
- * to detect keystrokes in a input element, or changes on a
- * slider element. This can be used to attach an element specific
- * event listener.
- *
- * @method input
- * @param {Function} fxn function to be fired on user input.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * // Open your console to see the output
- * function setup() {
- * var inp = createInput('');
- * inp.input(myInputEvent);
- * }
- *
- * function myInputEvent() {
- * console.log('you are typing: ', this.value());
- * }
- * </code></div>
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.input = function (fxn) {
- attachListener('input', fxn, this);
- return this;
- };
-
- /**
- * The .mouseOut() function is called once after every time a
- * mouse moves off the element. This can be used to attach an
- * element specific event listener.
- *
- * @method mouseOut
- * @param {Function} fxn function to be fired when mouse is
- * moved off the element.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * var cnv;
- * var d;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.mouseOut(changeGray);
- * d = 10;
- * }
- *
- * function draw() {
- * ellipse(width/2, height/2, d, d);
- * }
- *
- * function changeGray() {
- * d = d + 10;
- * if (d > 100) {
- * d = 0;
- * }
- * }
- * </code></div>
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.mouseOut = function (fxn) {
- attachListener('mouseout', fxn, this);
- return this;
- };
-
- /**
- * The .touchStarted() function is called once after every time a touch is
- * registered. This can be used to attach element specific event listeners.
- *
- * @method touchStarted
- * @param {Function} fxn function to be fired when touch is
- * started over the element.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * var cnv;
- * var d;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.touchStarted(changeGray); // attach listener for
- * // canvas click only
- * d = 10;
- * g = 100;
- * }
- *
- * function draw() {
- * background(g);
- * ellipse(width/2, height/2, d, d);
- * }
- *
- * // this function fires with any touch anywhere
- * function touchStarted() {
- * d = d + 10;
- * }
- *
- * // this function fires only when cnv is clicked
- * function changeGray() {
- * g = random(0, 255);
- * }
- * </code></div>
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.touchStarted = function (fxn) {
- attachListener('touchstart', fxn, this);
- attachListener('mousedown', fxn, this);
- return this;
- };
-
- /**
- * The .touchMoved() function is called once after every time a touch move is
- * registered. This can be used to attach element specific event listeners.
- *
- * @method touchMoved
- * @param {Function} fxn function to be fired when touch is moved
- * over the element.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * var cnv;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.touchMoved(changeGray); // attach listener for
- * // canvas click only
- * g = 100;
- * }
- *
- * function draw() {
- * background(g);
- * }
- *
- * // this function fires only when cnv is clicked
- * function changeGray() {
- * g = random(0, 255);
- * }
- * </code></div>
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.touchMoved = function (fxn) {
- attachListener('touchmove', fxn, this);
- attachListener('mousemove', fxn, this);
- return this;
- };
-
- /**
- * The .touchEnded() function is called once after every time a touch is
- * registered. This can be used to attach element specific event listeners.
- *
- * @method touchEnded
- * @param {Function} fxn function to be fired when touch is
- * ended over the element.
- * @return {p5.Element}
- * @example
- * <div class='norender'><code>
- * var cnv;
- * var d;
- * var g;
- * function setup() {
- * cnv = createCanvas(100, 100);
- * cnv.touchEnded(changeGray); // attach listener for
- * // canvas click only
- * d = 10;
- * g = 100;
- * }
- *
- * function draw() {
- * background(g);
- * ellipse(width/2, height/2, d, d);
- * }
- *
- * // this function fires with any touch anywhere
- * function touchEnded() {
- * d = d + 10;
- * }
- *
- * // this function fires only when cnv is clicked
- * function changeGray() {
- * g = random(0, 255);
- * }
- * </code></div>
- *
- *
- * @alt
- * no display.
- *
- */
- p5.Element.prototype.touchEnded = function (fxn) {
- attachListener('touchend', fxn, this);
- attachListener('mouseup', fxn, this);
- return this;
- };
-
-
-
- /**
- * The .dragOver() function is called once after every time a
- * file is dragged over the element. This can be used to attach an
- * element specific event listener.
- *
- * @method dragOver
- * @param {Function} fxn function to be fired when mouse is
- * dragged over the element.
- * @return {p5.Element}
- */
- p5.Element.prototype.dragOver = function (fxn) {
- attachListener('dragover', fxn, this);
- return this;
- };
-
- /**
- * The .dragLeave() function is called once after every time a
- * dragged file leaves the element area. This can be used to attach an
- * element specific event listener.
- *
- * @method dragLeave
- * @param {Function} fxn function to be fired when mouse is
- * dragged over the element.
- * @return {p5.Element}
- */
- p5.Element.prototype.dragLeave = function (fxn) {
- attachListener('dragleave', fxn, this);
- return this;
- };
-
- /**
- * The .drop() function is called for each file dropped on the element.
- * It requires a callback that is passed a p5.File object. You can
- * optionally pass two callbacks, the first one (required) is triggered
- * for each file dropped when the file is loaded. The second (optional)
- * is triggered just once when a file (or files) are dropped.
- *
- * @method drop
- * @param {Function} callback triggered when files are dropped.
- * @param {Function} callback to receive loaded file.
- * @return {p5.Element}
- * @example
- * <div><code>
- * function setup() {
- * var c = createCanvas(100, 100);
- * background(200);
- * textAlign(CENTER);
- * text('drop image', width/2, height/2);
- * c.drop(gotFile);
- * }
- *
- * function gotFile(file) {
- * var img = createImg(file.data).hide();
- * // Draw the image onto the canvas
- * image(img, 0, 0, width, height);
- * }
- * </code></div>
- *
- * @alt
- * Canvas turns into whatever image is dragged/dropped onto it.
- *
- */
- p5.Element.prototype.drop = function (callback, fxn) {
- // Make a file loader callback and trigger user's callback
- function makeLoader(theFile) {
- // Making a p5.File object
- var p5file = new p5.File(theFile);
- return function(e) {
- p5file.data = e.target.result;
- callback(p5file);
- };
- }
-
- // Is the file stuff supported?
- if (window.File && window.FileReader && window.FileList && window.Blob) {
-
- // If you want to be able to drop you've got to turn off
- // a lot of default behavior
- attachListener('dragover',function(evt) {
- evt.stopPropagation();
- evt.preventDefault();
- },this);
-
- // If this is a drag area we need to turn off the default behavior
- attachListener('dragleave',function(evt) {
- evt.stopPropagation();
- evt.preventDefault();
- },this);
-
- // If just one argument it's the callback for the files
- if (arguments.length > 1) {
- attachListener('drop', fxn, this);
- }
-
- // Deal with the files
- attachListener('drop', function(evt) {
-
- evt.stopPropagation();
- evt.preventDefault();
-
- // A FileList
- var files = evt.dataTransfer.files;
-
- // Load each one and trigger the callback
- for (var i = 0; i < files.length; i++) {
- var f = files[i];
- var reader = new FileReader();
- reader.onload = makeLoader(f);
-
-
- // Text or data?
- // This should likely be improved
- if (f.type.indexOf('text') > -1) {
- reader.readAsText(f);
- } else {
- reader.readAsDataURL(f);
- }
- }
- }, this);
- } else {
- console.log('The File APIs are not fully supported in this browser.');
- }
-
- return this;
- };
-
-
-
-
- function attachListener(ev, fxn, ctx) {
- // LM removing, not sure why we had this?
- // var _this = ctx;
- // var f = function (e) { fxn(e, _this); };
- var f = fxn.bind(ctx);
- ctx.elt.addEventListener(ev, f, false);
- ctx._events[ev] = f;
- }
-
- /**
- * Helper fxn for sharing pixel methods
- *
- */
- p5.Element.prototype._setProperty = function (prop, value) {
- this[prop] = value;
- };
-
-
- module.exports = p5.Element;
-
- },{"./core":37}],42:[function(_dereq_,module,exports){
- /**
- * @module Rendering
- * @submodule Rendering
- * @for p5
- */
-
- var p5 = _dereq_('./core');
- var constants = _dereq_('./constants');
-
- /**
- * Thin wrapper around a renderer, to be used for creating a
- * graphics buffer object. Use this class if you need
- * to draw into an off-screen graphics buffer. The two parameters define the
- * width and height in pixels. The fields and methods for this class are
- * extensive, but mirror the normal drawing API for p5.
- *
- * @class p5.Graphics
- * @constructor
- * @extends p5.Element
- * @param {String} elt DOM node that is wrapped
- * @param {Object} [pInst] pointer to p5 instance
- * @param {Boolean} whether we're using it as main canvas
- */
- p5.Graphics = function(w, h, renderer, pInst) {
-
- var r = renderer || constants.P2D;
-
- var c = document.createElement('canvas');
- var node = this._userNode || document.body;
- node.appendChild(c);
-
- p5.Element.call(this, c, pInst, false);
- this._styles = [];
- this.width = w;
- this.height = h;
- this._pixelDensity = pInst._pixelDensity;
-
- if (r === constants.WEBGL) {
- this._renderer = new p5.RendererGL(c, this, false);
- } else {
- this._renderer = new p5.Renderer2D(c, this, false);
- }
-
- this._renderer.resize(w, h);
- this._renderer._applyDefaults();
-
- pInst._elements.push(this);
-
- // bind methods and props of p5 to the new object
- for (var p in p5.prototype) {
- if (!this[p]) {
- if (typeof p5.prototype[p] === 'function') {
- this[p] = p5.prototype[p].bind(this);
- } else {
- this[p] = p5.prototype[p];
- }
- }
- }
-
- return this;
- };
-
- p5.Graphics.prototype = Object.create(p5.Element.prototype);
-
- p5.Graphics.prototype.remove = function() {
- if (this.elt.parentNode) {
- this.elt.parentNode.removeChild(this.elt);
- }
- for (var elt_ev in this._events) {
- this.elt.removeEventListener(elt_ev, this._events[elt_ev]);
- }
- };
-
- module.exports = p5.Graphics;
-
- },{"./constants":36,"./core":37}],43:[function(_dereq_,module,exports){
- /**
- * @module Rendering
- * @submodule Rendering
- * @for p5
- */
-
- var p5 = _dereq_('./core');
- var constants = _dereq_('../core/constants');
-
- /**
- * Main graphics and rendering context, as well as the base API
- * implementation for p5.js "core". To be used as the superclass for
- * Renderer2D and Renderer3D classes, respecitvely.
- *
- * @class p5.Renderer
- * @constructor
- * @extends p5.Element
- * @param {String} elt DOM node that is wrapped
- * @param {Object} [pInst] pointer to p5 instance
- * @param {Boolean} whether we're using it as main canvas
- */
- p5.Renderer = function(elt, pInst, isMainCanvas) {
- p5.Element.call(this, elt, pInst);
- this.canvas = elt;
- this._pInst = pInst;
- if (isMainCanvas) {
- this._isMainCanvas = true;
- // for pixel method sharing with pimage
- this._pInst._setProperty('_curElement', this);
- this._pInst._setProperty('canvas', this.canvas);
- this._pInst._setProperty('width', this.width);
- this._pInst._setProperty('height', this.height);
- } else { // hide if offscreen buffer by default
- this.canvas.style.display = 'none';
- this._styles = []; // non-main elt styles stored in p5.Renderer
- }
-
-
- this._textSize = 12;
- this._textLeading = 15;
- this._textFont = 'sans-serif';
- this._textStyle = constants.NORMAL;
- this._textAscent = null;
- this._textDescent = null;
-
-
- this._rectMode = constants.CORNER;
- this._ellipseMode = constants.CENTER;
- this._curveTightness = 0;
- this._imageMode = constants.CORNER;
-
- this._tint = null;
- this._doStroke = true;
- this._doFill = true;
- this._strokeSet = false;
- this._fillSet = false;
- this._colorMode = constants.RGB;
- this._colorMaxes = {
- rgb: [255, 255, 255, 255],
- hsb: [360, 100, 100, 1],
- hsl: [360, 100, 100, 1]
- };
-
- };
-
- p5.Renderer.prototype = Object.create(p5.Element.prototype);
-
-
-
-
- /**
- * Resize our canvas element.
- */
- p5.Renderer.prototype.resize = function(w, h) {
- this.width = w;
- this.height = h;
- this.elt.width = w * this._pInst._pixelDensity;
- this.elt.height = h * this._pInst._pixelDensity;
- this.elt.style.width = w +'px';
- this.elt.style.height = h + 'px';
- if (this._isMainCanvas) {
- this._pInst._setProperty('width', this.width);
- this._pInst._setProperty('height', this.height);
- }
- };
-
- p5.Renderer.prototype.textLeading = function(l) {
-
- if (arguments.length && arguments[0]) {
-
- this._setProperty('_textLeading', l);
- return this;
- }
-
- return this._textLeading;
- };
-
- p5.Renderer.prototype.textSize = function(s) {
-
- if (arguments.length && arguments[0]) {
-
- this._setProperty('_textSize', s);
- this._setProperty('_textLeading', s * constants._DEFAULT_LEADMULT);
- return this._applyTextProperties();
- }
-
- return this._textSize;
- };
-
- p5.Renderer.prototype.textStyle = function(s) {
-
- if (arguments.length && arguments[0]) {
-
- if (s === constants.NORMAL ||
- s === constants.ITALIC ||
- s === constants.BOLD) {
- this._setProperty('_textStyle', s);
- }
-
- return this._applyTextProperties();
- }
-
- return this._textStyle;
- };
-
- p5.Renderer.prototype.textAscent = function() {
- if (this._textAscent === null) {
- this._updateTextMetrics();
- }
- return this._textAscent;
- };
-
- p5.Renderer.prototype.textDescent = function() {
-
- if (this._textDescent === null) {
- this._updateTextMetrics();
- }
- return this._textDescent;
- };
-
- p5.Renderer.prototype._applyDefaults = function(){
- return this;
- };
-
- /**
- * Helper fxn to check font type (system or otf)
- */
- p5.Renderer.prototype._isOpenType = function(f) {
-
- f = f || this._textFont;
- return (typeof f === 'object' && f.font && f.font.supported);
- };
-
- p5.Renderer.prototype._updateTextMetrics = function() {
-
- if (this._isOpenType()) {
-
- this._setProperty('_textAscent', this._textFont._textAscent());
- this._setProperty('_textDescent', this._textFont._textDescent());
- return this;
- }
-
- // Adapted from http://stackoverflow.com/a/25355178
- var text = document.createElement('span');
- text.style.fontFamily = this._textFont;
- text.style.fontSize = this._textSize + 'px';
- text.innerHTML = 'ABCjgq|';
-
- var block = document.createElement('div');
- block.style.display = 'inline-block';
- block.style.width = '1px';
- block.style.height = '0px';
-
- var container = document.createElement('div');
- container.appendChild(text);
- container.appendChild(block);
-
- container.style.height = '0px';
- container.style.overflow = 'hidden';
- document.body.appendChild(container);
-
- block.style.verticalAlign = 'baseline';
- var blockOffset = calculateOffset(block);
- var textOffset = calculateOffset(text);
- var ascent = blockOffset[1] - textOffset[1];
-
- block.style.verticalAlign = 'bottom';
- blockOffset = calculateOffset(block);
- textOffset = calculateOffset(text);
- var height = blockOffset[1] - textOffset[1];
- var descent = height - ascent;
-
- document.body.removeChild(container);
-
- this._setProperty('_textAscent', ascent);
- this._setProperty('_textDescent', descent);
-
- return this;
- };
-
- /**
- * Helper fxn to measure ascent and descent.
- * Adapted from http://stackoverflow.com/a/25355178
- */
- function calculateOffset(object) {
- var currentLeft = 0,
- currentTop = 0;
- if (object.offsetParent) {
- do {
- currentLeft += object.offsetLeft;
- currentTop += object.offsetTop;
- } while (object = object.offsetParent);
- } else {
- currentLeft += object.offsetLeft;
- currentTop += object.offsetTop;
- }
- return [currentLeft, currentTop];
- }
-
- module.exports = p5.Renderer;
-
- },{"../core/constants":36,"./core":37}],44:[function(_dereq_,module,exports){
-
- var p5 = _dereq_('./core');
- var canvas = _dereq_('./canvas');
- var constants = _dereq_('./constants');
- var filters = _dereq_('../image/filters');
-
- _dereq_('./p5.Renderer');
-
- /**
- * p5.Renderer2D
- * The 2D graphics canvas renderer class.
- * extends p5.Renderer
- */
- var styleEmpty = 'rgba(0,0,0,0)';
- // var alphaThreshold = 0.00125; // minimum visible
-
- p5.Renderer2D = function(elt, pInst, isMainCanvas){
- p5.Renderer.call(this, elt, pInst, isMainCanvas);
- this.drawingContext = this.canvas.getContext('2d');
- this._pInst._setProperty('drawingContext', this.drawingContext);
- return this;
- };
-
- p5.Renderer2D.prototype = Object.create(p5.Renderer.prototype);
-
- p5.Renderer2D.prototype._applyDefaults = function() {
- this.drawingContext.fillStyle = constants._DEFAULT_FILL;
- this.drawingContext.strokeStyle = constants._DEFAULT_STROKE;
- this.drawingContext.lineCap = constants.ROUND;
- this.drawingContext.font = 'normal 12px sans-serif';
- };
-
- p5.Renderer2D.prototype.resize = function(w,h) {
- p5.Renderer.prototype.resize.call(this, w,h);
- this.drawingContext.scale(this._pInst._pixelDensity,
- this._pInst._pixelDensity);
- };
-
- //////////////////////////////////////////////
- // COLOR | Setting
- //////////////////////////////////////////////
-
- p5.Renderer2D.prototype.background = function() {
- this.drawingContext.save();
- this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
- this.drawingContext.scale(this._pInst._pixelDensity,
- this._pInst._pixelDensity);
-
- if (arguments[0] instanceof p5.Image) {
- this._pInst.image(arguments[0], 0, 0, this.width, this.height);
- } else {
- var curFill = this.drawingContext.fillStyle;
- // create background rect
- var color = this._pInst.color.apply(this, arguments);
- var newFill = color.toString();
- this.drawingContext.fillStyle = newFill;
- this.drawingContext.fillRect(0, 0, this.width, this.height);
- // reset fill
- this.drawingContext.fillStyle = curFill;
- }
- this.drawingContext.restore();
- };
-
- p5.Renderer2D.prototype.clear = function() {
- this.drawingContext.clearRect(0, 0, this.width, this.height);
- };
-
- p5.Renderer2D.prototype.fill = function() {
-
- var ctx = this.drawingContext;
- var color = this._pInst.color.apply(this, arguments);
- ctx.fillStyle = color.toString();
- };
-
- p5.Renderer2D.prototype.stroke = function() {
- var ctx = this.drawingContext;
- var color = this._pInst.color.apply(this, arguments);
- ctx.strokeStyle = color.toString();
- };
-
- //////////////////////////////////////////////
- // IMAGE | Loading & Displaying
- //////////////////////////////////////////////
-
- p5.Renderer2D.prototype.image =
- function (img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
- var cnv;
- try {
- if (this._tint) {
- if (p5.MediaElement && img instanceof p5.MediaElement) {
- img.loadPixels();
- }
- if (img.canvas) {
- cnv = this._getTintedImageCanvas(img);
- }
- }
- if (!cnv) {
- cnv = img.canvas || img.elt;
- }
- this.drawingContext.drawImage(cnv, sx, sy, sWidth, sHeight, dx, dy,
- dWidth, dHeight);
- } catch (e) {
- if (e.name !== 'NS_ERROR_NOT_AVAILABLE') {
- throw e;
- }
- }
- };
-
- p5.Renderer2D.prototype._getTintedImageCanvas = function (img) {
- if (!img.canvas) {
- return img;
- }
- var pixels = filters._toPixels(img.canvas);
- var tmpCanvas = document.createElement('canvas');
- tmpCanvas.width = img.canvas.width;
- tmpCanvas.height = img.canvas.height;
- var tmpCtx = tmpCanvas.getContext('2d');
- var id = tmpCtx.createImageData(img.canvas.width, img.canvas.height);
- var newPixels = id.data;
- for (var i = 0; i < pixels.length; i += 4) {
- var r = pixels[i];
- var g = pixels[i + 1];
- var b = pixels[i + 2];
- var a = pixels[i + 3];
- newPixels[i] = r * this._tint[0] / 255;
- newPixels[i + 1] = g * this._tint[1] / 255;
- newPixels[i + 2] = b * this._tint[2] / 255;
- newPixels[i + 3] = a * this._tint[3] / 255;
- }
- tmpCtx.putImageData(id, 0, 0);
- return tmpCanvas;
- };
-
-
- //////////////////////////////////////////////
- // IMAGE | Pixels
- //////////////////////////////////////////////
-
- p5.Renderer2D.prototype.blendMode = function(mode) {
- this.drawingContext.globalCompositeOperation = mode;
- };
- p5.Renderer2D.prototype.blend = function() {
- var currBlend = this.drawingContext.globalCompositeOperation;
- var blendMode = arguments[arguments.length - 1];
-
- var copyArgs = Array.prototype.slice.call(
- arguments,
- 0,
- arguments.length - 1
- );
-
- this.drawingContext.globalCompositeOperation = blendMode;
- if (this._pInst) {
- this._pInst.copy.apply(this._pInst, copyArgs);
- } else {
- this.copy.apply(this, copyArgs);
- }
- this.drawingContext.globalCompositeOperation = currBlend;
- };
-
- p5.Renderer2D.prototype.copy = function () {
- var srcImage, sx, sy, sw, sh, dx, dy, dw, dh;
- if (arguments.length === 9) {
- srcImage = arguments[0];
- sx = arguments[1];
- sy = arguments[2];
- sw = arguments[3];
- sh = arguments[4];
- dx = arguments[5];
- dy = arguments[6];
- dw = arguments[7];
- dh = arguments[8];
- } else if (arguments.length === 8) {
- srcImage = this._pInst;
- sx = arguments[0];
- sy = arguments[1];
- sw = arguments[2];
- sh = arguments[3];
- dx = arguments[4];
- dy = arguments[5];
- dw = arguments[6];
- dh = arguments[7];
- } else {
- throw new Error('Signature not supported');
- }
- p5.Renderer2D._copyHelper(srcImage, sx, sy, sw, sh, dx, dy, dw, dh);
- };
-
- p5.Renderer2D._copyHelper =
- function (srcImage, sx, sy, sw, sh, dx, dy, dw, dh) {
- srcImage.loadPixels();
- var s = srcImage.canvas.width / srcImage.width;
- this.drawingContext.drawImage(srcImage.canvas,
- s * sx, s * sy, s * sw, s * sh, dx, dy, dw, dh);
- };
-
- p5.Renderer2D.prototype.get = function(x, y, w, h) {
- if (x === undefined && y === undefined &&
- w === undefined && h === undefined){
- x = 0;
- y = 0;
- w = this.width;
- h = this.height;
- } else if (w === undefined && h === undefined) {
- w = 1;
- h = 1;
- }
-
- // if the section does not overlap the canvas
- if(x + w < 0 || y + h < 0 || x > this.width || y > this.height){
- return [0, 0, 0, 255];
- }
-
- var ctx = this._pInst || this;
- ctx.loadPixels();
-
- var pd = ctx._pixelDensity;
-
- // round down to get integer numbers
- x = Math.floor(x);
- y = Math.floor(y);
- w = Math.floor(w);
- h = Math.floor(h);
-
- var sx = x * pd;
- var sy = y * pd;
- if (w === 1 && h === 1){
- var imageData = this.drawingContext.getImageData(sx, sy, 1, 1).data;
- //imageData = [0,0,0,0];
- return [
- imageData[0],
- imageData[1],
- imageData[2],
- imageData[3]
- ];
- } else {
- //auto constrain the width and height to
- //dimensions of the source image
- var dw = Math.min(w, ctx.width);
- var dh = Math.min(h, ctx.height);
- var sw = dw * pd;
- var sh = dh * pd;
-
- var region = new p5.Image(dw, dh);
- region.canvas.getContext('2d').drawImage(this.canvas, sx, sy, sw, sh,
- 0, 0, dw, dh);
-
- return region;
- }
- };
-
- p5.Renderer2D.prototype.loadPixels = function () {
- var pd = this._pixelDensity || this._pInst._pixelDensity;
- var w = this.width * pd;
- var h = this.height * pd;
- var imageData = this.drawingContext.getImageData(0, 0, w, h);
- // @todo this should actually set pixels per object, so diff buffers can
- // have diff pixel arrays.
- if (this._pInst) {
- this._pInst._setProperty('imageData', imageData);
- this._pInst._setProperty('pixels', imageData.data);
- } else { // if called by p5.Image
- this._setProperty('imageData', imageData);
- this._setProperty('pixels', imageData.data);
- }
- };
-
- p5.Renderer2D.prototype.set = function (x, y, imgOrCol) {
- // round down to get integer numbers
- x = Math.floor(x);
- y = Math.floor(y);
- if (imgOrCol instanceof p5.Image) {
- this.drawingContext.save();
- this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
- this.drawingContext.scale(this._pInst._pixelDensity,
- this._pInst._pixelDensity);
- this.drawingContext.drawImage(imgOrCol.canvas, x, y);
- this.loadPixels.call(this._pInst);
- this.drawingContext.restore();
- } else {
- var ctx = this._pInst || this;
- var r = 0, g = 0, b = 0, a = 0;
- var idx = 4*((y * ctx._pixelDensity) *
- (this.width * ctx._pixelDensity) + (x * ctx._pixelDensity));
- if (!ctx.imageData) {
- ctx.loadPixels.call(ctx);
- }
- if (typeof imgOrCol === 'number') {
- if (idx < ctx.pixels.length) {
- r = imgOrCol;
- g = imgOrCol;
- b = imgOrCol;
- a = 255;
- //this.updatePixels.call(this);
- }
- }
- else if (imgOrCol instanceof Array) {
- if (imgOrCol.length < 4) {
- throw new Error('pixel array must be of the form [R, G, B, A]');
- }
- if (idx < ctx.pixels.length) {
- r = imgOrCol[0];
- g = imgOrCol[1];
- b = imgOrCol[2];
- a = imgOrCol[3];
- //this.updatePixels.call(this);
- }
- } else if (imgOrCol instanceof p5.Color) {
- if (idx < ctx.pixels.length) {
- r = imgOrCol.levels[0];
- g = imgOrCol.levels[1];
- b = imgOrCol.levels[2];
- a = imgOrCol.levels[3];
- //this.updatePixels.call(this);
- }
- }
- // loop over pixelDensity * pixelDensity
- for (var i = 0; i < ctx._pixelDensity; i++) {
- for (var j = 0; j < ctx._pixelDensity; j++) {
- // loop over
- idx = 4*((y * ctx._pixelDensity + j) * this.width *
- ctx._pixelDensity + (x * ctx._pixelDensity + i));
- ctx.pixels[idx] = r;
- ctx.pixels[idx+1] = g;
- ctx.pixels[idx+2] = b;
- ctx.pixels[idx+3] = a;
- }
- }
- }
- };
-
- p5.Renderer2D.prototype.updatePixels = function (x, y, w, h) {
- var pd = this._pixelDensity || this._pInst._pixelDensity;
- if (x === undefined &&
- y === undefined &&
- w === undefined &&
- h === undefined) {
- x = 0;
- y = 0;
- w = this.width;
- h = this.height;
- }
- w *= pd;
- h *= pd;
-
- if (this._pInst) {
- this.drawingContext.putImageData(this._pInst.imageData, x, y, 0, 0, w, h);
- } else {
- this.drawingContext.putImageData(this.imageData, x, y, 0, 0, w, h);
- }
- };
-
- //////////////////////////////////////////////
- // SHAPE | 2D Primitives
- //////////////////////////////////////////////
-
- /**
- * Generate a cubic Bezier representing an arc on the unit circle of total
- * angle `size` radians, beginning `start` radians above the x-axis. Up to
- * four of these curves are combined to make a full arc.
- *
- * See www.joecridge.me/bezier.pdf for an explanation of the method.
- */
- p5.Renderer2D.prototype._acuteArcToBezier =
- function _acuteArcToBezier(start, size) {
- // Evauate constants.
- var alpha = size / 2.0,
- cos_alpha = Math.cos(alpha),
- sin_alpha = Math.sin(alpha),
- cot_alpha = 1.0 / Math.tan(alpha),
- phi = start + alpha, // This is how far the arc needs to be rotated.
- cos_phi = Math.cos(phi),
- sin_phi = Math.sin(phi),
- lambda = (4.0 - cos_alpha) / 3.0,
- mu = sin_alpha + (cos_alpha - lambda) * cot_alpha;
-
- // Return rotated waypoints.
- return {
- ax: Math.cos(start),
- ay: Math.sin(start),
- bx: lambda * cos_phi + mu * sin_phi,
- by: lambda * sin_phi - mu * cos_phi,
- cx: lambda * cos_phi - mu * sin_phi,
- cy: lambda * sin_phi + mu * cos_phi,
- dx: Math.cos(start + size),
- dy: Math.sin(start + size)
- };
- };
-
- p5.Renderer2D.prototype.arc =
- function(x, y, w, h, start, stop, mode) {
- var ctx = this.drawingContext;
- var vals = canvas.arcModeAdjust(x, y, w, h, this._ellipseMode);
- var rx = vals.w / 2.0;
- var ry = vals.h / 2.0;
- var epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
- var arcToDraw = 0;
- var curves = [];
-
- // Create curves
- while(stop - start > epsilon) {
- arcToDraw = Math.min(stop - start, constants.HALF_PI);
- curves.push(this._acuteArcToBezier(start, arcToDraw));
- start += arcToDraw;
- }
-
- // Fill curves
- if (this._doFill) {
- ctx.beginPath();
- curves.forEach(function (curve, index) {
- if (index === 0) {
- ctx.moveTo(vals.x + curve.ax * rx, vals.y + curve.ay * ry);
- }
- ctx.bezierCurveTo(vals.x + curve.bx * rx, vals.y + curve.by * ry,
- vals.x + curve.cx * rx, vals.y + curve.cy * ry,
- vals.x + curve.dx * rx, vals.y + curve.dy * ry);
- });
- if (mode === constants.PIE || mode == null) {
- ctx.lineTo(vals.x, vals.y);
- }
- ctx.closePath();
- ctx.fill();
- }
-
- // Stroke curves
- if (this._doStroke) {
- ctx.beginPath();
- curves.forEach(function (curve, index) {
- if (index === 0) {
- ctx.moveTo(vals.x + curve.ax * rx, vals.y + curve.ay * ry);
- }
- ctx.bezierCurveTo(vals.x + curve.bx * rx, vals.y + curve.by * ry,
- vals.x + curve.cx * rx, vals.y + curve.cy * ry,
- vals.x + curve.dx * rx, vals.y + curve.dy * ry);
- });
- if (mode === constants.PIE) {
- ctx.lineTo(vals.x, vals.y);
- ctx.closePath();
- } else if (mode === constants.CHORD) {
- ctx.closePath();
- }
- ctx.stroke();
- }
- return this;
- };
-
- p5.Renderer2D.prototype.ellipse = function(args) {
- var ctx = this.drawingContext;
- var doFill = this._doFill, doStroke = this._doStroke;
- var x = args[0],
- y = args[1],
- w = args[2],
- h = args[3];
- if (doFill && !doStroke) {
- if(ctx.fillStyle === styleEmpty) {
- return this;
- }
- } else if (!doFill && doStroke) {
- if(ctx.strokeStyle === styleEmpty) {
- return this;
- }
- }
- var kappa = 0.5522847498,
- ox = (w / 2) * kappa, // control point offset horizontal
- oy = (h / 2) * kappa, // control point offset vertical
- xe = x + w, // x-end
- ye = y + h, // y-end
- xm = x + w / 2, // x-middle
- ym = y + h / 2; // y-middle
- ctx.beginPath();
- ctx.moveTo(x, ym);
- ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
- ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
- ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
- ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
- ctx.closePath();
- if (doFill) {
- ctx.fill();
- }
- if (doStroke) {
- ctx.stroke();
- }
- };
-
- p5.Renderer2D.prototype.line = function(x1, y1, x2, y2) {
- var ctx = this.drawingContext;
- if (!this._doStroke) {
- return this;
- } else if(ctx.strokeStyle === styleEmpty){
- return this;
- }
- // Translate the line by (0.5, 0.5) to draw it crisp
- if (ctx.lineWidth % 2 === 1) {
- ctx.translate(0.5, 0.5);
- }
- ctx.beginPath();
- ctx.moveTo(x1, y1);
- ctx.lineTo(x2, y2);
- ctx.stroke();
- if (ctx.lineWidth % 2 === 1) {
- ctx.translate(-0.5, -0.5);
- }
- return this;
- };
-
- p5.Renderer2D.prototype.point = function(x, y) {
- var ctx = this.drawingContext;
- var s = ctx.strokeStyle;
- var f = ctx.fillStyle;
- if (!this._doStroke) {
- return this;
- } else if(ctx.strokeStyle === styleEmpty){
- return this;
- }
- x = Math.round(x);
- y = Math.round(y);
- ctx.fillStyle = s;
- if (ctx.lineWidth > 1) {
- ctx.beginPath();
- ctx.arc(
- x,
- y,
- ctx.lineWidth / 2,
- 0,
- constants.TWO_PI,
- false
- );
- ctx.fill();
- } else {
- ctx.fillRect(x, y, 1, 1);
- }
- ctx.fillStyle = f;
- };
-
- p5.Renderer2D.prototype.quad =
- function(x1, y1, x2, y2, x3, y3, x4, y4) {
- var ctx = this.drawingContext;
- var doFill = this._doFill, doStroke = this._doStroke;
- if (doFill && !doStroke) {
- if(ctx.fillStyle === styleEmpty) {
- return this;
- }
- } else if (!doFill && doStroke) {
- if(ctx.strokeStyle === styleEmpty) {
- return this;
- }
- }
- ctx.beginPath();
- ctx.moveTo(x1, y1);
- ctx.lineTo(x2, y2);
- ctx.lineTo(x3, y3);
- ctx.lineTo(x4, y4);
- ctx.closePath();
- if (doFill) {
- ctx.fill();
- }
- if (doStroke) {
- ctx.stroke();
- }
- return this;
- };
-
- p5.Renderer2D.prototype.rect = function(args) {
- var x = args[0],
- y = args[1],
- w = args[2],
- h = args[3],
- tl = args[4],
- tr = args[5],
- br = args[6],
- bl = args[7];
- var ctx = this.drawingContext;
- var doFill = this._doFill, doStroke = this._doStroke;
- if (doFill && !doStroke) {
- if(ctx.fillStyle === styleEmpty) {
- return this;
- }
- } else if (!doFill && doStroke) {
- if(ctx.strokeStyle === styleEmpty) {
- return this;
- }
- }
- // Translate the line by (0.5, 0.5) to draw a crisp rectangle border
- if (this._doStroke && ctx.lineWidth % 2 === 1) {
- ctx.translate(0.5, 0.5);
- }
- ctx.beginPath();
-
- if (typeof tl === 'undefined') {
- // No rounded corners
- ctx.rect(x, y, w, h);
- } else {
- // At least one rounded corner
- // Set defaults when not specified
- if (typeof tr === 'undefined') { tr = tl; }
- if (typeof br === 'undefined') { br = tr; }
- if (typeof bl === 'undefined') { bl = br; }
-
- var hw = w / 2;
- var hh = h / 2;
-
- // Clip radii
- if (w < 2 * tl) { tl = hw; }
- if (h < 2 * tl) { tl = hh; }
- if (w < 2 * tr) { tr = hw; }
- if (h < 2 * tr) { tr = hh; }
- if (w < 2 * br) { br = hw; }
- if (h < 2 * br) { br = hh; }
- if (w < 2 * bl) { bl = hw; }
- if (h < 2 * bl) { bl = hh; }
-
- // Draw shape
- ctx.beginPath();
- ctx.moveTo(x + tl, y);
- ctx.arcTo(x + w, y, x + w, y + h, tr);
- ctx.arcTo(x + w, y + h, x, y + h, br);
- ctx.arcTo(x, y + h, x, y, bl);
- ctx.arcTo(x, y, x + w, y, tl);
- ctx.closePath();
- }
- if (this._doFill) {
- ctx.fill();
- }
- if (this._doStroke) {
- ctx.stroke();
- }
- if (this._doStroke && ctx.lineWidth % 2 === 1) {
- ctx.translate(-0.5, -0.5);
- }
- return this;
- };
-
- p5.Renderer2D.prototype.triangle = function(args) {
- var ctx = this.drawingContext;
- var doFill = this._doFill, doStroke = this._doStroke;
- var x1=args[0], y1=args[1];
- var x2=args[2], y2=args[3];
- var x3=args[4], y3=args[5];
- if (doFill && !doStroke) {
- if(ctx.fillStyle === styleEmpty) {
- return this;
- }
- } else if (!doFill && doStroke) {
- if(ctx.strokeStyle === styleEmpty) {
- return this;
- }
- }
- ctx.beginPath();
- ctx.moveTo(x1, y1);
- ctx.lineTo(x2, y2);
- ctx.lineTo(x3, y3);
- ctx.closePath();
- if (doFill) {
- ctx.fill();
- }
- if (doStroke) {
- ctx.stroke();
- }
- };
-
- p5.Renderer2D.prototype.endShape =
- function (mode, vertices, isCurve, isBezier,
- isQuadratic, isContour, shapeKind) {
- if (vertices.length === 0) {
- return this;
- }
- if (!this._doStroke && !this._doFill) {
- return this;
- }
- var closeShape = mode === constants.CLOSE;
- var v;
- if (closeShape && !isContour) {
- vertices.push(vertices[0]);
- }
- var i, j;
- var numVerts = vertices.length;
- if (isCurve && (shapeKind === constants.POLYGON || shapeKind === null)) {
- if (numVerts > 3) {
- var b = [], s = 1 - this._curveTightness;
- this.drawingContext.beginPath();
- this.drawingContext.moveTo(vertices[1][0], vertices[1][1]);
- for (i = 1; i + 2 < numVerts; i++) {
- v = vertices[i];
- b[0] = [
- v[0],
- v[1]
- ];
- b[1] = [
- v[0] + (s * vertices[i + 1][0] - s * vertices[i - 1][0]) / 6,
- v[1] + (s * vertices[i + 1][1] - s * vertices[i - 1][1]) / 6
- ];
- b[2] = [
- vertices[i + 1][0] +
- (s * vertices[i][0]-s * vertices[i + 2][0]) / 6,
- vertices[i + 1][1]+(s * vertices[i][1] - s*vertices[i + 2][1]) / 6
- ];
- b[3] = [
- vertices[i + 1][0],
- vertices[i + 1][1]
- ];
- this.drawingContext.bezierCurveTo(b[1][0],b[1][1],
- b[2][0],b[2][1],b[3][0],b[3][1]);
- }
- if (closeShape) {
- this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
- }
- this._doFillStrokeClose();
- }
- } else if (isBezier&&(shapeKind===constants.POLYGON ||shapeKind === null)) {
- this.drawingContext.beginPath();
- for (i = 0; i < numVerts; i++) {
- if (vertices[i].isVert) {
- if (vertices[i].moveTo) {
- this.drawingContext.moveTo(vertices[i][0], vertices[i][1]);
- } else {
- this.drawingContext.lineTo(vertices[i][0], vertices[i][1]);
- }
- } else {
- this.drawingContext.bezierCurveTo(vertices[i][0], vertices[i][1],
- vertices[i][2], vertices[i][3], vertices[i][4], vertices[i][5]);
- }
- }
- this._doFillStrokeClose();
- } else if (isQuadratic &&
- (shapeKind === constants.POLYGON || shapeKind === null)) {
- this.drawingContext.beginPath();
- for (i = 0; i < numVerts; i++) {
- if (vertices[i].isVert) {
- if (vertices[i].moveTo) {
- this.drawingContext.moveTo([0], vertices[i][1]);
- } else {
- this.drawingContext.lineTo(vertices[i][0], vertices[i][1]);
- }
- } else {
- this.drawingContext.quadraticCurveTo(vertices[i][0], vertices[i][1],
- vertices[i][2], vertices[i][3]);
- }
- }
- this._doFillStrokeClose();
- } else {
- if (shapeKind === constants.POINTS) {
- for (i = 0; i < numVerts; i++) {
- v = vertices[i];
- if (this._doStroke) {
- this._pInst.stroke(v[6]);
- }
- this._pInst.point(v[0], v[1]);
- }
- } else if (shapeKind === constants.LINES) {
- for (i = 0; i + 1 < numVerts; i += 2) {
- v = vertices[i];
- if (this._doStroke) {
- this._pInst.stroke(vertices[i + 1][6]);
- }
- this._pInst.line(v[0], v[1], vertices[i + 1][0], vertices[i + 1][1]);
- }
- } else if (shapeKind === constants.TRIANGLES) {
- for (i = 0; i + 2 < numVerts; i += 3) {
- v = vertices[i];
- this.drawingContext.beginPath();
- this.drawingContext.moveTo(v[0], v[1]);
- this.drawingContext.lineTo(vertices[i + 1][0], vertices[i + 1][1]);
- this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]);
- this.drawingContext.lineTo(v[0], v[1]);
- if (this._doFill) {
- this._pInst.fill(vertices[i + 2][5]);
- this.drawingContext.fill();
- }
- if (this._doStroke) {
- this._pInst.stroke(vertices[i + 2][6]);
- this.drawingContext.stroke();
- }
- this.drawingContext.closePath();
- }
- } else if (shapeKind === constants.TRIANGLE_STRIP) {
- for (i = 0; i + 1 < numVerts; i++) {
- v = vertices[i];
- this.drawingContext.beginPath();
- this.drawingContext.moveTo(vertices[i + 1][0], vertices[i + 1][1]);
- this.drawingContext.lineTo(v[0], v[1]);
- if (this._doStroke) {
- this._pInst.stroke(vertices[i + 1][6]);
- }
- if (this._doFill) {
- this._pInst.fill(vertices[i + 1][5]);
- }
- if (i + 2 < numVerts) {
- this.drawingContext.lineTo(vertices[i + 2][0], vertices[i + 2][1]);
- if (this._doStroke) {
- this._pInst.stroke(vertices[i + 2][6]);
- }
- if (this._doFill) {
- this._pInst.fill(vertices[i + 2][5]);
- }
- }
- this._doFillStrokeClose();
- }
- } else if (shapeKind === constants.TRIANGLE_FAN) {
- if (numVerts > 2) {
- this.drawingContext.beginPath();
- this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
- this.drawingContext.lineTo(vertices[1][0], vertices[1][1]);
- this.drawingContext.lineTo(vertices[2][0], vertices[2][1]);
- if (this._doFill) {
- this._pInst.fill(vertices[2][5]);
- }
- if (this._doStroke) {
- this._pInst.stroke(vertices[2][6]);
- }
- this._doFillStrokeClose();
- for (i = 3; i < numVerts; i++) {
- v = vertices[i];
- this.drawingContext.beginPath();
- this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
- this.drawingContext.lineTo(vertices[i - 1][0], vertices[i - 1][1]);
- this.drawingContext.lineTo(v[0], v[1]);
- if (this._doFill) {
- this._pInst.fill(v[5]);
- }
- if (this._doStroke) {
- this._pInst.stroke(v[6]);
- }
- this._doFillStrokeClose();
- }
- }
- } else if (shapeKind === constants.QUADS) {
- for (i = 0; i + 3 < numVerts; i += 4) {
- v = vertices[i];
- this.drawingContext.beginPath();
- this.drawingContext.moveTo(v[0], v[1]);
- for (j = 1; j < 4; j++) {
- this.drawingContext.lineTo(vertices[i + j][0], vertices[i + j][1]);
- }
- this.drawingContext.lineTo(v[0], v[1]);
- if (this._doFill) {
- this._pInst.fill(vertices[i + 3][5]);
- }
- if (this._doStroke) {
- this._pInst.stroke(vertices[i + 3][6]);
- }
- this._doFillStrokeClose();
- }
- } else if (shapeKind === constants.QUAD_STRIP) {
- if (numVerts > 3) {
- for (i = 0; i + 1 < numVerts; i += 2) {
- v = vertices[i];
- this.drawingContext.beginPath();
- if (i + 3 < numVerts) {
- this.drawingContext.moveTo(vertices[i + 2][0], vertices[i+2][1]);
- this.drawingContext.lineTo(v[0], v[1]);
- this.drawingContext.lineTo(vertices[i + 1][0], vertices[i+1][1]);
- this.drawingContext.lineTo(vertices[i + 3][0], vertices[i+3][1]);
- if (this._doFill) {
- this._pInst.fill(vertices[i + 3][5]);
- }
- if (this._doStroke) {
- this._pInst.stroke(vertices[i + 3][6]);
- }
- } else {
- this.drawingContext.moveTo(v[0], v[1]);
- this.drawingContext.lineTo(vertices[i + 1][0], vertices[i+1][1]);
- }
- this._doFillStrokeClose();
- }
- }
- } else {
- this.drawingContext.beginPath();
- this.drawingContext.moveTo(vertices[0][0], vertices[0][1]);
- for (i = 1; i < numVerts; i++) {
- v = vertices[i];
- if (v.isVert) {
- if (v.moveTo) {
- this.drawingContext.moveTo(v[0], v[1]);
- } else {
- this.drawingContext.lineTo(v[0], v[1]);
- }
- }
- }
- this._doFillStrokeClose();
- }
- }
- isCurve = false;
- isBezier = false;
- isQuadratic = false;
- isContour = false;
- if (closeShape) {
- vertices.pop();
- }
- return this;
- };
- //////////////////////////////////////////////
- // SHAPE | Attributes
- //////////////////////////////////////////////
-
- p5.Renderer2D.prototype.noSmooth = function() {
- if ('imageSmoothingEnabled' in this.drawingContext) {
- this.drawingContext.imageSmoothingEnabled = false;
- }
- else if ('mozImageSmoothingEnabled' in this.drawingContext) {
- this.drawingContext.mozImageSmoothingEnabled = false;
- }
- else if ('webkitImageSmoothingEnabled' in this.drawingContext) {
- this.drawingContext.webkitImageSmoothingEnabled = false;
- }
- else if ('msImageSmoothingEnabled' in this.drawingContext) {
- this.drawingContext.msImageSmoothingEnabled = false;
- }
- return this;
- };
-
- p5.Renderer2D.prototype.smooth = function() {
- if ('imageSmoothingEnabled' in this.drawingContext) {
- this.drawingContext.imageSmoothingEnabled = true;
- }
- else if ('mozImageSmoothingEnabled' in this.drawingContext) {
- this.drawingContext.mozImageSmoothingEnabled = true;
- }
- else if ('webkitImageSmoothingEnabled' in this.drawingContext) {
- this.drawingContext.webkitImageSmoothingEnabled = true;
- }
- else if ('msImageSmoothingEnabled' in this.drawingContext) {
- this.drawingContext.msImageSmoothingEnabled = true;
- }
- return this;
- };
-
- p5.Renderer2D.prototype.strokeCap = function(cap) {
- if (cap === constants.ROUND ||
- cap === constants.SQUARE ||
- cap === constants.PROJECT) {
- this.drawingContext.lineCap = cap;
- }
- return this;
- };
-
- p5.Renderer2D.prototype.strokeJoin = function(join) {
- if (join === constants.ROUND ||
- join === constants.BEVEL ||
- join === constants.MITER) {
- this.drawingContext.lineJoin = join;
- }
- return this;
- };
-
- p5.Renderer2D.prototype.strokeWeight = function(w) {
- if (typeof w === 'undefined' || w === 0) {
- // hack because lineWidth 0 doesn't work
- this.drawingContext.lineWidth = 0.0001;
- } else {
- this.drawingContext.lineWidth = w;
- }
- return this;
- };
-
- p5.Renderer2D.prototype._getFill = function(){
- return this.drawingContext.fillStyle;
- };
-
- p5.Renderer2D.prototype._getStroke = function(){
- return this.drawingContext.strokeStyle;
- };
-
- //////////////////////////////////////////////
- // SHAPE | Curves
- //////////////////////////////////////////////
- p5.Renderer2D.prototype.bezier = function (x1, y1, x2, y2, x3, y3, x4, y4) {
- this._pInst.beginShape();
- this._pInst.vertex(x1, y1);
- this._pInst.bezierVertex(x2, y2, x3, y3, x4, y4);
- this._pInst.endShape();
- return this;
- };
-
- p5.Renderer2D.prototype.curve = function (x1, y1, x2, y2, x3, y3, x4, y4) {
- this._pInst.beginShape();
- this._pInst.curveVertex(x1, y1);
- this._pInst.curveVertex(x2, y2);
- this._pInst.curveVertex(x3, y3);
- this._pInst.curveVertex(x4, y4);
- this._pInst.endShape();
- return this;
- };
-
- //////////////////////////////////////////////
- // SHAPE | Vertex
- //////////////////////////////////////////////
-
- p5.Renderer2D.prototype._doFillStrokeClose = function () {
- if (this._doFill) {
- this.drawingContext.fill();
- }
- if (this._doStroke) {
- this.drawingContext.stroke();
- }
- this.drawingContext.closePath();
- };
-
- //////////////////////////////////////////////
- // TRANSFORM
- //////////////////////////////////////////////
-
- p5.Renderer2D.prototype.applyMatrix =
- function(n00, n01, n02, n10, n11, n12) {
- this.drawingContext.transform(n00, n01, n02, n10, n11, n12);
- };
-
- p5.Renderer2D.prototype.resetMatrix = function() {
- this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
- this.drawingContext.scale(this._pInst._pixelDensity,
- this._pInst._pixelDensity);
- return this;
- };
-
- p5.Renderer2D.prototype.rotate = function(r) {
- this.drawingContext.rotate(r);
- };
-
- p5.Renderer2D.prototype.scale = function(x,y) {
- this.drawingContext.scale(x, y);
- return this;
- };
-
- p5.Renderer2D.prototype.shearX = function(angle) {
- if (this._pInst._angleMode === constants.DEGREES) {
- // undoing here, because it gets redone in tan()
- angle = this._pInst.degrees(angle);
- }
- this.drawingContext.transform(1, 0, this._pInst.tan(angle), 1, 0, 0);
- return this;
- };
-
- p5.Renderer2D.prototype.shearY = function(angle) {
- if (this._pInst._angleMode === constants.DEGREES) {
- // undoing here, because it gets redone in tan()
- angle = this._pInst.degrees(angle);
- }
- this.drawingContext.transform(1, this._pInst.tan(angle), 0, 1, 0, 0);
- return this;
- };
-
- p5.Renderer2D.prototype.translate = function(x, y) {
- this.drawingContext.translate(x, y);
- return this;
- };
-
- //////////////////////////////////////////////
- // TYPOGRAPHY
- //
- //////////////////////////////////////////////
-
- p5.Renderer2D.prototype.text = function (str, x, y, maxWidth, maxHeight) {
-
- var p = this._pInst, cars, n, ii, jj, line, testLine,
- testWidth, words, totalHeight, baselineHacked,
- finalMaxHeight = Number.MAX_VALUE;
-
- // baselineHacked: (HACK)
- // A temporary fix to conform to Processing's implementation
- // of BASELINE vertical alignment in a bounding box
-
- if (!(this._doFill || this._doStroke)) {
- return;
- }
-
- if (typeof str !== 'string') {
- str = str.toString();
- }
-
- str = str.replace(/(\t)/g, ' ');
- cars = str.split('\n');
-
- if (typeof maxWidth !== 'undefined') {
-
- totalHeight = 0;
- for (ii = 0; ii < cars.length; ii++) {
- line = '';
- words = cars[ii].split(' ');
- for (n = 0; n < words.length; n++) {
- testLine = line + words[n] + ' ';
- testWidth = this.textWidth(testLine);
- if (testWidth > maxWidth) {
- line = words[n] + ' ';
- totalHeight += p.textLeading();
- } else {
- line = testLine;
- }
- }
- }
-
- if (this._rectMode === constants.CENTER) {
-
- x -= maxWidth / 2;
- y -= maxHeight / 2;
- }
-
- switch (this.drawingContext.textAlign) {
-
- case constants.CENTER:
- x += maxWidth / 2;
- break;
- case constants.RIGHT:
- x += maxWidth;
- break;
- }
-
- if (typeof maxHeight !== 'undefined') {
-
- switch (this.drawingContext.textBaseline) {
- case constants.BOTTOM:
- y += (maxHeight - totalHeight);
- break;
- case constants._CTX_MIDDLE: // CENTER?
- y += (maxHeight - totalHeight) / 2;
- break;
- case constants.BASELINE:
- baselineHacked = true;
- this.drawingContext.textBaseline = constants.TOP;
- break;
- }
-
- // remember the max-allowed y-position for any line (fix to #928)
- finalMaxHeight = (y + maxHeight) - p.textAscent();
- }
-
- for (ii = 0; ii < cars.length; ii++) {
-
- line = '';
- words = cars[ii].split(' ');
- for (n = 0; n < words.length; n++) {
- testLine = line + words[n] + ' ';
- testWidth = this.textWidth(testLine);
- if (testWidth > maxWidth && line.length > 0) {
- this._renderText(p, line, x, y, finalMaxHeight);
- line = words[n] + ' ';
- y += p.textLeading();
- } else {
- line = testLine;
- }
- }
-
- this._renderText(p, line, x, y, finalMaxHeight);
- y += p.textLeading();
- }
- }
- else {
- // Offset to account for vertically centering multiple lines of text - no
- // need to adjust anything for vertical align top or baseline
- var offset = 0,
- vAlign = p.textAlign().vertical;
- if (vAlign === constants.CENTER) {
- offset = ((cars.length - 1) * p.textLeading()) / 2;
- } else if (vAlign === constants.BOTTOM) {
- offset = (cars.length - 1) * p.textLeading();
- }
-
- for (jj = 0; jj < cars.length; jj++) {
-
- this._renderText(p, cars[jj], x, y-offset, finalMaxHeight);
- y += p.textLeading();
- }
- }
-
- if (baselineHacked) {
- this.drawingContext.textBaseline = constants.BASELINE;
- }
-
- return p;
- };
-
- p5.Renderer2D.prototype._renderText = function(p, line, x, y, maxY) {
-
- if (y >= maxY) {
- return; // don't render lines beyond our maxY position
- }
-
- p.push(); // fix to #803
-
- if (!this._isOpenType()) { // a system/browser font
-
- // no stroke unless specified by user
- if (this._doStroke && this._strokeSet) {
-
- this.drawingContext.strokeText(line, x, y);
- }
-
- if (this._doFill) {
-
- // if fill hasn't been set by user, use default text fill
- this.drawingContext.fillStyle = this._fillSet ?
- this.drawingContext.fillStyle : constants._DEFAULT_TEXT_FILL;
-
- this.drawingContext.fillText(line, x, y);
- }
- }
- else { // an opentype font, let it handle the rendering
-
- this._textFont._renderPath(line, x, y, { renderer: this });
- }
-
- p.pop();
-
- return p;
- };
-
- p5.Renderer2D.prototype.textWidth = function(s) {
-
- if (this._isOpenType()) {
-
- return this._textFont._textWidth(s, this._textSize);
- }
-
- return this.drawingContext.measureText(s).width;
- };
-
- p5.Renderer2D.prototype.textAlign = function(h, v) {
-
- if (arguments.length) {
-
- if (h === constants.LEFT ||
- h === constants.RIGHT ||
- h === constants.CENTER) {
-
- this.drawingContext.textAlign = h;
- }
-
- if (v === constants.TOP ||
- v === constants.BOTTOM ||
- v === constants.CENTER ||
- v === constants.BASELINE) {
-
- if (v === constants.CENTER) {
- this.drawingContext.textBaseline = constants._CTX_MIDDLE;
- } else {
- this.drawingContext.textBaseline = v;
- }
- }
-
- return this._pInst;
-
- } else {
-
- var valign = this.drawingContext.textBaseline;
-
- if (valign === constants._CTX_MIDDLE) {
-
- valign = constants.CENTER;
- }
-
- return {
-
- horizontal: this.drawingContext.textAlign,
- vertical: valign
- };
- }
- };
-
- p5.Renderer2D.prototype._applyTextProperties = function() {
-
- var font, p = this._pInst;
-
- this._setProperty('_textAscent', null);
- this._setProperty('_textDescent', null);
-
- font = this._textFont;
-
- if (this._isOpenType()) {
-
- font = this._textFont.font.familyName;
- this._setProperty('_textStyle', this._textFont.font.styleName);
- }
-
- this.drawingContext.font = this._textStyle + ' ' +
- this._textSize + 'px ' + font;
-
- return p;
- };
-
-
- //////////////////////////////////////////////
- // STRUCTURE
- //////////////////////////////////////////////
-
- p5.Renderer2D.prototype.push = function() {
- this.drawingContext.save();
- };
-
- p5.Renderer2D.prototype.pop = function() {
- this.drawingContext.restore();
- };
-
- module.exports = p5.Renderer2D;
-
- },{"../image/filters":54,"./canvas":35,"./constants":36,"./core":37,"./p5.Renderer":43}],45:[function(_dereq_,module,exports){
- /**
- * @module Rendering
- * @submodule Rendering
- * @for p5
- */
-
- var p5 = _dereq_('./core');
- var constants = _dereq_('./constants');
- _dereq_('./p5.Graphics');
- _dereq_('./p5.Renderer2D');
- _dereq_('../webgl/p5.RendererGL');
- var defaultId = 'defaultCanvas0'; // this gets set again in createCanvas
-
- /**
- * Creates a canvas element in the document, and sets the dimensions of it
- * in pixels. This method should be called only once at the start of setup.
- * Calling createCanvas more than once in a sketch will result in very
- * unpredicable behavior. If you want more than one drawing canvas
- * you could use createGraphics (hidden by default but it can be shown).
- * <br><br>
- * The system variables width and height are set by the parameters passed
- * to this function. If createCanvas() is not used, the window will be
- * given a default size of 100x100 pixels.
- * <br><br>
- * For more ways to position the canvas, see the
- * <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>
- * positioning the canvas</a> wiki page.
- *
- * @method createCanvas
- * @param {Number} w width of the canvas
- * @param {Number} h height of the canvas
- * @param {Constant} [renderer] P2D or WEBGL
- * @return {Object} canvas generated
- * @example
- * <div>
- * <code>
- * function setup() {
- * createCanvas(100, 50);
- * background(153);
- * line(0, 0, width, height);
- * }
- * </code>
- * </div>
- *
- * @alt
- * Black line extending from top-left of canvas to bottom right.
- *
- */
-
- p5.prototype.createCanvas = function(w, h, renderer) {
- //optional: renderer, otherwise defaults to p2d
- var r = renderer || constants.P2D;
- var isDefault, c;
-
- //4th arg (isDefault) used when called onLoad,
- //otherwise hidden to the public api
- if(arguments[3]){
- isDefault =
- (typeof arguments[3] === 'boolean') ? arguments[3] : false;
- }
-
- if(r === constants.WEBGL){
- c = document.getElementById(defaultId);
- if(c){ //if defaultCanvas already exists
- c.parentNode.removeChild(c); //replace the existing defaultCanvas
- }
- c = document.createElement('canvas');
- c.id = defaultId;
- }
- else {
- if (isDefault) {
- c = document.createElement('canvas');
- var i = 0;
- while (document.getElementById('defaultCanvas'+i)) {
- i++;
- }
- defaultId = 'defaultCanvas'+i;
- c.id = defaultId;
- } else { // resize the default canvas if new one is created
- c = this.canvas;
- }
- }
-
- // set to invisible if still in setup (to prevent flashing with manipulate)
- if (!this._setupDone) {
- c.dataset.hidden = true; // tag to show later
- c.style.visibility='hidden';
- }
-
- if (this._userNode) { // user input node case
- this._userNode.appendChild(c);
- } else {
- document.body.appendChild(c);
- }
-
-
-
- // Init our graphics renderer
- //webgl mode
- if (r === constants.WEBGL) {
- this._setProperty('_renderer', new p5.RendererGL(c, this, true));
- this._isdefaultGraphics = true;
- }
- //P2D mode
- else {
- if (!this._isdefaultGraphics) {
- this._setProperty('_renderer', new p5.Renderer2D(c, this, true));
- this._isdefaultGraphics = true;
- }
- }
- this._renderer.resize(w, h);
- this._renderer._applyDefaults();
- if (isDefault) { // only push once
- this._elements.push(this._renderer);
- }
- return this._renderer;
- };
-
- /**
- * Resizes the canvas to given width and height. The canvas will be cleared
- * and draw will be called immediately, allowing the sketch to re-render itself
- * in the resized canvas.
- * @method resizeCanvas
- * @example
- * <div class="norender"><code>
- * function setup() {
- * createCanvas(windowWidth, windowHeight);
- * }
- *
- * function draw() {
- * background(0, 100, 200);
- * }
- *
- * function windowResized() {
- * resizeCanvas(windowWidth, windowHeight);
- * }
- * </code></div>
- *
- * @alt
- * No image displayed.
- *
- */
- p5.prototype.resizeCanvas = function (w, h, noRedraw) {
- if (this._renderer) {
-
- // save canvas properties
- var props = {};
- for (var key in this.drawingContext) {
- var val = this.drawingContext[key];
- if (typeof val !== 'object' && typeof val !== 'function') {
- props[key] = val;
- }
- }
- this._renderer.resize(w, h);
- // reset canvas properties
- for (var savedKey in props) {
- this.drawingContext[savedKey] = props[savedKey];
- }
- if (!noRedraw) {
- this.redraw();
- }
- }
- };
-
-
- /**
- * Removes the default canvas for a p5 sketch that doesn't
- * require a canvas
- * @method noCanvas
- * @example
- * <div>
- * <code>
- * function setup() {
- * noCanvas();
- * }
- * </code>
- * </div>
- *
- * @alt
- * no image displayed
- *
- */
- p5.prototype.noCanvas = function() {
- if (this.canvas) {
- this.canvas.parentNode.removeChild(this.canvas);
- }
- };
-
- /**
- * Creates and returns a new p5.Renderer object. Use this class if you need
- * to draw into an off-screen graphics buffer. The two parameters define the
- * width and height in pixels.
- *
- * @method createGraphics
- * @param {Number} w width of the offscreen graphics buffer
- * @param {Number} h height of the offscreen graphics buffer
- * @param {Constant} [renderer] P2D or WEBGL
- * undefined defaults to p2d
- * @return {Object} offscreen graphics buffer
- * @example
- * <div>
- * <code>
- * var pg;
- * function setup() {
- * createCanvas(100, 100);
- * pg = createGraphics(100, 100);
- * }
- * function draw() {
- * background(200);
- * pg.background(100);
- * pg.noStroke();
- * pg.ellipse(pg.width/2, pg.height/2, 50, 50);
- * image(pg, 50, 50);
- * image(pg, 0, 0, 50, 50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * 4 grey squares alternating light and dark grey. White quarter circle mid-left.
- *
- */
- p5.prototype.createGraphics = function(w, h, renderer){
- return new p5.Graphics(w, h, renderer, this);
- };
-
- /**
- * Blends the pixels in the display window according to the defined mode.
- * There is a choice of the following modes to blend the source pixels (A)
- * with the ones of pixels already in the display window (B):
- * <ul>
- * <li><code>BLEND</code> - linear interpolation of colours: C =
- * A*factor + B. This is the default blending mode.</li>
- * <li><code>ADD</code> - sum of A and B</li>
- * <li><code>DARKEST</code> - only the darkest colour succeeds: C =
- * min(A*factor, B).</li>
- * <li><code>LIGHTEST</code> - only the lightest colour succeeds: C =
- * max(A*factor, B).</li>
- * <li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>
- * <li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less
- * extreme.</li>
- * <li><code>MULTIPLY</code> - multiply the colors, result will always be
- * darker.</li>
- * <li><code>SCREEN</code> - opposite multiply, uses inverse values of the
- * colors.</li>
- * <li><code>REPLACE</code> - the pixels entirely replace the others and
- * don't utilize alpha (transparency) values.</li>
- * <li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN
- * </code>. Multiplies dark values, and screens light values.</li>
- * <li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%
- * gray, <code>MULTIPLY</code> when lower.</li>
- * <li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and
- * <code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh.
- * </li>
- * <li><code>DODGE</code> - lightens light tones and increases contrast,
- * ignores darks.</li>
- * <li><code>BURN</code> - darker areas are applied, increasing contrast,
- * ignores lights.</li>
- * </ul>
- *
- * @method blendMode
- * @param {Constant} mode blend mode to set for canvas
- * @example
- * <div>
- * <code>
- * blendMode(LIGHTEST);
- * strokeWeight(30);
- * stroke(80, 150, 255);
- * line(25, 25, 75, 75);
- * stroke(255, 50, 50);
- * line(75, 25, 25, 75);
- * </code>
- * </div>
- * <div>
- * <code>
- * blendMode(MULTIPLY);
- * strokeWeight(30);
- * stroke(80, 150, 255);
- * line(25, 25, 75, 75);
- * stroke(255, 50, 50);
- * line(75, 25, 25, 75);
- * </code>
- * </div>
- * @alt
- * translucent image thick red & blue diagonal rounded lines intersecting center
- * Thick red & blue diagonal rounded lines intersecting center. dark at overlap
- *
- */
- p5.prototype.blendMode = function(mode) {
- if (mode === constants.BLEND || mode === constants.DARKEST ||
- mode === constants.LIGHTEST || mode === constants.DIFFERENCE ||
- mode === constants.MULTIPLY || mode === constants.EXCLUSION ||
- mode === constants.SCREEN || mode === constants.REPLACE ||
- mode === constants.OVERLAY || mode === constants.HARD_LIGHT ||
- mode === constants.SOFT_LIGHT || mode === constants.DODGE ||
- mode === constants.BURN || mode === constants.ADD ||
- mode === constants.NORMAL) {
- this._renderer.blendMode(mode);
- } else {
- throw new Error('Mode '+mode+' not recognized.');
- }
- };
-
- module.exports = p5;
-
- },{"../webgl/p5.RendererGL":86,"./constants":36,"./core":37,"./p5.Graphics":42,"./p5.Renderer2D":44}],46:[function(_dereq_,module,exports){
-
- // requestAnim shim layer by Paul Irish
- window.requestAnimationFrame = (function(){
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function(callback, element){
- // should '60' here be framerate?
- window.setTimeout(callback, 1000 / 60);
- };
- })();
-
- // use window.performance() to get max fast and accurate time in milliseconds
- window.performance = window.performance || {};
- window.performance.now = (function(){
- var load_date = Date.now();
- return window.performance.now ||
- window.performance.mozNow ||
- window.performance.msNow ||
- window.performance.oNow ||
- window.performance.webkitNow ||
- function () {
- return Date.now() - load_date;
- };
- })();
-
- /*
- // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
- // http://my.opera.com/emoller/blog/2011/12/20/
- // requestanimationframe-for-smart-er-animating
- // requestAnimationFrame polyfill by Erik Möller
- // fixes from Paul Irish and Tino Zijdel
- (function() {
- var lastTime = 0;
- var vendors = ['ms', 'moz', 'webkit', 'o'];
- for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
- window.requestAnimationFrame =
- window[vendors[x]+'RequestAnimationFrame'];
- window.cancelAnimationFrame =
- window[vendors[x]+'CancelAnimationFrame'] ||
- window[vendors[x]+'CancelRequestAnimationFrame'];
- }
-
- if (!window.requestAnimationFrame) {
- window.requestAnimationFrame = function(callback, element) {
- var currTime = new Date().getTime();
- var timeToCall = Math.max(0, 16 - (currTime - lastTime));
- var id = window.setTimeout(function()
- { callback(currTime + timeToCall); }, timeToCall);
- lastTime = currTime + timeToCall;
- return id;
- };
- }
-
- if (!window.cancelAnimationFrame) {
- window.cancelAnimationFrame = function(id) {
- clearTimeout(id);
- };
- }
- }());
- */
-
- /**
- * shim for Uint8ClampedArray.slice
- * (allows arrayCopy to work with pixels[])
- * with thanks to http://halfpapstudios.com/blog/tag/html5-canvas/
- * Enumerable set to false to protect for...in from
- * Uint8ClampedArray.prototype pollution.
- */
- (function () {
- 'use strict';
- if (typeof Uint8ClampedArray !== 'undefined' &&
- !Uint8ClampedArray.prototype.slice) {
- Object.defineProperty(Uint8ClampedArray.prototype, 'slice', {
- value: Array.prototype.slice,
- writable: true, configurable: true, enumerable: false
- });
- }
- }());
-
- },{}],47:[function(_dereq_,module,exports){
- /**
- * @module Structure
- * @submodule Structure
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('./core');
-
- p5.prototype.exit = function() {
- throw 'exit() not implemented, see remove()';
- };
- /**
- * Stops p5.js from continuously executing the code within draw().
- * If loop() is called, the code in draw() begins to run continuously again.
- * If using noLoop() in setup(), it should be the last line inside the block.
- * <br><br>
- * When noLoop() is used, it's not possible to manipulate or access the
- * screen inside event handling functions such as mousePressed() or
- * keyPressed(). Instead, use those functions to call redraw() or loop(),
- * which will run draw(), which can update the screen properly. This means
- * that when noLoop() has been called, no drawing can happen, and functions
- * like saveFrame() or loadPixels() may not be used.
- * <br><br>
- * Note that if the sketch is resized, redraw() will be called to update
- * the sketch, even after noLoop() has been specified. Otherwise, the sketch
- * would enter an odd state until loop() was called.
- *
- * @method noLoop
- * @example
- * <div><code>
- * function setup() {
- * createCanvas(100, 100);
- * background(200);
- * noLoop();
- * }
-
- * function draw() {
- * line(10, 10, 90, 90);
- * }
- * </code></div>
- *
- * <div><code>
- * var x = 0;
- * function setup() {
- * createCanvas(100, 100);
- * }
- *
- * function draw() {
- * background(204);
- * x = x + 0.1;
- * if (x > width) {
- * x = 0;
- * }
- * line(x, 0, x, height);
- * }
- *
- * function mousePressed() {
- * noLoop();
- * }
- *
- * function mouseReleased() {
- * loop();
- * }
- * </code></div>
- *
- * @alt
- * 113 pixel long line extending from top-left to bottom right of canvas.
- * horizontal line moves slowly from left. Loops but stops on mouse press.
- *
- */
- p5.prototype.noLoop = function() {
- this._loop = false;
- };
- /**
- * By default, p5.js loops through draw() continuously, executing the code
- * within it. However, the draw() loop may be stopped by calling noLoop().
- * In that case, the draw() loop can be resumed with loop().
- *
- * @method loop
- * @example
- * <div><code>
- * var x = 0;
- * function setup() {
- * createCanvas(100, 100);
- * noLoop();
- * }
- *
- * function draw() {
- * background(204);
- * x = x + 0.1;
- * if (x > width) {
- * x = 0;
- * }
- * line(x, 0, x, height);
- * }
- *
- * function mousePressed() {
- * loop();
- * }
- *
- * function mouseReleased() {
- * noLoop();
- * }
- * </code></div>
- *
- * @alt
- * horizontal line moves slowly from left. Loops but stops on mouse press.
- *
- */
-
- p5.prototype.loop = function() {
- this._loop = true;
- this._draw();
- };
-
- /**
- * The push() function saves the current drawing style settings and
- * transformations, while pop() restores these settings. Note that these
- * functions are always used together. They allow you to change the style
- * and transformation settings and later return to what you had. When a new
- * state is started with push(), it builds on the current style and transform
- * information. The push() and pop() functions can be embedded to provide
- * more control. (See the second example for a demonstration.)
- * <br><br>
- * push() stores information related to the current transformation state
- * and style settings controlled by the following functions: fill(),
- * stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),
- * imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),
- * textFont(), textMode(), textSize(), textLeading().
- *
- * @method push
- * @example
- * <div>
- * <code>
- * ellipse(0, 50, 33, 33); // Left circle
- *
- * push(); // Start a new drawing state
- * strokeWeight(10);
- * fill(204, 153, 0);
- * translate(50, 0);
- * ellipse(0, 50, 33, 33); // Middle circle
- * pop(); // Restore original state
- *
- * ellipse(100, 50, 33, 33); // Right circle
- * </code>
- * </div>
- * <div>
- * <code>
- * ellipse(0, 50, 33, 33); // Left circle
- *
- * push(); // Start a new drawing state
- * strokeWeight(10);
- * fill(204, 153, 0);
- * ellipse(33, 50, 33, 33); // Left-middle circle
- *
- * push(); // Start another new drawing state
- * stroke(0, 102, 153);
- * ellipse(66, 50, 33, 33); // Right-middle circle
- * pop(); // Restore previous state
- *
- * pop(); // Restore original state
- *
- * ellipse(100, 50, 33, 33); // Right circle
- * </code>
- * </div>
- *
- * @alt
- * Gold ellipse + thick black outline @center 2 white ellipses on left and right.
- * 2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
- *
- */
- p5.prototype.push = function () {
- this._renderer.push();
- this._styles.push({
- _doStroke: this._renderer._doStroke,
- _strokeSet: this._renderer._strokeSet,
- _doFill: this._renderer._doFill,
- _fillSet: this._renderer._fillSet,
- _tint: this._renderer._tint,
- _imageMode: this._renderer._imageMode,
- _rectMode: this._renderer._rectMode,
- _ellipseMode: this._renderer._ellipseMode,
- _colorMode: this._renderer._colorMode,
- _textFont: this._renderer._textFont,
- _textLeading: this._renderer._textLeading,
- _textSize: this._renderer._textSize,
- _textStyle: this._renderer._textStyle
- });
- };
-
- /**
- * The push() function saves the current drawing style settings and
- * transformations, while pop() restores these settings. Note that these
- * functions are always used together. They allow you to change the style
- * and transformation settings and later return to what you had. When a new
- * state is started with push(), it builds on the current style and transform
- * information. The push() and pop() functions can be embedded to provide
- * more control. (See the second example for a demonstration.)
- * <br><br>
- * push() stores information related to the current transformation state
- * and style settings controlled by the following functions: fill(),
- * stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),
- * imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),
- * textFont(), textMode(), textSize(), textLeading().
- *
- * @method pop
- * @example
- * <div>
- * <code>
- * ellipse(0, 50, 33, 33); // Left circle
- *
- * push(); // Start a new drawing state
- * translate(50, 0);
- * strokeWeight(10);
- * fill(204, 153, 0);
- * ellipse(0, 50, 33, 33); // Middle circle
- * pop(); // Restore original state
- *
- * ellipse(100, 50, 33, 33); // Right circle
- * </code>
- * </div>
- * <div>
- * <code>
- * ellipse(0, 50, 33, 33); // Left circle
- *
- * push(); // Start a new drawing state
- * strokeWeight(10);
- * fill(204, 153, 0);
- * ellipse(33, 50, 33, 33); // Left-middle circle
- *
- * push(); // Start another new drawing state
- * stroke(0, 102, 153);
- * ellipse(66, 50, 33, 33); // Right-middle circle
- * pop(); // Restore previous state
- *
- * pop(); // Restore original state
- *
- * ellipse(100, 50, 33, 33); // Right circle
- * </code>
- * </div>
- *
- * @alt
- * Gold ellipse + thick black outline @center 2 white ellipses on left and right.
- * 2 Gold ellipses left black right blue stroke. 2 white ellipses on left+right.
- *
- */
- p5.prototype.pop = function () {
- this._renderer.pop();
- var lastS = this._styles.pop();
- for(var prop in lastS){
- this._renderer[prop] = lastS[prop];
- }
- };
-
- p5.prototype.pushStyle = function() {
- throw new Error('pushStyle() not used, see push()');
- };
-
- p5.prototype.popStyle = function() {
- throw new Error('popStyle() not used, see pop()');
- };
-
- /**
- *
- * Executes the code within draw() one time. This functions allows the
- * program to update the display window only when necessary, for example
- * when an event registered by mousePressed() or keyPressed() occurs.
- * <br><br>
- * In structuring a program, it only makes sense to call redraw() within
- * events such as mousePressed(). This is because redraw() does not run
- * draw() immediately (it only sets a flag that indicates an update is
- * needed).
- * <br><br>
- * The redraw() function does not work properly when called inside draw().
- * To enable/disable animations, use loop() and noLoop().
- * <br><br>
- * In addition you can set the number of redraws per method call. Just
- * add an integer as single parameter for the number of redraws.
- *
- * @method redraw
- * @param {Integer} [n] Redraw for n-times. The default value is 1.
- * @example
- * <div><code>
- * var x = 0;
- *
- * function setup() {
- * createCanvas(100, 100);
- * noLoop();
- * }
- *
- * function draw() {
- * background(204);
- * line(x, 0, x, height);
- * }
- *
- * function mousePressed() {
- * x += 1;
- * redraw();
- * }
- * </code></div>
- *
- * <div class='norender'><code>
- * var x = 0;
- *
- * function setup() {
- * createCanvas(100, 100);
- * noLoop();
- * }
- *
- * function draw() {
- * background(204);
- * x += 1;
- * line(x, 0, x, height);
- * }
- *
- * function mousePressed() {
- * redraw(5);
- * }
- * </code></div>
- *
- * @alt
- * black line on far left of canvas
- * black line on far left of canvas
- *
- */
- p5.prototype.redraw = function () {
- this.resetMatrix();
- if(this._renderer.isP3D){
- this._renderer._update();
- }
-
- var numberOfRedraws = 1;
- if (arguments.length === 1) {
- try {
- if (parseInt(arguments[0]) > 1) {
- numberOfRedraws = parseInt(arguments[0]);
- }
- } catch (error) {
- // Do nothing, because the default value didn't be changed.
- }
- }
- var userSetup = this.setup || window.setup;
- var userDraw = this.draw || window.draw;
- if (typeof userDraw === 'function') {
- if (typeof userSetup === 'undefined') {
- this.scale(this._pixelDensity, this._pixelDensity);
- }
- var self = this;
- var callMethod = function (f) {
- f.call(self);
- };
- for (var idxRedraw = 0; idxRedraw < numberOfRedraws; idxRedraw++) {
- this._registeredMethods.pre.forEach(callMethod);
- userDraw();
- this._registeredMethods.post.forEach(callMethod);
- }
- }
- };
-
- p5.prototype.size = function() {
- var s = 'size() is not a valid p5 function, to set the size of the ';
- s += 'drawing canvas, please use createCanvas() instead';
- throw s;
- };
-
-
- module.exports = p5;
-
- },{"./core":37}],48:[function(_dereq_,module,exports){
- /**
- * @module Transform
- * @submodule Transform
- * @for p5
- * @requires core
- * @requires constants
- */
-
-
- 'use strict';
-
- var p5 = _dereq_('./core');
- var constants = _dereq_('./constants');
-
- /**
- * Multiplies the current matrix by the one specified through the parameters.
- * This is very slow because it will try to calculate the inverse of the
- * transform, so avoid it whenever possible.
- *
- * @method applyMatrix
- * @param {Number} n00 numbers which define the 3x2 matrix to be multiplied
- * @param {Number} n01 numbers which define the 3x2 matrix to be multiplied
- * @param {Number} n02 numbers which define the 3x2 matrix to be multiplied
- * @param {Number} n10 numbers which define the 3x2 matrix to be multiplied
- * @param {Number} n11 numbers which define the 3x2 matrix to be multiplied
- * @param {Number} n12 numbers which define the 3x2 matrix to be multiplied
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * // Example in the works.
- * </code>
- * </div>
- *
- * @alt
- * no image diplayed
- *
- */
- p5.prototype.applyMatrix = function(n00, n01, n02, n10, n11, n12) {
- this._renderer.applyMatrix(n00, n01, n02, n10, n11, n12);
- return this;
- };
-
- p5.prototype.popMatrix = function() {
- throw new Error('popMatrix() not used, see pop()');
- };
-
- p5.prototype.printMatrix = function() {
- throw new Error('printMatrix() not implemented');
- };
-
- p5.prototype.pushMatrix = function() {
- throw new Error('pushMatrix() not used, see push()');
- };
-
- /**
- * Replaces the current matrix with the identity matrix.
- *
- * @method resetMatrix
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * // Example in the works.
- * </code>
- * </div>
- *
- * @alt
- * no image diplayed
- *
- */
- p5.prototype.resetMatrix = function() {
- this._renderer.resetMatrix();
- return this;
- };
-
- /**
- * Rotates a shape the amount specified by the angle parameter. This
- * function accounts for angleMode, so angles can be entered in either
- * RADIANS or DEGREES.
- * <br><br>
- * Objects are always rotated around their relative position to the
- * origin and positive numbers rotate objects in a clockwise direction.
- * Transformations apply to everything that happens after and subsequent
- * calls to the function accumulates the effect. For example, calling
- * rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).
- * All tranformations are reset when draw() begins again.
- * <br><br>
- * Technically, rotate() multiplies the current transformation matrix
- * by a rotation matrix. This function can be further controlled by
- * the push() and pop().
- *
- * @method rotate
- * @param {Number} angle the angle of rotation, specified in radians
- * or degrees, depending on current angleMode
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * translate(width/2, height/2);
- * rotate(PI/3.0);
- * rect(-26, -26, 52, 52);
- * </code>
- * </div>
- *
- * @alt
- * white 52x52 rect with black outline at center rotated counter 45 degrees
- *
- */
- /**
- * @method rotate
- * @param {Number} rad angle in radians
- * @param {p5.Vector | Array} axis axis to rotate around
- * @return {p5.RendererGL} [description]
- */
- p5.prototype.rotate = function() {
- var args = new Array(arguments.length);
- var r;
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- if (this._angleMode === constants.DEGREES) {
- r = this.radians(args[0]);
- } else if (this._angleMode === constants.RADIANS){
- r = args[0];
- }
- //in webgl mode
- if(args.length > 1){
- this._renderer.rotate(r, args[1]);
- }
- else {
- this._renderer.rotate(r);
- }
- return this;
- };
-
- /**
- * Rotates around X axis.
- * @method rotateX
- * @param {Number} rad angles in radians
- * @return {[type]} [description]
- */
- p5.prototype.rotateX = function(rad) {
- if (this._renderer.isP3D) {
- this._renderer.rotateX(rad);
- } else {
- throw 'not supported in p2d. Please use webgl mode';
- }
- return this;
- };
-
- /**
- * Rotates around Y axis.
- * @method rotateY
- * @param {Number} rad angles in radians
- * @return {[type]} [description]
- */
- p5.prototype.rotateY = function(rad) {
- if (this._renderer.isP3D) {
- this._renderer.rotateY(rad);
- } else {
- throw 'not supported in p2d. Please use webgl mode';
- }
- return this;
- };
-
- /**
- * Rotates around Z axis. Webgl mode only.
- * @method rotateZ
- * @param {Number} rad angles in radians
- * @return {[type]} [description]
- */
- p5.prototype.rotateZ = function(rad) {
- if (this._renderer.isP3D) {
- this._renderer.rotateZ(rad);
- } else {
- throw 'not supported in p2d. Please use webgl mode';
- }
- return this;
- };
-
- /**
- * Increases or decreases the size of a shape by expanding and contracting
- * vertices. Objects always scale from their relative origin to the
- * coordinate system. Scale values are specified as decimal percentages.
- * For example, the function call scale(2.0) increases the dimension of a
- * shape by 200%.
- * <br><br>
- * Transformations apply to everything that happens after and subsequent
- * calls to the function multiply the effect. For example, calling scale(2.0)
- * and then scale(1.5) is the same as scale(3.0). If scale() is called
- * within draw(), the transformation is reset when the loop begins again.
- * <br><br>
- * Using this function with the z parameter is only available in WEBGL mode.
- * This function can be further controlled with push() and pop().
- *
- * @method scale
- * @param {Number | p5.Vector | Array} s
- * percent to scale the object, or percentage to
- * scale the object in the x-axis if multiple arguments
- * are given
- * @param {Number} [y] percent to scale the object in the y-axis
- * @param {Number} [z] percent to scale the object in the z-axis (webgl only)
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * translate(width/2, height/2);
- * rotate(PI/3.0);
- * rect(-26, -26, 52, 52);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * rect(30, 20, 50, 50);
- * scale(0.5, 1.3);
- * rect(30, 20, 50, 50);
- * </code>
- * </div>
- *
- * @alt
- * white 52x52 rect with black outline at center rotated counter 45 degrees
- * 2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left
- *
- */
- p5.prototype.scale = function() {
- var x,y,z;
- var args = new Array(arguments.length);
- for(var i = 0; i < args.length; i++) {
- args[i] = arguments[i];
- }
- if(args[0] instanceof p5.Vector){
- x = args[0].x;
- y = args[0].y;
- z = args[0].z;
- }
- else if(args[0] instanceof Array){
- x = args[0][0];
- y = args[0][1];
- z = args[0][2] || 1;
- }
- else {
- if(args.length === 1){
- x = y = z = args[0];
- }
- else {
- x = args[0];
- y = args[1];
- z = args[2] || 1;
- }
- }
-
- if(this._renderer.isP3D){
- this._renderer.scale.call(this._renderer, x,y,z);
- }
- else {
- this._renderer.scale.call(this._renderer, x,y);
- }
- return this;
- };
-
- /**
- * Shears a shape around the x-axis the amount specified by the angle
- * parameter. Angles should be specified in the current angleMode.
- * Objects are always sheared around their relative position to the origin
- * and positive numbers shear objects in a clockwise direction.
- * <br><br>
- * Transformations apply to everything that happens after and subsequent
- * calls to the function accumulates the effect. For example, calling
- * shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).
- * If shearX() is called within the draw(), the transformation is reset when
- * the loop begins again.
- * <br><br>
- * Technically, shearX() multiplies the current transformation matrix by a
- * rotation matrix. This function can be further controlled by the
- * push() and pop() functions.
- *
- * @method shearX
- * @param {Number} angle angle of shear specified in radians or degrees,
- * depending on current angleMode
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * translate(width/4, height/4);
- * shearX(PI/4.0);
- * rect(0, 0, 30, 30);
- * </code>
- * </div>
- *
- * @alt
- * white irregular quadrilateral with black outline at top middle.
- *
- */
- p5.prototype.shearX = function(angle) {
- if (this._angleMode === constants.DEGREES) {
- angle = this.radians(angle);
- }
- this._renderer.shearX(angle);
- return this;
- };
-
- /**
- * Shears a shape around the y-axis the amount specified by the angle
- * parameter. Angles should be specified in the current angleMode. Objects
- * are always sheared around their relative position to the origin and
- * positive numbers shear objects in a clockwise direction.
- * <br><br>
- * Transformations apply to everything that happens after and subsequent
- * calls to the function accumulates the effect. For example, calling
- * shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If
- * shearY() is called within the draw(), the transformation is reset when
- * the loop begins again.
- * <br><br>
- * Technically, shearY() multiplies the current transformation matrix by a
- * rotation matrix. This function can be further controlled by the
- * push() and pop() functions.
- *
- * @method shearY
- * @param {Number} angle angle of shear specified in radians or degrees,
- * depending on current angleMode
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * translate(width/4, height/4);
- * shearY(PI/4.0);
- * rect(0, 0, 30, 30);
- * </code>
- * </div>
- *
- * @alt
- * white irregular quadrilateral with black outline at middle bottom.
- *
- */
- p5.prototype.shearY = function(angle) {
- if (this._angleMode === constants.DEGREES) {
- angle = this.radians(angle);
- }
- this._renderer.shearY(angle);
- return this;
- };
-
- /**
- * Specifies an amount to displace objects within the display window.
- * The x parameter specifies left/right translation, the y parameter
- * specifies up/down translation.
- * <br><br>
- * Transformations are cumulative and apply to everything that happens after
- * and subsequent calls to the function accumulates the effect. For example,
- * calling translate(50, 0) and then translate(20, 0) is the same as
- * translate(70, 0). If translate() is called within draw(), the
- * transformation is reset when the loop begins again. This function can be
- * further controlled by using push() and pop().
- *
- * @method translate
- * @param {Number} x left/right translation
- * @param {Number} y up/down translation
- * @param {Number} [z] forward/backward translation (webgl only)
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * translate(30, 20);
- * rect(0, 0, 55, 55);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * rect(0, 0, 55, 55); // Draw rect at original 0,0
- * translate(30, 20);
- * rect(0, 0, 55, 55); // Draw rect at new 0,0
- * translate(14, 14);
- * rect(0, 0, 55, 55); // Draw rect at new 0,0
- * </code>
- * </div>
- *
- * @alt
- * white 55x55 rect with black outline at center right.
- * 3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.
- *
- */
- p5.prototype.translate = function(x, y, z) {
- if (this._renderer.isP3D) {
- this._renderer.translate(x, y, z);
- } else {
- this._renderer.translate(x, y);
- }
- return this;
- };
-
- module.exports = p5;
-
- },{"./constants":36,"./core":37}],49:[function(_dereq_,module,exports){
- /**
- * @module Shape
- * @submodule Vertex
- * @for p5
- * @requires core
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('./core');
- var constants = _dereq_('./constants');
- var shapeKind = null;
- var vertices = [];
- var contourVertices = [];
- var isBezier = false;
- var isCurve = false;
- var isQuadratic = false;
- var isContour = false;
- var isFirstContour = true;
-
- /**
- * Use the beginContour() and endContour() functions to create negative
- * shapes within shapes such as the center of the letter 'O'. beginContour()
- * begins recording vertices for the shape and endContour() stops recording.
- * The vertices that define a negative shape must "wind" in the opposite
- * direction from the exterior shape. First draw vertices for the exterior
- * clockwise order, then for internal shapes, draw vertices
- * shape in counter-clockwise.
- * <br><br>
- * These functions can only be used within a beginShape()/endShape() pair and
- * transformations such as translate(), rotate(), and scale() do not work
- * within a beginContour()/endContour() pair. It is also not possible to use
- * other shapes, such as ellipse() or rect() within.
- *
- * @method beginContour
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * translate(50, 50);
- * stroke(255, 0, 0);
- * beginShape();
- * // Exterior part of shape, clockwise winding
- * vertex(-40, -40);
- * vertex(40, -40);
- * vertex(40, 40);
- * vertex(-40, 40);
- * // Interior part of shape, counter-clockwise winding
- * beginContour();
- * vertex(-20, -20);
- * vertex(-20, 20);
- * vertex(20, 20);
- * vertex(20, -20);
- * endContour();
- * endShape(CLOSE);
- * </code>
- * </div>
- *
- * @alt
- * white rect and smaller grey rect with red outlines in center of canvas.
- *
- */
- p5.prototype.beginContour = function() {
- contourVertices = [];
- isContour = true;
- return this;
- };
-
- /**
- * Using the beginShape() and endShape() functions allow creating more
- * complex forms. beginShape() begins recording vertices for a shape and
- * endShape() stops recording. The value of the kind parameter tells it which
- * types of shapes to create from the provided vertices. With no mode
- * specified, the shape can be any irregular polygon.
- * <br><br>
- * The parameters available for beginShape() are POINTS, LINES, TRIANGLES,
- * TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the
- * beginShape() function, a series of vertex() commands must follow. To stop
- * drawing the shape, call endShape(). Each shape will be outlined with the
- * current stroke color and filled with the fill color.
- * <br><br>
- * Transformations such as translate(), rotate(), and scale() do not work
- * within beginShape(). It is also not possible to use other shapes, such as
- * ellipse() or rect() within beginShape().
- *
- * @method beginShape
- * @param {Constant} kind either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
- * TRIANGLE_STRIP, QUADS, or QUAD_STRIP
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * beginShape();
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape(CLOSE);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * // currently not working
- * beginShape(POINTS);
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * beginShape(LINES);
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * noFill();
- * beginShape();
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * noFill();
- * beginShape();
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape(CLOSE);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * beginShape(TRIANGLES);
- * vertex(30, 75);
- * vertex(40, 20);
- * vertex(50, 75);
- * vertex(60, 20);
- * vertex(70, 75);
- * vertex(80, 20);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * beginShape(TRIANGLE_STRIP);
- * vertex(30, 75);
- * vertex(40, 20);
- * vertex(50, 75);
- * vertex(60, 20);
- * vertex(70, 75);
- * vertex(80, 20);
- * vertex(90, 75);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * beginShape(TRIANGLE_FAN);
- * vertex(57.5, 50);
- * vertex(57.5, 15);
- * vertex(92, 50);
- * vertex(57.5, 85);
- * vertex(22, 50);
- * vertex(57.5, 15);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * beginShape(QUADS);
- * vertex(30, 20);
- * vertex(30, 75);
- * vertex(50, 75);
- * vertex(50, 20);
- * vertex(65, 20);
- * vertex(65, 75);
- * vertex(85, 75);
- * vertex(85, 20);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * beginShape(QUAD_STRIP);
- * vertex(30, 20);
- * vertex(30, 75);
- * vertex(50, 20);
- * vertex(50, 75);
- * vertex(65, 20);
- * vertex(65, 75);
- * vertex(85, 20);
- * vertex(85, 75);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * beginShape();
- * vertex(20, 20);
- * vertex(40, 20);
- * vertex(40, 40);
- * vertex(60, 40);
- * vertex(60, 60);
- * vertex(20, 60);
- * endShape(CLOSE);
- * </code>
- * </div>
- * @alt
- * white square-shape with black outline in middle-right of canvas.
- * 4 black points in a square shape in middle-right of canvas.
- * 2 horizontal black lines. In the top-right and bottom-right of canvas.
- * 3 line shape with horizontal on top, vertical in middle and horizontal bottom.
- * square line shape in middle-right of canvas.
- * 2 white triangle shapes mid-right canvas. left one pointing up and right down.
- * 5 horizontal interlocking and alternating white triangles in mid-right canvas.
- * 4 interlocking white triangles in 45 degree rotated square-shape.
- * 2 white rectangle shapes in mid-right canvas. Both 20x55.
- * 3 side-by-side white rectangles center rect is smaller in mid-right canvas.
- * Thick white l-shape with black outline mid-top-left of canvas.
- *
- */
- p5.prototype.beginShape = function(kind) {
- if (kind === constants.POINTS ||
- kind === constants.LINES ||
- kind === constants.TRIANGLES ||
- kind === constants.TRIANGLE_FAN ||
- kind === constants.TRIANGLE_STRIP ||
- kind === constants.QUADS ||
- kind === constants.QUAD_STRIP) {
- shapeKind = kind;
- } else {
- shapeKind = null;
- }
- if(this._renderer.isP3D){
- this._renderer.beginShape(kind);
- } else {
- vertices = [];
- contourVertices = [];
- }
- return this;
- };
-
- /**
- * Specifies vertex coordinates for Bezier curves. Each call to
- * bezierVertex() defines the position of two control points and
- * one anchor point of a Bezier curve, adding a new segment to a
- * line or shape.
- * <br><br>
- * The first time bezierVertex() is used within a
- * beginShape() call, it must be prefaced with a call to vertex()
- * to set the first anchor point. This function must be used between
- * beginShape() and endShape() and only when there is no MODE
- * parameter specified to beginShape().
- *
- * @method bezierVertex
- * @param {Number} x2 x-coordinate for the first control point
- * @param {Number} y2 y-coordinate for the first control point
- * @param {Number} x3 x-coordinate for the second control point
- * @param {Number} y3 y-coordinate for the second control point
- * @param {Number} x4 x-coordinate for the anchor point
- * @param {Number} y4 y-coordinate for the anchor point
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * noFill();
- * beginShape();
- * vertex(30, 20);
- * bezierVertex(80, 0, 80, 75, 30, 75);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * beginShape();
- * vertex(30, 20);
- * bezierVertex(80, 0, 80, 75, 30, 75);
- * bezierVertex(50, 80, 60, 25, 30, 20);
- * endShape();
- * </code>
- * </div>
- *
- * @alt
- * crescent-shaped line in middle of canvas. Points facing left.
- * white crescent shape in middle of canvas. Points facing left.
- *
- */
- p5.prototype.bezierVertex = function(x2, y2, x3, y3, x4, y4) {
- if (vertices.length === 0) {
- throw 'vertex() must be used once before calling bezierVertex()';
- } else {
- isBezier = true;
- var vert = [];
- for (var i = 0; i < arguments.length; i++) {
- vert[i] = arguments[i];
- }
- vert.isVert = false;
- if (isContour) {
- contourVertices.push(vert);
- } else {
- vertices.push(vert);
- }
- }
- return this;
- };
-
- /**
- * Specifies vertex coordinates for curves. This function may only
- * be used between beginShape() and endShape() and only when there
- * is no MODE parameter specified to beginShape().
- * <br><br>
- * The first and last points in a series of curveVertex() lines will be used to
- * guide the beginning and end of a the curve. A minimum of four
- * points is required to draw a tiny curve between the second and
- * third points. Adding a fifth point with curveVertex() will draw
- * the curve between the second, third, and fourth points. The
- * curveVertex() function is an implementation of Catmull-Rom
- * splines.
- *
- * @method curveVertex
- * @param {Number} x x-coordinate of the vertex
- * @param {Number} y y-coordinate of the vertex
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * noFill();
- * beginShape();
- * curveVertex(84, 91);
- * curveVertex(84, 91);
- * curveVertex(68, 19);
- * curveVertex(21, 17);
- * curveVertex(32, 100);
- * curveVertex(32, 100);
- * endShape();
- * </code>
- * </div>
- *
- * @alt
- * Upside-down u-shape line, mid canvas. left point extends beyond canvas view.
- *
- */
- p5.prototype.curveVertex = function(x,y) {
- isCurve = true;
- this.vertex(x, y);
- return this;
- };
-
- /**
- * Use the beginContour() and endContour() functions to create negative
- * shapes within shapes such as the center of the letter 'O'. beginContour()
- * begins recording vertices for the shape and endContour() stops recording.
- * The vertices that define a negative shape must "wind" in the opposite
- * direction from the exterior shape. First draw vertices for the exterior
- * clockwise order, then for internal shapes, draw vertices
- * shape in counter-clockwise.
- * <br><br>
- * These functions can only be used within a beginShape()/endShape() pair and
- * transformations such as translate(), rotate(), and scale() do not work
- * within a beginContour()/endContour() pair. It is also not possible to use
- * other shapes, such as ellipse() or rect() within.
- *
- * @method endContour
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * translate(50, 50);
- * stroke(255, 0, 0);
- * beginShape();
- * // Exterior part of shape, clockwise winding
- * vertex(-40, -40);
- * vertex(40, -40);
- * vertex(40, 40);
- * vertex(-40, 40);
- * // Interior part of shape, counter-clockwise winding
- * beginContour();
- * vertex(-20, -20);
- * vertex(-20, 20);
- * vertex(20, 20);
- * vertex(20, -20);
- * endContour();
- * endShape(CLOSE);
- * </code>
- * </div>
- *
- * @alt
- * white rect and smaller grey rect with red outlines in center of canvas.
- *
- */
- p5.prototype.endContour = function() {
- var vert = contourVertices[0].slice(); // copy all data
- vert.isVert = contourVertices[0].isVert;
- vert.moveTo = false;
- contourVertices.push(vert);
-
- // prevent stray lines with multiple contours
- if (isFirstContour) {
- vertices.push(vertices[0]);
- isFirstContour = false;
- }
-
- for (var i = 0; i < contourVertices.length; i++) {
- vertices.push(contourVertices[i]);
- }
- return this;
- };
-
- /**
- * The endShape() function is the companion to beginShape() and may only be
- * called after beginShape(). When endshape() is called, all of image data
- * defined since the previous call to beginShape() is written into the image
- * buffer. The constant CLOSE as the value for the MODE parameter to close
- * the shape (to connect the beginning and the end).
- *
- * @method endShape
- * @param {Constant} mode use CLOSE to close the shape
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * noFill();
- *
- * beginShape();
- * vertex(20, 20);
- * vertex(45, 20);
- * vertex(45, 80);
- * endShape(CLOSE);
- *
- * beginShape();
- * vertex(50, 20);
- * vertex(75, 20);
- * vertex(75, 80);
- * endShape();
- * </code>
- * </div>
- *
- * @alt
- * Triangle line shape with smallest interior angle on bottom and upside-down L.
- *
- */
- p5.prototype.endShape = function(mode) {
- if(this._renderer.isP3D){
- this._renderer.endShape(mode, isCurve, isBezier,
- isQuadratic, isContour, shapeKind);
- }else{
- if (vertices.length === 0) { return this; }
- if (!this._renderer._doStroke && !this._renderer._doFill) { return this; }
-
- var closeShape = mode === constants.CLOSE;
-
- // if the shape is closed, the first element is also the last element
- if (closeShape && !isContour) {
- vertices.push(vertices[0]);
- }
-
- this._renderer.endShape(mode, vertices, isCurve, isBezier,
- isQuadratic, isContour, shapeKind);
-
- // Reset some settings
- isCurve = false;
- isBezier = false;
- isQuadratic = false;
- isContour = false;
- isFirstContour = true;
-
- // If the shape is closed, the first element was added as last element.
- // We must remove it again to prevent the list of vertices from growing
- // over successive calls to endShape(CLOSE)
- if (closeShape) {
- vertices.pop();
- }
- }
- return this;
- };
-
- /**
- * Specifies vertex coordinates for quadratic Bezier curves. Each call to
- * quadraticVertex() defines the position of one control points and one
- * anchor point of a Bezier curve, adding a new segment to a line or shape.
- * The first time quadraticVertex() is used within a beginShape() call, it
- * must be prefaced with a call to vertex() to set the first anchor point.
- * This function must be used between beginShape() and endShape() and only
- * when there is no MODE parameter specified to beginShape().
- *
- * @method quadraticVertex
- * @param {Number} cx x-coordinate for the control point
- * @param {Number} cy y-coordinate for the control point
- * @param {Number} x3 x-coordinate for the anchor point
- * @param {Number} y3 y-coordinate for the anchor point
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * noFill();
- * strokeWeight(4);
- * beginShape();
- * vertex(20, 20);
- * quadraticVertex(80, 20, 50, 50);
- * endShape();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * noFill();
- * strokeWeight(4);
- * beginShape();
- * vertex(20, 20);
- * quadraticVertex(80, 20, 50, 50);
- * quadraticVertex(20, 80, 80, 80);
- * vertex(80, 60);
- * endShape();
- * </code>
- * </div>
- *
- * @alt
- * arched-shaped black line with 4 pixel thick stroke weight.
- * backwards s-shaped black line with 4 pixel thick stroke weight.
- *
- */
- p5.prototype.quadraticVertex = function(cx, cy, x3, y3) {
- //if we're drawing a contour, put the points into an
- // array for inside drawing
- if(this._contourInited) {
- var pt = {};
- pt.x = cx;
- pt.y = cy;
- pt.x3 = x3;
- pt.y3 = y3;
- pt.type = constants.QUADRATIC;
- this._contourVertices.push(pt);
-
- return this;
- }
- if (vertices.length > 0) {
- isQuadratic = true;
- var vert = [];
- for (var i = 0; i < arguments.length; i++) {
- vert[i] = arguments[i];
- }
- vert.isVert = false;
- if (isContour) {
- contourVertices.push(vert);
- } else {
- vertices.push(vert);
- }
- } else {
- throw 'vertex() must be used once before calling quadraticVertex()';
- }
- return this;
- };
-
- /**
- * All shapes are constructed by connecting a series of vertices. vertex()
- * is used to specify the vertex coordinates for points, lines, triangles,
- * quads, and polygons. It is used exclusively within the beginShape() and
- * endShape() functions.
- *
- * @method vertex
- * @param {Number} x x-coordinate of the vertex
- * @param {Number} y y-coordinate of the vertex
- * @return {Object} the p5 object
- * @example
- * <div>
- * <code>
- * beginShape(POINTS);
- * vertex(30, 20);
- * vertex(85, 20);
- * vertex(85, 75);
- * vertex(30, 75);
- * endShape();
- * </code>
- * </div>
- *
- * @alt
- * 4 black points in a square shape in middle-right of canvas.
- *
- */
- p5.prototype.vertex = function(x, y, moveTo) {
- if(this._renderer.isP3D){
- this._renderer.vertex(x, y, moveTo);
- }else{
- var vert = [];
- vert.isVert = true;
- vert[0] = x;
- vert[1] = y;
- vert[2] = 0;
- vert[3] = 0;
- vert[4] = 0;
- vert[5] = this._renderer._getFill();
- vert[6] = this._renderer._getStroke();
-
- if (moveTo) {
- vert.moveTo = moveTo;
- }
- if (isContour) {
- if (contourVertices.length === 0) {
- vert.moveTo = true;
- }
- contourVertices.push(vert);
- } else {
- vertices.push(vert);
- }
- }
- return this;
- };
-
- module.exports = p5;
-
- },{"./constants":36,"./core":37}],50:[function(_dereq_,module,exports){
- /**
- * @module Events
- * @submodule Acceleration
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * The system variable deviceOrientation always contains the orientation of
- * the device. The value of this variable will either be set 'landscape'
- * or 'portrait'. If no data is available it will be set to 'undefined'.
- *
- * @property deviceOrientation
- */
- p5.prototype.deviceOrientation = undefined;
-
- /**
- * The system variable accelerationX always contains the acceleration of the
- * device along the x axis. Value is represented as meters per second squared.
- *
- * @property accelerationX
- */
- p5.prototype.accelerationX = 0;
-
- /**
- * The system variable accelerationY always contains the acceleration of the
- * device along the y axis. Value is represented as meters per second squared.
- *
- * @property accelerationY
- */
- p5.prototype.accelerationY = 0;
-
- /**
- * The system variable accelerationZ always contains the acceleration of the
- * device along the z axis. Value is represented as meters per second squared.
- *
- * @property accelerationZ
- */
- p5.prototype.accelerationZ = 0;
-
- /**
- * The system variable pAccelerationX always contains the acceleration of the
- * device along the x axis in the frame previous to the current frame. Value
- * is represented as meters per second squared.
- *
- * @property pAccelerationX
- */
- p5.prototype.pAccelerationX = 0;
-
- /**
- * The system variable pAccelerationY always contains the acceleration of the
- * device along the y axis in the frame previous to the current frame. Value
- * is represented as meters per second squared.
- *
- * @property pAccelerationY
- */
- p5.prototype.pAccelerationY = 0;
-
- /**
- * The system variable pAccelerationZ always contains the acceleration of the
- * device along the z axis in the frame previous to the current frame. Value
- * is represented as meters per second squared.
- *
- * @property pAccelerationZ
- */
- p5.prototype.pAccelerationZ = 0;
-
- /**
- * _updatePAccelerations updates the pAcceleration values
- *
- * @private
- */
- p5.prototype._updatePAccelerations = function(){
- this._setProperty('pAccelerationX', this.accelerationX);
- this._setProperty('pAccelerationY', this.accelerationY);
- this._setProperty('pAccelerationZ', this.accelerationZ);
- };
-
- /**
- * The system variable rotationX always contains the rotation of the
- * device along the x axis. Value is represented as 0 to +/-180 degrees.
- * <br><br>
- * Note: The order the rotations are called is important, ie. if used
- * together, it must be called in the order Z-X-Y or there might be
- * unexpected behaviour.
- *
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * //rotateZ(radians(rotationZ));
- * rotateX(radians(rotationX));
- * //rotateY(radians(rotationY));
- * box(200, 200, 200);
- * }
- * </code>
- * </div>
- *
- * @property rotationX
- *
- * @alt
- * red horizontal line right, green vertical line bottom. black background.
- *
- */
- p5.prototype.rotationX = 0;
-
- /**
- * The system variable rotationY always contains the rotation of the
- * device along the y axis. Value is represented as 0 to +/-90 degrees.
- * <br><br>
- * Note: The order the rotations are called is important, ie. if used
- * together, it must be called in the order Z-X-Y or there might be
- * unexpected behaviour.
- *
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * //rotateZ(radians(rotationZ));
- * //rotateX(radians(rotationX));
- * rotateY(radians(rotationY));
- * box(200, 200, 200);
- * }
- * </code>
- * </div>
- *
- * @property rotationY
- *
- * @alt
- * red horizontal line right, green vertical line bottom. black background.
- */
- p5.prototype.rotationY = 0;
-
- /**
- * The system variable rotationZ always contains the rotation of the
- * device along the z axis. Value is represented as 0 to 359 degrees.
- * <br><br>
- * Unlike rotationX and rotationY, this variable is available for devices
- * with a built-in compass only.
- * <br><br>
- * Note: The order the rotations are called is important, ie. if used
- * together, it must be called in the order Z-X-Y or there might be
- * unexpected behaviour.
- *
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * rotateZ(radians(rotationZ));
- * //rotateX(radians(rotationX));
- * //rotateY(radians(rotationY));
- * box(200, 200, 200);
- * }
- * </code>
- * </div>
- *
- * @property rotationZ
- *
- * @alt
- * red horizontal line right, green vertical line bottom. black background.
- */
- p5.prototype.rotationZ = 0;
-
- /**
- * The system variable pRotationX always contains the rotation of the
- * device along the x axis in the frame previous to the current frame. Value
- * is represented as 0 to +/-180 degrees.
- * <br><br>
- * pRotationX can also be used with rotationX to determine the rotate
- * direction of the device along the X-axis.
- * @example
- * <div class='norender'>
- * <code>
- * // A simple if statement looking at whether
- * // rotationX - pRotationX < 0 is true or not will be
- * // sufficient for determining the rotate direction
- * // in most cases.
- *
- * // Some extra logic is needed to account for cases where
- * // the angles wrap around.
- * var rotateDirection = 'clockwise';
- *
- * // Simple range conversion to make things simpler.
- * // This is not absolutely neccessary but the logic
- * // will be different in that case.
- *
- * var rX = rotationX + 180;
- * var pRX = pRotationX + 180;
- *
- * if ((rX - pRX > 0 && rX - pRX < 270)|| rX - pRX < -270){
- * rotateDirection = 'clockwise';
- * } else if (rX - pRX < 0 || rX - pRX > 270){
- * rotateDirection = 'counter-clockwise';
- * }
- * </code>
- * </div>
- *
- * @alt
- * no image to display.
- *
- *
- * @property pRotationX
- */
- p5.prototype.pRotationX = 0;
-
- /**
- * The system variable pRotationY always contains the rotation of the
- * device along the y axis in the frame previous to the current frame. Value
- * is represented as 0 to +/-90 degrees.
- * <br><br>
- * pRotationY can also be used with rotationY to determine the rotate
- * direction of the device along the Y-axis.
- * @example
- * <div class='norender'>
- * <code>
- * // A simple if statement looking at whether
- * // rotationY - pRotationY < 0 is true or not will be
- * // sufficient for determining the rotate direction
- * // in most cases.
- *
- * // Some extra logic is needed to account for cases where
- * // the angles wrap around.
- * var rotateDirection = 'clockwise';
- *
- * // Simple range conversion to make things simpler.
- * // This is not absolutely neccessary but the logic
- * // will be different in that case.
- *
- * var rY = rotationY + 180;
- * var pRY = pRotationY + 180;
- *
- * if ((rY - pRY > 0 && rY - pRY < 270)|| rY - pRY < -270){
- * rotateDirection = 'clockwise';
- * } else if (rY - pRY < 0 || rY - pRY > 270){
- * rotateDirection = 'counter-clockwise';
- * }
- * </code>
- * </div>
- *
- * @alt
- * no image to display.
- *
- *
- * @property pRotationY
- */
- p5.prototype.pRotationY = 0;
-
- /**
- * The system variable pRotationZ always contains the rotation of the
- * device along the z axis in the frame previous to the current frame. Value
- * is represented as 0 to 359 degrees.
- * <br><br>
- * pRotationZ can also be used with rotationZ to determine the rotate
- * direction of the device along the Z-axis.
- * @example
- * <div class='norender'>
- * <code>
- * // A simple if statement looking at whether
- * // rotationZ - pRotationZ < 0 is true or not will be
- * // sufficient for determining the rotate direction
- * // in most cases.
- *
- * // Some extra logic is needed to account for cases where
- * // the angles wrap around.
- * var rotateDirection = 'clockwise';
- *
- * if ((rotationZ - pRotationZ > 0 &&
- * rotationZ - pRotationZ < 270)||
- * rotationZ - pRotationZ < -270){
- *
- * rotateDirection = 'clockwise';
- *
- * } else if (rotationZ - pRotationZ < 0 ||
- * rotationZ - pRotationZ > 270){
- *
- * rotateDirection = 'counter-clockwise';
- *
- * }
- * </code>
- * </div>
- *
- * @alt
- * no image to display.
- *
- *
- * @property pRotationZ
- */
- p5.prototype.pRotationZ = 0;
-
- var startAngleX = 0;
- var startAngleY = 0;
- var startAngleZ = 0;
-
- var rotateDirectionX = 'clockwise';
- var rotateDirectionY = 'clockwise';
- var rotateDirectionZ = 'clockwise';
-
- var pRotateDirectionX;
- var pRotateDirectionY;
- var pRotateDirectionZ;
-
- p5.prototype._updatePRotations = function(){
- this._setProperty('pRotationX', this.rotationX);
- this._setProperty('pRotationY', this.rotationY);
- this._setProperty('pRotationZ', this.rotationZ);
- };
-
- p5.prototype.turnAxis = undefined;
-
- var move_threshold = 0.5;
- var shake_threshold = 30;
-
- /**
- * The setMoveThreshold() function is used to set the movement threshold for
- * the deviceMoved() function. The default threshold is set to 0.5.
- *
- * @method setMoveThreshold
- * @param {number} value The threshold value
- */
- p5.prototype.setMoveThreshold = function(val){
- if(typeof val === 'number'){
- move_threshold = val;
- }
- };
-
- /**
- * The setShakeThreshold() function is used to set the movement threshold for
- * the deviceShaken() function. The default threshold is set to 30.
- *
- * @method setShakeThreshold
- * @param {number} value The threshold value
- */
- p5.prototype.setShakeThreshold = function(val){
- if(typeof val === 'number'){
- shake_threshold = val;
- }
- };
-
- /**
- * The deviceMoved() function is called when the device is moved by more than
- * the threshold value along X, Y or Z axis. The default threshold is set to
- * 0.5.
- * @method deviceMoved
- * @example
- * <div class="norender">
- * <code>
- * // Run this example on a mobile device
- * // Move the device around
- * // to change the value.
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function deviceMoved() {
- * value = value + 5;
- * if (value > 255) {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * @alt
- * 50x50 black rect in center of canvas. turns white on mobile when device moves
- *
- */
-
- /**
- * The deviceTurned() function is called when the device rotates by
- * more than 90 degrees continuously.
- * <br><br>
- * The axis that triggers the deviceTurned() method is stored in the turnAxis
- * variable. The deviceTurned() method can be locked to trigger on any axis:
- * X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
- *
- * @method deviceTurned
- * @example
- * <div class="norender">
- * <code>
- * // Run this example on a mobile device
- * // Rotate the device by 90 degrees
- * // to change the value.
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function deviceTurned() {
- * if (value == 0){
- * value = 255
- * } else if (value == 255) {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- * <div>
- * <code>
- * // Run this example on a mobile device
- * // Rotate the device by 90 degrees in the
- * // X-axis to change the value.
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function deviceTurned() {
- * if (turnAxis == 'X'){
- * if (value == 0){
- * value = 255
- * } else if (value == 255) {
- * value = 0;
- * }
- * }
- * }
- * </code>
- * </div>
- *
- * @alt
- * 50x50 black rect in center of canvas. turns white on mobile when device turns
- * 50x50 black rect in center of canvas. turns white on mobile when x-axis turns
- *
- */
-
- /**
- * The deviceShaken() function is called when the device total acceleration
- * changes of accelerationX and accelerationY values is more than
- * the threshold value. The default threshold is set to 30.
- * @method deviceShaken
- * @example
- * <div class="norender">
- * <code>
- * // Run this example on a mobile device
- * // Shake the device to change the value.
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function deviceShaken() {
- * value = value + 5;
- * if (value > 255) {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * @alt
- * 50x50 black rect in center of canvas. turns white on mobile when device shakes
- *
- */
-
- p5.prototype._ondeviceorientation = function (e) {
- this._updatePRotations();
- this._setProperty('rotationX', e.beta);
- this._setProperty('rotationY', e.gamma);
- this._setProperty('rotationZ', e.alpha);
- this._handleMotion();
- };
- p5.prototype._ondevicemotion = function (e) {
- this._updatePAccelerations();
- this._setProperty('accelerationX', e.acceleration.x * 2);
- this._setProperty('accelerationY', e.acceleration.y * 2);
- this._setProperty('accelerationZ', e.acceleration.z * 2);
- this._handleMotion();
- };
- p5.prototype._handleMotion = function() {
- if (window.orientation === 90 || window.orientation === -90) {
- this._setProperty('deviceOrientation', 'landscape');
- } else if (window.orientation === 0) {
- this._setProperty('deviceOrientation', 'portrait');
- } else if (window.orientation === undefined) {
- this._setProperty('deviceOrientation', 'undefined');
- }
- var deviceMoved = this.deviceMoved || window.deviceMoved;
- if (typeof deviceMoved === 'function') {
- if (Math.abs(this.accelerationX - this.pAccelerationX) > move_threshold ||
- Math.abs(this.accelerationY - this.pAccelerationY) > move_threshold ||
- Math.abs(this.accelerationZ - this.pAccelerationZ) > move_threshold) {
- deviceMoved();
- }
- }
- var deviceTurned = this.deviceTurned || window.deviceTurned;
- if (typeof deviceTurned === 'function') {
- // The angles given by rotationX etc is from range -180 to 180.
- // The following will convert them to 0 to 360 for ease of calculation
- // of cases when the angles wrapped around.
- // _startAngleX will be converted back at the end and updated.
- var wRX = this.rotationX + 180;
- var wPRX = this.pRotationX + 180;
- var wSAX = startAngleX + 180;
- if ((wRX - wPRX > 0 && wRX - wPRX < 270)|| wRX - wPRX < -270){
- rotateDirectionX = 'clockwise';
- } else if (wRX - wPRX < 0 || wRX - wPRX > 270){
- rotateDirectionX = 'counter-clockwise';
- }
- if (rotateDirectionX !== pRotateDirectionX){
- wSAX = wRX;
- }
- if (Math.abs(wRX - wSAX) > 90 && Math.abs(wRX - wSAX) < 270){
- wSAX = wRX;
- this._setProperty('turnAxis', 'X');
- deviceTurned();
- }
- pRotateDirectionX = rotateDirectionX;
- startAngleX = wSAX - 180;
-
- // Y-axis is identical to X-axis except for changing some names.
- var wRY = this.rotationY + 180;
- var wPRY = this.pRotationY + 180;
- var wSAY = startAngleY + 180;
- if ((wRY - wPRY > 0 && wRY - wPRY < 270)|| wRY - wPRY < -270){
- rotateDirectionY = 'clockwise';
- } else if (wRY - wPRY < 0 || wRY - this.pRotationY > 270){
- rotateDirectionY = 'counter-clockwise';
- }
- if (rotateDirectionY !== pRotateDirectionY){
- wSAY = wRY;
- }
- if (Math.abs(wRY - wSAY) > 90 && Math.abs(wRY - wSAY) < 270){
- wSAY = wRY;
- this._setProperty('turnAxis', 'Y');
- deviceTurned();
- }
- pRotateDirectionY = rotateDirectionY;
- startAngleY = wSAY - 180;
-
- // Z-axis is already in the range 0 to 360
- // so no conversion is needed.
- if ((this.rotationZ - this.pRotationZ > 0 &&
- this.rotationZ - this.pRotationZ < 270)||
- this.rotationZ - this.pRotationZ < -270){
- rotateDirectionZ = 'clockwise';
- } else if (this.rotationZ - this.pRotationZ < 0 ||
- this.rotationZ - this.pRotationZ > 270){
- rotateDirectionZ = 'counter-clockwise';
- }
- if (rotateDirectionZ !== pRotateDirectionZ){
- startAngleZ = this.rotationZ;
- }
- if (Math.abs(this.rotationZ - startAngleZ) > 90 &&
- Math.abs(this.rotationZ - startAngleZ) < 270){
- startAngleZ = this.rotationZ;
- this._setProperty('turnAxis', 'Z');
- deviceTurned();
- }
- pRotateDirectionZ = rotateDirectionZ;
- this._setProperty('turnAxis', undefined);
- }
- var deviceShaken = this.deviceShaken || window.deviceShaken;
- if (typeof deviceShaken === 'function') {
- var accelerationChangeX;
- var accelerationChangeY;
- // Add accelerationChangeZ if acceleration change on Z is needed
- if (this.pAccelerationX !== null) {
- accelerationChangeX = Math.abs(this.accelerationX - this.pAccelerationX);
- accelerationChangeY = Math.abs(this.accelerationY - this.pAccelerationY);
- }
- if (accelerationChangeX + accelerationChangeY > shake_threshold) {
- deviceShaken();
- }
- }
- };
-
-
- module.exports = p5;
-
- },{"../core/core":37}],51:[function(_dereq_,module,exports){
- /**
- * @module Events
- * @submodule Keyboard
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * Holds the key codes of currently pressed keys.
- * @private
- */
- var downKeys = {};
-
- /**
- * The boolean system variable keyIsPressed is true if any key is pressed
- * and false if no keys are pressed.
- *
- * @property keyIsPressed
- * @example
- * <div>
- * <code>
- * var value = 0;
- * function draw() {
- * if (keyIsPressed === true) {
- * fill(0);
- * } else {
- * fill(255);
- * }
- * rect(25, 25, 50, 50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * 50x50 white rect that turns black on keypress.
- *
- */
- p5.prototype.isKeyPressed = false;
- p5.prototype.keyIsPressed = false; // khan
-
- /**
- * The system variable key always contains the value of the most recent
- * key on the keyboard that was typed. To get the proper capitalization, it
- * is best to use it within keyTyped(). For non-ASCII keys, use the keyCode
- * variable.
- *
- * @property key
- * @example
- * <div><code>
- * // Click any key to display it!
- * // (Not Guaranteed to be Case Sensitive)
- * function setup() {
- * fill(245, 123, 158);
- * textSize(50);
- * }
- *
- * function draw() {
- * background(200);
- * text(key, 33,65); // Display last key pressed.
- * }
- * </div></code>
- *
- * @alt
- * canvas displays any key value that is pressed in pink font.
- *
- */
- p5.prototype.key = '';
-
- /**
- * The variable keyCode is used to detect special keys such as BACKSPACE,
- * DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,
- * DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
- * You can also check for custom keys by looking up the keyCode of any key
- * on a site like this: <a href="http://keycode.info/">keycode.info</a>.
- *
- * @property keyCode
- * @example
- * <div><code>
- * var fillVal = 126;
- * function draw() {
- * fill(fillVal);
- * rect(25, 25, 50, 50);
- * }
- *
- * function keyPressed() {
- * if (keyCode == UP_ARROW) {
- * fillVal = 255;
- * } else if (keyCode == DOWN_ARROW) {
- * fillVal = 0;
- * }
- * return false; // prevent default
- * }
- * </code></div>
- *
- * @alt
- * Grey rect center. turns white when up arrow pressed and black when down
- *
- */
- p5.prototype.keyCode = 0;
-
- /**
- * The keyPressed() function is called once every time a key is pressed. The
- * keyCode for the key that was pressed is stored in the keyCode variable.
- * <br><br>
- * For non-ASCII keys, use the keyCode variable. You can check if the keyCode
- * equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL,
- * OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
- * <br><br>
- * For ASCII keys that was pressed is stored in the key variable. However, it
- * does not distinguish between uppercase and lowercase. For this reason, it
- * is recommended to use keyTyped() to read the key variable, in which the
- * case of the variable will be distinguished.
- * <br><br>
- * Because of how operating systems handle key repeats, holding down a key
- * may cause multiple calls to keyTyped() (and keyReleased() as well). The
- * rate of repeat is set by the operating system and how each computer is
- * configured.<br><br>
- * Browsers may have different default
- * behaviors attached to various key events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- * @method keyPressed
- * @example
- * <div>
- * <code>
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function keyPressed() {
- * if (value === 0) {
- * value = 255;
- * } else {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- * <div>
- * <code>
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function keyPressed() {
- * if (keyCode === LEFT_ARROW) {
- * value = 255;
- * } else if (keyCode === RIGHT_ARROW) {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- * <div class="norender">
- * <code>
- * function keyPressed(){
- * // Do something
- * return false; // prevent any default behaviour
- * }
- * </code>
- *
- * @alt
- * black rect center. turns white when key pressed and black when released
- * black rect center. turns white when left arrow pressed and black when right.
- *
- * </div>
- */
- p5.prototype._onkeydown = function (e) {
- if (downKeys[e.which]) { // prevent multiple firings
- return;
- }
- this._setProperty('isKeyPressed', true);
- this._setProperty('keyIsPressed', true);
- this._setProperty('keyCode', e.which);
- downKeys[e.which] = true;
- var key = String.fromCharCode(e.which);
- if (!key) {
- key = e.which;
- }
- this._setProperty('key', key);
- var keyPressed = this.keyPressed || window.keyPressed;
- if (typeof keyPressed === 'function' && !e.charCode) {
- var executeDefault = keyPressed(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- };
- /**
- * The keyReleased() function is called once every time a key is released.
- * See key and keyCode for more information.<br><br>
- * Browsers may have different default
- * behaviors attached to various key events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- * @method keyReleased
- * @example
- * <div>
- * <code>
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function keyReleased() {
- * if (value === 0) {
- * value = 255;
- * } else {
- * value = 0;
- * }
- * return false; // prevent any default behavior
- * }
- * </code>
- * </div>
- *
- * @alt
- * black rect center. turns white when key pressed and black when pressed again
- *
- */
- p5.prototype._onkeyup = function (e) {
- var keyReleased = this.keyReleased || window.keyReleased;
- downKeys[e.which] = false;
- //delete this._downKeys[e.which];
- var key = String.fromCharCode(e.which);
-
- if(areDownKeys()) {
- this._setProperty('isKeyPressed', false);
- this._setProperty('keyIsPressed', false);
- }
-
- this._setProperty('_lastKeyCodeTyped', null);
- if (!key) {
- key = e.which;
- }
- this._setProperty('key', key);
- this._setProperty('keyCode', e.which);
- if (typeof keyReleased === 'function') {
- var executeDefault = keyReleased(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- };
-
- /**
- * The keyTyped() function is called once every time a key is pressed, but
- * action keys such as Ctrl, Shift, and Alt are ignored. The most recent
- * key pressed will be stored in the key variable.
- * <br><br>
- * Because of how operating systems handle key repeats, holding down a key
- * will cause multiple calls to keyTyped() (and keyReleased() as well). The
- * rate of repeat is set by the operating system and how each computer is
- * configured.<br><br>
- * Browsers may have different default behaviors attached to various key
- * events. To prevent any default behavior for this event, add "return false"
- * to the end of the method.
- *
- * @method keyTyped
- * @example
- * <div>
- * <code>
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function keyTyped() {
- * if (key === 'a') {
- * value = 255;
- * } else if (key === 'b') {
- * value = 0;
- * }
- * // uncomment to prevent any default behavior
- * // return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * black rect center. turns white when 'a' key typed and black when 'b' pressed
- *
- */
- p5.prototype._onkeypress = function (e) {
- if (e.which === this._lastKeyCodeTyped) { // prevent multiple firings
- return;
- }
- this._setProperty('keyCode', e.which);
- this._setProperty('_lastKeyCodeTyped', e.which); // track last keyCode
- this._setProperty('key', String.fromCharCode(e.which));
- var keyTyped = this.keyTyped || window.keyTyped;
- if (typeof keyTyped === 'function') {
- var executeDefault = keyTyped(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- };
- /**
- * The onblur function is called when the user is no longer focused
- * on the p5 element. Because the keyup events will not fire if the user is
- * not focused on the element we must assume all keys currently down have
- * been released.
- */
- p5.prototype._onblur = function (e) {
- downKeys = {};
- };
-
- /**
- * The keyIsDown() function checks if the key is currently down, i.e. pressed.
- * It can be used if you have an object that moves, and you want several keys
- * to be able to affect its behaviour simultaneously, such as moving a
- * sprite diagonally. You can put in any number representing the keyCode of
- * the key, or use any of the variable keyCode names listed
- * <a href="http://p5js.org/reference/#p5/keyCode">here</a>.
- *
- * @method keyIsDown
- * @param {Number} code The key to check for.
- * @return {Boolean} whether key is down or not
- * @example
- * <div><code>
- * var x = 100;
- * var y = 100;
- *
- * function setup() {
- * createCanvas(512, 512);
- * }
- *
- * function draw() {
- * if (keyIsDown(LEFT_ARROW))
- * x-=5;
- *
- * if (keyIsDown(RIGHT_ARROW))
- * x+=5;
- *
- * if (keyIsDown(UP_ARROW))
- * y-=5;
- *
- * if (keyIsDown(DOWN_ARROW))
- * y+=5;
- *
- * clear();
- * fill(255, 0, 0);
- * ellipse(x, y, 50, 50);
- * }
- * </code></div>
- *
- * @alt
- * 50x50 red ellipse moves left, right, up and down with arrow presses.
- *
- */
- p5.prototype.keyIsDown = function(code) {
- return downKeys[code];
- };
-
- /**
- * The checkDownKeys function returns a boolean true if any keys pressed
- * and a false if no keys are currently pressed.
-
- * Helps avoid instances where a multiple keys are pressed simultaneously and
- * releasing a single key will then switch the
- * keyIsPressed property to true.
- * @private
- **/
- function areDownKeys() {
- for (var key in downKeys) {
- if (downKeys[key] === true ) {
- return true;
- }
- }
- return false;
- }
-
- module.exports = p5;
-
- },{"../core/core":37}],52:[function(_dereq_,module,exports){
- /**
- * @module Events
- * @submodule Mouse
- * @for p5
- * @requires core
- * @requires constants
- */
-
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var constants = _dereq_('../core/constants');
-
- /*
- * This is a flag which is false until the first time
- * we receive a mouse event. The pmouseX and pmouseY
- * values will match the mouseX and mouseY values until
- * this interaction takes place.
- */
- p5.prototype._hasMouseInteracted = false;
-
- /**
- * The system variable mouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the canvas. If touch is
- * used instead of mouse input, mouseX will hold the x value of the most
- * recent touch point.
- *
- * @property mouseX
- *
- * @example
- * <div>
- * <code>
- * // Move the mouse across the canvas
- * function draw() {
- * background(244, 248, 252);
- * line(mouseX, 0, mouseX, 100);
- * }
- * </code>
- * </div>
- *
- * @alt
- * horizontal black line moves left and right with mouse x-position
- *
- */
- p5.prototype.mouseX = 0;
-
- /**
- * The system variable mouseY always contains the current vertical position
- * of the mouse, relative to (0, 0) of the canvas. If touch is
- * used instead of mouse input, mouseY will hold the y value of the most
- * recent touch point.
- *
- * @property mouseY
- *
- * @example
- * <div>
- * <code>
- * // Move the mouse across the canvas
- * function draw() {
- * background(244, 248, 252);
- * line(0, mouseY, 100, mouseY);
- *}
- * </code>
- * </div>
- *
- * @alt
- * vertical black line moves up and down with mouse y-position
- *
- */
- p5.prototype.mouseY = 0;
-
- /**
- * The system variable pmouseX always contains the horizontal position of
- * the mouse or finger in the frame previous to the current frame, relative to
- * (0, 0) of the canvas.
- *
- * @property pmouseX
- *
- * @example
- * <div>
- * <code>
- * // Move the mouse across the canvas to leave a trail
- * function setup() {
- * //slow down the frameRate to make it more visible
- * frameRate(10);
- * }
- *
- * function draw() {
- * background(244, 248, 252);
- * line(mouseX, mouseY, pmouseX, pmouseY);
- * print(pmouseX + " -> " + mouseX);
- * }
- *
- * </code>
- * </div>
- *
- * @alt
- * line trail is created from cursor movements. faster movement make longer line.
- *
- */
- p5.prototype.pmouseX = 0;
-
- /**
- * The system variable pmouseY always contains the vertical position of the
- * mouse or finger in the frame previous to the current frame, relative to
- * (0, 0) of the canvas.
- *
- * @property pmouseY
- *
- * @example
- * <div>
- * <code>
- * function draw() {
- * background(237, 34, 93);
- * fill(0);
- * //draw a square only if the mouse is not moving
- * if(mouseY == pmouseY && mouseX == pmouseX)
- * rect(20,20,60,60);
- *
- * print(pmouseY + " -> " + mouseY);
- * }
- *
- * </code>
- * </div>
- *
- * @alt
- * 60x60 black rect center, fuschia background. rect flickers on mouse movement
- *
- */
- p5.prototype.pmouseY = 0;
-
- /**
- * The system variable winMouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the window.
- *
- * @property winMouseX
- *
- * @example
- * <div>
- * <code>
- * var myCanvas;
- *
- * function setup() {
- * //use a variable to store a pointer to the canvas
- * myCanvas = createCanvas(100, 100);
- * }
- *
- * function draw() {
- * background(237, 34, 93);
- * fill(0);
- *
- * //move the canvas to the horizontal mouse position
- * //relative to the window
- * myCanvas.position(winMouseX+1, windowHeight/2);
- *
- * //the y of the square is relative to the canvas
- * rect(20,mouseY,60,60);
- * }
- *
- * </code>
- * </div>
- *
- * @alt
- * 60x60 black rect y moves with mouse y and fuschia canvas moves with mouse x
- *
- */
- p5.prototype.winMouseX = 0;
-
- /**
- * The system variable winMouseY always contains the current vertical
- * position of the mouse, relative to (0, 0) of the window.
- *
- * @property winMouseY
- *
- * @example
- * <div>
- * <code>
- *var myCanvas;
- *
- * function setup() {
- * //use a variable to store a pointer to the canvas
- * myCanvas = createCanvas(100, 100);
- * }
- *
- * function draw() {
- * background(237, 34, 93);
- * fill(0);
- *
- * //move the canvas to the vertical mouse position
- * //relative to the window
- * myCanvas.position(windowWidth/2, winMouseY+1);
- *
- * //the x of the square is relative to the canvas
- * rect(mouseX,20,60,60);
- * }
- *
- * </code>
- * </div>
- *
- * @alt
- * 60x60 black rect x moves with mouse x and fuschia canvas y moves with mouse y
- *
- */
- p5.prototype.winMouseY = 0;
-
- /**
- * The system variable pwinMouseX always contains the horizontal position
- * of the mouse in the frame previous to the current frame, relative to
- * (0, 0) of the window.
- *
- * @property pwinMouseX
- *
- * @example
- * <div>
- * <code>
- *
- * var myCanvas;
- *
- * function setup() {
- * //use a variable to store a pointer to the canvas
- * myCanvas = createCanvas(100, 100);
- * noStroke();
- * fill(237, 34, 93);
- * }
- *
- * function draw() {
- * clear();
- * //the difference between previous and
- * //current x position is the horizontal mouse speed
- * var speed = abs(winMouseX-pwinMouseX);
- * //change the size of the circle
- * //according to the horizontal speed
- * ellipse(50, 50, 10+speed*5, 10+speed*5);
- * //move the canvas to the mouse position
- * myCanvas.position( winMouseX+1, winMouseY+1);
- * }
- *
- * </code>
- * </div>
- *
- * @alt
- * fuschia ellipse moves with mouse x and y. Grows and shrinks with mouse speed
- *
- */
- p5.prototype.pwinMouseX = 0;
-
- /**
- * The system variable pwinMouseY always contains the vertical position of
- * the mouse in the frame previous to the current frame, relative to (0, 0)
- * of the window.
- *
- * @property pwinMouseY
- *
- *
- * @example
- * <div>
- * <code>
- *
- * var myCanvas;
- *
- * function setup() {
- * //use a variable to store a pointer to the canvas
- * myCanvas = createCanvas(100, 100);
- * noStroke();
- * fill(237, 34, 93);
- * }
- *
- * function draw() {
- * clear();
- * //the difference between previous and
- * //current y position is the vertical mouse speed
- * var speed = abs(winMouseY-pwinMouseY);
- * //change the size of the circle
- * //according to the vertical speed
- * ellipse(50, 50, 10+speed*5, 10+speed*5);
- * //move the canvas to the mouse position
- * myCanvas.position( winMouseX+1, winMouseY+1);
- * }
- *
- * </code>
- * </div>
- *
- * @alt
- * fuschia ellipse moves with mouse x and y. Grows and shrinks with mouse speed
- *
- */
- p5.prototype.pwinMouseY = 0;
-
- /**
- * Processing automatically tracks if the mouse button is pressed and which
- * button is pressed. The value of the system variable mouseButton is either
- * LEFT, RIGHT, or CENTER depending on which button was pressed last.
- * Warning: different browsers may track mouseButton differently.
- *
- * @property mouseButton
- *
- * @example
- * <div>
- * <code>
- * function draw() {
- * background(237, 34, 93);
- * fill(0);
- *
- * if (mouseIsPressed) {
- * if (mouseButton == LEFT)
- * ellipse(50, 50, 50, 50);
- * if (mouseButton == RIGHT)
- * rect(25, 25, 50, 50);
- * if (mouseButton == CENTER)
- * triangle(23, 75, 50, 20, 78, 75);
- * }
- *
- * print(mouseButton);
- * }
- * </code>
- * </div>
- *
- * @alt
- * 50x50 black ellipse appears on center of fuschia canvas on mouse click/press.
- *
- */
- p5.prototype.mouseButton = 0;
-
- /**
- * The boolean system variable mouseIsPressed is true if the mouse is pressed
- * and false if not.
- *
- * @property mouseIsPressed
- *
- * @example
- * <div>
- * <code>
- * function draw() {
- * background(237, 34, 93);
- * fill(0);
- *
- * if (mouseIsPressed)
- * ellipse(50, 50, 50, 50);
- * else
- * rect(25, 25, 50, 50);
- *
- * print(mouseIsPressed);
- * }
- * </code>
- * </div>
- *
- * @alt
- * black 50x50 rect becomes ellipse with mouse click/press. fuschia background.
- *
- */
- p5.prototype.mouseIsPressed = false;
- p5.prototype.isMousePressed = false; // both are supported
-
- p5.prototype._updateNextMouseCoords = function(e) {
- if(this._curElement !== null && (!e.touches || e.touches.length>0)) {
- var mousePos = getMousePos(this._curElement.elt, this.width, this.height, e);
- this._setProperty('mouseX', mousePos.x);
- this._setProperty('mouseY', mousePos.y);
- this._setProperty('winMouseX', mousePos.winX);
- this._setProperty('winMouseY', mousePos.winY);
- }
- if (!this._hasMouseInteracted) {
- // For first draw, make previous and next equal
- this._updateMouseCoords();
- this._setProperty('_hasMouseInteracted', true);
- }
- };
-
- p5.prototype._updateMouseCoords = function() {
- this._setProperty('pmouseX', this.mouseX);
- this._setProperty('pmouseY', this.mouseY);
- this._setProperty('pwinMouseX', this.winMouseX);
- this._setProperty('pwinMouseY', this.winMouseY);
- };
-
- function getMousePos(canvas, w, h, evt) {
- if (evt && !evt.clientX) { // use touches if touch and not mouse
- if (evt.touches) {
- evt = evt.touches[0];
- } else if (evt.changedTouches) {
- evt = evt.changedTouches[0];
- }
- }
- var rect = canvas.getBoundingClientRect();
- var sx = canvas.scrollWidth / w;
- var sy = canvas.scrollHeight / h;
- return {
- x: (evt.clientX - rect.left) / sx,
- y: (evt.clientY - rect.top) / sy,
- winX: evt.clientX,
- winY: evt.clientY,
- id: evt.identifier
- };
- }
-
- p5.prototype._setMouseButton = function(e) {
- if (e.button === 1) {
- this._setProperty('mouseButton', constants.CENTER);
- } else if (e.button === 2) {
- this._setProperty('mouseButton', constants.RIGHT);
- } else {
- this._setProperty('mouseButton', constants.LEFT);
- }
- };
-
- /**
- * The mouseMoved() function is called every time the mouse moves and a mouse
- * button is not pressed.<br><br>
- * Browsers may have different default
- * behaviors attached to various mouse events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- * @method mouseMoved
- * @example
- * <div>
- * <code>
- * // Move the mouse across the page
- * // to change its value
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function mouseMoved() {
- * value = value + 5;
- * if (value > 255) {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * function mouseMoved() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * black 50x50 rect becomes lighter with mouse movements until white then resets
- * no image displayed
- *
- */
-
- /**
- * The mouseDragged() function is called once every time the mouse moves and
- * a mouse button is pressed. If no mouseDragged() function is defined, the
- * touchMoved() function will be called instead if it is defined.<br><br>
- * Browsers may have different default
- * behaviors attached to various mouse events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- * @method mouseDragged
- * @example
- * <div>
- * <code>
- * // Drag the mouse across the page
- * // to change its value
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function mouseDragged() {
- * value = value + 5;
- * if (value > 255) {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * function mouseDragged() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * black 50x50 rect turns lighter with mouse click and drag until white, resets
- * no image displayed
- *
- */
- p5.prototype._onmousemove = function(e){
- var context = this._isGlobal ? window : this;
- var executeDefault;
- this._updateNextMouseCoords(e);
- if (!this.isMousePressed) {
- if (typeof context.mouseMoved === 'function') {
- executeDefault = context.mouseMoved(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- }
- else {
- if (typeof context.mouseDragged === 'function') {
- executeDefault = context.mouseDragged(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- } else if (typeof context.touchMoved === 'function') {
- executeDefault = context.touchMoved(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- }
- };
-
- /**
- * The mousePressed() function is called once after every time a mouse button
- * is pressed. The mouseButton variable (see the related reference entry)
- * can be used to determine which button has been pressed. If no
- * mousePressed() function is defined, the touchStarted() function will be
- * called instead if it is defined.<br><br>
- * Browsers may have different default
- * behaviors attached to various mouse events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- * @method mousePressed
- * @example
- * <div>
- * <code>
- * // Click within the image to change
- * // the value of the rectangle
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function mousePressed() {
- * if (value == 0) {
- * value = 255;
- * } else {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * function mousePressed() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * black 50x50 rect turns white with mouse click/press.
- * no image displayed
- *
- */
- p5.prototype._onmousedown = function(e) {
- var context = this._isGlobal ? window : this;
- var executeDefault;
- this._setProperty('isMousePressed', true);
- this._setProperty('mouseIsPressed', true);
- this._setMouseButton(e);
- this._updateNextMouseCoords(e);
- if (typeof context.mousePressed === 'function') {
- executeDefault = context.mousePressed(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- } else if (typeof context.touchStarted === 'function') {
- executeDefault = context.touchStarted(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- };
-
- /**
- * The mouseReleased() function is called every time a mouse button is
- * released. If no mouseReleased() function is defined, the touchEnded()
- * function will be called instead if it is defined.<br><br>
- * Browsers may have different default
- * behaviors attached to various mouse events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- *
- * @method mouseReleased
- * @example
- * <div>
- * <code>
- * // Click within the image to change
- * // the value of the rectangle
- * // after the mouse has been clicked
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function mouseReleased() {
- * if (value == 0) {
- * value = 255;
- * } else {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * function mouseReleased() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * black 50x50 rect turns white with mouse click/press.
- * no image displayed
- *
- */
- p5.prototype._onmouseup = function(e) {
- var context = this._isGlobal ? window : this;
- var executeDefault;
- this._setProperty('isMousePressed', false);
- this._setProperty('mouseIsPressed', false);
- if (typeof context.mouseReleased === 'function') {
- executeDefault = context.mouseReleased(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- } else if (typeof context.touchEnded === 'function') {
- executeDefault = context.touchEnded(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- };
-
- p5.prototype._ondragend = p5.prototype._onmouseup;
- p5.prototype._ondragover = p5.prototype._onmousemove;
-
- /**
- * The mouseClicked() function is called once after a mouse button has been
- * pressed and then released.<br><br>
- * Browsers may have different default
- * behaviors attached to various mouse events. To prevent any default
- * behavior for this event, add "return false" to the end of the method.
- *
- * @method mouseClicked
- * @example
- * <div>
- * <code>
- * // Click within the image to change
- * // the value of the rectangle
- * // after the mouse has been clicked
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function mouseClicked() {
- * if (value == 0) {
- * value = 255;
- * } else {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * function mouseClicked() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * black 50x50 rect turns white with mouse click/press.
- * no image displayed
- *
- */
- p5.prototype._onclick = function(e) {
- var context = this._isGlobal ? window : this;
- if (typeof context.mouseClicked === 'function') {
- var executeDefault = context.mouseClicked(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- };
-
- /**
- * The function mouseWheel() is executed every time a vertical mouse wheel
- * event is detected either triggered by an actual mouse wheel or by a
- * touchpad.<br><br>
- * The event.delta property returns the amount the mouse wheel
- * have scrolled. The values can be positive or negative depending on the
- * scroll direction (on OS X with "natural" scrolling enabled, the signs
- * are inverted).<br><br>
- * Browsers may have different default behaviors attached to various
- * mouse events. To prevent any default behavior for this event, add
- * "return false" to the end of the method.<br><br>
- * Due to the current support of the "wheel" event on Safari, the function
- * may only work as expected if "return false" is included while using Safari.
- *
- * @method mouseWheel
- *
- * @example
- * <div>
- * <code>
- * var pos = 25;
- *
- * function draw() {
- * background(237, 34, 93);
- * fill(0);
- * rect(25, pos, 50, 50);
- * }
- *
- * function mouseWheel(event) {
- * print(event.delta);
- * //move the square according to the vertical scroll amount
- * pos += event.delta;
- * //uncomment to block page scrolling
- * //return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * black 50x50 rect moves up and down with vertical scroll. fuschia background
- *
- */
- p5.prototype._onwheel = function(e) {
- var context = this._isGlobal ? window : this;
- if (typeof context.mouseWheel === 'function') {
- e.delta = e.deltaY;
- var executeDefault = context.mouseWheel(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- };
-
- module.exports = p5;
-
- },{"../core/constants":36,"../core/core":37}],53:[function(_dereq_,module,exports){
- /**
- * @module Events
- * @submodule Touch
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * The system variable touches[] contains an array of the positions of all
- * current touch points, relative to (0, 0) of the canvas, and IDs identifying a
- * unique touch as it moves. Each element in the array is an object with x, y,
- * and id properties.
- *
- * @property touches[]
- */
- p5.prototype.touches = [];
-
- p5.prototype._updateTouchCoords = function(e) {
- if (this._curElement !== null) {
- var touches = [];
- for(var i = 0; i < e.touches.length; i++){
- touches[i] = getTouchInfo(this._curElement.elt,
- this.width, this.height, e, i);
- }
- this._setProperty('touches', touches);
- }
- };
-
-
- function getTouchInfo(canvas, w, h, e, i) {
- i = i || 0;
- var rect = canvas.getBoundingClientRect();
- var sx = canvas.scrollWidth / w;
- var sy = canvas.scrollHeight / h;
- var touch = e.touches[i] || e.changedTouches[i];
- return {
- x: (touch.clientX - rect.left) / sx,
- y: (touch.clientY - rect.top) / sy,
- winX: touch.clientX,
- winY: touch.clientY,
- id: touch.identifier
- };
- }
-
- /**
- * The touchStarted() function is called once after every time a touch is
- * registered. If no touchStarted() function is defined, the mousePressed()
- * function will be called instead if it is defined.<br><br>
- * Browsers may have different default behaviors attached to various touch
- * events. To prevent any default behavior for this event, add "return false"
- * to the end of the method.
- *
- * @method touchStarted
- * @example
- * <div>
- * <code>
- * // Touch within the image to change
- * // the value of the rectangle
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function touchStarted() {
- * if (value == 0) {
- * value = 255;
- * } else {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * function touchStarted() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * 50x50 black rect turns white with touch event.
- * no image displayed
- */
- p5.prototype._ontouchstart = function(e) {
- var context = this._isGlobal ? window : this;
- var executeDefault;
- this._updateTouchCoords(e);
- this._updateNextMouseCoords(e);
- if(typeof context.touchStarted === 'function') {
- executeDefault = context.touchStarted(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- } else if (typeof context.mousePressed === 'function') {
- executeDefault = context.mousePressed(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- //this._setMouseButton(e);
- }
- };
-
- /**
- * The touchMoved() function is called every time a touch move is registered.
- * If no touchMoved() function is defined, the mouseDragged() function will
- * be called instead if it is defined.<br><br>
- * Browsers may have different default behaviors attached to various touch
- * events. To prevent any default behavior for this event, add "return false"
- * to the end of the method.
- *
- * @method touchMoved
- * @example
- * <div>
- * <code>
- * // Move your finger across the page
- * // to change its value
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function touchMoved() {
- * value = value + 5;
- * if (value > 255) {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * function touchMoved() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * 50x50 black rect turns lighter with touch until white. resets
- * no image displayed
- *
- */
- p5.prototype._ontouchmove = function(e) {
- var context = this._isGlobal ? window : this;
- var executeDefault;
- this._updateTouchCoords(e);
- this._updateNextMouseCoords(e);
- if (typeof context.touchMoved === 'function') {
- executeDefault = context.touchMoved(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- } else if (typeof context.mouseDragged === 'function') {
- executeDefault = context.mouseDragged(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- };
-
- /**
- * The touchEnded() function is called every time a touch ends. If no
- * touchEnded() function is defined, the mouseReleased() function will be
- * called instead if it is defined.<br><br>
- * Browsers may have different default behaviors attached to various touch
- * events. To prevent any default behavior for this event, add "return false"
- * to the end of the method.
- *
- * @method touchEnded
- * @example
- * <div>
- * <code>
- * // Release touch within the image to
- * // change the value of the rectangle
- *
- * var value = 0;
- * function draw() {
- * fill(value);
- * rect(25, 25, 50, 50);
- * }
- * function touchEnded() {
- * if (value == 0) {
- * value = 255;
- * } else {
- * value = 0;
- * }
- * }
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * function touchEnded() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
- * }
- * </code>
- * </div>
- *
- * @alt
- * 50x50 black rect turns white with touch.
- * no image displayed
- *
- */
- p5.prototype._ontouchend = function(e) {
- this._updateTouchCoords(e);
- this._updateNextMouseCoords(e);
- if (this.touches.length === 0) {
- this._setProperty('touchIsDown', false);
- }
- var context = this._isGlobal ? window : this;
- var executeDefault;
- if (typeof context.touchEnded === 'function') {
- executeDefault = context.touchEnded(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- } else if (typeof context.mouseReleased === 'function') {
- executeDefault = context.mouseReleased(e);
- if(executeDefault === false) {
- e.preventDefault();
- }
- }
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],54:[function(_dereq_,module,exports){
- /*global ImageData:false */
-
- /**
- * This module defines the filters for use with image buffers.
- *
- * This module is basically a collection of functions stored in an object
- * as opposed to modules. The functions are destructive, modifying
- * the passed in canvas rather than creating a copy.
- *
- * Generally speaking users of this module will use the Filters.apply method
- * on a canvas to create an effect.
- *
- * A number of functions are borrowed/adapted from
- * http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
- * or the java processing implementation.
- */
-
- 'use strict';
-
- var Filters = {};
-
-
- /*
- * Helper functions
- */
-
-
- /**
- * Returns the pixel buffer for a canvas
- *
- * @private
- *
- * @param {Canvas|ImageData} canvas the canvas to get pixels from
- * @return {Uint8ClampedArray} a one-dimensional array containing
- * the data in thc RGBA order, with integer
- * values between 0 and 255
- */
- Filters._toPixels = function (canvas) {
- if (canvas instanceof ImageData) {
- return canvas.data;
- } else {
- return canvas.getContext('2d').getImageData(
- 0,
- 0,
- canvas.width,
- canvas.height
- ).data;
- }
- };
-
- /**
- * Returns a 32 bit number containing ARGB data at ith pixel in the
- * 1D array containing pixels data.
- *
- * @private
- *
- * @param {Uint8ClampedArray} data array returned by _toPixels()
- * @param {Integer} i index of a 1D Image Array
- * @return {Integer} 32 bit integer value representing
- * ARGB value.
- */
- Filters._getARGB = function (data, i) {
- var offset = i * 4;
- return (data[offset+3] << 24) & 0xff000000 |
- (data[offset] << 16) & 0x00ff0000 |
- (data[offset+1] << 8) & 0x0000ff00 |
- data[offset+2] & 0x000000ff;
- };
-
- /**
- * Modifies pixels RGBA values to values contained in the data object.
- *
- * @private
- *
- * @param {Uint8ClampedArray} pixels array returned by _toPixels()
- * @param {Int32Array} data source 1D array where each value
- * represents ARGB values
- */
- Filters._setPixels = function (pixels, data) {
- var offset = 0;
- for( var i = 0, al = pixels.length; i < al; i++) {
- offset = i*4;
- pixels[offset + 0] = (data[i] & 0x00ff0000)>>>16;
- pixels[offset + 1] = (data[i] & 0x0000ff00)>>>8;
- pixels[offset + 2] = (data[i] & 0x000000ff);
- pixels[offset + 3] = (data[i] & 0xff000000)>>>24;
- }
- };
-
- /**
- * Returns the ImageData object for a canvas
- * https://developer.mozilla.org/en-US/docs/Web/API/ImageData
- *
- * @private
- *
- * @param {Canvas|ImageData} canvas canvas to get image data from
- * @return {ImageData} Holder of pixel data (and width and
- * height) for a canvas
- */
- Filters._toImageData = function (canvas) {
- if (canvas instanceof ImageData) {
- return canvas;
- } else {
- return canvas.getContext('2d').getImageData(
- 0,
- 0,
- canvas.width,
- canvas.height
- );
- }
- };
-
- /**
- * Returns a blank ImageData object.
- *
- * @private
- *
- * @param {Integer} width
- * @param {Integer} height
- * @return {ImageData}
- */
- Filters._createImageData = function (width, height) {
- Filters._tmpCanvas = document.createElement('canvas');
- Filters._tmpCtx = Filters._tmpCanvas.getContext('2d');
- return this._tmpCtx.createImageData(width, height);
- };
-
-
- /**
- * Applys a filter function to a canvas.
- *
- * The difference between this and the actual filter functions defined below
- * is that the filter functions generally modify the pixel buffer but do
- * not actually put that data back to the canvas (where it would actually
- * update what is visible). By contrast this method does make the changes
- * actually visible in the canvas.
- *
- * The apply method is the method that callers of this module would generally
- * use. It has been separated from the actual filters to support an advanced
- * use case of creating a filter chain that executes without actually updating
- * the canvas in between everystep.
- *
- * @param {[type]} func [description]
- * @param {[type]} canvas [description]
- * @param {[type]} level [description]
- * @return {[type]} [description]
- */
- Filters.apply = function (canvas, func, filterParam) {
- var ctx = canvas.getContext('2d');
- var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
- //Filters can either return a new ImageData object, or just modify
- //the one they received.
- var newImageData = func(imageData, filterParam);
- if (newImageData instanceof ImageData) {
- ctx.putImageData(newImageData, 0, 0, 0, 0, canvas.width, canvas.height);
- } else {
- ctx.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
- }
- };
-
-
- /*
- * Filters
- */
-
-
- /**
- * Converts the image to black and white pixels depending if they are above or
- * below the threshold defined by the level parameter. The parameter must be
- * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
- *
- * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
- *
- * @param {Canvas} canvas
- * @param {Float} level
- */
- Filters.threshold = function (canvas, level) {
- var pixels = Filters._toPixels(canvas);
-
- if (level === undefined) {
- level = 0.5;
- }
- var thresh = Math.floor(level * 255);
-
- for (var i = 0; i < pixels.length; i += 4) {
- var r = pixels[i];
- var g = pixels[i + 1];
- var b = pixels[i + 2];
- var gray = (0.2126 * r + 0.7152 * g + 0.0722 * b);
- var val;
- if (gray >= thresh) {
- val = 255;
- } else {
- val = 0;
- }
- pixels[i] = pixels[i + 1] = pixels[i + 2] = val;
- }
-
- };
-
-
- /**
- * Converts any colors in the image to grayscale equivalents.
- * No parameter is used.
- *
- * Borrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
- *
- * @param {Canvas} canvas
- */
- Filters.gray = function (canvas) {
- var pixels = Filters._toPixels(canvas);
-
- for (var i = 0; i < pixels.length; i += 4) {
- var r = pixels[i];
- var g = pixels[i + 1];
- var b = pixels[i + 2];
-
- // CIE luminance for RGB
- var gray = (0.2126 * r + 0.7152 * g + 0.0722 * b);
- pixels[i] = pixels[i + 1] = pixels[i + 2] = gray;
- }
- };
-
- /**
- * Sets the alpha channel to entirely opaque. No parameter is used.
- *
- * @param {Canvas} canvas
- */
- Filters.opaque = function (canvas) {
- var pixels = Filters._toPixels(canvas);
-
- for (var i = 0; i < pixels.length; i += 4) {
- pixels[i + 3] = 255;
- }
-
- return pixels;
- };
-
- /**
- * Sets each pixel to its inverse value. No parameter is used.
- * @param {Invert}
- */
- Filters.invert = function (canvas) {
- var pixels = Filters._toPixels(canvas);
-
- for (var i = 0; i < pixels.length; i += 4) {
- pixels[i] = 255 - pixels[i];
- pixels[i + 1] = 255 - pixels[i + 1];
- pixels[i + 2] = 255 - pixels[i + 2];
- }
-
- };
-
-
- /**
- * Limits each channel of the image to the number of colors specified as
- * the parameter. The parameter can be set to values between 2 and 255, but
- * results are most noticeable in the lower ranges.
- *
- * Adapted from java based processing implementation
- *
- * @param {Canvas} canvas
- * @param {Integer} level
- */
- Filters.posterize = function (canvas, level) {
- var pixels = Filters._toPixels(canvas);
-
- if ((level < 2) || (level > 255)) {
- throw new Error(
- 'Level must be greater than 2 and less than 255 for posterize'
- );
- }
-
- var levels1 = level - 1;
- for (var i = 0; i < pixels.length; i+=4) {
- var rlevel = pixels[i];
- var glevel = pixels[i + 1];
- var blevel = pixels[i + 2];
-
- pixels[i] = (((rlevel * level) >> 8) * 255) / levels1;
- pixels[i + 1] = (((glevel * level) >> 8) * 255) / levels1;
- pixels[i + 2] = (((blevel * level) >> 8) * 255) / levels1;
- }
- };
-
- /**
- * reduces the bright areas in an image
- * @param {Canvas} canvas
- *
- */
- Filters.dilate = function (canvas) {
- var pixels = Filters._toPixels(canvas);
- var currIdx = 0;
- var maxIdx = pixels.length ? pixels.length/4 : 0;
- var out = new Int32Array(maxIdx);
- var currRowIdx, maxRowIdx, colOrig, colOut, currLum;
- var idxRight, idxLeft, idxUp, idxDown,
- colRight, colLeft, colUp, colDown,
- lumRight, lumLeft, lumUp, lumDown;
-
- while(currIdx < maxIdx) {
- currRowIdx = currIdx;
- maxRowIdx = currIdx + canvas.width;
- while (currIdx < maxRowIdx) {
- colOrig = colOut = Filters._getARGB(pixels, currIdx);
- idxLeft = currIdx - 1;
- idxRight = currIdx + 1;
- idxUp = currIdx - canvas.width;
- idxDown = currIdx + canvas.width;
-
- if (idxLeft < currRowIdx) {
- idxLeft = currIdx;
- }
- if (idxRight >= maxRowIdx) {
- idxRight = currIdx;
- }
- if (idxUp < 0){
- idxUp = 0;
- }
- if (idxDown >= maxIdx) {
- idxDown = currIdx;
- }
- colUp = Filters._getARGB(pixels, idxUp);
- colLeft = Filters._getARGB(pixels, idxLeft);
- colDown = Filters._getARGB(pixels, idxDown);
- colRight = Filters._getARGB(pixels, idxRight);
-
- //compute luminance
- currLum = 77*(colOrig>>16&0xff) +
- 151*(colOrig>>8&0xff) +
- 28*(colOrig&0xff);
- lumLeft = 77*(colLeft>>16&0xff) +
- 151*(colLeft>>8&0xff) +
- 28*(colLeft&0xff);
- lumRight = 77*(colRight>>16&0xff) +
- 151*(colRight>>8&0xff) +
- 28*(colRight&0xff);
- lumUp = 77*(colUp>>16&0xff) +
- 151*(colUp>>8&0xff) +
- 28*(colUp&0xff);
- lumDown = 77*(colDown>>16&0xff) +
- 151*(colDown>>8&0xff) +
- 28*(colDown&0xff);
-
- if (lumLeft > currLum) {
- colOut = colLeft;
- currLum = lumLeft;
- }
- if (lumRight > currLum) {
- colOut = colRight;
- currLum = lumRight;
- }
- if (lumUp > currLum) {
- colOut = colUp;
- currLum = lumUp;
- }
- if (lumDown > currLum) {
- colOut = colDown;
- currLum = lumDown;
- }
- out[currIdx++]=colOut;
- }
- }
- Filters._setPixels(pixels, out);
- };
-
- /**
- * increases the bright areas in an image
- * @param {Canvas} canvas
- *
- */
- Filters.erode = function(canvas) {
- var pixels = Filters._toPixels(canvas);
- var currIdx = 0;
- var maxIdx = pixels.length ? pixels.length/4 : 0;
- var out = new Int32Array(maxIdx);
- var currRowIdx, maxRowIdx, colOrig, colOut, currLum;
- var idxRight, idxLeft, idxUp, idxDown,
- colRight, colLeft, colUp, colDown,
- lumRight, lumLeft, lumUp, lumDown;
-
- while(currIdx < maxIdx) {
- currRowIdx = currIdx;
- maxRowIdx = currIdx + canvas.width;
- while (currIdx < maxRowIdx) {
- colOrig = colOut = Filters._getARGB(pixels, currIdx);
- idxLeft = currIdx - 1;
- idxRight = currIdx + 1;
- idxUp = currIdx - canvas.width;
- idxDown = currIdx + canvas.width;
-
- if (idxLeft < currRowIdx) {
- idxLeft = currIdx;
- }
- if (idxRight >= maxRowIdx) {
- idxRight = currIdx;
- }
- if (idxUp < 0) {
- idxUp = 0;
- }
- if (idxDown >= maxIdx) {
- idxDown = currIdx;
- }
- colUp = Filters._getARGB(pixels, idxUp);
- colLeft = Filters._getARGB(pixels, idxLeft);
- colDown = Filters._getARGB(pixels, idxDown);
- colRight = Filters._getARGB(pixels, idxRight);
-
- //compute luminance
- currLum = 77*(colOrig>>16&0xff) +
- 151*(colOrig>>8&0xff) +
- 28*(colOrig&0xff);
- lumLeft = 77*(colLeft>>16&0xff) +
- 151*(colLeft>>8&0xff) +
- 28*(colLeft&0xff);
- lumRight = 77*(colRight>>16&0xff) +
- 151*(colRight>>8&0xff) +
- 28*(colRight&0xff);
- lumUp = 77*(colUp>>16&0xff) +
- 151*(colUp>>8&0xff) +
- 28*(colUp&0xff);
- lumDown = 77*(colDown>>16&0xff) +
- 151*(colDown>>8&0xff) +
- 28*(colDown&0xff);
-
- if (lumLeft < currLum) {
- colOut = colLeft;
- currLum = lumLeft;
- }
- if (lumRight < currLum) {
- colOut = colRight;
- currLum = lumRight;
- }
- if (lumUp < currLum) {
- colOut = colUp;
- currLum = lumUp;
- }
- if (lumDown < currLum) {
- colOut = colDown;
- currLum = lumDown;
- }
-
- out[currIdx++]=colOut;
- }
- }
- Filters._setPixels(pixels, out);
- };
-
- // BLUR
-
- // internal kernel stuff for the gaussian blur filter
- var blurRadius;
- var blurKernelSize;
- var blurKernel;
- var blurMult;
-
- /*
- * Port of https://github.com/processing/processing/blob/
- * master/core/src/processing/core/PImage.java#L1250
- *
- * Optimized code for building the blur kernel.
- * further optimized blur code (approx. 15% for radius=20)
- * bigger speed gains for larger radii (~30%)
- * added support for various image types (ALPHA, RGB, ARGB)
- * [toxi 050728]
- */
- function buildBlurKernel(r) {
- var radius = (r * 3.5)|0;
- radius = (radius < 1) ? 1 : ((radius < 248) ? radius : 248);
-
- if (blurRadius !== radius) {
- blurRadius = radius;
- blurKernelSize = 1 + blurRadius<<1;
- blurKernel = new Int32Array(blurKernelSize);
- blurMult = new Array(blurKernelSize);
- for(var l = 0; l < blurKernelSize; l++){
- blurMult[l] = new Int32Array(256);
- }
-
- var bk,bki;
- var bm,bmi;
-
- for (var i = 1, radiusi = radius - 1; i < radius; i++) {
- blurKernel[radius+i] = blurKernel[radiusi] = bki = radiusi * radiusi;
- bm = blurMult[radius+i];
- bmi = blurMult[radiusi--];
- for (var j = 0; j < 256; j++){
- bm[j] = bmi[j] = bki * j;
- }
- }
- bk = blurKernel[radius] = radius * radius;
- bm = blurMult[radius];
-
- for (var k = 0; k < 256; k++){
- bm[k] = bk * k;
- }
- }
-
- }
-
- // Port of https://github.com/processing/processing/blob/
- // master/core/src/processing/core/PImage.java#L1433
- function blurARGB(canvas, radius) {
- var pixels = Filters._toPixels(canvas);
- var width = canvas.width;
- var height = canvas.height;
- var numPackedPixels = width * height;
- var argb = new Int32Array(numPackedPixels);
- for (var j = 0; j < numPackedPixels; j++) {
- argb[j] = Filters._getARGB(pixels, j);
- }
- var sum, cr, cg, cb, ca;
- var read, ri, ym, ymi, bk0;
- var a2 = new Int32Array(numPackedPixels);
- var r2 = new Int32Array(numPackedPixels);
- var g2 = new Int32Array(numPackedPixels);
- var b2 = new Int32Array(numPackedPixels);
- var yi = 0;
- buildBlurKernel(radius);
- var x, y, i;
- var bm;
- for (y = 0; y < height; y++) {
- for (x = 0; x < width; x++) {
- cb = cg = cr = ca = sum = 0;
- read = x - blurRadius;
- if (read < 0) {
- bk0 = -read;
- read = 0;
- } else {
- if (read >= width) {
- break;
- }
- bk0 = 0;
- }
- for (i = bk0; i < blurKernelSize; i++) {
- if (read >= width) {
- break;
- }
- var c = argb[read + yi];
- bm = blurMult[i];
- ca += bm[(c & -16777216) >>> 24];
- cr += bm[(c & 16711680) >> 16];
- cg += bm[(c & 65280) >> 8];
- cb += bm[c & 255];
- sum += blurKernel[i];
- read++;
- }
- ri = yi + x;
- a2[ri] = ca / sum;
- r2[ri] = cr / sum;
- g2[ri] = cg / sum;
- b2[ri] = cb / sum;
- }
- yi += width;
- }
- yi = 0;
- ym = -blurRadius;
- ymi = ym * width;
- for (y = 0; y < height; y++) {
- for (x = 0; x < width; x++) {
- cb = cg = cr = ca = sum = 0;
- if (ym < 0) {
- bk0 = ri = -ym;
- read = x;
- } else {
- if (ym >= height) {
- break;
- }
- bk0 = 0;
- ri = ym;
- read = x + ymi;
- }
- for (i = bk0; i < blurKernelSize; i++) {
- if (ri >= height) {
- break;
- }
- bm = blurMult[i];
- ca += bm[a2[read]];
- cr += bm[r2[read]];
- cg += bm[g2[read]];
- cb += bm[b2[read]];
- sum += blurKernel[i];
- ri++;
- read += width;
- }
- argb[x + yi] = (ca/sum)<<24 | (cr/sum)<<16 | (cg/sum)<<8 | (cb/sum);
- }
- yi += width;
- ymi += width;
- ym++;
- }
- Filters._setPixels(pixels, argb);
- }
-
- Filters.blur = function(canvas, radius){
- blurARGB(canvas, radius);
- };
-
-
- module.exports = Filters;
-
- },{}],55:[function(_dereq_,module,exports){
- /**
- * @module Image
- * @submodule Image
- * @for p5
- * @requires core
- */
-
- /**
- * This module defines the p5 methods for the p5.Image class
- * for drawing images to the main display canvas.
- */
- 'use strict';
-
-
- var p5 = _dereq_('../core/core');
-
- /* global frames:true */// This is not global, but JSHint is not aware that
- // this module is implicitly enclosed with Browserify: this overrides the
- // redefined-global error and permits using the name "frames" for the array
- // of saved animation frames.
- var frames = [];
-
-
- /**
- * Creates a new p5.Image (the datatype for storing images). This provides a
- * fresh buffer of pixels to play with. Set the size of the buffer with the
- * width and height parameters.
- * <br><br>
- * .pixels gives access to an array containing the values for all the pixels
- * in the display window.
- * These values are numbers. This array is the size (including an appropriate
- * factor for the pixelDensity) of the display window x4,
- * representing the R, G, B, A values in order for each pixel, moving from
- * left to right across each row, then down each column. See .pixels for
- * more info. It may also be simpler to use set() or get().
- * <br><br>
- * Before accessing the pixels of an image, the data must loaded with the
- * loadPixels() function. After the array data has been modified, the
- * updatePixels() function must be run to update the changes.
- *
- * @method createImage
- * @param {Integer} width width in pixels
- * @param {Integer} height height in pixels
- * @return {p5.Image} the p5.Image object
- * @example
- * <div>
- * <code>
- * img = createImage(66, 66);
- * img.loadPixels();
- * for (i = 0; i < img.width; i++) {
- * for (j = 0; j < img.height; j++) {
- * img.set(i, j, color(0, 90, 102));
- * }
- * }
- * img.updatePixels();
- * image(img, 17, 17);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * img = createImage(66, 66);
- * img.loadPixels();
- * for (i = 0; i < img.width; i++) {
- * for (j = 0; j < img.height; j++) {
- * img.set(i, j, color(0, 90, 102, i % img.width * 2));
- * }
- * }
- * img.updatePixels();
- * image(img, 17, 17);
- * image(img, 34, 34);
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var pink = color(255, 102, 204);
- * img = createImage(66, 66);
- * img.loadPixels();
- * var d = pixelDensity();
- * var halfImage = 4 * (width * d) * (height/2 * d);
- * for (var i = 0; i < halfImage; i+=4) {
- * img.pixels[i] = red(pink);
- * img.pixels[i+1] = green(pink);
- * img.pixels[i+2] = blue(pink);
- * img.pixels[i+3] = alpha(pink);
- * }
- * img.updatePixels();
- * image(img, 17, 17);
- * </code>
- * </div>
- *
- * @alt
- * 66x66 dark turquoise rect in center of canvas.
- * 2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas
- * no image displayed
- *
- */
- p5.prototype.createImage = function(width, height) {
- return new p5.Image(width, height);
- };
-
- /**
- * Save the current canvas as an image. In Safari, this will open the
- * image in the window and the user must provide their own
- * filename on save-as. Other browsers will either save the
- * file immediately, or prompt the user with a dialogue window.
- *
- * @method saveCanvas
- * @param {[selectedCanvas]} canvas a variable representing a
- * specific html5 canvas (optional)
- * @param {[String]} filename
- * @param {[String]} extension 'jpg' or 'png'
- * @example
- * <div class='norender'><code>
- * function setup() {
- * var c = createCanvas(100, 100);
- * background(255, 0, 0);
- * saveCanvas(c, 'myCanvas', 'jpg');
- * }
- * </code></div>
- * <div class='norender'><code>
- * // note that this example has the same result as above
- * // if no canvas is specified, defaults to main canvas
- * function setup() {
- * createCanvas(100, 100);
- * background(255, 0, 0);
- * saveCanvas('myCanvas', 'jpg');
- * }
- * </code></div>
- * <div class='norender'><code>
- * // all of the following are valid
- * saveCanvas(c, 'myCanvas', 'jpg');
- * saveCanvas(c, 'myCanvas');
- * saveCanvas(c);
- * saveCanvas('myCanvas', 'png');
- * saveCanvas('myCanvas');
- * saveCanvas();
- * </code></div>
- *
- * @alt
- * no image displayed
- * no image displayed
- * no image displayed
- *
- */
- p5.prototype.saveCanvas = function() {
-
- var cnv, filename, extension;
- if (arguments.length === 3) {
- cnv = arguments[0];
- filename = arguments[1];
- extension = arguments[2];
- } else if (arguments.length === 2) {
- if (typeof arguments[0] === 'object') {
- cnv = arguments[0];
- filename = arguments[1];
- } else {
- filename = arguments[0];
- extension = arguments[1];
- }
- } else if (arguments.length === 1) {
- if (typeof arguments[0] === 'object') {
- cnv = arguments[0];
- } else {
- filename = arguments[0];
- }
- }
-
- if (cnv instanceof p5.Element) {
- cnv = cnv.elt;
- }
- if (!(cnv instanceof HTMLCanvasElement)) {
- cnv = null;
- }
-
- if (!extension) {
- extension = p5.prototype._checkFileExtension(filename, extension)[1];
- if (extension === '') {
- extension = 'png';
- }
- }
-
- if (!cnv) {
- if (this._curElement && this._curElement.elt) {
- cnv = this._curElement.elt;
- }
- }
-
- if ( p5.prototype._isSafari() ) {
- var aText = 'Hello, Safari user!\n';
- aText += 'Now capturing a screenshot...\n';
- aText += 'To save this image,\n';
- aText += 'go to File --> Save As.\n';
- alert(aText);
- window.location.href = cnv.toDataURL();
- } else {
- var mimeType;
- if (typeof(extension) === 'undefined') {
- extension = 'png';
- mimeType = 'image/png';
- }
- else {
- switch(extension){
- case 'png':
- mimeType = 'image/png';
- break;
- case 'jpeg':
- mimeType = 'image/jpeg';
- break;
- case 'jpg':
- mimeType = 'image/jpeg';
- break;
- default:
- mimeType = 'image/png';
- break;
- }
- }
- var downloadMime = 'image/octet-stream';
- var imageData = cnv.toDataURL(mimeType);
- imageData = imageData.replace(mimeType, downloadMime);
-
- p5.prototype.downloadFile(imageData, filename, extension);
- }
- };
-
- /**
- * Capture a sequence of frames that can be used to create a movie.
- * Accepts a callback. For example, you may wish to send the frames
- * to a server where they can be stored or converted into a movie.
- * If no callback is provided, the browser will pop up save dialogues in an
- * attempt to download all of the images that have just been created. With the
- * callback provided the image data isn't saved by default but instead passed
- * as an argument to the callback function as an array of objects, with the
- * size of array equal to the total number of frames.
- *
- * @method saveFrames
- * @param {String} filename
- * @param {String} extension 'jpg' or 'png'
- * @param {Number} duration Duration in seconds to save the frames for.
- * @param {Number} framerate Framerate to save the frames in.
- * @param {Function} [callback] A callback function that will be executed
- to handle the image data. This function
- should accept an array as argument. The
- array will contain the specified number of
- frames of objects. Each object has three
- properties: imageData - an
- image/octet-stream, filename and extension.
- * @example
- * <div><code>
- * function draw() {
- * background(mouseX);
- * }
- *
- * function mousePressed() {
- * saveFrames("out", "png", 1, 25, function(data){
- * print(data);
- * });
- * }
- * </code></div>
- *
- * @alt
- * canvas background goes from light to dark with mouse x.
- *
- */
- p5.prototype.saveFrames = function(fName, ext, _duration, _fps, callback) {
- var duration = _duration || 3;
- duration = p5.prototype.constrain(duration, 0, 15);
- duration = duration * 1000;
- var fps = _fps || 15;
- fps = p5.prototype.constrain(fps, 0, 22);
- var count = 0;
-
- var makeFrame = p5.prototype._makeFrame;
- var cnv = this._curElement.elt;
- var frameFactory = setInterval(function(){
- makeFrame(fName + count, ext, cnv);
- count++;
- },1000/fps);
-
- setTimeout(function(){
- clearInterval(frameFactory);
- if (callback) {
- callback(frames);
- }
- else {
- for (var i = 0; i < frames.length; i++) {
- var f = frames[i];
- p5.prototype.downloadFile(f.imageData, f.filename, f.ext);
- }
- }
- frames = []; // clear frames
- }, duration + 0.01);
- };
-
- p5.prototype._makeFrame = function(filename, extension, _cnv) {
- var cnv;
- if (this) {
- cnv = this._curElement.elt;
- } else {
- cnv = _cnv;
- }
- var mimeType;
- if (!extension) {
- extension = 'png';
- mimeType = 'image/png';
- }
- else {
- switch(extension.toLowerCase()){
- case 'png':
- mimeType = 'image/png';
- break;
- case 'jpeg':
- mimeType = 'image/jpeg';
- break;
- case 'jpg':
- mimeType = 'image/jpeg';
- break;
- default:
- mimeType = 'image/png';
- break;
- }
- }
- var downloadMime = 'image/octet-stream';
- var imageData = cnv.toDataURL(mimeType);
- imageData = imageData.replace(mimeType, downloadMime);
-
- var thisFrame = {};
- thisFrame.imageData = imageData;
- thisFrame.filename = filename;
- thisFrame.ext = extension;
- frames.push(thisFrame);
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],56:[function(_dereq_,module,exports){
- /**
- * @module Image
- * @submodule Loading & Displaying
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var Filters = _dereq_('./filters');
- var canvas = _dereq_('../core/canvas');
- var constants = _dereq_('../core/constants');
-
- _dereq_('../core/error_helpers');
-
- /**
- * Loads an image from a path and creates a p5.Image from it.
- * <br><br>
- * The image may not be immediately available for rendering
- * If you want to ensure that the image is ready before doing
- * anything with it, place the loadImage() call in preload().
- * You may also supply a callback function to handle the image when it's ready.
- * <br><br>
- * The path to the image should be relative to the HTML file
- * that links in your sketch. Loading an from a URL or other
- * remote location may be blocked due to your browser's built-in
- * security.
- *
- * @method loadImage
- * @param {String} path Path of the image to be loaded
- * @param {Function(p5.Image)} [successCallback] Function to be called once
- * the image is loaded. Will be passed the
- * p5.Image.
- * @param {Function(Event)} [failureCallback] called with event error if
- * the image fails to load.
- * @return {p5.Image} the p5.Image object
- * @example
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/laDefense.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * }
- * </code>
- * </div>
- * <div>
- * <code>
- * function setup() {
- * // here we use a callback to display the image after loading
- * loadImage("assets/laDefense.jpg", function(img) {
- * image(img, 0, 0);
- * });
- * }
- * </code>
- * </div>
- *
- * @alt
- * image of the underside of a white umbrella and grided ceililng above
- * image of the underside of a white umbrella and grided ceililng above
- *
- */
- p5.prototype.loadImage = function(path, successCallback, failureCallback) {
- var img = new Image();
- var pImg = new p5.Image(1, 1, this);
- var decrementPreload = p5._getDecrementPreload.apply(this, arguments);
-
- img.onload = function() {
- pImg.width = pImg.canvas.width = img.width;
- pImg.height = pImg.canvas.height = img.height;
-
- // Draw the image into the backing canvas of the p5.Image
- pImg.drawingContext.drawImage(img, 0, 0);
-
- if (typeof successCallback === 'function') {
- successCallback(pImg);
- }
- if (decrementPreload && (successCallback !== decrementPreload)) {
- decrementPreload();
- }
- };
- img.onerror = function(e) {
- p5._friendlyFileLoadError(0,img.src);
- // don't get failure callback mixed up with decrementPreload
- if ((typeof failureCallback === 'function') &&
- (failureCallback !== decrementPreload)) {
- failureCallback(e);
- }
- };
-
- //set crossOrigin in case image is served which CORS headers
- //this will let us draw to canvas without tainting it.
- //see https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
- // When using data-uris the file will be loaded locally
- // so we don't need to worry about crossOrigin with base64 file types
- if(path.indexOf('data:image/') !== 0) {
- img.crossOrigin = 'Anonymous';
- }
-
- //start loading the image
- img.src = path;
-
- return pImg;
- };
-
- /**
- * Validates clipping params. Per drawImage spec sWidth and sHight cannot be
- * negative or greater than image intrinsic width and height
- * @private
- * @param {Number} sVal
- * @param {Number} iVal
- * @returns {Number}
- * @private
- */
- function _sAssign(sVal, iVal) {
- if (sVal > 0 && sVal < iVal) {
- return sVal;
- }
- else {
- return iVal;
- }
- }
-
- /**
- * Draw an image to the main canvas of the p5js sketch
- *
- * @method image
- * @param {p5.Image} img the image to display
- * @param {Number} x the x-coordinate at which to place the top-left
- * corner of the source image
- * @param {Number} y the y-coordinate at which to place the top-left
- * corner of the source image
- * @param {Number} width the width to draw the image
- * @param {Number} height the height to draw the image
- * @example
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/laDefense.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * image(img, 0, 0, 100, 100);
- * image(img, 0, 0, 100, 100, 0, 0, 100, 100);
- * }
- * </code>
- * </div>
- * <div>
- * <code>
- * function setup() {
- * // here we use a callback to display the image after loading
- * loadImage("assets/laDefense.jpg", function(img) {
- * image(img, 0, 0);
- * });
- * }
- * </code>
- * </div>
- *
- * @alt
- * image of the underside of a white umbrella and grided ceiling above
- * image of the underside of a white umbrella and grided ceiling above
- *
- */
- /**
- * @method image
- * @param {p5.Image} img
- * @param {Number} dx the x-coordinate in the destination canvas at
- * which to place the top-left corner of the
- * source image
- * @param {Number} dy the y-coordinate in the destination canvas at
- * which to place the top-left corner of the
- * source image
- * @param {Number} dWidth the width to draw the image in the destination
- * canvas
- * @param {Number} dHeight the height to draw the image in the destination
- * canvas
- * @param {Number} sx the x-coordinate of the top left corner of the
- * sub-rectangle of the source image to draw into
- * the destination canvas
- * @param {Number} sy the y-coordinate of the top left corner of the
- * sub-rectangle of the source image to draw into
- * the destination canvas
- * @param {Number} [sWidth] the width of the sub-rectangle of the
- * source image to draw into the destination
- * canvas
- * @param {Number} [sHeight] the height of the sub-rectangle of the
- * source image to draw into the destination context
- */
- p5.prototype.image =
- function(img, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight) {
- // set defaults per spec: https://goo.gl/3ykfOq
-
- var defW = img.width;
- var defH = img.height;
-
- if (img.elt && img.elt.videoWidth && !img.canvas) { // video no canvas
- var actualW = img.elt.videoWidth;
- var actualH = img.elt.videoHeight;
- defW = img.elt.videoWidth;
- defH = img.elt.width*actualH/actualW;
- }
-
- var _dx = dx;
- var _dy = dy;
- var _dw = dWidth || defW;
- var _dh = dHeight || defH;
- var _sx = sx || 0;
- var _sy = sy || 0;
- var _sw = sWidth || defW;
- var _sh = sHeight || defH;
-
- _sw = _sAssign(_sw, defW);
- _sh = _sAssign(_sh, defH);
-
-
- // This part needs cleanup and unit tests
- // see issues https://github.com/processing/p5.js/issues/1741
- // and https://github.com/processing/p5.js/issues/1673
- var pd = 1;
-
- if (img.elt && img.elt.videoWidth && img.elt.style.width && !img.canvas) {
- pd = img.elt.videoWidth / parseInt(img.elt.style.width, 10);
- }
- else if (img.elt && img.elt.width && img.elt.style.width) {
- pd = img.elt.width / parseInt(img.elt.style.width, 10);
- }
-
- _sx *= pd;
- _sy *= pd;
- _sh *= pd;
- _sw *= pd;
-
- var vals = canvas.modeAdjust(_dx, _dy, _dw, _dh,
- this._renderer._imageMode);
-
- // tint the image if there is a tint
- this._renderer.image(img, _sx, _sy, _sw, _sh, vals.x, vals.y, vals.w,
- vals.h);
- };
-
-
- /**
- * Sets the fill value for displaying images. Images can be tinted to
- * specified colors or made transparent by including an alpha value.
- * <br><br>
- * To apply transparency to an image without affecting its color, use
- * white as the tint color and specify an alpha value. For instance,
- * tint(255, 128) will make an image 50% transparent (assuming the default
- * alpha range of 0-255, which can be changed with colorMode()).
- * <br><br>
- * The value for the gray parameter must be less than or equal to the current
- * maximum value as specified by colorMode(). The default maximum value is
- * 255.
- *
- * @method tint
- * @param {Number|Array} v1 gray value, red or hue value (depending on the
- * current color mode), or color Array
- * @param {Number|Array} [v2] green or saturation value (depending on the
- * current color mode)
- * @param {Number|Array} [v3] blue or brightness value (depending on the
- * current color mode)
- * @param {Number|Array} [a] opacity of the background
- * @example
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/laDefense.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * tint(0, 153, 204); // Tint blue
- * image(img, 50, 0);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/laDefense.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * tint(0, 153, 204, 126); // Tint blue and set transparency
- * image(img, 50, 0);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/laDefense.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * tint(255, 126); // Apply transparency without changing color
- * image(img, 50, 0);
- * }
- * </code>
- * </div>
- *
- * @alt
- * 2 side by side images of umbrella and ceiling, one image with blue tint
- * Images of umbrella and ceiling, one half of image with blue tint
- * 2 side by side images of umbrella and ceiling, one image translucent
- *
- */
- p5.prototype.tint = function () {
- var c = this.color.apply(this, arguments);
- this._renderer._tint = c.levels;
- };
-
- /**
- * Removes the current fill value for displaying images and reverts to
- * displaying images with their original hues.
- *
- * @method noTint
- * @example
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * tint(0, 153, 204); // Tint blue
- * image(img, 0, 0);
- * noTint(); // Disable tint
- * image(img, 50, 0);
- * }
- * </code>
- * </div>
- *
- * @alt
- * 2 side by side images of bricks, left image with blue tint
- *
- */
- p5.prototype.noTint = function() {
- this._renderer._tint = null;
- };
-
- /**
- * Apply the current tint color to the input image, return the resulting
- * canvas.
- *
- * @param {p5.Image} The image to be tinted
- * @return {canvas} The resulting tinted canvas
- *
- */
- p5.prototype._getTintedImageCanvas = function(img) {
- if (!img.canvas) {
- return img;
- }
- var pixels = Filters._toPixels(img.canvas);
- var tmpCanvas = document.createElement('canvas');
- tmpCanvas.width = img.canvas.width;
- tmpCanvas.height = img.canvas.height;
- var tmpCtx = tmpCanvas.getContext('2d');
- var id = tmpCtx.createImageData(img.canvas.width, img.canvas.height);
- var newPixels = id.data;
-
- for(var i = 0; i < pixels.length; i += 4) {
- var r = pixels[i];
- var g = pixels[i+1];
- var b = pixels[i+2];
- var a = pixels[i+3];
-
- newPixels[i] = r*this._renderer._tint[0]/255;
- newPixels[i+1] = g*this._renderer._tint[1]/255;
- newPixels[i+2] = b*this._renderer._tint[2]/255;
- newPixels[i+3] = a*this._renderer._tint[3]/255;
- }
-
- tmpCtx.putImageData(id, 0, 0);
- return tmpCanvas;
- };
-
- /**
- * Set image mode. Modifies the location from which images are drawn by
- * changing the way in which parameters given to image() are interpreted.
- * The default mode is imageMode(CORNER), which interprets the second and
- * third parameters of image() as the upper-left corner of the image. If
- * two additional parameters are specified, they are used to set the image's
- * width and height.
- * <br><br>
- * imageMode(CORNERS) interprets the second and third parameters of image()
- * as the location of one corner, and the fourth and fifth parameters as the
- * opposite corner.
- * <br><br>
- * imageMode(CENTER) interprets the second and third parameters of image()
- * as the image's center point. If two additional parameters are specified,
- * they are used to set the image's width and height.
- *
- * @method imageMode
- * @param {Constant} mode either CORNER, CORNERS, or CENTER
- * @example
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * imageMode(CORNER);
- * image(img, 10, 10, 50, 50);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * imageMode(CORNERS);
- * image(img, 10, 10, 90, 40);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * imageMode(CENTER);
- * image(img, 50, 50, 80, 80);
- * }
- * </code>
- * </div>
- *
- * @alt
- * small square image of bricks
- * horizontal rectangle image of bricks
- * large square image of bricks
- *
- */
- p5.prototype.imageMode = function(m) {
- if (m === constants.CORNER ||
- m === constants.CORNERS ||
- m === constants.CENTER) {
- this._renderer._imageMode = m;
- }
- };
-
-
- module.exports = p5;
-
- },{"../core/canvas":35,"../core/constants":36,"../core/core":37,"../core/error_helpers":40,"./filters":54}],57:[function(_dereq_,module,exports){
- /**
- * @module Image
- * @submodule Image
- * @requires core
- * @requires constants
- * @requires filters
- */
-
- /**
- * This module defines the p5.Image class and P5 methods for
- * drawing images to the main display canvas.
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var Filters = _dereq_('./filters');
-
- /*
- * Class methods
- */
-
- /**
- * Creates a new p5.Image. A p5.Image is a canvas backed representation of an
- * image.
- * <br><br>
- * p5 can display .gif, .jpg and .png images. Images may be displayed
- * in 2D and 3D space. Before an image is used, it must be loaded with the
- * loadImage() function. The p5.Image class contains fields for the width and
- * height of the image, as well as an array called pixels[] that contains the
- * values for every pixel in the image.
- * <br><br>
- * The methods described below allow easy access to the image's pixels and
- * alpha channel and simplify the process of compositing.
- * <br><br>
- * Before using the pixels[] array, be sure to use the loadPixels() method on
- * the image to make sure that the pixel data is properly loaded.
- *
- * @class p5.Image
- * @constructor
- * @param {Number} width
- * @param {Number} height
- * @param {Object} pInst An instance of a p5 sketch.
- */
- p5.Image = function(width, height){
- /**
- * Image width.
- * @property width
- * @example
- * <div><code>
- * var img;
- * function preload() {
- * img = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- * image(img, 0, 0);
- * for (var i=0; i < img.width; i++) {
- * var c = img.get(i, img.height/2);
- * stroke(c);
- * line(i, height/2, i, height);
- * }
- * }
- * </code></div>
- *
- * @alt
- * rocky mountains in top and horizontal lines in corresponding colors in bottom.
- *
- */
- this.width = width;
- /**
- * Image height.
- * @property height
- * @example
- * <div><code>
- * var img;
- * function preload() {
- * img = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- * image(img, 0, 0);
- * for (var i=0; i < img.height; i++) {
- * var c = img.get(img.width/2, i);
- * stroke(c);
- * line(0, i, width/2, i);
- * }
- * }
- * </code></div>
- *
- * @alt
- * rocky mountains on right and vertical lines in corresponding colors on left.
- *
- */
- this.height = height;
- this.canvas = document.createElement('canvas');
- this.canvas.width = this.width;
- this.canvas.height = this.height;
- this.drawingContext = this.canvas.getContext('2d');
- this._pixelDensity = 1;
- //used for webgl texturing only
- this.isTexture = false;
- /**
- * Array containing the values for all the pixels in the display window.
- * These values are numbers. This array is the size (include an appropriate
- * factor for pixelDensity) of the display window x4,
- * representing the R, G, B, A values in order for each pixel, moving from
- * left to right across each row, then down each column. Retina and other
- * high denisty displays may have more pixels[] (by a factor of
- * pixelDensity^2).
- * For example, if the image is 100x100 pixels, there will be 40,000. With
- * pixelDensity = 2, there will be 160,000. The first four values
- * (indices 0-3) in the array will be the R, G, B, A values of the pixel at
- * (0, 0). The second four values (indices 4-7) will contain the R, G, B, A
- * values of the pixel at (1, 0). More generally, to set values for a pixel
- * at (x, y):
- * ```javascript
- * var d = pixelDensity;
- * for (var i = 0; i < d; i++) {
- * for (var j = 0; j < d; j++) {
- * // loop over
- * idx = 4 * ((y * d + j) * width * d + (x * d + i));
- * pixels[idx] = r;
- * pixels[idx+1] = g;
- * pixels[idx+2] = b;
- * pixels[idx+3] = a;
- * }
- * }
- * ```
- * <br><br>
- * Before accessing this array, the data must loaded with the loadPixels()
- * function. After the array data has been modified, the updatePixels()
- * function must be run to update the changes.
- * @property pixels[]
- * @example
- * <div>
- * <code>
- * img = createImage(66, 66);
- * img.loadPixels();
- * for (i = 0; i < img.width; i++) {
- * for (j = 0; j < img.height; j++) {
- * img.set(i, j, color(0, 90, 102));
- * }
- * }
- * img.updatePixels();
- * image(img, 17, 17);
- * </code>
- * </div>
- * <div>
- * <code>
- * var pink = color(255, 102, 204);
- * img = createImage(66, 66);
- * img.loadPixels();
- * for (var i = 0; i < 4*(width*height/2); i+=4) {
- * img.pixels[i] = red(pink);
- * img.pixels[i+1] = green(pink);
- * img.pixels[i+2] = blue(pink);
- * img.pixels[i+3] = alpha(pink);
- * }
- * img.updatePixels();
- * image(img, 17, 17);
- * </code>
- * </div>
- *
- * @alt
- * 66x66 turquoise rect in center of canvas
- * 66x66 pink rect in center of canvas
- *
- */
- this.pixels = [];
- };
-
- /**
- * Helper fxn for sharing pixel methods
- *
- */
- p5.Image.prototype._setProperty = function (prop, value) {
- this[prop] = value;
- };
-
- /**
- * Loads the pixels data for this image into the [pixels] attribute.
- *
- * @method loadPixels
- * @example
- * <div><code>
- * var myImage;
- * var halfImage;
- *
- * function preload() {
- * myImage = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * myImage.loadPixels();
- * halfImage = 4 * width * height/2;
- * for(var i = 0; i < halfImage; i++){
- * myImage.pixels[i+halfImage] = myImage.pixels[i];
- * }
- * myImage.updatePixels();
- * }
- *
- * function draw() {
- * image(myImage, 0, 0);
- * }
- * </code></div>
- *
- * @alt
- * 2 images of rocky mountains vertically stacked
- *
- */
- p5.Image.prototype.loadPixels = function(){
- p5.Renderer2D.prototype.loadPixels.call(this);
- };
-
- /**
- * Updates the backing canvas for this image with the contents of
- * the [pixels] array.
- *
- * @method updatePixels
- * @param {Integer|undefined} x x-offset of the target update area for the
- * underlying canvas
- * @param {Integer|undefined} y y-offset of the target update area for the
- * underlying canvas
- * @param {Integer|undefined} w height of the target update area for the
- * underlying canvas
- * @param {Integer|undefined} h height of the target update area for the
- * underlying canvas
- * @example
- * <div><code>
- * var myImage;
- * var halfImage;
- *
- * function preload() {
- * myImage = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * myImage.loadPixels();
- * halfImage = 4 * width * height/2;
- * for(var i = 0; i < halfImage; i++){
- * myImage.pixels[i+halfImage] = myImage.pixels[i];
- * }
- * myImage.updatePixels();
- * }
- *
- * function draw() {
- * image(myImage, 0, 0);
- * }
- * </code></div>
- *
- * @alt
- * 2 images of rocky mountains vertically stacked
- *
- */
- p5.Image.prototype.updatePixels = function(x, y, w, h){
- p5.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
- };
-
- /**
- * Get a region of pixels from an image.
- *
- * If no params are passed, those whole image is returned,
- * if x and y are the only params passed a single pixel is extracted
- * if all params are passed a rectangle region is extracted and a p5.Image
- * is returned.
- *
- * Returns undefined if the region is outside the bounds of the image
- *
- * @method get
- * @param {Number} [x] x-coordinate of the pixel
- * @param {Number} [y] y-coordinate of the pixel
- * @param {Number} [w] width
- * @param {Number} [h] height
- * @return {Array/Color | p5.Image} color of pixel at x,y in array format
- * [R, G, B, A] or p5.Image
- * @example
- * <div><code>
- * var myImage;
- * var c;
- *
- * function preload() {
- * myImage = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * background(myImage);
- * noStroke();
- * c = myImage.get(60, 90);
- * fill(c);
- * rect(25, 25, 50, 50);
- * }
- *
- * //get() returns color here
- * </code></div>
- *
- * @alt
- * image of rocky mountains with 50x50 green rect in front
- *
- */
- p5.Image.prototype.get = function(x, y, w, h){
- return p5.Renderer2D.prototype.get.call(this, x, y, w, h);
- };
-
- /**
- * Set the color of a single pixel or write an image into
- * this p5.Image.
- *
- * Note that for a large number of pixels this will
- * be slower than directly manipulating the pixels array
- * and then calling updatePixels().
- *
- * @method set
- * @param {Number} x x-coordinate of the pixel
- * @param {Number} y y-coordinate of the pixel
- * @param {Number|Array|Object} a grayscale value | pixel array |
- * a p5.Color | image to copy
- * @example
- * <div>
- * <code>
- * img = createImage(66, 66);
- * img.loadPixels();
- * for (i = 0; i < img.width; i++) {
- * for (j = 0; j < img.height; j++) {
- * img.set(i, j, color(0, 90, 102, i % img.width * 2));
- * }
- * }
- * img.updatePixels();
- * image(img, 17, 17);
- * image(img, 34, 34);
- * </code>
- * </div>
- *
- * @alt
- * 2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas
- *
- */
- p5.Image.prototype.set = function(x, y, imgOrCol){
- p5.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
- };
-
- /**
- * Resize the image to a new width and height. To make the image scale
- * proportionally, use 0 as the value for the wide or high parameter.
- * For instance, to make the width of an image 150 pixels, and change
- * the height using the same proportion, use resize(150, 0).
- *
- * @method resize
- * @param {Number} width the resized image width
- * @param {Number} height the resized image height
- * @example
- * <div><code>
- * var img;
- *
- * function setup() {
- * img = loadImage("assets/rockies.jpg");
- * }
-
- * function draw() {
- * image(img, 0, 0);
- * }
- *
- * function mousePressed() {
- * img.resize(50, 100);
- * }
- * </code></div>
- *
- * @alt
- * image of rocky mountains. zoomed in
- *
- */
- p5.Image.prototype.resize = function(width, height){
-
- // Copy contents to a temporary canvas, resize the original
- // and then copy back.
- //
- // There is a faster approach that involves just one copy and swapping the
- // this.canvas reference. We could switch to that approach if (as i think
- // is the case) there an expectation that the user would not hold a
- // reference to the backing canvas of a p5.Image. But since we do not
- // enforce that at the moment, I am leaving in the slower, but safer
- // implementation.
-
- // auto-resize
- if (width === 0 && height === 0) {
- width = this.canvas.width;
- height = this.canvas.height;
- } else if (width === 0) {
- width = this.canvas.width * height / this.canvas.height;
- } else if (height === 0) {
- height = this.canvas.height * width / this.canvas.width;
- }
-
- width = Math.floor(width);
- height = Math.floor(height);
-
- var tempCanvas = document.createElement('canvas');
- tempCanvas.width = width;
- tempCanvas.height = height;
- tempCanvas.getContext('2d').drawImage(this.canvas,
- 0, 0, this.canvas.width, this.canvas.height,
- 0, 0, tempCanvas.width, tempCanvas.height
- );
-
-
- // Resize the original canvas, which will clear its contents
- this.canvas.width = this.width = width;
- this.canvas.height = this.height = height;
-
- //Copy the image back
-
- this.drawingContext.drawImage(tempCanvas,
- 0, 0, width, height,
- 0, 0, width, height
- );
-
- if(this.pixels.length > 0){
- this.loadPixels();
- }
- };
-
- /**
- * Copies a region of pixels from one image to another. If no
- * srcImage is specified this is used as the source. If the source
- * and destination regions aren't the same size, it will
- * automatically resize source pixels to fit the specified
- * target region.
- *
- * @method copy
- * @param {p5.Image|undefined} srcImage source image
- * @param {Integer} sx X coordinate of the source's upper left corner
- * @param {Integer} sy Y coordinate of the source's upper left corner
- * @param {Integer} sw source image width
- * @param {Integer} sh source image height
- * @param {Integer} dx X coordinate of the destination's upper left corner
- * @param {Integer} dy Y coordinate of the destination's upper left corner
- * @param {Integer} dw destination image width
- * @param {Integer} dh destination image height
- * @example
- * <div><code>
- * var photo;
- * var bricks;
- * var x;
- * var y;
- *
- * function preload() {
- * photo = loadImage("assets/rockies.jpg");
- * bricks = loadImage("assets/bricks.jpg");
- * }
- *
- * function setup() {
- * x = bricks.width/2;
- * y = bricks.height/2;
- * photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);
- * image(photo, 0, 0);
- * }
- * </code></div>
- *
- * @alt
- * image of rocky mountains and smaller image on top of bricks at top left
- *
- */
- p5.Image.prototype.copy = function () {
- p5.prototype.copy.apply(this, arguments);
- };
-
- /**
- * Masks part of an image from displaying by loading another
- * image and using it's alpha channel as an alpha channel for
- * this image.
- *
- * @method mask
- * @param {p5.Image} srcImage source image
- * @example
- * <div><code>
- * var photo, maskImage;
- * function preload() {
- * photo = loadImage("assets/rockies.jpg");
- * maskImage = loadImage("assets/mask2.png");
- * }
- *
- * function setup() {
- * createCanvas(100, 100);
- * photo.mask(maskImage);
- * image(photo, 0, 0);
- * }
- * </code></div>
- *
- * @alt
- * image of rocky mountains with white at right
- *
- *
- * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
- *
- */
- // TODO: - Accept an array of alpha values.
- // - Use other channels of an image. p5 uses the
- // blue channel (which feels kind of arbitrary). Note: at the
- // moment this method does not match native processings original
- // functionality exactly.
- p5.Image.prototype.mask = function(p5Image) {
- if(p5Image === undefined){
- p5Image = this;
- }
- var currBlend = this.drawingContext.globalCompositeOperation;
-
- var scaleFactor = 1;
- if (p5Image instanceof p5.Renderer) {
- scaleFactor = p5Image._pInst._pixelDensity;
- }
-
- var copyArgs = [
- p5Image,
- 0,
- 0,
- scaleFactor*p5Image.width,
- scaleFactor*p5Image.height,
- 0,
- 0,
- this.width,
- this.height
- ];
-
- this.drawingContext.globalCompositeOperation = 'destination-in';
- p5.Image.prototype.copy.apply(this, copyArgs);
- this.drawingContext.globalCompositeOperation = currBlend;
- };
-
- /**
- * Applies an image filter to a p5.Image
- *
- * @method filter
- * @param {String} operation one of threshold, gray, invert, posterize and
- * opaque see Filters.js for docs on each available
- * filter
- * @param {Number|undefined} value
- * @example
- * <div><code>
- * var photo1;
- * var photo2;
- *
- * function preload() {
- * photo1 = loadImage("assets/rockies.jpg");
- * photo2 = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * photo2.filter("gray");
- * image(photo1, 0, 0);
- * image(photo2, width/2, 0);
- * }
- * </code></div>
- *
- * @alt
- * 2 images of rocky mountains left one in color, right in black and white
- *
- */
- p5.Image.prototype.filter = function(operation, value) {
- Filters.apply(this.canvas, Filters[operation.toLowerCase()], value);
- };
-
- /**
- * Copies a region of pixels from one image to another, using a specified
- * blend mode to do the operation.
- *
- * @method blend
- * @param {p5.Image|undefined} srcImage source image
- * @param {Integer} sx X coordinate of the source's upper left corner
- * @param {Integer} sy Y coordinate of the source's upper left corner
- * @param {Integer} sw source image width
- * @param {Integer} sh source image height
- * @param {Integer} dx X coordinate of the destination's upper left corner
- * @param {Integer} dy Y coordinate of the destination's upper left corner
- * @param {Integer} dw destination image width
- * @param {Integer} dh destination image height
- * @param {Integer} blendMode the blend mode
- *
- * Available blend modes are: normal | multiply | screen | overlay |
- * darken | lighten | color-dodge | color-burn | hard-light |
- * soft-light | difference | exclusion | hue | saturation |
- * color | luminosity
- *
- *
- * http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
- * @example
- * <div><code>
- * var mountains;
- * var bricks;
- *
- * function preload() {
- * mountains = loadImage("assets/rockies.jpg");
- * bricks = loadImage("assets/bricks_third.jpg");
- * }
- *
- * function setup() {
- * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
- * image(mountains, 0, 0);
- * image(bricks, 0, 0);
- * }
- * </code></div>
- * <div><code>
- * var mountains;
- * var bricks;
- *
- * function preload() {
- * mountains = loadImage("assets/rockies.jpg");
- * bricks = loadImage("assets/bricks_third.jpg");
- * }
- *
- * function setup() {
- * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
- * image(mountains, 0, 0);
- * image(bricks, 0, 0);
- * }
- * </code></div>
- * <div><code>
- * var mountains;
- * var bricks;
- *
- * function preload() {
- * mountains = loadImage("assets/rockies.jpg");
- * bricks = loadImage("assets/bricks_third.jpg");
- * }
- *
- * function setup() {
- * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
- * image(mountains, 0, 0);
- * image(bricks, 0, 0);
- * }
- * </code></div>
- *
- * @alt
- * image of rocky mountains. Brick images on left and right. Right overexposed
- * image of rockies. Brickwall images on left and right. Right mortar transparent
- * image of rockies. Brickwall images on left and right. Right translucent
- *
- */
- p5.Image.prototype.blend = function() {
- p5.prototype.blend.apply(this, arguments);
- };
-
- /**
- * Saves the image to a file and force the browser to download it.
- * Accepts two strings for filename and file extension
- * Supports png (default) and jpg.
- *
- * @method save
- * @param {String} filename give your file a name
- * @param {String} extension 'png' or 'jpg'
- * @example
- * <div><code>
- * var photo;
- *
- * function preload() {
- * photo = loadImage("assets/rockies.jpg");
- * }
- *
- * function draw() {
- * image(photo, 0, 0);
- * }
- *
- * function keyTyped() {
- * if (key == 's') {
- * photo.save("photo", "png");
- * }
- * }
- * </code></div>
- *
- * @alt
- * image of rocky mountains.
- *
- */
- p5.Image.prototype.save = function(filename, extension) {
- var mimeType;
- if (!extension) {
- extension = 'png';
- mimeType = 'image/png';
- }
- else {
- // en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support
- switch(extension.toLowerCase()){
- case 'png':
- mimeType = 'image/png';
- break;
- case 'jpeg':
- mimeType = 'image/jpeg';
- break;
- case 'jpg':
- mimeType = 'image/jpeg';
- break;
- default:
- mimeType = 'image/png';
- break;
- }
- }
- var downloadMime = 'image/octet-stream';
- var imageData = this.canvas.toDataURL(mimeType);
- imageData = imageData.replace(mimeType, downloadMime);
-
- //Make the browser download the file
- p5.prototype.downloadFile(imageData, filename, extension);
- };
-
- module.exports = p5.Image;
- },{"../core/core":37,"./filters":54}],58:[function(_dereq_,module,exports){
- /**
- * @module Image
- * @submodule Pixels
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var Filters = _dereq_('./filters');
- _dereq_('../color/p5.Color');
-
- /**
- * <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
- * /Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>
- * containing the values for all the pixels in the display window.
- * These values are numbers. This array is the size (include an appropriate
- * factor for pixelDensity) of the display window x4,
- * representing the R, G, B, A values in order for each pixel, moving from
- * left to right across each row, then down each column. Retina and other
- * high denisty displays will have more pixels[] (by a factor of
- * pixelDensity^2).
- * For example, if the image is 100x100 pixels, there will be 40,000. On a
- * retina display, there will be 160,000.
- * <br><br>
- * The first four values (indices 0-3) in the array will be the R, G, B, A
- * values of the pixel at (0, 0). The second four values (indices 4-7) will
- * contain the R, G, B, A values of the pixel at (1, 0). More generally, to
- * set values for a pixel at (x, y):
- * ```javascript
- * var d = pixelDensity;
- * for (var i = 0; i < d; i++) {
- * for (var j = 0; j < d; j++) {
- * // loop over
- * idx = 4 * ((y * d + j) * width * d + (x * d + i));
- * pixels[idx] = r;
- * pixels[idx+1] = g;
- * pixels[idx+2] = b;
- * pixels[idx+3] = a;
- * }
- * }
- * ```
- * <p>While the above method is complex, it is flexible enough to work with
- * any pixelDensity. Note that set() will automatically take care of
- * setting all the appropriate values in pixels[] for a given (x, y) at
- * any pixelDensity, but the performance may not be as fast when lots of
- * modifications are made to the pixel array.
- * <br><br>
- * Before accessing this array, the data must loaded with the loadPixels()
- * function. After the array data has been modified, the updatePixels()
- * function must be run to update the changes.
- * <br><br>
- * Note that this is not a standard javascript array. This means that
- * standard javascript functions such as <code>slice()</code> or
- * <code>arrayCopy()</code> do not
- * work.</p>
- *
- * @property pixels[]
- * @example
- * <div>
- * <code>
- * var pink = color(255, 102, 204);
- * loadPixels();
- * var d = pixelDensity();
- * var halfImage = 4 * (width * d) * (height/2 * d);
- * for (var i = 0; i < halfImage; i+=4) {
- * pixels[i] = red(pink);
- * pixels[i+1] = green(pink);
- * pixels[i+2] = blue(pink);
- * pixels[i+3] = alpha(pink);
- * }
- * updatePixels();
- * </code>
- * </div>
- *
- * @alt
- * top half of canvas pink, bottom grey
- *
- */
- p5.prototype.pixels = [];
-
- /**
- * Copies a region of pixels from one image to another, using a specified
- * blend mode to do the operation.<br><br>
- * Available blend modes are: BLEND | DARKEST | LIGHTEST | DIFFERENCE |
- * MULTIPLY| EXCLUSION | SCREEN | REPLACE | OVERLAY | HARD_LIGHT |
- * SOFT_LIGHT | DODGE | BURN | ADD | NORMAL
- *
- *
- * @method blend
- * @param {p5.Image|undefined} srcImage source image
- * @param {Integer} sx X coordinate of the source's upper left corner
- * @param {Integer} sy Y coordinate of the source's upper left corner
- * @param {Integer} sw source image width
- * @param {Integer} sh source image height
- * @param {Integer} dx X coordinate of the destination's upper left corner
- * @param {Integer} dy Y coordinate of the destination's upper left corner
- * @param {Integer} dw destination image width
- * @param {Integer} dh destination image height
- * @param {Integer} blendMode the blend mode
- *
- * @example
- * <div><code>
- * var img0;
- * var img1;
- *
- * function preload() {
- * img0 = loadImage("assets/rockies.jpg");
- * img1 = loadImage("assets/bricks_third.jpg");
- * }
- *
- * function setup() {
- * background(img0);
- * image(img1, 0, 0);
- * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
- * }
- * </code></div>
- * <div><code>
- * var img0;
- * var img1;
- *
- * function preload() {
- * img0 = loadImage("assets/rockies.jpg");
- * img1 = loadImage("assets/bricks_third.jpg");
- * }
- *
- * function setup() {
- * background(img0);
- * image(img1, 0, 0);
- * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
- * }
- * </code></div>
- * <div><code>
- * var img0;
- * var img1;
- *
- * function preload() {
- * img0 = loadImage("assets/rockies.jpg");
- * img1 = loadImage("assets/bricks_third.jpg");
- * }
- *
- * function setup() {
- * background(img0);
- * image(img1, 0, 0);
- * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
- * }
- * </code></div>
- *
- * @alt
- * image of rocky mountains. Brick images on left and right. Right overexposed
- * image of rockies. Brickwall images on left and right. Right mortar transparent
- * image of rockies. Brickwall images on left and right. Right translucent
- *
- *
- */
- p5.prototype.blend = function() {
- if (this._renderer) {
- this._renderer.blend.apply(this._renderer, arguments);
- } else {
- p5.Renderer2D.prototype.blend.apply(this, arguments);
- }
- };
-
- /**
- * Copies a region of the canvas to another region of the canvas
- * and copies a region of pixels from an image used as the srcImg parameter
- * into the canvas srcImage is specified this is used as the source. If
- * the source and destination regions aren't the same size, it will
- * automatically resize source pixels to fit the specified
- * target region.
- *
- * @method copy
- * @param {p5.Image|undefined} srcImage source image
- * @param {Integer} sx X coordinate of the source's upper left corner
- * @param {Integer} sy Y coordinate of the source's upper left corner
- * @param {Integer} sw source image width
- * @param {Integer} sh source image height
- * @param {Integer} dx X coordinate of the destination's upper left corner
- * @param {Integer} dy Y coordinate of the destination's upper left corner
- * @param {Integer} dw destination image width
- * @param {Integer} dh destination image height
- *
- * @example
- * <div><code>
- * var img;
- *
- * function preload() {
- * img = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * background(img);
- * copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
- * stroke(255);
- * noFill();
- * // Rectangle shows area being copied
- * rect(7, 22, 10, 10);
- * }
- * </code></div>
- *
- * @alt
- * image of rocky mountains. Brick images on left and right. Right overexposed
- * image of rockies. Brickwall images on left and right. Right mortar transparent
- * image of rockies. Brickwall images on left and right. Right translucent
- *
- */
- p5.prototype.copy = function () {
- p5.Renderer2D._copyHelper.apply(this, arguments);
- };
-
- /**
- * Applies a filter to the canvas.
- * <br><br>
- *
- * The presets options are:
- * <br><br>
- *
- * THRESHOLD
- * Converts the image to black and white pixels depending if they are above or
- * below the threshold defined by the level parameter. The parameter must be
- * between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
- * <br><br>
- *
- * GRAY
- * Converts any colors in the image to grayscale equivalents. No parameter
- * is used.
- * <br><br>
- *
- * OPAQUE
- * Sets the alpha channel to entirely opaque. No parameter is used.
- * <br><br>
- *
- * INVERT
- * Sets each pixel to its inverse value. No parameter is used.
- * <br><br>
- *
- * POSTERIZE
- * Limits each channel of the image to the number of colors specified as the
- * parameter. The parameter can be set to values between 2 and 255, but
- * results are most noticeable in the lower ranges.
- * <br><br>
- *
- * BLUR
- * Executes a Guassian blur with the level parameter specifying the extent
- * of the blurring. If no parameter is used, the blur is equivalent to
- * Guassian blur of radius 1. Larger values increase the blur.
- * <br><br>
- *
- * ERODE
- * Reduces the light areas. No parameter is used.
- * <br><br>
- *
- * DILATE
- * Increases the light areas. No parameter is used.
- *
- * @method filter
- * @param {Constant} filterType
- * @param {Number} filterParam an optional parameter unique
- * to each filter, see above
- *
- *
- * @example
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * filter(THRESHOLD);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * filter(GRAY);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * filter(OPAQUE);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * filter(INVERT);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * filter(POSTERIZE,3);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * filter(DILATE);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * filter(BLUR,3);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/bricks.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * filter(ERODE);
- * }
- * </code>
- * </div>
- *
- * @alt
- * black and white image of a brick wall.
- * greyscale image of a brickwall
- * image of a brickwall
- * jade colored image of a brickwall
- * red and pink image of a brickwall
- * image of a brickwall
- * blurry image of a brickwall
- * image of a brickwall
- * image of a brickwall with less detail
- *
- */
- p5.prototype.filter = function(operation, value) {
- if(this.canvas !== undefined) {
- Filters.apply(this.canvas, Filters[operation.toLowerCase()], value);
- }
- else {
- Filters.apply(this.elt, Filters[operation.toLowerCase()], value);
- }
- };
-
- /**
- * Returns an array of [R,G,B,A] values for any pixel or grabs a section of
- * an image. If no parameters are specified, the entire image is returned.
- * Use the x and y parameters to get the value of one pixel. Get a section of
- * the display window by specifying additional w and h parameters. When
- * getting an image, the x and y parameters define the coordinates for the
- * upper-left corner of the image, regardless of the current imageMode().
- * <br><br>
- * If the pixel requested is outside of the image window, [0,0,0,255] is
- * returned. To get the numbers scaled according to the current color ranges
- * and taking into account colorMode, use getColor instead of get.
- * <br><br>
- * Getting the color of a single pixel with get(x, y) is easy, but not as fast
- * as grabbing the data directly from pixels[]. The equivalent statement to
- * get(x, y) using pixels[] with pixel density d is
- * <code>
- * var off = (y * width + x) * d * 4;
- * [pixels[off],
- * pixels[off+1],
- * pixels[off+2],
- * pixels[off+3]]</code>
- * <br><br>
- * See the reference for pixels[] for more information.
- *
- * @method get
- * @param {Number} [x] x-coordinate of the pixel
- * @param {Number} [y] y-coordinate of the pixel
- * @param {Number} [w] width
- * @param {Number} [h] height
- * @return {Array|p5.Image} values of pixel at x,y in array format
- * [R, G, B, A] or p5.Image
- * @example
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/rockies.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * var c = get();
- * image(c, width/2, 0);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/rockies.jpg");
- * }
- * function setup() {
- * image(img, 0, 0);
- * var c = get(50, 90);
- * fill(c);
- * noStroke();
- * rect(25, 25, 50, 50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * 2 images of the rocky mountains, side-by-side
- * Image of the rocky mountains with 50x50 green rect in center of canvas
- *
- */
- p5.prototype.get = function(x, y, w, h){
- return this._renderer.get(x, y, w, h);
- };
-
- /**
- * Loads the pixel data for the display window into the pixels[] array. This
- * function must always be called before reading from or writing to pixels[].
- *
- * @method loadPixels
- * @example
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * image(img, 0, 0);
- * var d = pixelDensity();
- * var halfImage = 4 * (img.width * d) *
- (img.height/2 * d);
- * loadPixels();
- * for (var i = 0; i < halfImage; i++) {
- * pixels[i+halfImage] = pixels[i];
- * }
- * updatePixels();
- * }
- * </code>
- * </div>
- *
- * @alt
- * two images of the rocky mountains. one on top, one on bottom of canvas.
- *
- */
- p5.prototype.loadPixels = function() {
- this._renderer.loadPixels();
- };
-
- /**
- * <p>Changes the color of any pixel, or writes an image directly to the
- * display window.</p>
- * <p>The x and y parameters specify the pixel to change and the c parameter
- * specifies the color value. This can be a p5.Color object, or [R, G, B, A]
- * pixel array. It can also be a single grayscale value.
- * When setting an image, the x and y parameters define the coordinates for
- * the upper-left corner of the image, regardless of the current imageMode().
- * </p>
- * <p>
- * After using set(), you must call updatePixels() for your changes to
- * appear. This should be called once all pixels have been set.
- * </p>
- * <p>Setting the color of a single pixel with set(x, y) is easy, but not as
- * fast as putting the data directly into pixels[]. Setting the pixels[]
- * values directly may be complicated when working with a retina display,
- * but will perform better when lots of pixels need to be set directly on
- * every loop.</p>
- * <p>See the reference for pixels[] for more information.</p>
- *
- * @method set
- * @param {Number} x x-coordinate of the pixel
- * @param {Number} y y-coordinate of the pixel
- * @param {Number|Array|Object} c insert a grayscale value | a pixel array |
- * a p5.Color object | a p5.Image to copy
- * @example
- * <div>
- * <code>
- * var black = color(0);
- * set(30, 20, black);
- * set(85, 20, black);
- * set(85, 75, black);
- * set(30, 75, black);
- * updatePixels();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * for (var i = 30; i < width-15; i++) {
- * for (var j = 20; j < height-25; j++) {
- * var c = color(204-j, 153-i, 0);
- * set(i, j, c);
- * }
- * }
- * updatePixels();
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * set(0, 0, img);
- * updatePixels();
- * line(0, 0, width, height);
- * line(0, height, width, 0);
- * }
- * </code>
- * </div>
- *
- * @alt
- * 4 black points in the shape of a square middle-right of canvas.
- * square with orangey-brown gradient lightening at bottom right.
- * image of the rocky mountains. with lines like an 'x' through the center.
- */
- p5.prototype.set = function (x, y, imgOrCol) {
- this._renderer.set(x, y, imgOrCol);
- };
- /**
- * Updates the display window with the data in the pixels[] array.
- * Use in conjunction with loadPixels(). If you're only reading pixels from
- * the array, there's no need to call updatePixels() — updating is only
- * necessary to apply changes. updatePixels() should be called anytime the
- * pixels array is manipulated or set() is called.
- *
- * @method updatePixels
- * @param {Number} [x] x-coordinate of the upper-left corner of region
- * to update
- * @param {Number} [y] y-coordinate of the upper-left corner of region
- * to update
- * @param {Number} [w] width of region to update
- * @param {Number} [w] height of region to update
- * @example
- * <div>
- * <code>
- * var img;
- * function preload() {
- * img = loadImage("assets/rockies.jpg");
- * }
- *
- * function setup() {
- * image(img, 0, 0);
- * var halfImage = 4 * (img.width * pixelDensity()) *
- * (img.height * pixelDensity()/2);
- * loadPixels();
- * for (var i = 0; i < halfImage; i++) {
- * pixels[i+halfImage] = pixels[i];
- * }
- * updatePixels();
- * }
- * </code>
- * </div>
- * @alt
- * two images of the rocky mountains. one on top, one on bottom of canvas.
- */
- p5.prototype.updatePixels = function (x, y, w, h) {
- // graceful fail - if loadPixels() or set() has not been called, pixel
- // array will be empty, ignore call to updatePixels()
- if (this.pixels.length === 0) {
- return;
- }
- this._renderer.updatePixels(x, y, w, h);
- };
-
- module.exports = p5;
-
- },{"../color/p5.Color":31,"../core/core":37,"./filters":54}],59:[function(_dereq_,module,exports){
- /**
- * @module IO
- * @submodule Input
- * @for p5
- * @requires core
- * @requires reqwest
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var reqwest = _dereq_('reqwest');
- var opentype = _dereq_('opentype.js');
- _dereq_('../core/error_helpers');
-
- /**
- * Checks if we are in preload and returns the last arg which will be the
- * _decrementPreload function if called from a loadX() function. Should
- * only be used in loadX() functions.
- * @private
- */
- p5._getDecrementPreload = function () {
- var decrementPreload = arguments[arguments.length - 1];
-
- // when in preload decrementPreload will always be the last arg as it is set
- // with args.push() before invocation in _wrapPreload
- if ((window.preload || (this && this.preload)) &&
- typeof decrementPreload === 'function') {
- return decrementPreload;
- } else {
- return null;
- }
- };
-
- /**
- * Loads an opentype font file (.otf, .ttf) from a file or a URL,
- * and returns a PFont Object. This method is asynchronous,
- * meaning it may not finish before the next line in your sketch
- * is executed.
- * <br><br>
- * The path to the font should be relative to the HTML file
- * that links in your sketch. Loading an from a URL or other
- * remote location may be blocked due to your browser's built-in
- * security.
- *
- * @method loadFont
- * @param {String} path name of the file or url to load
- * @param {Function} [callback] function to be executed after
- * loadFont()
- * completes
- * @return {Object} p5.Font object
- * @example
- *
- * <p>Calling loadFont() inside preload() guarantees that the load
- * operation will have completed before setup() and draw() are called.</p>
- *
- * <div><code>
- * var myFont;
- * function preload() {
- * myFont = loadFont('assets/AvenirNextLTPro-Demi.otf');
- * }
- *
- * function setup() {
- * fill('#ED225D');
- * textFont(myFont);
- * textSize(36);
- * text('p5*js', 10, 50);
- * }
- * </code></div>
- *
- * Outside of preload(), you may supply a callback function to handle the
- * object:
- *
- * <div><code>
- * function setup() {
- * loadFont('assets/AvenirNextLTPro-Demi.otf', drawText);
- * }
- *
- * function drawText(font) {
- * fill('#ED225D');
- * textFont(font, 36);
- * text('p5*js', 10, 50);
- * }
- *
- * </code></div>
- *
- * <p>You can also use the string name of the font to style other HTML
- * elements.</p>
- *
- * <div><code>
- * var myFont;
- *
- * function preload() {
- * myFont = loadFont('assets/Avenir.otf');
- * }
- *
- * function setup() {
- * var myDiv = createDiv('hello there');
- * myDiv.style('font-family', 'Avenir');
- * }
- * </code></div>
- *
- * @alt
- * p5*js in p5's theme dark pink
- * p5*js in p5's theme dark pink
- *
- */
- p5.prototype.loadFont = function (path, onSuccess, onError) {
-
- var p5Font = new p5.Font(this);
- var decrementPreload = p5._getDecrementPreload.apply(this, arguments);
-
- opentype.load(path, function (err, font) {
-
- if (err) {
-
- if ((typeof onError !== 'undefined') && (onError !== decrementPreload)) {
- return onError(err);
- }
- p5._friendlyFileLoadError(4, path);
- console.error(err, path);
- return;
- }
-
- p5Font.font = font;
-
- if (typeof onSuccess !== 'undefined') {
- onSuccess(p5Font);
- }
-
- if (decrementPreload && (onSuccess !== decrementPreload)) {
- decrementPreload();
- }
-
- // check that we have an acceptable font type
- var validFontTypes = [ 'ttf', 'otf', 'woff', 'woff2' ],
- fileNoPath = path.split('\\').pop().split('/').pop(),
- lastDotIdx = fileNoPath.lastIndexOf('.'), fontFamily, newStyle,
- fileExt = lastDotIdx < 1 ? null : fileNoPath.substr(lastDotIdx + 1);
-
- // if so, add it to the DOM (name-only) for use with p5.dom
- if (validFontTypes.indexOf(fileExt) > -1) {
-
- fontFamily = fileNoPath.substr(0, lastDotIdx);
- newStyle = document.createElement('style');
- newStyle.appendChild(document.createTextNode('\n@font-face {' +
- '\nfont-family: ' + fontFamily + ';\nsrc: url(' + path + ');\n}\n'));
- document.head.appendChild(newStyle);
- }
-
- });
-
- return p5Font;
- };
-
- //BufferedReader
- p5.prototype.createInput = function () {
- // TODO
- throw 'not yet implemented';
- };
-
- p5.prototype.createReader = function () {
- // TODO
- throw 'not yet implemented';
- };
-
- p5.prototype.loadBytes = function () {
- // TODO
- throw 'not yet implemented';
- };
-
- /**
- * Loads a JSON file from a file or a URL, and returns an Object or Array.
- * This method is asynchronous, meaning it may not finish before the next
- * line in your sketch is executed.
- *
- * @method loadJSON
- * @param {String} path name of the file or url to load
- * @param {Function} [callback] function to be executed after
- * loadJSON() completes, data is passed
- * in as first argument
- * @param {Function} [errorCallback] function to be executed if
- * there is an error, response is passed
- * in as first argument
- * @param {String} [datatype] "json" or "jsonp"
- * @return {Object|Array} JSON data
- * @example
- *
- * <p>Calling loadJSON() inside preload() guarantees to complete the
- * operation before setup() and draw() are called.</p>
- *
- * <div><code>
- * var weather;
- * function preload() {
- * var url = 'http://api.openweathermap.org/data/2.5/weather?q=London,UK'+
- * '&APPID=7bbbb47522848e8b9c26ba35c226c734';
- * weather = loadJSON(url);
- * }
- *
- * function setup() {
- * noLoop();
- * }
- *
- * function draw() {
- * background(200);
- * // get the humidity value out of the loaded JSON
- * var humidity = weather.main.humidity;
- * fill(0, humidity); // use the humidity value to set the alpha
- * ellipse(width/2, height/2, 50, 50);
- * }
- * </code></div>
- *
- *
- * <p>Outside of preload(), you may supply a callback function to handle the
- * object:</p>
- * <div><code>
- * function setup() {
- * noLoop();
- * var url = 'http://api.openweathermap.org/data/2.5/weather?q=NewYork'+
- * '&APPID=7bbbb47522848e8b9c26ba35c226c734';
- * loadJSON(url, drawWeather);
- * }
- *
- * function draw() {
- * background(200);
- * }
- *
- * function drawWeather(weather) {
- * // get the humidity value out of the loaded JSON
- * var humidity = weather.main.humidity;
- * fill(0, humidity); // use the humidity value to set the alpha
- * ellipse(width/2, height/2, 50, 50);
- * }
- * </code></div>
- *
- * @alt
- * 50x50 ellipse that changes from black to white depending on the current humidity
- * 50x50 ellipse that changes from black to white depending on the current humidity
- *
- */
- p5.prototype.loadJSON = function () {
- var path = arguments[0];
- var callback = arguments[1];
- var errorCallback;
- var decrementPreload = p5._getDecrementPreload.apply(this, arguments);
-
- var ret = {}; // object needed for preload
- // assume jsonp for URLs
- var t = 'json'; //= path.indexOf('http') === -1 ? 'json' : 'jsonp';
-
- // check for explicit data type argument
- for (var i = 2; i < arguments.length; i++) {
- var arg = arguments[i];
- if (typeof arg === 'string') {
- if (arg === 'jsonp' || arg === 'json') {
- t = arg;
- }
- } else if (typeof arg === 'function') {
- errorCallback = arg;
- }
- }
-
- reqwest({
- url: path,
- type: t,
- crossOrigin: true,
- error: function (resp) {
- // pass to error callback if defined
- if (errorCallback) {
- errorCallback(resp);
- } else { // otherwise log error msg
- console.log(resp.statusText);
- }
- },
- success: function (resp) {
- for (var k in resp) {
- ret[k] = resp[k];
- }
- if (typeof callback !== 'undefined') {
- callback(resp);
- }
- if (decrementPreload && (callback !== decrementPreload)) {
- decrementPreload();
- }
- }
- });
-
- return ret;
- };
-
- /**
- * Reads the contents of a file and creates a String array of its individual
- * lines. If the name of the file is used as the parameter, as in the above
- * example, the file must be located in the sketch directory/folder.
- * <br><br>
- * Alternatively, the file maybe be loaded from anywhere on the local
- * computer using an absolute path (something that starts with / on Unix and
- * Linux, or a drive letter on Windows), or the filename parameter can be a
- * URL for a file found on a network.
- * <br><br>
- * This method is asynchronous, meaning it may not finish before the next
- * line in your sketch is executed.
- *
- * @method loadStrings
- * @param {String} filename name of the file or url to load
- * @param {Function} [callback] function to be executed after loadStrings()
- * completes, Array is passed in as first
- * argument
- * @param {Function} [errorCallback] function to be executed if
- * there is an error, response is passed
- * in as first argument
- * @return {Array} Array of Strings
- * @example
- *
- * <p>Calling loadStrings() inside preload() guarantees to complete the
- * operation before setup() and draw() are called.</p>
- *
- * <div><code>
- * var result;
- * function preload() {
- * result = loadStrings('assets/test.txt');
- * }
-
- * function setup() {
- * background(200);
- * var ind = floor(random(result.length));
- * text(result[ind], 10, 10, 80, 80);
- * }
- * </code></div>
- *
- * <p>Outside of preload(), you may supply a callback function to handle the
- * object:</p>
- *
- * <div><code>
- * function setup() {
- * loadStrings('assets/test.txt', pickString);
- * }
- *
- * function pickString(result) {
- * background(200);
- * var ind = floor(random(result.length));
- * text(result[ind], 10, 10, 80, 80);
- * }
- * </code></div>
- *
- * @alt
- * randomly generated text from a file, for example "i smell like butter"
- * randomly generated text from a file, for example "i have three feet"
- *
- */
- p5.prototype.loadStrings = function (path, callback, errorCallback) {
- var ret = [];
- var req = new XMLHttpRequest();
- var decrementPreload = p5._getDecrementPreload.apply(this, arguments);
-
- req.addEventListener('error', function (resp) {
- if (errorCallback) {
- errorCallback(resp);
- } else {
- console.log(resp.responseText);
- }
- });
-
- req.open('GET', path, true);
- req.onreadystatechange = function () {
- if (req.readyState === 4) {
- if (req.status === 200) {
- var arr = req.responseText.match(/[^\r\n]+/g);
- for (var k in arr) {
- ret[k] = arr[k];
- }
- if (typeof callback !== 'undefined') {
- callback(ret);
- }
- if (decrementPreload && (callback !== decrementPreload)) {
- decrementPreload();
- }
- } else {
- if (errorCallback) {
- errorCallback(req);
- } else {
- console.log(req.statusText);
- }
- //p5._friendlyFileLoadError(3, path);
- }
- }
- };
- req.send(null);
- return ret;
- };
-
- /**
- * <p>Reads the contents of a file or URL and creates a p5.Table object with
- * its values. If a file is specified, it must be located in the sketch's
- * "data" folder. The filename parameter can also be a URL to a file found
- * online. By default, the file is assumed to be comma-separated (in CSV
- * format). Table only looks for a header row if the 'header' option is
- * included.</p>
- *
- * <p>Possible options include:
- * <ul>
- * <li>csv - parse the table as comma-separated values</li>
- * <li>tsv - parse the table as tab-separated values</li>
- * <li>header - this table has a header (title) row</li>
- * </ul>
- * </p>
- *
- * <p>When passing in multiple options, pass them in as separate parameters,
- * seperated by commas. For example:
- * <br><br>
- * <code>
- * loadTable("my_csv_file.csv", "csv", "header")
- * </code>
- * </p>
- *
- * <p> All files loaded and saved use UTF-8 encoding.</p>
- *
- * <p>This method is asynchronous, meaning it may not finish before the next
- * line in your sketch is executed. Calling loadTable() inside preload()
- * guarantees to complete the operation before setup() and draw() are called.
- * <p>Outside of preload(), you may supply a callback function to handle the
- * object:</p>
- * </p>
- *
- * @method loadTable
- * @param {String} filename name of the file or URL to load
- * @param {String|Strings} [options] "header" "csv" "tsv"
- * @param {Function} [callback] function to be executed after
- * loadTable() completes. On success, the
- * Table object is passed in as the
- * first argument; otherwise, false
- * is passed in.
- * @return {Object} Table object containing data
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the following CSV file called "mammals.csv"
- * // located in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * //the file can be remote
- * //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
- * // "csv", "header");
- * }
- *
- * function setup() {
- * //count the columns
- * print(table.getRowCount() + " total rows in table");
- * print(table.getColumnCount() + " total columns in table");
- *
- * print(table.getColumn("name"));
- * //["Goat", "Leopard", "Zebra"]
- *
- * //cycle through the table
- * for (var r = 0; r < table.getRowCount(); r++)
- * for (var c = 0; c < table.getColumnCount(); c++) {
- * print(table.getString(r, c));
- * }
- * }
- * </code>
- * </div>
- *
- * @alt
- * randomly generated text from a file, for example "i smell like butter"
- * randomly generated text from a file, for example "i have three feet"
- *
- */
- p5.prototype.loadTable = function (path) {
- var callback = null;
- var options = [];
- var header = false;
- var sep = ',';
- var separatorSet = false;
- var decrementPreload = p5._getDecrementPreload.apply(this, arguments);
-
- for (var i = 1; i < arguments.length; i++) {
- if ((typeof (arguments[i]) === 'function') &&
- (arguments[i] !== decrementPreload)) {
- callback = arguments[i];
- } else if (typeof (arguments[i]) === 'string') {
- options.push(arguments[i]);
- if (arguments[i] === 'header') {
- header = true;
- }
- if (arguments[i] === 'csv') {
- if (separatorSet) {
- throw new Error('Cannot set multiple separator types.');
- } else {
- sep = ',';
- separatorSet = true;
- }
- } else if (arguments[i] === 'tsv') {
- if (separatorSet) {
- throw new Error('Cannot set multiple separator types.');
- } else {
- sep = '\t';
- separatorSet = true;
- }
- }
- }
- }
-
- var t = new p5.Table();
- reqwest({
- url: path,
- crossOrigin: true,
- type: 'csv'
- })
- .then(function (resp) {
- resp = resp.responseText;
-
- var state = {};
-
- // define constants
- var PRE_TOKEN = 0,
- MID_TOKEN = 1,
- POST_TOKEN = 2,
- POST_RECORD = 4;
-
- var QUOTE = '\"',
- CR = '\r',
- LF = '\n';
-
- var records = [];
- var offset = 0;
- var currentRecord = null;
- var currentChar;
-
- var recordBegin = function () {
- state.escaped = false;
- currentRecord = [];
- tokenBegin();
- };
-
- var recordEnd = function () {
- state.currentState = POST_RECORD;
- records.push(currentRecord);
- currentRecord = null;
- };
-
- var tokenBegin = function () {
- state.currentState = PRE_TOKEN;
- state.token = '';
- };
-
- var tokenEnd = function () {
- currentRecord.push(state.token);
- tokenBegin();
- };
-
- while (true) {
- currentChar = resp[offset++];
-
- // EOF
- if (currentChar == null) {
- if (state.escaped) {
- throw new Error('Unclosed quote in file.');
- }
- if (currentRecord) {
- tokenEnd();
- recordEnd();
- break;
- }
- }
- if (currentRecord === null) {
- recordBegin();
- }
-
- // Handle opening quote
- if (state.currentState === PRE_TOKEN) {
- if (currentChar === QUOTE) {
- state.escaped = true;
- state.currentState = MID_TOKEN;
- continue;
- }
- state.currentState = MID_TOKEN;
- }
-
- // mid-token and escaped, look for sequences and end quote
- if (state.currentState === MID_TOKEN && state.escaped) {
- if (currentChar === QUOTE) {
- if (resp[offset] === QUOTE) {
- state.token += QUOTE;
- offset++;
- } else {
- state.escaped = false;
- state.currentState = POST_TOKEN;
- }
- } else {
- state.token += currentChar;
- }
- continue;
- }
-
- // fall-through: mid-token or post-token, not escaped
- if (currentChar === CR) {
- if (resp[offset] === LF) {
- offset++;
- }
- tokenEnd();
- recordEnd();
- } else if (currentChar === LF) {
- tokenEnd();
- recordEnd();
- } else if (currentChar === sep) {
- tokenEnd();
- } else if (state.currentState === MID_TOKEN) {
- state.token += currentChar;
- }
- }
-
- // set up column names
- if (header) {
- t.columns = records.shift();
- } else {
- for (i = 0; i < records[0].length; i++) {
- t.columns[i] = 'null';
- }
- }
- var row;
- for (i = 0; i < records.length; i++) {
- //Handles row of 'undefined' at end of some CSVs
- if (i === records.length - 1 && records[i].length === 1) {
- if (records[i][0] === 'undefined') {
- break;
- }
- }
- row = new p5.TableRow();
- row.arr = records[i];
- row.obj = makeObject(records[i], t.columns);
- t.addRow(row);
- }
- if (callback !== null) {
- callback(t);
- }
- if (decrementPreload && (callback !== decrementPreload)) {
- decrementPreload();
- }
- })
- .fail(function (err, msg) {
- p5._friendlyFileLoadError(2, path);
- // don't get error callback mixed up with decrementPreload
- if ((typeof callback === 'function') &&
- (callback !== decrementPreload)) {
- callback(false);
- }
- });
-
- return t;
- };
-
- // helper function to turn a row into a JSON object
- function makeObject(row, headers) {
- var ret = {};
- headers = headers || [];
- if (typeof (headers) === 'undefined') {
- for (var j = 0; j < row.length; j++) {
- headers[j.toString()] = j;
- }
- }
- for (var i = 0; i < headers.length; i++) {
- var key = headers[i];
- var val = row[i];
- ret[key] = val;
- }
- return ret;
- }
-
- /*global parseXML */
- p5.prototype.parseXML = function (two) {
- var one = new p5.XML();
- var i;
- if (two.children.length) {
- for ( i = 0; i < two.children.length; i++ ) {
- var node = parseXML(two.children[i]);
- one.addChild(node);
- }
- one.setName(two.nodeName);
- one._setCont(two.textContent);
- one._setAttributes(two);
- for (var j = 0; j < one.children.length; j++) {
- one.children[j].parent = one;
- }
- return one;
- }
- else {
- one.setName(two.nodeName);
- one._setCont(two.textContent);
- one._setAttributes(two);
- return one;
- }
- };
-
- /**
- * Reads the contents of a file and creates an XML object with its values.
- * If the name of the file is used as the parameter, as in the above example,
- * the file must be located in the sketch directory/folder.
- *
- * Alternatively, the file maybe be loaded from anywhere on the local
- * computer using an absolute path (something that starts with / on Unix and
- * Linux, or a drive letter on Windows), or the filename parameter can be a
- * URL for a file found on a network.
- *
- * This method is asynchronous, meaning it may not finish before the next
- * line in your sketch is executed. Calling loadXML() inside preload()
- * guarantees to complete the operation before setup() and draw() are called.
- *
- * <p>Outside of preload(), you may supply a callback function to handle the
- * object:</p>
- *
- * @method loadXML
- * @param {String} filename name of the file or URL to load
- * @param {Function} [callback] function to be executed after loadXML()
- * completes, XML object is passed in as
- * first argument
- * @param {Function} [errorCallback] function to be executed if
- * there is an error, response is passed
- * in as first argument
- * @return {Object} XML object containing data
- */
- p5.prototype.loadXML = function (path, callback, errorCallback) {
- var ret = {};
- var decrementPreload = p5._getDecrementPreload.apply(this, arguments);
- reqwest({
- url: path,
- type: 'xml',
- crossOrigin: true,
- error: function (resp) {
- // pass to error callback if defined
- if (errorCallback) {
- errorCallback(resp);
- } else { // otherwise log error msg
- console.log(resp.statusText);
- }
- //p5._friendlyFileLoadError(1,path);
- }
- })
- .then(function (resp) {
- var xml = parseXML(resp.documentElement);
- for(var key in xml) {
- ret[key] = xml[key];
- }
- if (typeof callback !== 'undefined') {
- callback(ret);
- }
- if (decrementPreload && (callback !== decrementPreload)) {
- decrementPreload();
- }
- });
- return ret;
- };
-
- // name clash with window.open
- // p5.prototype.open = function() {
- // // TODO
-
- // };
-
- p5.prototype.selectFolder = function () {
- // TODO
- throw 'not yet implemented';
-
- };
-
- p5.prototype.selectInput = function () {
- // TODO
- throw 'not yet implemented';
-
- };
-
- /**
- * Method for executing an HTTP GET request. If data type is not specified,
- * p5 will try to guess based on the URL, defaulting to text.
- *
- * @method httpGet
- * @param {String} path name of the file or url to load
- * @param {Object} [data] param data passed sent with request
- * @param {String} [datatype] "json", "jsonp", "xml", or "text"
- * @param {Function} [callback] function to be executed after
- * httpGet() completes, data is passed in
- * as first argument
- * @param {Function} [errorCallback] function to be executed if
- * there is an error, response is passed
- * in as first argument
- */
- p5.prototype.httpGet = function () {
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- args.push('GET');
- p5.prototype.httpDo.apply(this, args);
- };
-
- /**
- * Method for executing an HTTP POST request. If data type is not specified,
- * p5 will try to guess based on the URL, defaulting to text.
- *
- * @method httpPost
- * @param {String} path name of the file or url to load
- * @param {Object} [data] param data passed sent with request
- * @param {String} [datatype] "json", "jsonp", "xml", or "text"
- * @param {Function} [callback] function to be executed after
- * httpGet() completes, data is passed in
- * as first argument
- * @param {Function} [errorCallback] function to be executed if
- * there is an error, response is passed
- * in as first argument
- */
- p5.prototype.httpPost = function () {
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- args.push('POST');
- p5.prototype.httpDo.apply(this, args);
- };
-
- /**
- * Method for executing an HTTP request. If data type is not specified,
- * p5 will try to guess based on the URL, defaulting to text.<br><br>
- * You may also pass a single object specifying all parameters for the
- * request following the examples inside the reqwest() calls here:
- * <a href='https://github.com/ded/reqwest#api'>
- * https://github.com/ded/reqwest#api</a>
- *
- * @method httpDo
- * @param {String} path name of the file or url to load
- * @param {String} [method] either "GET", "POST", or "PUT",
- * defaults to "GET"
- * @param {Object} [data] param data passed sent with request
- * @param {String} [datatype] "json", "jsonp", "xml", or "text"
- * @param {Function} [callback] function to be executed after
- * httpGet() completes, data is passed in
- * as first argument
- * @param {Function} [errorCallback] function to be executed if
- * there is an error, response is passed
- * in as first argument
- */
- p5.prototype.httpDo = function () {
- if (typeof arguments[0] === 'object') {
- reqwest(arguments[0]);
- } else {
- var method = 'GET';
- var path = arguments[0];
- var data = {};
- var type = '';
- var callback;
- var errorCallback;
-
- for (var i = 1; i < arguments.length; i++) {
- var a = arguments[i];
- if (typeof a === 'string') {
- if (a === 'GET' || a === 'POST' || a === 'PUT' || a === 'DELETE') {
- method = a;
- } else {
- type = a;
- }
- } else if (typeof a === 'object') {
- data = a;
- } else if (typeof a === 'function') {
- if (!callback) {
- callback = a;
- } else {
- errorCallback = a;
- }
- }
- }
-
- // do some sort of smart type checking
- if (type === '') {
- if (path.indexOf('json') !== -1) {
- type = 'json';
- } else if (path.indexOf('xml') !== -1) {
- type = 'xml';
- } else {
- type = 'text';
- }
- }
-
- reqwest({
- url: path,
- method: method,
- data: data,
- type: type,
- crossOrigin: true,
- success: function (resp) {
- if (typeof callback !== 'undefined') {
- if (type === 'text') {
- callback(resp.response);
- } else {
- callback(resp);
- }
- }
- },
- error: function (resp) {
- if (errorCallback) {
- errorCallback(resp);
- } else {
- console.log(resp.statusText);
- }
- }
- });
- }
- };
-
- /**
- * @module IO
- * @submodule Output
- * @for p5
- */
-
- window.URL = window.URL || window.webkitURL;
-
- // private array of p5.PrintWriter objects
- p5.prototype._pWriters = [];
-
- p5.prototype.beginRaw = function () {
- // TODO
- throw 'not yet implemented';
-
- };
-
- p5.prototype.beginRecord = function () {
- // TODO
- throw 'not yet implemented';
-
- };
-
- p5.prototype.createOutput = function () {
- // TODO
-
- throw 'not yet implemented';
- };
-
- p5.prototype.createWriter = function (name, extension) {
- var newPW;
- // check that it doesn't already exist
- for (var i in p5.prototype._pWriters) {
- if (p5.prototype._pWriters[i].name === name) {
- // if a p5.PrintWriter w/ this name already exists...
- // return p5.prototype._pWriters[i]; // return it w/ contents intact.
- // or, could return a new, empty one with a unique name:
- newPW = new p5.PrintWriter(name + window.millis(), extension);
- p5.prototype._pWriters.push(newPW);
- return newPW;
- }
- }
- newPW = new p5.PrintWriter(name, extension);
- p5.prototype._pWriters.push(newPW);
- return newPW;
- };
-
- p5.prototype.endRaw = function () {
- // TODO
-
- throw 'not yet implemented';
- };
-
- p5.prototype.endRecord = function () {
- // TODO
- throw 'not yet implemented';
-
- };
-
- p5.PrintWriter = function (filename, extension) {
- var self = this;
- this.name = filename;
- this.content = '';
- this.print = function (data) {
- this.content += data;
- };
- this.print = function (data) {
- this.content += data + '\n';
- };
- this.flush = function () {
- this.content = '';
- };
- this.close = function () {
- // convert String to Array for the writeFile Blob
- var arr = [];
- arr.push(this.content);
- p5.prototype.writeFile(arr, filename, extension);
- // remove from _pWriters array and delete self
- for (var i in p5.prototype._pWriters) {
- if (p5.prototype._pWriters[i].name === this.name) {
- // remove from _pWriters array
- p5.prototype._pWriters.splice(i, 1);
- }
- }
- self.flush();
- self = {};
- };
- };
-
- p5.prototype.saveBytes = function () {
- // TODO
- throw 'not yet implemented';
-
- };
-
- // object, filename, options --> saveJSON, saveStrings, saveTable
- // filename, [extension] [canvas] --> saveImage
-
- /**
- * <p>Save an image, text, json, csv, wav, or html. Prompts download to
- * the client's computer. <b>Note that it is not recommended to call save()
- * within draw if it's looping, as the save() function will open a new save
- * dialog every frame.</b></p>
- * <p>The default behavior is to save the canvas as an image. You can
- * optionally specify a filename.
- * For example:</p>
- * <pre class='language-javascript'><code>
- * save();
- * save('myCanvas.jpg'); // save a specific canvas with a filename
- * </code></pre>
- *
- * <p>Alternately, the first parameter can be a pointer to a canvas
- * p5.Element, an Array of Strings,
- * an Array of JSON, a JSON object, a p5.Table, a p5.Image, or a
- * p5.SoundFile (requires p5.sound). The second parameter is a filename
- * (including extension). The third parameter is for options specific
- * to this type of object. This method will save a file that fits the
- * given paramaters. For example:</p>
- *
- * <pre class='language-javascript'><code>
- *
- * save('myCanvas.jpg'); // Saves canvas as an image
- *
- * var cnv = createCanvas(100, 100);
- * save(cnv, 'myCanvas.jpg'); // Saves canvas as an image
- *
- * var gb = createGraphics(100, 100);
- * save(gb, 'myGraphics.jpg'); // Saves p5.Renderer object as an image
- *
- * save(myTable, 'myTable.html'); // Saves table as html file
- * save(myTable, 'myTable.csv',); // Comma Separated Values
- * save(myTable, 'myTable.tsv'); // Tab Separated Values
- *
- * save(myJSON, 'my.json'); // Saves pretty JSON
- * save(myJSON, 'my.json', true); // Optimizes JSON filesize
- *
- * save(img, 'my.png'); // Saves pImage as a png image
- *
- * save(arrayOfStrings, 'my.txt'); // Saves strings to a text file with line
- * // breaks after each item in the array
- * </code></pre>
- *
- * @method save
- * @param {[Object|String]} objectOrFilename If filename is provided, will
- * save canvas as an image with
- * either png or jpg extension
- * depending on the filename.
- * If object is provided, will
- * save depending on the object
- * and filename (see examples
- * above).
- * @param {[String]} filename If an object is provided as the first
- * parameter, then the second parameter
- * indicates the filename,
- * and should include an appropriate
- * file extension (see examples above).
- * @param {[Boolean/String]} options Additional options depend on
- * filetype. For example, when saving JSON,
- * <code>true</code> indicates that the
- * output will be optimized for filesize,
- * rather than readability.
- */
- p5.prototype.save = function (object, _filename, _options) {
- // parse the arguments and figure out which things we are saving
- var args = arguments;
- // =================================================
- // OPTION 1: saveCanvas...
-
- // if no arguments are provided, save canvas
- var cnv = this._curElement.elt;
- if (args.length === 0) {
- p5.prototype.saveCanvas(cnv);
- return;
- }
- // otherwise, parse the arguments
-
- // if first param is a p5Graphics, then saveCanvas
- else if (args[0] instanceof p5.Renderer ||
- args[0] instanceof p5.Graphics) {
- p5.prototype.saveCanvas(args[0].elt, args[1], args[2]);
- return;
- }
-
- // if 1st param is String and only one arg, assume it is canvas filename
- else if (args.length === 1 && typeof (args[0]) === 'string') {
- p5.prototype.saveCanvas(cnv, args[0]);
- }
-
- // =================================================
- // OPTION 2: extension clarifies saveStrings vs. saveJSON
- else {
- var extension = _checkFileExtension(args[1], args[2])[1];
- switch (extension) {
- case 'json':
- p5.prototype.saveJSON(args[0], args[1], args[2]);
- return;
- case 'txt':
- p5.prototype.saveStrings(args[0], args[1], args[2]);
- return;
- // =================================================
- // OPTION 3: decide based on object...
- default:
- if (args[0] instanceof Array) {
- p5.prototype.saveStrings(args[0], args[1], args[2]);
- } else if (args[0] instanceof p5.Table) {
- p5.prototype.saveTable(args[0], args[1], args[2], args[3]);
- } else if (args[0] instanceof p5.Image) {
- p5.prototype.saveCanvas(args[0].canvas, args[1]);
- } else if (args[0] instanceof p5.SoundFile) {
- p5.prototype.saveSound(args[0], args[1], args[2], args[3]);
- }
- }
- }
- };
-
- /**
- * Writes the contents of an Array or a JSON object to a .json file.
- * The file saving process and location of the saved file will
- * vary between web browsers.
- *
- * @method saveJSON
- * @param {Array|Object} json
- * @param {String} filename
- * @param {Boolean} [optimize] If true, removes line breaks
- * and spaces from the output
- * file to optimize filesize
- * (but not readability).
- * @example
- * <div><code>
- * var json;
- *
- * function setup() {
- *
- * json = {}; // new JSON Object
- *
- * json.id = 0;
- * json.species = 'Panthera leo';
- * json.name = 'Lion';
- *
- * // To save, un-comment the line below, then click 'run'
- * // saveJSON(json, 'lion.json');
- * }
- *
- * // Saves the following to a file called "lion.json":
- * // {
- * // "id": 0,
- * // "species": "Panthera leo",
- * // "name": "Lion"
- * // }
- * </div></code>
- *
- * @alt
- * no image displayed
- *
- */
- p5.prototype.saveJSON = function (json, filename, opt) {
- var stringify;
- if (opt) {
- stringify = JSON.stringify(json);
- } else {
- stringify = JSON.stringify(json, undefined, 2);
- }
- console.log(stringify);
- this.saveStrings(stringify.split('\n'), filename, 'json');
- };
-
- p5.prototype.saveJSONObject = p5.prototype.saveJSON;
- p5.prototype.saveJSONArray = p5.prototype.saveJSON;
-
- p5.prototype.saveStream = function () {
- // TODO
- throw 'not yet implemented';
-
- };
-
- /**
- * Writes an array of Strings to a text file, one line per String.
- * The file saving process and location of the saved file will
- * vary between web browsers.
- *
- * @method saveStrings
- * @param {Array} list string array to be written
- * @param {String} filename filename for output
- * @example
- * <div><code>
- * var words = 'apple bear cat dog';
- *
- * // .split() outputs an Array
- * var list = split(words, ' ');
- *
- * // To save the file, un-comment next line and click 'run'
- * // saveStrings(list, 'nouns.txt');
- *
- * // Saves the following to a file called 'nouns.txt':
- * //
- * // apple
- * // bear
- * // cat
- * // dog
- * </code></div>
- *
- * @alt
- * no image displayed
- *
- */
- p5.prototype.saveStrings = function (list, filename, extension) {
- var ext = extension || 'txt';
- var pWriter = this.createWriter(filename, ext);
- for (var i = 0; i < list.length; i++) {
- if (i < list.length - 1) {
- pWriter.print(list[i]);
- } else {
- pWriter.print(list[i]);
- }
- }
- pWriter.close();
- pWriter.flush();
- };
-
- p5.prototype.saveXML = function () {
- // TODO
- throw 'not yet implemented';
-
- };
-
- p5.prototype.selectOutput = function () {
- // TODO
- throw 'not yet implemented';
-
- };
-
- // =======
- // HELPERS
- // =======
-
- function escapeHelper(content) {
- return content
- .replace(/&/g, '&')
- .replace(/</g, '<')
- .replace(/>/g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
- }
-
- /**
- * Writes the contents of a Table object to a file. Defaults to a
- * text file with comma-separated-values ('csv') but can also
- * use tab separation ('tsv'), or generate an HTML table ('html').
- * The file saving process and location of the saved file will
- * vary between web browsers.
- *
- * @method saveTable
- * @param {p5.Table} Table the Table object to save to a file
- * @param {String} filename the filename to which the Table should be saved
- * @param {String} [options] can be one of "tsv", "csv", or "html"
- * @example
- * <div><code>
- * var table;
- *
- * function setup() {
- * table = new p5.Table();
- *
- * table.addColumn('id');
- * table.addColumn('species');
- * table.addColumn('name');
- *
- * var newRow = table.addRow();
- * newRow.setNum('id', table.getRowCount() - 1);
- * newRow.setString('species', 'Panthera leo');
- * newRow.setString('name', 'Lion');
- *
- * // To save, un-comment next line then click 'run'
- * // saveTable(table, 'new.csv');
- * }
- *
- * // Saves the following to a file called 'new.csv':
- * // id,species,name
- * // 0,Panthera leo,Lion
- * </code></div>
- *
- * @alt
- * no image displayed
- *
- */
- p5.prototype.saveTable = function (table, filename, options) {
- var pWriter = this.createWriter(filename, options);
-
- var header = table.columns;
-
- var sep = ','; // default to CSV
- if (options === 'tsv') {
- sep = '\t';
- }
- if (options !== 'html') {
- // make header if it has values
- if (header[0] !== '0') {
- for (var h = 0; h < header.length; h++) {
- if (h < header.length - 1) {
- pWriter.print(header[h] + sep);
- } else {
- pWriter.print(header[h]);
- }
- }
- }
-
- // make rows
- for (var i = 0; i < table.rows.length; i++) {
- var j;
- for (j = 0; j < table.rows[i].arr.length; j++) {
- if (j < table.rows[i].arr.length - 1) {
- pWriter.print(table.rows[i].arr[j] + sep);
- } else if (i < table.rows.length - 1) {
- pWriter.print(table.rows[i].arr[j]);
- } else {
- pWriter.print(table.rows[i].arr[j]); // no line break
- }
- }
- }
- }
-
- // otherwise, make HTML
- else {
- pWriter.print('<html>');
- pWriter.print('<head>');
- var str = ' <meta http-equiv=\"content-type\" content';
- str += '=\"text/html;charset=utf-8\" />';
- pWriter.print(str);
- pWriter.print('</head>');
-
- pWriter.print('<body>');
- pWriter.print(' <table>');
-
- // make header if it has values
- if (header[0] !== '0') {
- pWriter.print(' <tr>');
- for (var k = 0; k < header.length; k++) {
- var e = escapeHelper(header[k]);
- pWriter.print(' <td>' + e);
- pWriter.print(' </td>');
- }
- pWriter.print(' </tr>');
- }
-
- // make rows
- for (var row = 0; row < table.rows.length; row++) {
- pWriter.print(' <tr>');
- for (var col = 0; col < table.columns.length; col++) {
- var entry = table.rows[row].getString(col);
- var htmlEntry = escapeHelper(entry);
- pWriter.print(' <td>' + htmlEntry);
- pWriter.print(' </td>');
- }
- pWriter.print(' </tr>');
- }
- pWriter.print(' </table>');
- pWriter.print('</body>');
- pWriter.print('</html>');
- }
- // close and flush the pWriter
- pWriter.close();
- pWriter.flush();
- }; // end saveTable()
-
- /**
- * Generate a blob of file data as a url to prepare for download.
- * Accepts an array of data, a filename, and an extension (optional).
- * This is a private function because it does not do any formatting,
- * but it is used by saveStrings, saveJSON, saveTable etc.
- *
- * @param {Array} dataToDownload
- * @param {String} filename
- * @param {[String]} extension
- * @private
- */
- p5.prototype.writeFile = function (dataToDownload, filename, extension) {
- var type = 'application\/octet-stream';
- if (p5.prototype._isSafari()) {
- type = 'text\/plain';
- }
- var blob = new Blob(dataToDownload, {
- 'type': type
- });
- var href = window.URL.createObjectURL(blob);
- p5.prototype.downloadFile(href, filename, extension);
- };
-
- /**
- * Forces download. Accepts a url to filedata/blob, a filename,
- * and an extension (optional).
- * This is a private function because it does not do any formatting,
- * but it is used by saveStrings, saveJSON, saveTable etc.
- *
- * @param {String} href i.e. an href generated by createObjectURL
- * @param {[String]} filename
- * @param {[String]} extension
- */
- p5.prototype.downloadFile = function (href, fName, extension) {
- var fx = _checkFileExtension(fName, extension);
- var filename = fx[0];
- var ext = fx[1];
-
- var a = document.createElement('a');
- a.href = href;
- a.download = filename;
-
- // Firefox requires the link to be added to the DOM before click()
- a.onclick = function(e) {
- destroyClickedElement(e);
- e.stopPropagation();
- };
-
- a.style.display = 'none';
- document.body.appendChild(a);
-
- // Safari will open this file in the same page as a confusing Blob.
- if (p5.prototype._isSafari()) {
- var aText = 'Hello, Safari user! To download this file...\n';
- aText += '1. Go to File --> Save As.\n';
- aText += '2. Choose "Page Source" as the Format.\n';
- aText += '3. Name it with this extension: .\"' + ext + '\"';
- alert(aText);
- }
- a.click();
- href = null;
- };
-
- /**
- * Returns a file extension, or another string
- * if the provided parameter has no extension.
- *
- * @param {String} filename
- * @return {Array} [fileName, fileExtension]
- *
- * @private
- */
- function _checkFileExtension(filename, extension) {
- if (!extension || extension === true || extension === 'true') {
- extension = '';
- }
- if (!filename) {
- filename = 'untitled';
- }
- var ext = '';
- // make sure the file will have a name, see if filename needs extension
- if (filename && filename.indexOf('.') > -1) {
- ext = filename.split('.').pop();
- }
- // append extension if it doesn't exist
- if (extension) {
- if (ext !== extension) {
- ext = extension;
- filename = filename + '.' + ext;
- }
- }
- return [filename, ext];
- }
- p5.prototype._checkFileExtension = _checkFileExtension;
-
- /**
- * Returns true if the browser is Safari, false if not.
- * Safari makes trouble for downloading files.
- *
- * @return {Boolean} [description]
- * @private
- */
- p5.prototype._isSafari = function () {
- var x = Object.prototype.toString.call(window.HTMLElement);
- return x.indexOf('Constructor') > 0;
- };
-
- /**
- * Helper function, a callback for download that deletes
- * an invisible anchor element from the DOM once the file
- * has been automatically downloaded.
- *
- * @private
- */
- function destroyClickedElement(event) {
- document.body.removeChild(event.target);
- }
-
- module.exports = p5;
-
- },{"../core/core":37,"../core/error_helpers":40,"opentype.js":8,"reqwest":27}],60:[function(_dereq_,module,exports){
- /**
- * @module IO
- * @submodule Table
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
-
- /**
- * Table Options
- * <p>Generic class for handling tabular data, typically from a
- * CSV, TSV, or other sort of spreadsheet file.</p>
- * <p>CSV files are
- * <a href="http://en.wikipedia.org/wiki/Comma-separated_values">
- * comma separated values</a>, often with the data in quotes. TSV
- * files use tabs as separators, and usually don't bother with the
- * quotes.</p>
- * <p>File names should end with .csv if they're comma separated.</p>
- * <p>A rough "spec" for CSV can be found
- * <a href="http://tools.ietf.org/html/rfc4180">here</a>.</p>
- * <p>To load files, use the loadTable method.</p>
- * <p>To save tables to your computer, use the save method
- * or the saveTable method.</p>
- *
- * Possible options include:
- * <ul>
- * <li>csv - parse the table as comma-separated values
- * <li>tsv - parse the table as tab-separated values
- * <li>header - this table has a header (title) row
- * </ul>
- */
-
- /**
- * Table objects store data with multiple rows and columns, much
- * like in a traditional spreadsheet. Tables can be generated from
- * scratch, dynamically, or using data from an existing file.
- *
- * @class p5.Table
- * @constructor
- * @param {Array} [rows] An array of p5.TableRow objects
- * @return {p5.Table} p5.Table generated
- */
- p5.Table = function (rows) {
- /**
- * @property columns
- * @type {Array}
- */
- this.columns = [];
-
- /**
- * @property rows
- * @type {Array}
- */
- this.rows = [];
- };
-
- /**
- * Use addRow() to add a new row of data to a p5.Table object. By default,
- * an empty row is created. Typically, you would store a reference to
- * the new row in a TableRow object (see newRow in the example above),
- * and then set individual values using set().
- *
- * If a p5.TableRow object is included as a parameter, then that row is
- * duplicated and added to the table.
- *
- * @method addRow
- * @param {p5.TableRow} [row] row to be added to the table
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * //add a row
- * var newRow = table.addRow();
- * newRow.setString("id", table.getRowCount() - 1);
- * newRow.setString("species", "Canis Lupus");
- * newRow.setString("name", "Wolf");
- *
- * //print the results
- * for (var r = 0; r < table.getRowCount(); r++)
- * for (var c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- * }
- * </code>
- * </div>
- *
- * @alt
- * no image displayed
- *
- */
- p5.Table.prototype.addRow = function(row) {
- // make sure it is a valid TableRow
- var r = row || new p5.TableRow();
-
- if (typeof(r.arr) === 'undefined' || typeof(r.obj) === 'undefined') {
- //r = new p5.prototype.TableRow(r);
- throw 'invalid TableRow: ' + r;
- }
- r.table = this;
- this.rows.push(r);
- return r;
- };
-
- /**
- * Removes a row from the table object.
- *
- * @method removeRow
- * @param {Number} id ID number of the row to remove
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * //remove the first row
- * var r = table.removeRow(0);
- *
- * //print the results
- * for (var r = 0; r < table.getRowCount(); r++)
- * for (var c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- * }
- * </code>
- * </div>
- *
- * @alt
- * no image displayed
- *
- */
- p5.Table.prototype.removeRow = function(id) {
- this.rows[id].table = null; // remove reference to table
- var chunk = this.rows.splice(id+1, this.rows.length);
- this.rows.pop();
- this.rows = this.rows.concat(chunk);
- };
-
-
- /**
- * Returns a reference to the specified p5.TableRow. The reference
- * can then be used to get and set values of the selected row.
- *
- * @method getRow
- * @param {Number} rowID ID number of the row to get
- * @return {TableRow} p5.TableRow object
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * var row = table.getRow(1);
- * //print it column by column
- * //note: a row is an object, not an array
- * for (var c = 0; c < table.getColumnCount(); c++)
- * print(row.getString(c));
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.getRow = function(r) {
- return this.rows[r];
- };
-
- /**
- * Gets all rows from the table. Returns an array of p5.TableRows.
- *
- * @method getRows
- * @return {Array} Array of p5.TableRows
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * var rows = table.getRows();
- *
- * //warning: rows is an array of objects
- * for (var r = 0; r < rows.length; r++)
- * rows[r].set("name", "Unicorn");
- *
- * //print the results
- * for (var r = 0; r < table.getRowCount(); r++)
- * for (var c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- * }
- * </code>
- * </div>
- *
- * @alt
- * no image displayed
- *
- */
- p5.Table.prototype.getRows = function() {
- return this.rows;
- };
-
- /**
- * Finds the first row in the Table that contains the value
- * provided, and returns a reference to that row. Even if
- * multiple rows are possible matches, only the first matching
- * row is returned. The column to search may be specified by
- * either its ID or title.
- *
- * @method findRow
- * @param {String} value The value to match
- * @param {Number|String} column ID number or title of the
- * column to search
- * @return {TableRow}
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * //find the animal named zebra
- * var row = table.findRow("Zebra", "name");
- * //find the corresponding species
- * print(row.getString("species"));
- * }
- * </code>
- * </div>
- *
- * @alt
- * no image displayed
- *
- */
- p5.Table.prototype.findRow = function(value, column) {
- // try the Object
- if (typeof(column) === 'string') {
- for (var i = 0; i < this.rows.length; i++){
- if (this.rows[i].obj[column] === value) {
- return this.rows[i];
- }
- }
- }
- // try the Array
- else {
- for (var j = 0; j < this.rows.length; j++){
- if (this.rows[j].arr[column] === value) {
- return this.rows[j];
- }
- }
- }
- // otherwise...
- return null;
- };
-
- /**
- * Finds the rows in the Table that contain the value
- * provided, and returns references to those rows. Returns an
- * Array, so for must be used to iterate through all the rows,
- * as shown in the example above. The column to search may be
- * specified by either its ID or title.
- *
- * @method findRows
- * @param {String} value The value to match
- * @param {Number|String} column ID number or title of the
- * column to search
- * @return {Array} An Array of TableRow objects
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * //add another goat
- * var newRow = table.addRow();
- * newRow.setString("id", table.getRowCount() - 1);
- * newRow.setString("species", "Scape Goat");
- * newRow.setString("name", "Goat");
- *
- * //find the rows containing animals named Goat
- * var rows = table.findRows("Goat", "name");
- * print(rows.length + " Goats found");
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.findRows = function(value, column) {
- var ret = [];
- if (typeof(column) === 'string') {
- for (var i = 0; i < this.rows.length; i++){
- if (this.rows[i].obj[column] === value) {
- ret.push( this.rows[i] );
- }
- }
- }
- // try the Array
- else {
- for (var j = 0; j < this.rows.length; j++){
- if (this.rows[j].arr[column] === value) {
- ret.push( this.rows[j] );
- }
- }
- }
- return ret;
- };
-
- /**
- * Finds the first row in the Table that matches the regular
- * expression provided, and returns a reference to that row.
- * Even if multiple rows are possible matches, only the first
- * matching row is returned. The column to search may be
- * specified by either its ID or title.
- *
- * @method matchRow
- * @param {String} regexp The regular expression to match
- * @param {String|Number} column The column ID (number) or
- * title (string)
- * @return {TableRow} TableRow object
- */
- p5.Table.prototype.matchRow = function(regexp, column) {
- if (typeof(column) === 'number') {
- for (var j = 0; j < this.rows.length; j++) {
- if ( this.rows[j].arr[column].match(regexp) ) {
- return this.rows[j];
- }
- }
- }
-
- else {
- for (var i = 0; i < this.rows.length; i++) {
- if ( this.rows[i].obj[column].match(regexp) ) {
- return this.rows[i];
- }
- }
- }
- return null;
- };
-
- /**
- * Finds the rows in the Table that match the regular expression provided,
- * and returns references to those rows. Returns an array, so for must be
- * used to iterate through all the rows, as shown in the example. The
- * column to search may be specified by either its ID or title.
- *
- * @method matchRows
- * @param {String} regexp The regular expression to match
- * @param {String|Number} [column] The column ID (number) or
- * title (string)
- * @return {Array} An Array of TableRow objects
- * @example
- * var table;
- *
- * function setup() {
- *
- * table = new p5.Table();
- *
- * table.addColumn('name');
- * table.addColumn('type');
- *
- * var newRow = table.addRow();
- * newRow.setString('name', 'Lion');
- * newRow.setString('type', 'Mammal');
- *
- * newRow = table.addRow();
- * newRow.setString('name', 'Snake');
- * newRow.setString('type', 'Reptile');
- *
- * newRow = table.addRow();
- * newRow.setString('name', 'Mosquito');
- * newRow.setString('type', 'Insect');
- *
- * newRow = table.addRow();
- * newRow.setString('name', 'Lizard');
- * newRow.setString('type', 'Reptile');
- *
- * var rows = table.matchRows('R.*', 'type');
- * for (var i = 0; i < rows.length; i++) {
- * print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
- * }
- * }
- * // Sketch prints:
- * // Snake: Reptile
- * // Lizard: Reptile
- */
- p5.Table.prototype.matchRows = function(regexp, column) {
- var ret = [];
- if (typeof(column) === 'number') {
- for (var j = 0; j < this.rows.length; j++) {
- if ( this.rows[j].arr[column].match(regexp) ) {
- ret.push( this.rows[j] );
- }
- }
- }
-
- else {
- for (var i = 0; i < this.rows.length; i++) {
- if ( this.rows[i].obj[column].match(regexp) ) {
- ret.push( this.rows[i] );
- }
- }
- }
- return ret;
- };
-
-
- /**
- * Retrieves all values in the specified column, and returns them
- * as an array. The column may be specified by either its ID or title.
- *
- * @method getColumn
- * @param {String|Number} column String or Number of the column to return
- * @return {Array} Array of column values
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * //getColumn returns an array that can be printed directly
- * print(table.getColumn("species"));
- * //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.getColumn = function(value) {
- var ret = [];
- if (typeof(value) === 'string'){
- for (var i = 0; i < this.rows.length; i++){
- ret.push (this.rows[i].obj[value]);
- }
- } else {
- for (var j = 0; j < this.rows.length; j++){
- ret.push (this.rows[j].arr[value]);
- }
- }
- return ret;
- };
-
- /**
- * Removes all rows from a Table. While all rows are removed,
- * columns and column titles are maintained.
- *
- * @method clearRows
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * table.clearRows();
- * print(table.getRowCount() + " total rows in table");
- * print(table.getColumnCount() + " total columns in table");
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.clearRows = function() {
- delete this.rows;
- this.rows = [];
- };
-
- /**
- * Use addColumn() to add a new column to a Table object.
- * Typically, you will want to specify a title, so the column
- * may be easily referenced later by name. (If no title is
- * specified, the new column's title will be null.)
- *
- * @method addColumn
- * @param {String} [title] title of the given column
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * table.addColumn("carnivore");
- * table.set(0, "carnivore", "no");
- * table.set(1, "carnivore", "yes");
- * table.set(2, "carnivore", "no");
- *
- * //print the results
- * for (var r = 0; r < table.getRowCount(); r++)
- * for (var c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.addColumn = function(title) {
- var t = title || null;
- this.columns.push(t);
- };
-
- /**
- * Returns the total number of columns in a Table.
- *
- * @return {Number} Number of columns in this table
- */
- p5.Table.prototype.getColumnCount = function() {
- return this.columns.length;
- };
-
- /**
- * Returns the total number of rows in a Table.
- *
- * @method getRowCount
- * @return {Number} Number of rows in this table
-
- */
- p5.Table.prototype.getRowCount = function() {
- return this.rows.length;
- };
-
- /**
- * <p>Removes any of the specified characters (or "tokens").</p>
- *
- * <p>If no column is specified, then the values in all columns and
- * rows are processed. A specific column may be referenced by
- * either its ID or title.</p>
- *
- * @method removeTokens
- * @param {String} chars String listing characters to be removed
- * @param {String|Number} [column] Column ID (number)
- * or name (string)
- */
- p5.Table.prototype.removeTokens = function(chars, column) {
- var escape= function(s) {
- return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
- };
- var charArray = [];
- for (var i = 0; i < chars.length; i++) {
- charArray.push( escape( chars.charAt(i) ) );
- }
- var regex = new RegExp(charArray.join('|'), 'g');
-
- if (typeof(column) === 'undefined'){
- for (var c = 0; c < this.columns.length; c++) {
- for (var d = 0; d < this.rows.length; d++) {
- var s = this.rows[d].arr[c];
- s = s.replace(regex, '');
- this.rows[d].arr[c] = s;
- this.rows[d].obj[this.columns[c]] = s;
- }
- }
- }
- else if (typeof(column) === 'string'){
- for (var j = 0; j < this.rows.length; j++) {
- var val = this.rows[j].obj[column];
- val = val.replace(regex, '');
- this.rows[j].obj[column] = val;
- var pos = this.columns.indexOf(column);
- this.rows[j].arr[pos] = val;
- }
- }
- else {
- for (var k = 0; k < this.rows.length; k++) {
- var str = this.rows[k].arr[column];
- str = str.replace(regex, '');
- this.rows[k].arr[column] = str;
- this.rows[k].obj[this.columns[column]] = str;
- }
- }
- };
-
- /**
- * Trims leading and trailing whitespace, such as spaces and tabs,
- * from String table values. If no column is specified, then the
- * values in all columns and rows are trimmed. A specific column
- * may be referenced by either its ID or title.
- *
- * @method trim
- * @param {String|Number} column Column ID (number)
- * or name (string)
- */
- p5.Table.prototype.trim = function(column) {
- var regex = new RegExp( (' '), 'g');
-
- if (typeof(column) === 'undefined'){
- for (var c = 0; c < this.columns.length; c++) {
- for (var d = 0; d < this.rows.length; d++) {
- var s = this.rows[d].arr[c];
- s = s.replace(regex, '');
- this.rows[d].arr[c] = s;
- this.rows[d].obj[this.columns[c]] = s;
- }
- }
- }
- else if (typeof(column) === 'string'){
- for (var j = 0; j < this.rows.length; j++) {
- var val = this.rows[j].obj[column];
- val = val.replace(regex, '');
- this.rows[j].obj[column] = val;
- var pos = this.columns.indexOf(column);
- this.rows[j].arr[pos] = val;
- }
- }
- else {
- for (var k = 0; k < this.rows.length; k++) {
- var str = this.rows[k].arr[column];
- str = str.replace(regex, '');
- this.rows[k].arr[column] = str;
- this.rows[k].obj[this.columns[column]] = str;
- }
- }
- };
-
- /**
- * Use removeColumn() to remove an existing column from a Table
- * object. The column to be removed may be identified by either
- * its title (a String) or its index value (an int).
- * removeColumn(0) would remove the first column, removeColumn(1)
- * would remove the second column, and so on.
- *
- * @method removeColumn
- * @param {String|Number} column columnName (string) or ID (number)
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * table.removeColumn("id");
- * print(table.getColumnCount());
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.removeColumn = function(c) {
- var cString;
- var cNumber;
- if (typeof(c) === 'string') {
- // find the position of c in the columns
- cString = c;
- cNumber = this.columns.indexOf(c);
- console.log('string');
- }
- else{
- cNumber = c;
- cString = this.columns[c];
- }
-
- var chunk = this.columns.splice(cNumber+1, this.columns.length);
- this.columns.pop();
- this.columns = this.columns.concat(chunk);
-
- for (var i = 0; i < this.rows.length; i++){
- var tempR = this.rows[i].arr;
- var chip = tempR.splice(cNumber+1, tempR.length);
- tempR.pop();
- this.rows[i].arr = tempR.concat(chip);
- delete this.rows[i].obj[cString];
- }
-
- };
-
-
- /**
- * Stores a value in the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified
- * by either its ID or title.
- *
- * @method set
- * @param {String|Number} column column ID (Number)
- * or title (String)
- * @param {String|Number} value value to assign
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * table.set(0, "species", "Canis Lupus");
- * table.set(0, "name", "Wolf");
- *
- * //print the results
- * for (var r = 0; r < table.getRowCount(); r++)
- * for (var c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.set = function(row, column, value) {
- this.rows[row].set(column, value);
- };
-
- /**
- * Stores a Float value in the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified
- * by either its ID or title.
- *
- * @method setNum
- * @param {Number} row row ID
- * @param {String|Number} column column ID (Number)
- * or title (String)
- * @param {Number} value value to assign
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * table.setNum(1, "id", 1);
- *
- * print(table.getColumn(0));
- * //["0", 1, "2"]
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- */
- p5.Table.prototype.setNum = function(row, column, value){
- this.rows[row].setNum(column, value);
- };
-
-
- /**
- * Stores a String value in the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified
- * by either its ID or title.
- *
- * @method setString
- * @param {Number} row row ID
- * @param {String|Number} column column ID (Number)
- * or title (String)
- * @param {String} value value to assign
- */
- p5.Table.prototype.setString = function(row, column, value){
- this.rows[row].setString(column, value);
- };
-
- /**
- * Retrieves a value from the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified by
- * either its ID or title.
- *
- * @method get
- * @param {Number} row row ID
- * @param {String|Number} column columnName (string) or
- * ID (number)
- * @return {String|Number}
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * print(table.get(0, 1));
- * //Capra hircus
- * print(table.get(0, "species"));
- * //Capra hircus
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.get = function(row, column) {
- return this.rows[row].get(column);
- };
-
- /**
- * Retrieves a Float value from the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified by
- * either its ID or title.
- *
- * @method getNum
- * @param {Number} row row ID
- * @param {String|Number} column columnName (string) or
- * ID (number)
- * @return {Number}
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * print(table.getNum(1, 0) + 100);
- * //id 1 + 100 = 101
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.getNum = function(row, column) {
- return this.rows[row].getNum(column);
- };
-
- /**
- * Retrieves a String value from the Table's specified row and column.
- * The row is specified by its ID, while the column may be specified by
- * either its ID or title.
- *
- * @method getString
- * @param {Number} row row ID
- * @param {String|Number} column columnName (string) or
- * ID (number)
- * @return {String}
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * var tableArray = table.getArray();
- *
- * //output each row as array
- * for (var i = 0; i < tableArray.length; i++)
- * print(tableArray[i]);
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.getString = function(row, column) {
- return this.rows[row].getString(column);
- };
-
- /**
- * Retrieves all table data and returns as an object. If a column name is
- * passed in, each row object will be stored with that attribute as its
- * title.
- *
- * @method getObject
- * @param {String} headerColumn Name of the column which should be used to
- * title each row object (optional)
- * @return {Object}
- *
- * @example
- * <div class="norender">
- * <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
- * var table;
- *
- * function preload() {
- * //my table is comma separated value "csv"
- * //and has a header specifying the columns labels
- * table = loadTable("assets/mammals.csv", "csv", "header");
- * }
- *
- * function setup() {
- * var tableObject = table.getObject();
- *
- * print(tableObject);
- * //outputs an object
- * }
- * </code>
- * </div>
- *
- *@alt
- * no image displayed
- *
- */
- p5.Table.prototype.getObject = function (headerColumn) {
- var tableObject = {};
- var obj, cPos, index;
-
- for(var i = 0; i < this.rows.length; i++) {
- obj = this.rows[i].obj;
-
- if (typeof(headerColumn) === 'string'){
- cPos = this.columns.indexOf(headerColumn); // index of columnID
- if (cPos >= 0) {
- index = obj[headerColumn];
- tableObject[index] = obj;
- } else {
- throw 'This table has no column named "' + headerColumn +'"';
- }
- } else {
- tableObject[i] = this.rows[i].obj;
- }
- }
- return tableObject;
- };
-
- /**
- * Retrieves all table data and returns it as a multidimensional array.
- *
- * @method getArray
- * @return {Array}
- */
- p5.Table.prototype.getArray = function () {
- var tableArray = [];
- for(var i = 0; i < this.rows.length; i++) {
- tableArray.push(this.rows[i].arr);
- }
- return tableArray;
- };
-
- module.exports = p5.Table;
-
- },{"../core/core":37}],61:[function(_dereq_,module,exports){
- /**
- * @module IO
- * @submodule Table
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * A TableRow object represents a single row of data values,
- * stored in columns, from a table.
- *
- * A Table Row contains both an ordered array, and an unordered
- * JSON object.
- *
- * @class p5.TableRow
- * @constructor
- * @param {String} [str] optional: populate the row with a
- * string of values, separated by the
- * separator
- * @param {String} [separator] comma separated values (csv) by default
- */
- p5.TableRow = function (str, separator) {
- var arr = [];
- var obj = {};
- if (str){
- separator = separator || ',';
- arr = str.split(separator);
- }
- for (var i = 0; i < arr.length; i++){
- var key = i;
- var val = arr[i];
- obj[key] = val;
- }
- this.arr = arr;
- this.obj = obj;
- this.table = null;
- };
-
- /**
- * Stores a value in the TableRow's specified column.
- * The column may be specified by either its ID or title.
- *
- * @method set
- * @param {String|Number} column Column ID (Number)
- * or Title (String)
- * @param {String|Number} value The value to be stored
- */
- p5.TableRow.prototype.set = function(column, value) {
- // if typeof column is string, use .obj
- if (typeof(column) === 'string'){
- var cPos = this.table.columns.indexOf(column); // index of columnID
- if (cPos >= 0) {
- this.obj[column] = value;
- this.arr[cPos] = value;
- }
- else {
- throw 'This table has no column named "' + column +'"';
- }
- }
-
- // if typeof column is number, use .arr
- else {
- if (column < this.table.columns.length) {
- this.arr[column] = value;
- var cTitle = this.table.columns[column];
- this.obj[cTitle] = value;
- }
- else {
- throw 'Column #' + column + ' is out of the range of this table';
- }
- }
- };
-
-
- /**
- * Stores a Float value in the TableRow's specified column.
- * The column may be specified by either its ID or title.
- *
- * @method setNum
- * @param {String|Number} column Column ID (Number)
- * or Title (String)
- * @param {Number} value The value to be stored
- * as a Float
- */
- p5.TableRow.prototype.setNum = function(column, value){
- var floatVal = parseFloat(value, 10);
- this.set(column, floatVal);
- };
-
-
- /**
- * Stores a String value in the TableRow's specified column.
- * The column may be specified by either its ID or title.
- *
- * @method setString
- * @param {String|Number} column Column ID (Number)
- * or Title (String)
- * @param {String} value The value to be stored
- * as a String
- */
- p5.TableRow.prototype.setString = function(column, value){
- var stringVal = value.toString();
- this.set(column, stringVal);
- };
-
- /**
- * Retrieves a value from the TableRow's specified column.
- * The column may be specified by either its ID or title.
- *
- * @method get
- * @param {String|Number} column columnName (string) or
- * ID (number)
- * @return {String|Number}
- */
- p5.TableRow.prototype.get = function(column) {
- if (typeof(column) === 'string'){
- return this.obj[column];
- } else {
- return this.arr[column];
- }
- };
-
- /**
- * Retrieves a Float value from the TableRow's specified
- * column. The column may be specified by either its ID or
- * title.
- *
- * @method getNum
- * @param {String|Number} column columnName (string) or
- * ID (number)
- * @return {Number} Float Floating point number
- */
- p5.TableRow.prototype.getNum = function(column) {
- var ret;
- if (typeof(column) === 'string'){
- ret = parseFloat(this.obj[column], 10);
- } else {
- ret = parseFloat(this.arr[column], 10);
- }
-
- if (ret.toString() === 'NaN') {
- throw 'Error: ' + this.obj[column]+ ' is NaN (Not a Number)';
- }
- return ret;
- };
-
- /**
- * Retrieves an String value from the TableRow's specified
- * column. The column may be specified by either its ID or
- * title.
- *
- * @method getString
- * @param {String|Number} column columnName (string) or
- * ID (number)
- * @return {String} String
- */
- p5.TableRow.prototype.getString = function(column) {
- if (typeof(column) === 'string'){
- return this.obj[column].toString();
- } else {
- return this.arr[column].toString();
- }
- };
-
- module.exports = p5.TableRow;
-
- },{"../core/core":37}],62:[function(_dereq_,module,exports){
- /**
- * @module IO
- * @submodule XML
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * XML is a representation of an XML object, able to parse XML code. Use
- * loadXML() to load external XML files and create XML objects.
- *
- * @class p5.XML
- * @constructor
- * @return {p5.XML} p5.XML object generated
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var children = xml.getChildren("animal");
- *
- * for (var i = 0; i < children.length; i++) {
- * var id = children[i].getNumber("id");
- * var coloring = children[i].getString("species");
- * var name = children[i].getContent();
- * print(id + ", " + coloring + ", " + name);
- * }
- * }
- *
- * // Sketch prints:
- * // 0, Capra hircus, Goat
- * // 1, Panthera pardus, Leopard
- * // 2, Equus zebra, Zebra
- * </code></div>
- *
- * @alt
- * no image displayed
- *
- */
- p5.XML = function () {
- this.name = null; //done
- this.attributes = {}; //done
- this.children = [];
- this.parent = null;
- this.content = null; //done
- };
-
-
- /**
- * Gets a copy of the element's parent. Returns the parent as another
- * p5.XML object.
- *
- * @method getParent
- * @return {Object} element parent
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var children = xml.getChildren("animal");
- * var parent = children[1].getParent();
- * print(parent.getName());
- * }
- *
- * // Sketch prints:
- * // mammals
- * </code></div>
- */
- p5.XML.prototype.getParent = function() {
- return this.parent;
- };
-
- /**
- * Gets the element's full name, which is returned as a String.
- *
- * @method getName
- * @return {String} the name of the node
- * @example<animal
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * print(xml.getName());
- * }
- *
- * // Sketch prints:
- * // mammals
- * </code></div>
- */
- p5.XML.prototype.getName = function() {
- return this.name;
- };
-
- /**
- * Sets the element's name, which is specified as a String.
- *
- * @method setName
- * @param {String} the new name of the node
- * @example<animal
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * print(xml.getName());
- * xml.setName("fish");
- * print(xml.getName());
- * }
- *
- * // Sketch prints:
- * // mammals
- * // fish
- * </code></div>
- */
- p5.XML.prototype.setName = function(name) {
- this.name = name;
- };
-
- /**
- * Checks whether or not the element has any children, and returns the result
- * as a boolean.
- *
- * @method hasChildren
- * @return {boolean}
- * @example<animal
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * print(xml.hasChildren());
- * }
- *
- * // Sketch prints:
- * // true
- * </code></div>
- */
- p5.XML.prototype.hasChildren = function() {
- return this.children.length > 0;
- };
-
- /**
- * Get the names of all of the element's children, and returns the names as an
- * array of Strings. This is the same as looping through and calling getName()
- * on each child element individually.
- *
- * @method listChildren
- * @return {Array} names of the children of the element
- * @example<animal
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * print(xml.listChildren());
- * }
- *
- * // Sketch prints:
- * // ["animal", "animal", "animal"]
- * </code></div>
- */
- p5.XML.prototype.listChildren = function() {
- return this.children.map(function(c) { return c.name; });
- };
-
- /**
- * Returns all of the element's children as an array of p5.XML objects. When
- * the name parameter is specified, then it will return all children that match
- * that name.
- *
- * @method getChildren
- * @param {String} [name] element name
- * @return {Array} children of the element
- * @example<animal
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var animals = xml.getChildren("animal");
- *
- * for (var i = 0; i < animals.length; i++) {
- * print(animals[i].getContent());
- * }
- * }
- *
- * // Sketch prints:
- * // "Goat"
- * // "Leopard"
- * // "Zebra"
- * </code></div>
- */
- p5.XML.prototype.getChildren = function(param) {
- if (param) {
- return this.children.filter(function(c) { return c.name === param; });
- }
- else {
- return this.children;
- }
- };
-
- /**
- * Returns the first of the element's children that matches the name parameter
- * or the child of the given index.It returns undefined if no matching
- * child is found.
- *
- * @method getChild
- * @param {String|Number} name element name or index
- * @return {p5.XML}
- * @example<animal
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var firstChild = xml.getChild("animal");
- * print(firstChild.getContent());
- * }
- *
- * // Sketch prints:
- * // "Goat"
- * </code></div>
- * <div class='norender'><code>
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var secondChild = xml.getChild(1);
- * print(secondChild.getContent());
- * }
- *
- * // Sketch prints:
- * // "Leopard"
- * </code></div>
- */
- p5.XML.prototype.getChild = function(param) {
- if(typeof param === 'string') {
- return this.children.find(function(c) {
- return c.name === param;
- });
- }
- else {
- return this.children[param];
- }
- };
-
- /**
- * Appends a new child to the element. The child can be specified with
- * either a String, which will be used as the new tag's name, or as a
- * reference to an existing p5.XML object.
- * A reference to the newly created child is returned as an p5.XML object.
- *
- * @method addChild
- * @param {Object} a p5.XML Object which will be the child to be added
- */
- p5.XML.prototype.addChild = function(node) {
- if (node instanceof p5.XML) {
- this.children.push(node);
- } else {
- // PEND
- }
- };
-
- /**
- * Removes the element specified by name or index.
- *
- * @method removeChild
- * @param {String|Number} name element name or index
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * xml.removeChild("animal");
- * var children = xml.getChildren();
- * for (var i=0; i<children.length; i++) {
- * print(children[i].getContent());
- * }
- * }
- *
- * // Sketch prints:
- * // "Leopard"
- * // "Zebra"
- * </code></div>
- * <div class='norender'><code>
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * xml.removeChild(1);
- * var children = xml.getChildren();
- * for (var i=0; i<children.length; i++) {
- * print(children[i].getContent());
- * }
- * }
- *
- * // Sketch prints:
- * // "Goat"
- * // "Zebra"
- * </code></div>
- */
- p5.XML.prototype.removeChild = function(param) {
- var ind = -1;
- if(typeof param === 'string') {
- for (var i=0; i<this.children.length; i++) {
- if (this.children[i].name === param) {
- ind = i;
- break;
- }
- }
- } else {
- ind = param;
- }
- if (ind !== -1) {
- this.children.splice(ind, 1);
- }
- };
-
-
- /**
- * Counts the specified element's number of attributes, returned as an Number.
- *
- * @method getAttributeCount
- * @return {Number}
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var firstChild = xml.getChild("animal");
- * print(firstChild.getAttributeCount());
- * }
- *
- * // Sketch prints:
- * // 2
- * </code></div>
- */
- p5.XML.prototype.getAttributeCount = function() {
- return Object.keys(this.attributes).length;
- };
-
- /**
- * Gets all of the specified element's attributes, and returns them as an
- * array of Strings.
- *
- * @method listAttributes
- * @return {Array} an array of strings containing the names of attributes
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var firstChild = xml.getChild("animal");
- * print(firstChild.listAttributes());
- * }
- *
- * // Sketch prints:
- * // ["id", "species"]
- * </code></div>
- */
- p5.XML.prototype.listAttributes = function() {
- return Object.keys(this.attributes);
- };
-
- /**
- * Checks whether or not an element has the specified attribute.
- *
- * @method hasAttribute
- * @param {String} the attribute to be checked
- * @return {boolean} true if attribute found else false
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var firstChild = xml.getChild("animal");
- * print(firstChild.hasAttribute("species"));
- * print(firstChild.hasAttribute("color"));
- * }
- *
- * // Sketch prints:
- * // true
- * // false
- * </code></div>
- */
- p5.XML.prototype.hasAttribute = function(name) {
- return this.attributes[name] ? true : false;
- };
-
- /**
- * Returns an attribute value of the element as an Number. If the defaultValue
- * parameter is specified and the attribute doesn't exist, then defaultValue
- * is returned. If no defaultValue is specified and the attribute doesn't
- * exist, the value 0 is returned.
- *
- * @method getNumber
- * @param {String} name the non-null full name of the attribute
- * @param {Number} [defaultValue] the default value of the attribute
- * @return {Number}
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var firstChild = xml.getChild("animal");
- * print(firstChild.getNumber("id"));
- * }
- *
- * // Sketch prints:
- * // 0
- * </code></div>
- */
- p5.XML.prototype.getNumber = function(name, defaultValue) {
- return Number(this.attributes[name]) || defaultValue || 0;
- };
-
- /**
- * Returns an attribute value of the element as an String. If the defaultValue
- * parameter is specified and the attribute doesn't exist, then defaultValue
- * is returned. If no defaultValue is specified and the attribute doesn't
- * exist, null is returned.
- *
- * @method getString
- * @param {String} name the non-null full name of the attribute
- * @param {Number} [defaultValue] the default value of the attribute
- * @return {Number}
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var firstChild = xml.getChild("animal");
- * print(firstChild.getString("species"));
- * }
- *
- * // Sketch prints:
- * // "Capra hircus"
- * </code></div>
- */
- p5.XML.prototype.getString = function(name, defaultValue) {
- return String(this.attributes[name]) || defaultValue || null;
- };
-
- /**
- * Sets the content of an element's attribute. The first parameter specifies
- * the attribute name, while the second specifies the new content.
- *
- * @method setAttribute
- * @param {String} name the full name of the attribute
- * @param {Number} value the value of the attribute
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var firstChild = xml.getChild("animal");
- * print(firstChild.getString("species"));
- * firstChild.setAttribute("species", "Jamides zebra");
- * print(firstChild.getString("species"));
- * }
- *
- * // Sketch prints:
- * // "Capra hircus"
- * // "Jamides zebra"
- * </code></div>
- */
- p5.XML.prototype.setAttribute = function(name, value) {
- if (this.attributes[name]) {
- this.attributes[name] = value;
- }
- };
-
- /**
- * Returns the content of an element. If there is no such content,
- * defaultValue is returned if specified, otherwise null is returned.
- *
- * @method getContent
- * @param {String} [defaultValue] value returned if no content is found
- * @return {String}
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var firstChild = xml.getChild("animal");
- * print(firstChild.getContent());
- * }
- *
- * // Sketch prints:
- * // "Goat"
- * </code></div>
- */
- p5.XML.prototype.getContent = function(defaultValue) {
- return this.content || defaultValue || null;
- };
-
- /**
- * Sets the element's content.
- *
- * @method setContent
- * @param {String} text the new content
- * @example
- * <div class='norender'><code>
- * // The following short XML file called "mammals.xml" is parsed
- * // in the code below.
- * //
- * // <?xml version="1.0"?>
- * // <mammals>
- * // <animal id="0" species="Capra hircus">Goat</animal>
- * // <animal id="1" species="Panthera pardus">Leopard</animal>
- * // <animal id="2" species="Equus zebra">Zebra</animal>
- * // </mammals>
- *
- * var xml;
- *
- * function preload() {
- * xml = loadXML("assets/mammals.xml");
- * }
- *
- * function setup() {
- * var firstChild = xml.getChild("animal");
- * print(firstChild.getContent());
- * firstChild.setContent("Mountain Goat");
- * print(firstChild.getContent());
- * }
- *
- * // Sketch prints:
- * // "Goat"
- * // "Mountain Goat"
- * </code></div>
- */
- p5.XML.prototype.setContent = function( content ) {
- if(!this.children.length) {
- this.content = content;
- }
- };
-
- /* HELPERS */
- /**
- * This method is called while the parsing of XML (when loadXML() is
- * called). The difference between this method and the setContent()
- * method defined later is that this one is used to set the content
- * when the node in question has more nodes under it and so on and
- * not directly text content. While in the other one is used when
- * the node in question directly has text inside it.
- *
- */
- p5.XML.prototype._setCont = function(content) {
- var str;
- str = content;
- str = str.replace(/\s\s+/g, ',');
- //str = str.split(',');
- this.content = str;
- };
-
- /**
- * This method is called while the parsing of XML (when loadXML() is
- * called). The XML node is passed and its attributes are stored in the
- * p5.XML's attribute Object.
- *
- */
- p5.XML.prototype._setAttributes = function(node) {
- var i, att = {};
- for( i = 0; i < node.attributes.length; i++) {
- att[node.attributes[i].nodeName] = node.attributes[i].nodeValue;
- }
- this.attributes = att;
- };
-
- module.exports = p5.XML;
- },{"../core/core":37}],63:[function(_dereq_,module,exports){
- /**
- * @module Math
- * @submodule Calculation
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * Calculates the absolute value (magnitude) of a number. Maps to Math.abs().
- * The absolute value of a number is always positive.
- *
- * @method abs
- * @param {Number} n number to compute
- * @return {Number} absolute value of given number
- * @example
- * <div class = "norender"><code>
- * function setup() {
- * var x = -3;
- * var y = abs(x);
- *
- * print(x); // -3
- * print(y); // 3
- * }
- * </code></div>
- *
- * @alt
- * no image displayed
- *
- */
- p5.prototype.abs = Math.abs;
-
- /**
- * Calculates the closest int value that is greater than or equal to the
- * value of the parameter. Maps to Math.ceil(). For example, ceil(9.03)
- * returns the value 10.
- *
- * @method ceil
- * @param {Number} n number to round up
- * @return {Number} rounded up number
- * @example
- * <div><code>
- * function draw() {
- * background(200);
- * // map, mouseX between 0 and 5.
- * var ax = map(mouseX, 0, 100, 0, 5);
- * var ay = 66;
- *
- * //Get the ceiling of the mapped number.
- * var bx = ceil(map(mouseX, 0, 100, 0,5));
- * var by = 33;
- *
- * // Multiply the mapped numbers by 20 to more easily
- * // see the changes.
- * stroke(0);
- * fill(0);
- * line(0, ay, ax * 20, ay);
- * line(0, by, bx * 20, by);
- *
- * // Reformat the float returned by map and draw it.
- * noStroke();
- * text(nfc(ax, 2,2), ax, ay - 5);
- * text(nfc(bx,1,1), bx, by - 5);
- * }
- * </code></div>
- *
- * @alt
- * 2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals
- *
- */
- p5.prototype.ceil = Math.ceil;
-
- /**
- * Constrains a value between a minimum and maximum value.
- *
- * @method constrain
- * @param {Number} n number to constrain
- * @param {Number} low minimum limit
- * @param {Number} high maximum limit
- * @return {Number} constrained number
- * @example
- * <div><code>
- * function draw() {
- * background(200);
- *
- * var leftWall = 25;
- * var rightWall = 75;
- *
- * // xm is just the mouseX, while
- * // xc is the mouseX, but constrained
- * // between the leftWall and rightWall!
- * var xm = mouseX;
- * var xc = constrain(mouseX, leftWall, rightWall);
- *
- * // Draw the walls.
- * stroke(150);
- * line(leftWall, 0, leftWall, height);
- * line(rightWall, 0, rightWall, height);
- *
- * // Draw xm and xc as circles.
- * noStroke();
- * fill(150);
- * ellipse(xm, 33, 9,9); // Not Constrained
- * fill(0);
- * ellipse(xc, 66, 9,9); // Constrained
- * }
- * </code></div>
- *
- * @alt
- * 2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines
- *
- */
- p5.prototype.constrain = function(n, low, high) {
- return Math.max(Math.min(n, high), low);
- };
-
- /**
- * Calculates the distance between two points.
- *
- * @method dist
- * @param {Number} x1 x-coordinate of the first point
- * @param {Number} y1 y-coordinate of the first point
- * @param {Number} [z1] z-coordinate of the first point
- * @param {Number} x2 x-coordinate of the second point
- * @param {Number} y2 y-coordinate of the second point
- * @param {Number} [z2] z-coordinate of the second point
- * @return {Number} distance between the two points
- * @example
- * <div><code>
- * // Move your mouse inside the canvas to see the
- * // change in distance between two points!
- * function draw() {
- * background(200);
- * fill(0);
- *
- * var x1 = 10;
- * var y1 = 90;
- * var x2 = mouseX;
- * var y2 = mouseY;
- *
- * line(x1, y1, x2, y2);
- * ellipse(x1, y1, 7, 7);
- * ellipse(x2, y2, 7, 7);
- *
- * // d is the length of the line
- * // the distance from point 1 to point 2.
- * var d = int(dist(x1, y1, x2, y2));
- *
- * // Let's write d along the line we are drawing!
- * push();
- * translate( (x1+x2)/2, (y1+y2)/2 );
- * rotate( atan2(y2-y1,x2-x1) );
- * text(nfc(d,1,1), 0, -5);
- * pop();
- * // Fancy!
- * }
- * </code></div>
- *
- * @alt
- * 2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.
- *
- */
- p5.prototype.dist = function(x1, y1, z1, x2, y2, z2) {
- if (arguments.length === 4) {
- // In the case of 2d: z1 means x2 and x2 means y2
- return hypot(z1-x1, x2-y1);
- } else if (arguments.length === 6) {
- return hypot(x2-x1, y2-y1, z2-z1);
- }
- };
-
- /**
- * Returns Euler's number e (2.71828...) raised to the power of the n
- * parameter. Maps to Math.exp().
- *
- * @method exp
- * @param {Number} n exponent to raise
- * @return {Number} e^n
- * @example
- * <div><code>
- * function draw() {
- * background(200);
- *
- * // Compute the exp() function with a value between 0 and 2
- * var xValue = map(mouseX, 0, width, 0, 2);
- * var yValue = exp(xValue);
- *
- * var y = map(yValue, 0, 8, height, 0);
- *
- * var legend = "exp (" + nfc(xValue, 3) +")\n= " + nf(yValue, 1, 4);
- * stroke(150);
- * line(mouseX, y, mouseX, height);
- * fill(0);
- * text(legend, 5, 15);
- * noStroke();
- * ellipse (mouseX,y, 7, 7);
- *
- * // Draw the exp(x) curve,
- * // over the domain of x from 0 to 2
- * noFill();
- * stroke(0);
- * beginShape();
- * for (var x = 0; x < width; x++) {
- * xValue = map(x, 0, width, 0, 2);
- * yValue = exp(xValue);
- * y = map(yValue, 0, 8, height, 0);
- * vertex(x, y);
- * }
- *
- * endShape();
- * line(0, 0, 0, height);
- * line(0, height-1, width, height-1);
- * }
- * </code></div>
- *
- * @alt
- * ellipse moves along a curve with mouse x. e^n displayed.
- *
- */
- p5.prototype.exp = Math.exp;
-
- /**
- * Calculates the closest int value that is less than or equal to the
- * value of the parameter. Maps to Math.floor().
- *
- * @method floor
- * @param {Number} n number to round down
- * @return {Number} rounded down number
- * @example
- * <div><code>
- * function draw() {
- * background(200);
- * //map, mouseX between 0 and 5.
- * var ax = map(mouseX, 0, 100, 0, 5);
- * var ay = 66;
- *
- * //Get the floor of the mapped number.
- * var bx = floor(map(mouseX, 0, 100, 0,5));
- * var by = 33;
- *
- * // Multiply the mapped numbers by 20 to more easily
- * // see the changes.
- * stroke(0);
- * fill(0);
- * line(0, ay, ax * 20, ay);
- * line(0, by, bx * 20, by);
- *
- * // Reformat the float returned by map and draw it.
- * noStroke();
- * text(nfc(ax, 2,2), ax, ay - 5);
- * text(nfc(bx,1,1), bx, by - 5);
- * }
- * </code></div>
- *
- * @alt
- * 2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals
- *
- */
- p5.prototype.floor = Math.floor;
-
- /**
- * Calculates a number between two numbers at a specific increment. The amt
- * parameter is the amount to interpolate between the two values where 0.0
- * equal to the first point, 0.1 is very near the first point, 0.5 is
- * half-way in between, etc. The lerp function is convenient for creating
- * motion along a straight path and for drawing dotted lines.
- *
- * @method lerp
- * @param {Number} start first value
- * @param {Number} stop second value
- * @param {Number} amt number between 0.0 and 1.0
- * @return {Number} lerped value
- * @example
- * <div><code>
- * function setup() {
- * background(200);
- * var a = 20;
- * var b = 80;
- * var c = lerp(a,b, .2);
- * var d = lerp(a,b, .5);
- * var e = lerp(a,b, .8);
- *
- * var y = 50
- *
- * strokeWeight(5);
- * stroke(0); // Draw the original points in black
- * point(a, y);
- * point(b, y);
- *
- * stroke(100); // Draw the lerp points in gray
- * point(c, y);
- * point(d, y);
- * point(e, y);
- * }
- * </code></div>
- *
- * @alt
- * 5 points horizontally staggered mid-canvas. mid 3 are grey, outer black
- *
- */
- p5.prototype.lerp = function(start, stop, amt) {
- return amt*(stop-start)+start;
- };
-
- /**
- * Calculates the natural logarithm (the base-e logarithm) of a number. This
- * function expects the n parameter to be a value greater than 0.0. Maps to
- * Math.log().
- *
- * @method log
- * @param {Number} n number greater than 0
- * @return {Number} natural logarithm of n
- * @example
- * <div><code>
- * function draw() {
- * background(200);
- * var maxX = 2.8;
- * var maxY = 1.5;
- *
- * // Compute the natural log of a value between 0 and maxX
- * var xValue = map(mouseX, 0, width, 0, maxX);
- * if (xValue > 0) { // Cannot take the log of a negative number.
- * var yValue = log(xValue);
- * var y = map(yValue, -maxY, maxY, height, 0);
- *
- * // Display the calculation occurring.
- * var legend = "log(" + nf(xValue, 1, 2) + ")\n= " + nf(yValue, 1, 3);
- * stroke(150);
- * line(mouseX, y, mouseX, height);
- * fill(0);
- * text (legend, 5, 15);
- * noStroke();
- * ellipse (mouseX, y, 7, 7);
- * }
- *
- * // Draw the log(x) curve,
- * // over the domain of x from 0 to maxX
- * noFill();
- * stroke(0);
- * beginShape();
- * for(var x=0; x < width; x++) {
- * xValue = map(x, 0, width, 0, maxX);
- * yValue = log(xValue);
- * y = map(yValue, -maxY, maxY, height, 0);
- * vertex(x, y);
- * }
- * endShape();
- * line(0,0,0,height);
- * line(0,height/2,width, height/2);
- * }
- * </code></div>
- *
- * @alt
- * ellipse moves along a curve with mouse x. natural logarithm of n displayed.
- *
- */
- p5.prototype.log = Math.log;
-
- /**
- * Calculates the magnitude (or length) of a vector. A vector is a direction
- * in space commonly used in computer graphics and linear algebra. Because it
- * has no "start" position, the magnitude of a vector can be thought of as
- * the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is
- * a shortcut for writing dist(0, 0, x, y).
- *
- * @method mag
- * @param {Number} a first value
- * @param {Number} b second value
- * @return {Number} magnitude of vector from (0,0) to (a,b)
- * @example
- * <div><code>
- * function setup() {
- * var x1 = 20;
- * var x2 = 80;
- * var y1 = 30;
- * var y2 = 70;
- *
- * line(0, 0, x1, y1);
- * print(mag(x1, y1)); // Prints "36.05551275463989"
- * line(0, 0, x2, y1);
- * print(mag(x2, y1)); // Prints "85.44003745317531"
- * line(0, 0, x1, y2);
- * print(mag(x1, y2)); // Prints "72.80109889280519"
- * line(0, 0, x2, y2);
- * print(mag(x2, y2)); // Prints "106.3014581273465"
- * }
- * </code></div>
- *
- * @alt
- * 4 lines of different length radiate from top left of canvas.
- *
- */
- p5.prototype.mag = function(x, y) {
- return hypot(x, y);
- };
-
- /**
- * Re-maps a number from one range to another.
- * <br><br>
- * In the first example above, the number 25 is converted from a value in the
- * range of 0 to 100 into a value that ranges from the left edge of the
- * window (0) to the right edge (width).
- *
- * @method map
- * @param {Number} value the incoming value to be converted
- * @param {Number} start1 lower bound of the value's current range
- * @param {Number} stop1 upper bound of the value's current range
- * @param {Number} start2 lower bound of the value's target range
- * @param {Number} stop2 upper bound of the value's target range
- * @return {Number} remapped number
- * @example
- * <div><code>
- * var value = 25;
- * var m = map(value, 0, 100, 0, width);
- * ellipse(m, 50, 10, 10);
- * </code></div>
- *
- * <div><code>
- * function setup() {
- * noStroke();
- * }
- *
- * function draw() {
- * background(204);
- * var x1 = map(mouseX, 0, width, 25, 75);
- * ellipse(x1, 25, 25, 25);
- * var x2 = map(mouseX, 0, width, 0, 100);
- * ellipse(x2, 75, 25, 25);
- * }
- * </code></div>
- *
- * @alt
- * 10 by 10 white ellipse with in mid left canvas
- * 2 25 by 25 white ellipses move with mouse x. Bottom has more range from X
- *
- */
- p5.prototype.map = function(n, start1, stop1, start2, stop2) {
- return ((n-start1)/(stop1-start1))*(stop2-start2)+start2;
- };
-
- /**
- * Determines the largest value in a sequence of numbers, and then returns
- * that value. max() accepts any number of Number parameters, or an Array
- * of any length.
- *
- * @method max
- * @param {Number|Array} n0 Numbers to compare
- * @return {Number} maximum Number
- * @example
- * <div><code>
- * function setup() {
- * // Change the elements in the array and run the sketch
- * // to show how max() works!
- * numArray = new Array(2,1,5,4,8,9);
- * fill(0);
- * noStroke();
- * text("Array Elements", 0, 10);
- * // Draw all numbers in the array
- * var spacing = 15;
- * var elemsY = 25;
- * for(var i = 0; i < numArray.length; i++) {
- * text(numArray[i], i * spacing, elemsY);
- * }
- * maxX = 33;
- * maxY = 80;
- * // Draw the Maximum value in the array.
- * textSize(32);
- * text(max(numArray), maxX, maxY);
- * }
- * </code></div>
- *
- * @alt
- * Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9
- *
- */
- p5.prototype.max = function() {
- if (arguments[0] instanceof Array) {
- return Math.max.apply(null,arguments[0]);
- } else {
- return Math.max.apply(null,arguments);
- }
- };
-
- /**
- * Determines the smallest value in a sequence of numbers, and then returns
- * that value. min() accepts any number of Number parameters, or an Array
- * of any length.
- *
- * @method min
- * @param {Number|Array} n0 Numbers to compare
- * @return {Number} minimum Number
- * @example
- * <div><code>
- * function setup() {
- * // Change the elements in the array and run the sketch
- * // to show how min() works!
- * numArray = new Array(2,1,5,4,8,9);
- * fill(0);
- * noStroke();
- * text("Array Elements", 0, 10);
- * // Draw all numbers in the array
- * var spacing = 15;
- * var elemsY = 25;
- * for(var i = 0; i < numArray.length; i++) {
- * text(numArray[i], i * spacing, elemsY);
- * }
- * maxX = 33;
- * maxY = 80;
- * // Draw the Minimum value in the array.
- * textSize(32);
- * text(min(numArray), maxX, maxY);
- * }
- * </code></div>
- *
- * @alt
- * Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1
- *
- */
- p5.prototype.min = function() {
- if (arguments[0] instanceof Array) {
- return Math.min.apply(null,arguments[0]);
- } else {
- return Math.min.apply(null,arguments);
- }
- };
-
- /**
- * Normalizes a number from another range into a value between 0 and 1.
- * Identical to map(value, low, high, 0, 1).
- * Numbers outside of the range are not clamped to 0 and 1, because
- * out-of-range values are often intentional and useful. (See the second
- * example above.)
- *
- * @method norm
- * @param {Number} value incoming value to be normalized
- * @param {Number} start lower bound of the value's current range
- * @param {Number} stop upper bound of the value's current range
- * @return {Number} normalized number
- * @example
- * <div><code>
- * function draw() {
- * background(200);
- * currentNum = mouseX;
- * lowerBound = 0;
- * upperBound = width; //100;
- * normalized = norm(currentNum, lowerBound, upperBound);
- * lineY = 70
- * line(0, lineY, width, lineY);
- * //Draw an ellipse mapped to the non-normalized value.
- * noStroke();
- * fill(50)
- * var s = 7; // ellipse size
- * ellipse(currentNum, lineY, s, s);
- *
- * // Draw the guide
- * guideY = lineY + 15;
- * text("0", 0, guideY);
- * textAlign(RIGHT);
- * text("100", width, guideY);
- *
- * // Draw the normalized value
- * textAlign(LEFT);
- * fill(0);
- * textSize(32);
- * normalY = 40;
- * normalX = 20;
- * text(normalized, normalX, normalY);
- * }
- * </code></div>
- *
- * @alt
- * ellipse moves with mouse. 0 shown left & 100 right and updating values center
- *
- */
- p5.prototype.norm = function(n, start, stop) {
- return this.map(n, start, stop, 0, 1);
- };
-
- /**
- * Facilitates exponential expressions. The pow() function is an efficient
- * way of multiplying numbers by themselves (or their reciprocals) in large
- * quantities. For example, pow(3, 5) is equivalent to the expression
- * 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. Maps to
- * Math.pow().
- *
- * @method pow
- * @param {Number} n base of the exponential expression
- * @param {Number} e power by which to raise the base
- * @return {Number} n^e
- * @example
- * <div><code>
- * function setup() {
- * //Exponentially increase the size of an ellipse.
- * eSize = 3; // Original Size
- * eLoc = 10; // Original Location
- *
- * ellipse(eLoc, eLoc, eSize, eSize);
- *
- * ellipse(eLoc*2, eLoc*2, pow(eSize, 2), pow(eSize, 2));
- *
- * ellipse(eLoc*4, eLoc*4, pow(eSize, 3), pow(eSize, 3));
- *
- * ellipse(eLoc*8, eLoc*8, pow(eSize, 4), pow(eSize, 4));
- * }
- * </code></div>
- *
- * @alt
- * small to large ellipses radiating from top left of canvas
- *
- */
- p5.prototype.pow = Math.pow;
-
- /**
- * Calculates the integer closest to the n parameter. For example,
- * round(133.8) returns the value 134. Maps to Math.round().
- *
- * @method round
- * @param {Number} n number to round
- * @return {Number} rounded number
- * @example
- * <div><code>
- * function draw() {
- * background(200);
- * //map, mouseX between 0 and 5.
- * var ax = map(mouseX, 0, 100, 0, 5);
- * var ay = 66;
- *
- * // Round the mapped number.
- * var bx = round(map(mouseX, 0, 100, 0,5));
- * var by = 33;
- *
- * // Multiply the mapped numbers by 20 to more easily
- * // see the changes.
- * stroke(0);
- * fill(0);
- * line(0, ay, ax * 20, ay);
- * line(0, by, bx * 20, by);
- *
- * // Reformat the float returned by map and draw it.
- * noStroke();
- * text(nfc(ax, 2,2), ax, ay - 5);
- * text(nfc(bx,1,1), bx, by - 5);
- * }
- * </code></div>
- *
- * @alt
- * horizontal center line squared values displayed on top and regular on bottom.
- *
- */
- p5.prototype.round = Math.round;
-
- /**
- * Squares a number (multiplies a number by itself). The result is always a
- * positive number, as multiplying two negative numbers always yields a
- * positive result. For example, -1 * -1 = 1.
- *
- * @method sq
- * @param {Number} n number to square
- * @return {Number} squared number
- * @example
- * <div><code>
- * function draw() {
- * background(200);
- * eSize = 7;
- * x1 = map(mouseX, 0, width, 0, 10);
- * y1 = 80;
- * x2 = sq(x1);
- * y2 = 20;
- *
- * // Draw the non-squared.
- * line(0, y1, width, y1);
- * ellipse(x1, y1, eSize, eSize);
- *
- * // Draw the squared.
- * line(0, y2, width, y2);
- * ellipse(x2, y2, eSize, eSize);
- *
- * // Draw dividing line.
- * stroke(100)
- * line(0, height/2, width, height/2);
- *
- * // Draw text.
- * var spacing = 15;
- * noStroke();
- * fill(0);
- * text("x = " + x1, 0, y1 + spacing);
- * text("sq(x) = " + x2, 0, y2 + spacing);
- * }
- * </code></div>
- *
- * @alt
- * horizontal center line squared values displayed on top and regular on bottom.
- *
- */
- p5.prototype.sq = function(n) { return n*n; };
-
- /**
- * Calculates the square root of a number. The square root of a number is
- * always positive, even though there may be a valid negative root. The
- * square root s of number a is such that s*s = a. It is the opposite of
- * squaring. Maps to Math.sqrt().
- *
- * @method sqrt
- * @param {Number} n non-negative number to square root
- * @return {Number} square root of number
- * @example
- * <div><code>
- * function draw() {
- * background(200);
- * eSize = 7;
- * x1 = mouseX;
- * y1 = 80;
- * x2 = sqrt(x1);
- * y2 = 20;
- *
- * // Draw the non-squared.
- * line(0, y1, width, y1);
- * ellipse(x1, y1, eSize, eSize);
- *
- * // Draw the squared.
- * line(0, y2, width, y2);
- * ellipse(x2, y2, eSize, eSize);
- *
- * // Draw dividing line.
- * stroke(100)
- * line(0, height/2, width, height/2);
- *
- * // Draw text.
- * noStroke();
- * fill(0);
- * var spacing = 15;
- * text("x = " + x1, 0, y1 + spacing);
- * text("sqrt(x) = " + x2, 0, y2 + spacing);
- * }
- * </code></div>
- *
- * @alt
- * horizontal center line squareroot values displayed on top and regular on bottom.
- *
- */
- p5.prototype.sqrt = Math.sqrt;
-
- // Calculate the length of the hypotenuse of a right triangle
- // This won't under- or overflow in intermediate steps
- // https://en.wikipedia.org/wiki/Hypot
- function hypot(x, y, z) {
- // Use the native implementation if it's available
- if (typeof Math.hypot === 'function') {
- return Math.hypot.apply(null, arguments);
- }
-
- // Otherwise use the V8 implementation
- // https://github.com/v8/v8/blob/8cd3cf297287e581a49e487067f5cbd991b27123/src/js/math.js#L217
- var length = arguments.length;
- var args = [];
- var max = 0;
- for (var i = 0; i < length; i++) {
- var n = arguments[i];
- n = +n;
- if (n === Infinity || n === -Infinity) {
- return Infinity;
- }
- n = Math.abs(n);
- if (n > max) {
- max = n;
- }
- args[i] = n;
- }
-
- if (max === 0) {
- max = 1;
- }
- var sum = 0;
- var compensation = 0;
- for (var j = 0; j < length; j++) {
- var m = args[j] / max;
- var summand = m * m - compensation;
- var preliminary = sum + summand;
- compensation = (preliminary - sum) - summand;
- sum = preliminary;
- }
- return Math.sqrt(sum) * max;
- }
-
- module.exports = p5;
-
- },{"../core/core":37}],64:[function(_dereq_,module,exports){
- /**
- * @module Math
- * @submodule Math
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
-
- /**
- * Creates a new p5.Vector (the datatype for storing vectors). This provides a
- * two or three dimensional vector, specifically a Euclidean (also known as
- * geometric) vector. A vector is an entity that has both magnitude and
- * direction.
- *
- * @method createVector
- * @param {Number} [x] x component of the vector
- * @param {Number} [y] y component of the vector
- * @param {Number} [z] z component of the vector
- */
- p5.prototype.createVector = function (x, y, z) {
- if (this instanceof p5) {
- return new p5.Vector(this, arguments);
- } else {
- return new p5.Vector(x, y, z);
- }
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],65:[function(_dereq_,module,exports){
- //////////////////////////////////////////////////////////////
-
- // http://mrl.nyu.edu/~perlin/noise/
- // Adapting from PApplet.java
- // which was adapted from toxi
- // which was adapted from the german demo group farbrausch
- // as used in their demo "art": http://www.farb-rausch.de/fr010src.zip
-
- // someday we might consider using "improved noise"
- // http://mrl.nyu.edu/~perlin/paper445.pdf
- // See: https://github.com/shiffman/The-Nature-of-Code-Examples-p5.js/
- // blob/master/introduction/Noise1D/noise.js
-
- /**
- * @module Math
- * @submodule Noise
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- var PERLIN_YWRAPB = 4;
- var PERLIN_YWRAP = 1<<PERLIN_YWRAPB;
- var PERLIN_ZWRAPB = 8;
- var PERLIN_ZWRAP = 1<<PERLIN_ZWRAPB;
- var PERLIN_SIZE = 4095;
-
- var perlin_octaves = 4; // default to medium smooth
- var perlin_amp_falloff = 0.5; // 50% reduction/octave
-
- var scaled_cosine = function(i) {
- return 0.5*(1.0-Math.cos(i*Math.PI));
- };
-
- var perlin; // will be initialized lazily by noise() or noiseSeed()
-
-
- /**
- * Returns the Perlin noise value at specified coordinates. Perlin noise is
- * a random sequence generator producing a more natural ordered, harmonic
- * succession of numbers compared to the standard <b>random()</b> function.
- * It was invented by Ken Perlin in the 1980s and been used since in
- * graphical applications to produce procedural textures, natural motion,
- * shapes, terrains etc.<br /><br /> The main difference to the
- * <b>random()</b> function is that Perlin noise is defined in an infinite
- * n-dimensional space where each pair of coordinates corresponds to a
- * fixed semi-random value (fixed only for the lifespan of the program; see
- * the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise,
- * depending on the number of coordinates given. The resulting value will
- * always be between 0.0 and 1.0. The noise value can be animated by moving
- * through the noise space as demonstrated in the example above. The 2nd
- * and 3rd dimension can also be interpreted as time.<br /><br />The actual
- * noise is structured similar to an audio signal, in respect to the
- * function's use of frequencies. Similar to the concept of harmonics in
- * physics, perlin noise is computed over several octaves which are added
- * together for the final result. <br /><br />Another way to adjust the
- * character of the resulting sequence is the scale of the input
- * coordinates. As the function works within an infinite space the value of
- * the coordinates doesn't matter as such, only the distance between
- * successive coordinates does (eg. when using <b>noise()</b> within a
- * loop). As a general rule the smaller the difference between coordinates,
- * the smoother the resulting noise sequence will be. Steps of 0.005-0.03
- * work best for most applications, but this will differ depending on use.
- *
- *
- * @method noise
- * @param {Number} x x-coordinate in noise space
- * @param {Number} y y-coordinate in noise space
- * @param {Number} z z-coordinate in noise space
- * @return {Number} Perlin noise value (between 0 and 1) at specified
- * coordinates
- * @example
- * <div>
- * <code>var xoff = 0.0;
- *
- * function draw() {
- * background(204);
- * xoff = xoff + .01;
- * var n = noise(xoff) * width;
- * line(n, 0, n, height);
- * }
- * </code>
- * </div>
- * <div>
- * <code>var noiseScale=0.02;
- *
- * function draw() {
- * background(0);
- * for (var x=0; x < width; x++) {
- * var noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
- * stroke(noiseVal*255);
- * line(x, mouseY+noiseVal*80, x, height);
- * }
- * }
- * </code>
- * </div>
- *
- * @alt
- * vertical line moves left to right with updating noise values.
- * horizontal wave pattern effected by mouse x-position & updating noise values.
- *
- */
-
- p5.prototype.noise = function(x,y,z) {
- y = y || 0;
- z = z || 0;
-
- if (perlin == null) {
- perlin = new Array(PERLIN_SIZE + 1);
- for (var i = 0; i < PERLIN_SIZE + 1; i++) {
- perlin[i] = Math.random();
- }
- }
-
- if (x<0) { x=-x; }
- if (y<0) { y=-y; }
- if (z<0) { z=-z; }
-
- var xi=Math.floor(x), yi=Math.floor(y), zi=Math.floor(z);
- var xf = x - xi;
- var yf = y - yi;
- var zf = z - zi;
- var rxf, ryf;
-
- var r=0;
- var ampl=0.5;
-
- var n1,n2,n3;
-
- for (var o=0; o<perlin_octaves; o++) {
- var of=xi+(yi<<PERLIN_YWRAPB)+(zi<<PERLIN_ZWRAPB);
-
- rxf = scaled_cosine(xf);
- ryf = scaled_cosine(yf);
-
- n1 = perlin[of&PERLIN_SIZE];
- n1 += rxf*(perlin[(of+1)&PERLIN_SIZE]-n1);
- n2 = perlin[(of+PERLIN_YWRAP)&PERLIN_SIZE];
- n2 += rxf*(perlin[(of+PERLIN_YWRAP+1)&PERLIN_SIZE]-n2);
- n1 += ryf*(n2-n1);
-
- of += PERLIN_ZWRAP;
- n2 = perlin[of&PERLIN_SIZE];
- n2 += rxf*(perlin[(of+1)&PERLIN_SIZE]-n2);
- n3 = perlin[(of+PERLIN_YWRAP)&PERLIN_SIZE];
- n3 += rxf*(perlin[(of+PERLIN_YWRAP+1)&PERLIN_SIZE]-n3);
- n2 += ryf*(n3-n2);
-
- n1 += scaled_cosine(zf)*(n2-n1);
-
- r += n1*ampl;
- ampl *= perlin_amp_falloff;
- xi<<=1;
- xf*=2;
- yi<<=1;
- yf*=2;
- zi<<=1;
- zf*=2;
-
- if (xf>=1.0) { xi++; xf--; }
- if (yf>=1.0) { yi++; yf--; }
- if (zf>=1.0) { zi++; zf--; }
- }
- return r;
- };
-
-
- /**
- *
- * Adjusts the character and level of detail produced by the Perlin noise
- * function. Similar to harmonics in physics, noise is computed over
- * several octaves. Lower octaves contribute more to the output signal and
- * as such define the overall intensity of the noise, whereas higher octaves
- * create finer grained details in the noise sequence.
- * <br><br>
- * By default, noise is computed over 4 octaves with each octave contributing
- * exactly half than its predecessor, starting at 50% strength for the 1st
- * octave. This falloff amount can be changed by adding an additional function
- * parameter. Eg. a falloff factor of 0.75 means each octave will now have
- * 75% impact (25% less) of the previous lower octave. Any value between
- * 0.0 and 1.0 is valid, however note that values greater than 0.5 might
- * result in greater than 1.0 values returned by <b>noise()</b>.
- * <br><br>
- * By changing these parameters, the signal created by the <b>noise()</b>
- * function can be adapted to fit very specific needs and characteristics.
- *
- * @method noiseDetail
- * @param {Number} lod number of octaves to be used by the noise
- * @param {Number} falloff falloff factor for each octave
- * @example
- * <div>
- * <code>
- *
- * var noiseVal;
- * var noiseScale=0.02;
- *
- * function setup() {
- * createCanvas(100,100);
- * }
- *
- * function draw() {
- * background(0);
- * for (var y = 0; y < height; y++) {
- * for (var x = 0; x < width/2; x++) {
- * noiseDetail(2,0.2);
- * noiseVal = noise((mouseX+x) * noiseScale,
- * (mouseY+y) * noiseScale);
- * stroke(noiseVal*255);
- * point(x,y);
- * noiseDetail(8,0.65);
- * noiseVal = noise((mouseX + x + width/2) * noiseScale,
- * (mouseY + y) * noiseScale);
- * stroke(noiseVal*255);
- * point(x + width/2, y);
- * }
- * }
- * }
- * </code>
- * </div>
- *
- * @alt
- * 2 vertical grey smokey patterns affected my mouse x-position and noise.
- *
- */
- p5.prototype.noiseDetail = function(lod, falloff) {
- if (lod>0) { perlin_octaves=lod; }
- if (falloff>0) { perlin_amp_falloff=falloff; }
- };
-
- /**
- * Sets the seed value for <b>noise()</b>. By default, <b>noise()</b>
- * produces different results each time the program is run. Set the
- * <b>value</b> parameter to a constant to return the same pseudo-random
- * numbers each time the software is run.
- *
- * @method noiseSeed
- * @param {Number} seed the seed value
- * @example
- * <div>
- * <code>var xoff = 0.0;
- *
- * function setup() {
- * noiseSeed(99);
- * stroke(0, 10);
- * }
- *
- * function draw() {
- * xoff = xoff + .01;
- * var n = noise(xoff) * width;
- * line(n, 0, n, height);
- * }
- * </code>
- * </div>
- *
- * @alt
- * vertical grey lines drawing in pattern affected by noise.
- *
- */
- p5.prototype.noiseSeed = function(seed) {
- // Linear Congruential Generator
- // Variant of a Lehman Generator
- var lcg = (function() {
- // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
- // m is basically chosen to be large (as it is the max period)
- // and for its relationships to a and c
- var m = 4294967296,
- // a - 1 should be divisible by m's prime factors
- a = 1664525,
- // c and m should be co-prime
- c = 1013904223,
- seed, z;
- return {
- setSeed : function(val) {
- // pick a random seed if val is undefined or null
- // the >>> 0 casts the seed to an unsigned 32-bit integer
- z = seed = (val == null ? Math.random() * m : val) >>> 0;
- },
- getSeed : function() {
- return seed;
- },
- rand : function() {
- // define the recurrence relationship
- z = (a * z + c) % m;
- // return a float in [0, 1)
- // if z = m then z / m = 0 therefore (z % m) / m < 1 always
- return z / m;
- }
- };
- }());
-
- lcg.setSeed(seed);
- perlin = new Array(PERLIN_SIZE + 1);
- for (var i = 0; i < PERLIN_SIZE + 1; i++) {
- perlin[i] = lcg.rand();
- }
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],66:[function(_dereq_,module,exports){
- /**
- * @module Math
- * @submodule Math
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var polarGeometry = _dereq_('./polargeometry');
- var constants = _dereq_('../core/constants');
-
- /**
- * A class to describe a two or three dimensional vector, specifically
- * a Euclidean (also known as geometric) vector. A vector is an entity
- * that has both magnitude and direction. The datatype, however, stores
- * the components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude
- * and direction can be accessed via the methods mag() and heading().
- * <br><br>
- * In many of the p5.js examples, you will see p5.Vector used to describe a
- * position, velocity, or acceleration. For example, if you consider a rectangle
- * moving across the screen, at any given instant it has a position (a vector
- * that points from the origin to its location), a velocity (the rate at which
- * the object's position changes per time unit, expressed as a vector), and
- * acceleration (the rate at which the object's velocity changes per time
- * unit, expressed as a vector).
- * <br><br>
- * Since vectors represent groupings of values, we cannot simply use
- * traditional addition/multiplication/etc. Instead, we'll need to do some
- * "vector" math, which is made easy by the methods inside the p5.Vector class.
- *
- * @class p5.Vector
- * @constructor
- * @param {Number} [x] x component of the vector
- * @param {Number} [y] y component of the vector
- * @param {Number} [z] z component of the vector
- * @example
- * <div>
- * <code>
- * var v1 = createVector(40, 50);
- * var v2 = createVector(40, 50);
- *
- * ellipse(v1.x, v1.y, 50, 50);
- * ellipse(v2.x, v2.y, 50, 50);
- * v1.add(v2);
- * ellipse(v1.x, v1.y, 50, 50);
- * </code>
- * </div>
- *
- * @alt
- * 2 white ellipses. One center-left the other bottom right and off canvas
- *
- */
- p5.Vector = function() {
- var x,y,z;
- // This is how it comes in with createVector()
- if(arguments[0] instanceof p5) {
- // save reference to p5 if passed in
- this.p5 = arguments[0];
- x = arguments[1][0] || 0;
- y = arguments[1][1] || 0;
- z = arguments[1][2] || 0;
- // This is what we'll get with new p5.Vector()
- } else {
- x = arguments[0] || 0;
- y = arguments[1] || 0;
- z = arguments[2] || 0;
- }
- /**
- * The x component of the vector
- * @property x
- * @type {Number}
- */
- this.x = x;
- /**
- * The y component of the vector
- * @property y
- * @type {Number}
- */
- this.y = y;
- /**
- * The z component of the vector
- * @property z
- * @type {Number}
- */
- this.z = z;
- };
-
- /**
- * Returns a string representation of a vector v by calling String(v)
- * or v.toString(). This method is useful for logging vectors in the
- * console.
- * @method toString
- * @example
- * <div class = "norender"><code>
- * function setup() {
- * var v = createVector(20,30);
- * print(String(v)); // prints "p5.Vector Object : [20, 30, 0]"
- * }
- * </div></code>
- *
- */
- p5.Vector.prototype.toString = function p5VectorToString() {
- return 'p5.Vector Object : ['+ this.x +', '+ this.y +', '+ this.z + ']';
- };
-
- /**
- * Sets the x, y, and z component of the vector using two or three separate
- * variables, the data from a p5.Vector, or the values from a float array.
- * @method set
- *
- * @param {Number|p5.Vector|Array} [x] the x component of the vector or a
- * p5.Vector or an Array
- * @param {Number} [y] the y component of the vector
- * @param {Number} [z] the z component of the vector
- * @example
- * <div class="norender">
- * <code>
- * function setup() {
- * var v = createVector(1, 2, 3);
- * v.set(4,5,6); // Sets vector to [4, 5, 6]
- *
- * var v1 = createVector(0, 0, 0);
- * var arr = [1, 2, 3];
- * v1.set(arr); // Sets vector to [1, 2, 3]
- * }
- * </code>
- * </div>
- */
- p5.Vector.prototype.set = function (x, y, z) {
- if (x instanceof p5.Vector) {
- this.x = x.x || 0;
- this.y = x.y || 0;
- this.z = x.z || 0;
- return this;
- }
- if (x instanceof Array) {
- this.x = x[0] || 0;
- this.y = x[1] || 0;
- this.z = x[2] || 0;
- return this;
- }
- this.x = x || 0;
- this.y = y || 0;
- this.z = z || 0;
- return this;
- };
-
- /**
- * Gets a copy of the vector, returns a p5.Vector object.
- *
- * @method copy
- * @return {p5.Vector} the copy of the p5.Vector object
- * @example
- * <div class="norender">
- * <code>
- * var v1 = createVector(1, 2, 3);
- * var v2 = v1.copy();
- * print(v1.x == v2.x && v1.y == v2.y && v1.z == v2.z);
- * // Prints "true"
- * </code>
- * </div>
- */
- p5.Vector.prototype.copy = function () {
- if (this.p5) {
- return new p5.Vector(this.p5,[this.x, this.y, this.z]);
- } else {
- return new p5.Vector(this.x,this.y,this.z);
- }
- };
-
- /**
- * Adds x, y, and z components to a vector, adds one vector to another, or
- * adds two independent vectors together. The version of the method that adds
- * two vectors together is a static method and returns a p5.Vector, the others
- * acts directly on the vector. See the examples for more context.
- *
- * @method add
- * @chainable
- * @param {Number|p5.Vector|Array} x the x component of the vector to be
- * added or a p5.Vector or an Array
- * @param {Number} [y] the y component of the vector to be
- * added
- * @param {Number} [z] the z component of the vector to be
- * added
- * @return {p5.Vector} the p5.Vector object.
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(1, 2, 3);
- * v.add(4,5,6);
- * // v's components are set to [5, 7, 9]
- * </code>
- * </div>
- * <div class="norender">
- * <code>
- * // Static method
- * var v1 = createVector(1, 2, 3);
- * var v2 = createVector(2, 3, 4);
- *
- * var v3 = p5.Vector.add(v1, v2);
- * // v3 has components [3, 5, 7]
- * </code>
- * </div>
- */
- p5.Vector.prototype.add = function (x, y, z) {
- if (x instanceof p5.Vector) {
- this.x += x.x || 0;
- this.y += x.y || 0;
- this.z += x.z || 0;
- return this;
- }
- if (x instanceof Array) {
- this.x += x[0] || 0;
- this.y += x[1] || 0;
- this.z += x[2] || 0;
- return this;
- }
- this.x += x || 0;
- this.y += y || 0;
- this.z += z || 0;
- return this;
- };
-
- /**
- * Subtracts x, y, and z components from a vector, subtracts one vector from
- * another, or subtracts two independent vectors. The version of the method
- * that subtracts two vectors is a static method and returns a p5.Vector, the
- * other acts directly on the vector. See the examples for more context.
- *
- * @method sub
- * @chainable
- * @param {Number|p5.Vector|Array} x the x component of the vector or a
- * p5.Vector or an Array
- * @param {Number} [y] the y component of the vector
- * @param {Number} [z] the z component of the vector
- * @return {p5.Vector} p5.Vector object.
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(4, 5, 6);
- * v.sub(1, 1, 1);
- * // v's components are set to [3, 4, 5]
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * // Static method
- * var v1 = createVector(2, 3, 4);
- * var v2 = createVector(1, 2, 3);
- *
- * var v3 = p5.Vector.sub(v1, v2);
- * // v3 has components [1, 1, 1]
- * </code>
- * </div>
- */
- p5.Vector.prototype.sub = function (x, y, z) {
- if (x instanceof p5.Vector) {
- this.x -= x.x || 0;
- this.y -= x.y || 0;
- this.z -= x.z || 0;
- return this;
- }
- if (x instanceof Array) {
- this.x -= x[0] || 0;
- this.y -= x[1] || 0;
- this.z -= x[2] || 0;
- return this;
- }
- this.x -= x || 0;
- this.y -= y || 0;
- this.z -= z || 0;
- return this;
- };
-
- /**
- * Multiply the vector by a scalar. The static version of this method
- * creates a new p5.Vector while the non static version acts on the vector
- * directly. See the examples for more context.
- *
- * @method mult
- * @chainable
- * @param {Number} n the number to multiply with the vector
- * @return {p5.Vector} a reference to the p5.Vector object (allow chaining)
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(1, 2, 3);
- * v.mult(2);
- * // v's components are set to [2, 4, 6]
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * // Static method
- * var v1 = createVector(1, 2, 3);
- * var v2 = p5.Vector.mult(v1, 2);
- * // v2 has components [2, 4, 6]
- * </code>
- * </div>
- */
- p5.Vector.prototype.mult = function (n) {
- this.x *= n || 0;
- this.y *= n || 0;
- this.z *= n || 0;
- return this;
- };
-
- /**
- * Divide the vector by a scalar. The static version of this method creates a
- * new p5.Vector while the non static version acts on the vector directly.
- * See the examples for more context.
- *
- * @method div
- * @chainable
- * @param {number} n the number to divide the vector by
- * @return {p5.Vector} a reference to the p5.Vector object (allow chaining)
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(6, 4, 2);
- * v.div(2); //v's components are set to [3, 2, 1]
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * // Static method
- * var v1 = createVector(6, 4, 2);
- * var v2 = p5.Vector.div(v, 2);
- * // v2 has components [3, 2, 1]
- * </code>
- * </div>
- */
- p5.Vector.prototype.div = function (n) {
- this.x /= n;
- this.y /= n;
- this.z /= n;
- return this;
- };
-
- /**
- * Calculates the magnitude (length) of the vector and returns the result as
- * a float (this is simply the equation sqrt(x*x + y*y + z*z).)
- *
- * @method mag
- * @return {Number} magnitude of the vector
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(20.0, 30.0, 40.0);
- * var m = v.mag();
- * print(m); // Prints "53.85164807134504"
- * </code>
- * </div>
- */
- p5.Vector.prototype.mag = function () {
- return Math.sqrt(this.magSq());
- };
-
- /**
- * Calculates the squared magnitude of the vector and returns the result
- * as a float (this is simply the equation <em>(x*x + y*y + z*z)</em>.)
- * Faster if the real length is not required in the
- * case of comparing vectors, etc.
- *
- * @method magSq
- * @return {number} squared magnitude of the vector
- * @example
- * <div class="norender">
- * <code>
- * // Static method
- * var v1 = createVector(6, 4, 2);
- * print(v1.magSq()); // Prints "56"
- * </code>
- * </div>
- */
- p5.Vector.prototype.magSq = function () {
- var x = this.x, y = this.y, z = this.z;
- return (x * x + y * y + z * z);
- };
-
- /**
- * Calculates the dot product of two vectors. The version of the method
- * that computes the dot product of two independent vectors is a static
- * method. See the examples for more context.
- *
- *
- * @method dot
- * @param {Number|p5.Vector} x x component of the vector or a p5.Vector
- * @param {Number} [y] y component of the vector
- * @param {Number} [z] z component of the vector
- * @return {Number} the dot product
- *
- * @example
- * <div class="norender">
- * <code>
- * var v1 = createVector(1, 2, 3);
- * var v2 = createVector(2, 3, 4);
- *
- * print(v1.dot(v2)); // Prints "20"
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * //Static method
- * var v1 = createVector(1, 2, 3);
- * var v2 = createVector(3, 2, 1);
- * print (p5.Vector.dot(v1, v2)); // Prints "10"
- * </code>
- * </div>
- */
- p5.Vector.prototype.dot = function (x, y, z) {
- if (x instanceof p5.Vector) {
- return this.dot(x.x, x.y, x.z);
- }
- return this.x * (x || 0) +
- this.y * (y || 0) +
- this.z * (z || 0);
- };
-
- /**
- * Calculates and returns a vector composed of the cross product between
- * two vectors. Both the static and non static methods return a new p5.Vector.
- * See the examples for more context.
- *
- * @method cross
- * @param {p5.Vector} v p5.Vector to be crossed
- * @return {p5.Vector} p5.Vector composed of cross product
- * @example
- * <div class="norender">
- * <code>
- * var v1 = createVector(1, 2, 3);
- * var v2 = createVector(1, 2, 3);
- *
- * v1.cross(v2); // v's components are [0, 0, 0]
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * // Static method
- * var v1 = createVector(1, 0, 0);
- * var v2 = createVector(0, 1, 0);
- *
- * var crossProduct = p5.Vector.cross(v1, v2);
- * // crossProduct has components [0, 0, 1]
- * </code>
- * </div>
- */
- p5.Vector.prototype.cross = function (v) {
- var x = this.y * v.z - this.z * v.y;
- var y = this.z * v.x - this.x * v.z;
- var z = this.x * v.y - this.y * v.x;
- if (this.p5) {
- return new p5.Vector(this.p5,[x,y,z]);
- } else {
- return new p5.Vector(x,y,z);
- }
- };
-
- /**
- * Calculates the Euclidean distance between two points (considering a
- * point as a vector object).
- *
- * @method dist
- * @param {p5.Vector} v the x, y, and z coordinates of a p5.Vector
- * @return {Number} the distance
- * @example
- * <div class="norender">
- * <code>
- * var v1 = createVector(1, 0, 0);
- * var v2 = createVector(0, 1, 0);
- *
- * var distance = v1.dist(v2); // distance is 1.4142...
- * </code>
- * </div>
- * <div class="norender">
- * <code>
- * // Static method
- * var v1 = createVector(1, 0, 0);
- * var v2 = createVector(0, 1, 0);
- *
- * var distance = p5.Vector.dist(v1,v2);
- * // distance is 1.4142...
- * </code>
- * </div>
- */
- p5.Vector.prototype.dist = function (v) {
- var d = v.copy().sub(this);
- return d.mag();
- };
-
- /**
- * Normalize the vector to length 1 (make it a unit vector).
- *
- * @method normalize
- * @return {p5.Vector} normalized p5.Vector
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(10, 20, 2);
- * // v has components [10.0, 20.0, 2.0]
- * v.normalize();
- * // v's components are set to
- * // [0.4454354, 0.8908708, 0.089087084]
- * </code>
- * </div>
- *
- */
- p5.Vector.prototype.normalize = function () {
- return this.mag() === 0 ? this : this.div(this.mag());
- };
-
- /**
- * Limit the magnitude of this vector to the value used for the <b>max</b>
- * parameter.
- *
- * @method limit
- * @param {Number} max the maximum magnitude for the vector
- * @return {p5.Vector} the modified p5.Vector
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(10, 20, 2);
- * // v has components [10.0, 20.0, 2.0]
- * v.limit(5);
- * // v's components are set to
- * // [2.2271771, 4.4543543, 0.4454354]
- * </code>
- * </div>
- */
- p5.Vector.prototype.limit = function (max) {
- var mSq = this.magSq();
- if(mSq > max*max) {
- this.div(Math.sqrt(mSq)); //normalize it
- this.mult(max);
- }
- return this;
- };
-
- /**
- * Set the magnitude of this vector to the value used for the <b>len</b>
- * parameter.
- *
- * @method setMag
- * @param {number} len the new length for this vector
- * @return {p5.Vector} the modified p5.Vector
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(10, 20, 2);
- * // v has components [10.0, 20.0, 2.0]
- * v.setMag(10);
- * // v's components are set to [6.0, 8.0, 0.0]
- * </code>
- * </div>
- */
- p5.Vector.prototype.setMag = function (n) {
- return this.normalize().mult(n);
- };
-
- /**
- * Calculate the angle of rotation for this vector (only 2D vectors)
- *
- * @method heading
- * @return {Number} the angle of rotation
- * @example
- * <div class = "norender"><code>
- * function setup() {
- * var v1 = createVector(30,50);
- * print(v1.heading()); // 1.0303768265243125
- *
- * var v1 = createVector(40,50);
- * print(v1.heading()); // 0.8960553845713439
- *
- * var v1 = createVector(30,70);
- * print(v1.heading()); // 1.1659045405098132
- * }
- * </div></code>
- */
- p5.Vector.prototype.heading = function () {
- var h = Math.atan2(this.y, this.x);
- if (this.p5) {
- if (this.p5._angleMode === constants.RADIANS) {
- return h;
- } else {
- return polarGeometry.radiansToDegrees(h);
- }
- } else {
- return h;
- }
- };
-
- /**
- * Rotate the vector by an angle (only 2D vectors), magnitude remains the
- * same
- *
- * @method rotate
- * @param {number} angle the angle of rotation
- * @return {p5.Vector} the modified p5.Vector
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(10.0, 20.0);
- * // v has components [10.0, 20.0, 0.0]
- * v.rotate(HALF_PI);
- * // v's components are set to [-20.0, 9.999999, 0.0]
- * </code>
- * </div>
- */
- p5.Vector.prototype.rotate = function (a) {
- var newHeading = this.heading() + a;
- if (this.p5) {
- if (this.p5._angleMode === constants.DEGREES) {
- newHeading = polarGeometry.degreesToRadians(newHeading);
- }
- }
- var mag = this.mag();
- this.x = Math.cos(newHeading) * mag;
- this.y = Math.sin(newHeading) * mag;
- return this;
- };
-
- /**
- * Linear interpolate the vector to another vector
- *
- * @method lerp
- * @param {p5.Vector} x the x component or the p5.Vector to lerp to
- * @param {p5.Vector} [y] y the y component
- * @param {p5.Vector} [z] z the z component
- * @param {Number} amt the amount of interpolation; some value between 0.0
- * (old vector) and 1.0 (new vector). 0.1 is very near
- * the new vector. 0.5 is halfway in between.
- * @return {p5.Vector} the modified p5.Vector
- * @example
- * <div class="norender">
- * <code>
- * var v = createVector(1, 1, 0);
- *
- * v.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]
- * </code>
- * </div>
- *
- * <div class="norender">
- * <code>
- * var v1 = createVector(0, 0, 0);
- * var v2 = createVector(100, 100, 0);
- *
- * var v3 = p5.Vector.lerp(v1, v2, 0.5);
- * // v3 has components [50,50,0]
- * </code>
- * </div>
- */
- p5.Vector.prototype.lerp = function (x, y, z, amt) {
- if (x instanceof p5.Vector) {
- return this.lerp(x.x, x.y, x.z, y);
- }
- this.x += (x - this.x) * amt || 0;
- this.y += (y - this.y) * amt || 0;
- this.z += (z - this.z) * amt || 0;
- return this;
- };
-
- /**
- * Return a representation of this vector as a float array. This is only
- * for temporary use. If used in any other fashion, the contents should be
- * copied by using the <b>p5.Vector.copy()</b> method to copy into your own
- * array.
- *
- * @method array
- * @return {Array} an Array with the 3 values
- * @example
- * <div class = "norender"><code>
- * function setup() {
- * var v = createVector(20,30);
- * print(v.array()); // Prints : Array [20, 30, 0]
- * }
- * </div></code>
- * <div class="norender">
- * <code>
- * var v = createVector(10.0, 20.0, 30.0);
- * var f = v.array();
- * print(f[0]); // Prints "10.0"
- * print(f[1]); // Prints "20.0"
- * print(f[2]); // Prints "30.0"
- * </code>
- * </div>
- */
- p5.Vector.prototype.array = function () {
- return [this.x || 0, this.y || 0, this.z || 0];
- };
-
- /**
- * Equality check against a p5.Vector
- *
- * @method equals
- * @param {Number|p5.Vector|Array} [x] the x component of the vector or a
- * p5.Vector or an Array
- * @param {Number} [y] the y component of the vector
- * @param {Number} [z] the z component of the vector
- * @return {Boolean} whether the vectors are equals
- * @example
- * <div class = "norender"><code>
- * v1 = createVector(5,10,20);
- * v2 = createVector(5,10,20);
- * v3 = createVector(13,10,19);
- *
- * print(v1.equals(v2.x,v2.y,v2.z)); // true
- * print(v1.equals(v3.x,v3.y,v3.z)); // false
- * </div></code>
- * <div class="norender">
- * <code>
- * var v1 = createVector(10.0, 20.0, 30.0);
- * var v2 = createVector(10.0, 20.0, 30.0);
- * var v3 = createVector(0.0, 0.0, 0.0);
- * print (v1.equals(v2)) // true
- * print (v1.equals(v3)) // false
- * </code>
- * </div>
- */
- p5.Vector.prototype.equals = function (x, y, z) {
- var a, b, c;
- if (x instanceof p5.Vector) {
- a = x.x || 0;
- b = x.y || 0;
- c = x.z || 0;
- } else if (x instanceof Array) {
- a = x[0] || 0;
- b = x[1] || 0;
- c = x[2] || 0;
- } else {
- a = x || 0;
- b = y || 0;
- c = z || 0;
- }
- return this.x === a && this.y === b && this.z === c;
- };
-
-
- // Static Methods
-
-
- /**
- * Make a new 2D unit vector from an angle
- *
- * @method fromAngle
- * @static
- * @param {Number} angle the desired angle
- * @return {p5.Vector} the new p5.Vector object
- * @example
- * <div>
- * <code>
- * function draw() {
- * background (200);
- *
- * // Create a variable, proportional to the mouseX,
- * // varying from 0-360, to represent an angle in degrees.
- * angleMode(DEGREES);
- * var myDegrees = map(mouseX, 0,width, 0,360);
- *
- * // Display that variable in an onscreen text.
- * // (Note the nfc() function to truncate additional decimal places,
- * // and the "\xB0" character for the degree symbol.)
- * var readout = "angle = " + nfc(myDegrees,1,1) + "\xB0"
- * noStroke();
- * fill (0);
- * text (readout, 5, 15);
- *
- * // Create a p5.Vector using the fromAngle function,
- * // and extract its x and y components.
- * var v = p5.Vector.fromAngle(radians(myDegrees));
- * var vx = v.x;
- * var vy = v.y;
- *
- * push();
- * translate (width/2, height/2);
- * noFill();
- * stroke (150);
- * line (0,0, 30,0);
- * stroke (0);
- * line (0,0, 30*vx, 30*vy);
- * pop()
- * }
- * </code>
- * </div>
- */
- p5.Vector.fromAngle = function(angle) {
- if (this.p5) {
- if (this.p5._angleMode === constants.DEGREES) {
- angle = polarGeometry.degreesToRadians(angle);
- }
- }
- if (this.p5) {
- return new p5.Vector(this.p5,[Math.cos(angle),Math.sin(angle),0]);
- } else {
- return new p5.Vector(Math.cos(angle),Math.sin(angle),0);
- }
- };
-
- /**
- * Make a new 2D unit vector from a random angle
- *
- * @method random2D
- * @static
- * @return {p5.Vector} the new p5.Vector object
- * @example
- * <div class="norender">
- * <code>
- * var v = p5.Vector.random2D();
- * // May make v's attributes something like:
- * // [0.61554617, -0.51195765, 0.0] or
- * // [-0.4695841, -0.14366731, 0.0] or
- * // [0.6091097, -0.22805278, 0.0]
- * </code>
- * </div>
- */
- p5.Vector.random2D = function () {
- var angle;
- // A lot of nonsense to determine if we know about a
- // p5 sketch and whether we should make a random angle in degrees or radians
- if (this.p5) {
- if (this.p5._angleMode === constants.DEGREES) {
- angle = this.p5.random(360);
- } else {
- angle = this.p5.random(constants.TWO_PI);
- }
- } else {
- angle = Math.random()*Math.PI*2;
- }
- return this.fromAngle(angle);
- };
-
- /**
- * Make a new random 3D unit vector.
- *
- * @method random3D
- * @static
- * @return {p5.Vector} the new p5.Vector object
- * @example
- * <div class="norender">
- * <code>
- * var v = p5.Vector.random3D();
- * // May make v's attributes something like:
- * // [0.61554617, -0.51195765, 0.599168] or
- * // [-0.4695841, -0.14366731, -0.8711202] or
- * // [0.6091097, -0.22805278, -0.7595902]
- * </code>
- * </div>
- */
- p5.Vector.random3D = function () {
- var angle,vz;
- // If we know about p5
- if (this.p5) {
- angle = this.p5.random(0,constants.TWO_PI);
- vz = this.p5.random(-1,1);
- } else {
- angle = Math.random()*Math.PI*2;
- vz = Math.random()*2-1;
- }
- var vx = Math.sqrt(1-vz*vz)*Math.cos(angle);
- var vy = Math.sqrt(1-vz*vz)*Math.sin(angle);
- if (this.p5) {
- return new p5.Vector(this.p5,[vx,vy,vz]);
- } else {
- return new p5.Vector(vx,vy,vz);
- }
- };
-
-
- /**
- * Adds two vectors together and returns a new one.
- *
- * @static
- * @param {p5.Vector} v1 a p5.Vector to add
- * @param {p5.Vector} v2 a p5.Vector to add
- * @param {p5.Vector} target if undefined a new vector will be created
- * @return {p5.Vector} the resulting p5.Vector
- *
- */
-
- p5.Vector.add = function (v1, v2, target) {
- if (!target) {
- target = v1.copy();
- } else {
- target.set(v1);
- }
- target.add(v2);
- return target;
- };
-
- /**
- * Subtracts one p5.Vector from another and returns a new one. The second
- * vector (v2) is subtracted from the first (v1), resulting in v1-v2.
- *
- * @static
- * @param {p5.Vector} v1 a p5.Vector to subtract from
- * @param {p5.Vector} v2 a p5.Vector to subtract
- * @param {p5.Vector} target if undefined a new vector will be created
- * @return {p5.Vector} the resulting p5.Vector
- */
-
- p5.Vector.sub = function (v1, v2, target) {
- if (!target) {
- target = v1.copy();
- } else {
- target.set(v1);
- }
- target.sub(v2);
- return target;
- };
-
-
- /**
- * Multiplies a vector by a scalar and returns a new vector.
- *
- * @static
- * @param {p5.Vector} v the p5.Vector to multiply
- * @param {Number} n the scalar
- * @param {p5.Vector} target if undefined a new vector will be created
- * @return {p5.Vector} the resulting new p5.Vector
- */
- p5.Vector.mult = function (v, n, target) {
- if (!target) {
- target = v.copy();
- } else {
- target.set(v);
- }
- target.mult(n);
- return target;
- };
-
- /**
- * Divides a vector by a scalar and returns a new vector.
- *
- * @static
- * @param {p5.Vector} v the p5.Vector to divide
- * @param {Number} n the scalar
- * @param {p5.Vector} target if undefined a new vector will be created
- * @return {p5.Vector} the resulting new p5.Vector
- */
- p5.Vector.div = function (v, n, target) {
- if (!target) {
- target = v.copy();
- } else {
- target.set(v);
- }
- target.div(n);
- return target;
- };
-
-
- /**
- * Calculates the dot product of two vectors.
- *
- * @static
- * @param {p5.Vector} v1 the first p5.Vector
- * @param {p5.Vector} v2 the second p5.Vector
- * @return {Number} the dot product
- */
- p5.Vector.dot = function (v1, v2) {
- return v1.dot(v2);
- };
-
- /**
- * Calculates the cross product of two vectors.
- *
- * @static
- * @param {p5.Vector} v1 the first p5.Vector
- * @param {p5.Vector} v2 the second p5.Vector
- * @return {Number} the cross product
- */
- p5.Vector.cross = function (v1, v2) {
- return v1.cross(v2);
- };
-
- /**
- * Calculates the Euclidean distance between two points (considering a
- * point as a vector object).
- *
- * @static
- * @param {p5.Vector} v1 the first p5.Vector
- * @param {p5.Vector} v2 the second p5.Vector
- * @return {Number} the distance
- */
- p5.Vector.dist = function (v1,v2) {
- return v1.dist(v2);
- };
-
- /**
- * Linear interpolate a vector to another vector and return the result as a
- * new vector.
- *
- * @static
- * @param {p5.Vector} v1 a starting p5.Vector
- * @param {p5.Vector} v2 the p5.Vector to lerp to
- * @param {Number} the amount of interpolation; some value between 0.0
- * (old vector) and 1.0 (new vector). 0.1 is very near
- * the new vector. 0.5 is halfway in between.
- */
- p5.Vector.lerp = function (v1, v2, amt, target) {
- if (!target) {
- target = v1.copy();
- } else {
- target.set(v1);
- }
- target.lerp(v2, amt);
- return target;
- };
-
- /**
- * Calculates and returns the angle (in radians) between two vectors.
- * @method angleBetween
- * @static
- * @param {p5.Vector} v1 the x, y, and z components of a p5.Vector
- * @param {p5.Vector} v2 the x, y, and z components of a p5.Vector
- * @return {Number} the angle between (in radians)
- * @example
- * <div class="norender">
- * <code>
- * var v1 = createVector(1, 0, 0);
- * var v2 = createVector(0, 1, 0);
- *
- * var angle = p5.Vector.angleBetween(v1, v2);
- * // angle is PI/2
- * </code>
- * </div>
- */
- p5.Vector.angleBetween = function (v1, v2) {
- var angle = Math.acos(v1.dot(v2) / (v1.mag() * v2.mag()));
- if (this.p5) {
- if (this.p5._angleMode === constants.DEGREES) {
- angle = polarGeometry.radiansToDegrees(angle);
- }
- }
- return angle;
- };
-
- /**
- * @static
- */
- p5.Vector.mag = function (vecT){
- var x = vecT.x,
- y = vecT.y,
- z = vecT.z;
- var magSq = x * x + y * y + z * z;
- return Math.sqrt(magSq);
- };
-
- module.exports = p5.Vector;
-
- },{"../core/constants":36,"../core/core":37,"./polargeometry":67}],67:[function(_dereq_,module,exports){
-
- module.exports = {
-
- degreesToRadians: function(x) {
- return 2 * Math.PI * x / 360;
- },
-
- radiansToDegrees: function(x) {
- return 360 * x / (2 * Math.PI);
- }
-
- };
-
- },{}],68:[function(_dereq_,module,exports){
- /**
- * @module Math
- * @submodule Random
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- var seeded = false;
- var previous = false;
- var y2 = 0;
-
- // Linear Congruential Generator
- // Variant of a Lehman Generator
- var lcg = (function() {
- // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
- // m is basically chosen to be large (as it is the max period)
- // and for its relationships to a and c
- var m = 4294967296,
- // a - 1 should be divisible by m's prime factors
- a = 1664525,
- // c and m should be co-prime
- c = 1013904223,
- seed, z;
- return {
- setSeed : function(val) {
- // pick a random seed if val is undefined or null
- // the >>> 0 casts the seed to an unsigned 32-bit integer
- z = seed = (val == null ? Math.random() * m : val) >>> 0;
- },
- getSeed : function() {
- return seed;
- },
- rand : function() {
- // define the recurrence relationship
- z = (a * z + c) % m;
- // return a float in [0, 1)
- // if z = m then z / m = 0 therefore (z % m) / m < 1 always
- return z / m;
- }
- };
- }());
-
- /**
- * Sets the seed value for random().
- *
- * By default, random() produces different results each time the program
- * is run. Set the seed parameter to a constant to return the same
- * pseudo-random numbers each time the software is run.
- *
- * @method randomSeed
- * @param {Number} seed the seed value
- * @example
- * <div>
- * <code>
- * randomSeed(99);
- * for (var i=0; i < 100; i++) {
- * var r = random(0, 255);
- * stroke(r);
- * line(i, 0, i, 100);
- * }
- * </code>
- * </div>
- *
- * @alt
- * many vertical lines drawn in white, black or grey.
- *
- */
- p5.prototype.randomSeed = function(seed) {
- lcg.setSeed(seed);
- seeded = true;
- previous = false;
- };
-
- /**
- * Return a random floating-point number.
- *
- * Takes either 0, 1 or 2 arguments.
- *
- * If no argument is given, returns a random number from 0
- * up to (but not including) 1.
- *
- * If one argument is given and it is a number, returns a random number from 0
- * up to (but not including) the number.
- *
- * If one argument is given and it is an array, returns a random element from
- * that array.
- *
- * If two arguments are given, returns a random number from the
- * first argument up to (but not including) the second argument.
- *
- * @method random
- * @param {Number} [min] the lower bound (inclusive)
- * @param {Number} [max] the upper bound (exclusive)
- * @return {Number|mixed} the random number or a random element in choices
- * @example
- * <div>
- * <code>
- * for (var i = 0; i < 100; i++) {
- * var r = random(50);
- * stroke(r*5);
- * line(50, i, 50+r, i);
- * }
- * </code>
- * </div>
- * <div>
- * <code>
- * for (var i = 0; i < 100; i++) {
- * var r = random(-50, 50);
- * line(50,i,50+r,i);
- * }
- * </code>
- * </div>
- * <div>
- * <code>
- * // Get a random element from an array using the random(Array) syntax
- * var words = [ "apple", "bear", "cat", "dog" ];
- * var word = random(words); // select random word
- * text(word,10,50); // draw the word
- * </code>
- * </div>
- *
- * @alt
- * 100 horizontal lines from center canvas to right. size+fill change each time
- * 100 horizontal lines from center of canvas. height & side change each render
- * word displayed at random. Either apple, bear, cat, or dog
- *
- */
- /**
- * @method random
- * @param {Array} choices the array to choose from
- * @return {mixed} the random element from the array
- * @example
- */
- p5.prototype.random = function (min, max) {
-
- var rand;
-
- if (seeded) {
- rand = lcg.rand();
- } else {
- rand = Math.random();
- }
- if (typeof min === 'undefined') {
- return rand;
- } else
- if (typeof max === 'undefined') {
- if (min instanceof Array) {
- return min[Math.floor(rand * min.length)];
- } else {
- return rand * min;
- }
- } else {
- if (min > max) {
- var tmp = min;
- min = max;
- max = tmp;
- }
-
- return rand * (max-min) + min;
- }
- };
-
-
- /**
- *
- * Returns a random number fitting a Gaussian, or
- * normal, distribution. There is theoretically no minimum or maximum
- * value that randomGaussian() might return. Rather, there is
- * just a very low probability that values far from the mean will be
- * returned; and a higher probability that numbers near the mean will
- * be returned.
- * <br><br>
- * Takes either 0, 1 or 2 arguments.<br>
- * If no args, returns a mean of 0 and standard deviation of 1.<br>
- * If one arg, that arg is the mean (standard deviation is 1).<br>
- * If two args, first is mean, second is standard deviation.
- *
- * @method randomGaussian
- * @param {Number} mean the mean
- * @param {Number} sd the standard deviation
- * @return {Number} the random number
- * @example
- * <div>
- * <code>for (var y = 0; y < 100; y++) {
- * var x = randomGaussian(50,15);
- * line(50, y, x, y);
- *}
- * </code>
- * </div>
- * <div>
- * <code>
- *var distribution = new Array(360);
- *
- *function setup() {
- * createCanvas(100, 100);
- * for (var i = 0; i < distribution.length; i++) {
- * distribution[i] = floor(randomGaussian(0,15));
- * }
- *}
- *
- *function draw() {
- * background(204);
- *
- * translate(width/2, width/2);
- *
- * for (var i = 0; i < distribution.length; i++) {
- * rotate(TWO_PI/distribution.length);
- * stroke(0);
- * var dist = abs(distribution[i]);
- * line(0, 0, dist, 0);
- * }
- *}
- * </code>
- * </div>
- * @alt
- * 100 horizontal lines from center of canvas. height & side change each render
- * black lines radiate from center of canvas. size determined each render
- */
- p5.prototype.randomGaussian = function(mean, sd) {
- var y1,x1,x2,w;
- if (previous) {
- y1 = y2;
- previous = false;
- } else {
- do {
- x1 = this.random(2) - 1;
- x2 = this.random(2) - 1;
- w = x1 * x1 + x2 * x2;
- } while (w >= 1);
- w = Math.sqrt((-2 * Math.log(w))/w);
- y1 = x1 * w;
- y2 = x2 * w;
- previous = true;
- }
-
- var m = mean || 0;
- var s = sd || 1;
- return y1*s + m;
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],69:[function(_dereq_,module,exports){
- /**
- * @module Math
- * @submodule Trigonometry
- * @for p5
- * @requires core
- * @requires polargeometry
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var polarGeometry = _dereq_('./polargeometry');
- var constants = _dereq_('../core/constants');
-
- p5.prototype._angleMode = constants.RADIANS;
-
- /**
- * The inverse of cos(), returns the arc cosine of a value. This function
- * expects the values in the range of -1 to 1 and values are returned in
- * the range 0 to PI (3.1415927).
- *
- * @method acos
- * @param {Number} value the value whose arc cosine is to be returned
- * @return {Number} the arc cosine of the given value
- *
- * @example
- * <div class= “norender">
- * <code>
- * var a = PI;
- * var c = cos(a);
- * var ac = acos(c);
- * // Prints: "3.1415927 : -1.0 : 3.1415927"
- * print(a + " : " + c + " : " + ac);
- * </code>
- * </div>
- *
- * <div class= “norender">
- * <code>
- * var a = PI + PI/4.0;
- * var c = cos(a);
- * var ac = acos(c);
- * // Prints: "3.926991 : -0.70710665 : 2.3561943"
- * print(a + " : " + c + " : " + ac);
- * </code>
- * </div>
- */
- p5.prototype.acos = function(ratio) {
- if (this._angleMode === constants.RADIANS) {
- return Math.acos(ratio);
- } else {
- return polarGeometry.radiansToDegrees(Math.acos(ratio));
- }
- };
-
- /**
- * The inverse of sin(), returns the arc sine of a value. This function
- * expects the values in the range of -1 to 1 and values are returned
- * in the range -PI/2 to PI/2.
- *
- * @method asin
- * @param {Number} value the value whose arc sine is to be returned
- * @return {Number} the arc sine of the given value
- *
- * @example
- * <div class= “norender">
- * <code>
- * var a = PI + PI/3;
- * var s = sin(a);
- * var as = asin(s);
- * // Prints: "1.0471976 : 0.86602545 : 1.0471976"
- * print(a + " : " + s + " : " + as);
- * </code>
- * </div>
- *
- * <div class= “norender">
- * <code>
- * var a = PI + PI/3.0;
- * var s = sin(a);
- * var as = asin(s);
- * // Prints: "4.1887903 : -0.86602545 : -1.0471976"
- * print(a + " : " + s + " : " + as);
- * </code>
- * </div>
- *
- */
- p5.prototype.asin = function(ratio) {
- if (this._angleMode === constants.RADIANS) {
- return Math.asin(ratio);
- } else {
- return polarGeometry.radiansToDegrees(Math.asin(ratio));
- }
- };
-
- /**
- * The inverse of tan(), returns the arc tangent of a value. This function
- * expects the values in the range of -Infinity to Infinity (exclusive) and
- * values are returned in the range -PI/2 to PI/2.
- *
- * @method atan
- * @param {Number} value the value whose arc tangent is to be returned
- * @return {Number} the arc tangent of the given value
- *
- * @example
- * <div class= “norender">
- * <code>
- * var a = PI + PI/3;
- * var t = tan(a);
- * var at = atan(t);
- * // Prints: "1.0471976 : 1.7320509 : 1.0471976"
- * print(a + " : " + t + " : " + at);
- * </code>
- * </div>
- *
- * <div class= “norender">
- * <code>
- * var a = PI + PI/3.0;
- * var t = tan(a);
- * var at = atan(t);
- * // Prints: "4.1887903 : 1.7320513 : 1.0471977"
- * print(a + " : " + t + " : " + at);
- * </code>
- * </div>
- *
- */
- p5.prototype.atan = function(ratio) {
- if (this._angleMode === constants.RADIANS) {
- return Math.atan(ratio);
- } else {
- return polarGeometry.radiansToDegrees(Math.atan(ratio));
- }
- };
-
- /**
- * Calculates the angle (in radians) from a specified point to the coordinate
- * origin as measured from the positive x-axis. Values are returned as a
- * float in the range from PI to -PI. The atan2() function is most often used
- * for orienting geometry to the position of the cursor.
- * <br><br>
- * Note: The y-coordinate of the point is the first parameter, and the
- * x-coordinate is the second parameter, due the the structure of calculating
- * the tangent.
- *
- * @method atan2
- * @param {Number} y y-coordinate of the point
- * @param {Number} x x-coordinate of the point
- * @return {Number} the arc tangent of the given point
- *
- * @example
- * <div>
- * <code>
- * function draw() {
- * background(204);
- * translate(width/2, height/2);
- * var a = atan2(mouseY-height/2, mouseX-width/2);
- * rotate(a);
- * rect(-30, -5, 60, 10);
- * }
- * </code>
- * </div>
- *
- * @alt
- * 60 by 10 rect at center of canvas rotates with mouse movements
- *
- */
- p5.prototype.atan2 = function (y, x) {
- if (this._angleMode === constants.RADIANS) {
- return Math.atan2(y, x);
- } else {
- return polarGeometry.radiansToDegrees(Math.atan2(y, x));
- }
- };
-
- /**
- * Calculates the cosine of an angle. This function takes into account the
- * current angleMode. Values are returned in the range -1 to 1.
- *
- * @method cos
- * @param {Number} angle the angle
- * @return {Number} the cosine of the angle
- *
- * @example
- * <div>
- * <code>
- * var a = 0.0;
- * var inc = TWO_PI/25.0;
- * for (var i = 0; i < 25; i++) {
- * line(i*4, 50, i*4, 50+cos(a)*40.0);
- * a = a + inc;
- * }
- * </code>
- * </div>
- *
- * @alt
- * vertical black lines form wave patterns, extend-down on left and right side
- *
- */
- p5.prototype.cos = function(angle) {
- if (this._angleMode === constants.RADIANS) {
- return Math.cos(angle);
- } else {
- return Math.cos(this.radians(angle));
- }
- };
-
- /**
- * Calculates the sine of an angle. This function takes into account the
- * current angleMode. Values are returned in the range -1 to 1.
- *
- * @method sin
- * @param {Number} angle the angle
- * @return {Number} the sine of the angle
- *
- * @example
- * <div>
- * <code>
- * var a = 0.0;
- * var inc = TWO_PI/25.0;
- * for (var i = 0; i < 25; i++) {
- * line(i*4, 50, i*4, 50+sin(a)*40.0);
- * a = a + inc;
- * }
- * </code>
- * </div>
- *
- * @alt
- * vertical black lines extend down and up from center to form wave pattern
- *
- */
- p5.prototype.sin = function(angle) {
- if (this._angleMode === constants.RADIANS) {
- return Math.sin(angle);
- } else {
- return Math.sin(this.radians(angle));
- }
- };
-
- /**
- * Calculates the tangent of an angle. This function takes into account
- * the current angleMode. Values are returned in the range -1 to 1.
- *
- * @method tan
- * @param {Number} angle the angle
- * @return {Number} the tangent of the angle
- *
- * @example
- * <div>
- * <code>
- * var a = 0.0;
- * var inc = TWO_PI/50.0;
- * for (var i = 0; i < 100; i = i+2) {
- * line(i, 50, i, 50+tan(a)*2.0);
- * a = a + inc;
- * }
- * </code>
- *
- *
- * @alt
- * vertical black lines end down and up from center to form spike pattern
- *
- */
- p5.prototype.tan = function(angle) {
- if (this._angleMode === constants.RADIANS) {
- return Math.tan(angle);
- } else {
- return Math.tan(this.radians(angle));
- }
- };
-
- /**
- * Converts a radian measurement to its corresponding value in degrees.
- * Radians and degrees are two ways of measuring the same thing. There are
- * 360 degrees in a circle and 2*PI radians in a circle. For example,
- * 90° = PI/2 = 1.5707964.
- *
- * @method degrees
- * @param {Number} radians the radians value to convert to degrees
- * @return {Number} the converted angle
- *
- *
- * @example
- * <div class= “norender">
- * <code>
- * var rad = PI/4;
- * var deg = degrees(rad);
- * print(rad + " radians is " + deg + " degrees");
- * // Prints: 0.7853981633974483 radians is 45 degrees
- * </code>
- * </div>
- *
- */
- p5.prototype.degrees = function(angle) {
- return polarGeometry.radiansToDegrees(angle);
- };
-
- /**
- * Converts a degree measurement to its corresponding value in radians.
- * Radians and degrees are two ways of measuring the same thing. There are
- * 360 degrees in a circle and 2*PI radians in a circle. For example,
- * 90° = PI/2 = 1.5707964.
- *
- * @method radians
- * @param {Number} degrees the degree value to convert to radians
- * @return {Number} the converted angle
- *
- * @example
- * <div class= “norender">
- * <code>
- * var deg = 45.0;
- * var rad = radians(deg);
- * print(deg + " degrees is " + rad + " radians");
- * // Prints: 45 degrees is 0.7853981633974483 radians
- * </code>
- * </div>
- */
- p5.prototype.radians = function(angle) {
- return polarGeometry.degreesToRadians(angle);
- };
-
- /**
- * Sets the current mode of p5 to given mode. Default mode is RADIANS.
- *
- * @method angleMode
- * @param {Constant} mode either RADIANS or DEGREES
- *
- * @example
- * <div>
- * <code>
- * function draw(){
- * background(204);
- * angleMode(DEGREES); // Change the mode to DEGREES
- * var a = atan2(mouseY-height/2, mouseX-width/2);
- * translate(width/2, height/2);
- * push();
- * rotate(a);
- * rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
- * pop();
- * angleMode(RADIANS); // Change the mode to RADIANS
- * rotate(a); // var a stays the same
- * rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
- * }
- * </code>
- * </div>
- *
- * @alt
- * 40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.
- *
- *
- */
- p5.prototype.angleMode = function(mode) {
- if (mode === constants.DEGREES || mode === constants.RADIANS) {
- this._angleMode = mode;
- }
- };
-
- module.exports = p5;
-
- },{"../core/constants":36,"../core/core":37,"./polargeometry":67}],70:[function(_dereq_,module,exports){
- /**
- * @module Typography
- * @submodule Attributes
- * @for p5
- * @requires core
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * Sets the current alignment for drawing text. Accepts two
- * arguments: horizAlign (LEFT, CENTER, or RIGHT) and
- * vertAlign (TOP, BOTTOM, CENTER, or BASELINE).
- *
- * The horizAlign parameter is in reference to the x value
- * of the text() function, while the vertAlign parameter is
- * in reference to the y value.
- *
- * So if you write textAlign(LEFT), you are aligning the left
- * edge of your text to the x value you give in text(). If you
- * write textAlign(RIGHT, TOP), you are aligning the right edge
- * of your text to the x value and the top of edge of the text
- * to the y value.
- *
- * @method textAlign
- * @param {Constant} horizAlign horizontal alignment, either LEFT,
- * CENTER, or RIGHT
- * @param {Constant} vertAlign vertical alignment, either TOP,
- * BOTTOM, CENTER, or BASELINE
- * @return {Number}
- * @example
- * <div>
- * <code>
- * textSize(16);
- * textAlign(RIGHT);
- * text("ABCD", 50, 30);
- * textAlign(CENTER);
- * text("EFGH", 50, 50);
- * textAlign(LEFT);
- * text("IJKL", 50, 70);
- * </code>
- * </div>
- *
- * @alt
- *Letters ABCD displayed at top right, EFGH at center and IJKL at bottom left.
- *
- */
- p5.prototype.textAlign = function(horizAlign, vertAlign) {
- return this._renderer.textAlign.apply(this._renderer, arguments);
- };
-
- /**
- * Sets/gets the spacing, in pixels, between lines of text. This
- * setting will be used in all subsequent calls to the text() function.
- *
- * @method textLeading
- * @param {Number} leading the size in pixels for spacing between lines
- * @return {Object|Number}
- * @example
- * <div>
- * <code>
- * // Text to display. The "\n" is a "new line" character
- * lines = "L1\nL2\nL3";
- * textSize(12);
- *
- * textLeading(10); // Set leading to 10
- * text(lines, 10, 25);
- *
- * textLeading(20); // Set leading to 20
- * text(lines, 40, 25);
- *
- * textLeading(30); // Set leading to 30
- * text(lines, 70, 25);
- * </code>
- * </div>
- *
- * @alt
- *set L1 L2 & L3 displayed vertically 3 times. spacing increases for each set
- *
- */
- p5.prototype.textLeading = function(theLeading) {
- return this._renderer.textLeading.apply(this._renderer, arguments);
- };
-
- /**
- * Sets/gets the current font size. This size will be used in all subsequent
- * calls to the text() function. Font size is measured in pixels.
- *
- * @method textSize
- * @param {Number} theSize the size of the letters in units of pixels
- * @return {Object|Number}
- * @example
- * <div>
- * <code>
- * textSize(12);
- * text("Font Size 12", 10, 30);
- * textSize(14);
- * text("Font Size 14", 10, 60);
- * textSize(16);
- * text("Font Size 16", 10, 90);
- * </code>
- * </div>
- *
- * @alt
- *Font Size 12 displayed small, Font Size 14 medium & Font Size 16 large
- *
- */
- p5.prototype.textSize = function(theSize) {
- return this._renderer.textSize.apply(this._renderer, arguments);
- };
-
- /**
- * Sets/gets the style of the text for system fonts to NORMAL, ITALIC, or BOLD.
- * Note: this may be is overridden by CSS styling. For non-system fonts
- * (opentype, truetype, etc.) please load styled fonts instead.
- *
- * @method textStyle
- * @param {Number/Constant} theStyle styling for text, either NORMAL,
- * ITALIC, or BOLD
- * @return {Object|String}
- * @example
- * <div>
- * <code>
- * strokeWeight(0);
- * textSize(12);
- * textStyle(NORMAL);
- * text("Font Style Normal", 10, 30);
- * textStyle(ITALIC);
- * text("Font Style Italic", 10, 60);
- * textStyle(BOLD);
- * text("Font Style Bold", 10, 90);
- * </code>
- * </div>
- *
- * @alt
- *words Font Style Normal displayed normally, Italic in italic and bold in bold
- *
- */
- p5.prototype.textStyle = function(theStyle) {
- return this._renderer.textStyle.apply(this._renderer, arguments);
- };
-
- /**
- * Calculates and returns the width of any character or text string.
- *
- * @method textWidth
- * @param {String} theText the String of characters to measure
- * @return {Number}
- * @example
- * <div>
- * <code>
- * textSize(28);
- *
- * var aChar = 'P';
- * var cWidth = textWidth(aChar);
- * text(aChar, 0, 40);
- * line(cWidth, 0, cWidth, 50);
- *
- * var aString = "p5.js";
- * var sWidth = textWidth(aString);
- * text(aString, 0, 85);
- * line(sWidth, 50, sWidth, 100);
- * </code>
- * </div>
- *
- * @alt
- *Letter P and p5.js are displayed with vertical lines at end. P is wide
- *
- */
- p5.prototype.textWidth = function(theText) {
- if (theText.length === 0) {
- return 0;
- }
- return this._renderer.textWidth.apply(this._renderer, arguments);
- };
-
- /**
- * Returns the ascent of the current font at its current size. The ascent
- * represents the distance, in pixels, of the tallest character above
- * the baseline.
- *
- * @return {Number}
- * @example
- * <div>
- * <code>
- * var base = height * 0.75;
- * var scalar = 0.8; // Different for each font
- *
- * textSize(32); // Set initial text size
- * var asc = textAscent() * scalar; // Calc ascent
- * line(0, base - asc, width, base - asc);
- * text("dp", 0, base); // Draw text on baseline
- *
- * textSize(64); // Increase text size
- * asc = textAscent() * scalar; // Recalc ascent
- * line(40, base - asc, width, base - asc);
- * text("dp", 40, base); // Draw text on baseline
- * </code>
- * </div>
- */
- p5.prototype.textAscent = function() {
- return this._renderer.textAscent();
- };
-
- /**
- * Returns the descent of the current font at its current size. The descent
- * represents the distance, in pixels, of the character with the longest
- * descender below the baseline.
- *
- * @return {Number}
- * @example
- * <div>
- * <code>
- * var base = height * 0.75;
- * var scalar = 0.8; // Different for each font
- *
- * textSize(32); // Set initial text size
- * var desc = textDescent() * scalar; // Calc ascent
- * line(0, base+desc, width, base+desc);
- * text("dp", 0, base); // Draw text on baseline
- *
- * textSize(64); // Increase text size
- * desc = textDescent() * scalar; // Recalc ascent
- * line(40, base + desc, width, base + desc);
- * text("dp", 40, base); // Draw text on baseline
- * </code>
- * </div>
- */
- p5.prototype.textDescent = function() {
- return this._renderer.textDescent();
- };
-
- /**
- * Helper function to measure ascent and descent.
- */
- p5.prototype._updateTextMetrics = function() {
- return this._renderer._updateTextMetrics();
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],71:[function(_dereq_,module,exports){
- /**
- * @module Typography
- * @submodule Loading & Displaying
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var constants = _dereq_('../core/constants');
-
- _dereq_('../core/error_helpers');
-
-
- /**
- * Draws text to the screen. Displays the information specified in the first
- * parameter on the screen in the position specified by the additional
- * parameters. A default font will be used unless a font is set with the
- * textFont() function and a default size will be used unless a font is set
- * with textSize(). Change the color of the text with the fill() function.
- * Change the outline of the text with the stroke() and strokeWeight()
- * functions.
- * <br><br>
- * The text displays in relation to the textAlign() function, which gives the
- * option to draw to the left, right, and center of the coordinates.
- * <br><br>
- * The x2 and y2 parameters define a rectangular area to display within and
- * may only be used with string data. When these parameters are specified,
- * they are interpreted based on the current rectMode() setting. Text that
- * does not fit completely within the rectangle specified will not be drawn
- * to the screen.
- *
- * @method text
- * @param {String} str the alphanumeric symbols to be displayed
- * @param {Number} x x-coordinate of text
- * @param {Number} y y-coordinate of text
- * @param {Number} x2 by default, the width of the text box,
- * see rectMode() for more info
- * @param {Number} y2 by default, the height of the text box,
- * see rectMode() for more info
- * @return {Object} this
- * @example
- * <div>
- * <code>
- * textSize(32);
- * text("word", 10, 30);
- * fill(0, 102, 153);
- * text("word", 10, 60);
- * fill(0, 102, 153, 51);
- * text("word", 10, 90);
- * </code>
- * </div>
- * <div>
- * <code>
- * s = "The quick brown fox jumped over the lazy dog.";
- * fill(50);
- * text(s, 10, 10, 70, 80); // Text wraps within text box
- * </code>
- * </div>
- *
- * @alt
- *'word' displayed 3 times going from black, blue to translucent blue
- * The quick brown fox jumped over the lazy dog.
- *
- */
- p5.prototype.text = function(str, x, y, maxWidth, maxHeight) {
- return (!(this._renderer._doFill || this._renderer._doStroke)) ? this :
- this._renderer.text.apply(this._renderer, arguments);
- };
-
- /**
- * Sets the current font that will be drawn with the text() function.
- *
- * @method textFont
- * @param {Object|String} f a font loaded via loadFont(), or a String
- * representing a <a href="https://mzl.la/2dOw8WD">web safe font</a> (a font
- * that is generally available across all systems).
- * @return {Object} this
- * @example
- * <div>
- * <code>
- * fill(0);
- * textSize(12);
- * textFont("Georgia");
- * text("Georgia", 12, 30);
- * textFont("Helvetica");
- * text("Helvetica", 12, 60);
- * </code>
- * </div>
- * <div>
- * <code>
- * var fontRegular, fontItalic, fontBold;
- * function preload() {
- * fontRegular = loadFont("assets/Regular.otf");
- * fontItalic = loadFont("assets/Italic.ttf");
- * fontBold = loadFont("assets/Bold.ttf");
- * }
- * function setup() {
- * background(210);
- * fill(0).strokeWeight(0).textSize(10);
- * textFont(fontRegular);
- * text("Font Style Normal", 10, 30);
- * textFont(fontItalic);
- * text("Font Style Italic", 10, 50);
- * textFont(fontBold);
- * text("Font Style Bold", 10, 70);
- * }
- * </code>
- * </div>
- *
- * @alt
- *words Font Style Normal displayed normally, Italic in italic and bold in bold
- *
- */
- p5.prototype.textFont = function(theFont, theSize) {
-
- if (arguments.length) {
-
- if (!theFont) {
-
- throw Error('null font passed to textFont');
- }
-
- this._renderer._setProperty('_textFont', theFont);
-
- if (theSize) {
-
- this._renderer._setProperty('_textSize', theSize);
- this._renderer._setProperty('_textLeading',
- theSize * constants._DEFAULT_LEADMULT);
- }
-
- return this._renderer._applyTextProperties();
- }
-
- return this;
- };
-
- module.exports = p5;
-
- },{"../core/constants":36,"../core/core":37,"../core/error_helpers":40}],72:[function(_dereq_,module,exports){
- /**
- * This module defines the p5.Font class and functions for
- * drawing text to the display canvas.
- * @module Typography
- * @submodule Font
- * @requires core
- * @requires constants
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var constants = _dereq_('../core/constants');
-
- /*
- * TODO:
- *
- * API:
- * -- textBounds()
- * -- getPath()
- * -- getPoints()
- *
- * ===========================================
- * -- PFont functions:
- * PFont.list()
- *
- * -- kerning
- * -- alignment: justified?
- * -- integrate p5.dom? (later)
- */
-
- /**
- * Base class for font handling
- * @class p5.Font
- * @constructor
- * @param {Object} [pInst] pointer to p5 instance
- */
- p5.Font = function(p) {
-
- this.parent = p;
-
- this.cache = {};
-
- /**
- * Underlying opentype font implementation
- * @property font
- */
- this.font = undefined;
- };
-
- p5.Font.prototype.list = function() {
-
- // TODO
- throw 'not yet implemented';
- };
-
- /**
- * Returns a tight bounding box for the given text string using this
- * font (currently only supports single lines)
- *
- * @method textBounds
- * @param {String} line a line of text
- * @param {Number} x x-position
- * @param {Number} y y-position
- * @param {Number} fontSize font size to use (optional)
- * @param {Object} options opentype options (optional)
- *
- * @return {Object} a rectangle object with properties: x, y, w, h
- *
- * @example
- * <div>
- * <code>
- * var font;
- * var textString = 'Lorem ipsum dolor sit amet.';
- * function preload() {
- * font = loadFont('./assets/Regular.otf');
- * };
- * function setup() {
- * background(210);
- *
- * var bbox = font.textBounds(textString, 10, 30, 12);
- * fill(255);
- * stroke(0);
- * rect(bbox.x, bbox.y, bbox.w, bbox.h);
- * fill(0);
- * noStroke();
- *
- * textFont(font);
- * textSize(12);
- * text(textString, 10, 30);
- * };
- * </code>
- * </div>
- *
- * @alt
- *words Lorem ipsum dol go off canvas and contained by white bounding box
- *
- */
- p5.Font.prototype.textBounds = function(str, x, y, fontSize, options) {
-
- x = x !== undefined ? x : 0;
- y = y !== undefined ? y : 0;
- fontSize = fontSize || this.parent._renderer._textSize;
-
- // Check cache for existing bounds. Take into consideration the text alignment
- // settings. Default alignment should match opentype's origin: left-aligned &
- // alphabetic baseline.
- var p = (options && options.renderer && options.renderer._pInst) ||
- this.parent,
- ctx = p._renderer.drawingContext,
- alignment = ctx.textAlign || constants.LEFT,
- baseline = ctx.textBaseline || constants.BASELINE;
- var result = this.cache[cacheKey('textBounds', str, x, y, fontSize, alignment,
- baseline)];
-
- if (!result) {
-
- var xCoords = [], yCoords = [], self = this,
- scale = this._scale(fontSize), minX, minY, maxX, maxY;
-
- this.font.forEachGlyph(str, x, y, fontSize, options,
- function(glyph, gX, gY, gFontSize) {
-
- xCoords.push(gX);
- yCoords.push(gY);
-
- var gm = glyph.getMetrics();
-
- if (glyph.name !== 'space' && glyph.unicode !== 32) {
-
- xCoords.push(gX + (gm.xMax * scale));
- yCoords.push(gY + (-gm.yMin * scale));
- yCoords.push(gY + (-gm.yMax * scale));
-
- } else { // NOTE: deals with broken metrics for spaces in opentype.js
-
- xCoords.push(gX + self.font.charToGlyph(' ').advanceWidth *
- self._scale(fontSize));
- }
- });
-
- // fix to #1409 (not sure why these max() functions were here)
- /*minX = Math.max(0, Math.min.apply(null, xCoords));
- minY = Math.max(0, Math.min.apply(null, yCoords));
- maxX = Math.max(0, Math.max.apply(null, xCoords));
- maxY = Math.max(0, Math.max.apply(null, yCoords));*/
- minX = Math.min.apply(null, xCoords);
- minY = Math.min.apply(null, yCoords);
- maxX = Math.max.apply(null, xCoords);
- maxY = Math.max.apply(null, yCoords);
-
- result = {
- x: minX,
- y: minY,
- h: maxY - minY,
- w: maxX - minX,
- advance: minX - x
- };
-
- // Bounds are now calculated, so shift the x & y to match alignment settings
- var textWidth = result.w + result.advance;
- var pos = this._handleAlignment(p, ctx, str, result.x, result.y, textWidth);
- result.x = pos.x;
- result.y = pos.y;
-
- this.cache[cacheKey('textBounds', str, x, y, fontSize, alignment,
- baseline)] = result;
- }
- //else console.log('cache-hit');
-
- return result;
- };
-
-
- /**
- * Computes an array of points following the path for specified text
- *
- * @param {String} txt a line of text
- * @param {Number} x x-position
- * @param {Number} y y-position
- * @param {Number} fontSize font size to use (optional)
- * @param {Object} options an (optional) object that can contain:
- *
- * <br>sampleFactor - the ratio of path-length to number of samples
- * (default=.25); higher values yield more points and are therefore
- * more precise
- *
- * <br>simplifyThreshold - if set to a non-zero value, collinear points will be
- * be removed from the polygon; the value represents the threshold angle to use
- * when determining whether two edges are collinear
- *
- * @return {Array} an array of points, each with x, y, alpha (the path angle)
- */
- p5.Font.prototype.textToPoints = function(txt, x, y, fontSize, options) {
-
- var xoff = 0, result = [], glyphs = this._getGlyphs(txt);
-
- fontSize = fontSize || this.parent._renderer._textSize;
-
- for (var i = 0; i < glyphs.length; i++) {
-
- var gpath = glyphs[i].getPath(x, y, fontSize),
- paths = splitPaths(gpath.commands);
-
- for (var j = 0; j < paths.length; j++) {
-
- var pts = pathToPoints(paths[j], options);
-
- for (var k = 0; k < pts.length; k++) {
- pts[k].x += xoff;
- result.push(pts[k]);
- }
- }
-
- xoff += glyphs[i].advanceWidth * this._scale(fontSize);
- }
-
- return result;
- };
-
- // ----------------------------- End API ------------------------------
-
- /**
- * Returns the set of opentype glyphs for the supplied string.
- *
- * Note that there is not a strict one-to-one mapping between characters
- * and glyphs, so the list of returned glyphs can be larger or smaller
- * than the length of the given string.
- *
- * @param {String} str the string to be converted
- * @return {array} the opentype glyphs
- */
- p5.Font.prototype._getGlyphs = function(str) {
-
- return this.font.stringToGlyphs(str);
- };
-
- /**
- * Returns an opentype path for the supplied string and position.
- *
- * @param {String} line a line of text
- * @param {Number} x x-position
- * @param {Number} y y-position
- * @param {Object} options opentype options (optional)
- * @return {Object} the opentype path
- */
- p5.Font.prototype._getPath = function(line, x, y, options) {
-
- var p = (options && options.renderer && options.renderer._pInst) ||
- this.parent,
- ctx = p._renderer.drawingContext,
- pos = this._handleAlignment(p, ctx, line, x, y);
-
- return this.font.getPath(line, pos.x, pos.y, p._renderer._textSize, options);
- };
-
- /*
- * Creates an SVG-formatted path-data string
- * (See http://www.w3.org/TR/SVG/paths.html#PathData)
- * from the given opentype path or string/position
- *
- * @param {Object} path an opentype path, OR the following:
- *
- * @param {String} line a line of text
- * @param {Number} x x-position
- * @param {Number} y y-position
- * @param {Object} options opentype options (optional), set options.decimals
- * to set the decimal precision of the path-data
- *
- * @return {Object} this p5.Font object
- */
- p5.Font.prototype._getPathData = function(line, x, y, options) {
-
- var decimals = 3;
-
- // create path from string/position
- if (typeof line === 'string' && arguments.length > 2) {
-
- line = this._getPath(line, x, y, options);
- }
- // handle options specified in 2nd arg
- else if (typeof x === 'object') {
-
- options = x;
- }
-
- // handle svg arguments
- if (options && typeof options.decimals === 'number') {
-
- decimals = options.decimals;
- }
-
- return line.toPathData(decimals);
- };
-
- /*
- * Creates an SVG <path> element, as a string,
- * from the given opentype path or string/position
- *
- * @param {Object} path an opentype path, OR the following:
- *
- * @param {String} line a line of text
- * @param {Number} x x-position
- * @param {Number} y y-position
- * @param {Object} options opentype options (optional), set options.decimals
- * to set the decimal precision of the path-data in the <path> element,
- * options.fill to set the fill color for the <path> element,
- * options.stroke to set the stroke color for the <path> element,
- * options.strokeWidth to set the strokeWidth for the <path> element.
- *
- * @return {Object} this p5.Font object
- */
- p5.Font.prototype._getSVG = function(line, x, y, options) {
-
- var decimals = 3;
-
- // create path from string/position
- if (typeof line === 'string' && arguments.length > 2) {
-
- line = this._getPath(line, x, y, options);
- }
- // handle options specified in 2nd arg
- else if (typeof x === 'object') {
-
- options = x;
- }
-
- // handle svg arguments
- if (options) {
- if (typeof options.decimals === 'number') {
- decimals = options.decimals;
- }
- if (typeof options.strokeWidth === 'number') {
- line.strokeWidth = options.strokeWidth;
- }
- if (typeof options.fill !== 'undefined') {
- line.fill = options.fill;
- }
- if (typeof options.stroke !== 'undefined') {
- line.stroke = options.stroke;
- }
- }
-
- return line.toSVG(decimals);
- };
-
- /*
- * Renders an opentype path or string/position
- * to the current graphics context
- *
- * @param {Object} path an opentype path, OR the following:
- *
- * @param {String} line a line of text
- * @param {Number} x x-position
- * @param {Number} y y-position
- * @param {Object} options opentype options (optional)
- *
- * @return {Object} this p5.Font object
- */
- p5.Font.prototype._renderPath = function(line, x, y, options) {
-
- var pdata, pg = (options && options.renderer) || this.parent._renderer,
- ctx = pg.drawingContext;
-
- if (typeof line === 'object' && line.commands) {
-
- pdata = line.commands;
- } else {
-
- //pos = handleAlignment(p, ctx, line, x, y);
- pdata = this._getPath(line, x, y, options).commands;
- }
-
- ctx.beginPath();
- for (var i = 0; i < pdata.length; i += 1) {
-
- var cmd = pdata[i];
- if (cmd.type === 'M') {
- ctx.moveTo(cmd.x, cmd.y);
- } else if (cmd.type === 'L') {
- ctx.lineTo(cmd.x, cmd.y);
- } else if (cmd.type === 'C') {
- ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
- } else if (cmd.type === 'Q') {
- ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
- } else if (cmd.type === 'Z') {
- ctx.closePath();
- }
- }
-
- // only draw stroke if manually set by user
- if (pg._doStroke && pg._strokeSet) {
-
- ctx.stroke();
- }
-
- if (pg._doFill) {
-
- // if fill hasn't been set by user, use default-text-fill
- ctx.fillStyle = pg._fillSet ? ctx.fillStyle : constants._DEFAULT_TEXT_FILL;
- ctx.fill();
- }
-
- return this;
- };
-
- p5.Font.prototype._textWidth = function(str, fontSize) {
-
- if (str === ' ') { // special case for now
-
- return this.font.charToGlyph(' ').advanceWidth * this._scale(fontSize);
- }
-
- var bounds = this.textBounds(str, 0, 0, fontSize);
- return bounds.w + bounds.advance;
- };
-
- p5.Font.prototype._textAscent = function(fontSize) {
-
- return this.font.ascender * this._scale(fontSize);
- };
-
- p5.Font.prototype._textDescent = function(fontSize) {
-
- return -this.font.descender * this._scale(fontSize);
- };
-
- p5.Font.prototype._scale = function(fontSize) {
-
- return (1 / this.font.unitsPerEm) * (fontSize ||
- this.parent._renderer._textSize);
- };
-
- p5.Font.prototype._handleAlignment = function(p, ctx, line, x, y, textWidth) {
- var fontSize = p._renderer._textSize,
- textAscent = this._textAscent(fontSize),
- textDescent = this._textDescent(fontSize);
-
- textWidth = textWidth !== undefined ? textWidth :
- this._textWidth(line, fontSize);
-
- if (ctx.textAlign === constants.CENTER) {
- x -= textWidth / 2;
- } else if (ctx.textAlign === constants.RIGHT) {
- x -= textWidth;
- }
-
- if (ctx.textBaseline === constants.TOP) {
- y += textAscent;
- } else if (ctx.textBaseline === constants._CTX_MIDDLE) {
- y += textAscent / 2;
- } else if (ctx.textBaseline === constants.BOTTOM) {
- y -= textDescent;
- }
-
- return { x: x, y: y };
- };
-
- // path-utils
-
- function pathToPoints(cmds, options) {
-
- var opts = parseOpts(options, {
- sampleFactor: 0.1,
- simplifyThreshold: 0,
- });
-
- var len = pointAtLength(cmds,0,1), // total-length
- t = len / (len * opts.sampleFactor),
- pts = [];
-
- for (var i = 0; i < len; i += t) {
- pts.push(pointAtLength(cmds, i));
- }
-
- if (opts.simplifyThreshold) {
- /*var count = */simplify(pts, opts.simplifyThreshold);
- //console.log('Simplify: removed ' + count + ' pts');
- }
-
- return pts;
- }
-
- function simplify(pts, angle) {
-
- angle = (typeof angle === 'undefined') ? 0 : angle;
-
- var num = 0;
- for (var i = pts.length - 1; pts.length > 3 && i >= 0; --i) {
-
- if (collinear(at(pts, i - 1), at(pts, i), at(pts, i + 1), angle)) {
-
- // Remove the middle point
- pts.splice(i % pts.length, 1);
- num++;
- }
- }
- return num;
- }
-
- function splitPaths(cmds) {
-
- var paths = [], current;
- for (var i = 0; i < cmds.length; i++) {
- if (cmds[i].type === 'M') {
- if (current) {
- paths.push(current);
- }
- current = [];
- }
- current.push(cmdToArr(cmds[i]));
- }
- paths.push(current);
-
- return paths;
- }
-
- function cmdToArr(cmd) {
-
- var arr = [ cmd.type ];
- if (cmd.type === 'M' || cmd.type === 'L') { // moveto or lineto
- arr.push(cmd.x, cmd.y);
- } else if (cmd.type === 'C') {
- arr.push(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
- } else if (cmd.type === 'Q') {
- arr.push(cmd.x1, cmd.y1, cmd.x, cmd.y);
- }
- // else if (cmd.type === 'Z') { /* no-op */ }
- return arr;
- }
-
- function parseOpts(options, defaults) {
-
- if (typeof options !== 'object') {
- options = defaults;
- }
- else {
- for (var key in defaults) {
- if (typeof options[key] === 'undefined') {
- options[key] = defaults[key];
- }
- }
- }
- return options;
- }
-
- //////////////////////// Helpers ////////////////////////////
-
- function at(v, i) {
- var s = v.length;
- return v[i < 0 ? i % s + s : i % s];
- }
-
- function collinear(a, b, c, thresholdAngle) {
-
- if (!thresholdAngle) {
- return areaTriangle(a, b, c) === 0;
- }
-
- if (typeof collinear.tmpPoint1 === 'undefined') {
- collinear.tmpPoint1 = [];
- collinear.tmpPoint2 = [];
- }
-
- var ab = collinear.tmpPoint1, bc = collinear.tmpPoint2;
- ab.x = b.x - a.x;
- ab.y = b.y - a.y;
- bc.x = c.x - b.x;
- bc.y = c.y - b.y;
-
- var dot = ab.x * bc.x + ab.y * bc.y,
- magA = Math.sqrt(ab.x * ab.x + ab.y * ab.y),
- magB = Math.sqrt(bc.x * bc.x + bc.y * bc.y),
- angle = Math.acos(dot / (magA * magB));
-
- return angle < thresholdAngle;
- }
-
- function areaTriangle(a, b, c) {
- return (((b[0] - a[0]) * (c[1] - a[1])) - ((c[0] - a[0]) * (b[1] - a[1])));
- }
-
- // Portions of below code copyright 2008 Dmitry Baranovskiy (via MIT license)
-
- function findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
-
- var t1 = 1 - t, t13 = Math.pow(t1, 3), t12 = Math.pow(t1, 2), t2 = t * t,
- t3 = t2 * t, x = t13 * p1x + t12 * 3 * t * c1x + t1 * 3 * t * t * c2x +
- t3 * p2x, y = t13 * p1y + t12 * 3 * t * c1y + t1 * 3 * t * t * c2y +
- t3 * p2y, mx = p1x + 2 * t * (c1x - p1x) + t2 * (c2x - 2 * c1x + p1x),
- my = p1y + 2 * t * (c1y - p1y) + t2 * (c2y - 2 * c1y + p1y),
- nx = c1x + 2 * t * (c2x - c1x) + t2 * (p2x - 2 * c2x + c1x),
- ny = c1y + 2 * t * (c2y - c1y) + t2 * (p2y - 2 * c2y + c1y),
- ax = t1 * p1x + t * c1x, ay = t1 * p1y + t * c1y,
- cx = t1 * c2x + t * p2x, cy = t1 * c2y + t * p2y,
- alpha = (90 - Math.atan2(mx - nx, my - ny) * 180 / Math.PI);
-
- if (mx > nx || my < ny) { alpha += 180; }
-
- return { x: x, y: y, m: { x: mx, y: my }, n: { x: nx, y: ny },
- start: { x: ax, y: ay }, end: { x: cx, y: cy }, alpha: alpha
- };
- }
-
- function getPointAtSegmentLength(p1x,p1y,c1x,c1y,c2x,c2y,p2x,p2y,length) {
- return (length == null) ? bezlen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) :
- findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y,
- getTatLen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length));
- }
-
- function pointAtLength(path, length, istotal) {
- path = path2curve(path);
- var x, y, p, l, sp = '', subpaths = {}, point, len = 0;
- for (var i = 0, ii = path.length; i < ii; i++) {
- p = path[i];
- if (p[0] === 'M') {
- x = +p[1];
- y = +p[2];
- } else {
- l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
- if (len + l > length) {
- if (!istotal) {
- point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5],
- p[6], length - len);
- return { x: point.x, y: point.y, alpha: point.alpha };
- }
- }
- len += l;
- x = +p[5];
- y = +p[6];
- }
- sp += p.shift() + p;
- }
- subpaths.end = sp;
-
- point = istotal ? len : findDotsAtSegment
- (x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
-
- if (point.alpha) {
- point = { x: point.x, y: point.y, alpha: point.alpha };
- }
-
- return point;
- }
-
- function pathToAbsolute(pathArray) {
-
- var res = [], x = 0, y = 0, mx = 0, my = 0, start = 0;
- if (pathArray[0][0] === 'M') {
- x = +pathArray[0][1];
- y = +pathArray[0][2];
- mx = x;
- my = y;
- start++;
- res[0] = ['M', x, y];
- }
-
- var dots,crz = pathArray.length===3 && pathArray[0][0]==='M' &&
- pathArray[1][0].toUpperCase()==='R' && pathArray[2][0].toUpperCase()==='Z';
-
- for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) {
- res.push(r = []);
- pa = pathArray[i];
- if (pa[0] !== String.prototype.toUpperCase.call(pa[0])) {
- r[0] = String.prototype.toUpperCase.call(pa[0]);
- switch (r[0]) {
- case 'A':
- r[1] = pa[1];
- r[2] = pa[2];
- r[3] = pa[3];
- r[4] = pa[4];
- r[5] = pa[5];
- r[6] = +(pa[6] + x);
- r[7] = +(pa[7] + y);
- break;
- case 'V':
- r[1] = +pa[1] + y;
- break;
- case 'H':
- r[1] = +pa[1] + x;
- break;
- case 'R':
- dots = [x, y].concat(pa.slice(1));
- for (var j = 2, jj = dots.length; j < jj; j++) {
- dots[j] = +dots[j] + x;
- dots[++j] = +dots[j] + y;
- }
- res.pop();
- res = res.concat(catmullRom2bezier(dots, crz));
- break;
- case 'M':
- mx = +pa[1] + x;
- my = +pa[2] + y;
- break;
- default:
- for (j = 1, jj = pa.length; j < jj; j++) {
- r[j] = +pa[j] + ((j % 2) ? x : y);
- }
- }
- } else if (pa[0] === 'R') {
- dots = [x, y].concat(pa.slice(1));
- res.pop();
- res = res.concat(catmullRom2bezier(dots, crz));
- r = ['R'].concat(pa.slice(-2));
- } else {
- for (var k = 0, kk = pa.length; k < kk; k++) {
- r[k] = pa[k];
- }
- }
- switch (r[0]) {
- case 'Z':
- x = mx;
- y = my;
- break;
- case 'H':
- x = r[1];
- break;
- case 'V':
- y = r[1];
- break;
- case 'M':
- mx = r[r.length - 2];
- my = r[r.length - 1];
- break;
- default:
- x = r[r.length - 2];
- y = r[r.length - 1];
- }
- }
- return res;
- }
-
- function path2curve(path, path2) {
-
- var p = pathToAbsolute(path), p2 = path2 && pathToAbsolute(path2),
- attrs = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null },
- attrs2 = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null },
-
- processPath = function(path, d, pcom) {
- var nx, ny, tq = { T: 1, Q: 1 };
- if (!path) { return ['C', d.x, d.y, d.x, d.y, d.x, d.y]; }
- if (!(path[0] in tq)) { d.qx = d.qy = null; }
- switch (path[0]) {
- case 'M':
- d.X = path[1];
- d.Y = path[2];
- break;
- case 'A':
- path = ['C'].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1))));
- break;
- case 'S':
- if (pcom === 'C' || pcom === 'S') {
- nx = d.x * 2 - d.bx;
- ny = d.y * 2 - d.by;
- } else {
- nx = d.x;
- ny = d.y;
- }
- path = ['C', nx, ny].concat(path.slice(1));
- break;
- case 'T':
- if (pcom === 'Q' || pcom === 'T') {
- d.qx = d.x * 2 - d.qx;
- d.qy = d.y * 2 - d.qy;
- } else {
- d.qx = d.x;
- d.qy = d.y;
- }
- path = ['C'].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
- break;
- case 'Q':
- d.qx = path[1];
- d.qy = path[2];
- path = ['C'].concat(q2c(d.x,d.y,path[1],path[2],path[3],path[4]));
- break;
- case 'L':
- path = ['C'].concat(l2c(d.x, d.y, path[1], path[2]));
- break;
- case 'H':
- path = ['C'].concat(l2c(d.x, d.y, path[1], d.y));
- break;
- case 'V':
- path = ['C'].concat(l2c(d.x, d.y, d.x, path[1]));
- break;
- case 'Z':
- path = ['C'].concat(l2c(d.x, d.y, d.X, d.Y));
- break;
- }
- return path;
- },
-
- fixArc = function(pp, i) {
- if (pp[i].length > 7) {
- pp[i].shift();
- var pi = pp[i];
- while (pi.length) {
- pcoms1[i] = 'A';
- if (p2) { pcoms2[i] = 'A'; }
- pp.splice(i++, 0, ['C'].concat(pi.splice(0, 6)));
- }
- pp.splice(i, 1);
- ii = Math.max(p.length, p2 && p2.length || 0);
- }
- },
-
- fixM = function(path1, path2, a1, a2, i) {
- if (path1 && path2 && path1[i][0] === 'M' && path2[i][0] !== 'M') {
- path2.splice(i, 0, ['M', a2.x, a2.y]);
- a1.bx = 0;
- a1.by = 0;
- a1.x = path1[i][1];
- a1.y = path1[i][2];
- ii = Math.max(p.length, p2 && p2.length || 0);
- }
- },
-
- pcoms1 = [], // path commands of original path p
- pcoms2 = [], // path commands of original path p2
- pfirst = '', // temporary holder for original path command
- pcom = ''; // holder for previous path command of original path
-
- for (var i = 0, ii = Math.max(p.length, p2 && p2.length || 0); i < ii; i++) {
- if (p[i]) { pfirst = p[i][0]; } // save current path command
-
- if (pfirst !== 'C') {
- pcoms1[i] = pfirst; // Save current path command
- if (i) { pcom = pcoms1[i - 1]; } // Get previous path command pcom
- }
- p[i] = processPath(p[i], attrs, pcom);
-
- if (pcoms1[i] !== 'A' && pfirst === 'C') { pcoms1[i] = 'C'; }
-
- fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1
-
- if (p2) { // the same procedures is done to p2
- if (p2[i]) { pfirst = p2[i][0]; }
- if (pfirst !== 'C') {
- pcoms2[i] = pfirst;
- if (i) { pcom = pcoms2[i - 1]; }
- }
- p2[i] = processPath(p2[i], attrs2, pcom);
-
- if (pcoms2[i] !== 'A' && pfirst === 'C') { pcoms2[i] = 'C'; }
-
- fixArc(p2, i);
- }
- fixM(p, p2, attrs, attrs2, i);
- fixM(p2, p, attrs2, attrs, i);
- var seg = p[i], seg2 = p2 && p2[i], seglen = seg.length,
- seg2len = p2 && seg2.length;
- attrs.x = seg[seglen - 2];
- attrs.y = seg[seglen - 1];
- attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
- attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
- attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x);
- attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y);
- attrs2.x = p2 && seg2[seg2len - 2];
- attrs2.y = p2 && seg2[seg2len - 1];
- }
-
- return p2 ? [p, p2] : p;
- }
-
- function a2c(x1, y1, rx, ry, angle, lac, sweep_flag, x2, y2, recursive) {
- // for more information of where this Math came from visit:
- // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
- var PI = Math.PI, _120 = PI * 120 / 180, f1, f2, cx, cy,
- rad = PI / 180 * (+angle || 0), res = [], xy,
- rotate = function (x, y, rad) {
- var X = x * Math.cos(rad) - y * Math.sin(rad),
- Y = x * Math.sin(rad) + y * Math.cos(rad);
- return { x: X, y: Y };
- };
- if (!recursive) {
- xy = rotate(x1, y1, -rad);
- x1 = xy.x;
- y1 = xy.y;
- xy = rotate(x2, y2, -rad);
- x2 = xy.x;
- y2 = xy.y;
- var x = (x1 - x2) / 2, y = (y1 - y2) / 2,
- h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
- if (h > 1) {
- h = Math.sqrt(h);
- rx = h * rx;
- ry = h * ry;
- }
- var rx2 = rx * rx, ry2 = ry * ry,
- k = (lac === sweep_flag ? -1 : 1) * Math.sqrt(Math.abs
- ((rx2 * ry2 - rx2 * y * y - ry2 * x * x)/(rx2 * y * y + ry2 * x * x)));
-
- cx = k * rx * y / ry + (x1 + x2) / 2;
- cy = k * -ry * x / rx + (y1 + y2) / 2;
- f1 = Math.asin(((y1 - cy) / ry).toFixed(9));
- f2 = Math.asin(((y2 - cy) / ry).toFixed(9));
-
- f1 = x1 < cx ? PI - f1 : f1;
- f2 = x2 < cx ? PI - f2 : f2;
-
- if (f1 < 0) { f1 = PI * 2 + f1; }
- if (f2 < 0) { f2 = PI * 2 + f2; }
-
- if (sweep_flag && f1 > f2) {
- f1 = f1 - PI * 2;
- }
- if (!sweep_flag && f2 > f1) {
- f2 = f2 - PI * 2;
- }
- } else {
- f1 = recursive[0];
- f2 = recursive[1];
- cx = recursive[2];
- cy = recursive[3];
- }
- var df = f2 - f1;
- if (Math.abs(df) > _120) {
- var f2old = f2, x2old = x2, y2old = y2;
- f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
- x2 = cx + rx * Math.cos(f2);
- y2 = cy + ry * Math.sin(f2);
- res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old,
- [f2, f2old, cx, cy]);
- }
- df = f2 - f1;
- var c1 = Math.cos(f1),
- s1 = Math.sin(f1),
- c2 = Math.cos(f2),
- s2 = Math.sin(f2),
- t = Math.tan(df / 4),
- hx = 4 / 3 * rx * t,
- hy = 4 / 3 * ry * t,
- m1 = [x1, y1],
- m2 = [x1 + hx * s1, y1 - hy * c1],
- m3 = [x2 + hx * s2, y2 - hy * c2],
- m4 = [x2, y2];
- m2[0] = 2 * m1[0] - m2[0];
- m2[1] = 2 * m1[1] - m2[1];
- if (recursive) {
- return [m2, m3, m4].concat(res);
- } else {
- res = [m2, m3, m4].concat(res).join().split(',');
- var newres = [];
- for (var i = 0, ii = res.length; i < ii; i++) {
- newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i],
- res[i + 1], rad).x;
- }
- return newres;
- }
- }
-
- // http://schepers.cc/getting-to-the-point
- function catmullRom2bezier(crp, z) {
- var d = [];
- for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
- var p = [{
- x: +crp[i - 2],
- y: +crp[i - 1]
- }, {
- x: +crp[i],
- y: +crp[i + 1]
- }, {
- x: +crp[i + 2],
- y: +crp[i + 3]
- }, {
- x: +crp[i + 4],
- y: +crp[i + 5]
- }];
- if (z) {
- if (!i) {
- p[0] = {
- x: +crp[iLen - 2],
- y: +crp[iLen - 1]
- };
- } else if (iLen - 4 === i) {
- p[3] = {
- x: +crp[0],
- y: +crp[1]
- };
- } else if (iLen - 2 === i) {
- p[2] = {
- x: +crp[0],
- y: +crp[1]
- };
- p[3] = {
- x: +crp[2],
- y: +crp[3]
- };
- }
- } else {
- if (iLen - 4 === i) {
- p[3] = p[2];
- } else if (!i) {
- p[0] = {
- x: +crp[i],
- y: +crp[i + 1]
- };
- }
- }
- d.push(['C', (-p[0].x + 6 * p[1].x + p[2].x) / 6, (-p[0].y + 6 * p[1].y +
- p[2].y) / 6, (p[1].x + 6 * p[2].x - p[3].x) / 6, (p[1].y + 6 * p[2].y -
- p[3].y) / 6, p[2].x, p[2].y ]);
- }
-
- return d;
- }
-
- function l2c(x1, y1, x2, y2) { return [x1, y1, x2, y2, x2, y2]; }
-
- function q2c(x1, y1, ax, ay, x2, y2) {
- var _13 = 1 / 3, _23 = 2 / 3;
- return [
- _13 * x1 + _23 * ax, _13 * y1 + _23 * ay,
- _13 * x2 + _23 * ax, _13 * y2 + _23 * ay, x2, y2
- ];
- }
-
- function bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) {
- if (z == null) { z = 1; }
- z = z > 1 ? 1 : z < 0 ? 0 : z;
- var z2 = z / 2,
- n = 12, Tvalues = [-0.1252, 0.1252, -0.3678, 0.3678, -0.5873, 0.5873,
- -0.7699, 0.7699, -0.9041, 0.9041, -0.9816, 0.9816],
- sum = 0, Cvalues = [0.2491, 0.2491, 0.2335, 0.2335, 0.2032, 0.2032,
- 0.1601, 0.1601, 0.1069, 0.1069, 0.0472, 0.0472 ];
- for (var i = 0; i < n; i++) {
- var ct = z2 * Tvalues[i] + z2,
- xbase = base3(ct, x1, x2, x3, x4),
- ybase = base3(ct, y1, y2, y3, y4),
- comb = xbase * xbase + ybase * ybase;
- sum += Cvalues[i] * Math.sqrt(comb);
- }
- return z2 * sum;
- }
-
- function getTatLen(x1, y1, x2, y2, x3, y3, x4, y4, ll) {
- if (ll < 0 || bezlen(x1, y1, x2, y2, x3, y3, x4, y4) < ll) {
- return;
- }
- var t = 1, step = t / 2, t2 = t - step, l, e = 0.01;
- l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
- while (Math.abs(l - ll) > e) {
- step /= 2;
- t2 += (l < ll ? 1 : -1) * step;
- l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
- }
- return t2;
- }
-
- function base3(t, p1, p2, p3, p4) {
- var t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,
- t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
- return t * t2 - 3 * p1 + 3 * p2;
- }
-
- function cacheKey() {
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- i = args.length;
- var hash = '';
- while (i--) {
- hash += (args[i] === Object(args[i])) ?
- JSON.stringify(args[i]) : args[i];
- }
- return hash;
- }
-
- module.exports = p5.Font;
-
- },{"../core/constants":36,"../core/core":37}],73:[function(_dereq_,module,exports){
- /**
- * @module Data
- * @submodule Array Functions
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * Adds a value to the end of an array. Extends the length of
- * the array by one. Maps to Array.push().
- *
- * @method append
- * @param {Array} array Array to append
- * @param {any} value to be added to the Array
- * @example
- * <div class = "norender"><code>
- * function setup() {
- *
- * var myArray = new Array("Mango", "Apple", "Papaya")
- * print(myArray) // ["Mango", "Apple", "Papaya"]
- *
- * append(myArray, "Peach")
- * print(myArray) // ["Mango", "Apple", "Papaya", "Peach"]
- *
- * }
- * </div></code>
- */
- p5.prototype.append = function(array, value) {
- array.push(value);
- return array;
- };
-
- /**
- * Copies an array (or part of an array) to another array. The src array is
- * copied to the dst array, beginning at the position specified by
- * srcPosition and into the position specified by dstPosition. The number of
- * elements to copy is determined by length. Note that copying values
- * overwrites existing values in the destination array. To append values
- * instead of overwriting them, use concat().
- * <br><br>
- * The simplified version with only two arguments, arrayCopy(src, dst),
- * copies an entire array to another of the same size. It is equivalent to
- * arrayCopy(src, 0, dst, 0, src.length).
- * <br><br>
- * Using this function is far more efficient for copying array data than
- * iterating through a for() loop and copying each element individually.
- *
- * @method arrayCopy
- * @param {Array} src the source Array
- * @param {Number} [srcPosition] starting position in the source Array
- * @param {Array} dst the destination Array
- * @param {Number} [dstPosition] starting position in the destination Array
- * @param {Number} [length] number of Array elements to be copied
- *
- * @example
- * <div class="norender"><code>
- * function setup() {
- *
- * var src = new Array("A", "B", "C");
- * var dst = new Array( 1 , 2 , 3 );
- * var srcPosition = 1;
- * var dstPosition = 0;
- * var length = 2;
- *
- * print(src); // ["A", "B", "C"]
- * print(dst); // [ 1 , 2 , 3 ]
- *
- * arrayCopy(src, srcPosition, dst, dstPosition, length);
- * print(dst); // ["B", "C", 3]
- *
- * }
- * </div></code>
- */
- p5.prototype.arrayCopy = function(
- src,
- srcPosition,
- dst,
- dstPosition,
- length) {
-
- // the index to begin splicing from dst array
- var start,
- end;
-
- if (typeof length !== 'undefined') {
-
- end = Math.min(length, src.length);
- start = dstPosition;
- src = src.slice(srcPosition, end + srcPosition);
-
- } else {
-
- if (typeof dst !== 'undefined') { // src, dst, length
- // rename so we don't get confused
- end = dst;
- end = Math.min(end, src.length);
- } else { // src, dst
- end = src.length;
- }
-
- start = 0;
- // rename so we don't get confused
- dst = srcPosition;
- src = src.slice(0, end);
- }
-
- // Since we are not returning the array and JavaScript is pass by reference
- // we must modify the actual values of the array
- // instead of reassigning arrays
- Array.prototype.splice.apply(dst, [start, end].concat(src));
-
- };
-
- /**
- * Concatenates two arrays, maps to Array.concat(). Does not modify the
- * input arrays.
- *
- * @method concat
- * @param {Array} a first Array to concatenate
- * @param {Array} b second Array to concatenate
- * @return {Array} concatenated array
- *
- * @example
- * <div class = "norender"><code>
- * function setup() {
- * var arr1 = new Array("A", "B", "C");
- * var arr2 = new Array( 1 , 2 , 3 );
- *
- * print(arr1); // ["A","B","C"]
- * print(arr2); // [1,2,3]
- *
- * var arr3 = concat(arr1, arr2);
- *
- * print(arr1); // ["A","B","C"]
- * print(arr2); // [1,2,3]
- * print(arr3); // ["A","B","C",1,2,3]
- *
- * }
- * </div></code>
- */
- p5.prototype.concat = function(list0, list1) {
- return list0.concat(list1);
- };
-
- /**
- * Reverses the order of an array, maps to Array.reverse()
- *
- * @method reverse
- * @param {Array} list Array to reverse
- * @example
- * <div class="norender"><code>
- * function setup() {
- * var myArray = new Array("A", "B", "C");
- * print(myArray); // ["A","B","C"]
- *
- * reverse(myArray);
- * print(myArray); // ["C","B","A"]
- * }
- * </div></code>
- */
- p5.prototype.reverse = function(list) {
- return list.reverse();
- };
-
- /**
- * Decreases an array by one element and returns the shortened array,
- * maps to Array.pop().
- *
- * @method shorten
- * @param {Array} list Array to shorten
- * @return {Array} shortened Array
- * @example
- * <div class = "norender"><code>
- * function setup() {
- * var myArray = new Array("A", "B", "C");
- * print(myArray); // ["A","B","C"]
- *
- * var newArray = shorten(myArray);
- * print(myArray); // ["A","B","C"]
- * print(newArray); // ["A","B"]
- * }
- * </div></code>
- */
- p5.prototype.shorten = function(list) {
- list.pop();
- return list;
- };
-
- /**
- * Randomizes the order of the elements of an array. Implements
- * <a href="http://Bost.Ocks.org/mike/shuffle/" target=_blank>
- * Fisher-Yates Shuffle Algorithm</a>.
- *
- * @method shuffle
- * @param {Array} array Array to shuffle
- * @param {Boolean} [bool] modify passed array
- * @return {Array} shuffled Array
- * @example
- * <div><code>
- * function setup() {
- * var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
- * print(regularArr);
- * shuffle(regularArr, true); // force modifications to passed array
- * print(regularArr);
- *
- * // By default shuffle() returns a shuffled cloned array:
- * var newArr = shuffle(regularArr);
- * print(regularArr);
- * print(newArr);
- * }
- * </code></div>
- */
- p5.prototype.shuffle = function(arr, bool) {
- var isView = ArrayBuffer && ArrayBuffer.isView && ArrayBuffer.isView(arr);
- arr = bool || isView ? arr : arr.slice();
-
- var rnd, tmp, idx = arr.length;
- while (idx > 1) {
- rnd = Math.random()*idx | 0;
-
- tmp = arr[--idx];
- arr[idx] = arr[rnd];
- arr[rnd] = tmp;
- }
-
- return arr;
- };
-
- /**
- * Sorts an array of numbers from smallest to largest, or puts an array of
- * words in alphabetical order. The original array is not modified; a
- * re-ordered array is returned. The count parameter states the number of
- * elements to sort. For example, if there are 12 elements in an array and
- * count is set to 5, only the first 5 elements in the array will be sorted.
- *
- * @method sort
- * @param {Array} list Array to sort
- * @param {Number} [count] number of elements to sort, starting from 0
- *
- * @example
- * <div class = "norender"><code>
- * function setup() {
- * var words = new Array("banana", "apple", "pear","lime");
- * print(words); // ["banana", "apple", "pear", "lime"]
- * var count = 4; // length of array
- *
- * words = sort(words, count);
- * print(words); // ["apple", "banana", "lime", "pear"]
- * }
- * </div></code>
- * <div class = "norender"><code>
- * function setup() {
- * var numbers = new Array(2,6,1,5,14,9,8,12);
- * print(numbers); // [2,6,1,5,14,9,8,12]
- * var count = 5; // Less than the length of the array
- *
- * numbers = sort(numbers, count);
- * print(numbers); // [1,2,5,6,14,9,8,12]
- * }
- * </div></code>
- */
- p5.prototype.sort = function(list, count) {
- var arr = count ? list.slice(0, Math.min(count, list.length)) : list;
- var rest = count ? list.slice(Math.min(count, list.length)) : [];
- if (typeof arr[0] === 'string') {
- arr = arr.sort();
- } else {
- arr = arr.sort(function(a,b){return a-b;});
- }
- return arr.concat(rest);
- };
-
- /**
- * Inserts a value or an array of values into an existing array. The first
- * parameter specifies the initial array to be modified, and the second
- * parameter defines the data to be inserted. The third parameter is an index
- * value which specifies the array position from which to insert data.
- * (Remember that array index numbering starts at zero, so the first position
- * is 0, the second position is 1, and so on.)
- *
- * @method splice
- * @param {Array} list Array to splice into
- * @param {any} value value to be spliced in
- * @param {Number} position in the array from which to insert data
- *
- * @example
- * <div class = "norender"><code>
- * function setup() {
- * var myArray = new Array(0,1,2,3,4);
- * var insArray = new Array("A","B","C");
- * print(myArray); // [0,1,2,3,4]
- * print(insArray); // ["A","B","C"]
- *
- * splice(myArray, insArray, 3);
- * print(myArray); // [0,1,2,"A","B","C",3,4]
- * }
- * </div></code>
- */
- p5.prototype.splice = function(list, value, index) {
-
- // note that splice returns spliced elements and not an array
- Array.prototype.splice.apply(list, [index, 0].concat(value));
-
- return list;
- };
-
- /**
- * Extracts an array of elements from an existing array. The list parameter
- * defines the array from which the elements will be copied, and the start
- * and count parameters specify which elements to extract. If no count is
- * given, elements will be extracted from the start to the end of the array.
- * When specifying the start, remember that the first array element is 0.
- * This function does not change the source array.
- *
- * @method subset
- * @param {Array} list Array to extract from
- * @param {Number} start position to begin
- * @param {Number} [count] number of values to extract
- * @return {Array} Array of extracted elements
- *
- * @example
- * <div class = "norender"><code>
- * function setup() {
- * var myArray = new Array(1,2,3,4,5);
- * print(myArray); // [1,2,3,4,5]
- *
- * var sub1 = subset(myArray, 0, 3);
- * var sub2 = subset(myArray, 2, 2);
- * print(sub1); // [1,2,3]
- * print(sub2); // [3,4]
- * }
- * </div></code>
- */
- p5.prototype.subset = function(list, start, count) {
- if (typeof count !== 'undefined') {
- return list.slice(start, start + count);
- } else {
- return list.slice(start, list.length);
- }
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],74:[function(_dereq_,module,exports){
- /**
- * @module Data
- * @submodule Conversion
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * Converts a string to its floating point representation. The contents of a
- * string must resemble a number, or NaN (not a number) will be returned.
- * For example, float("1234.56") evaluates to 1234.56, but float("giraffe")
- * will return NaN.
- *
- * When an array of values is passed in, then an array of floats of the same
- * length is returned.
- *
- * @method float
- * @param {String} str float string to parse
- * @return {Number} floating point representation of string
- * @example
- * <div><code>
- * var str = '20';
- * var diameter = float(str);
- * ellipse(width/2, height/2, diameter, diameter);
- * </code></div>
- *
- * @alt
- * 20 by 20 white ellipse in the center of the canvas
- *
- */
- p5.prototype.float = function(str) {
- if (str instanceof Array) {
- return str.map(parseFloat);
- }
- return parseFloat(str);
- };
-
- /**
- * Converts a boolean, string, or float to its integer representation.
- * When an array of values is passed in, then an int array of the same length
- * is returned.
- *
- * @method int
- * @param {String|Boolean|Number|Array} n value to parse
- * @return {Number} integer representation of value
- * @example
- * <div class='norender'><code>
- * print(int("10")); // 10
- * print(int(10.31)); // 10
- * print(int(-10)); // -10
- * print(int(true)); // 1
- * print(int(false)); // 0
- * print(int([false, true, "10.3", 9.8])); // [0, 1, 10, 9]
- * </code></div>
- */
- p5.prototype.int = function(n, radix) {
- radix = radix || 10;
- if (typeof n === 'string') {
- return parseInt(n, radix);
- } else if (typeof n === 'number') {
- return n | 0;
- } else if (typeof n === 'boolean') {
- return n ? 1 : 0;
- } else if (n instanceof Array) {
- return n.map(function(n) { return p5.prototype.int(n, radix); });
- }
- };
-
- /**
- * Converts a boolean, string or number to its string representation.
- * When an array of values is passed in, then an array of strings of the same
- * length is returned.
- *
- * @method str
- * @param {String|Boolean|Number|Array} n value to parse
- * @return {String} string representation of value
- * @example
- * <div class='norender'><code>
- * print(str("10")); // "10"
- * print(str(10.31)); // "10.31"
- * print(str(-10)); // "-10"
- * print(str(true)); // "true"
- * print(str(false)); // "false"
- * print(str([true, "10.3", 9.8])); // [ "true", "10.3", "9.8" ]
- * </code></div>
- */
- p5.prototype.str = function(n) {
- if (n instanceof Array) {
- return n.map(p5.prototype.str);
- } else {
- return String(n);
- }
- };
-
- /**
- * Converts a number or string to its boolean representation.
- * For a number, any non-zero value (positive or negative) evaluates to true,
- * while zero evaluates to false. For a string, the value "true" evaluates to
- * true, while any other value evaluates to false. When an array of number or
- * string values is passed in, then a array of booleans of the same length is
- * returned.
- *
- * @method boolean
- * @param {String|Boolean|Number|Array} n value to parse
- * @return {Boolean} boolean representation of value
- * @example
- * <div class='norender'><code>
- * print(boolean(0)); // false
- * print(boolean(1)); // true
- * print(boolean("true")); // true
- * print(boolean("abcd")); // false
- * print(boolean([0, 12, "true"])); // [false, true, false]
- * </code></div>
- */
- p5.prototype.boolean = function(n) {
- if (typeof n === 'number') {
- return n !== 0;
- } else if (typeof n === 'string') {
- return n.toLowerCase() === 'true';
- } else if (typeof n === 'boolean') {
- return n;
- } else if (n instanceof Array) {
- return n.map(p5.prototype.boolean);
- }
- };
-
- /**
- * Converts a number, string or boolean to its byte representation.
- * A byte can be only a whole number between -128 and 127, so when a value
- * outside of this range is converted, it wraps around to the corresponding
- * byte representation. When an array of number, string or boolean values is
- * passed in, then an array of bytes the same length is returned.
- *
- * @method byte
- * @param {String|Boolean|Number|Array} n value to parse
- * @return {Number} byte representation of value
- * @example
- * <div class='norender'><code>
- * print(byte(127)); // 127
- * print(byte(128)); // -128
- * print(byte(23.4)); // 23
- * print(byte("23.4")); // 23
- * print(byte(true)); // 1
- * print(byte([0, 255, "100"])); // [0, -1, 100]
- * </code></div>
- */
- p5.prototype.byte = function(n) {
- var nn = p5.prototype.int(n, 10);
- if (typeof nn === 'number') {
- return ((nn + 128) % 256) - 128;
- } else if (nn instanceof Array) {
- return nn.map(p5.prototype.byte);
- }
- };
-
- /**
- * Converts a number or string to its corresponding single-character
- * string representation. If a string parameter is provided, it is first
- * parsed as an integer and then translated into a single-character string.
- * When an array of number or string values is passed in, then an array of
- * single-character strings of the same length is returned.
- *
- * @method char
- * @param {String|Number|Array} n value to parse
- * @return {String} string representation of value
- * @example
- * <div class='norender'><code>
- * print(char(65)); // "A"
- * print(char("65")); // "A"
- * print(char([65, 66, 67])); // [ "A", "B", "C" ]
- * print(join(char([65, 66, 67]), '')); // "ABC"
- * </code></div>
- */
- p5.prototype.char = function(n) {
- if (typeof n === 'number' && !isNaN(n)) {
- return String.fromCharCode(n);
- } else if (n instanceof Array) {
- return n.map(p5.prototype.char);
- } else if (typeof n === 'string') {
- return p5.prototype.char(parseInt(n, 10));
- }
- };
-
- /**
- * Converts a single-character string to its corresponding integer
- * representation. When an array of single-character string values is passed
- * in, then an array of integers of the same length is returned.
- *
- * @method unchar
- * @param {String|Array} n value to parse
- * @return {Number} integer representation of value
- * @example
- * <div class='norender'><code>
- * print(unchar("A")); // 65
- * print(unchar(["A", "B", "C"])); // [ 65, 66, 67 ]
- * print(unchar(split("ABC", ""))); // [ 65, 66, 67 ]
- * </code></div>
- */
- p5.prototype.unchar = function(n) {
- if (typeof n === 'string' && n.length === 1) {
- return n.charCodeAt(0);
- } else if (n instanceof Array) {
- return n.map(p5.prototype.unchar);
- }
- };
-
- /**
- * Converts a number to a string in its equivalent hexadecimal notation. If a
- * second parameter is passed, it is used to set the number of characters to
- * generate in the hexadecimal notation. When an array is passed in, an
- * array of strings in hexadecimal notation of the same length is returned.
- *
- * @method hex
- * @param {Number|Array} n value to parse
- * @return {String} hexadecimal string representation of value
- * @example
- * <div class='norender'><code>
- * print(hex(255)); // "000000FF"
- * print(hex(255, 6)); // "0000FF"
- * print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
- * </code></div>
- */
- p5.prototype.hex = function(n, digits) {
- digits = (digits === undefined || digits === null) ? digits = 8 : digits;
- if (n instanceof Array) {
- return n.map(function(n) { return p5.prototype.hex(n, digits); });
- } else if (typeof n === 'number') {
- if (n < 0) {
- n = 0xFFFFFFFF + n + 1;
- }
- var hex = Number(n).toString(16).toUpperCase();
- while (hex.length < digits) {
- hex = '0' + hex;
- }
- if (hex.length >= digits) {
- hex = hex.substring(hex.length - digits, hex.length);
- }
- return hex;
- }
- };
-
- /**
- * Converts a string representation of a hexadecimal number to its equivalent
- * integer value. When an array of strings in hexadecimal notation is passed
- * in, an array of integers of the same length is returned.
- *
- * @method unhex
- * @param {String|Array} n value to parse
- * @return {Number} integer representation of hexadecimal value
- * @example
- * <div class='norender'><code>
- * print(unhex("A")); // 10
- * print(unhex("FF")); // 255
- * print(unhex(["FF", "AA", "00"])); // [ 255, 170, 0 ]
- * </code></div>
- */
- p5.prototype.unhex = function(n) {
- if (n instanceof Array) {
- return n.map(p5.prototype.unhex);
- } else {
- return parseInt('0x' + n, 16);
- }
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],75:[function(_dereq_,module,exports){
- /**
- * @module Data
- * @submodule String Functions
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- //return p5; //LM is this a mistake?
-
- /**
- * Combines an array of Strings into one String, each separated by the
- * character(s) used for the separator parameter. To join arrays of ints or
- * floats, it's necessary to first convert them to Strings using nf() or
- * nfs().
- *
- * @method join
- * @param {Array} list array of Strings to be joined
- * @param {String} separator String to be placed between each item
- * @return {String} joined String
- * @example
- * <div>
- * <code>
- * var array = ["Hello", "world!"]
- * var separator = " "
- * var message = join(array, separator);
- * text(message, 5, 50);
- * </code>
- * </div>
- *
- * @alt
- * "hello world!" displayed middle left of canvas.
- *
- */
- p5.prototype.join = function(list, separator) {
- return list.join(separator);
- };
-
- /**
- * This function is used to apply a regular expression to a piece of text,
- * and return matching groups (elements found inside parentheses) as a
- * String array. If there are no matches, a null value will be returned.
- * If no groups are specified in the regular expression, but the sequence
- * matches, an array of length 1 (with the matched text as the first element
- * of the array) will be returned.
- * <br><br>
- * To use the function, first check to see if the result is null. If the
- * result is null, then the sequence did not match at all. If the sequence
- * did match, an array is returned.
- * <br><br>
- * If there are groups (specified by sets of parentheses) in the regular
- * expression, then the contents of each will be returned in the array.
- * Element [0] of a regular expression match returns the entire matching
- * string, and the match groups start at element [1] (the first group is [1],
- * the second [2], and so on).
- *
- * @method match
- * @param {String} str the String to be searched
- * @param {String} regexp the regexp to be used for matching
- * @return {Array} Array of Strings found
- * @example
- * <div>
- * <code>
- * var string = "Hello p5js*!"
- * var regexp = "p5js\\*"
- * var match = match(string, regexp);
- * text(match, 5, 50);
- * </code>
- * </div>
- *
- * @alt
- * "p5js*" displayed middle left of canvas.
- *
- */
- p5.prototype.match = function(str, reg) {
- return str.match(reg);
- };
-
- /**
- * This function is used to apply a regular expression to a piece of text,
- * and return a list of matching groups (elements found inside parentheses)
- * as a two-dimensional String array. If there are no matches, a null value
- * will be returned. If no groups are specified in the regular expression,
- * but the sequence matches, a two dimensional array is still returned, but
- * the second dimension is only of length one.
- * <br><br>
- * To use the function, first check to see if the result is null. If the
- * result is null, then the sequence did not match at all. If the sequence
- * did match, a 2D array is returned.
- * <br><br>
- * If there are groups (specified by sets of parentheses) in the regular
- * expression, then the contents of each will be returned in the array.
- * Assuming a loop with counter variable i, element [i][0] of a regular
- * expression match returns the entire matching string, and the match groups
- * start at element [i][1] (the first group is [i][1], the second [i][2],
- * and so on).
- *
- * @method matchAll
- * @param {String} str the String to be searched
- * @param {String} regexp the regexp to be used for matching
- * @return {Array} 2d Array of Strings found
- * @example
- * <div class="norender">
- * <code>
- * var string = "Hello p5js*! Hello world!"
- * var regexp = "Hello"
- * matchAll(string, regexp);
- * </code>
- * </div>
-
- */
- p5.prototype.matchAll = function(str, reg) {
- var re = new RegExp(reg, 'g');
- var match = re.exec(str);
- var matches = [];
- while (match !== null) {
- matches.push(match);
- // matched text: match[0]
- // match start: match.index
- // capturing group n: match[n]
- match = re.exec(str);
- }
- return matches;
- };
-
- /**
- * Utility function for formatting numbers into strings. There are two
- * versions: one for formatting floats, and one for formatting ints.
- * The values for the digits, left, and right parameters should always
- * be positive integers.
- *
- * @method nf
- * @param {Number|Array} num the Number to format
- * @param {Number} [left] number of digits to the left of the
- * decimal point
- * @param {Number} [right] number of digits to the right of the
- * decimal point
- * @return {String|Array} formatted String
- * @example
- * <div>
- * <code>
- * function setup() {
- * background(200);
- * var num = 112.53106115;
- *
- * noStroke();
- * fill(0);
- * textSize(14);
- * // Draw formatted numbers
- * text(nf(num, 5, 2), 10, 20);
- *
- * text(nf(num, 4, 3), 10, 55);
- *
- * text(nf(num, 3, 6), 10, 85);
- *
- * // Draw dividing lines
- * stroke(120);
- * line(0, 30, width, 30);
- * line(0, 65, width, 65);
- * }
- * </code>
- * </div>
- *
- * @alt
- * "0011253" top left, "0112.531" mid left, "112.531061" bottom left canvas
- *
- */
- p5.prototype.nf = function () {
- if (arguments[0] instanceof Array) {
- var a = arguments[1];
- var b = arguments[2];
- return arguments[0].map(function (x) {
- return doNf(x, a, b);
- });
- }
- else{
- var typeOfFirst = Object.prototype.toString.call(arguments[0]);
- if(typeOfFirst === '[object Arguments]'){
- if(arguments[0].length===3){
- return this.nf(arguments[0][0],arguments[0][1],arguments[0][2]);
- }
- else if(arguments[0].length===2){
- return this.nf(arguments[0][0],arguments[0][1]);
- }
- else{
- return this.nf(arguments[0][0]);
- }
- }
- else {
- return doNf.apply(this, arguments);
- }
- }
- };
-
- function doNf() {
- var num = arguments[0];
- var neg = num < 0;
- var n = neg ? num.toString().substring(1) : num.toString();
- var decimalInd = n.indexOf('.');
- var intPart = decimalInd !== -1 ? n.substring(0, decimalInd) : n;
- var decPart = decimalInd !== -1 ? n.substring(decimalInd + 1) : '';
- var str = neg ? '-' : '';
- if (arguments.length === 3) {
- var decimal = '';
- if(decimalInd !== -1 || arguments[2] - decPart.length > 0){
- decimal = '.';
- }
- if (decPart.length > arguments[2]) {
- decPart = decPart.substring(0, arguments[2]);
- }
- for (var i = 0; i < arguments[1] - intPart.length; i++) {
- str += '0';
- }
- str += intPart;
- str += decimal;
- str += decPart;
- for (var j = 0; j < arguments[2] - decPart.length; j++) {
- str += '0';
- }
- return str;
- }
- else {
- for (var k = 0; k < Math.max(arguments[1] - intPart.length, 0); k++) {
- str += '0';
- }
- str += n;
- return str;
- }
- }
-
- /**
- * Utility function for formatting numbers into strings and placing
- * appropriate commas to mark units of 1000. There are two versions: one
- * for formatting ints, and one for formatting an array of ints. The value
- * for the right parameter should always be a positive integer.
- *
- * @method nfc
- * @param {Number|Array} num the Number to format
- * @param {Number} [right] number of digits to the right of the
- * decimal point
- * @return {String|Array} formatted String
- * @example
- * <div>
- * <code>
- * function setup() {
- * background(200);
- * var num = 11253106.115;
- * var numArr = new Array(1,1,2);
- *
- * noStroke();
- * fill(0);
- * textSize(12);
- *
- * // Draw formatted numbers
- * text(nfc(num, 4, 2), 10, 30);
- * text(nfc(numArr, 2, 1), 10, 80);
- *
- * // Draw dividing line
- * stroke(120);
- * line(0, 50, width, 50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * "11,253,106.115" top middle and "1.00,1.00,2.00" displayed bottom mid
- *
- */
- p5.prototype.nfc = function () {
- if (arguments[0] instanceof Array) {
- var a = arguments[1];
- return arguments[0].map(function (x) {
- return doNfc(x, a);
- });
- } else {
- return doNfc.apply(this, arguments);
- }
- };
- function doNfc() {
- var num = arguments[0].toString();
- var dec = num.indexOf('.');
- var rem = dec !== -1 ? num.substring(dec) : '';
- var n = dec !== -1 ? num.substring(0, dec) : num;
- n = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
- if (arguments[1] === 0) {
- rem = '';
- }
- else if(arguments[1] !== undefined){
- if(arguments[1] > rem.length){
- rem+= dec === -1 ? '.' : '';
- var len = arguments[1] - rem.length + 1;
- for(var i =0; i< len; i++){
- rem += '0';
- }
- }
- else{
- rem = rem.substring(0, arguments[1] + 1);
- }
- }
- return n + rem;
- }
-
- /**
- * Utility function for formatting numbers into strings. Similar to nf() but
- * puts a "+" in front of positive numbers and a "-" in front of negative
- * numbers. There are two versions: one for formatting floats, and one for
- * formatting ints. The values for left, and right parameters
- * should always be positive integers.
- *
- * @method nfp
- * @param {Number|Array} num the Number to format
- * @param {Number} [left] number of digits to the left of the decimal
- * point
- * @param {Number} [right] number of digits to the right of the
- * decimal point
- * @return {String|Array} formatted String
- * @example
- * <div>
- * <code>
- * function setup() {
- * background(200);
- * var num1 = 11253106.115;
- * var num2 = -11253106.115;
- *
- * noStroke();
- * fill(0);
- * textSize(12);
- *
- * // Draw formatted numbers
- * text(nfp(num1, 4, 2), 10, 30);
- * text(nfp(num2, 4, 2), 10, 80);
- *
- * // Draw dividing line
- * stroke(120);
- * line(0, 50, width, 50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * "+11253106.11" top middle and "-11253106.11" displayed bottom middle
- *
- */
- p5.prototype.nfp = function() {
- var nfRes = this.nf.apply(this, arguments);
- if (nfRes instanceof Array) {
- return nfRes.map(addNfp);
- } else {
- return addNfp(nfRes);
- }
- };
-
- function addNfp() {
- return (
- parseFloat(arguments[0]) > 0) ?
- '+'+arguments[0].toString() :
- arguments[0].toString();
- }
-
- /**
- * Utility function for formatting numbers into strings. Similar to nf() but
- * puts a " " (space) in front of positive numbers and a "-" in front of
- * negative numbers. There are two versions: one for formatting floats, and
- * one for formatting ints. The values for the digits, left, and right
- * parameters should always be positive integers.
- *
- * @method nfs
- * @param {Number|Array} num the Number to format
- * @param {Number} [left] number of digits to the left of the decimal
- * point
- * @param {Number} [right] number of digits to the right of the
- * decimal point
- * @return {String|Array} formatted String
- * @example
- * <div>
- * <code>
- * function setup() {
- * background(200);
- * var num1 = 11253106.115;
- * var num2 = -11253106.115;
- *
- * noStroke();
- * fill(0);
- * textSize(12);
- * // Draw formatted numbers
- * text(nfs(num1, 4, 2), 10, 30);
- *
- * text(nfs(num2, 4, 2), 10, 80);
- *
- * // Draw dividing line
- * stroke(120);
- * line(0, 50, width, 50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * "11253106.11" top middle and "-11253106.11" displayed bottom middle
- *
- */
- p5.prototype.nfs = function() {
- var nfRes = this.nf.apply(this, arguments);
- if (nfRes instanceof Array) {
- return nfRes.map(addNfs);
- } else {
- return addNfs(nfRes);
- }
- };
-
- function addNfs() {
- return (
- parseFloat(arguments[0]) > 0) ?
- ' '+arguments[0].toString() :
- arguments[0].toString();
- }
-
- /**
- * The split() function maps to String.split(), it breaks a String into
- * pieces using a character or string as the delimiter. The delim parameter
- * specifies the character or characters that mark the boundaries between
- * each piece. A String[] array is returned that contains each of the pieces.
- *
- * The splitTokens() function works in a similar fashion, except that it
- * splits using a range of characters instead of a specific character or
- * sequence.
- *
- * @method split
- * @param {String} value the String to be split
- * @param {String} delim the String used to separate the data
- * @return {Array} Array of Strings
- * @example
- * <div>
- * <code>
- * var names = "Pat,Xio,Alex"
- * var splitString = split(names, ",");
- * text(splitString[0], 5, 30);
- * text(splitString[1], 5, 50);
- * text(splitString[2], 5, 70);
- * </code>
- * </div>
- *
- * @alt
- * "pat" top left, "Xio" mid left and "Alex" displayed bottom left
- *
- */
- p5.prototype.split = function(str, delim) {
- return str.split(delim);
- };
-
- /**
- * The splitTokens() function splits a String at one or many character
- * delimiters or "tokens." The delim parameter specifies the character or
- * characters to be used as a boundary.
- * <br><br>
- * If no delim characters are specified, any whitespace character is used to
- * split. Whitespace characters include tab (\t), line feed (\n), carriage
- * return (\r), form feed (\f), and space.
- *
- * @method splitTokens
- * @param {String} value the String to be split
- * @param {String} [delim] list of individual Strings that will be used as
- * separators
- * @return {Array} Array of Strings
- * @example
- * <div class = "norender">
- * <code>
- * function setup() {
- * var myStr = "Mango, Banana, Lime";
- * var myStrArr = splitTokens(myStr, ",");
- *
- * print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
- * }
- * </code>
- * </div>
- */
- p5.prototype.splitTokens = function() {
- var d,sqo,sqc,str;
- str = arguments[1];
- if (arguments.length > 1) {
- sqc = /\]/g.exec(str);
- sqo = /\[/g.exec(str);
- if ( sqo && sqc ) {
- str = str.slice(0, sqc.index) + str.slice(sqc.index+1);
- sqo = /\[/g.exec(str);
- str = str.slice(0, sqo.index) + str.slice(sqo.index+1);
- d = new RegExp('[\\['+str+'\\]]','g');
- } else if ( sqc ) {
- str = str.slice(0, sqc.index) + str.slice(sqc.index+1);
- d = new RegExp('[' + str + '\\]]', 'g');
- } else if(sqo) {
- str = str.slice(0, sqo.index) + str.slice(sqo.index+1);
- d = new RegExp('[' + str + '\\[]', 'g');
- } else {
- d = new RegExp('[' + str + ']', 'g');
- }
- } else {
- d = /\s/g;
- }
- return arguments[0].split(d).filter(function(n){return n;});
- };
-
- /**
- * Removes whitespace characters from the beginning and end of a String. In
- * addition to standard whitespace characters such as space, carriage return,
- * and tab, this function also removes the Unicode "nbsp" character.
- *
- * @method trim
- * @param {String|Array} str a String or Array of Strings to be trimmed
- * @return {String|Array} a trimmed String or Array of Strings
- * @example
- * <div>
- * <code>
- * var string = trim(" No new lines\n ");
- * text(string +" here", 2, 50);
- * </code>
- * </div>
- *
- * @alt
- * "No new lines here" displayed center canvas
- *
- */
- p5.prototype.trim = function(str) {
- if (str instanceof Array) {
- return str.map(this.trim);
- } else {
- return str.trim();
- }
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],76:[function(_dereq_,module,exports){
- /**
- * @module IO
- * @submodule Time & Date
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * p5.js communicates with the clock on your computer. The day() function
- * returns the current day as a value from 1 - 31.
- *
- * @method day
- * @return {Number} the current day
- * @example
- * <div>
- * <code>
- * var d = day();
- * text("Current day: \n" + d, 5, 50);
- * </code>
- * </div>
- *
- * @alt
- * Current day is displayed
- *
- */
- p5.prototype.day = function() {
- return new Date().getDate();
- };
-
- /**
- * p5.js communicates with the clock on your computer. The hour() function
- * returns the current hour as a value from 0 - 23.
- *
- * @method hour
- * @return {Number} the current hour
- * @example
- * <div>
- * <code>
- * var h = hour();
- * text("Current hour:\n" + h, 5, 50);
- * </code>
- * </div>
- *
- * @alt
- * Current hour is displayed
- *
- */
- p5.prototype.hour = function() {
- return new Date().getHours();
- };
-
- /**
- * p5.js communicates with the clock on your computer. The minute() function
- * returns the current minute as a value from 0 - 59.
- *
- * @method minute
- * @return {Number} the current minute
- * @example
- * <div>
- * <code>
- * var m = minute();
- * text("Current minute: \n" + m, 5, 50);
- * </code>
- * </div>
- *
- * @alt
- * Current minute is displayed
- *
- */
- p5.prototype.minute = function() {
- return new Date().getMinutes();
- };
-
- /**
- * Returns the number of milliseconds (thousandths of a second) since
- * starting the program. This information is often used for timing events and
- * animation sequences.
- *
- * @method millis
- * @return {Number} the number of milliseconds since starting the program
- * @example
- * <div>
- * <code>
- * var millisecond = millis();
- * text("Milliseconds \nrunning: \n" + millisecond, 5, 40);
- * </code>
- * </div>
- *
- * @alt
- * number of milliseconds since program has started displayed
- *
- */
- p5.prototype.millis = function() {
- return window.performance.now();
- };
-
- /**
- * p5.js communicates with the clock on your computer. The month() function
- * returns the current month as a value from 1 - 12.
- *
- * @method month
- * @return {Number} the current month
- * @example
- * <div>
- * <code>
- * var m = month();
- * text("Current month: \n" + m, 5, 50);
- * </code>
- * </div>
- *
- * @alt
- * Current month is displayed
- *
- */
- p5.prototype.month = function() {
- return new Date().getMonth() + 1; //January is 0!
- };
-
- /**
- * p5.js communicates with the clock on your computer. The second() function
- * returns the current second as a value from 0 - 59.
- *
- * @method second
- * @return {Number} the current second
- * @example
- * <div>
- * <code>
- * var s = second();
- * text("Current second: \n" + s, 5, 50);
- * </code>
- * </div>
- *
- * @alt
- * Current second is displayed
- *
- */
- p5.prototype.second = function() {
- return new Date().getSeconds();
- };
-
- /**
- * p5.js communicates with the clock on your computer. The year() function
- * returns the current year as an integer (2014, 2015, 2016, etc).
- *
- * @method year
- * @return {Number} the current year
- * @example
- * <div>
- * <code>
- * var y = year();
- * text("Current year: \n" + y, 5, 50);
- * </code>
- * </div>
- *
- * @alt
- * Current year is displayed
- *
- */
- p5.prototype.year = function() {
- return new Date().getFullYear();
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],77:[function(_dereq_,module,exports){
- /**
- * @module Lights, Camera
- * @submodule Camera
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * Sets camera position
- * @method camera
- * @param {Number} x camera position value on x axis
- * @param {Number} y camera position value on y axis
- * @param {Number} z camera position value on z axis
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- * function draw(){
- * //move the camera away from the plane by a sin wave
- * camera(0, 0, sin(frameCount * 0.01) * 100);
- * plane(120, 120);
- * }
- * </code>
- * </div>
- *
- * @alt
- * blue square shrinks in size grows to fill canvas. disappears then loops.
- *
- */
- p5.prototype.camera = function(x, y, z){
- //what it manipulates is the model view matrix
- this._renderer.translate(-x, -y, -z);
- };
-
- /**
- * Sets perspective camera
- * @method perspective
- * @param {Number} fovy camera frustum vertical field of view,
- * from bottom to top of view, in degrees
- * @param {Number} aspect camera frustum aspect ratio
- * @param {Number} near frustum near plane length
- * @param {Number} far frustum far plane length
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * //drag mouse to toggle the world!
- * //you will see there's a vanish point
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * var fov = 60 / 180 * PI;
- * var cameraZ = (height/2.0) / tan(fov/2.0);
- * perspective(60 / 180 * PI, width/height, cameraZ * 0.1, cameraZ * 10);
- * }
- * function draw(){
- * background(200);
- * orbitControl();
- * for(var i = -1; i < 2; i++){
- * for(var j = -2; j < 3; j++){
- * push();
- * translate(i*160, 0, j*160);
- * box(40, 40, 40);
- * pop();
- * }
- * }
- * }
- * </code>
- * </div>
- *
- * @alt
- * colored 3d boxes toggleable with mouse position
- *
- */
- p5.prototype.perspective = function(fovy,aspect,near,far) {
- fovy = fovy || (60 / 180 * this.PI);
- aspect = aspect || (this.width/this.height);
- near = near || ((this.height/2.0) / this.tan(fovy/2.0) * 0.1);
- far = far || ((this.height/2.0) / this.tan(fovy/2.0) * 10);
- this._renderer.uPMatrix = p5.Matrix.identity();
- this._renderer.uPMatrix.perspective(fovy,aspect,near,far);
- this._renderer._curCamera = 'custom';
- };
-
- /**
- * Setup ortho camera
- * @method ortho
- * @param {Number} left camera frustum left plane
- * @param {Number} right camera frustum right plane
- * @param {Number} bottom camera frustum bottom plane
- * @param {Number} top camera frustum top plane
- * @param {Number} near camera frustum near plane
- * @param {Number} far camera frustum far plane
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * //drag mouse to toggle the world!
- * //there's no vanish point
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * ortho(-width/2, width/2, height/2, -height/2, 0, 500);
- * }
- * function draw(){
- * background(200);
- * orbitControl();
- * for(var i = -1; i < 2; i++){
- * for(var j = -2; j < 3; j++){
- * push();
- * translate(i*160, 0, j*160);
- * box(40, 40, 40);
- * pop();
- * }
- * }
- * }
- * </code>
- * </div>
- *
- * @alt
- * 3 3d boxes, reveal several more boxes on 3d plane when mouse used to toggle
- *
- */
- p5.prototype.ortho = function(left,right,bottom,top,near,far) {
- left = left || (-this.width/2);
- right = right || (this.width/2);
- bottom = bottom || (-this.height/2);
- top = top || (this.height/2);
- near = near || 0;
- far = far || Math.max(this.width, this.height);
- this._renderer.uPMatrix = p5.Matrix.identity();
- this._renderer.uPMatrix.ortho(left,right,bottom,top,near,far);
- this._renderer._curCamera = 'custom';
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],78:[function(_dereq_,module,exports){
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- //@TODO: implement full orbit controls including
- //pan, zoom, quaternion rotation, etc.
- p5.prototype.orbitControl = function(){
- if(this.mouseIsPressed){
- this.rotateY((this.mouseX - this.width / 2) / (this.width / 2));
- this.rotateX((this.mouseY - this.height / 2) / (this.width / 2));
- }
- return this;
- };
-
- module.exports = p5;
- },{"../core/core":37}],79:[function(_dereq_,module,exports){
- /**
- * @module Lights, Camera
- * @submodule Lights
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * Creates an ambient light with a color
- * @method ambientLight
- * @param {Number|Array|String|p5.Color} v1 gray value,
- * red or hue value (depending on the current color mode),
- * or color Array, or CSS color string
- * @param {Number} [v2] optional: green or saturation value
- * @param {Number} [v3] optional: blue or brightness value
- * @param {Number} [a] optional: opacity
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- * function draw(){
- * background(0);
- * ambientLight(150);
- * ambientMaterial(250);
- * sphere(50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * nothing displayed
- *
- */
- p5.prototype.ambientLight = function(v1, v2, v3, a){
- var gl = this._renderer.GL;
- var shaderProgram = this._renderer._getShader(
- 'lightVert', 'lightTextureFrag');
-
- gl.useProgram(shaderProgram);
- shaderProgram.uAmbientColor = gl.getUniformLocation(
- shaderProgram,
- 'uAmbientColor[' + this._renderer.ambientLightCount + ']');
-
- var color = this._renderer._pInst.color.apply(
- this._renderer._pInst, arguments);
- var colors = color._array;
-
- gl.uniform3f( shaderProgram.uAmbientColor,
- colors[0], colors[1], colors[2]);
-
- //in case there's no material color for the geometry
- shaderProgram.uMaterialColor = gl.getUniformLocation(
- shaderProgram, 'uMaterialColor' );
- gl.uniform4f( shaderProgram.uMaterialColor, 1, 1, 1, 1);
-
- this._renderer.ambientLightCount ++;
- shaderProgram.uAmbientLightCount =
- gl.getUniformLocation(shaderProgram, 'uAmbientLightCount');
- gl.uniform1i(shaderProgram.uAmbientLightCount,
- this._renderer.ambientLightCount);
-
- return this;
- };
-
- /**
- * Creates a directional light with a color and a direction
- * @method directionalLight
- * @param {Number|Array|String|p5.Color} v1 gray value,
- * red or hue value (depending on the current color mode),
- * or color Array, or CSS color string
- * @param {Number} [v2] optional: green or saturation value
- * @param {Number} [v3] optional: blue or brightness value
- * @param {Number} [a] optional: opacity
- * @param {Number|p5.Vector} x x axis direction or a p5.Vector
- * @param {Number} [y] optional: y axis direction
- * @param {Number} [z] optional: z axis direction
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- * function draw(){
- * background(0);
- * //move your mouse to change light direction
- * var dirX = (mouseX / width - 0.5) *2;
- * var dirY = (mouseY / height - 0.5) *(-2);
- * directionalLight(250, 250, 250, dirX, dirY, 0.25);
- * ambientMaterial(250);
- * sphere(50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * light source on canvas changeable with mouse position
- *
- */
- p5.prototype.directionalLight = function(v1, v2, v3, a, x, y, z) {
- var gl = this._renderer.GL;
- var shaderProgram = this._renderer._getShader(
- 'lightVert', 'lightTextureFrag');
-
- gl.useProgram(shaderProgram);
- shaderProgram.uDirectionalColor = gl.getUniformLocation(
- shaderProgram,
- 'uDirectionalColor[' + this._renderer.directionalLightCount + ']');
-
- //@TODO: check parameters number
- var color = this._renderer._pInst.color.apply(
- this._renderer._pInst, [v1, v2, v3]);
- var colors = color._array;
-
- gl.uniform3f( shaderProgram.uDirectionalColor,
- colors[0], colors[1], colors[2]);
-
- var _x, _y, _z;
-
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- if(typeof args[args.length-1] === 'number'){
- _x = args[args.length-3];
- _y = args[args.length-2];
- _z = args[args.length-1];
-
- }else{
- try{
- _x = args[args.length-1].x;
- _y = args[args.length-1].y;
- _z = args[args.length-1].z;
- }
- catch(error){
- throw error;
- }
- }
-
- shaderProgram.uLightingDirection = gl.getUniformLocation(
- shaderProgram,
- 'uLightingDirection[' + this._renderer.directionalLightCount + ']');
- gl.uniform3f( shaderProgram.uLightingDirection, _x, _y, _z);
-
- //in case there's no material color for the geometry
- shaderProgram.uMaterialColor = gl.getUniformLocation(
- shaderProgram, 'uMaterialColor' );
- gl.uniform4f( shaderProgram.uMaterialColor, 1, 1, 1, 1);
-
- this._renderer.directionalLightCount ++;
- shaderProgram.uDirectionalLightCount =
- gl.getUniformLocation(shaderProgram, 'uDirectionalLightCount');
- gl.uniform1i(shaderProgram.uDirectionalLightCount,
- this._renderer.directionalLightCount);
-
- return this;
- };
-
- /**
- * Creates a point light with a color and a light position
- * @method pointLight
- * @param {Number|Array|String|p5.Color} v1 gray value,
- * red or hue value (depending on the current color mode),
- * or color Array, or CSS color string
- * @param {Number} [v2] optional: green or saturation value
- * @param {Number} [v3] optional: blue or brightness value
- * @param {Number} [a] optional: opacity
- * @param {Number|p5.Vector} x x axis position or a p5.Vector
- * @param {Number} [y] optional: y axis position
- * @param {Number} [z] optional: z axis position
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- * function draw(){
- * background(0);
- * //move your mouse to change light position
- * var locY = (mouseY / height - 0.5) *(-2);
- * var locX = (mouseX / width - 0.5) *2;
- * //to set the light position,
- * //think of the world's coordinate as:
- * // -1,1 -------- 1,1
- * // | |
- * // | |
- * // | |
- * // -1,-1---------1,-1
- * pointLight(250, 250, 250, locX, locY, 0);
- * ambientMaterial(250);
- * sphere(50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * spot light on canvas changes position with mouse
- *
- */
- p5.prototype.pointLight = function(v1, v2, v3, a, x, y, z) {
- var gl = this._renderer.GL;
- var shaderProgram = this._renderer._getShader(
- 'lightVert', 'lightTextureFrag');
-
- gl.useProgram(shaderProgram);
- shaderProgram.uPointLightColor = gl.getUniformLocation(
- shaderProgram,
- 'uPointLightColor[' + this._renderer.pointLightCount + ']');
-
- //@TODO: check parameters number
- var color = this._renderer._pInst.color.apply(
- this._renderer._pInst, [v1, v2, v3]);
- var colors = color._array;
-
- gl.uniform3f( shaderProgram.uPointLightColor,
- colors[0], colors[1], colors[2]);
-
- var _x, _y, _z;
-
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- if(typeof args[args.length-1] === 'number'){
- _x = args[args.length-3];
- _y = args[args.length-2];
- _z = args[args.length-1];
-
- }else{
- try{
- _x = args[args.length-1].x;
- _y = args[args.length-1].y;
- _z = args[args.length-1].z;
- }
- catch(error){
- throw error;
- }
- }
-
- shaderProgram.uPointLightLocation = gl.getUniformLocation(
- shaderProgram,
- 'uPointLightLocation[' + this._renderer.pointLightCount + ']');
- gl.uniform3f( shaderProgram.uPointLightLocation, _x, _y, _z);
-
- //in case there's no material color for the geometry
- shaderProgram.uMaterialColor = gl.getUniformLocation(
- shaderProgram, 'uMaterialColor' );
- gl.uniform4f( shaderProgram.uMaterialColor, 1, 1, 1, 1);
-
- this._renderer.pointLightCount ++;
- shaderProgram.uPointLightCount =
- gl.getUniformLocation(shaderProgram, 'uPointLightCount');
- gl.uniform1i(shaderProgram.uPointLightCount,
- this._renderer.pointLightCount);
-
- return this;
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],80:[function(_dereq_,module,exports){
- /**
- * @module Shape
- * @submodule 3D Models
- * @for p5
- * @requires core
- * @requires p5.Geometry3D
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- _dereq_('./p5.Geometry');
-
- /**
- * Load a 3d model from an OBJ file.
- * <br><br>
- * One of the limitations of the OBJ format is that it doesn't have a built-in
- * sense of scale. This means that models exported from different programs might
- * be very different sizes. If your model isn't displaying, try calling
- * loadModel() with the normalized parameter set to true. This will resize the
- * model to a scale appropriate for p5. You can also make additional changes to
- * the final size of your model with the scale() function.
- *
- * @method loadModel
- * @param {String} path Path of the model to be loaded
- * @param {Boolean} [normalize] If true, scale the model to a
- * standardized size when loading
- * @param {Function(p5.Geometry3D)} [successCallback] Function to be called
- * once the model is loaded. Will be passed
- * the 3D model object.
- * @param {Function(Event)} [failureCallback] called with event error if
- * the image fails to load.
- * @return {p5.Geometry} the p5.Geometry3D object
- * @example
- * <div>
- * <code>
- * //draw a spinning teapot
- * var teapot;
- *
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- *
- * teapot = loadModel('assets/teapot.obj');
- * }
- *
- * function draw(){
- * background(200);
- * rotateX(frameCount * 0.01);
- * rotateY(frameCount * 0.01);
- * model(teapot);
- * }
- * </code>
- * </div>
- *
- * @alt
- * Vertically rotating 3-d teapot with red, green and blue gradient.
- *
- */
- p5.prototype.loadModel = function () {
- var path = arguments[0];
- var normalize;
- var successCallback;
- var failureCallback;
- if(typeof arguments[1] === 'boolean') {
- normalize = arguments[1];
- successCallback = arguments[2];
- failureCallback = arguments[3];
- } else {
- normalize = false;
- successCallback = arguments[1];
- failureCallback = arguments[2];
- }
-
- var model = new p5.Geometry();
- model.gid = path + '|' + normalize;
- this.loadStrings(path, function(strings) {
- parseObj(model, strings);
-
- if (normalize) {
- model.normalize();
- }
-
- if (typeof successCallback === 'function') {
- successCallback(model);
- }
- }.bind(this), failureCallback);
-
- return model;
- };
-
- /**
- * Parse OBJ lines into model. For reference, this is what a simple model of a
- * square might look like:
- *
- * v -0.5 -0.5 0.5
- * v -0.5 -0.5 -0.5
- * v -0.5 0.5 -0.5
- * v -0.5 0.5 0.5
- *
- * f 4 3 2 1
- */
- function parseObj( model, lines ) {
- // OBJ allows a face to specify an index for a vertex (in the above example),
- // but it also allows you to specify a custom combination of vertex, UV
- // coordinate, and vertex normal. So, "3/4/3" would mean, "use vertex 3 with
- // UV coordinate 4 and vertex normal 3". In WebGL, every vertex with different
- // parameters must be a different vertex, so loadedVerts is used to
- // temporarily store the parsed vertices, normals, etc., and indexedVerts is
- // used to map a specific combination (keyed on, for example, the string
- // "3/4/3"), to the actual index of the newly created vertex in the final
- // object.
- var loadedVerts = {'v' : [],
- 'vt' : [],
- 'vn' : []};
- var indexedVerts = {};
-
- for (var line = 0; line < lines.length; ++line) {
- // Each line is a separate object (vertex, face, vertex normal, etc)
- // For each line, split it into tokens on whitespace. The first token
- // describes the type.
- var tokens = lines[line].trim().split(/\b\s+/);
-
- if (tokens.length > 0) {
- if (tokens[0] === 'v' || tokens[0] === 'vn') {
- // Check if this line describes a vertex or vertex normal.
- // It will have three numeric parameters.
- var vertex = new p5.Vector(parseFloat(tokens[1]),
- parseFloat(tokens[2]),
- parseFloat(tokens[3]));
- loadedVerts[tokens[0]].push(vertex);
- } else if (tokens[0] === 'vt') {
- // Check if this line describes a texture coordinate.
- // It will have two numeric parameters.
- var texVertex = [parseFloat(tokens[1]), parseFloat(tokens[2])];
- loadedVerts[tokens[0]].push(texVertex);
- } else if (tokens[0] === 'f') {
- // Check if this line describes a face.
- // OBJ faces can have more than three points. Triangulate points.
- for (var tri = 3; tri < tokens.length; ++tri) {
- var face = [];
-
- var vertexTokens = [1, tri - 1, tri];
-
- for (var tokenInd = 0; tokenInd < vertexTokens.length; ++tokenInd) {
- // Now, convert the given token into an index
- var vertString = tokens[vertexTokens[tokenInd]];
- var vertIndex = 0;
-
- // TODO: Faces can technically use negative numbers to refer to the
- // previous nth vertex. I haven't seen this used in practice, but
- // it might be good to implement this in the future.
-
- if (indexedVerts[vertString] !== undefined) {
- vertIndex = indexedVerts[vertString];
- } else {
- var vertParts = vertString.split('/');
- for (var i = 0; i < vertParts.length; i++) {
- vertParts[i] = parseInt(vertParts[i]) - 1;
- }
-
- vertIndex = indexedVerts[vertString] = model.vertices.length;
- model.vertices.push(loadedVerts.v[vertParts[0]].copy());
- if (loadedVerts.vt[vertParts[1]]) {
- model.uvs.push(loadedVerts.vt[vertParts[1]].slice());
- } else {
- model.uvs.push([0, 0]);
- }
-
- if (loadedVerts.vn[vertParts[2]]) {
- model.vertexNormals.push(loadedVerts.vn[vertParts[2]].copy());
- }
- }
-
- face.push(vertIndex);
- }
-
- model.faces.push(face);
- }
- }
- }
- }
-
- // If the model doesn't have normals, compute the normals
- if(model.vertexNormals.length === 0) {
- model.computeNormals();
- }
-
- return model;
- }
-
- /**
- * Render a 3d model to the screen.
- *
- * @method model
- * @param {p5.Geometry} model Loaded 3d model to be rendered
- * @example
- * <div>
- * <code>
- * //draw a spinning teapot
- * var teapot;
- *
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- *
- * teapot = loadModel('assets/teapot.obj');
- * }
- *
- * function draw(){
- * background(200);
- * rotateX(frameCount * 0.01);
- * rotateY(frameCount * 0.01);
- * model(teapot);
- * }
- * </code>
- * </div>
- *
- * @alt
- * Vertically rotating 3-d teapot with red, green and blue gradient.
- *
- */
- p5.prototype.model = function ( model ) {
- if (model.vertices.length > 0) {
- if (!this._renderer.geometryInHash(model.gid)) {
- this._renderer.createBuffers(model.gid, model);
- }
-
- this._renderer.drawBuffers(model.gid);
- }
- };
-
- module.exports = p5;
-
- },{"../core/core":37,"./p5.Geometry":82}],81:[function(_dereq_,module,exports){
- /**
- * @module Lights, Camera
- * @submodule Material
- * @for p5
- * @requires core
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- //require('./p5.Texture');
-
- /**
- * Normal material for geometry. You can view all
- * possible materials in this
- * <a href="https://http://p5js.org/examples/3d-materials.html">example</a>.
- * @method normalMaterial
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * normalMaterial();
- * sphere(50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * Red, green and blue gradient.
- *
- */
- p5.prototype.normalMaterial = function(){
- this._renderer._getShader('normalVert', 'normalFrag');
- return this;
- };
-
- /**
- * Texture for geometry. You can view other possible materials in this
- * <a href="https://http://p5js.org/examples/3d-materials.html">example</a>.
- * @method texture
- * @param {p5.Image | p5.MediaElement | p5.Graphics} tex 2-dimensional graphics
- * to render as texture
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * var img;
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * img = loadImage("assets/laDefense.jpg");
- * }
- *
- * function draw(){
- * background(0);
- * rotateZ(frameCount * 0.01);
- * rotateX(frameCount * 0.01);
- * rotateY(frameCount * 0.01);
- * //pass image as texture
- * texture(img);
- * box(200, 200, 200);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var pg;
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * pg = createGraphics(200, 200);
- * pg.textSize(100);
- * }
- *
- * function draw(){
- * background(0);
- * pg.background(255);
- * pg.text('hello!', 0, 100);
- * //pass image as texture
- * texture(pg);
- * plane(200);
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * var vid;
- * function preload(){
- * vid = createVideo("assets/fingers.mov");
- * vid.hide();
- * vid.loop();
- * }
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(0);
- * //pass video frame as texture
- * texture(vid);
- * plane(200);
- * }
- * </code>
- * </div>
- *
- * @alt
- * Rotating view of many images umbrella and grid roof on a 3d plane
- * black canvas
- * black canvas
- *
- */
- p5.prototype.texture = function(){
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- var gl = this._renderer.GL;
- var shaderProgram = this._renderer._getShader('lightVert',
- 'lightTextureFrag');
- gl.useProgram(shaderProgram);
- var textureData;
- //if argument is not already a texture
- //create a new one
- if(!args[0].isTexture){
- if (args[0] instanceof p5.Image) {
- textureData = args[0].canvas;
- }
- //if param is a video
- else if (typeof p5.MediaElement !== 'undefined' &&
- args[0] instanceof p5.MediaElement){
- if(!args[0].loadedmetadata) {return;}
- textureData = args[0].elt;
- }
- //used with offscreen 2d graphics renderer
- else if(args[0] instanceof p5.Graphics){
- textureData = args[0].elt;
- }
- var tex = gl.createTexture();
- args[0]._setProperty('tex', tex);
- args[0]._setProperty('isTexture', true);
- this._renderer._bind.call(this, tex, textureData);
- }
- else {
- if(args[0] instanceof p5.Graphics ||
- (typeof p5.MediaElement !== 'undefined' &&
- args[0] instanceof p5.MediaElement)){
- textureData = args[0].elt;
- }
- else if(args[0] instanceof p5.Image){
- textureData = args[0].canvas;
- }
- this._renderer._bind.call(this, args[0].tex, textureData);
- }
- //this is where we'd activate multi textures
- //eg. gl.activeTexture(gl.TEXTURE0 + (unit || 0));
- //but for now we just have a single texture.
- //@TODO need to extend this functionality
- gl.activeTexture(gl.TEXTURE0);
- gl.bindTexture(gl.TEXTURE_2D, args[0].tex);
- gl.uniform1i(gl.getUniformLocation(shaderProgram, 'isTexture'), true);
- gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);
- return this;
- };
-
- /**
- * Texture Util functions
- */
- p5.RendererGL.prototype._bind = function(tex, data){
- var gl = this._renderer.GL;
- gl.bindTexture(gl.TEXTURE_2D, tex);
- gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
- gl.texImage2D(gl.TEXTURE_2D, 0,
- gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, data);
- gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
- gl.texParameteri(gl.TEXTURE_2D,
- gl.TEXTURE_MAG_FILTER, gl.LINEAR);
- gl.texParameteri(gl.TEXTURE_2D,
- gl.TEXTURE_MIN_FILTER, gl.LINEAR);
- gl.texParameteri(gl.TEXTURE_2D,
- gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
- gl.texParameteri(gl.TEXTURE_2D,
- gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
- gl.bindTexture(gl.TEXTURE_2D, null);
- };
-
- /**
- * Checks whether val is a pot
- * more info on power of 2 here:
- * https://www.opengl.org/wiki/NPOT_Texture
- * @param {Number} value
- * @return {Boolean}
- */
- // function _isPowerOf2 (value){
- // return (value & (value - 1)) === 0;
- // }
-
- /**
- * returns the next highest power of 2 value
- * @param {Number} value [description]
- * @return {Number} [description]
- */
- // function _nextHighestPOT (value){
- // --value;
- // for (var i = 1; i < 32; i <<= 1) {
- // value = value | value >> i;
- // }
- // return value + 1;
-
- /**
- * Ambient material for geometry with a given color. You can view all
- * possible materials in this
- * <a href="https://http://p5js.org/examples/3d-materials.html">example</a>.
- * @method ambientMaterial
- * @param {Number|Array|String|p5.Color} v1 gray value,
- * red or hue value (depending on the current color mode),
- * or color Array, or CSS color string
- * @param {Number} [v2] optional: green or saturation value
- * @param {Number} [v3] optional: blue or brightness value
- * @param {Number} [a] optional: opacity
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- * function draw(){
- * background(0);
- * ambientLight(100);
- * pointLight(250, 250, 250, 100, 100, 0);
- * ambientMaterial(250);
- * sphere(50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * radiating light source from top right of canvas
- *
- */
- p5.prototype.ambientMaterial = function(v1, v2, v3, a) {
- var gl = this._renderer.GL;
- var shaderProgram =
- this._renderer._getShader('lightVert', 'lightTextureFrag');
-
- gl.useProgram(shaderProgram);
- shaderProgram.uMaterialColor = gl.getUniformLocation(
- shaderProgram, 'uMaterialColor' );
- var colors = this._renderer._applyColorBlend.apply(this._renderer, arguments);
-
- gl.uniform4f(shaderProgram.uMaterialColor,
- colors[0], colors[1], colors[2], colors[3]);
-
- shaderProgram.uSpecular = gl.getUniformLocation(
- shaderProgram, 'uSpecular' );
- gl.uniform1i(shaderProgram.uSpecular, false);
-
- gl.uniform1i(gl.getUniformLocation(shaderProgram, 'isTexture'), false);
-
- return this;
- };
-
- /**
- * Specular material for geometry with a given color. You can view all
- * possible materials in this
- * <a href="https://http://p5js.org/examples/3d-materials.html">example</a>.
- * @method specularMaterial
- * @param {Number|Array|String|p5.Color} v1 gray value,
- * red or hue value (depending on the current color mode),
- * or color Array, or CSS color string
- * @param {Number} [v2] optional: green or saturation value
- * @param {Number} [v3] optional: blue or brightness value
- * @param {Number} [a] optional: opacity
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- * function draw(){
- * background(0);
- * ambientLight(100);
- * pointLight(250, 250, 250, 100, 100, 0);
- * specularMaterial(250);
- * sphere(50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * diffused radiating light source from top right of canvas
- *
- */
- p5.prototype.specularMaterial = function(v1, v2, v3, a) {
- var gl = this._renderer.GL;
- var shaderProgram =
- this._renderer._getShader('lightVert', 'lightTextureFrag');
- gl.useProgram(shaderProgram);
- gl.uniform1i(gl.getUniformLocation(shaderProgram, 'isTexture'), false);
- shaderProgram.uMaterialColor = gl.getUniformLocation(
- shaderProgram, 'uMaterialColor' );
- var colors = this._renderer._applyColorBlend.apply(this._renderer, arguments);
- gl.uniform4f(shaderProgram.uMaterialColor,
- colors[0], colors[1], colors[2], colors[3]);
- shaderProgram.uSpecular = gl.getUniformLocation(
- shaderProgram, 'uSpecular' );
- gl.uniform1i(shaderProgram.uSpecular, true);
-
- return this;
- };
-
- /**
- * @private blends colors according to color components.
- * If alpha value is less than 1, we need to enable blending
- * on our gl context. Otherwise opaque objects need to a depthMask.
- * @param {Number} v1 [description]
- * @param {Number} v2 [description]
- * @param {Number} v3 [description]
- * @param {Number} a [description]
- * @return {[Number]} Normalized numbers array
- */
- p5.RendererGL.prototype._applyColorBlend = function(v1,v2,v3,a){
- var gl = this.GL;
- var color = this._pInst.color.apply(
- this._pInst, arguments);
- var colors = color._array;
- if(colors[colors.length-1] < 1.0){
- gl.depthMask(false);
- gl.enable(gl.BLEND);
- gl.blendEquation( gl.FUNC_ADD );
- gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
- } else {
- gl.depthMask(true);
- gl.disable(gl.BLEND);
- }
- return colors;
- };
-
- module.exports = p5;
-
- },{"../core/core":37}],82:[function(_dereq_,module,exports){
- //some of the functions are adjusted from Three.js(http://threejs.org)
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
-
- /**
- * p5 Geometry class
- * @constructor
- * @param {Function | Object} vertData callback function or Object
- * containing routine(s) for vertex data generation
- * @param {Number} [detailX] number of vertices on horizontal surface
- * @param {Number} [detailY] number of vertices on horizontal surface
- * @param {Function} [callback] function to call upon object instantiation.
- *
- */
- p5.Geometry = function
- (detailX, detailY, callback){
- //an array containing every vertex
- //@type [p5.Vector]
- this.vertices = [];
- //an array containing 1 normal per vertex
- //@type [p5.Vector]
- //[p5.Vector, p5.Vector, p5.Vector,p5.Vector, p5.Vector, p5.Vector,...]
- this.vertexNormals = [];
- //an array containing each three vertex indices that form a face
- //[[0, 1, 2], [2, 1, 3], ...]
- this.faces = [];
- //a 2D array containing uvs for every vertex
- //[[0.0,0.0],[1.0,0.0], ...]
- this.uvs = [];
- this.detailX = (detailX !== undefined) ? detailX: 1;
- this.detailY = (detailY !== undefined) ? detailY: 1;
- if(callback instanceof Function){
- callback.call(this);
- }
- return this;
- };
-
- p5.Geometry.prototype.computeFaces = function(){
- var sliceCount = this.detailX + 1;
- var a, b, c, d;
- for (var i = 0; i < this.detailY; i++){
- for (var j = 0; j < this.detailX; j++){
- a = i * sliceCount + j;// + offset;
- b = i * sliceCount + j + 1;// + offset;
- c = (i + 1)* sliceCount + j + 1;// + offset;
- d = (i + 1)* sliceCount + j;// + offset;
- this.faces.push([a, b, d]);
- this.faces.push([d, b, c]);
- }
- }
- return this;
- };
-
- p5.Geometry.prototype._getFaceNormal = function(faceId,vertId){
- //This assumes that vA->vB->vC is a counter-clockwise ordering
- var face = this.faces[faceId];
- var vA = this.vertices[face[vertId%3]];
- var vB = this.vertices[face[(vertId+1)%3]];
- var vC = this.vertices[face[(vertId+2)%3]];
- var n = p5.Vector.cross(
- p5.Vector.sub(vB,vA),
- p5.Vector.sub(vC,vA));
- var sinAlpha = p5.Vector.mag(n) /
- (p5.Vector.mag(p5.Vector.sub(vB,vA))*
- p5.Vector.mag(p5.Vector.sub(vC,vA)));
- n = n.normalize();
- return n.mult(Math.asin(sinAlpha));
- };
- /**
- * computes smooth normals per vertex as an average of each
- * face.
- */
- p5.Geometry.prototype.computeNormals = function (){
- for(var v=0; v < this.vertices.length; v++){
- var normal = new p5.Vector();
- for(var i=0; i < this.faces.length; i++){
- //if our face contains a given vertex
- //calculate an average of the normals
- //of the triangles adjacent to that vertex
- if(this.faces[i][0] === v ||
- this.faces[i][1] === v ||
- this.faces[i][2] === v)
- {
- normal = normal.add(this._getFaceNormal(i, v));
- }
- }
- normal = normal.normalize();
- this.vertexNormals.push(normal);
- }
- return this;
- };
-
- /**
- * Averages the vertex normals. Used in curved
- * surfaces
- * @return {p5.Geometry}
- */
- p5.Geometry.prototype.averageNormals = function() {
-
- for(var i = 0; i <= this.detailY; i++){
- var offset = this.detailX + 1;
- var temp = p5.Vector
- .add(this.vertexNormals[i*offset],
- this.vertexNormals[i*offset + this.detailX]);
- temp = p5.Vector.div(temp, 2);
- this.vertexNormals[i*offset] = temp;
- this.vertexNormals[i*offset + this.detailX] = temp;
- }
- return this;
- };
-
- /**
- * Averages pole normals. Used in spherical primitives
- * @return {p5.Geometry}
- */
- p5.Geometry.prototype.averagePoleNormals = function() {
-
- //average the north pole
- var sum = new p5.Vector(0, 0, 0);
- for(var i = 0; i < this.detailX; i++){
- sum.add(this.vertexNormals[i]);
- }
- sum = p5.Vector.div(sum, this.detailX);
-
- for(i = 0; i < this.detailX; i++){
- this.vertexNormals[i] = sum;
- }
-
- //average the south pole
- sum = new p5.Vector(0, 0, 0);
- for(i = this.vertices.length - 1;
- i > this.vertices.length - 1 - this.detailX; i--){
- sum.add(this.vertexNormals[i]);
- }
- sum = p5.Vector.div(sum, this.detailX);
-
- for(i = this.vertices.length - 1;
- i > this.vertices.length - 1 - this.detailX; i--){
- this.vertexNormals[i] = sum;
- }
- return this;
- };
-
- /**
- * Modifies all vertices to be centered within the range -100 to 100.
- * @return {p5.Geometry}
- */
- p5.Geometry.prototype.normalize = function() {
- if(this.vertices.length > 0) {
- // Find the corners of our bounding box
- var maxPosition = this.vertices[0].copy();
- var minPosition = this.vertices[0].copy();
-
- for(var i = 0; i < this.vertices.length; i++) {
- maxPosition.x = Math.max(maxPosition.x, this.vertices[i].x);
- minPosition.x = Math.min(minPosition.x, this.vertices[i].x);
- maxPosition.y = Math.max(maxPosition.y, this.vertices[i].y);
- minPosition.y = Math.min(minPosition.y, this.vertices[i].y);
- maxPosition.z = Math.max(maxPosition.z, this.vertices[i].z);
- minPosition.z = Math.min(minPosition.z, this.vertices[i].z);
- }
-
- var center = p5.Vector.lerp(maxPosition, minPosition, 0.5);
- var dist = p5.Vector.sub(maxPosition, minPosition);
- var longestDist = Math.max(Math.max(dist.x, dist.y), dist.z);
- var scale = 200 / longestDist;
-
- for(i = 0; i < this.vertices.length; i++) {
- this.vertices[i].sub(center);
- this.vertices[i].mult(scale);
- }
- }
- return this;
- };
-
- module.exports = p5.Geometry;
-
- },{"../core/core":37}],83:[function(_dereq_,module,exports){
- /**
- * @requires constants
- * @todo see methods below needing further implementation.
- * future consideration: implement SIMD optimizations
- * when browser compatibility becomes available
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/
- * Reference/Global_Objects/SIMD
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var polarGeometry = _dereq_('../math/polargeometry');
- var constants = _dereq_('../core/constants');
- var GLMAT_ARRAY_TYPE = (
- typeof Float32Array !== 'undefined') ?
- Float32Array : Array;
-
- /**
- * A class to describe a 4x4 matrix
- * for model and view matrix manipulation in the p5js webgl renderer.
- * class p5.Matrix
- * @constructor
- * @param {Array} [mat4] array literal of our 4x4 matrix
- */
- p5.Matrix = function() {
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- // This is default behavior when object
- // instantiated using createMatrix()
- // @todo implement createMatrix() in core/math.js
- if(args[0] instanceof p5) {
- // save reference to p5 if passed in
- this.p5 = args[0];
- if(args[1] === 'mat3'){
- this.mat3 = args[2] || new GLMAT_ARRAY_TYPE([
- 1, 0, 0,
- 0, 1, 0,
- 0, 0, 1
- ]);
- }
- else {
- this.mat4 = args[1] || new GLMAT_ARRAY_TYPE([
- 1, 0, 0, 0,
- 0, 1, 0, 0,
- 0, 0, 1, 0,
- 0, 0, 0, 1
- ]);
- }
- // default behavior when object
- // instantiated using new p5.Matrix()
- } else {
- if(args[0] === 'mat3'){
- this.mat3 = args[1] || new GLMAT_ARRAY_TYPE([
- 1, 0, 0,
- 0, 1, 0,
- 0, 0, 1
- ]);
- }
- else {
- this.mat4 = args[0] || new GLMAT_ARRAY_TYPE([
- 1, 0, 0, 0,
- 0, 1, 0, 0,
- 0, 0, 1, 0,
- 0, 0, 0, 1
- ]);
- }
- }
- return this;
- };
-
- /**
- * Sets the x, y, and z component of the vector using two or three separate
- * variables, the data from a p5.Matrix, or the values from a float array.
- *
- * @param {p5.Matrix|Array} [inMatrix] the input p5.Matrix or
- * an Array of length 16
- */
- p5.Matrix.prototype.set = function (inMatrix) {
- if (inMatrix instanceof p5.Matrix) {
- this.mat4 = inMatrix.mat4;
- return this;
- }
- else if (inMatrix instanceof GLMAT_ARRAY_TYPE) {
- this.mat4 = inMatrix;
- return this;
- }
- return this;
- };
-
- /**
- * Gets a copy of the vector, returns a p5.Matrix object.
- *
- * @return {p5.Matrix} the copy of the p5.Matrix object
- */
- p5.Matrix.prototype.get = function () {
- return new p5.Matrix(this.mat4);
- };
-
- /**
- * return a copy of a matrix
- * @return {p5.Matrix} the result matrix
- */
- p5.Matrix.prototype.copy = function(){
- var copied = new p5.Matrix();
- copied.mat4[0] = this.mat4[0];
- copied.mat4[1] = this.mat4[1];
- copied.mat4[2] = this.mat4[2];
- copied.mat4[3] = this.mat4[3];
- copied.mat4[4] = this.mat4[4];
- copied.mat4[5] = this.mat4[5];
- copied.mat4[6] = this.mat4[6];
- copied.mat4[7] = this.mat4[7];
- copied.mat4[8] = this.mat4[8];
- copied.mat4[9] = this.mat4[9];
- copied.mat4[10] = this.mat4[10];
- copied.mat4[11] = this.mat4[11];
- copied.mat4[12] = this.mat4[12];
- copied.mat4[13] = this.mat4[13];
- copied.mat4[14] = this.mat4[14];
- copied.mat4[15] = this.mat4[15];
- return copied;
- };
-
- /**
- * return an identity matrix
- * @return {p5.Matrix} the result matrix
- */
- p5.Matrix.identity = function(){
- return new p5.Matrix();
- };
-
- /**
- * transpose according to a given matrix
- * @param {p5.Matrix | Typed Array} a the matrix to be based on to transpose
- * @return {p5.Matrix} this
- */
- p5.Matrix.prototype.transpose = function(a){
- var a01, a02, a03, a12, a13, a23;
- if(a instanceof p5.Matrix){
- a01 = a.mat4[1];
- a02 = a.mat4[2];
- a03 = a.mat4[3];
- a12 = a.mat4[6];
- a13 = a.mat4[7];
- a23 = a.mat4[11];
-
- this.mat4[0] = a.mat4[0];
- this.mat4[1] = a.mat4[4];
- this.mat4[2] = a.mat4[8];
- this.mat4[3] = a.mat4[12];
- this.mat4[4] = a01;
- this.mat4[5] = a.mat4[5];
- this.mat4[6] = a.mat4[9];
- this.mat4[7] = a.mat4[13];
- this.mat4[8] = a02;
- this.mat4[9] = a12;
- this.mat4[10] = a.mat4[10];
- this.mat4[11] = a.mat4[14];
- this.mat4[12] = a03;
- this.mat4[13] = a13;
- this.mat4[14] = a23;
- this.mat4[15] = a.mat4[15];
-
- }else if(a instanceof GLMAT_ARRAY_TYPE){
- a01 = a[1];
- a02 = a[2];
- a03 = a[3];
- a12 = a[6];
- a13 = a[7];
- a23 = a[11];
-
- this.mat4[0] = a[0];
- this.mat4[1] = a[4];
- this.mat4[2] = a[8];
- this.mat4[3] = a[12];
- this.mat4[4] = a01;
- this.mat4[5] = a[5];
- this.mat4[6] = a[9];
- this.mat4[7] = a[13];
- this.mat4[8] = a02;
- this.mat4[9] = a12;
- this.mat4[10] = a[10];
- this.mat4[11] = a[14];
- this.mat4[12] = a03;
- this.mat4[13] = a13;
- this.mat4[14] = a23;
- this.mat4[15] = a[15];
- }
- return this;
- };
-
- /**
- * invert matrix according to a give matrix
- * @param {p5.Matrix or Typed Array} a the matrix to be based on to invert
- * @return {p5.Matrix} this
- */
- p5.Matrix.prototype.invert = function(a){
- var a00, a01, a02, a03, a10, a11, a12, a13,
- a20, a21, a22, a23, a30, a31, a32, a33;
- if(a instanceof p5.Matrix){
- a00 = a.mat4[0];
- a01 = a.mat4[1];
- a02 = a.mat4[2];
- a03 = a.mat4[3];
- a10 = a.mat4[4];
- a11 = a.mat4[5];
- a12 = a.mat4[6];
- a13 = a.mat4[7];
- a20 = a.mat4[8];
- a21 = a.mat4[9];
- a22 = a.mat4[10];
- a23 = a.mat4[11];
- a30 = a.mat4[12];
- a31 = a.mat4[13];
- a32 = a.mat4[14];
- a33 = a.mat4[15];
- }else if(a instanceof GLMAT_ARRAY_TYPE){
- a00 = a[0];
- a01 = a[1];
- a02 = a[2];
- a03 = a[3];
- a10 = a[4];
- a11 = a[5];
- a12 = a[6];
- a13 = a[7];
- a20 = a[8];
- a21 = a[9];
- a22 = a[10];
- a23 = a[11];
- a30 = a[12];
- a31 = a[13];
- a32 = a[14];
- a33 = a[15];
- }
- var b00 = a00 * a11 - a01 * a10,
- b01 = a00 * a12 - a02 * a10,
- b02 = a00 * a13 - a03 * a10,
- b03 = a01 * a12 - a02 * a11,
- b04 = a01 * a13 - a03 * a11,
- b05 = a02 * a13 - a03 * a12,
- b06 = a20 * a31 - a21 * a30,
- b07 = a20 * a32 - a22 * a30,
- b08 = a20 * a33 - a23 * a30,
- b09 = a21 * a32 - a22 * a31,
- b10 = a21 * a33 - a23 * a31,
- b11 = a22 * a33 - a23 * a32,
-
- // Calculate the determinant
- det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 -
- b04 * b07 + b05 * b06;
-
- if (!det) {
- return null;
- }
- det = 1.0 / det;
-
- this.mat4[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
- this.mat4[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
- this.mat4[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
- this.mat4[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
- this.mat4[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
- this.mat4[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
- this.mat4[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
- this.mat4[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
- this.mat4[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
- this.mat4[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
- this.mat4[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
- this.mat4[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
- this.mat4[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
- this.mat4[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
- this.mat4[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
- this.mat4[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
-
- return this;
- };
-
- /**
- * Inverts a 3x3 matrix
- * @return {[type]} [description]
- */
- p5.Matrix.prototype.invert3x3 = function (){
- var a00 = this.mat3[0],
- a01 = this.mat3[1],
- a02 = this.mat3[2],
- a10 = this.mat3[3],
- a11 = this.mat3[4],
- a12 = this.mat3[5],
- a20 = this.mat3[6],
- a21 = this.mat3[7],
- a22 = this.mat3[8],
- b01 = a22 * a11 - a12 * a21,
- b11 = -a22 * a10 + a12 * a20,
- b21 = a21 * a10 - a11 * a20,
-
- // Calculate the determinant
- det = a00 * b01 + a01 * b11 + a02 * b21;
- if (!det) {
- return null;
- }
- det = 1.0 / det;
- this.mat3[0] = b01 * det;
- this.mat3[1] = (-a22 * a01 + a02 * a21) * det;
- this.mat3[2] = (a12 * a01 - a02 * a11) * det;
- this.mat3[3] = b11 * det;
- this.mat3[4] = (a22 * a00 - a02 * a20) * det;
- this.mat3[5] = (-a12 * a00 + a02 * a10) * det;
- this.mat3[6] = b21 * det;
- this.mat3[7] = (-a21 * a00 + a01 * a20) * det;
- this.mat3[8] = (a11 * a00 - a01 * a10) * det;
- return this;
- };
-
- /**
- * transposes a 3x3 p5.Matrix by a mat3
- * @param {[Number]} mat3 1-dimensional array
- * @return {p5.Matrix} this
- */
- p5.Matrix.prototype.transpose3x3 = function (mat3){
- var a01 = mat3[1], a02 = mat3[2], a12 = mat3[5];
- this.mat3[1] = mat3[3];
- this.mat3[2] = mat3[6];
- this.mat3[3] = a01;
- this.mat3[5] = mat3[7];
- this.mat3[6] = a02;
- this.mat3[7] = a12;
- return this;
- };
-
- /**
- * converts a 4x4 matrix to its 3x3 inverse tranform
- * commonly used in MVMatrix to NMatrix conversions.
- * @param {p5.Matrix} mat4 the matrix to be based on to invert
- * @return {p5.Matrix} this with mat3
- * @todo finish implementation
- */
- p5.Matrix.prototype.inverseTranspose = function (matrix){
- if(this.mat3 === undefined){
- console.error('sorry, this function only works with mat3');
- }
- else {
- //convert mat4 -> mat3
- this.mat3[0] = matrix.mat4[0];
- this.mat3[1] = matrix.mat4[1];
- this.mat3[2] = matrix.mat4[2];
- this.mat3[3] = matrix.mat4[4];
- this.mat3[4] = matrix.mat4[5];
- this.mat3[5] = matrix.mat4[6];
- this.mat3[6] = matrix.mat4[8];
- this.mat3[7] = matrix.mat4[9];
- this.mat3[8] = matrix.mat4[10];
- }
-
- this.invert3x3().transpose3x3(this.mat3);
- return this;
- };
-
- /**
- * inspired by Toji's mat4 determinant
- * @return {Number} Determinant of our 4x4 matrix
- */
- p5.Matrix.prototype.determinant = function(){
- var d00 = (this.mat4[0] * this.mat4[5]) - (this.mat4[1] * this.mat4[4]),
- d01 = (this.mat4[0] * this.mat4[6]) - (this.mat4[2] * this.mat4[4]),
- d02 = (this.mat4[0] * this.mat4[7]) - (this.mat4[3] * this.mat4[4]),
- d03 = (this.mat4[1] * this.mat4[6]) - (this.mat4[2] * this.mat4[5]),
- d04 = (this.mat4[1] * this.mat4[7]) - (this.mat4[3] * this.mat4[5]),
- d05 = (this.mat4[2] * this.mat4[7]) - (this.mat4[3] * this.mat4[6]),
- d06 = (this.mat4[8] * this.mat4[13]) - (this.mat4[9] * this.mat4[12]),
- d07 = (this.mat4[8] * this.mat4[14]) - (this.mat4[10] * this.mat4[12]),
- d08 = (this.mat4[8] * this.mat4[15]) - (this.mat4[11] * this.mat4[12]),
- d09 = (this.mat4[9] * this.mat4[14]) - (this.mat4[10] * this.mat4[13]),
- d10 = (this.mat4[9] * this.mat4[15]) - (this.mat4[11] * this.mat4[13]),
- d11 = (this.mat4[10] * this.mat4[15]) - (this.mat4[11] * this.mat4[14]);
-
- // Calculate the determinant
- return d00 * d11 - d01 * d10 + d02 * d09 +
- d03 * d08 - d04 * d07 + d05 * d06;
- };
-
- /**
- * multiply two mat4s
- * @param {p5.Matrix | Array} multMatrix The matrix we want to multiply by
- * @return {p5.Matrix} this
- */
- p5.Matrix.prototype.mult = function(multMatrix){
- var _dest = new GLMAT_ARRAY_TYPE(16);
- var _src = new GLMAT_ARRAY_TYPE(16);
-
- if(multMatrix instanceof p5.Matrix) {
- _src = multMatrix.mat4;
- }
- else if(multMatrix instanceof GLMAT_ARRAY_TYPE){
- _src = multMatrix;
- }
-
- // each row is used for the multiplier
- var b0 = this.mat4[0], b1 = this.mat4[1],
- b2 = this.mat4[2], b3 = this.mat4[3];
- _dest[0] = b0*_src[0] + b1*_src[4] + b2*_src[8] + b3*_src[12];
- _dest[1] = b0*_src[1] + b1*_src[5] + b2*_src[9] + b3*_src[13];
- _dest[2] = b0*_src[2] + b1*_src[6] + b2*_src[10] + b3*_src[14];
- _dest[3] = b0*_src[3] + b1*_src[7] + b2*_src[11] + b3*_src[15];
-
- b0 = this.mat4[4];
- b1 = this.mat4[5];
- b2 = this.mat4[6];
- b3 = this.mat4[7];
- _dest[4] = b0*_src[0] + b1*_src[4] + b2*_src[8] + b3*_src[12];
- _dest[5] = b0*_src[1] + b1*_src[5] + b2*_src[9] + b3*_src[13];
- _dest[6] = b0*_src[2] + b1*_src[6] + b2*_src[10] + b3*_src[14];
- _dest[7] = b0*_src[3] + b1*_src[7] + b2*_src[11] + b3*_src[15];
-
- b0 = this.mat4[8];
- b1 = this.mat4[9];
- b2 = this.mat4[10];
- b3 = this.mat4[11];
- _dest[8] = b0*_src[0] + b1*_src[4] + b2*_src[8] + b3*_src[12];
- _dest[9] = b0*_src[1] + b1*_src[5] + b2*_src[9] + b3*_src[13];
- _dest[10] = b0*_src[2] + b1*_src[6] + b2*_src[10] + b3*_src[14];
- _dest[11] = b0*_src[3] + b1*_src[7] + b2*_src[11] + b3*_src[15];
-
- b0 = this.mat4[12];
- b1 = this.mat4[13];
- b2 = this.mat4[14];
- b3 = this.mat4[15];
- _dest[12] = b0*_src[0] + b1*_src[4] + b2*_src[8] + b3*_src[12];
- _dest[13] = b0*_src[1] + b1*_src[5] + b2*_src[9] + b3*_src[13];
- _dest[14] = b0*_src[2] + b1*_src[6] + b2*_src[10] + b3*_src[14];
- _dest[15] = b0*_src[3] + b1*_src[7] + b2*_src[11] + b3*_src[15];
-
- this.mat4 = _dest;
-
- return this;
- };
-
- /**
- * scales a p5.Matrix by scalars or a vector
- * @param {p5.Vector | Array }
- * vector to scale by
- * @return {p5.Matrix} this
- */
- p5.Matrix.prototype.scale = function() {
- var x,y,z;
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- //if our 1st arg is a type p5.Vector
- if (args[0] instanceof p5.Vector){
- x = args[0].x;
- y = args[0].y;
- z = args[0].z;
- }
- //otherwise if it's an array
- else if (args[0] instanceof Array){
- x = args[0][0];
- y = args[0][1];
- z = args[0][2];
- }
- var _dest = new GLMAT_ARRAY_TYPE(16);
- _dest[0] = this.mat4[0] * x;
- _dest[1] = this.mat4[1] * x;
- _dest[2] = this.mat4[2] * x;
- _dest[3] = this.mat4[3] * x;
- _dest[4] = this.mat4[4] * y;
- _dest[5] = this.mat4[5] * y;
- _dest[6] = this.mat4[6] * y;
- _dest[7] = this.mat4[7] * y;
- _dest[8] = this.mat4[8] * z;
- _dest[9] = this.mat4[9] * z;
- _dest[10] = this.mat4[10] * z;
- _dest[11] = this.mat4[11] * z;
- _dest[12] = this.mat4[12];
- _dest[13] = this.mat4[13];
- _dest[14] = this.mat4[14];
- _dest[15] = this.mat4[15];
-
- this.mat4 = _dest;
- return this;
- };
-
- /**
- * rotate our Matrix around an axis by the given angle.
- * @param {Number} a The angle of rotation in radians
- * @param {p5.Vector | Array} axis the axis(es) to rotate around
- * @return {p5.Matrix} this
- * inspired by Toji's gl-matrix lib, mat4 rotation
- */
- p5.Matrix.prototype.rotate = function(a, axis){
- var x, y, z, _a, len;
-
- if (this.p5) {
- if (this.p5._angleMode === constants.DEGREES) {
- _a = polarGeometry.degreesToRadians(a);
- }
- }
- else {
- _a = a;
- }
- if (axis instanceof p5.Vector) {
- x = axis.x;
- y = axis.y;
- z = axis.z;
- }
- else if (axis instanceof Array) {
- x = axis[0];
- y = axis[1];
- z = axis[2];
- }
-
- len = Math.sqrt(x * x + y * y + z * z);
- x *= (1/len);
- y *= (1/len);
- z *= (1/len);
-
- var a00 = this.mat4[0];
- var a01 = this.mat4[1];
- var a02 = this.mat4[2];
- var a03 = this.mat4[3];
- var a10 = this.mat4[4];
- var a11 = this.mat4[5];
- var a12 = this.mat4[6];
- var a13 = this.mat4[7];
- var a20 = this.mat4[8];
- var a21 = this.mat4[9];
- var a22 = this.mat4[10];
- var a23 = this.mat4[11];
-
- //sin,cos, and tan of respective angle
- var sA = Math.sin(_a);
- var cA = Math.cos(_a);
- var tA = 1 - cA;
- // Construct the elements of the rotation matrix
- var b00 = x * x * tA + cA;
- var b01 = y * x * tA + z * sA;
- var b02 = z * x * tA - y * sA;
- var b10 = x * y * tA - z * sA;
- var b11 = y * y * tA + cA;
- var b12 = z * y * tA + x * sA;
- var b20 = x * z * tA + y * sA;
- var b21 = y * z * tA - x * sA;
- var b22 = z * z * tA + cA;
-
- // rotation-specific matrix multiplication
- this.mat4[0] = a00 * b00 + a10 * b01 + a20 * b02;
- this.mat4[1] = a01 * b00 + a11 * b01 + a21 * b02;
- this.mat4[2] = a02 * b00 + a12 * b01 + a22 * b02;
- this.mat4[3] = a03 * b00 + a13 * b01 + a23 * b02;
- this.mat4[4] = a00 * b10 + a10 * b11 + a20 * b12;
- this.mat4[5] = a01 * b10 + a11 * b11 + a21 * b12;
- this.mat4[6] = a02 * b10 + a12 * b11 + a22 * b12;
- this.mat4[7] = a03 * b10 + a13 * b11 + a23 * b12;
- this.mat4[8] = a00 * b20 + a10 * b21 + a20 * b22;
- this.mat4[9] = a01 * b20 + a11 * b21 + a21 * b22;
- this.mat4[10] = a02 * b20 + a12 * b21 + a22 * b22;
- this.mat4[11] = a03 * b20 + a13 * b21 + a23 * b22;
-
- return this;
- };
-
- /**
- * @todo finish implementing this method!
- * translates
- * @param {Array} v vector to translate by
- * @return {p5.Matrix} this
- */
- p5.Matrix.prototype.translate = function(v){
- var x = v[0],
- y = v[1],
- z = v[2] || 0;
- this.mat4[12] =
- this.mat4[0] * x +this.mat4[4] * y +this.mat4[8] * z +this.mat4[12];
- this.mat4[13] =
- this.mat4[1] * x +this.mat4[5] * y +this.mat4[9] * z +this.mat4[13];
- this.mat4[14] =
- this.mat4[2] * x +this.mat4[6] * y +this.mat4[10] * z +this.mat4[14];
- this.mat4[15] =
- this.mat4[3] * x +this.mat4[7] * y +this.mat4[11] * z +this.mat4[15];
- };
-
- p5.Matrix.prototype.rotateX = function(a){
- this.rotate(a, [1,0,0]);
- };
- p5.Matrix.prototype.rotateY = function(a){
- this.rotate(a, [0,1,0]);
- };
- p5.Matrix.prototype.rotateZ = function(a){
- this.rotate(a, [0,0,1]);
- };
-
- /**
- * sets the perspective matrix
- * @param {Number} fovy [description]
- * @param {Number} aspect [description]
- * @param {Number} near near clipping plane
- * @param {Number} far far clipping plane
- * @return {void}
- */
- p5.Matrix.prototype.perspective = function(fovy,aspect,near,far){
-
- var f = 1.0 / Math.tan(fovy / 2),
- nf = 1 / (near - far);
-
- this.mat4[0] = f / aspect;
- this.mat4[1] = 0;
- this.mat4[2] = 0;
- this.mat4[3] = 0;
- this.mat4[4] = 0;
- this.mat4[5] = f;
- this.mat4[6] = 0;
- this.mat4[7] = 0;
- this.mat4[8] = 0;
- this.mat4[9] = 0;
- this.mat4[10] = (far + near) * nf;
- this.mat4[11] = -1;
- this.mat4[12] = 0;
- this.mat4[13] = 0;
- this.mat4[14] = (2 * far * near) * nf;
- this.mat4[15] = 0;
-
- return this;
-
- };
-
- /**
- * sets the ortho matrix
- * @param {Number} left [description]
- * @param {Number} right [description]
- * @param {Number} bottom [description]
- * @param {Number} top [description]
- * @param {Number} near near clipping plane
- * @param {Number} far far clipping plane
- * @return {void}
- */
- p5.Matrix.prototype.ortho = function(left,right,bottom,top,near,far){
-
- var lr = 1 / (left - right),
- bt = 1 / (bottom - top),
- nf = 1 / (near - far);
- this.mat4[0] = -2 * lr;
- this.mat4[1] = 0;
- this.mat4[2] = 0;
- this.mat4[3] = 0;
- this.mat4[4] = 0;
- this.mat4[5] = -2 * bt;
- this.mat4[6] = 0;
- this.mat4[7] = 0;
- this.mat4[8] = 0;
- this.mat4[9] = 0;
- this.mat4[10] = 2 * nf;
- this.mat4[11] = 0;
- this.mat4[12] = (left + right) * lr;
- this.mat4[13] = (top + bottom) * bt;
- this.mat4[14] = (far + near) * nf;
- this.mat4[15] = 1;
-
- return this;
- };
-
- /**
- * PRIVATE
- */
- // matrix methods adapted from:
- // https://developer.mozilla.org/en-US/docs/Web/WebGL/
- // gluPerspective
- //
- // function _makePerspective(fovy, aspect, znear, zfar){
- // var ymax = znear * Math.tan(fovy * Math.PI / 360.0);
- // var ymin = -ymax;
- // var xmin = ymin * aspect;
- // var xmax = ymax * aspect;
- // return _makeFrustum(xmin, xmax, ymin, ymax, znear, zfar);
- // }
-
- ////
- //// glFrustum
- ////
- //function _makeFrustum(left, right, bottom, top, znear, zfar){
- // var X = 2*znear/(right-left);
- // var Y = 2*znear/(top-bottom);
- // var A = (right+left)/(right-left);
- // var B = (top+bottom)/(top-bottom);
- // var C = -(zfar+znear)/(zfar-znear);
- // var D = -2*zfar*znear/(zfar-znear);
- // var frustrumMatrix =[
- // X, 0, A, 0,
- // 0, Y, B, 0,
- // 0, 0, C, D,
- // 0, 0, -1, 0
- //];
- //return frustrumMatrix;
- // }
-
- // function _setMVPMatrices(){
- ////an identity matrix
- ////@TODO use the p5.Matrix class to abstract away our MV matrices and
- ///other math
- //var _mvMatrix =
- //[
- // 1.0,0.0,0.0,0.0,
- // 0.0,1.0,0.0,0.0,
- // 0.0,0.0,1.0,0.0,
- // 0.0,0.0,0.0,1.0
- //];
-
- module.exports = p5.Matrix;
-
- },{"../core/constants":36,"../core/core":37,"../math/polargeometry":67}],84:[function(_dereq_,module,exports){
- /**
- * Welcome to RendererGL Immediate Mode.
- * Immediate mode is used for drawing custom shapes
- * from a set of vertices. Immediate Mode is activated
- * when you call beginShape() & de-activated when you call endShape().
- * Immediate mode is a style of programming borrowed
- * from OpenGL's (now-deprecated) immediate mode.
- * It differs from p5.js' default, Retained Mode, which caches
- * geometries and buffers on the CPU to reduce the number of webgl
- * draw calls. Retained mode is more efficient & performative,
- * however, Immediate Mode is useful for sketching quick
- * geometric ideas.
- */
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var constants = _dereq_('../core/constants');
-
- /**
- * Begin shape drawing. This is a helpful way of generating
- * custom shapes quickly. However in WEBGL mode, application
- * performance will likely drop as a result of too many calls to
- * beginShape() / endShape(). As a high performance alternative,
- * please use p5.js geometry primitives.
- * @param {Number} mode webgl primitives mode. beginShape supports the
- * following modes:
- * POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,
- * TRIANGLE_STRIP,and TRIANGLE_FAN.
- * @return {[type]} [description]
- */
- p5.RendererGL.prototype.beginShape = function(mode){
- //default shape mode is line_strip
- this.immediateMode.shapeMode = (mode !== undefined ) ?
- mode : constants.LINE_STRIP;
- //if we haven't yet initialized our
- //immediateMode vertices & buffers, create them now!
- if(this.immediateMode.vertexPositions === undefined){
- this.immediateMode.vertexPositions = [];
- this.immediateMode.vertexColors = [];
- this.immediateMode.vertexBuffer = this.GL.createBuffer();
- this.immediateMode.colorBuffer = this.GL.createBuffer();
- } else {
- this.immediateMode.vertexPositions.length = 0;
- this.immediateMode.vertexColors.length = 0;
- }
- this.isImmediateDrawing = true;
- return this;
- };
- /**
- * adds a vertex to be drawn in a custom Shape.
- * @param {Number} x x-coordinate of vertex
- * @param {Number} y y-coordinate of vertex
- * @param {Number} z z-coordinate of vertex
- * @return {p5.RendererGL} [description]
- * @TODO implement handling of p5.Vector args
- */
- p5.RendererGL.prototype.vertex = function(x, y, z){
- this.immediateMode.vertexPositions.push(x, y, z);
- var vertexColor = this.curFillColor || [0.5, 0.5, 0.5, 1.0];
- this.immediateMode.vertexColors.push(
- vertexColor[0],
- vertexColor[1],
- vertexColor[2],
- vertexColor[3]);
- return this;
- };
-
- /**
- * End shape drawing and render vertices to screen.
- * @return {p5.RendererGL} [description]
- */
- p5.RendererGL.prototype.endShape =
- function(mode, isCurve, isBezier,isQuadratic, isContour, shapeKind){
- var gl = this.GL;
- this._bindImmediateBuffers(
- this.immediateMode.vertexPositions,
- this.immediateMode.vertexColors);
- if(mode){
- if(this.drawMode === 'fill'){
- switch(this.immediateMode.shapeMode){
- case constants.LINE_STRIP:
- this.immediateMode.shapeMode = constants.TRIANGLE_FAN;
- break;
- case constants.LINES:
- this.immediateMode.shapeMode = constants.TRIANGLE_FAN;
- break;
- case constants.TRIANGLES:
- this.immediateMode.shapeMode = constants.TRIANGLE_FAN;
- break;
- }
- } else {
- switch(this.immediateMode.shapeMode){
- case constants.LINE_STRIP:
- this.immediateMode.shapeMode = constants.LINE_LOOP;
- break;
- case constants.LINES:
- this.immediateMode.shapeMode = constants.LINE_LOOP;
- break;
- }
- }
- }
- //QUADS & QUAD_STRIP are not supported primitives modes
- //in webgl.
- if(this.immediateMode.shapeMode === constants.QUADS ||
- this.immediateMode.shapeMode === constants.QUAD_STRIP){
- throw new Error('sorry, ' + this.immediateMode.shapeMode+
- ' not yet implemented in webgl mode.');
- }
- else {
- gl.enable(gl.BLEND);
- gl.drawArrays(this.immediateMode.shapeMode, 0,
- this.immediateMode.vertexPositions.length / 3);
- }
- //clear out our vertexPositions & colors arrays
- //after rendering
- this.immediateMode.vertexPositions.length = 0;
- this.immediateMode.vertexColors.length = 0;
- this.isImmediateDrawing = false;
- return this;
- };
- /**
- * Bind immediateMode buffers to data,
- * then draw gl arrays
- * @param {Array} vertices Numbers array representing
- * vertex positions
- * @return {p5.RendererGL}
- */
- p5.RendererGL.prototype._bindImmediateBuffers = function(vertices, colors){
- this._setDefaultCamera();
- var gl = this.GL;
- var shaderKey = this._getCurShaderId();
- var shaderProgram = this.mHash[shaderKey];
- //vertex position Attribute
- shaderProgram.vertexPositionAttribute =
- gl.getAttribLocation(shaderProgram, 'aPosition');
- gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
- gl.bindBuffer(gl.ARRAY_BUFFER, this.immediateMode.vertexBuffer);
- gl.bufferData(
- gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
- gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
- 3, gl.FLOAT, false, 0, 0);
-
- shaderProgram.vertexColorAttribute =
- gl.getAttribLocation(shaderProgram, 'aVertexColor');
- gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
- gl.bindBuffer(gl.ARRAY_BUFFER, this.immediateMode.colorBuffer);
- gl.bufferData(gl.ARRAY_BUFFER,
- new Float32Array(colors),gl.DYNAMIC_DRAW);
- gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,
- 4, gl.FLOAT, false, 0, 0);
- //matrix
- this._setMatrixUniforms(shaderKey);
- //@todo implement in all shaders (not just immediateVert)
- //set our default point size
- // this._setUniform1f(shaderKey,
- // 'uPointSize',
- // this.pointSize);
- return this;
- };
-
- //////////////////////////////////////////////
- // COLOR
- //////////////////////////////////////////////
-
- p5.RendererGL.prototype._getColorVertexShader = function(){
- var gl = this.GL;
- var mId = 'immediateVert|vertexColorFrag';
- var shaderProgram;
-
- if(!this.materialInHash(mId)){
- shaderProgram =
- this._initShaders('immediateVert', 'vertexColorFrag', true);
- this.mHash[mId] = shaderProgram;
- shaderProgram.vertexColorAttribute =
- gl.getAttribLocation(shaderProgram, 'aVertexColor');
- gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
- }else{
- shaderProgram = this.mHash[mId];
- }
- return shaderProgram;
- };
-
- module.exports = p5.RendererGL;
- },{"../core/constants":36,"../core/core":37}],85:[function(_dereq_,module,exports){
- //Retained Mode. The default mode for rendering 3D primitives
- //in WEBGL.
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var hashCount = 0;
- /**
- * _initBufferDefaults
- * @description initializes buffer defaults. runs each time a new geometry is
- * registered
- * @param {String} gId key of the geometry object
- */
- p5.RendererGL.prototype._initBufferDefaults = function(gId) {
- //@TODO remove this limit on hashes in gHash
- hashCount ++;
- if(hashCount > 1000){
- var key = Object.keys(this.gHash)[0];
- delete this.gHash[key];
- hashCount --;
- }
-
- var gl = this.GL;
- //create a new entry in our gHash
- this.gHash[gId] = {};
- this.gHash[gId].vertexBuffer = gl.createBuffer();
- this.gHash[gId].normalBuffer = gl.createBuffer();
- this.gHash[gId].uvBuffer = gl.createBuffer();
- this.gHash[gId].indexBuffer = gl.createBuffer();
- };
- /**
- * createBuffers description
- * @param {String} gId key of the geometry object
- * @param {p5.Geometry} obj contains geometry data
- */
- p5.RendererGL.prototype.createBuffers = function(gId, obj) {
- var gl = this.GL;
- this._setDefaultCamera();
- //initialize the gl buffers for our geom groups
- this._initBufferDefaults(gId);
- //return the current shaderProgram from our material hash
- var shaderProgram = this.mHash[this._getCurShaderId()];
- //@todo rename "numberOfItems" property to something more descriptive
- //we mult the num geom faces by 3
- this.gHash[gId].numberOfItems = obj.faces.length * 3;
- gl.bindBuffer(gl.ARRAY_BUFFER, this.gHash[gId].vertexBuffer);
- gl.bufferData(
- gl.ARRAY_BUFFER,
- new Float32Array( vToNArray(obj.vertices) ),
- gl.STATIC_DRAW);
- //vertex position
- shaderProgram.vertexPositionAttribute =
- gl.getAttribLocation(shaderProgram, 'aPosition');
- gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
-
- gl.vertexAttribPointer(
- shaderProgram.vertexPositionAttribute,
- 3, gl.FLOAT, false, 0, 0);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, this.gHash[gId].normalBuffer);
- gl.bufferData(
- gl.ARRAY_BUFFER,
- new Float32Array( vToNArray(obj.vertexNormals) ),
- gl.STATIC_DRAW);
- //vertex normal
- shaderProgram.vertexNormalAttribute =
- gl.getAttribLocation(shaderProgram, 'aNormal');
- gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);
-
- gl.vertexAttribPointer(
- shaderProgram.vertexNormalAttribute,
- 3, gl.FLOAT, false, 0, 0);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, this.gHash[gId].uvBuffer);
- gl.bufferData(
- gl.ARRAY_BUFFER,
- new Float32Array( flatten(obj.uvs) ),
- gl.STATIC_DRAW);
- //texture coordinate Attribute
- shaderProgram.textureCoordAttribute =
- gl.getAttribLocation(shaderProgram, 'aTexCoord');
- gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
- gl.vertexAttribPointer(
- shaderProgram.textureCoordAttribute,
- 2, gl.FLOAT, false, 0, 0);
-
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.gHash[gId].indexBuffer);
- gl.bufferData(
- gl.ELEMENT_ARRAY_BUFFER,
- new Uint16Array( flatten(obj.faces) ),
- gl.STATIC_DRAW);
- };
-
- /**
- * Draws buffers given a geometry key ID
- * @param {String} gId ID in our geom hash
- * @return {p5.RendererGL} this
- */
- p5.RendererGL.prototype.drawBuffers = function(gId) {
- this._setDefaultCamera();
- var gl = this.GL;
- var shaderKey = this._getCurShaderId();
- var shaderProgram = this.mHash[shaderKey];
- //vertex position buffer
- gl.bindBuffer(gl.ARRAY_BUFFER, this.gHash[gId].vertexBuffer);
- gl.vertexAttribPointer(
- shaderProgram.vertexPositionAttribute,
- 3, gl.FLOAT, false, 0, 0);
- //normal buffer
- gl.bindBuffer(gl.ARRAY_BUFFER, this.gHash[gId].normalBuffer);
- gl.vertexAttribPointer(
- shaderProgram.vertexNormalAttribute,
- 3, gl.FLOAT, false, 0, 0);
- // uv buffer
- gl.bindBuffer(gl.ARRAY_BUFFER, this.gHash[gId].uvBuffer);
- gl.vertexAttribPointer(
- shaderProgram.textureCoordAttribute,
- 2, gl.FLOAT, false, 0, 0);
- //vertex index buffer
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.gHash[gId].indexBuffer);
- this._setMatrixUniforms(shaderKey);
- gl.drawElements(
- gl.TRIANGLES, this.gHash[gId].numberOfItems,
- gl.UNSIGNED_SHORT, 0);
- return this;
- };
- ///////////////////////////////
- //// UTILITY FUNCTIONS
- //////////////////////////////
- /**
- * turn a two dimensional array into one dimensional array
- * @param {Array} arr 2-dimensional array
- * @return {Array} 1-dimensional array
- * [[1, 2, 3],[4, 5, 6]] -> [1, 2, 3, 4, 5, 6]
- */
- function flatten(arr){
- if (arr.length>0){
- return arr.reduce(function(a, b){
- return a.concat(b);
- });
- } else {
- return [];
- }
- }
-
- /**
- * turn a p5.Vector Array into a one dimensional number array
- * @param {Array} arr an array of p5.Vector
- * @return {Array]} a one dimensional array of numbers
- * [p5.Vector(1, 2, 3), p5.Vector(4, 5, 6)] ->
- * [1, 2, 3, 4, 5, 6]
- */
- function vToNArray(arr){
- return flatten(arr.map(function(item){
- return [item.x, item.y, item.z];
- }));
- }
- module.exports = p5.RendererGL;
-
- },{"../core/core":37}],86:[function(_dereq_,module,exports){
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- var shader = _dereq_('./shader');
- _dereq_('../core/p5.Renderer');
- _dereq_('./p5.Matrix');
- var uMVMatrixStack = [];
-
- //@TODO should implement public method
- //to override these attributes
- var attributes = {
- alpha: true,
- depth: true,
- stencil: true,
- antialias: false,
- premultipliedAlpha: false,
- preserveDrawingBuffer: false
- };
-
- /**
- * @class p5.RendererGL
- * @constructor
- * @extends p5.Renderer
- * 3D graphics class.
- * @todo extend class to include public method for offscreen
- * rendering (FBO).
- *
- */
- p5.RendererGL = function(elt, pInst, isMainCanvas) {
- p5.Renderer.call(this, elt, pInst, isMainCanvas);
- this._initContext();
-
- this.isP3D = true; //lets us know we're in 3d mode
- this.GL = this.drawingContext;
- //lights
- this.ambientLightCount = 0;
- this.directionalLightCount = 0;
- this.pointLightCount = 0;
- //camera
- this._curCamera = null;
-
- /**
- * model view, projection, & normal
- * matrices
- */
- this.uMVMatrix = new p5.Matrix();
- this.uPMatrix = new p5.Matrix();
- this.uNMatrix = new p5.Matrix('mat3');
- //Geometry & Material hashes
- this.gHash = {};
- this.mHash = {};
- //Imediate Mode
- //default drawing is done in Retained Mode
- this.isImmediateDrawing = false;
- this.immediateMode = {};
- this.curFillColor = [0.5,0.5,0.5,1.0];
- this.curStrokeColor = [0.5,0.5,0.5,1.0];
- this.pointSize = 5.0;//default point/stroke
- return this;
- };
-
- p5.RendererGL.prototype = Object.create(p5.Renderer.prototype);
-
- //////////////////////////////////////////////
- // Setting
- //////////////////////////////////////////////
-
- p5.RendererGL.prototype._initContext = function() {
- try {
- this.drawingContext = this.canvas.getContext('webgl', attributes) ||
- this.canvas.getContext('experimental-webgl', attributes);
- if (this.drawingContext === null) {
- throw new Error('Error creating webgl context');
- } else {
- console.log('p5.RendererGL: enabled webgl context');
- var gl = this.drawingContext;
- gl.enable(gl.DEPTH_TEST);
- gl.depthFunc(gl.LEQUAL);
- gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
- }
- } catch (er) {
- throw new Error(er);
- }
- };
- //detect if user didn't set the camera
- //then call this function below
- p5.RendererGL.prototype._setDefaultCamera = function(){
- if(this._curCamera === null){
- var _w = this.width;
- var _h = this.height;
- this.uPMatrix = p5.Matrix.identity();
- var cameraZ = (this.height / 2) / Math.tan(Math.PI * 30 / 180);
- this.uPMatrix.perspective(60 / 180 * Math.PI, _w / _h,
- cameraZ * 0.1, cameraZ * 10);
- this._curCamera = 'default';
- }
- };
-
- p5.RendererGL.prototype._update = function() {
- this.uMVMatrix = p5.Matrix.identity();
- this.translate(0, 0, -(this.height / 2) / Math.tan(Math.PI * 30 / 180));
- this.ambientLightCount = 0;
- this.directionalLightCount = 0;
- this.pointLightCount = 0;
- };
-
- /**
- * [background description]
- * @return {[type]} [description]
- */
- p5.RendererGL.prototype.background = function() {
- var gl = this.GL;
- var _col = this._pInst.color.apply(this._pInst, arguments);
- var _r = (_col.levels[0]) / 255;
- var _g = (_col.levels[1]) / 255;
- var _b = (_col.levels[2]) / 255;
- var _a = (_col.levels[3]) / 255;
- gl.clearColor(_r, _g, _b, _a);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
- };
-
- //@TODO implement this
- // p5.RendererGL.prototype.clear = function() {
- //@TODO
- // };
-
- //////////////////////////////////////////////
- // SHADER
- //////////////////////////////////////////////
-
- /**
- * [_initShaders description]
- * @param {string} vertId [description]
- * @param {string} fragId [description]
- * @return {[type]} [description]
- */
- p5.RendererGL.prototype._initShaders =
- function(vertId, fragId, isImmediateMode) {
- var gl = this.GL;
- //set up our default shaders by:
- // 1. create the shader,
- // 2. load the shader source,
- // 3. compile the shader
- var _vertShader = gl.createShader(gl.VERTEX_SHADER);
- //load in our default vertex shader
- gl.shaderSource(_vertShader, shader[vertId]);
- gl.compileShader(_vertShader);
- // if our vertex shader failed compilation?
- if (!gl.getShaderParameter(_vertShader, gl.COMPILE_STATUS)) {
- alert('Yikes! An error occurred compiling the shaders:' +
- gl.getShaderInfoLog(_vertShader));
- return null;
- }
-
- var _fragShader = gl.createShader(gl.FRAGMENT_SHADER);
- //load in our material frag shader
- gl.shaderSource(_fragShader, shader[fragId]);
- gl.compileShader(_fragShader);
- // if our frag shader failed compilation?
- if (!gl.getShaderParameter(_fragShader, gl.COMPILE_STATUS)) {
- alert('Darn! An error occurred compiling the shaders:' +
- gl.getShaderInfoLog(_fragShader));
- return null;
- }
-
- var shaderProgram = gl.createProgram();
- gl.attachShader(shaderProgram, _vertShader);
- gl.attachShader(shaderProgram, _fragShader);
- gl.linkProgram(shaderProgram);
- if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
- alert('Snap! Error linking shader program');
- }
- //END SHADERS SETUP
-
- this._getLocation(shaderProgram, isImmediateMode);
-
- return shaderProgram;
- };
-
- p5.RendererGL.prototype._getLocation =
- function(shaderProgram, isImmediateMode) {
- var gl = this.GL;
- gl.useProgram(shaderProgram);
-
- //projection Matrix uniform
- shaderProgram.uPMatrixUniform =
- gl.getUniformLocation(shaderProgram, 'uProjectionMatrix');
- //model view Matrix uniform
- shaderProgram.uMVMatrixUniform =
- gl.getUniformLocation(shaderProgram, 'uModelViewMatrix');
-
- //@TODO: figure out a better way instead of if statement
- if(isImmediateMode === undefined){
- //normal Matrix uniform
- shaderProgram.uNMatrixUniform =
- gl.getUniformLocation(shaderProgram, 'uNormalMatrix');
-
- shaderProgram.samplerUniform =
- gl.getUniformLocation(shaderProgram, 'uSampler');
- }
- };
-
- /**
- * Sets a shader uniform given a shaderProgram and uniform string
- * @param {String} shaderKey key to material Hash.
- * @param {String} uniform location in shader.
- * @param { Number} data data to bind uniform. Float data type.
- * @todo currently this function sets uniform1f data.
- * Should generalize function to accept any uniform
- * data type.
- */
- p5.RendererGL.prototype._setUniform1f = function(shaderKey,uniform,data)
- {
- var gl = this.GL;
- var shaderProgram = this.mHash[shaderKey];
- gl.useProgram(shaderProgram);
- shaderProgram[uniform] = gl.getUniformLocation(shaderProgram, uniform);
- gl.uniform1f(shaderProgram[uniform], data);
- return this;
- };
-
- p5.RendererGL.prototype._setMatrixUniforms = function(shaderKey) {
- var gl = this.GL;
- var shaderProgram = this.mHash[shaderKey];
-
- gl.useProgram(shaderProgram);
-
- gl.uniformMatrix4fv(
- shaderProgram.uPMatrixUniform,
- false, this.uPMatrix.mat4);
-
- gl.uniformMatrix4fv(
- shaderProgram.uMVMatrixUniform,
- false, this.uMVMatrix.mat4);
-
- this.uNMatrix.inverseTranspose(this.uMVMatrix);
-
- gl.uniformMatrix3fv(
- shaderProgram.uNMatrixUniform,
- false, this.uNMatrix.mat3);
- };
- //////////////////////////////////////////////
- // GET CURRENT | for shader and color
- //////////////////////////////////////////////
- p5.RendererGL.prototype._getShader = function(vertId, fragId, isImmediateMode) {
- var mId = vertId + '|' + fragId;
- //create it and put it into hashTable
- if(!this.materialInHash(mId)){
- var shaderProgram = this._initShaders(vertId, fragId, isImmediateMode);
- this.mHash[mId] = shaderProgram;
- }
- this.curShaderId = mId;
-
- return this.mHash[this.curShaderId];
- };
-
- p5.RendererGL.prototype._getCurShaderId = function(){
- //if the shader ID is not yet defined
- var mId, shaderProgram;
- if(this.drawMode !== 'fill' && this.curShaderId === undefined){
- //default shader: normalMaterial()
- mId = 'normalVert|normalFrag';
- shaderProgram = this._initShaders('normalVert', 'normalFrag');
- this.mHash[mId] = shaderProgram;
- this.curShaderId = mId;
- } else if(this.isImmediateDrawing && this.drawMode === 'fill'){
- mId = 'immediateVert|vertexColorFrag';
- shaderProgram = this._initShaders('immediateVert', 'vertexColorFrag');
- this.mHash[mId] = shaderProgram;
- this.curShaderId = mId;
- }
- return this.curShaderId;
- };
-
- //////////////////////////////////////////////
- // COLOR
- //////////////////////////////////////////////
- /**
- * Basic fill material for geometry with a given color
- * @method fill
- * @param {Number|Array|String|p5.Color} v1 gray value,
- * red or hue value (depending on the current color mode),
- * or color Array, or CSS color string
- * @param {Number} [v2] optional: green or saturation value
- * @param {Number} [v3] optional: blue or brightness value
- * @param {Number} [a] optional: opacity
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(0);
- * fill(250, 0, 0);
- * rotateX(frameCount * 0.01);
- * rotateY(frameCount * 0.01);
- * rotateZ(frameCount * 0.01);
- * box(200, 200, 200);
- * }
- * </code>
- * </div>
- *
- * @alt
- * red canvas
- *
- */
- p5.RendererGL.prototype.fill = function(v1, v2, v3, a) {
- var gl = this.GL;
- var shaderProgram;
- //see material.js for more info on color blending in webgl
- var colors = this._applyColorBlend.apply(this, arguments);
- this.curFillColor = colors;
- this.drawMode = 'fill';
- if(this.isImmediateDrawing){
- shaderProgram =
- this._getShader('immediateVert','vertexColorFrag');
- gl.useProgram(shaderProgram);
- } else {
- shaderProgram =
- this._getShader('normalVert', 'basicFrag');
- gl.useProgram(shaderProgram);
- //RetainedMode uses a webgl uniform to pass color vals
- //in ImmediateMode, we want access to each vertex so therefore
- //we cannot use a uniform.
- shaderProgram.uMaterialColor = gl.getUniformLocation(
- shaderProgram, 'uMaterialColor' );
- gl.uniform4f( shaderProgram.uMaterialColor,
- colors[0],
- colors[1],
- colors[2],
- colors[3]);
- }
- return this;
- };
- p5.RendererGL.prototype.stroke = function(r, g, b, a) {
- var color = this._pInst.color.apply(this._pInst, arguments);
- var colorNormalized = color._array;
- this.curStrokeColor = colorNormalized;
- this.drawMode = 'stroke';
- return this;
- };
-
- //@TODO
- p5.RendererGL.prototype._strokeCheck = function(){
- if(this.drawMode === 'stroke'){
- throw new Error(
- 'stroke for shapes in 3D not yet implemented, use fill for now :('
- );
- }
- };
-
- /**
- * [strokeWeight description]
- * @param {Number} pointSize stroke point size
- * @return {[type]} [description]
- * @todo strokeWeight currently works on points only.
- * implement on all wireframes and strokes.
- */
- p5.RendererGL.prototype.strokeWeight = function(pointSize) {
- this.pointSize = pointSize;
- return this;
- };
- //////////////////////////////////////////////
- // HASH | for material and geometry
- //////////////////////////////////////////////
-
- p5.RendererGL.prototype.geometryInHash = function(gId){
- return this.gHash[gId] !== undefined;
- };
-
- p5.RendererGL.prototype.materialInHash = function(mId){
- return this.mHash[mId] !== undefined;
- };
-
- /**
- * [resize description]
- * @param {[type]} w [description]
- * @param {[tyoe]} h [description]
- * @return {[type]} [description]
- */
- p5.RendererGL.prototype.resize = function(w,h) {
- var gl = this.GL;
- p5.Renderer.prototype.resize.call(this, w, h);
- gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
- // If we're using the default camera, update the aspect ratio
- if(this._curCamera === 'default') {
- this._curCamera = null;
- this._setDefaultCamera();
- }
- };
-
- /**
- * clears color and depth buffers
- * with r,g,b,a
- * @param {Number} r normalized red val.
- * @param {Number} g normalized green val.
- * @param {Number} b normalized blue val.
- * @param {Number} a normalized alpha val.
- */
- p5.RendererGL.prototype.clear = function() {
- var gl = this.GL;
- gl.clearColor(arguments[0],
- arguments[1],
- arguments[2],
- arguments[3]);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
- };
-
- /**
- * [translate description]
- * @param {[type]} x [description]
- * @param {[type]} y [description]
- * @param {[type]} z [description]
- * @return {[type]} [description]
- * @todo implement handle for components or vector as args
- */
- p5.RendererGL.prototype.translate = function(x, y, z) {
- this.uMVMatrix.translate([x,-y,z]);
- return this;
- };
-
- /**
- * Scales the Model View Matrix by a vector
- * @param {Number | p5.Vector | Array} x [description]
- * @param {Number} [y] y-axis scalar
- * @param {Number} [z] z-axis scalar
- * @return {this} [description]
- */
- p5.RendererGL.prototype.scale = function(x,y,z) {
- this.uMVMatrix.scale([x,y,z]);
- return this;
- };
-
- p5.RendererGL.prototype.rotate = function(rad, axis){
- this.uMVMatrix.rotate(rad, axis);
- return this;
- };
-
- p5.RendererGL.prototype.rotateX = function(rad) {
- this.rotate(rad, [1,0,0]);
- return this;
- };
-
- p5.RendererGL.prototype.rotateY = function(rad) {
- this.rotate(rad, [0,1,0]);
- return this;
- };
-
- p5.RendererGL.prototype.rotateZ = function(rad) {
- this.rotate(rad, [0,0,1]);
- return this;
- };
-
- /**
- * pushes a copy of the model view matrix onto the
- * MV Matrix stack.
- */
- p5.RendererGL.prototype.push = function() {
- uMVMatrixStack.push(this.uMVMatrix.copy());
- };
-
- /**
- * [pop description]
- * @return {[type]} [description]
- */
- p5.RendererGL.prototype.pop = function() {
- if (uMVMatrixStack.length === 0) {
- throw new Error('Invalid popMatrix!');
- }
- this.uMVMatrix = uMVMatrixStack.pop();
- };
-
- p5.RendererGL.prototype.resetMatrix = function() {
- this.uMVMatrix = p5.Matrix.identity();
- this.translate(0, 0, -800);
- return this;
- };
-
- // Text/Typography
- // @TODO:
- p5.RendererGL.prototype._applyTextProperties = function() {
- //@TODO finish implementation
- console.error('text commands not yet implemented in webgl');
- };
- module.exports = p5.RendererGL;
-
- },{"../core/core":37,"../core/p5.Renderer":43,"./p5.Matrix":83,"./shader":88}],87:[function(_dereq_,module,exports){
- /**
- * @module Shape
- * @submodule 3D Primitives
- * @for p5
- * @requires core
- * @requires p5.Geometry
- */
-
- 'use strict';
-
- var p5 = _dereq_('../core/core');
- _dereq_('./p5.Geometry');
- /**
- * Draw a plane with given a width and height
- * @method plane
- * @param {Number} width width of the plane
- * @param {Number} height height of the plane
- * @param {Number} [detailX] Optional number of triangle
- * subdivisions in x-dimension
- * @param {Number} [detailY] Optional number of triangle
- * subdivisions in y-dimension
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * //draw a plane with width 200 and height 200
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * plane(50, 50);
- * }
- * </code>
- * </div>
- *
- * @alt
- * Nothing displayed on canvas
- * Rotating interior view of a box with sides that change color.
- * 3d red and green gradient.
- * Rotating interior view of a cylinder with sides that change color.
- * Rotating view of a cylinder with sides that change color.
- * 3d red and green gradient.
- * rotating view of a multi-colored cylinder with concave sides.
- */
- p5.prototype.plane = function(){
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- var width = args[0] || 50;
- var height = args[1] || width;
- var detailX = typeof args[2] === 'number' ? args[2] : 1;
- var detailY = typeof args[3] === 'number' ? args[3] : 1;
-
- var gId = 'plane|'+width+'|'+height+'|'+detailX+'|'+detailY;
-
- if(!this._renderer.geometryInHash(gId)){
- var _plane = function(){
- var u,v,p;
- for (var i = 0; i <= this.detailY; i++){
- v = i / this.detailY;
- for (var j = 0; j <= this.detailX; j++){
- u = j / this.detailX;
- p = new p5.Vector(width * u - width/2,
- height * v - height/2,
- 0);
- this.vertices.push(p);
- this.uvs.push([u,v]);
- }
- }
- };
- var planeGeom =
- new p5.Geometry(detailX, detailY, _plane);
- planeGeom
- .computeFaces()
- .computeNormals();
- this._renderer.createBuffers(gId, planeGeom);
- }
-
- this._renderer.drawBuffers(gId);
-
- };
-
- /**
- * Draw a box with given width, height and depth
- * @method box
- * @param {Number} width width of the box
- * @param {Number} Height height of the box
- * @param {Number} depth depth of the box
- * @param {Number} [detailX] Optional number of triangle
- * subdivisions in x-dimension
- * @param {Number} [detailY] Optional number of triangle
- * subdivisions in y-dimension
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * //draw a spinning box with width, height and depth 200
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * rotateX(frameCount * 0.01);
- * rotateY(frameCount * 0.01);
- * box(200, 200, 200);
- * }
- * </code>
- * </div>
- */
- p5.prototype.box = function(){
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- var width = args[0] || 50;
- var height = args[1] || width;
- var depth = args[2] || width;
-
- var detailX = typeof args[3] === 'number' ? args[3] : 4;
- var detailY = typeof args[4] === 'number' ? args[4] : 4;
- var gId = 'box|'+width+'|'+height+'|'+depth+'|'+detailX+'|'+detailY;
-
- if(!this._renderer.geometryInHash(gId)){
- var _box = function(){
- var cubeIndices = [
- [0, 4, 2, 6],// -1, 0, 0],// -x
- [1, 3, 5, 7],// +1, 0, 0],// +x
- [0, 1, 4, 5],// 0, -1, 0],// -y
- [2, 6, 3, 7],// 0, +1, 0],// +y
- [0, 2, 1, 3],// 0, 0, -1],// -z
- [4, 5, 6, 7]// 0, 0, +1] // +z
- ];
- var id=0;
- for (var i = 0; i < cubeIndices.length; i++) {
- var cubeIndex = cubeIndices[i];
- var v = i * 4;
- for (var j = 0; j < 4; j++) {
- var d = cubeIndex[j];
- //inspired by lightgl:
- //https://github.com/evanw/lightgl.js
- //octants:https://en.wikipedia.org/wiki/Octant_(solid_geometry)
- var octant = new p5.Vector(
- ((d & 1) * 2 - 1)*width/2,
- ((d & 2) - 1) *height/2,
- ((d & 4) / 2 - 1) * depth/2);
- this.vertices.push( octant );
- this.uvs.push([j & 1, (j & 2) / 2]);
- id++;
- }
- this.faces.push([v, v + 1, v + 2]);
- this.faces.push([v + 2, v + 1, v + 3]);
- }
- };
- var boxGeom = new p5.Geometry(detailX,detailY, _box);
- boxGeom.computeNormals();
- //initialize our geometry buffer with
- //the key val pair:
- //geometry Id, Geom object
- this._renderer.createBuffers(gId, boxGeom);
- }
- this._renderer.drawBuffers(gId);
-
- return this;
-
- };
-
- /**
- * Draw a sphere with given radius
- * @method sphere
- * @param {Number} radius radius of circle
- * @param {Number} [detailX] optional: number of segments,
- * the more segments the smoother geometry
- * default is 24
- * @param {Number} [detailY] optional: number of segments,
- * the more segments the smoother geometry
- * default is 16
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * // draw a sphere with radius 200
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * sphere(50);
- * }
- * </code>
- * </div>
- */
- p5.prototype.sphere = function(){
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- var radius = args[0] || 50;
- var detailX = typeof args[1] === 'number' ? args[1] : 24;
- var detailY = typeof args[2] === 'number' ? args[2] : 16;
- var gId = 'sphere|'+radius+'|'+detailX+'|'+detailY;
- if(!this._renderer.geometryInHash(gId)){
- var _sphere = function(){
- var u,v,p;
- for (var i = 0; i <= this.detailY; i++){
- v = i / this.detailY;
- for (var j = 0; j <= this.detailX; j++){
- u = j / this.detailX;
- var theta = 2 * Math.PI * u;
- var phi = Math.PI * v - Math.PI / 2;
- p = new p5.Vector(radius * Math.cos(phi) * Math.sin(theta),
- radius * Math.sin(phi),
- radius * Math.cos(phi) * Math.cos(theta));
- this.vertices.push(p);
- this.uvs.push([u,v]);
- }
- }
- };
- var sphereGeom = new p5.Geometry(detailX, detailY, _sphere);
- sphereGeom
- .computeFaces()
- .computeNormals()
- .averageNormals()
- .averagePoleNormals();
- this._renderer.createBuffers(gId, sphereGeom);
- }
- this._renderer.drawBuffers(gId);
-
- return this;
- };
-
-
- /**
- * @private
- * helper function for creating both cones and cyllinders
- */
- var _truncatedCone = function(
- bottomRadius,
- topRadius,
- height,
- detailX,
- detailY,
- topCap,
- bottomCap) {
- detailX = (detailX < 3) ? 3 : detailX;
- detailY = (detailY < 1) ? 1 : detailY;
- topCap = (topCap === undefined) ? true : topCap;
- bottomCap = (bottomCap === undefined) ? true : bottomCap;
- var extra = (topCap ? 2 : 0) + (bottomCap ? 2 : 0);
- var vertsAroundEdge = detailX + 1;
-
- // ensure constant slant
- var slant = Math.atan2(bottomRadius - topRadius, height);
- var start = topCap ? -2 : 0;
- var end = detailY + (bottomCap ? 2 : 0);
- var yy, ii;
- for (yy = start; yy <= end; ++yy) {
- var v = yy / detailY;
- var y = height * v;
- var ringRadius;
- if (yy < 0) {
- y = 0;
- v = 1;
- ringRadius = bottomRadius;
- } else if (yy > detailY) {
- y = height;
- v = 1;
- ringRadius = topRadius;
- } else {
- ringRadius = bottomRadius +
- (topRadius - bottomRadius) * (yy / detailY);
- }
- if (yy === -2 || yy === detailY + 2) {
- ringRadius = 0;
- v = 0;
- }
- y -= height / 2;
- for (ii = 0; ii < vertsAroundEdge; ++ii) {
- //VERTICES
- this.vertices.push(
- new p5.Vector(
- Math.sin(ii*Math.PI * 2 /detailX) * ringRadius,
- y,
- Math.cos(ii*Math.PI * 2 /detailX) * ringRadius)
- );
- //VERTEX NORMALS
- this.vertexNormals.push(
- new p5.Vector(
- (yy < 0 || yy > detailY) ? 0 :
- (Math.sin(ii * Math.PI * 2 / detailX) * Math.cos(slant)),
- (yy < 0) ? -1 : (yy > detailY ? 1 : Math.sin(slant)),
- (yy < 0 || yy > detailY) ? 0 :
- (Math.cos(ii * Math.PI * 2 / detailX) * Math.cos(slant)))
- );
- //UVs
- this.uvs.push([(ii / detailX), v]);
- }
- }
- for (yy = 0; yy < detailY + extra; ++yy) {
- for (ii = 0; ii < detailX; ++ii) {
- this.faces.push([vertsAroundEdge * (yy + 0) + 0 + ii,
- vertsAroundEdge * (yy + 0) + 1 + ii,
- vertsAroundEdge * (yy + 1) + 1 + ii]);
- this.faces.push([vertsAroundEdge * (yy + 0) + 0 + ii,
- vertsAroundEdge * (yy + 1) + 1 + ii,
- vertsAroundEdge * (yy + 1) + 0 + ii]);
- }
- }
- };
-
- /**
- * Draw a cylinder with given radius and height
- * @method cylinder
- * @param {Number} radius radius of the surface
- * @param {Number} height height of the cylinder
- * @param {Number} [detailX] optional: number of segments,
- * the more segments the smoother geometry
- * default is 24
- * @param {Number} [detailY] optional: number of segments in y-dimension,
- * the more segments the smoother geometry
- * default is 16
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * //draw a spinning cylinder with radius 200 and height 200
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * rotateX(frameCount * 0.01);
- * rotateZ(frameCount * 0.01);
- * cylinder(200, 200);
- * }
- * </code>
- * </div>
- */
- p5.prototype.cylinder = function(){
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- var radius = args[0] || 50;
- var height = args[1] || radius;
- var detailX = typeof args[2] === 'number' ? args[2] : 24;
- var detailY = typeof args[3] === 'number' ? args[3] : 16;
- var gId = 'cylinder|'+radius+'|'+height+'|'+detailX+'|'+detailY;
- if(!this._renderer.geometryInHash(gId)){
- var cylinderGeom = new p5.Geometry(detailX, detailY);
- _truncatedCone.call(
- cylinderGeom,
- radius,
- radius,
- height,
- detailX,
- detailY,
- true,true);
- cylinderGeom.computeNormals();
- this._renderer.createBuffers(gId, cylinderGeom);
- }
-
- this._renderer.drawBuffers(gId);
-
- return this;
- };
-
-
- /**
- * Draw a cone with given radius and height
- * @method cone
- * @param {Number} radius radius of the bottom surface
- * @param {Number} height height of the cone
- * @param {Number} [detailX] optional: number of segments,
- * the more segments the smoother geometry
- * default is 24
- * @param {Number} [detailY] optional: number of segments,
- * the more segments the smoother geometry
- * default is 16
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * //draw a spinning cone with radius 200 and height 200
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * rotateX(frameCount * 0.01);
- * rotateZ(frameCount * 0.01);
- * cone(200, 200);
- * }
- * </code>
- * </div>
- */
- p5.prototype.cone = function(){
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- var baseRadius = args[0] || 50;
- var height = args[1] || baseRadius;
- var detailX = typeof args[2] === 'number' ? args[2] : 24;
- var detailY = typeof args[3] === 'number' ? args[3] : 16;
- var gId = 'cone|'+baseRadius+'|'+height+'|'+detailX+'|'+detailY;
- if(!this._renderer.geometryInHash(gId)){
- var coneGeom = new p5.Geometry(detailX, detailY);
- _truncatedCone.call(coneGeom,
- baseRadius,
- 0,//top radius 0
- height,
- detailX,
- detailY,
- true,
- true);
- //for cones we need to average Normals
- coneGeom
- .computeNormals();
- this._renderer.createBuffers(gId, coneGeom);
- }
-
- this._renderer.drawBuffers(gId);
-
- return this;
- };
-
- /**
- * Draw an ellipsoid with given radius
- * @method ellipsoid
- * @param {Number} radiusx xradius of circle
- * @param {Number} radiusy yradius of circle
- * @param {Number} radiusz zradius of circle
- * @param {Number} [detailX] optional: number of segments,
- * the more segments the smoother geometry
- * default is 24. Avoid detail number above
- * 150, it may crash the browser.
- * @param {Number} [detailY] optional: number of segments,
- * the more segments the smoother geometry
- * default is 16. Avoid detail number above
- * 150, it may crash the browser.
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * // draw an ellipsoid with radius 20, 30 and 40.
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * ellipsoid(20, 30, 40);
- * }
- * </code>
- * </div>
- */
- p5.prototype.ellipsoid = function(){
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- var detailX = typeof args[3] === 'number' ? args[3] : 24;
- var detailY = typeof args[4] === 'number' ? args[4] : 24;
- var radiusX = args[0] || 50;
- var radiusY = args[1] || radiusX;
- var radiusZ = args[2] || radiusX;
-
- var gId = 'ellipsoid|'+radiusX+'|'+radiusY+
- '|'+radiusZ+'|'+detailX+'|'+detailY;
-
-
- if(!this._renderer.geometryInHash(gId)){
- var _ellipsoid = function(){
- var u,v,p;
- for (var i = 0; i <= this.detailY; i++){
- v = i / this.detailY;
- for (var j = 0; j <= this.detailX; j++){
- u = j / this.detailX;
- var theta = 2 * Math.PI * u;
- var phi = Math.PI * v - Math.PI / 2;
- p = new p5.Vector(radiusX * Math.cos(phi) * Math.sin(theta),
- radiusY * Math.sin(phi),
- radiusZ * Math.cos(phi) * Math.cos(theta));
- this.vertices.push(p);
- this.uvs.push([u,v]);
- }
- }
- };
- var ellipsoidGeom = new p5.Geometry(detailX, detailY,_ellipsoid);
- ellipsoidGeom
- .computeFaces()
- .computeNormals();
- this._renderer.createBuffers(gId, ellipsoidGeom);
- }
-
- this._renderer.drawBuffers(gId);
-
- return this;
- };
-
- /**
- * Draw a torus with given radius and tube radius
- * @method torus
- * @param {Number} radius radius of the whole ring
- * @param {Number} tubeRadius radius of the tube
- * @param {Number} [detailX] optional: number of segments in x-dimension,
- * the more segments the smoother geometry
- * default is 24
- * @param {Number} [detailY] optional: number of segments in y-dimension,
- * the more segments the smoother geometry
- * default is 16
- * @return {p5} the p5 object
- * @example
- * <div>
- * <code>
- * //draw a spinning torus with radius 200 and tube radius 60
- * function setup(){
- * createCanvas(100, 100, WEBGL);
- * }
- *
- * function draw(){
- * background(200);
- * rotateX(frameCount * 0.01);
- * rotateY(frameCount * 0.01);
- * torus(200, 60);
- * }
- * </code>
- * </div>
- */
- p5.prototype.torus = function(){
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- var detailX = typeof args[2] === 'number' ? args[2] : 24;
- var detailY = typeof args[3] === 'number' ? args[3] : 16;
-
- var radius = args[0] || 50;
- var tubeRadius = args[1] || 10;
-
- var gId = 'torus|'+radius+'|'+tubeRadius+'|'+detailX+'|'+detailY;
-
- if(!this._renderer.geometryInHash(gId)){
- var _torus = function(){
- var u,v,p;
- for (var i = 0; i <= this.detailY; i++){
- v = i / this.detailY;
- for (var j = 0; j <= this.detailX; j++){
- u = j / this.detailX;
- var theta = 2 * Math.PI * u;
- var phi = 2 * Math.PI * v;
- p = new p5.Vector(
- (radius + tubeRadius * Math.cos(phi)) * Math.cos(theta),
- (radius + tubeRadius * Math.cos(phi)) * Math.sin(theta),
- tubeRadius * Math.sin(phi));
- this.vertices.push(p);
- this.uvs.push([u,v]);
- }
- }
- };
- var torusGeom = new p5.Geometry(detailX, detailY, _torus);
- torusGeom
- .computeFaces()
- .computeNormals()
- .averageNormals();
- this._renderer.createBuffers(gId, torusGeom);
- }
-
- this._renderer.drawBuffers(gId);
-
- return this;
- };
-
- ///////////////////////
- /// 2D primitives
- /////////////////////////
-
- //@TODO
- p5.RendererGL.prototype.point = function(x, y, z){
- console.log('point not yet implemented in webgl');
- return this;
- };
-
- p5.RendererGL.prototype.triangle = function
- (args){
- var x1=args[0], y1=args[1];
- var x2=args[2], y2=args[3];
- var x3=args[4], y3=args[5];
- var gId = 'tri|'+x1+'|'+y1+'|'+
- x2+'|'+y2+'|'+
- x3+'|'+y3;
- if(!this.geometryInHash(gId)){
- var _triangle = function(){
- var vertices = [];
- vertices.push(new p5.Vector(x1,y1,0));
- vertices.push(new p5.Vector(x2,y2,0));
- vertices.push(new p5.Vector(x3,y3,0));
- this.vertices = vertices;
- this.faces = [[0,1,2]];
- this.uvs = [[0,0],[0,1],[1,1]];
- };
- var triGeom = new p5.Geometry(1,1,_triangle);
- triGeom.computeNormals();
- this.createBuffers(gId, triGeom);
- }
-
- this.drawBuffers(gId);
- return this;
- };
-
- p5.RendererGL.prototype.ellipse = function
- (args){
- var x = args[0];
- var y = args[1];
- var width = args[2];
- var height = args[3];
- //detailX and Y are optional 6th & 7th
- //arguments
- var detailX = args[4] || 24;
- var detailY = args[5] || 16;
- var gId = 'ellipse|'+args[0]+'|'+args[1]+'|'+args[2]+'|'+
- args[3];
- if(!this.geometryInHash(gId)){
- var _ellipse = function(){
- var u,v,p;
- var centerX = x+width*0.5;
- var centerY = y+height*0.5;
- for (var i = 0; i <= this.detailY; i++){
- v = i / this.detailY;
- for (var j = 0; j <= this.detailX; j++){
- u = j / this.detailX;
- var theta = 2 * Math.PI * u;
- if(v === 0){
- p = new p5.Vector(centerX, centerY, 0);
- }
- else{
- var _x = centerX + width*0.5 * Math.cos(theta);
- var _y = centerY + height*0.5 * Math.sin(theta);
- p = new p5.Vector(_x, _y, 0);
- }
- this.vertices.push(p);
- this.uvs.push([u,v]);
- }
- }
- };
- var ellipseGeom = new p5.Geometry(detailX,detailY,_ellipse);
- ellipseGeom
- .computeFaces()
- .computeNormals();
- this.createBuffers(gId, ellipseGeom);
- }
- this.drawBuffers(gId);
- return this;
- };
-
- p5.RendererGL.prototype.rect = function
- (args){
- var gId = 'rect|'+args[0]+'|'+args[1]+'|'+args[2]+'|'+
- args[3];
- var x = args[0];
- var y = args[1];
- var width = args[2];
- var height = args[3];
- var detailX = args[4] || 24;
- var detailY = args[5] || 16;
- if(!this.geometryInHash(gId)){
- var _rect = function(){
- var u,v,p;
- for (var i = 0; i <= this.detailY; i++){
- v = i / this.detailY;
- for (var j = 0; j <= this.detailX; j++){
- u = j / this.detailX;
- // var _x = x-width/2;
- // var _y = y-height/2;
- p = new p5.Vector(
- x + (width*u),
- y + (height*v),
- 0
- );
- this.vertices.push(p);
- this.uvs.push([u,v]);
- }
- }
- };
- var rectGeom = new p5.Geometry(detailX,detailY,_rect);
- rectGeom
- .computeFaces()
- .computeNormals();
- this.createBuffers(gId, rectGeom);
- }
- this.drawBuffers(gId);
- return this;
- };
-
- p5.RendererGL.prototype.quad = function(){
- var args = new Array(arguments.length);
- for (var i = 0; i < args.length; ++i) {
- args[i] = arguments[i];
- }
- var x1 = args[0],
- y1 = args[1],
- x2 = args[2],
- y2 = args[3],
- x3 = args[4],
- y3 = args[5],
- x4 = args[6],
- y4 = args[7];
- var gId = 'quad|'+x1+'|'+y1+'|'+
- x2+'|'+y2+'|'+
- x3+'|'+y3+'|'+
- x4+'|'+y4;
- if(!this.geometryInHash(gId)){
- var _quad = function(){
- this.vertices.push(new p5.Vector(x1,y1,0));
- this.vertices.push(new p5.Vector(x2,y2,0));
- this.vertices.push(new p5.Vector(x3,y3,0));
- this.vertices.push(new p5.Vector(x4,y4,0));
- this.uvs.push([0, 0], [1, 0], [1, 1], [0, 1]);
- };
- var quadGeom = new p5.Geometry(2,2,_quad);
- quadGeom.computeNormals();
- quadGeom.faces = [[0,1,2],[2,3,0]];
- this.createBuffers(gId, quadGeom);
- }
- this.drawBuffers(gId);
- return this;
- };
-
- //this implementation of bezier curve
- //is based on Bernstein polynomial
- p5.RendererGL.prototype.bezier = function
- (args){
- var bezierDetail=args[12] || 20;//value of Bezier detail
- this.beginShape();
- var coeff=[0,0,0,0];// Bernstein polynomial coeffecients
- var vertex=[0,0,0]; //(x,y,z) coordinates of points in bezier curve
- for(var i=0; i<=bezierDetail; i++){
- coeff[0]=Math.pow(1-(i/bezierDetail),3);
- coeff[1]=(3*(i/bezierDetail)) * (Math.pow(1-(i/bezierDetail),2));
- coeff[2]=(3*Math.pow(i/bezierDetail,2)) * (1-(i/bezierDetail));
- coeff[3]=Math.pow(i/bezierDetail,3);
- vertex[0]=args[0]*coeff[0] + args[3]*coeff[1] +
- args[6]*coeff[2] + args[9]*coeff[3];
- vertex[1]=args[1]*coeff[0] + args[4]*coeff[1] +
- args[7]*coeff[2] + args[10]*coeff[3];
- vertex[2]=args[2]*coeff[0] + args[5]*coeff[1] +
- args[8]*coeff[2] + args[11]*coeff[3];
- this.vertex(vertex[0],vertex[1],vertex[2]);
- }
- this.endShape();
- return this;
- };
-
- p5.RendererGL.prototype.curve=function
- (args){
- var curveDetail=args[12];
- this.beginShape();
- var coeff=[0,0,0,0];//coeffecients of the equation
- var vertex=[0,0,0]; //(x,y,z) coordinates of points in bezier curve
- for(var i=0; i<=curveDetail; i++){
- coeff[0]=Math.pow((i/curveDetail),3) * 0.5;
- coeff[1]=Math.pow((i/curveDetail),2) * 0.5;
- coeff[2]=(i/curveDetail) * 0.5;
- coeff[3]=0.5;
- vertex[0]=coeff[0]*(-args[0] + (3*args[3]) - (3*args[6]) +args[9]) +
- coeff[1]*((2*args[0]) - (5*args[3]) + (4*args[6]) - args[9]) +
- coeff[2]*(-args[0] + args[6]) +
- coeff[3]*(2*args[3]);
- vertex[1]=coeff[0]*(-args[1] + (3*args[4]) - (3*args[7]) +args[10]) +
- coeff[1]*((2*args[1]) - (5*args[4]) + (4*args[7]) - args[10]) +
- coeff[2]*(-args[1] + args[7]) +
- coeff[3]*(2*args[4]);
- vertex[2]=coeff[0]*(-args[2] + (3*args[5]) - (3*args[8]) +args[11]) +
- coeff[1]*((2*args[2]) - (5*args[5]) + (4*args[8]) - args[11]) +
- coeff[2]*(-args[2] + args[8]) +
- coeff[3]*(2*args[5]);
- this.vertex(vertex[0],vertex[1],vertex[2]);
- }
- this.endShape();
- return this;
- };
-
- module.exports = p5;
-
- },{"../core/core":37,"./p5.Geometry":82}],88:[function(_dereq_,module,exports){
-
-
- module.exports = {
- immediateVert:
- "attribute vec3 aPosition;\nattribute vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uResolution;\nuniform float uPointSize;\n\nvarying vec4 vColor;\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition * vec3(1.0, -1.0, 1.0), 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vColor = aVertexColor;\n gl_PointSize = uPointSize;\n}\n",
- vertexColorVert:
- "attribute vec3 aPosition;\nattribute vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nvarying vec4 vColor;\n\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition * vec3(1.0, -1.0, 1.0), 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vColor = aVertexColor;\n}\n",
- vertexColorFrag:
- "precision mediump float;\nvarying vec4 vColor;\nvoid main(void) {\n gl_FragColor = vColor;\n}",
- normalVert:
- "attribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvarying vec3 vVertexNormal;\nvarying highp vec2 vVertTexCoord;\n\nvoid main(void) {\n vec4 positionVec4 = vec4(aPosition * vec3(1.0, -1.0, 1.0), 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vVertexNormal = vec3( uNormalMatrix * aNormal );\n vVertTexCoord = aTexCoord;\n}\n",
- normalFrag:
- "precision mediump float;\nvarying vec3 vVertexNormal;\nvoid main(void) {\n gl_FragColor = vec4(vVertexNormal, 1.0);\n}",
- basicFrag:
- "precision mediump float;\nvarying vec3 vVertexNormal;\nuniform vec4 uMaterialColor;\nvoid main(void) {\n gl_FragColor = uMaterialColor;\n}",
- lightVert:
- "attribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\nuniform int uAmbientLightCount;\nuniform int uDirectionalLightCount;\nuniform int uPointLightCount;\n\nuniform vec3 uAmbientColor[8];\nuniform vec3 uLightingDirection[8];\nuniform vec3 uDirectionalColor[8];\nuniform vec3 uPointLightLocation[8];\nuniform vec3 uPointLightColor[8];\nuniform bool uSpecular;\n\nvarying vec3 vVertexNormal;\nvarying vec2 vVertTexCoord;\nvarying vec3 vLightWeighting;\n\nvec3 ambientLightFactor = vec3(0.0, 0.0, 0.0);\nvec3 directionalLightFactor = vec3(0.0, 0.0, 0.0);\nvec3 pointLightFactor = vec3(0.0, 0.0, 0.0);\nvec3 pointLightFactor2 = vec3(0.0, 0.0, 0.0);\n\nvoid main(void){\n\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n\n vec3 vertexNormal = vec3( uNormalMatrix * aNormal );\n vVertexNormal = vertexNormal;\n vVertTexCoord = aTexCoord;\n\n vec4 mvPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n vec3 eyeDirection = normalize(-mvPosition.xyz);\n\n float shininess = 32.0;\n float specularFactor = 2.0;\n float diffuseFactor = 0.3;\n\n for(int i = 0; i < 8; i++){\n if(uAmbientLightCount == i) break;\n ambientLightFactor += uAmbientColor[i];\n }\n\n for(int j = 0; j < 8; j++){\n if(uDirectionalLightCount == j) break;\n vec3 dir = uLightingDirection[j];\n float directionalLightWeighting = max(dot(vertexNormal, dir), 0.0);\n directionalLightFactor += uDirectionalColor[j] * directionalLightWeighting;\n }\n\n for(int k = 0; k < 8; k++){\n if(uPointLightCount == k) break;\n vec3 loc = uPointLightLocation[k];\n vec3 lightDirection = normalize(loc - mvPosition.xyz);\n\n float directionalLightWeighting = max(dot(vertexNormal, lightDirection), 0.0);\n pointLightFactor += uPointLightColor[k] * directionalLightWeighting;\n\n //factor2 for specular\n vec3 reflectionDirection = reflect(-lightDirection, vertexNormal);\n float specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), shininess);\n\n pointLightFactor2 += uPointLightColor[k] * (specularFactor * specularLightWeighting\n + directionalLightWeighting * diffuseFactor);\n }\n\n if(!uSpecular){\n vLightWeighting = ambientLightFactor + directionalLightFactor + pointLightFactor;\n }else{\n vLightWeighting = ambientLightFactor + directionalLightFactor + pointLightFactor2;\n }\n\n}\n",
- lightTextureFrag:
- "precision mediump float;\n\nuniform vec4 uMaterialColor;\nuniform sampler2D uSampler;\nuniform bool isTexture;\n\nvarying vec3 vLightWeighting;\nvarying highp vec2 vVertTexCoord;\n\nvoid main(void) {\n if(!isTexture){\n gl_FragColor = vec4(vec3(uMaterialColor.rgb * vLightWeighting), uMaterialColor.a);\n }else{\n vec4 textureColor = texture2D(uSampler, vVertTexCoord);\n if(vLightWeighting == vec3(0., 0., 0.)){\n gl_FragColor = textureColor;\n }else{\n gl_FragColor = vec4(vec3(textureColor.rgb * vLightWeighting), textureColor.a);\n }\n }\n}"
- };
- },{}]},{},[28])(28)
- });
|