Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(93)

Side by Side Diff: native_client_sdk/doc_generated/cds2014/cpp.html

Issue 731323003: Revising cds2014 samples based on first round of feedback. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: add html Created 6 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | native_client_sdk/doc_generated/cds2014/python.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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&#8217;ll want to copy our fire program to a new name, 203 <p>Before you begin, you&#8217;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 &quot;adding water&quot;
207 </pre> 209 </pre>
208 <p>For this codelab, you&#8217;ll only need to change <cite>water.cc</cite>.</p> 210 <p>For this codelab, you&#8217;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&#8217;ll want to open up <cite>water.cc</cite> in the edito r you 219 <p>At this point you&#8217;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&#8217;s 2D graphics API uses multi-component RGB pixels, 222 <p>While PPAPI&#8217;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&#8217;s the small matter of gravity. 234 <p>Now there&#8217;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 &#8220;fire stuff&#8221; behind the sweep. 238 diffusing &#8220;fire stuff&#8221; behind the sweep.
237 You&#8217;ll want to reverse this. 239 You&#8217;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&#8217;ll need to change the y loop direction in the UpdateFlames fu nction.</p> 240 <p>Hint: You&#8217;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&#8217;t much of a waterfall. 243 The small line of blue at the bottom isn&#8217;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&#8217;ll want to change the area that the UpdateCoals function muta tes.</p> 245 <p>Hint: You&#8217;ll want to change the area that the UpdateCoals function muta tes.</p>
248 <h2 id="what-you-ve-learned">What you&#8217;ve learned</h2> 246 <h2 id="what-you-ve-learned">What you&#8217;ve learned</h2>
249 <p>In addition to learning a new appreciation for fire, you&#8217;ve also made w ater... 247 <p>In addition to learning a new appreciation for fire, you&#8217;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&#8217;ve discovered how easy it is to modify, build, 249 you&#8217;ve discovered how easy it is to modify, build,
(...skipping 11 matching lines...) Expand all
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 &gt;800MB into 263 <p>The Chrome Dev Environment App installs &gt;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}}
OLDNEW
« no previous file with comments | « no previous file | native_client_sdk/doc_generated/cds2014/python.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698