title: loadPixels() not working with p5.js
body: <p>I want to edit the pixels of an image (or just the canvas) using p5.js, and it is show on their website in the documentation:</p>
  
  <pre><code>var img;
  function preload() {
    img = loadImage("assets/rockies.jpg");
  }
  
  function setup() {
    image(img, 0, 0);
    var d = pixelDensity();
    var halfImage = 4 * (img.width * d) *
        (img.height/2 * d);
    loadPixels();
    for (var i = 0; i &lt; halfImage; i++) {
      pixels[i+halfImage] = pixels[i];
    }
    updatePixels();
  }
  </code></pre>
  
  <p>So I tried that code exactly in codepen with the p5.js linked correctly, and it didn't work (with my own image of course).</p>
  
  <p>The I made a version in the Processing IDE itself and it worked, so I tried to convert it to JS and I don't understand why it's not working?</p>
  
  <pre><code>var img;
  
  function setup() {
    createCanvas(500, 400);
    img = loadImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/379903/image.png");  // Load the image
  
  }
  
  function draw() {
    background(255);
  
    image(img, 0, 0, 500, 400);
  
  
  
    loadPixels();
  
    for (var i = 0; i &lt; pixels.length; i++) {
          pixels[i] = color(255, i, 0);
    }
  
    updatePixels();
  }
  </code></pre>
  
  <p>I just want to be able to edit the pixels of the canvas, but it won't let me.</p>
  
  <p><a href="http://codepen.io/samirc/pen/grvVXv/" rel="nofollow">Here</a> is the codepen I'm using.</p>
  
  <p>The image loads fine, but I can't edit the pixels?</p>
  
  <p>I was following Daniel Shiffman's <a href="https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YB9x6f23CBftiyx0u_5sO9" rel="nofollow">tutorials</a> on Youtube.</p>
  
  <p>Any help is appreciated, thank you.</p>