| 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 186 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 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 |
| 208 git commit -am "adding water" |
| 207 </pre> | 209 </pre> |
| 208 <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> |
| 209 <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> |
| 210 <blockquote> | 212 <blockquote> |
| 211 <div><ul class="small-gap"> | 213 <div><ul class="small-gap"> |
| 212 <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> |
| 213 <li>Reverse upward rising flame into downward falling water.</li> | 215 <li>Reverse upward rising flame into downward falling water.</li> |
| 214 <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> |
| 215 </ul> | 217 </ul> |
| 216 </div></blockquote> | 218 </div></blockquote> |
| 217 <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 |
| 218 picked earlier.</p> | 220 picked earlier.</p> |
| 219 <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> |
| 220 <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, |
| 221 our flame effect is actually monochrome. A single intensity | 223 our flame effect is actually monochrome. A single intensity |
| 222 value is used in the flame simulation. This is then converted | 224 value is used in the flame simulation. This is then converted |
| 223 to color based on a multi-color gradient. | 225 to color based on a multi-color gradient. |
| 224 To alter the color-scheme, locate this palette, and exchange | 226 To alter the color-scheme, locate this palette, and exchange |
| 225 the red component for blue.</p> | 227 the red component (first) with blue (third).</p> |
| 226 <p>Hint: Focus your energies on the CreatePalette function.</p> | 228 <p>Hint: Focus your energies on the CreatePalette function.</p> |
| 227 <p>You can test you changes at any time with:</p> | 229 <p>You can test you changes at any time with:</p> |
| 228 <pre class="prettyprint"> | 230 <pre class="prettyprint"> |
| 229 make water | 231 make water |
| 230 </pre> | 232 </pre> |
| 231 <h3 id="what-goes-up">What goes up...</h3> | 233 <h3 id="what-goes-up">What goes up...</h3> |
| 232 <p>Now there’s the small matter of gravity. | 234 <p>Now there’s the small matter of gravity. |
| 233 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> |
| 234 <p>The simulation of fire loops over each pixel, | 236 <p>The simulation of fire loops over each pixel, |
| 235 bottom row to top row, | 237 bottom row to top row, |
| 236 diffusing “fire stuff” behind the sweep. | 238 diffusing “fire stuff” behind the sweep. |
| 237 You’ll want to reverse this. | 239 You’ll want to reverse this.</p> |
| 238 Note the simulation buffer is stored in <a href="http://en.wikipedia.org/wiki/Ro
w-major_order" | |
| 239 target="_blank">Row-major order</a> from bottom to top. | |
| 240 Accesses of + width and - width are used to reach rows above and below | |
| 241 the current line.</p> | |
| 242 <p>Hint: You’ll need to change the y loop direction in the UpdateFlames fu
nction.</p> | 240 <p>Hint: You’ll need to change the y loop direction in the UpdateFlames fu
nction.</p> |
| 243 <h3 id="up-high-down-low">Up high, down low</h3> | 241 <h3 id="up-high-down-low">Up high, down low</h3> |
| 244 <p>While you can now use the mouse to inject a trickle of water. | 242 <p>While you can now use the mouse to inject a trickle of water. |
| 245 The small line of blue at the bottom isn’t much of a waterfall. | 243 The small line of blue at the bottom isn’t much of a waterfall. |
| 246 Move it to the top to complete the effect.</p> | 244 Move it to the top to complete the effect.</p> |
| 247 <p>Hint: You’ll want to change the area that the UpdateCoals function muta
tes.</p> | 245 <p>Hint: You’ll want to change the area that the UpdateCoals function muta
tes.</p> |
| 248 <h2 id="what-you-ve-learned">What you’ve learned</h2> | 246 <h2 id="what-you-ve-learned">What you’ve learned</h2> |
| 249 <p>In addition to learning a new appreciation for fire, you’ve also made w
ater... | 247 <p>In addition to learning a new appreciation for fire, you’ve also made w
ater... |
| 250 And while dusting off your C/C++ image manipulation skills, | 248 And while dusting off your C/C++ image manipulation skills, |
| 251 you’ve discovered how easy it is to modify, build, | 249 you’ve discovered how easy it is to modify, build, |
| (...skipping 11 matching lines...) Expand all Loading... |
| 263 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> |
| 264 <h2 id="cleanup">Cleanup</h2> | 262 <h2 id="cleanup">Cleanup</h2> |
| 265 <p>The Chrome Dev Environment App installs >800MB into | 263 <p>The Chrome Dev Environment App installs >800MB into |
| 266 HTML5 Filesystem storage on your device. | 264 HTML5 Filesystem storage on your device. |
| 267 To recover this storage, uninstall the app from the | 265 To recover this storage, uninstall the app from the |
| 268 <a href="https://chrome.google.com/webstore" | 266 <a href="https://chrome.google.com/webstore" |
| 269 target="_blank">Chrome Web Store</a>.</p> | 267 target="_blank">Chrome Web Store</a>.</p> |
| 270 </section> | 268 </section> |
| 271 | 269 |
| 272 {{/partials.standard_nacl_article}} | 270 {{/partials.standard_nacl_article}} |
| OLD | NEW |