[{"data":1,"prerenderedAt":813},["ShallowReactive",2],{"$fOH35c3QZ1klH9QoMigCIF6iJLJKn_FKgF3eDNtOfAHQ":3},{"newThing":4,"project":5,"cycle":9,"sections":21,"threads":768,"otherDocs":769,"documents":770,"images":771,"archiveItems":810,"links":811},"Four distinguishable actor mesh archetypes with states and labels",{"id":6,"label":7,"liveBase":8},"qmap","Qmap",null,{"id":10,"num":11,"dir":12,"name":13,"title":13,"focus":8,"status":14,"statusNote":8,"created":15,"completed":8,"mode":8,"report":8,"recordless":16,"thumbnail":17,"imageCount":18,"artifactCount":19,"lastActivity":20,"hasPickup":16,"hasInitialPrompt":16},"c2",2,"c2.entity-meshes","entity-meshes","archived","2026-03-23",false,"\u002Fcycles\u002Fqmap\u002Fc2-active.png",9,0,"2026-08-15",[22,40,191,326,483,560,661,736,752],{"key":23,"title":24,"empty":16,"ast":25},"extra","Summary",{"type":26,"children":27},"root",[28,36],{"type":29,"tag":30,"props":31,"children":32},"element","p",{},[33],{"type":34,"value":35},"text","Established a solid OOP foundation for actor entity meshes with distinct visual identities, state management, and animation systems.",{"type":29,"tag":37,"props":38,"children":39},"hr",{},[],{"key":23,"title":41,"empty":16,"ast":42},"Architecture",{"type":26,"children":43},[44,51,64,70,81,92,97,123,149,165,183,186],{"type":29,"tag":45,"props":46,"children":48},"h3",{"id":47},"class-hierarchy",[49],{"type":34,"value":50},"Class Hierarchy",{"type":29,"tag":52,"props":53,"children":57},"pre",{"className":54,"code":56,"language":34},[55],"language-text","BaseMesh (abstract)\n├── AppMesh      - Dodecahedron, full tumble spin\n├── ServiceMesh  - Hexagonal prism, grounded spin\n├── DatabaseMesh - Stacked octagon slabs, grounded spin\n└── VendorMesh   - Octahedron + favicon sprite, full tumble\n",[58],{"type":29,"tag":59,"props":60,"children":62},"code",{"__ignoreMap":61},"",[63],{"type":34,"value":56},{"type":29,"tag":45,"props":65,"children":67},{"id":66},"key-patterns",[68],{"type":34,"value":69},"Key Patterns",{"type":29,"tag":30,"props":71,"children":72},{},[73,79],{"type":29,"tag":74,"props":75,"children":76},"strong",{},[77],{"type":34,"value":78},"1. Animation Config Merging",{"type":34,"value":80},"\nSubclasses define their defaults, then spread incoming options on top:",{"type":29,"tag":52,"props":82,"children":87},{"className":83,"code":84,"language":85,"meta":61,"style":86},"language-js","const animation = {\n  bob: false,\n  spin: true,\n  spinMode: \"grounded\",  \u002F\u002F subclass default\n  ...options.animation,   \u002F\u002F caller can override\n};\n","js","undefined",[88],{"type":29,"tag":59,"props":89,"children":90},{"__ignoreMap":61},[91],{"type":34,"value":84},{"type":29,"tag":30,"props":93,"children":94},{},[95],{"type":34,"value":96},"This ensures type-specific behaviors persist even when callers provide partial options.",{"type":29,"tag":30,"props":98,"children":99},{},[100,105,107,113,115,121],{"type":29,"tag":74,"props":101,"children":102},{},[103],{"type":34,"value":104},"2. State Material Registration",{"type":34,"value":106},"\nMaterials that should respond to state changes register via ",{"type":29,"tag":59,"props":108,"children":110},{"className":109},[],[111],{"type":34,"value":112},"registerStateMaterial()",{"type":34,"value":114},". The base ",{"type":29,"tag":59,"props":116,"children":118},{"className":117},[],[119],{"type":34,"value":120},"setState()",{"type":34,"value":122}," iterates and updates color\u002Fopacity. Materials that should stay constant (like vendor favicons) simply don't register.",{"type":29,"tag":30,"props":124,"children":125},{},[126,131,133,139,141,147],{"type":29,"tag":74,"props":127,"children":128},{},[129],{"type":34,"value":130},"3. Disposable Resource Tracking",{"type":34,"value":132},"\nAll geometries, materials, and textures call ",{"type":29,"tag":59,"props":134,"children":136},{"className":135},[],[137],{"type":34,"value":138},"registerDisposable()",{"type":34,"value":140},". The ",{"type":29,"tag":59,"props":142,"children":144},{"className":143},[],[145],{"type":34,"value":146},"dispose()",{"type":34,"value":148}," method cleans up everything - prevents GPU memory leaks.",{"type":29,"tag":30,"props":150,"children":151},{},[152,157,163],{"type":29,"tag":74,"props":153,"children":154},{},[155],{"type":34,"value":156},"4. Edge Line Helpers",{"type":29,"tag":59,"props":158,"children":160},{"className":159},[],[161],{"type":34,"value":162},"createEdgeLines(geometry, options)",{"type":34,"value":164}," centralizes the LineMaterial\u002FLineSegments2 boilerplate. Supports optional material reuse for efficiency (DatabaseMesh shares one edge material across 3 slabs).",{"type":29,"tag":30,"props":166,"children":167},{},[168,173,175,181],{"type":29,"tag":74,"props":169,"children":170},{},[171],{"type":34,"value":172},"5. Canvas Texture Redrawing",{"type":34,"value":174},"\nLabels and favicons store their canvas\u002Fcontext for dynamic updates. On state change, redraw the canvas and set ",{"type":29,"tag":59,"props":176,"children":178},{"className":177},[],[179],{"type":34,"value":180},"texture.needsUpdate = true",{"type":34,"value":182},".",{"type":29,"tag":37,"props":184,"children":185},{},[],{"type":29,"tag":187,"props":188,"children":189},"style",{},[190],{"type":34,"value":61},{"key":23,"title":192,"empty":16,"ast":193},"Entity Shapes & Behaviors",{"type":26,"children":194},[195,323],{"type":29,"tag":196,"props":197,"children":198},"table",{},[199,228],{"type":29,"tag":200,"props":201,"children":202},"thead",{},[203],{"type":29,"tag":204,"props":205,"children":206},"tr",{},[207,213,218,223],{"type":29,"tag":208,"props":209,"children":210},"th",{},[211],{"type":34,"value":212},"Type",{"type":29,"tag":208,"props":214,"children":215},{},[216],{"type":34,"value":217},"Geometry",{"type":29,"tag":208,"props":219,"children":220},{},[221],{"type":34,"value":222},"Spin Mode",{"type":29,"tag":208,"props":224,"children":225},{},[226],{"type":34,"value":227},"Visual Meaning",{"type":29,"tag":229,"props":230,"children":231},"tbody",{},[232,256,279,301],{"type":29,"tag":204,"props":233,"children":234},{},[235,241,246,251],{"type":29,"tag":236,"props":237,"children":238},"td",{},[239],{"type":34,"value":240},"App",{"type":29,"tag":236,"props":242,"children":243},{},[244],{"type":34,"value":245},"Dodecahedron",{"type":29,"tag":236,"props":247,"children":248},{},[249],{"type":34,"value":250},"full (tumble)",{"type":29,"tag":236,"props":252,"children":253},{},[254],{"type":34,"value":255},"Complex, multi-faceted internal app",{"type":29,"tag":204,"props":257,"children":258},{},[259,264,269,274],{"type":29,"tag":236,"props":260,"children":261},{},[262],{"type":34,"value":263},"Service",{"type":29,"tag":236,"props":265,"children":266},{},[267],{"type":34,"value":268},"Hexagonal prism",{"type":29,"tag":236,"props":270,"children":271},{},[272],{"type":34,"value":273},"grounded (Y-axis)",{"type":29,"tag":236,"props":275,"children":276},{},[277],{"type":34,"value":278},"Modular, stable backend service",{"type":29,"tag":204,"props":280,"children":281},{},[282,287,292,296],{"type":29,"tag":236,"props":283,"children":284},{},[285],{"type":34,"value":286},"Database",{"type":29,"tag":236,"props":288,"children":289},{},[290],{"type":34,"value":291},"3 stacked octagons",{"type":29,"tag":236,"props":293,"children":294},{},[295],{"type":34,"value":273},{"type":29,"tag":236,"props":297,"children":298},{},[299],{"type":34,"value":300},"Layered data storage",{"type":29,"tag":204,"props":302,"children":303},{},[304,309,314,318],{"type":29,"tag":236,"props":305,"children":306},{},[307],{"type":34,"value":308},"Vendor",{"type":29,"tag":236,"props":310,"children":311},{},[312],{"type":34,"value":313},"Octahedron (diamond)",{"type":29,"tag":236,"props":315,"children":316},{},[317],{"type":34,"value":250},{"type":29,"tag":236,"props":319,"children":320},{},[321],{"type":34,"value":322},"External, valuable third-party",{"type":29,"tag":37,"props":324,"children":325},{},[],{"key":23,"title":327,"empty":16,"ast":328},"State System",{"type":26,"children":329},[330,335,475,480],{"type":29,"tag":30,"props":331,"children":332},{},[333],{"type":34,"value":334},"Four states with distinct visual treatments:",{"type":29,"tag":196,"props":336,"children":337},{},[338,369],{"type":29,"tag":200,"props":339,"children":340},{},[341],{"type":29,"tag":204,"props":342,"children":343},{},[344,349,354,359,364],{"type":29,"tag":208,"props":345,"children":346},{},[347],{"type":34,"value":348},"State",{"type":29,"tag":208,"props":350,"children":351},{},[352],{"type":34,"value":353},"Mesh Color",{"type":29,"tag":208,"props":355,"children":356},{},[357],{"type":34,"value":358},"Mesh Opacity",{"type":29,"tag":208,"props":360,"children":361},{},[362],{"type":34,"value":363},"Label Opacity",{"type":29,"tag":208,"props":365,"children":366},{},[367],{"type":34,"value":368},"Label Border",{"type":29,"tag":229,"props":370,"children":371},{},[372,398,423,448],{"type":29,"tag":204,"props":373,"children":374},{},[375,380,385,390,394],{"type":29,"tag":236,"props":376,"children":377},{},[378],{"type":34,"value":379},"active",{"type":29,"tag":236,"props":381,"children":382},{},[383],{"type":34,"value":384},"Purple",{"type":29,"tag":236,"props":386,"children":387},{},[388],{"type":34,"value":389},"1.0",{"type":29,"tag":236,"props":391,"children":392},{},[393],{"type":34,"value":389},{"type":29,"tag":236,"props":395,"children":396},{},[397],{"type":34,"value":384},{"type":29,"tag":204,"props":399,"children":400},{},[401,406,411,415,419],{"type":29,"tag":236,"props":402,"children":403},{},[404],{"type":34,"value":405},"highlighted",{"type":29,"tag":236,"props":407,"children":408},{},[409],{"type":34,"value":410},"Teal",{"type":29,"tag":236,"props":412,"children":413},{},[414],{"type":34,"value":389},{"type":29,"tag":236,"props":416,"children":417},{},[418],{"type":34,"value":389},{"type":29,"tag":236,"props":420,"children":421},{},[422],{"type":34,"value":410},{"type":29,"tag":204,"props":424,"children":425},{},[426,431,436,440,444],{"type":29,"tag":236,"props":427,"children":428},{},[429],{"type":34,"value":430},"warning",{"type":29,"tag":236,"props":432,"children":433},{},[434],{"type":34,"value":435},"Red",{"type":29,"tag":236,"props":437,"children":438},{},[439],{"type":34,"value":389},{"type":29,"tag":236,"props":441,"children":442},{},[443],{"type":34,"value":389},{"type":29,"tag":236,"props":445,"children":446},{},[447],{"type":34,"value":435},{"type":29,"tag":204,"props":449,"children":450},{},[451,456,461,466,471],{"type":29,"tag":236,"props":452,"children":453},{},[454],{"type":34,"value":455},"ignored",{"type":29,"tag":236,"props":457,"children":458},{},[459],{"type":34,"value":460},"White",{"type":29,"tag":236,"props":462,"children":463},{},[464],{"type":34,"value":465},"0.35",{"type":29,"tag":236,"props":467,"children":468},{},[469],{"type":34,"value":470},"0.3",{"type":29,"tag":236,"props":472,"children":473},{},[474],{"type":34,"value":460},{"type":29,"tag":30,"props":476,"children":477},{},[478],{"type":34,"value":479},"Vendor favicons: icon fades to 0.3 when ignored, white background stays full opacity.",{"type":29,"tag":37,"props":481,"children":482},{},[],{"key":23,"title":484,"empty":16,"ast":485},"What Works Well",{"type":26,"children":486},[487,557],{"type":29,"tag":488,"props":489,"children":490},"ol",{},[491,502,512,522,539],{"type":29,"tag":492,"props":493,"children":494},"li",{},[495,500],{"type":29,"tag":74,"props":496,"children":497},{},[498],{"type":34,"value":499},"Clean separation",{"type":34,"value":501}," - BaseMesh handles lifecycle\u002Fanimation, subclasses define geometry",{"type":29,"tag":492,"props":503,"children":504},{},[505,510],{"type":29,"tag":74,"props":506,"children":507},{},[508],{"type":34,"value":509},"Semantic shapes",{"type":34,"value":511}," - Each type is instantly distinguishable",{"type":29,"tag":492,"props":513,"children":514},{},[515,520],{"type":29,"tag":74,"props":516,"children":517},{},[518],{"type":34,"value":519},"Grounded vs full spin",{"type":34,"value":521}," - Services\u002Fdatabases feel \"infrastructure-like\", apps\u002Fvendors feel \"dynamic\"",{"type":29,"tag":492,"props":523,"children":524},{},[525,530,532,537],{"type":29,"tag":74,"props":526,"children":527},{},[528],{"type":34,"value":529},"State reactivity",{"type":34,"value":531}," - Single ",{"type":29,"tag":59,"props":533,"children":535},{"className":534},[],[536],{"type":34,"value":120},{"type":34,"value":538}," call updates everything consistently",{"type":29,"tag":492,"props":540,"children":541},{},[542,547,549,555],{"type":29,"tag":74,"props":543,"children":544},{},[545],{"type":34,"value":546},"Factory pattern",{"type":34,"value":548}," - ",{"type":29,"tag":59,"props":550,"children":552},{"className":551},[],[553],{"type":34,"value":554},"createEntity(type, options)",{"type":34,"value":556}," for runtime type selection",{"type":29,"tag":37,"props":558,"children":559},{},[],{"key":23,"title":561,"empty":16,"ast":562},"Lessons Learned",{"type":26,"children":563},[564,590,616,633,658],{"type":29,"tag":30,"props":565,"children":566},{},[567,572,574,580,582,588],{"type":29,"tag":74,"props":568,"children":569},{},[570],{"type":34,"value":571},"Animation override trap",{"type":34,"value":573},": Initially subclasses overrode ",{"type":29,"tag":59,"props":575,"children":577},{"className":576},[],[578],{"type":34,"value":579},"update()",{"type":34,"value":581}," just to skip spin. Wasteful - the base class already checks ",{"type":29,"tag":59,"props":583,"children":585},{"className":584},[],[586],{"type":34,"value":587},"animState.spin",{"type":34,"value":589},". Removed overrides, used config flags instead.",{"type":29,"tag":30,"props":591,"children":592},{},[593,598,600,606,608,614],{"type":29,"tag":74,"props":594,"children":595},{},[596],{"type":34,"value":597},"Options merging matters",{"type":34,"value":599},": Using ",{"type":29,"tag":59,"props":601,"children":603},{"className":602},[],[604],{"type":34,"value":605},"options.animation ?? defaults",{"type":34,"value":607}," completely replaces defaults. Using ",{"type":29,"tag":59,"props":609,"children":611},{"className":610},[],[612],{"type":34,"value":613},"{ ...defaults, ...options.animation }",{"type":34,"value":615}," preserves type-specific behaviors.",{"type":29,"tag":30,"props":617,"children":618},{},[619,624,626,631],{"type":29,"tag":74,"props":620,"children":621},{},[622],{"type":34,"value":623},"Canvas textures need explicit updates",{"type":34,"value":625},": Three.js caches textures. After redrawing a canvas, must set ",{"type":29,"tag":59,"props":627,"children":629},{"className":628},[],[630],{"type":34,"value":180},{"type":34,"value":632}," or changes won't appear.",{"type":29,"tag":30,"props":634,"children":635},{},[636,641,643,649,651,657],{"type":29,"tag":74,"props":637,"children":638},{},[639],{"type":34,"value":640},"Favicon state handling",{"type":34,"value":642},": Registering favicon as a state material caused unwanted color tinting. Solution: don't register it, handle opacity separately in ",{"type":29,"tag":59,"props":644,"children":646},{"className":645},[],[647],{"type":34,"value":648},"_drawFavicon()",{"type":34,"value":650}," using ",{"type":29,"tag":59,"props":652,"children":654},{"className":653},[],[655],{"type":34,"value":656},"ctx.globalAlpha",{"type":34,"value":182},{"type":29,"tag":37,"props":659,"children":660},{},[],{"key":23,"title":662,"empty":16,"ast":663},"Technical Debt \u002F Future Work",{"type":26,"children":664},[665,733],{"type":29,"tag":488,"props":666,"children":667},{},[668,678,695,705,715],{"type":29,"tag":492,"props":669,"children":670},{},[671,676],{"type":29,"tag":74,"props":672,"children":673},{},[674],{"type":34,"value":675},"Label text truncation",{"type":34,"value":677}," - Long labels overflow the canvas. Consider auto-sizing or ellipsis.",{"type":29,"tag":492,"props":679,"children":680},{},[681,686,687,693],{"type":29,"tag":74,"props":682,"children":683},{},[684],{"type":34,"value":685},"Edge line resolution",{"type":34,"value":548},{"type":29,"tag":59,"props":688,"children":690},{"className":689},[],[691],{"type":34,"value":692},"LineMaterial",{"type":34,"value":694}," needs window resolution. Currently set at creation time - won't adapt to window resize.",{"type":29,"tag":492,"props":696,"children":697},{},[698,703],{"type":29,"tag":74,"props":699,"children":700},{},[701],{"type":34,"value":702},"Favicon error states",{"type":34,"value":704}," - Failed favicon loads silently. Could show a placeholder icon.",{"type":29,"tag":492,"props":706,"children":707},{},[708,713],{"type":29,"tag":74,"props":709,"children":710},{},[711],{"type":34,"value":712},"Performance at scale",{"type":34,"value":714}," - Each entity creates its own canvas texture. For 100+ entities, consider texture atlasing.",{"type":29,"tag":492,"props":716,"children":717},{},[718,723,725,731],{"type":29,"tag":74,"props":719,"children":720},{},[721],{"type":34,"value":722},"Animation easing",{"type":34,"value":724}," - Current bob uses raw ",{"type":29,"tag":59,"props":726,"children":728},{"className":727},[],[729],{"type":34,"value":730},"Math.sin()",{"type":34,"value":732},". Could add easing functions for more organic motion.",{"type":29,"tag":37,"props":734,"children":735},{},[],{"key":23,"title":737,"empty":16,"ast":738},"Files",{"type":26,"children":739},[740,749],{"type":29,"tag":52,"props":741,"children":744},{"className":742,"code":743,"language":34},[55],"entities\u002F\n├── index.js         - Factory + exports\n├── BaseMesh.js      - Base class (~285 lines)\n├── AppMesh.js       - Dodecahedron (~63 lines)\n├── ServiceMesh.js   - Hexagon (~64 lines)\n├── DatabaseMesh.js  - Stacked slabs (~90 lines)\n└── VendorMesh.js    - Diamond + favicon (~185 lines)\n\nshared\u002F\n├── testData.js      - Sample actors + state colors\n├── colorScheme.js   - Color definitions\n└── ExperimentBase.js - Three.js scene setup\n",[745],{"type":29,"tag":59,"props":746,"children":747},{"__ignoreMap":61},[748],{"type":34,"value":743},{"type":29,"tag":37,"props":750,"children":751},{},[],{"key":23,"title":753,"empty":16,"ast":754},"Ready for Next Cycle",{"type":26,"children":755},[756],{"type":29,"tag":30,"props":757,"children":758},{},[759,761,766],{"type":34,"value":760},"The entity system is production-ready for connecting actors with traffic flows. Next logical step: ",{"type":29,"tag":74,"props":762,"children":763},{},[764],{"type":34,"value":765},"traffic lines\u002Fflows between entities",{"type":34,"value":767}," (c3?).",[],[],[],[772,779,782,786,790,794,798,802,806],{"src":773,"kind":774,"order":775,"caption":776,"capturedAt":777,"route":778},"\u002Fcycles\u002Fqmap\u002Fc2-default.png","hero",10,"The four archetypes at rest (spin frozen)","2026-08-16T03:06:59.862Z","\u002Fexperiments\u002Fc2.entity-meshes\u002F",{"src":17,"kind":774,"order":780,"caption":781,"capturedAt":777,"route":778},11,"Active state markers",{"src":783,"kind":774,"order":784,"caption":785,"capturedAt":777,"route":778},"\u002Fcycles\u002Fqmap\u002Fc2-highlighted.png",12,"Highlighted state",{"src":787,"kind":774,"order":788,"caption":789,"capturedAt":777,"route":778},"\u002Fcycles\u002Fqmap\u002Fc2-warning.png",13,"Warning state",{"src":791,"kind":774,"order":792,"caption":793,"capturedAt":777,"route":778},"\u002Fcycles\u002Fqmap\u002Fc2-ignored.png",14,"Ignored — dimmed out of the story",{"src":795,"kind":774,"order":796,"caption":797,"capturedAt":777,"route":778},"\u002Fcycles\u002Fqmap\u002Fc2-dark.png",15,"Low ambient, low direct — the moody read",{"src":799,"kind":774,"order":800,"caption":801,"capturedAt":777,"route":778},"\u002Fcycles\u002Fqmap\u002Fc2-bright.png",16,"Everything at 2.0 — flat and bright",{"src":803,"kind":774,"order":804,"caption":805,"capturedAt":777,"route":778},"\u002Fcycles\u002Fqmap\u002Fc2-grid-heavy.png",17,"Grid intensity at 3",{"src":807,"kind":808,"order":809},"\u002Fcycles\u002Fqmap\u002Fc2.outcomes.png","legacy",100,[],[812],{"route":778,"href":8},1794599446510]