{"id":17,"date":"2026-09-09T22:27:15","date_gmt":"2026-09-10T02:27:15","guid":{"rendered":"http:\/\/10.0.1.3:8088\/playground\/"},"modified":"2026-09-09T22:27:15","modified_gmt":"2026-09-10T02:27:15","slug":"playground","status":"publish","type":"page","link":"https:\/\/4cain.com\/en\/playground\/","title":{"rendered":"Playground"},"content":{"rendered":"<main id=\"main\" class=\"lab-page wrap\" data-no-translation>\n      <div class=\"lab-intro\"><p class=\"eyebrow\">CAIN \/ PLAYGROUND<\/p><h1>Curiosity, hands on.<\/h1><p>Six little experiments. Play a little. Keep what you like.<\/p><span class=\"lab-local\"><span class=\"tiny-dot\"><\/span>Happening in your browser<\/span><\/div>\n      <nav class=\"lab-tabs\" aria-label=\"Choose an experiment\">\n              <a href=\"#objects\" data-lab=\"objects\"><span>01<\/span>Daily objects<\/a>\n              <a href=\"#pc\" data-lab=\"pc\"><span>02<\/span>Inside a PC<\/a>\n              <a href=\"#photo\" data-lab=\"photo\"><span>03<\/span>Photo worlds<\/a>\n              <a href=\"#maze\" data-lab=\"maze\"><span>04<\/span>Minute maze<\/a>\n              <a href=\"#lens\" data-lab=\"lens\"><span>05<\/span>Lens table<\/a>\n              <a href=\"#stars\" data-lab=\"stars\"><span>06<\/span>My constellation<\/a>\n      <\/nav>\n      <noscript><p>Enable JavaScript to run these experiments locally.<\/p><\/noscript>\n      <section id=\"objects\" class=\"lab-panel\" aria-labelledby=\"objects-title\">\n        <div class=\"lab-panel-heading\"><div><p class=\"eyebrow\">01 \/ DAILY CURIOSITIES<\/p><h2 id=\"objects-title\">What takes shape today?<\/h2><\/div><p>One seed a day. A little room for variation.<\/p><\/div>\n        <div class=\"lab-workbench\"><div class=\"lab-stage\"><canvas id=\"object-canvas\" tabindex=\"0\" role=\"img\" aria-label=\"Generative sculpture. Drag or use arrow keys to rotate\"><\/canvas><span class=\"stage-label\" id=\"object-stamp\"><\/span><span class=\"stage-hint\">Drag to rotate \u00b7 Double-click to reset<\/span><\/div><aside class=\"lab-tools\">\n          <p class=\"tool-kicker\">MAKE IT YOURS<\/p><label>Form<select id=\"object-form\"><option value=\"bloom\">Mechanical bloom<\/option><option value=\"knot\">Orbital knot<\/option><option value=\"shell\">Alien shell<\/option><\/select><\/label>\n          <label class=\"lab-range\" for=\"object-twist\"><span>Twist<output for=\"object-twist\">45<\/output><\/span><input type=\"range\" id=\"object-twist\" min=\"0\" max=\"100\" step=\"1\" value=\"45\" data-unit=\"\"><\/label><label class=\"lab-range\" for=\"object-density\"><span>Line density<output for=\"object-density\">24<\/output><\/span><input type=\"range\" id=\"object-density\" min=\"8\" max=\"42\" step=\"1\" value=\"24\" data-unit=\"\"><\/label>          <label>Line color<input id=\"object-color\" type=\"color\" value=\"#4677bd\"><\/label>\n          <div class=\"lab-actions\"><button id=\"object-random\">Another variation<\/button><button id=\"object-today\">Today\u2019s original<\/button><\/div>\n          <button class=\"lab-primary\" id=\"object-save\">Keep on my shelf<\/button><button id=\"object-export\">Export image<\/button><p class=\"lab-fine\">Procedural art, no AI service. Your shelf lives in this browser.<\/p>\n        <\/aside><\/div>\n        <div class=\"shelf-heading\"><h3>A small collection<\/h3><div><button id=\"shelf-export\">Back up shelf<\/button><label class=\"file-button\">Import shelf<input type=\"file\" id=\"shelf-import\" accept=\"application\/json,.json\"><\/label><\/div><\/div><div id=\"object-shelf\" class=\"object-shelf\"><\/div>\n      <\/section>\n      <section id=\"pc\" class=\"lab-panel\" aria-labelledby=\"pc-title\" hidden>\n        <div class=\"lab-panel-heading\"><div><p class=\"eyebrow\">02 \/ SMALL PARTS, ONE WORLD<\/p><h2 id=\"pc-title\">A closer look inside.<\/h2><\/div><p>A transparent PC, ready to come apart.<\/p><\/div>\n        <div class=\"lab-workbench\"><div class=\"lab-stage\"><canvas id=\"pc-canvas\" tabindex=\"0\" role=\"img\" aria-label=\"Rotatable exploded PC illustration\"><\/canvas><span class=\"stage-label\">ASSEMBLY \/ 001<\/span><span class=\"stage-hint\">Drag to rotate \u00b7 Click a component<\/span><\/div><aside class=\"lab-tools\">\n          <label class=\"lab-range\" for=\"pc-spread\"><span>Explode<output for=\"pc-spread\">0<\/output><\/span><input type=\"range\" id=\"pc-spread\" min=\"0\" max=\"100\" step=\"1\" value=\"0\" data-unit=\"\"><\/label>          <button id=\"pc-toggle\" class=\"lab-primary\">Explode \/ assemble<\/button><div class=\"part-buttons\" id=\"pc-parts\"><\/div><h3 id=\"pc-part-title\"><\/h3><p id=\"pc-part-description\"><\/p>\n          <label>A note for this component<textarea id=\"pc-note\" rows=\"3\" maxlength=\"300\" placeholder=\"A specification, a thought, a future upgrade\u2026\"><\/textarea><\/label><button id=\"pc-note-save\">Save component note<\/button><label>Accent<input type=\"color\" id=\"pc-color\" value=\"#4677bd\"><\/label><button id=\"pc-export\">Export assembly<\/button><p class=\"lab-fine\">A generic assembly, not your actual hardware. Notes stay in this browser.<\/p>\n        <\/aside><\/div>\n      <\/section>\n      <section id=\"photo\" class=\"lab-panel\" aria-labelledby=\"photo-title\" hidden>\n        <div class=\"lab-panel-heading\"><div><p class=\"eyebrow\">03 \/ A LITTLE MORE DEPTH<\/p><h2 id=\"photo-title\">A little world in a photograph.<\/h2><\/div><p>One photograph. A little perspective.<\/p><\/div>\n        <div class=\"lab-workbench\"><div class=\"lab-stage photo-stage\" id=\"photo-drop\"><canvas id=\"photo-canvas\" tabindex=\"0\" role=\"img\" aria-label=\"Photo depth preview. Drag to explore\"><\/canvas><span class=\"stage-label\" id=\"photo-caption\">DEMO \/ SYNTHETIC DEPTH<\/span><span class=\"stage-hint\">Drop a photo \u00b7 Drag to explore<\/span><\/div><aside class=\"lab-tools\">\n          <label class=\"file-button lab-primary\">Choose a photograph<input id=\"photo-file\" type=\"file\" accept=\"image\/jpeg,image\/png,image\/webp,image\/avif\"><\/label><button id=\"photo-demo\">Try the demo scene<\/button>\n          <button id=\"photo-depth\">Estimate depth locally<\/button><p id=\"photo-progress\" role=\"status\"><\/p>\n          <label>View<select id=\"photo-mode\"><option value=\"world\">Photo parallax<\/option><option value=\"points\">Colored point cloud<\/option><option value=\"depth\">Depth map<\/option><\/select><\/label>\n          <label class=\"lab-range\" for=\"photo-strength\"><span>Depth strength<output for=\"photo-strength\">45<\/output><\/span><input type=\"range\" id=\"photo-strength\" min=\"0\" max=\"100\" step=\"1\" value=\"45\" data-unit=\"\"><\/label>          <button id=\"photo-export\">Save this view<\/button><p class=\"lab-fine\">Photos are not uploaded. First use loads about 50 MB of model and runtime files from your NAS, then computes on your device. It may take a moment. This estimates visible surfaces, not hidden geometry.<\/p>\n        <\/aside><\/div>\n      <\/section>\n      <section id=\"maze\" class=\"lab-panel\" aria-labelledby=\"maze-title\" hidden>\n        <div class=\"lab-panel-heading\"><div><p class=\"eyebrow\">04 \/ ONE SMALL SIDE QUEST<\/p><h2 id=\"maze-title\">Find a little way home.<\/h2><\/div><p>A daily maze. Your own time to beat.<\/p><\/div>\n        <div class=\"lab-workbench\"><div class=\"lab-stage\"><canvas id=\"maze-canvas\" tabindex=\"0\" role=\"img\" aria-label=\"Maze. Press start, then use arrow keys or on-screen controls\"><\/canvas><span class=\"stage-label\" id=\"maze-date\"><\/span><span class=\"stage-hint\">Arrows \/ WASD \/ Drag to tilt<\/span><\/div><aside class=\"lab-tools\">\n          <div class=\"maze-clock\" id=\"maze-clock\">00:00.0<\/div><p id=\"maze-status\" role=\"status\"><\/p><p id=\"maze-best\"><\/p><button id=\"maze-start\" class=\"lab-primary\">Start \/ restart<\/button><button id=\"maze-pause\">Pause game<\/button><div class=\"maze-pad\" aria-label=\"Direction controls\"><button data-direction=\"up\" aria-label=\"Up\">\u2191<\/button><button data-direction=\"left\" aria-label=\"Left\">\u2190<\/button><button data-direction=\"down\" aria-label=\"Down\">\u2193<\/button><button data-direction=\"right\" aria-label=\"Right\">\u2192<\/button><\/div><p class=\"lab-fine\">Reach the blue exit at bottom right. Leaving this experiment or tab pauses the game. Best times stay in this browser.<\/p>\n        <\/aside><\/div>\n      <\/section>\n      <section id=\"lens\" class=\"lab-panel\" aria-labelledby=\"lens-title\" hidden>\n        <div class=\"lab-panel-heading\"><div><p class=\"eyebrow\">05 \/ CAMERAS &#038; LIGHT<\/p><h2 id=\"lens-title\">A different way of seeing.<\/h2><\/div><p>Focal length, distance, aperture. And a little light.<\/p><\/div>\n        <div class=\"lab-workbench\"><div class=\"lab-stage lens-stage\"><canvas id=\"lens-canvas\" role=\"img\" aria-label=\"Virtual still-life camera view\"><\/canvas><span class=\"stage-label\" id=\"lens-readout\"><\/span><\/div><aside class=\"lab-tools\">\n          <label class=\"lab-range\" for=\"lens-focal\"><span>Focal length<output for=\"lens-focal\">50 mm<\/output><\/span><input type=\"range\" id=\"lens-focal\" min=\"20\" max=\"100\" step=\"1\" value=\"50\" data-unit=\" mm\"><\/label><label class=\"lab-range\" for=\"lens-distance\"><span>Camera distance<output for=\"lens-distance\">1.8 m<\/output><\/span><input type=\"range\" id=\"lens-distance\" min=\"0.8\" max=\"3.5\" step=\"0.1\" value=\"1.8\" data-unit=\" m\"><\/label><label class=\"lab-range\" for=\"lens-aperture\"><span>Aperture f\/<output for=\"lens-aperture\">2.8<\/output><\/span><input type=\"range\" id=\"lens-aperture\" min=\"1.4\" max=\"16\" step=\"0.1\" value=\"2.8\" data-unit=\"\"><\/label><label class=\"lab-range\" for=\"lens-focus\"><span>Focus distance<output for=\"lens-focus\">1.8 m<\/output><\/span><input type=\"range\" id=\"lens-focus\" min=\"0.6\" max=\"4.5\" step=\"0.1\" value=\"1.8\" data-unit=\" m\"><\/label><label class=\"lab-range\" for=\"lens-light\"><span>Light direction<output for=\"lens-light\">-35\u00b0<\/output><\/span><input type=\"range\" id=\"lens-light\" min=\"-90\" max=\"90\" step=\"1\" value=\"-35\" data-unit=\"\u00b0\"><\/label>          <button id=\"lens-focus-center\">Focus on the middle object<\/button><button id=\"lens-reset\">Reset<\/button><button id=\"lens-export\" class=\"lab-primary\">Take a photograph<\/button><p class=\"lab-fine\">Full-frame field of view and a thin-lens blur approximation. Brightness stays fixed for comparison. This is not a lens-quality, bokeh, or exposure test.<\/p>\n        <\/aside><\/div>\n      <\/section>\n      <section id=\"stars\" class=\"lab-panel\" aria-labelledby=\"stars-title\" hidden>\n        <div class=\"lab-panel-heading\"><div><p class=\"eyebrow\">06 \/ A CONSTELLATION OF SMALL THINGS<\/p><h2 id=\"stars-title\">Look how far these little things go.<\/h2><\/div><p>Small daily experiments, connected.<\/p><\/div>\n        <div class=\"lab-workbench\"><div class=\"lab-stage\"><canvas id=\"stars-canvas\" role=\"img\" aria-label=\"Private daily-note constellation, with an equivalent list below\"><\/canvas><span class=\"stage-label\">PRIVATE \/ CAIN ONLY<\/span><\/div><aside class=\"lab-tools\"><p id=\"stars-status\" role=\"status\"><\/p><a class=\"lab-primary\" id=\"stars-login\" href=\"https:\/\/4cain.com\/wp-login.php?redirect_to=https%3A%2F%2F4cain.com%2Fen%2Fplayground%2F%23stars\">Sign in to see your constellation<\/a><button id=\"stars-refresh\">Refresh notes<\/button><div id=\"star-detail\"><\/div><p class=\"lab-fine\">Only Cain\u2019s daily notes are included. Drafts remain drafts; visitors cannot fetch their contents.<\/p><\/aside><\/div><div id=\"star-list\" class=\"star-list\"><\/div>\n      <\/section>\n      <p class=\"lab-feedback\" id=\"lab-feedback\" role=\"status\" aria-live=\"polite\"><\/p>\n      <p class=\"lab-footnote\">Local collections do not sync across devices. Photos and model computation stay in your browser; only your private constellation reads notes from this site.<\/p>\n    <\/main>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/4cain.com\/en\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/4cain.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/4cain.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/4cain.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/4cain.com\/en\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":0,"href":"https:\/\/4cain.com\/en\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"wp:attachment":[{"href":"https:\/\/4cain.com\/en\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}