Live update of Threshold filter

Processing Coding Questions
1

I’m trying to show a photo and be able to adjust the threshold real time when holding down shift. Here’s kind of what I’ve got:

PImage crossSection;
float threshold = .85;

void setup() {
  size(1008, 756);
  crossSection = loadImage(crossSection.jpg);
}

void draw() {
  background (0);
  image(crossSection, 0, 0);
  crossSection.resize(1008, 756);
  loadPixels();
  crossSection.loadPixels();
  updatePixels();
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      threshold += .03;
    } else if (keyCode == DOWN) {
      threshold -= .03;
    } else if (keyCode == SHIFT) {
      loadPixels();
      crossSection.filter(THRESHOLD, threshold);
      updatePixels();
    }
  }
}

I realize this won’t update live, but I’ve tried while loops and a few other stuff and nothing seems to work, so I’m having this as the basis to work off from there.

1 Like
2

your arrow key change var ‘threshold’,
but that is not used in draw…
( besides the “SHIFT” idea? i not try to follow )

you remember?

/*start from Examples : Basics / Image / LoadDisplayImage */
// original https://discourse.processing.org/t/reversing-the-threshold-filter/13579/2
// add keyboard question https://discourse.processing.org/t/live-update-of-threshold-filter/13635

String infile = "data/moonwalk.jpg";
PImage img;
float fset = 0.50;
boolean fenable = false;
boolean console = true;
String info="mouse click toggle enable filter\n key [f] and turn mousewheel\n or keys [Arrow UP][Arrow DOWN]\n key [p] toggle info print";
String mwpp="MouseWheelPlusPlus";

void setup() {
  size(640, 360);
  img = loadImage(infile);  // Load the image into the program
}

void draw() {
  image(img, 0, 0);
  if ( fenable ) filter(THRESHOLD, fset);
  infoprint();
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount(); //println(e);
  if ( keyPressed && key == 'f' ) { 
    fset += e/30.0 ;
    fset = constrain(fset, 0, 1);
    mwpp = " key f: fset "+nf(fset, 0, 2);
  }
}

void mousePressed() {
  fenable = ! fenable;
}

void keyPressed() {
  if ( key == 'p' ) console = ! console;
  // ok, you not like my MWPP
  if      (keyCode == UP) {    
    fset += .03;
    fset = constrain(fset, 0, 1);
    mwpp = " key updown: fset "+nf(fset, 0, 2);
  } else if (keyCode == DOWN) {   
    fset -= .03;
    fset = constrain(fset, 0, 1);
    mwpp = " key updown: fset "+nf(fset, 0, 2);
  }
}

void infoprint() {
  if ( console ) {
    noStroke();
    fill(200);
    rect(0, height-75, 200, height);
    fill(200, 0, 0);
    text(info, 10, height-65);
    fill(0, 200, 200);
    text(mwpp, 10, height-8);
  }
}
1 Like
3

Spent quite a while trying to figure out your code, gave me a few ideas. I’m thinking it should be “while holding down the mouse, the image goes to black and white, and the arrow keys can adjust the threshold value, and it automatically updates” But again I can’t seem to write that without running into issues.

4

if you test my code example you see it does all now ( mouse wheel AND UP DOWN key )
but the mouse click is a toggle function

hm, i am RIGHTY,
so keep mouse (LEFT) pressed AND operate keyboard Arrow Keys UP DOWN at same time would not be my concept, but why not,
again can start from my code and replace the fenable = ! fenable; with a if else ahm:\ better
mousePressed / mouseReleased structure.

1 Like