0

I was creating a mouse-based painter app. This is a code of a brush whose color is chosen by a color picker in p5js. all I want is = when i press [T] key, it should be changed into THRESHOLD filter i put this code on here:

if (key === 'T') filter(THRESHOLD);

but it's not working im curious why it isn't:) Is there anybody who can help me thanx https://editor.p5js.org/kiskl/sketches/cFGX_xUWE


const sketch = function(p) {

  let colorPicker;
  let brushSize = 20;
  
  p.setup = function() {
    p.createCanvas(800, 800);
    colorPicker = p.createColorPicker('red');
    colorPicker.position(0, 0);
  };



  p.keyPressed = function(e) {

    let key = e.key;
    if (key === '=') brushSize += brushSize * 0.1;
    else if (key === '-') brushSize -= brushSize * 0.1;
    else if (key === 'c') p.clear();
    
    else if (key === 'T') filter(THRESHOLD); //Here, why isn't it working?
    else if (key === 'I') filter(INVERT);
    else if (key === 'P') filter(POSTERIZE);
  }

  p.mouseDragged = function(e) {
    color = colorPicker.color()
    p.fill(color);
    p.stroke(color);
    p.ellipse(e.clientX, e.clientY, brushSize, brushSize)
  } };

let myp5 = new p5(sketch);
rose
  • 49
  • 6
  • 1
    Where are you declaring the `filter()` function? I see you have a `var = fliter` declared on top. If that's the case, it might be a typo – KYin Jun 25 '22 at 06:19
  • 1
    I might be wrong but I think if you're trying to use an `If..else if..else` statement, maybe have a look at this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else#using_else_if – KYin Jun 25 '22 at 06:22
  • thanx @JuJu,,!! i fixed it lol but it''s not working still lol i will read urs, thanx! – rose Jun 25 '22 at 06:27
  • Can you explain a little what do you want to do with the `filter` function? It should be a function right? But I see that you're declaring it as a variable with `var filter` – KYin Jun 25 '22 at 06:30
  • ohhh i want the following filters can be applied to the drawing on canvas. - THRESHOLD [T], INVERT [I], POSTERIZE [P] – rose Jun 25 '22 at 06:32
  • hmm do i need to erase it?? cuz it keep saying 'filter is not defined' so i think i just put it var.filter ...! – rose Jun 25 '22 at 06:33
  • If you want to use `filter` as a function, it should be declared as a **function** just like how you did with `sketch` and `p.setup`. If you use `var filter`, then it's just a variable called `filter` with an empty value. – KYin Jun 25 '22 at 06:39
  • icic thnx a lot ! i erased it.. could u tell me what i should do to solve this problem..?? it keeps saying 'filter is not defined and THRESHOLE is not defined TT – rose Jun 25 '22 at 06:48
  • Can you update the code on your question above? of I want to see where you at after reading the document link and erasing the filter. If possible, please provide a Codepen link so we can understand what you're doing. – KYin Jun 25 '22 at 06:51
  • I edited the code above and here's my p5js ! thx! https://editor.p5js.org/kiskl/sketches/cFGX_xUWE – rose Jun 25 '22 at 06:54
  • @rose, do you see how every other p5 function in your code is preceded by `p.`?That's because we're working in instance mode (https://p5js.org/examples/instance-mode-instantiation.html), which is good practice. Use `p` for anything scoped within the package – danh Jun 25 '22 at 14:39
  • 2
    In other words: p.filter(p.THRESHOLD); – danh Jun 25 '22 at 21:34

1 Answers1

0

you need to make sure you write p.filter(p.THRESHOLD) for each of the filters. Also, don't forget that the letters are case sensitive.

umbre0n
  • 16
  • 2