title: Editing pixel data in JavaScript/HTML5 video (Processing to JS translating)
body: <p>I'm attempting to recreate this effect I made for a webcam Processing sketch in JavaScript in order to implement it o n an HTML5 video/canvas tag setup. I'm quite new to all of this and I was just running into some issues to find what functions and such are necessary to perform similar actions (such as pixel reading and adjusting)</p>
  
  <p>Oh and in the web based version I'm building I am using a preloaded video to perform the effect on, not webcam, but that is all set up.</p>
  
  <p>Any help would be super appreciated!!! Thanks!!</p>
  
  <pre><code>import processing.video.*;
      Capture video;
  
      PImage lastImage;
      float threshold = 50;
  
      float rAdd = random(55);
      float gAdd = random(55);
      float bAdd = random(55);
      float colorAdd;
  
      void setup() {
        colorMode(HSB);
        size(640, 512);
        smooth();
        video = new Capture(this, width, height, 30);
        video.start();
        lastImage = createImage(video.width, video.height, RGB);
      }
  
      void draw() {
  
        lastImage.copy(video, 0, 0, video.width, video.height, 0, 0, video.width, video.height);
        lastImage.updatePixels();
        video.read();
  
        loadPixels();
        video.loadPixels();
        lastImage.loadPixels();
  
  
        for (int x = 0; x &lt; video.width; x++) {
          for (int y = 0; y &lt; video.height; y++) {
            int loc = x + y*width;
            color current = video.pixels[loc];
            color previous = lastImage.pixels[loc];
            float r1 = red(current);
            float g1 = green(current);
            float b1 = blue(current);
            float r2 = red(previous);
            float g2 = green(previous);
            float b2 = blue(previous);
            float difference = dist(r1, g1, b1, r2, g2, b2);
            if (difference &gt; threshold) {
            //  pixels[loc] += 400;
              colorAdd = random(100,400);
              pixels[loc] = color(r2+rAdd, g2+gAdd, b2+bAdd);
            } 
            else {
             pixels[loc] -= 5;
            }
          }
        }
        updatePixels();
      }
  </code></pre>