Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Functional Reactive Game Programming

Functional Reactive Game Programming

Manuel Wieser

November 27, 2017
Tweet

More Decks by Manuel Wieser

Other Decks in Programming

Transcript

  1. Functional Reactive Game Programming

    RxJS 5, Immutable.js and three.js
    @manuelwieser

    View Slide

  2. Manuel Wieser
    Lead Developer

    Technical Lead/Senior Front-End Developer

    karriere.at
    Lecturer

    Hypermedia User Experience Engineering

    FH OÖ Campus Hagenberg

    View Slide

  3. View Slide

  4. RxJS
    RxJS is a library for reactive programming using Observables, to make it easier to
    compose asynchronous or callback-based code.

    View Slide

  5. const button = document.querySelector('button');
    Rx.Observable.fromEvent(button, 'click')
    .subscribe(() => console.log('Yay!'));

    View Slide

  6. Immutable.js
    Immutable data encourages pure functions (data-in, data-out) and lends itself to much
    simpler application development and enabling techniques from functional programming.

    View Slide

  7. const map1 = Immutable.Map({ a: 1, b: 2, c: 3 });
    const map2 = map1.set('b', 1337);
    map1.get('b'); // 2
    map2.get('b'); // 1337

    View Slide

  8. three.js
    The aim of the project is to create an easy to use, lightweight, 3D library. The
    library provides , , CSS3D and WebGL renderers.

    View Slide

  9. const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    }
    render();

    View Slide

  10. const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75,
    windowWidth / windowHeight, 0.1, 1000);
    camera.position.z = 5;
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(windowWidth, windowHeight);
    document.body.appendChild(renderer.domElement);

    View Slide

  11. const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new
    THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    View Slide

  12. function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    }
    render();

    View Slide

  13. View Slide

  14. Thank you for
    your attention
    Code

    GitHub.com/Lorti/Corsair
    Blog manu.ninja

    Twitter @manuelwieser

    View Slide