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 |