<commit_before>/* eslint no-console: 0 */
/* tslint:disable:no-console */
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import {
  Display,
  Map2D,
  Map2DPanControl,
  Map2DView,
  Map2DViewFrame,
  Map2DViewLayer,
  OrthographicProjection,
  RepeatingPatternLayer,
  TileSet,
} from 'picimo';

const display = new Display(document.getElementById('three-container'), {
  clearColor: 0x0043ff,
  pixelate: true,
});

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x203040);

const camera3d = new THREE.PerspectiveCamera(75, 1, 1, 10000);
camera3d.position.set(0, 200, 350);
camera3d.up.set(0, 1, 0);

let curCamera = camera3d;

const projection = new OrthographicProjection({ pixelZoom: 3, near: .1, far: 1000, distance: 100 });

const controls = new OrbitControls(camera3d);

display.addEventListener('resize', ({width, height}) => {

  projection.update(width, height);

  camera3d.aspect = width / height;
  camera3d.updateProjectionMatrix();

});

// ////////////////////////////////////////////////////

async function init() {

  const map2d = new Map2D();
  scene.add(map2d);

  const ball = await TileSet.load('ball-pattern-rot.png', { basePath: '../assets/' });

  const view = new Map2DView(map2d, 0, 0, projection.width, projection.height, 256, 256);

  view.addLayer(
    new Map2DViewLayer(view,
      map2d.createTileQuadMeshLayer([ball]),
      RepeatingPatternLayer.fromTile(ball, 1),
    ));

  const viewFrame = new Map2DViewFrame(map2d, 0x66ff00, .5);
  map2d.add(viewFrame);

  const panControl = new Map2DPanControl(view, projection, 200);

  // const changeViewSize = (multiplyByScalar) => {
  //   if (view) {
  //     view.width *= multiplyByScalar;
  //     view.height = calcViewHeight(view.width);
  //     const half = min(view.width, view.height) / 2;
  //     camera2d.left = -half;
  //     camera2d.right = half;
  //     camera2d.top = half;
  //     camera2d.bottom = -half;
  //     camera2d.updateProjectionMatrix();
  //   }
  // };

  document.addEventListener('keyup', (event) => {
    const { keyCode } = event;
    switch (keyCode) {
    case 49: // 1
      // @ts-ignore
      curCamera = projection.camera;
      viewFrame.visible = false;
      controls.enabled = false;
      break;
    case 50: // 2
      curCamera = camera3d;
      viewFrame.visible = true;
      controls.enabled = true;
      break;
    case 107: // numPad: add
    case 187: // +
      // changeViewSize(curCamera === camera3d ? 1.1 : 0.9);
      break;
    case 109: // numPad: sub
    case 189: // -
      // @ts-ignore
      // changeViewSize(curCamera === camera2d ? 1.1 : 0.9);
      break;
    }
  });

  display.addEventListener('frame', ({deltaTime: t, display: {renderer}}) => {

    controls.update();

    panControl.update(t);
    view.update();

    renderer.render(scene, curCamera);

  });

};

init();
display.start();<commit_msg>add center shortcut to example<commit_after>/* eslint no-console: 0 */
/* tslint:disable:no-console */
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import {
  Display,
  Map2D,
  Map2DPanControl,
  Map2DView,
  Map2DViewFrame,
  Map2DViewLayer,
  OrthographicProjection,
  RepeatingPatternLayer,
  TileSet,
} from 'picimo';

const display = new Display(document.getElementById('three-container'), {
  clearColor: 0x0043ff,
  pixelate: true,
});

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x203040);

const camera3d = new THREE.PerspectiveCamera(75, 1, 1, 10000);
camera3d.position.set(0, 200, 350);
camera3d.up.set(0, 1, 0);

let curCamera = camera3d;

const projection = new OrthographicProjection({ pixelZoom: 3, near: .1, far: 1000, distance: 100 });

const controls = new OrbitControls(camera3d);

display.addEventListener('resize', ({width, height}) => {

  projection.update(width, height);

  camera3d.aspect = width / height;
  camera3d.updateProjectionMatrix();

});

// ////////////////////////////////////////////////////

async function init() {

  const map2d = new Map2D();
  scene.add(map2d);

  const ball = await TileSet.load('ball-pattern-rot.png', { basePath: '../assets/' });

  const view = new Map2DView(map2d, 0, 0, projection.width, projection.height, 256, 256);

  view.addLayer(
    new Map2DViewLayer(view,
      map2d.createTileQuadMeshLayer([ball]),
      RepeatingPatternLayer.fromTile(ball, 1),
    ));

  const viewFrame = new Map2DViewFrame(map2d, 0x66ff00, .5);
  map2d.add(viewFrame);

  const panControl = new Map2DPanControl(view, projection, 200);

  // const changeViewSize = (multiplyByScalar) => {
  //   if (view) {
  //     view.width *= multiplyByScalar;
  //     view.height = calcViewHeight(view.width);
  //     const half = min(view.width, view.height) / 2;
  //     camera2d.left = -half;
  //     camera2d.right = half;
  //     camera2d.top = half;
  //     camera2d.bottom = -half;
  //     camera2d.updateProjectionMatrix();
  //   }
  // };

  document.addEventListener('keyup', (event) => {
    const { keyCode } = event;
    switch (keyCode) {
    case 49: // 1
      // @ts-ignore
      curCamera = projection.camera;
      viewFrame.visible = false;
      controls.enabled = false;
      break;
    case 50: // 2
      curCamera = camera3d;
      viewFrame.visible = true;
      controls.enabled = true;
      break;
    case 67: // c
      controls.target.set(view.centerX, 0, view.centerY);
      break;
    case 107: // numPad: add
    case 187: // +
      // changeViewSize(curCamera === camera3d ? 1.1 : 0.9);
      break;
    case 109: // numPad: sub
    case 189: // -
      // @ts-ignore
      // changeViewSize(curCamera === camera2d ? 1.1 : 0.9);
      break;
    }
  });

  display.addEventListener('frame', ({deltaTime: t, display: {renderer}}) => {

    controls.update();

    panControl.update(t);
    view.update();

    renderer.render(scene, curCamera);

  });

};

init();
display.start();
{'fraction_non_alphanumeric': 0.16472351765489673, 'fraction_numerical': 0.039473684210526314, 'mean_word_length': 2.7934301958307013, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1367207', 'n_tokens_mistral': 2176, 'n_tokens_neox': 1995, 'n_words': 432}