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 |