10.4: Pixels! (The Pixels Array) – Processing Tutorial



This video covers the basics of reading from and writing to the pixels array in Processing / Java. This is foundation for all image processing and computer vision applications and examples I’ll show in the rest of image and video in Processing (Java) videos.

Video for Chapter: 15 of
Learning Processing A Beginner’s Guide to Programming, Images,Animation, and Interaction

Twitter:

Help us caption & translate this…

, , , ,

21 thoughts on “10.4: Pixels! (The Pixels Array) – Processing Tutorial

  1. Please don't be hard on yourself. your videos (and books) are my favorites. It took me way to long to realize you wrote my favorite book, "The nature of code". Is it strange that I want your autograph. Keep it up.

  2. I have an image and what to get pixel values of dat image . And store in 2d array can I use below code in Java
    Buffered image img = new buffered image;
    int a [][] = img.get pixel("img.jpg");
    Plss help me…

  3. i think instead of writing the calculation of finding the pixel index for a particular x,y . making a function that returns that value is better … especially when you need these calculations many time
    a function that would be like :
    int locPix (float x,float y){
    int pixelIndex = int(x + width*y);
    return pixelIndex;
    }

  4. //Colors Magic
    void setup() {
    size(456, 456);

    }
    void draw() {
    loadPixels();
    for(int x = 0;x < width;x++){
    for(int y = 0; y < height; y++) {
    int d = int(dist(x,y,width/2,height/2));
    int d2 = int(dist(x,y,mouseX,mouseY));
    int d3 = int(dist(x,d2,y,d));
    int d4 = int(dist(x,d3,d2,d));
    int d5 = int(dist(d4,d3,d2,d));
    pixels[x+y*width]=color(d3,d4,d5,d2);

    }
    }
    updatePixels();

    }

  5. If you are only getting a small black box with

    loadPixels();
    for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
    float d = dist(x,y,width/2,height/2);
    pixels[x+y*width] = color (d);
    }
    }
    updatePixels();

    just place
    size(600,400);
    background(0);
    before everything else. Cheers

  6. I can't tell if this is obvious or not, but I discovered if you only know the index number of the pixel, you can get its X position with index modulus width, and its Y position with index divided by width.

  7. I'm only using this video as a refrence for a short project in my class, but your teaching style and the way you cover the material is fantastic! I wish every teacher and youtube tutorial could be as clear and descriptive as this. Keep it up!

  8. Hello sir i am working on a project based on image processing in which i store image pixels in 2D array and retrieve the image pixels with the help of the index value .please help me sir

  9. your mic sounds like it's storming.
    And actually real question is not How do i draw a line? the algorithms do that.
    The question is how can i recognize that an image HAS a line. Or: what pixel colors are on a given line in an image.

    12:00 what you really want is to know Hey I've this array, but I see corners in my display window; where are those corners, i.e. what pixel index is a corner?

    17:00 you complicate stuff needlessly, better to do for y then for x.

    and what language do u use?

Leave a Reply

Your email address will not be published. Required fields are marked *