| OLD | NEW |
| 1 {{+bindTo:partials.standard_nacl_article}} | 1 {{+bindTo:partials.standard_nacl_article}} |
| 2 | 2 |
| 3 <section id="a-saga-of-fire-and-water-codelab"> | 3 <section id="a-saga-of-fire-and-water-codelab"> |
| 4 <span id="cds2014-cpp"></span><h1 id="a-saga-of-fire-and-water-codelab"><span id
="cds2014-cpp"></span>A Saga of Fire and Water - Codelab</h1> | 4 <span id="cds2014-cpp"></span><h1 id="a-saga-of-fire-and-water-codelab"><span id
="cds2014-cpp"></span>A Saga of Fire and Water - Codelab</h1> |
| 5 <h2 id="introduction">Introduction</h2> | 5 <h2 id="introduction">Introduction</h2> |
| 6 <p>Learn the basics of using PPAPI to do 2D graphics from | 6 <p>Learn the basics of using PPAPI to do 2D graphics from |
| 7 a C++ program running in Native Client. | 7 a C++ program running in Native Client. |
| 8 Modify our sample to turn fire into water. | 8 Modify our sample to turn fire into water. |
| 9 Develop inside Google Chrome, using our NaCl Development Environment | 9 Develop inside Google Chrome, using our NaCl Development Environment |
| 10 Chrome App. | 10 Chrome App. |
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 52 <h2 id="setup">Setup</h2> | 52 <h2 id="setup">Setup</h2> |
| 53 <p>For this codelab, you will need to install the our | 53 <p>For this codelab, you will need to install the our |
| 54 Beta NaCl Dev Environment App in your web browser.</p> | 54 Beta NaCl Dev Environment App in your web browser.</p> |
| 55 <a href="https://chrome.google.com/webstore/detail/nacl-development-environm/alj
pgkjeipgnmdpikaajmnepbcfkglfa" | 55 <a href="https://chrome.google.com/webstore/detail/nacl-development-environm/alj
pgkjeipgnmdpikaajmnepbcfkglfa" |
| 56 target="_blank">Click here to install the environment.</a><p>You will need to cl
ick “Install” to add the NaCl Dev Environment | 56 target="_blank">Click here to install the environment.</a><p>You will need to cl
ick “Install” to add the NaCl Dev Environment |
| 57 to your browser.</p> | 57 to your browser.</p> |
| 58 <p>NOTE: This environment will leave a substantial (800MB) payload in your | 58 <p>NOTE: This environment will leave a substantial (800MB) payload in your |
| 59 browser. See the cleanup section below to learn how to recover this space.</p> | 59 browser. See the cleanup section below to learn how to recover this space.</p> |
| 60 <p>Once the installation is complete, run the app.</p> | 60 <p>Once the installation is complete, run the app.</p> |
| 61 <p>On the first run, it will download several packages. | 61 <p>On the first run, it will download several packages. |
| 62 Once download is complete you should see a bash prompt:</p> | 62 Once download is complete, you should see a bash prompt:</p> |
| 63 <pre class="prettyprint"> | 63 <pre class="prettyprint"> |
| 64 bash.nmf-4.3$ | 64 bash.nmf-4.3$ |
| 65 </pre> | 65 </pre> |
| 66 <h3 id="our-web-based-tools">Our Web-based Tools</h3> | 66 <h3 id="our-web-based-tools">Our Web-based Tools</h3> |
| 67 <p>These development tools are a <a class="reference external" href="nacldev">wo
rk in progress</a>. | 67 <p>These development tools are a <a class="reference external" href="nacldev">wo
rk in progress</a>. |
| 68 At this point, they are a learning tool and demonstration of NaCl’s | 68 At this point, they are a learning tool and demonstration of NaCl’s |
| 69 flexibility, but are not the recommended tools for a production application. | 69 flexibility, but are not the recommended tools for a production application. |
| 70 In the future, that may change, but for the moment, | 70 In the future, that may change, but for the moment, |
| 71 to develop a substantial application for Native Client / | 71 to develop a substantial application for Native Client / |
| 72 Portable Native Client, | 72 Portable Native Client, |
| 73 we recommend you use the | 73 we recommend you use the |
| 74 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> | 74 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> |
| 75 <b><font color="#880000"> | 75 <b><font color="#880000"> |
| 76 NOTE: The NaCl Development Environment is not yet stable. | 76 NOTE: The NaCl Development Environment is not yet stable. |
| 77 Ideally user data is preserved, but currently it can be lost during updates | 77 Ideally, user data is preserved, but currently it can be lost during updates |
| 78 or sporadically. We're working to resolve this. | 78 or sporadically. We're working to resolve this. |
| 79 </font></b><h3 id="navigating-in-the-dev-environment">Navigating in the Dev Envi
ronment</h3> | 79 </font></b><h3 id="navigating-in-the-dev-environment">Navigating in the Dev Envi
ronment</h3> |
| 80 <p>The NaCl Dev Environment behaves like a mini-UNIX system. | 80 <p>The NaCl Dev Environment behaves like a mini-UNIX system. |
| 81 You start-up in bash command prompt. | 81 You start-up in bash command prompt. |
| 82 Standard UNIX commands like cd, ls, mkdir, rm, rmdir, etc. | 82 Standard UNIX commands like cd, ls, mkdir, rm, rmdir, etc. |
| 83 can be used to navigate and modify the Dev Environment’s | 83 can be used to navigate and modify the Dev Environment’s |
| 84 virtual filesystem.</p> | 84 virtual filesystem.</p> |
| 85 <p>There are 3 locations mounted by the environment:</p> | 85 <p>There are 3 locations mounted by the environment:</p> |
| 86 <blockquote> | 86 <blockquote> |
| 87 <div><ul class="small-gap"> | 87 <div><ul class="small-gap"> |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 139 <pre class="prettyprint"> | 139 <pre class="prettyprint"> |
| 140 $ vim <filename> | 140 $ vim <filename> |
| 141 </pre> | 141 </pre> |
| 142 <p>Here’s an online <a class="reference external" href="http://www.openvim
.com/tutorial.html">vim tutorial</a>.</p> | 142 <p>Here’s an online <a class="reference external" href="http://www.openvim
.com/tutorial.html">vim tutorial</a>.</p> |
| 143 </li> | 143 </li> |
| 144 </ul> | 144 </ul> |
| 145 <h3 id="git-setup">Git Setup</h3> | 145 <h3 id="git-setup">Git Setup</h3> |
| 146 <p>This tutorial also uses a revision control program called | 146 <p>This tutorial also uses a revision control program called |
| 147 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)"
>git</a>. | 147 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)"
>git</a>. |
| 148 In order to commit to a git repository, | 148 In order to commit to a git repository, |
| 149 you need to setup your environment to with your identity.</p> | 149 you need to set up your identity.</p> |
| 150 <p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> | 150 <p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> |
| 151 for use:</p> | 151 for use:</p> |
| 152 <pre class="prettyprint"> | 152 <pre class="prettyprint"> |
| 153 git config --global user.name "John Doe" | 153 git config --global user.name "John Doe" |
| 154 git config --global user.email johndoe@example.com | 154 git config --global user.email johndoe@example.com |
| 155 </pre> | 155 </pre> |
| 156 <h2 id="get-the-code">Get the Code!</h2> | 156 <h2 id="get-the-code">Get the Code!</h2> |
| 157 <p>Rather than start from nothing, for this codelab we’ve provided | 157 <p>Rather than start from nothing, for this codelab we’ve provided |
| 158 you with a zip file containing a starting point.</p> | 158 you with a zip file containing a starting point.</p> |
| 159 <p>Download the codelab:</p> | 159 <p>Download the codelab:</p> |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 191 make fire | 191 make fire |
| 192 </pre> | 192 </pre> |
| 193 <p>You should now see a small popup window, smoldering away. | 193 <p>You should now see a small popup window, smoldering away. |
| 194 If you click, you can make more fire! | 194 If you click, you can make more fire! |
| 195 I think that’s pretty cool, but then I selected | 195 I think that’s pretty cool, but then I selected |
| 196 the institution of higher learning I attended based | 196 the institution of higher learning I attended based |
| 197 on the integral role fire played in its campus life.</p> | 197 on the integral role fire played in its campus life.</p> |
| 198 <h2 id="water">Water</h2> | 198 <h2 id="water">Water</h2> |
| 199 <p>Remarkably, not everyone enjoys the primal illusion of fire.</p> | 199 <p>Remarkably, not everyone enjoys the primal illusion of fire.</p> |
| 200 <p>Your task in this codelab is to transform the rising fire | 200 <p>Your task in this codelab is to transform the rising fire |
| 201 effect you see before you, into a beautiful, tranquil waterfall. | 201 effect you see before you into a beautiful, tranquil waterfall. |
| 202 This will require digging into some C++ code.</p> | 202 This will require digging into some C++ code.</p> |
| 203 <p>Before you begin, you’ll want to copy our fire program to a new name, | 203 <p>Before you begin, you’ll want to copy our fire program to a new name, |
| 204 since you might decide later that you like fire better, I know I do:</p> | 204 since you might decide later that you like fire better, I know I do:</p> |
| 205 <pre class="prettyprint"> | 205 <pre class="prettyprint"> |
| 206 cp fire.cc water.cc | 206 cp fire.cc water.cc |
| 207 git add water.cc | 207 git add water.cc |
| 208 git commit -am "adding water" | 208 git commit -am "adding water" |
| 209 </pre> | 209 </pre> |
| 210 <p>For this codelab, you’ll only need to change <cite>water.cc</cite>.</p> | 210 <p>For this codelab, you’ll only need to change <cite>water.cc</cite>.</p> |
| 211 <p>The task of turning fire into water involves two key challenges:</p> | 211 <p>The task of turning fire into water involves two key challenges:</p> |
| 212 <blockquote> | 212 <blockquote> |
| 213 <div><ul class="small-gap"> | 213 <div><ul class="small-gap"> |
| 214 <li>Alter the red-yellow palette of fire into a blue-green one.</li> | 214 <li>Alter the red-yellow palette of fire into a blue-green one.</li> |
| 215 <li>Reverse upward rising flame into downward falling water.</li> | 215 <li>Reverse upward rising flame into downward falling water.</li> |
| 216 <li>Seed the waterfall from the top instead of the bottom.</li> | 216 <li>Seed the waterfall from the top instead of the bottom.</li> |
| 217 </ul> | 217 </ul> |
| 218 </div></blockquote> | 218 </div></blockquote> |
| 219 <p>At this point you’ll want to open up <cite>water.cc</cite> in the edito
r you | 219 <p>At this point you’ll want to open up <cite>water.cc</cite> in the edito
r you |
| 220 picked earlier.</p> | 220 picked earlier.</p> |
| 221 <h3 id="i-see-a-red-door-and-i-want-it-painted-blue">I see a red door and I want
it painted... blue</h3> | 221 <h3 id="i-see-a-red-door-and-i-want-it-painted-blue">I see a red door and I want
it painted... blue</h3> |
| 222 <p>While PPAPI’s 2D graphics API uses multi-component RGB pixels, | 222 <p>While PPAPI’s 2D graphics API uses multi-component RGB pixels, |
| 223 our flame effect is actually monochrome. A single intensity | 223 our flame effect is actually monochrome. A single intensity |
| 224 value is used in the flame simulation. This is then converted | 224 value is used in the flame simulation. This is then converted |
| 225 to color based on a multi-color gradient. | 225 to color based on a multi-color gradient. |
| 226 To alter the color-scheme, locate this palette, and exchange | 226 To alter the color-scheme, locate this palette, and exchange |
| 227 the red component (first) with blue (third).</p> | 227 the red component (first) with the blue one (third).</p> |
| 228 <p>Hint: Focus your energies on the CreatePalette function.</p> | 228 <p>Hint: Focus your energies on the CreatePalette function.</p> |
| 229 <p>You can test you changes at any time with:</p> | 229 <p>You can test you changes at any time with:</p> |
| 230 <pre class="prettyprint"> | 230 <pre class="prettyprint"> |
| 231 make water | 231 make water |
| 232 </pre> | 232 </pre> |
| 233 <h3 id="what-goes-up">What goes up...</h3> | 233 <h3 id="what-goes-up">What goes up...</h3> |
| 234 <p>Now there’s the small matter of gravity. | 234 <p>Now there’s the small matter of gravity. |
| 235 While smoke, and well flame, rises, we want our water to go down.</p> | 235 While smoke, and well flame, rises, we want our water to go down.</p> |
| 236 <p>The simulation of fire loops over each pixel, | 236 <p>The simulation of fire loops over each pixel, |
| 237 bottom row to top row, | 237 bottom row to top row, |
| (...skipping 10 matching lines...) Expand all Loading... |
| 248 And while dusting off your C/C++ image manipulation skills, | 248 And while dusting off your C/C++ image manipulation skills, |
| 249 you’ve discovered how easy it is to modify, build, | 249 you’ve discovered how easy it is to modify, build, |
| 250 and run a NaCl application that uses PPAPI.</p> | 250 and run a NaCl application that uses PPAPI.</p> |
| 251 <p>2D graphics is fun, but now you’re ready to check out the wealth of | 251 <p>2D graphics is fun, but now you’re ready to check out the wealth of |
| 252 other | 252 other |
| 253 <a class="reference external" href="http://src.chromium.org/viewvc/chrome/trunk/
src/ppapi/cpp/">PPAPI interfaces available</a>.</p> | 253 <a class="reference external" href="http://src.chromium.org/viewvc/chrome/trunk/
src/ppapi/cpp/">PPAPI interfaces available</a>.</p> |
| 254 <p>While our in-browser environment is rapidly evolving | 254 <p>While our in-browser environment is rapidly evolving |
| 255 to become a complete development solution, | 255 to become a complete development solution, |
| 256 for the broadest range of development options, check out the | 256 for the broadest range of development options, check out the |
| 257 <a class="reference external" href="https://developer.chrome.com/native-client/c
pp-api">NaCl SDK</a>.</p> | 257 <a class="reference external" href="https://developer.chrome.com/native-client/c
pp-api">NaCl SDK</a>.</p> |
| 258 <p>For questions, concerns, and help contact us at | 258 <p>For questions, concerns, or help contact us at |
| 259 <a class="reference external" href="https://groups.google.com/forum/#!forum/nati
ve-client-discuss">native-client-discuss@googlegroups.com</a>.</p> | 259 <a class="reference external" href="https://groups.google.com/forum/#!forum/nati
ve-client-discuss">native-client-discuss@googlegroups.com</a>.</p> |
| 260 <p>I hope this codelab has lit a fire in you to go out there, | 260 <p>I hope this codelab has lit a fire in you to go out there, |
| 261 and bring an awesome C/C++ application to NaCl or PNaCl today!</p> | 261 and bring an awesome C/C++ application to NaCl or PNaCl today!</p> |
| 262 <h2 id="cleanup">Cleanup</h2> | 262 <h2 id="cleanup">Cleanup</h2> |
| 263 <p>The Chrome Dev Environment App installs >800MB into | 263 <p>The Chrome Dev Environment App installs >800MB into |
| 264 HTML5 Filesystem storage on your device. | 264 HTML5 Filesystem storage on your device. |
| 265 To recover this storage, uninstall the app from the | 265 To recover this storage, uninstall the app from the |
| 266 <a href="https://chrome.google.com/webstore" | 266 <a href="https://chrome.google.com/webstore" |
| 267 target="_blank">Chrome Web Store</a>.</p> | 267 target="_blank">Chrome Web Store</a>.</p> |
| 268 </section> | 268 </section> |
| 269 | 269 |
| 270 {{/partials.standard_nacl_article}} | 270 {{/partials.standard_nacl_article}} |
| OLD | NEW |