AuthorTopic: Online Pixelart editor that lets you mix colors via MIDI-Controller  (Read 2617 times)

Offline HEINZ

  • 0001
  • *
  • Posts: 2
  • Karma: +0/-0
    • View Profile
I made the tool in order to change colors quickly without the need of picking them manually with a pen/mouse.
You use a physical Fader of a Midi-Controller to change the HSB values of your brush.
The tool is no full-fledged production tool, more something to play around with.
So if any of you have a Midicontroller at hand give it a try.

Here is a video of me painting with the program and showing you how to setup your Midi-Controller with Chrome. (no plugin needed)

Here is a direct link to to painting program:
Some more information can be found here:

To access the pixel mode in the drawing app press '+' and '-' on your keyboard.
Any feedback is welcome!  ;D

Here are some more paintings I did using the program.
Not exactly pixelart, but I just recently added pixel functionality,
 before that every stroke was anti-aliased because of some browser/html5 restrictions.

« Last Edit: March 02, 2015, 08:40:45 pm by HEINZ »

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • finticemo
    • View Profile
Interesting; I had no idea that you could access midi controller input in the browser.
You may like to look into GIMP input controller config -- it provides a system that allows you to alter HSV values (or RGB.. or move through your palette, or change opacity..) with MIDI controller events, in a very similar way. However it doesn't support changing color during painting as your software seems to, only between strokes.

It's good that you included adjustment that doesn't require a midi controller. I'm not sure what keyboard layout you have, that you've paired up 'x' and 'y', though. On QWERTY, these are three keys apart. On Colemak (the layout I use) they are six keys apart.

Most of the icons are understandable. I thought the bucketfill tool was a lock for something, initially, though.

I personally don't have a midi controller, so there is not much more I can say about it.
You might also be interested in AlexHW's editor, it is HTML5 / canvas based too.
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline HEINZ

  • 0001
  • *
  • Posts: 2
  • Karma: +0/-0
    • View Profile
Right now chrome is the only browser that supports Midi devices.
You still have to activate it by typing this into the url bar though chrome://flags/#enable-web-midi

Yes I tested Gimps Midi integration some time ago and you can actually change colors/opacity mid-stroke.
There is one flaw with it though. You can't for example assign just one fader/knob to a property like brush size, you have to assign TWO.
One fader to decrease the brushsize and one to increase it. So if you want to change all three color channels, you need 6 fader. That isn't possible with one hand anymore, so it defeats the purpose of single-handedly changing the colors.

I didn't think about the keyboard layout, I'm using a german layout.
I changed the shortcuts so they should work with most international keyboards:
'x' and 'c' to change brightness
's' and 'd' to change saturation
'w' and 'e' to change hue

AleyHW's is nice! I should ask him so integrate Midi support! :)

Thanks for your feedback, I'll take a look at the fill tool icon and try to improve it.