Image filter example in a loop draw

p5.js Coding Questions
1

Hi,
I’ve been playing around with P5js and I am trying to use the image filter on an event like mouseMoved.
I am having lot of trouble.
The only examples I found use the filter in the setup function.
so, how do you control the event in the draw()?

ANyone any idea?
Thank you

2

I’m not sure exactly what you are trying to do – more details or ideally an example sketch would help people to give you better advice. Here is a simple example from a non-expert p5 user.

I edited the mouseMoved example on the p5 reference site using the edit and mixed in a bit of the filter example. If the mouse is on the left side while it is moving, the filter activates. If the mouse is on the right side while it is moving, the filter deactivates. While the mouse is not moving the filter keeps doing whatever it already was, as its state is saved in a global variable.

var img;
var left;
function preload() {
  img = loadImage('assets/bricks.jpg');
}
function draw() {
  image(img, 0, 0);
  if(left) {
    filter(THRESHOLD);
  }
}
function mouseMoved() {
  if(mouseX < width/2){
     left = true;
  } else {
     left = false;
  }
}
3

Hi Jeremy,
thanks a lot for replying.
my situation is that I have a grid of tiles and a class Tile.
Ideally, when I move the mouse over the tile, I’d like to see that one inverted.
I tried to embed the filter() in the class or use it on its instance in the draw() function but neither of those work as expected.
Also, I tried your code and it invert everything that is drawn below the filter… I tried also push/pop() but it doesn’t change it.
I think I am doing something wrong or I don’t understand how the filter works.
Here is some code. I cleaned it up as much as I could to replicate my situation…
I hope it’s not too long.

Thanks anyways!

var col = 4;
var numImages = 16;
var images = new Array(numImages);
var left;

var tiles = [];

var imgSize = window.innerHeight / col;

var xCentre = 0;
var yCentre = 0;

function preload() {
    for (var i = 0; i < images.length; i++) {
        images[i] = loadImage('1/png/0.png');
    }
}

function setup() {
    canvas = createCanvas(window.innerWidth, window.innerHeight);
    xCentre = (width - col * (imgSize )) / 2;
    yCentre = (height - col * (imgSize)) / 2;
 
    for (var i = 0; i < col * col; i++) {
        var t = new Tile();
        tiles.push(t);
        tiles[i].tileSize = imgSize;
        tiles[i].selected = false;	    
	}
}

function draw(){

background(50,100,100);
		    push();
		    translate(xCentre,yCentre);
		    for (var i = 0; i < col; i++) {
		        for (var j = 0; j < col; j++) {
		            var index = i + j * col;
		            
		            tiles[index].display(images[index], i * (imgSize), j * (imgSize));

		            // TRIED also THIS WAY
    		        // if(tiles[index].isInside() === true){
    		        // 	filter(INVERT);
    		        // 	// console.log(index);
    		        // }
                     
		        }
		    }
		    pop();


}

function mouseMoved() {
  if(mouseX < width/2){
     left = true;
  } else {
     left = false;
  }
}

class Tile {
    constructor() {;
        this.tileSize;
        this.selected = false;
        this.bInvert = false;
        this.tileImage;

    }
    display(myImage, x, y) {
        this.tileX = x;
        this.tileY = y;
        if (this.isInside() === true) {
            push();
            this.tileImage = image(myImage, x, y, this.tileSize, this.tileSize);
                //  TRIED THIS WAY
                filter(INVERT);
        	pop();
        } 

        if (this.isInside() === false) {
    		push();
            noStroke();
            this.tileImage = image(myImage, x, y, this.tileSize, this.tileSize);
        	pop();
        }

        if (this.selected === true){
	        this.tileX = x;
	        this.tileY = y;
	        push();
	    	fill(100,10,10);
	        rect(x, y, this.tileSize, this.tileSize);
        	pop();
        }
   
    }

    isInside() {

        if (	mouseX - xCentre < this.tileX + this.tileSize
        	&& 	mouseX - xCentre > this.tileX
        	&& 	mouseY - yCentre < this.tileY + this.tileSize
        	&& 	mouseY - yCentre > this.tileY ) {
            return true;
        } else {
            return false;
        }
    }
};
4

I think perhaps you are not looking at the errors in your console. This will waste a lot of your time, because you are trying to make changes to fix one thing, but something else is broken, so nothing you try works.

In this case, you wrote “void draw” – but that is Processing(Java), not p5js, which uses “function draw” – the console error in the browser is:

Uncaught SyntaxError: Unexpected token { …:32

Start with a working sketch that does everything you want except the image change, and share that. Then walk through adding that next piece.

5

Hi Jeremy,
sorry that’s my mistake while copying and pasting. The original code has the function draw().
Did you test my code with function instead of void? Did it work for you?
It still doesn’t to me.

I amended the code in the previous message.

Thanks for your time