Screen Simulators

① HTML — data 属性で事前設定① HTML — preset via data attributes

<script src="https://neort-screen-simulators.vercel.app/axcross.js"
        data-mode="tile"     // 16:9 作品を中央に4面配置
        data-rotate="15"     // 約15秒放映→切替 をシミュレート
        data-seams="true">  // プロジェクター5台の継ぎ目
</script>

<script src="https://neort-screen-simulators.vercel.app/axcross.js"
        data-mode="tile"     // four 16:9 tiles, centered
        data-rotate="15"     // simulate ~15s playback rotation
        data-seams="true">  // seams of the 5 projectors
</script>

② sketch.js — コードから制御② sketch.js — control from code

window.onNeortAxCrossReady = function (ax) {
  ax.setMode('full');    // 'full'（①全面） | 'tile'（②16:9×4）
  ax.setRotate(15);      // 0 で常時表示
};

// 作品側の UI から随時呼ぶことも可能
window.addEventListener('keydown', function (e) {
  if (e.key === ' ') NeortAxCross.toggle();
});

window.onNeortAxCrossReady = function (ax) {
  ax.setMode('full');    // 'full' (whole screen) | 'tile' (16:9 ×4)
  ax.setRotate(15);      // 0 = always on
};

// or call it any time from the artwork's own UI
window.addEventListener('keydown', function (e) {
  if (e.key === ' ') NeortAxCross.toggle();
});

① HTML — data 属性で事前設定① HTML — preset via data attributes

<script src="https://neort-screen-simulators.vercel.app/cube.js"
        data-face-split="2x2"   // 1面を4分割
        data-speed="0"          // 回転を止めて開始
        data-start="artwork">  // 通常表示から開始
</script>

<script src="https://neort-screen-simulators.vercel.app/cube.js"
        data-face-split="2x2"   // split each face into 4 panels
        data-speed="0"          // start with rotation stopped
        data-start="artwork">  // start in normal artwork view
</script>

② sketch.js — コードから制御② sketch.js — control from code

// NeortCube はキューブ構築後に使えるようになるので、
// onNeortCubeReady に書けば確実に反映されます
window.onNeortCubeReady = function (cube) {
  cube.setFaceSplit('2x2');
  cube.setSpeed(0);       // 停止（1.5 で高速化）
  cube.setMode('tile');
};

// 作品側の UI から随時呼ぶことも可能
window.addEventListener('keydown', function (e) {
  if (e.key === ' ') NeortCube.toggle();
});

// NeortCube only exists after the cube is built, so
// configure it inside onNeortCubeReady to be safe
window.onNeortCubeReady = function (cube) {
  cube.setFaceSplit('2x2');
  cube.setSpeed(0);       // stop (1.5 = faster)
  cube.setMode('tile');
};

// or call it any time from the artwork's own UI
window.addEventListener('keydown', function (e) {
  if (e.key === ' ') NeortCube.toggle();
});

① HTML — data 属性で事前設定① HTML — preset via data attributes

<script src="https://neort-screen-simulators.vercel.app/code.js"
        data-lang="all"          // HTML→CSS→JS をまとめて表示
        data-theme="amber"       // 琥珀色ターミナル
        data-opacity="0.7">     // 背景をより暗く
</script>

<script src="https://neort-screen-simulators.vercel.app/code.js"
        data-lang="all"          // show HTML→CSS→JS in sequence
        data-theme="amber"       // amber terminal
        data-opacity="0.7">     // darker background
</script>

② sketch.js — コードから制御② sketch.js — control from code

// NeortCode はコード収集後に使えるようになるので、
// onNeortCodeReady に書けば確実に反映されます
window.onNeortCodeReady = function (code) {
  code.setLang('css');                    // 'js' | 'css' | 'html' | 'all'
  code.setTheme('ice');                   // テーマ切替
  code.setColors({ string: '#f80' });     // トークン別に上書き
};

// 作品側の UI から随時呼ぶことも可能
window.addEventListener('keydown', function (e) {
  if (e.key === 'c') NeortCode.toggle();
});

// NeortCode only exists after the page's code is collected,
// so configure it inside onNeortCodeReady to be safe
window.onNeortCodeReady = function (code) {
  code.setLang('css');                    // 'js' | 'css' | 'html' | 'all'
  code.setTheme('ice');                   // switch color theme
  code.setColors({ string: '#f80' });     // per-token overrides
};

// or call it any time from the artwork's own UI
window.addEventListener('keydown', function (e) {
  if (e.key === 'c') NeortCode.toggle();
});

① HTML — data 属性で事前設定① HTML — preset via data attributes

<script src="https://neort-screen-simulators.vercel.app/debug.js"
        data-start="simulation"  // デバッグ表示から開始（既定は作品表示）
        data-opacity="0.7">     // コードレイヤーの暗さ
</script>

<script src="https://neort-screen-simulators.vercel.app/debug.js"
        data-start="simulation"  // open in debug view (default: artwork)
        data-opacity="0.7">     // darkness of the code layer
</script>

② sketch.js — コードから制御② sketch.js — control from code

window.onNeortDebugReady = function (dbg) {
  // dbg.pause() / dbg.resume() / dbg.step() / dbg.restart()
};

// 作品側の UI から随時呼ぶことも可能
window.addEventListener('keydown', function (e) {
  if (e.key === 'd') NeortDebug.toggle();
  if (e.key === 's') NeortDebug.step();
});

window.onNeortDebugReady = function (dbg) {
  // dbg.pause() / dbg.resume() / dbg.step() / dbg.restart()
};

// or call it any time from the artwork's own UI
window.addEventListener('keydown', function (e) {
  if (e.key === 'd') NeortDebug.toggle();
  if (e.key === 's') NeortDebug.step();
});