native_client_sdk/src/doc/cds2014/cpp.rst

   1 .. _cds2014_cpp:
   2
   3 ##################################
   4 A Saga of Fire and Water - Codelab
   5 ##################################
   6
   7 Introduction
   8 ------------
   9
  10 .. include:: cpp_summary.inc
  11
  12 .. include:: ../nacldev/setup_app.inc
  13
  14 Get the Code!
  15 -------------
  16
  17 Rather than start from nothing, for this codelab we've provided
  18 you with a zip file containing a starting point.
  19
  20 Download the codelab::
  21
  22   curl http://nacltools.storage.googleapis.com/cds2014/cds2014_cpp.zip -O
  23
  24 Unzip it::
  25
  26   unzip cds2014_cpp.zip
  27
  28 Go into the codelab directory::
  29
  30   cd cds2014_cpp
  31
  32 Create a new local git repo::
  33
  34   git init
  35
  36 Add everything::
  37
  38   git add .
  39
  40 Commit it::
  41
  42   git commit -am "initial"
  43
  44 While working, you can see what you've changed by running::
  45
  46   git diff
  47
  48
  49 Fire is cool, let's burn some stuff...
  50 --------------------------------------
  51
  52 Indulging your inner child, lets make some virtual fire!
  53 Use the following shockingly intuitive incantation::
  54
  55   make fire
  56
  57 You should now see a small popup window, smoldering away.
  58 If you click, you can make more fire!
  59 I think that's pretty cool, but then I selected
  60 the institution of higher learning I attended based
  61 on the integral role fire played in its campus life.
  62
  63 Water
  64 -----
  65
  66 Remarkably, not everyone enjoys the primal illusion of fire.
  67
  68 Your task in this codelab is to transform the rising fire
  69 effect you see before you into a beautiful, tranquil waterfall.
  70 This will require digging into some C++ code.
  71
  72 Before you begin, you'll want to copy our fire program to a new name,
  73 since you might decide later that you like fire better, I know I do::
  74
  75   cp fire.cc water.cc
  76   git add water.cc
  77   git commit -am "adding water"
  78
  79 For this codelab, you'll only need to change `water.cc`.
  80
  81 The task of turning fire into water involves two key challenges:
  82
  83   * Alter the red-yellow palette of fire into a blue-green one.
  84   * Reverse upward rising flame into downward falling water.
  85   * Seed the waterfall from the top instead of the bottom.
  86
  87 At this point you'll want to open up `water.cc` in the editor you
  88 picked earlier.
  89
  90 I see a red door and I want it painted... blue
  91 ==============================================
  92
  93 While PPAPI's 2D graphics API uses multi-component RGB pixels,
  94 our flame effect is actually monochrome. A single intensity
  95 value is used in the flame simulation. This is then converted
  96 to color based on a multi-color gradient.
  97 To alter the color-scheme, locate this palette, and exchange
  98 the red component (first) with the blue one (third).
  99
 100 Hint: Focus your energies on the CreatePalette function.
 101
 102 You can test you changes at any time with::
 103
 104   make water
 105
 106 What goes up...
 107 ===============
 108
 109 Now there's the small matter of gravity.
 110 While smoke, and well flame, rises, we want our water to go down.
 111
 112 The simulation of fire loops over each pixel,
 113 bottom row to top row,
 114 diffusing "fire stuff" behind the sweep.
 115 You'll want to reverse this.
 116
 117 Hint: You'll need to change the y loop direction in the UpdateFlames function.
 118
 119 Up high, down low
 120 =================
 121
 122 While you can now use the mouse to inject a trickle of water.
 123 The small line of blue at the bottom isn't much of a waterfall.
 124 Move it to the top to complete the effect.
 125
 126 Hint: You'll want to change the area that the UpdateCoals function mutates.
 127
 128
 129 What you've learned
 130 -------------------
 131
 132 In addition to learning a new appreciation for fire, you've also made water...
 133 And while dusting off your C/C++ image manipulation skills,
 134 you've discovered how easy it is to modify, build,
 135 and run a NaCl application that uses PPAPI.
 136
 137 2D graphics is fun, but now you're ready to check out the wealth of
 138 other
 139 `PPAPI interfaces available
 140 <https://src.chromium.org/viewvc/chrome/trunk/src/ppapi/cpp/>`_.
 141
 142 While our in-browser environment is rapidly evolving
 143 to become a complete development solution,
 144 for the broadest range of development options, check out the
 145 `NaCl SDK
 146 <https://developer.chrome.com/native-client/cpp-api>`_.
 147
 148 Send us comments and feedback on the `native-client-discuss
 149 <https://groups.google.com/forum/#!forum/native-client-discuss>`_ mailing list,
 150 or ask questions using Stack Overflow's `google-nativeclient
 151 <https://stackoverflow.com/questions/tagged/google-nativeclient>`_ tag.
 152
 153
 154 I hope this codelab has lit a fire in you to go out there,
 155 and bring an awesome C/C++ application to NaCl or PNaCl today!
 156
 157
 158 .. include:: ../nacldev/cleanup_app.inc