title: How can I use a Shader in XNA to color single pixels?
body: <p>I have a standard 800x600 window in my XNA project.  My goal is to color each individual pixel based on a rectangle array which holds boolean values.  Currently I am using a 1x1 Texture and drawing each sprite in my array.</p>
  
  <p>I am very new to XNA and come from a GDI background, so I am doing what I would have done in GDI, but it doesn't scale very well.  I have been told in another question to use a Shader, but after much research, I still haven't been able to find out how to accomplish this goal.</p>
  
  <p>My application loops through the X and Y coordinates of my rectangular array, does calculations based on each value, and reassigns/moves the array around.  At the end, I need to update my "Canvas" with the new values.  A smaller sample of my array would look like:</p>
  
  <pre><code>0,0,0,0,0,0,0
  0,0,0,0,0,0,0
  0,0,0,0,0,0,0
  1,1,1,1,1,1,1
  1,1,1,1,1,1,1
  </code></pre>
  
  <p>How can I use a shader to color each pixel?</p>
  
  <p>A very simplified version of the calculations would be:</p>
  
  <pre><code>        for (int y = _horizon; y &gt;= 0; y--)  // _horizon is my ending point
          {
              for (int x = _width; x &gt;= 0; x--) // _width is obviously my x length.
              {
                  if (grains[x, y] &gt; 0)
                  {
                      if (grains[x, y + 1] == 0)
                      {
                          grains[x, y + 1] = grains[x, y];
                          grains[x, y] = 0;
                      }
                  }
              }
          }
  </code></pre>
  
  <p>..each time the update method is called, the calculations are performed and in example of the above loop, an update may look like:</p>
  
  <p>Initial:</p>
  
  <pre><code>0,0,0,1,0,0,0
  0,0,0,0,0,0,0
  0,0,0,0,0,0,0
  1,1,1,0,1,1,1
  1,1,1,1,1,1,1
  </code></pre>
  
  <p>First:</p>
  
  <pre><code>0,0,0,0,0,0,0
  0,0,0,1,0,0,0
  0,0,0,0,0,0,0
  1,1,1,0,1,1,1
  1,1,1,1,1,1,1
  </code></pre>
  
  <p>Second:</p>
  
  <pre><code>0,0,0,0,0,0,0
  0,0,0,0,0,0,0
  0,0,0,1,0,0,0
  1,1,1,0,1,1,1
  1,1,1,1,1,1,1
  </code></pre>
  
  <p>Final:</p>
  
  <pre><code>0,0,0,0,0,0,0
  0,0,0,0,0,0,0
  0,0,0,0,0,0,0
  1,1,1,1,1,1,1
  1,1,1,1,1,1,1
  </code></pre>
  
  <p>Update:</p>
  
  <p>After applying the Render2DTarget code and placing my pixels, I end up with an unwanted border on my pixels, always to the left.  How can I remove this?</p>
  
  <p><a href="http://www.refuctored.com/borders.png" rel="nofollow noreferrer">alt text http://www.refuctored.com/borders.png</a></p>
  
  <p><a href="http://www.refuctored.com/fallingdirt.png" rel="nofollow noreferrer">alt text http://www.refuctored.com/fallingdirt.png</a></p>
  
  <p>The some of the code for applying the textures is:</p>
  
  <pre><code>    RenderTarget2D target;
      Texture2D texture;
      protected override void LoadContent()
      {
          spriteBatch = new SpriteBatch(GraphicsDevice);
          texture = Content.Load&lt;Texture2D&gt;("grain");
          _width = this.Window.ClientBounds.Width - 1;
          _height = this.Window.ClientBounds.Height - 1;
          target = new RenderTarget2D(this.GraphicsDevice,_width, _height, 1, SurfaceFormat.Color,RenderTargetUsage.PreserveContents);
       }
  
   protected override void Draw(GameTime gameTime)
      {
          this.GraphicsDevice.SetRenderTarget(0, target);
          this.GraphicsDevice.SetRenderTarget(0, null);
          this.GraphicsDevice.Clear(Color.SkyBlue);
          this.spriteBatch.Begin(SpriteBlendMode.None,SpriteSortMode.Deferred,SaveStateMode.None);
          SetPixels(texture);
          this.spriteBatch.End();
      }
  
   private void SetPixels(Texture2D texture)
      {
          for (int y = _grains.Height -1; y &gt; 0; y--)
          {
              for (int x = _grains.Width-1; x &gt; 0; x--)
              {
                  if (_grains.GetGrain(x, y) &gt;0)
                  {
                      this.spriteBatch.Draw(texture, new Vector2(x,y),null, _grains.GetGrainColor(x, y));
                  }
              }
          }
      }
  </code></pre>