Filter Pad

What is it?

Essentially the filter pad is just a small keyboard with keys mapped to the Digits 1 – 8. The idea behind it is to simplify the context and interaction compared to a normal keyboard. Popular creative software often bombards us with options and makes it hard to decide what we actually need. Having the restriction of only 8 different styles can empower the creative process and combining them still provides endless possible outcomes.

The Filter Pad embodies that conscious restriction physically and gets rid of all the other buttons.

---

Building Instructions

Keypads like this are easily available online, in both, wired and bluetooth versions. You can of course also build your own as the DIY-community for mechanical keyboards is pretty big. This allows more customization for example with custom keycaps or switches. Because my caps where unlabeled, I just wrote the Digits with a chalk pen onto them.

Magnetic Clip-On

By adding some magnets to the bottom of the pad, it can be easily clipped to any metallic surfaces or objects. This makes it really handy to integrate it in your environment and workflow.

To add the magnets you can simply cut out a little bit of the middle layer of a piece of corrugated cardboard, slide in a magnet and tape the cardboard to the bottom of the keypad – done!

The Cheat Sheets

Sometimes it can be a little hard to remember which of the 8 keys stands for which filter. But as the pad is meant to be compatible with a variety oft tools, it doesn’t really make sense to label them.

So I created different cheatsheets out of cardboard for different tools, which can be clipped to the pad magentically. You can download them below to print them out and make your own.

See it in action!

Almost all komputer.space tools have some sort of stylistic options and therefore support the filter pad

• type computer: change font
• object kompositor: change material of objects
• image filter: set filter type
• pattern generator: select pattern

Try them out here!

Software Integration

If you want to add support for the filter pad in your own software, the integration is pretty much as simple as it gets (It works just like a normal keyboard).

So for example add an EventListener for any keypress, check if the pressed key was a Digit an send the digit to your tool to apply the filter mapped to the pressed number:

class FilterPad {
  constructor(applyFilterCallback) {
    this.applyFilterCallback = applyFilterCallback;
    document.addEventListener("keydown", (e) => this.processKeyInput(e));
  }

  processKeyInput(e) {
    if (e.code.includes("Digit")) {
      const filterIndex = parseInt(e.code.slice(-1));
      this.applyFilterCallback(filterIndex);
    }
  }
}

Then in the applyFilter method in your tool you can just apply a switch on the inputIndex and apply the filters however you want:

class Tool {
  constructor(applyFilterCallback) {
    // ...
    this.filterPad = new FilterPad(this.applyFilter.bind(this))
  }

  // ...

  applyFilter(index) {
    switch (index) {
      case 1:
      // apply filter 1
        break;
      case 2:
      // apply filter 2
        break;
      case 3:
      // apply filter 3
        break;
      case 4:
      // apply filter 4
        break;
      case 5:
      // apply filter 5
        break;
      case 6:
      // apply filter 6
        break;
      case 7:
      // apply filter 7
        break;
      case 8:
      // apply filter 8
        break;
      default:
        break;
    }
}