# Pixel sorting an image with mouseMoved()

**URL:** <https://discourse.processing.org/t/pixel-sorting-an-image-with-mousemoved/36159>\
**Category:** Coding Questions\
**Created:** [April 6, 2022, 10:17am UTC](https://discourse.processing.org/t/pixel-sorting-an-image-with-mousemoved/36159 "2022-04-06T10:17:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![240garage](https://avatars.discourse-cdn.com/v4/letter/2/8edcca/32.png) [@240garage](https://discourse.processing.org/u/240garage)\
**Post date:** [April 6, 2022, 10:17am UTC](https://discourse.processing.org/t/pixel-sorting-an-image-with-mousemoved/36159/1 "2022-04-06T10:17:31Z")

</div>

I am new to Processing and I found this code on the internet to pixel sort images. Now what I want to do is change the _int brightnessValue_ when I move my mouse across the screen. The value needs to go from 240 to 0. How do I do this? I tried a couple things but they don’t seem to work.

```auto
int mode = 1;

// image path is relative to sketch directory
PImage img;
String imgFileName = "afbeeldingen/1";
String fileType = "jpg";

int loops = 1;

// threshold values to determine sorting start and end pixels
int blackValue = -16000000;
int brightnessValue = 240;
int whiteValue = -13000000;

int row = 0;
int column = 0;

boolean saved = false;

void setup() {
  img = loadImage(imgFileName+"."+fileType);
  
  // use only numbers (not variables) for the size() command, Processing 3
  size(1, 1);
  
  // allow resize and update surface to image dimensions
  surface.setResizable(true);
  surface.setSize(img.width, img.height);
  
  // load image onto surface - scale to the available width,height for display
  image(img, 0, 0, width, height);
}

void draw() {
  
  // loop through columns
  while(column < img.width-1) {
    println("Sorting Column " + column);
    img.loadPixels(); 
    sortColumn();
    column++;
    img.updatePixels();
  }
  
  // loop through rows
  while(row < img.height-1) {
    println("Sorting Row " + column);
    img.loadPixels(); 
    sortRow();
    row++;
    img.updatePixels();
  }
  
  // load updated image onto surface and scale to fit the display width,height
  image(img, 0, 0, width, height);
  
  if(!saved && frameCount >= loops) {
    
  // save img
    img.save(imgFileName+"_"+mode+".png");
  
    saved = true;
    println("Saved "+frameCount+" Frame(s)");
    
    // exiting here can interrupt file save, wait for user to trigger exit
    println("Click or press any key to exit...");
  }
}

void keyPressed() {
  if(saved)
  {
    System.exit(0);
  }
}

void mouseClicked() {
  if(saved)
  {
    System.exit(0);
  }
} 

void sortRow() {
  // current row
  int y = row;
  
  // where to start sorting
  int x = 0;
  
  // where to stop sorting
  int xend = 0;
  
  while(xend < img.width-1) {
    switch(mode) {
      case 0:
        x = getFirstNotBlackX(x, y);
        xend = getNextBlackX(x, y);
        break;
      case 1:
        x = getFirstBrightX(x, y);
        xend = getNextDarkX(x, y);
        break;
      case 2:
        x = getFirstNotWhiteX(x, y);
        xend = getNextWhiteX(x, y);
        break;
      default:
        break;
    }
    
    if(x < 0) break;
    
    int sortLength = xend-x;
    
    color[] unsorted = new color[sortLength];
    color[] sorted = new color[sortLength];
    
    for(int i=0; i<sortLength; i++) {
      unsorted[i] = img.pixels[x + i + y * img.width];
    }
    
    sorted = sort(unsorted);
    
    for(int i=0; i<sortLength; i++) {
      img.pixels[x + i + y * img.width] = sorted[i];      
    }
    
    x = xend+1;
  }
}

void sortColumn() {
  // current column
  int x = column;
  
  // where to start sorting
  int y = 0;
  
  // where to stop sorting
  int yend = 0;
  
  while(yend < img.height-1) {
    switch(mode) {
      case 0:
        y = getFirstNotBlackY(x, y);
        yend = getNextBlackY(x, y);
        break;
      case 1:
        y = getFirstBrightY(x, y);
        yend = getNextDarkY(x, y);
        break;
      case 2:
        y = getFirstNotWhiteY(x, y);
        yend = getNextWhiteY(x, y);
        break;
      default:
        break;
    }
    
    if(y < 0) break;
    
    int sortLength = yend-y;
    
    color[] unsorted = new color[sortLength];
    color[] sorted = new color[sortLength];
    
    for(int i=0; i<sortLength; i++) {
      unsorted[i] = img.pixels[x + (y+i) * img.width];
    }
    
    sorted = sort(unsorted);
    
    for(int i=0; i<sortLength; i++) {
      img.pixels[x + (y+i) * img.width] = sorted[i];
    }
    
    y = yend+1;
  }
}

// black x
int getFirstNotBlackX(int x, int y) {
  
  while(img.pixels[x + y * img.width] < blackValue) {
    x++;
    if(x >= img.width) 
      return -1;
  }
  
  return x;
}

int getNextBlackX(int x, int y) {
  x++;
  
  while(img.pixels[x + y * img.width] > blackValue) {
    x++;
    if(x >= img.width) 
      return img.width-1;
  }
  
  return x-1;
}

// brightness x
int getFirstBrightX(int x, int y) {
  
  while(brightness(img.pixels[x + y * img.width]) < brightnessValue) {
    x++;
    if(x >= img.width)
      return -1;
  }
  
  return x;
}

int getNextDarkX(int _x, int _y) {
  int x = _x+1;
  int y = _y;
  
  while(brightness(img.pixels[x + y * img.width]) > brightnessValue) {
    x++;
    if(x >= img.width) return img.width-1;
  }
  return x-1;
}

// white x
int getFirstNotWhiteX(int x, int y) {

  while(img.pixels[x + y * img.width] > whiteValue) {
    x++;
    if(x >= img.width) 
      return -1;
  }
  return x;
}

int getNextWhiteX(int x, int y) {
  x++;

  while(img.pixels[x + y * img.width] < whiteValue) {
    x++;
    if(x >= img.width) 
      return img.width-1;
  }
  return x-1;
}

// black y
int getFirstNotBlackY(int x, int y) {

  if(y < img.height) {
    while(img.pixels[x + y * img.width] < blackValue) {
      y++;
      if(y >= img.height)
        return -1;
    }
  }
  
  return y;
}

int getNextBlackY(int x, int y) {
  y++;

  if(y < img.height) {
    while(img.pixels[x + y * img.width] > blackValue) {
      y++;
      if(y >= img.height)
        return img.height-1;
    }
  }
  
  return y-1;
}

// brightness y
int getFirstBrightY(int x, int y) {

  if(y < img.height) {
    while(brightness(img.pixels[x + y * img.width]) < brightnessValue) {
      y++;
      if(y >= img.height)
        return -1;
    }
  }
  
  return y;
}

int getNextDarkY(int x, int y) {
  y++;

  if(y < img.height) {
    while(brightness(img.pixels[x + y * img.width]) > brightnessValue) {
      y++;
      if(y >= img.height)
        return img.height-1;
    }
  }
  return y-1;
}

// white y
int getFirstNotWhiteY(int x, int y) {

  if(y < img.height) {
    while(img.pixels[x + y * img.width] > whiteValue) {
      y++;
      if(y >= img.height)
        return -1;
    }
  }
  
  return y;
}

int getNextWhiteY(int x, int y) {
  y++;
  
  if(y < img.height) {
    while(img.pixels[x + y * img.width] < whiteValue) {
      y++;
      if(y >= img.height) 
        return img.height-1;
    }
  }
  
  return y-1;
}

```

---

<div class="post-metadata">

**Author:** ![240garage](https://avatars.discourse-cdn.com/v4/letter/2/8edcca/32.png) [@240garage](https://discourse.processing.org/u/240garage)\
**Post date:** [April 7, 2022, 4:08pm UTC](https://discourse.processing.org/t/pixel-sorting-an-image-with-mousemoved/36159/2 "2022-04-07T16:08:18Z")

</div>

Can someone help me please?

---

<div class="post-metadata">

**Author:** ![NumericPrime](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/numericprime/32/16318_2.png) [@NumericPrime](https://discourse.processing.org/u/NumericPrime)\
**Post date:** [April 8, 2022, 6:17pm UTC](https://discourse.processing.org/t/pixel-sorting-an-image-with-mousemoved/36159/3 "2022-04-08T18:17:32Z")

</div>

I don’t know if thats what you’re looking for but there is a mouseDragged method.

```auto
void mouseDragged(){
//Code here will be executed whenever the mouse is Dragged
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 8, 2022, 6:49pm UTC](https://discourse.processing.org/t/pixel-sorting-an-image-with-mousemoved/36159/4 "2022-04-08T18:49:40Z")

</div>

Hi

Idea a bout filters

[https://funprogramming.org/88-Change-pixels-using-the-pixels-array.html](https://funprogramming.org/88-Change-pixels-using-the-pixels-array.html)

[https://funprogramming.org/90-Change-pixel-hue-saturation-and-brightness.html](https://funprogramming.org/90-Change-pixel-hue-saturation-and-brightness.html)

[https://funprogramming.org/89-Create-your-own-photo-filters.html](https://funprogramming.org/89-Create-your-own-photo-filters.html)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 8, 2022, 6:55pm UTC](https://discourse.processing.org/t/pixel-sorting-an-image-with-mousemoved/36159/5 "2022-04-08T18:55:32Z")

</div>

[https://funprogramming.org/127-Fun-with-filters-part-I.html](https://funprogramming.org/127-Fun-with-filters-part-I.html)

[https://funprogramming.org/128-Fun-with-filters-part-II-animated-blobs.html](https://funprogramming.org/128-Fun-with-filters-part-II-animated-blobs.html)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 13, 2022, 11:12pm UTC](https://discourse.processing.org/t/pixel-sorting-an-image-with-mousemoved/36159/6 "2022-04-13T23:12:21Z")

</div>

> [@240garage](#):
>
> Hello @240garage,
> 
> Now what I want to do is change the _int brightnessValue_ when I move my mouse across the screen. The value needs to go from 240 to 0. How do I do this?

Consider using the `map()` function for this:

> **[map() / Reference](https://processing.org/reference/map_.html)**
>
> Re-maps a number from one range to another. In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the w…

`:)`