<commit_before><!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Tron.js</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=792, user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="shower/themes/ribbon/styles/screen.css">
</head>
<body class="list">
    <header class="caption">
        <h1>Tron.js</h1>
        <p><NAME> | @pheeelicks | www.pheelicks.com</p>
    </header>
    <section class="slide cover" id="Cover"><div>
        <h2>Tron.js</h2>
        <p><NAME> | @pheeelicks | www.pheelicks.com</p>
        <img src="pictures/cover.png" alt="">
        <!--
            To apply styles to the certain slides
            set slide ID to get needed elements
            -->
        <style>
            #Cover h2 {
                margin:30px 0 0;
                color:#FFF;
                text-align:center;
                font-size:70px;
                }
            #Cover img {
                top:auto;
                bottom:0;
                width:100%;
            }
            #Cover p {
                margin:10px 0 0;
                text-align:center;
                color:#FFF;
                font-style:italic;
                font-size:20px;
                }
                #Cover p a {
                    color:#FFF;
                    }
        </style>
    </div></section>
    <section class="slide"><div>
        <h2>Workshop overview</h2>
        <ol>
            <li>Machine setup</li>
            <li>THREE.js basics</li>
            <li>Project structure - amd-three.js</li>
            <li>Animation & interactivity</li>
            <li>Vertex shaders</li>
            <li>Fragment shaders</li>
            <li>Postprocessing</li>
            <li>You're on your own!</li>
        </ol>
    </div></section>
    <section class="slide"><div>
        <h2>Useful links</h2>
        <ul>
            <li>Slides: <a href="felixpalmer.github.io/tron.js/presentation">felixpalmer.github.io/tron.js/presentation</a></li>
            <li>THREE.js reference: <a href="threejs.org/docs/">threejs.org/docs/</a></li>
            <li>GLSL Cheatsheet: <a href="TODO">TODO</a></li>
            <li>Tron.js repo: <a href="github.com/felixpalmer/tron.js">github.com/felixpalmer/tron.js</a></li>
        </ul>
    </div></section>
    <section class="slide"><div>
        <h2>Machine setup</h2>
        <ul>
            <li>WebGL enabled browser, Firefox recommended</li> 
            <li>Verify WebGL working, try: <a href="felixpalmer.github.io/amd-three.js/">felixpalmer.github.io/amd-three.js/</a></li>
            <li>Text editor you're happy with</li>
            <li>GLSL code validation tool: <a href="github.com/felixpalmer/glsl-validator">github.com/felixpalmer/glsl-validator</a></li>
            <li>git installed (<a href="www.git-scm.com">www.git-scm.com</a>)</li>
            <li>Static local http server (one is included with examples, requires Python)</li>
        </ul>
    </div></section>
    <section class="slide"><div>
        <h2>Get the code!</h2>
        <pre>
            <code>git clone <EMAIL>:felixpalmer/amd-three.js.git</code>
            <code>cd amd-three.js</code>
            <code>./webserver.sh</code>
            <code>open http://localhost:8000</code>
        </pre>
    </div></section>
    <section class="slide"><div>
        <h2>THREE.js</h2>
        <ul>
            <li>High level 3D framework</li> 
            <li>Provides many useful abstractions, e.g. camera, scene, vectors, meshes, materials...</li> 
            <li>Exposes global <code>THREE.js</code> object</li> 
            <li>API docs: <a href="threejs.org/docs/">threejs.org/docs/</a></li>
            <li>Examples (warning, can consume many hours): <a href="threejs.org/examples/">threejs.org/examples/</a></li>
        </ul>
    </div></section>
    <section class="slide"><div>
        <h2>amd-three.js</h2>
        <ul>
            <li>My method to provide some structure when building THREE.js applications</li> 
            <li>Uses <a href="requirejs.org">requirejs.org</a></li>
            <li>Separates out core building blocks into separate files</li>
        </ul>
    </div></section>
    <section class="slide"><div>
        <h2>amd-three.js - 15mins</h2>
        <ol>
            <li>Try modifying the elements on stage:
                <ul>
                    <li>Add a different geometries</li>
                    <li>Add a new texture file, and apply it to an object</li>
                </ul>
            </li>
            <li>Some basic modelling (this will form the basis of the light-cycle)
                <ul>
                    <li>Make a compound object (use <code>THREE.Object3D.add()</code>)</li>
                    <li>Try and make the best light cycle you can using geometry primitives</li>
                    <li>Refactor the code into a separate Require.js module</li>
                    <li><code>app.lightcycle = new Lightcycle();</code></li>
                </ul>
            </li>
        </ol>
    </div></section>
    <section class="slide"><div>
        <h2>Animation and interactivity - 15mins</h2>
        <ol>
          <li>We already have animation loop setup, just need to make things move</li>
          <li>Try updating object positions on every frame. Hint: use <code>THREE.Clock</code></li>
          <li>Add an <code>document.onmousemove</code> listener and update based on mouse position</li>
          <li>Try updating the camera position, as well as of objects in the scene</li>
        </ol>
    </div></section>
    <section class="slide"><div>
        <h2>The game</h2>
        <pre>
            <code>git clone <EMAIL>:felixpalmer/tron.js.git</code>
            <code>cd tron.js</code>
            <code>./webserver.sh</code>
            <code>open http://localhost:3333</code>
        </pre>
    </div></section>
    <section class="slide"><div>
        <h2>To the GPU!</h2>
    </div></section>
    <section class="slide"><div>
        <h2>Title</h2>
    </div></section>
    <section class="slide"><div>
        <h2>Title</h2>
    </div></section>
    <section class="slide"><div>
        <h2>Title</h2>
    </div></section>
    <section class="slide"><div>
        <h2>Title</h2>
    </div></section>
    <div class="progress"><div></div></div>
    <script src="shower/shower.min.js"></script>
</body>
</html>
<commit_msg>Vertex shaders<commit_after><!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Tron.js</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=792, user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="shower/themes/ribbon/styles/screen.css">
</head>
<body class="list">
    <header class="caption">
        <h1>Tron.js</h1>
        <p><NAME> | @pheeelicks | www.pheelicks.com</p>
    </header>
    <section class="slide cover" id="Cover"><div>
        <h2>Tron.js</h2>
        <p><NAME> | @pheeelicks | www.pheelicks.com</p>
        <img src="pictures/cover.png" alt="">
        <!--
            To apply styles to the certain slides
            set slide ID to get needed elements
            -->
        <style>
            #Cover h2 {
                margin:30px 0 0;
                color:#FFF;
                text-align:center;
                font-size:70px;
                }
            #Cover img {
                top:auto;
                bottom:0;
                width:100%;
            }
            #Cover p {
                margin:10px 0 0;
                text-align:center;
                color:#FFF;
                font-style:italic;
                font-size:20px;
                }
                #Cover p a {
                    color:#FFF;
                    }
        </style>
    </div></section>
    <section class="slide"><div>
        <h2>Workshop overview</h2>
        <ol>
            <li>Machine setup</li>
            <li>THREE.js basics</li>
            <li>Project structure - amd-three.js</li>
            <li>Animation & interactivity</li>
            <li>Vertex shaders</li>
            <li>Fragment shaders</li>
            <li>Postprocessing</li>
            <li>You're on your own!</li>
        </ol>
    </div></section>
    <section class="slide"><div>
        <h2>Useful links</h2>
        <ul>
            <li>Slides: <a href="felixpalmer.github.io/tron.js/presentation">felixpalmer.github.io/tron.js/presentation</a></li>
            <li>THREE.js reference: <a href="threejs.org/docs/">threejs.org/docs/</a></li>
            <li>GLSL Cheatsheet: <a href="www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf">www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf</a></li>
        </ul>
    </div></section>
    <section class="slide"><div>
        <h2>Machine setup</h2>
        <ul>
            <li>WebGL enabled browser, Firefox recommended</li> 
            <li>Verify WebGL working, try: <a href="felixpalmer.github.io/amd-three.js/">felixpalmer.github.io/amd-three.js/</a></li>
            <li>Text editor you're happy with</li>
            <li>GLSL code validation tool: <a href="github.com/felixpalmer/glsl-validator">github.com/felixpalmer/glsl-validator</a></li>
            <li>git installed (<a href="www.git-scm.com">www.git-scm.com</a>)</li>
            <li>Static local http server (one is included with examples, requires Python)</li>
        </ul>
    </div></section>
    <section class="slide"><div>
        <h2>Get the code!</h2>
        <pre>
            <code>git clone <EMAIL>:felixpalmer/amd-three.js.git</code>
            <code>cd amd-three.js</code>
            <code>./webserver.sh</code>
            <code>open http://localhost:8000</code>
        </pre>
    </div></section>
    <section class="slide"><div>
        <h2>THREE.js</h2>
        <ul>
            <li>High level 3D framework</li> 
            <li>Provides many useful abstractions, e.g. camera, scene, vectors, meshes, materials...</li> 
            <li>Exposes global <code>THREE.js</code> object</li> 
            <li>API docs: <a href="threejs.org/docs/">threejs.org/docs/</a></li>
            <li>Examples (warning, can consume many hours): <a href="threejs.org/examples/">threejs.org/examples/</a></li>
        </ul>
    </div></section>
    <section class="slide"><div>
        <h2>amd-three.js</h2>
        <ul>
            <li>My method to provide some structure when building THREE.js applications</li> 
            <li>Uses <a href="requirejs.org">requirejs.org</a></li>
            <li>Separates out core building blocks into separate files</li>
        </ul>
    </div></section>
    <section class="slide"><div>
        <h2>amd-three.js - 15mins</h2>
        <ol>
            <li>Try modifying the elements on stage:
                <ul>
                    <li>Add a different geometries</li>
                    <li>Add a new texture file, and apply it to an object</li>
                </ul>
            </li>
            <li>Some basic modelling (this will form the basis of the light-cycle)
                <ul>
                    <li>Make a compound object (use <code>THREE.Object3D.add()</code>)</li>
                    <li>Try and make the best light cycle you can using geometry primitives</li>
                    <li>Refactor the code into a separate Require.js module</li>
                    <li><code>app.lightcycle = new Lightcycle();</code></li>
                </ul>
            </li>
        </ol>
    </div></section>
    <section class="slide"><div>
        <h2>Animation and interactivity - 15mins</h2>
        <ol>
          <li>We already have animation loop setup, just need to make things move</li>
          <li>Try updating object positions on every frame. Hint: use <code>THREE.Clock</code></li>
          <li>Add an <code>document.onmousemove</code> listener and update based on mouse position</li>
          <li>Try updating the camera position, as well as of objects in the scene</li>
        </ol>
    </div></section>
    <section class="slide"><div>
        <h2>The game</h2>
        <pre>
            <code>git clone <EMAIL>:felixpalmer/tron.js.git</code>
            <code>cd tron.js</code>
            <code>./webserver.sh</code>
            <code>open http://localhost:3333</code>
        </pre>
    </div></section>
    <section class="slide"><div>
        <h2>To the GPU!</h2>
        <ul>
          <li>Quick overview of the graphics pipeline:
            <ol>
              <li>Geometry, textures, meshes etc is all defined in Javascript and passed to the GPU</li>
              <li>Vertex shader is invoked on every vertex in every mesh</li>
              <li>Fragment shader is invoked on every fragment (pixel), automatically interpolating between vertices</li>
            </ol>
          </li>
        <ul>
    </div></section>
    <section class="slide"><div>
        <h2>Vertex shaders - 15mins</h2>
        <ol>
          <li>Play around with the vertex shaders in FF dev tools</li>
          <li>Create a new vertex shader file, based on <code>js/shaders/simple.vert</code></li>
          <li>Create a new material with this vertex shader attached, see <code>material.simple</code></li>
          <li>Try out some of the built-in functions: <code>mix</code>, <code>pow</code>, <code>mix</code> etc...</li>
          <li>Try animiting, by passing in the game clock, see <code>engine.vert</code></li>
        </ol>
    </div></section>
    <section class="slide"><div>
        <h2>Passing</h2>
    </div></section>
    <section class="slide"><div>
        <h2>Title</h2>
    </div></section>
    <section class="slide"><div>
        <h2>Title</h2>
    </div></section>
    <div class="progress"><div></div></div>
    <script src="shower/shower.min.js"></script>
</body>
</html>

{'fraction_non_alphanumeric': 0.15838779956427015, 'fraction_numerical': 0.010167029774872912, 'mean_word_length': 1.8876074648773327, 'pattern_counts': {'":': 0, '<': 573, '<?xml version=': 0, '>': 573, 'https://': 0, 'lorem ipsum': 0, 'www.': 10, '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': '3065001', 'n_tokens_mistral': 4515, 'n_tokens_neox': 4304, 'n_words': 945}