[{"data":1,"prerenderedAt":593},["ShallowReactive",2],{"project-detail-en-picolock":3},{"locale":4,"slug":5,"detailPath":6,"renderMode":7,"category":8,"categories":9,"title":10,"summary":11,"roles":12,"period":17,"status":18,"stack":19,"tags":22,"cover":23,"coverImageLayout":24,"coverAspectRatio":25,"links":26,"highlights":39,"featured":43,"order":44,"ogImage":23,"media":45,"page":122,"blocks":430},"en","picolock","\u002Fprojects\u002Fpicolock","blocks","game",[8],"PicoLock","A browser puzzle game that uses card-based interactions to help middle school students explore cryptography.",[13,14,15,16],"programmer","gameplay-design-role","level-design","sound-design","Sep 2023 - Dec 2023","completed",[20,21],"unity","webgl",[],"\u002Fproject-media\u002Fpicolock\u002Fcover.png","full","16 \u002F 10",[27,31,35],{"label":28,"url":29,"kind":30},"Play on Itch","https:\u002F\u002Fpicolock.itch.io\u002Fpicolockgame","store",{"label":32,"url":33,"kind":34},"Project Website","https:\u002F\u002Fprojects.etc.cmu.edu\u002Fpicolock\u002F","live",{"label":36,"url":37,"kind":38},"YouTube Demo","https:\u002F\u002Fyoutu.be\u002Fi9p3cGoeeJQ","video",[40,41,42],"Card-based puzzles turn cryptography into something players can test directly","Three levels move from classical ciphers into RSA","Unity WebGL build integrated with PicoCTF account-based save and load",false,"30",[46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118],{"id":47,"kind":48,"src":23,"alt":49,"aspectRatio":25},"cover","image","PicoLock cover image",{"id":51,"kind":48,"src":52,"alt":53,"aspectRatio":25},"cover-svg","\u002Fproject-media\u002Fpicolock\u002Fcover.svg","PicoLock cover (vector)",{"id":55,"kind":48,"src":56,"alt":57,"aspectRatio":25},"gallery-01","\u002Fproject-media\u002Fpicolock\u002Fgallery-01.png","PicoLock gameplay screenshot",{"id":59,"kind":48,"src":60,"alt":61,"aspectRatio":25},"gallery-02","\u002Fproject-media\u002Fpicolock\u002Fgallery-02.png","PicoLock puzzle iteration screenshot",{"id":63,"kind":48,"src":64,"alt":65,"aspectRatio":25},"gallery-03","\u002Fproject-media\u002Fpicolock\u002Fgallery-03.png","PicoLock core mechanics screenshot",{"id":67,"kind":48,"src":68,"alt":69,"aspectRatio":25},"gallery-01-svg","\u002Fproject-media\u002Fpicolock\u002Fgallery-01.svg","PicoLock gameplay screenshot (vector)",{"id":71,"kind":48,"src":72,"alt":73,"aspectRatio":25},"gallery-02-svg","\u002Fproject-media\u002Fpicolock\u002Fgallery-02.svg","PicoLock puzzle iteration screenshot (vector)",{"id":75,"kind":48,"src":76,"alt":77,"aspectRatio":25},"gallery-03-svg","\u002Fproject-media\u002Fpicolock\u002Fgallery-03.svg","PicoLock core mechanics screenshot (vector)",{"id":79,"kind":48,"src":80,"alt":81,"aspectRatio":25},"class","\u002Fproject-media\u002Fpicolock\u002Fclass.png","PicoLock class diagram or course context screenshot",{"id":83,"kind":48,"src":84,"alt":85,"aspectRatio":25},"core-mechanic","\u002Fproject-media\u002Fpicolock\u002Fcore-mechanic.png","PicoLock core mechanic overview",{"id":87,"kind":48,"src":88,"alt":89,"aspectRatio":25},"check1","\u002Fproject-media\u002Fpicolock\u002Fcheck1.png","PicoLock screenshot — check 1",{"id":91,"kind":48,"src":92,"alt":93,"aspectRatio":25},"check2","\u002Fproject-media\u002Fpicolock\u002Fcheck2.png","PicoLock screenshot — check 2",{"id":95,"kind":48,"src":96,"alt":97,"aspectRatio":25},"check3","\u002Fproject-media\u002Fpicolock\u002Fcheck3.png","PicoLock screenshot — check 3",{"id":99,"kind":48,"src":100,"alt":101,"aspectRatio":25},"levels-1","\u002Fproject-media\u002Fpicolock\u002FLevels (1).png","PicoLock level flow or layout — part 1",{"id":103,"kind":48,"src":104,"alt":105,"aspectRatio":25},"levels-2","\u002Fproject-media\u002Fpicolock\u002FLevels (2).png","PicoLock level flow or layout — part 2",{"id":107,"kind":48,"src":108,"alt":109,"aspectRatio":25},"modify-inspector","\u002Fproject-media\u002Fpicolock\u002FModifyInspector.png","PicoLock Unity Inspector — modify tool",{"id":111,"kind":48,"src":112,"alt":113,"aspectRatio":25},"rotate-inspector","\u002Fproject-media\u002Fpicolock\u002FRotateInspector.png","PicoLock Unity Inspector — rotate tool",{"id":115,"kind":48,"src":116,"alt":117,"aspectRatio":25},"scale-inspector","\u002Fproject-media\u002Fpicolock\u002FScaleInspector.png","PicoLock Unity Inspector — scale tool",{"id":119,"kind":48,"src":120,"alt":121,"aspectRatio":25},"translate-inspector","\u002Fproject-media\u002Fpicolock\u002FTranslateInspector.png","PicoLock Unity Inspector — translate tool",{"locale":4,"title":10,"summary":11,"roles":123,"period":17,"highlights":124,"links":125,"seo":129,"blocks":131},[13,14,15,16],[40,41,42],[126,127,128],{"label":28,"url":29,"kind":30},{"label":32,"url":33,"kind":34},{"label":36,"url":37,"kind":38},{"title":10,"description":130,"image":47},"A cryptography education WebGL puzzle game from CMU ETC and PicoCTF.",[132,147,191,232,235,278,342,352,397,407,418,426],{"id":133,"type":134,"region":135,"title":136,"items":137},"project-facts","metrics","hero","Project Info",[138,141,144],{"label":139,"value":140},"Team Size","5",{"label":142,"value":143},"Platform","PC Website",{"label":145,"value":146},"Stack","Unity WebGL",{"id":148,"type":149,"region":150,"title":151,"document":152},"project-description","rich-text","main","Project Description",{"id":153,"title":154,"body":155,"description":161,"extension":184,"meta":185,"navigation":186,"path":187,"seo":188,"stem":189,"__hash__":190},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Foverview.md","Overview",{"type":156,"value":157,"toc":177},"minimark",[158,162,167,170,174],[159,160,161],"p",{},"PicoLock is a browser puzzle game for middle school students. The idea is simple: take cryptography concepts that usually stay abstract and turn them into a system players can test with their own hands. The project was developed in collaboration with CMU ETC and CMU CyLab PicoCTF.",[163,164,166],"h3",{"id":165},"project-background","Project background",[159,168,169],{},"The team was trying to solve a practical problem. Introductory cryptography material often explains the terms, but students still do not get a feel for how the rules actually behave. PicoLock moves that learning into a short browser experience built around puzzle interaction.",[163,171,173],{"id":172},"interaction-model","Interaction model",[159,175,176],{},"The game uses mouse-only input. Players choose a card, apply it to an object in the scene, and read the resulting state change before deciding on the next step. That constraint keeps the controls simple and leaves the player's attention on the rule set instead of the interface.",{"title":178,"searchDepth":179,"depth":179,"links":180},"",2,[181,183],{"id":165,"depth":182,"text":166},3,{"id":172,"depth":182,"text":173},"md",{},true,"\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Foverview",{"description":161},"projects\u002Fpicolock\u002Fen\u002Fblocks\u002Foverview","7iYWXbIlCSmH3baxmBrg3waEAEHAHvlkbWoG_rBLFOc",{"id":192,"type":149,"region":150,"title":193,"document":194},"intro-structure","Design Overview",{"id":195,"title":196,"body":197,"description":178,"extension":184,"meta":227,"navigation":186,"path":228,"seo":229,"stem":230,"__hash__":231},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Fintro-structure.md","Intro Structure",{"type":156,"value":198,"toc":223},[199,203,206,210],[163,200,202],{"id":201},"design-goals","Design goals",[159,204,205],{},"The goal was not to explain the theory all at once. We wanted players to build intuition for how the system behaves first. Every card action and object response was meant to make the underlying cryptography feel concrete instead of distant.",[163,207,209],{"id":208},"level-structure","Level structure",[211,212,213,217,220],"ol",{},[214,215,216],"li",{},"Level 1 starts with classical ciphers and uses direct object changes to establish the core interaction language.",[214,218,219],{},"Level 2 introduces RSA and turns the public and private key relationship into puzzle logic.",[214,221,222],{},"Level 3 continues that RSA framing and pushes the player toward reasoning instead of brute force.",{"title":178,"searchDepth":179,"depth":179,"links":224},[225,226],{"id":201,"depth":182,"text":202},{"id":208,"depth":182,"text":209},{},"\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Fintro-structure",{"description":178},"projects\u002Fpicolock\u002Fen\u002Fblocks\u002Fintro-structure","xPFOoDhJWGdheJZXdpTNrWZjG1ACO-MYQCD79eWcy3Y",{"id":233,"type":48,"region":150,"item":234},"intro-visual",{"id":79,"kind":48,"src":80,"alt":81,"aspectRatio":25},{"id":236,"type":149,"region":150,"title":237,"document":238},"my-contributions","My Contributions",{"id":239,"title":240,"body":241,"description":245,"extension":184,"meta":273,"navigation":186,"path":274,"seo":275,"stem":276,"__hash__":277},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Fcontributions.md","Contributions",{"type":156,"value":242,"toc":269},[243,246,250,262,266],[159,244,245],{},"I worked across programming, gameplay design, level design, and sound design. Most of my effort went into the parts players touch first: whether the rules read clearly, whether Level 1 teaches the interaction language well, and whether the feedback feels immediate enough to trust.",[163,247,249],{"id":248},"what-i-owned","What I owned",[251,252,253,256,259],"ul",{},[214,254,255],{},"Core card interaction implementation",[214,257,258],{},"Level 1 gameplay and puzzle structure",[214,260,261],{},"Audio feedback for clicks, state shifts, and key puzzle responses",[163,263,265],{"id":264},"result","Result",[159,267,268],{},"The goal was not to add more content for its own sake. It was to make the first few minutes do the heavy lifting, so players understand what each card changes before the cryptography layer starts asking more of them.",{"title":178,"searchDepth":179,"depth":179,"links":270},[271,272],{"id":248,"depth":182,"text":249},{"id":264,"depth":182,"text":265},{},"\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Fcontributions",{"description":245},"projects\u002Fpicolock\u002Fen\u002Fblocks\u002Fcontributions","WDNDgH8NoHeNTnpU1u5qkhUNKpLdfM7lpNFcv6lok5c",{"id":279,"type":149,"region":150,"title":280,"document":281},"implementation-core","Technical Implementation",{"id":282,"title":283,"body":284,"description":178,"extension":184,"meta":337,"navigation":186,"path":338,"seo":339,"stem":340,"__hash__":341},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Fimplementation-core.md","Implementation Core",{"type":156,"value":285,"toc":333},[286,290,310,314],[163,287,289],{"id":288},"card-system","Card system",[159,291,292,293,297,298,301,302,305,306,309],{},"The core loop is built around four reusable cards: ",[294,295,296],"code",{},"Translate"," for movement, ",[294,299,300],{},"Rotate"," for orientation, ",[294,303,304],{},"Modify"," for state switching, and ",[294,307,308],{},"Scale"," for resizing. Each card maps to one stable kind of object change, so players learn the system by testing it and reading the result.",[163,311,313],{"id":312},"interactive-objects","Interactive objects",[159,315,316,317,320,321,324,325,328,329,332],{},"Scene objects inherit from ",[294,318,319],{},"InteractableBase",", then receive specific behavior components based on the card they respond to. An ",[294,322,323],{},"IB_Translate"," object moves to its next available position when the translate card is used. An ",[294,326,327],{},"IB_Modify"," object can work with ",[294,330,331],{},"SO_ModifyObjects"," to define an ordered state sequence. That setup keeps level building flexible and removes the need to script each prop from scratch.",{"title":178,"searchDepth":179,"depth":179,"links":334},[335,336],{"id":288,"depth":182,"text":289},{"id":312,"depth":182,"text":313},{},"\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Fimplementation-core",{"description":178},"projects\u002Fpicolock\u002Fen\u002Fblocks\u002Fimplementation-core","csTpcpp5KZNT1mkRTZnr_Mo-9VvgkSoQ6lJYIMvBouc",{"id":343,"type":344,"region":150,"variant":345,"title":346,"items":347},"implementation-grid","gallery","equal-grid","Card System Framework",[348,349,350,351],{"id":119,"kind":48,"src":120,"alt":121,"aspectRatio":25},{"id":111,"kind":48,"src":112,"alt":113,"aspectRatio":25},{"id":115,"kind":48,"src":116,"alt":117,"aspectRatio":25},{"id":107,"kind":48,"src":108,"alt":109,"aspectRatio":25},{"id":353,"type":149,"region":150,"title":354,"document":355},"implementation-delivery","Validation Flow & Web Delivery",{"id":356,"title":357,"body":358,"description":178,"extension":184,"meta":392,"navigation":186,"path":393,"seo":394,"stem":395,"__hash__":396},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Fimplementation-delivery.md","Implementation Delivery",{"type":156,"value":359,"toc":388},[360,364,381,385],[163,361,363],{"id":362},"validation-flow","Validation flow",[159,365,366,367,370,371,374,375,377,378,380],{},"Level 1 ends with a target-state check built as ",[294,368,369],{},"CipherTarget"," -> ",[294,372,373],{},"IB_CheckerManager"," -> sub-checkers. ",[294,376,369],{}," defines the target condition, ",[294,379,373],{}," gathers the current object states, and the individual checkers decide whether the puzzle has been solved.",[163,382,384],{"id":383},"web-delivery","Web delivery",[159,386,387],{},"The project was built in Unity, exported to WebGL, and then connected to PicoCTF's plugin layer for the official web release. The published version supports account-based save and load, which matters for classroom use and repeat play.",{"title":178,"searchDepth":179,"depth":179,"links":389},[390,391],{"id":362,"depth":182,"text":363},{"id":383,"depth":182,"text":384},{},"\u002Fprojects\u002Fpicolock\u002Fen\u002Fblocks\u002Fimplementation-delivery",{"description":178},"projects\u002Fpicolock\u002Fen\u002Fblocks\u002Fimplementation-delivery","u9FrQuKYXHfBKMqrGQMkMK9TkoverXRjQBxQb0vElOU",{"id":398,"type":344,"region":150,"variant":399,"title":400,"items":401,"stageScale":405,"stageSideGap":406},"implementation-carousel","carousel","Validation Flow Framework",[402,403,404],{"id":87,"kind":48,"src":88,"alt":89,"aspectRatio":25},{"id":91,"kind":48,"src":92,"alt":93,"aspectRatio":25},{"id":95,"kind":48,"src":96,"alt":97,"aspectRatio":25},1,50,{"id":408,"type":344,"region":150,"variant":399,"title":409,"items":410,"stageScale":416,"stageSideGap":417},"project-gallery","Project Gallery",[411,412,413,414,415],{"id":99,"kind":48,"src":100,"alt":101,"aspectRatio":25},{"id":103,"kind":48,"src":104,"alt":105,"aspectRatio":25},{"id":55,"kind":48,"src":56,"alt":57,"aspectRatio":25},{"id":59,"kind":48,"src":60,"alt":61,"aspectRatio":25},{"id":63,"kind":48,"src":64,"alt":65,"aspectRatio":25},0.9,40,{"id":419,"type":420,"region":421,"items":422},"outbound-links","links","aside",[423,424,425],{"label":28,"url":29,"kind":30},{"label":32,"url":33,"kind":34},{"label":36,"url":37,"kind":38},{"id":427,"type":428,"region":421,"items":429},"key-highlights","highlights",[40,41,42],[431,436,456,480,482,508,542,548,574,579,586,591],{"id":133,"type":134,"region":135,"title":136,"items":432},[433,434,435],{"label":139,"value":140},{"label":142,"value":143},{"label":145,"value":146},{"id":148,"type":149,"region":150,"title":151,"document":437},{"id":153,"title":154,"body":438,"description":161,"extension":184,"meta":454,"navigation":186,"path":187,"seo":455,"stem":189,"__hash__":190},{"type":156,"value":439,"toc":450},[440,442,444,446,448],[159,441,161],{},[163,443,166],{"id":165},[159,445,169],{},[163,447,173],{"id":172},[159,449,176],{},{"title":178,"searchDepth":179,"depth":179,"links":451},[452,453],{"id":165,"depth":182,"text":166},{"id":172,"depth":182,"text":173},{},{"description":161},{"id":192,"type":149,"region":150,"title":193,"document":457},{"id":195,"title":196,"body":458,"description":178,"extension":184,"meta":478,"navigation":186,"path":228,"seo":479,"stem":230,"__hash__":231},{"type":156,"value":459,"toc":474},[460,462,464,466],[163,461,202],{"id":201},[159,463,205],{},[163,465,209],{"id":208},[211,467,468,470,472],{},[214,469,216],{},[214,471,219],{},[214,473,222],{},{"title":178,"searchDepth":179,"depth":179,"links":475},[476,477],{"id":201,"depth":182,"text":202},{"id":208,"depth":182,"text":209},{},{"description":178},{"id":233,"type":48,"region":150,"item":481},{"id":79,"kind":48,"src":80,"alt":81,"aspectRatio":25},{"id":236,"type":149,"region":150,"title":237,"document":483},{"id":239,"title":240,"body":484,"description":245,"extension":184,"meta":506,"navigation":186,"path":274,"seo":507,"stem":276,"__hash__":277},{"type":156,"value":485,"toc":502},[486,488,490,498,500],[159,487,245],{},[163,489,249],{"id":248},[251,491,492,494,496],{},[214,493,255],{},[214,495,258],{},[214,497,261],{},[163,499,265],{"id":264},[159,501,268],{},{"title":178,"searchDepth":179,"depth":179,"links":503},[504,505],{"id":248,"depth":182,"text":249},{"id":264,"depth":182,"text":265},{},{"description":245},{"id":279,"type":149,"region":150,"title":280,"document":509},{"id":282,"title":283,"body":510,"description":178,"extension":184,"meta":540,"navigation":186,"path":338,"seo":541,"stem":340,"__hash__":341},{"type":156,"value":511,"toc":536},[512,514,524,526],[163,513,289],{"id":288},[159,515,292,516,297,518,301,520,305,522,309],{},[294,517,296],{},[294,519,300],{},[294,521,304],{},[294,523,308],{},[163,525,313],{"id":312},[159,527,316,528,320,530,324,532,328,534,332],{},[294,529,319],{},[294,531,323],{},[294,533,327],{},[294,535,331],{},{"title":178,"searchDepth":179,"depth":179,"links":537},[538,539],{"id":288,"depth":182,"text":289},{"id":312,"depth":182,"text":313},{},{"description":178},{"id":343,"type":344,"region":150,"variant":345,"title":346,"items":543},[544,545,546,547],{"id":119,"kind":48,"src":120,"alt":121,"aspectRatio":25},{"id":111,"kind":48,"src":112,"alt":113,"aspectRatio":25},{"id":115,"kind":48,"src":116,"alt":117,"aspectRatio":25},{"id":107,"kind":48,"src":108,"alt":109,"aspectRatio":25},{"id":353,"type":149,"region":150,"title":354,"document":549},{"id":356,"title":357,"body":550,"description":178,"extension":184,"meta":572,"navigation":186,"path":393,"seo":573,"stem":395,"__hash__":396},{"type":156,"value":551,"toc":568},[552,554,564,566],[163,553,363],{"id":362},[159,555,366,556,370,558,374,560,377,562,380],{},[294,557,369],{},[294,559,373],{},[294,561,369],{},[294,563,373],{},[163,565,384],{"id":383},[159,567,387],{},{"title":178,"searchDepth":179,"depth":179,"links":569},[570,571],{"id":362,"depth":182,"text":363},{"id":383,"depth":182,"text":384},{},{"description":178},{"id":398,"type":344,"region":150,"variant":399,"title":400,"items":575,"stageScale":405,"stageSideGap":406},[576,577,578],{"id":87,"kind":48,"src":88,"alt":89,"aspectRatio":25},{"id":91,"kind":48,"src":92,"alt":93,"aspectRatio":25},{"id":95,"kind":48,"src":96,"alt":97,"aspectRatio":25},{"id":408,"type":344,"region":150,"variant":399,"title":409,"items":580,"stageScale":416,"stageSideGap":417},[581,582,583,584,585],{"id":99,"kind":48,"src":100,"alt":101,"aspectRatio":25},{"id":103,"kind":48,"src":104,"alt":105,"aspectRatio":25},{"id":55,"kind":48,"src":56,"alt":57,"aspectRatio":25},{"id":59,"kind":48,"src":60,"alt":61,"aspectRatio":25},{"id":63,"kind":48,"src":64,"alt":65,"aspectRatio":25},{"id":419,"type":420,"region":421,"items":587},[588,589,590],{"label":28,"url":29,"kind":30},{"label":32,"url":33,"kind":34},{"label":36,"url":37,"kind":38},{"id":427,"type":428,"region":421,"items":592},[40,41,42],1786880261062]