[TOOL] MIDI Colormap Generator

gxray · 12-31-2020, 07:18 PM

Hopefully the best section to post this.

I made a Javascript app to easily build MIDI Note Colormaps using colorpicker GUI's that display the result realtime as you drag-and-drop.
It also provides some useful color transformation functions (lighten/darken/brighten/saturate/desaturate/hueshift).

The UI/design is not great. I don't have fun styling things and I'm terribly unartistic.
But, it works.

It's also open-source and I have it on Codesandbox (browser-based IDE with realtime preview, so anyone can open the app source and start contributing immediately with no local setup or tools).

Link to App
https://reaper-midi-colormap-tool.netlify.app/

Codesandbox (Source Code)
https://codesandbox.io/s/reaper-midi...e=/src/App.vue

Github
https://github.com/GavinRay97/reaper-midi-colormap-tool

I would be grateful if others were interested in contributing, particularly on easy/tedious things like just sprucing up the HTML + CSS styles.

Demo Video

Screenshot

BirdBird · 12-31-2020, 07:23 PM

Awesome!

daniellumertz · 12-31-2020, 07:26 PM

Really well Done !! Thanks for that!!!

gxray · 12-31-2020, 07:56 PM

Quote:

Originally Posted by BirdBird

Awesome!

Quote:

Originally Posted by daniellumertz

Really well Done !! Thanks for that!!!

Thank you! I hope that people will find it useful, and we will get to see more nice-looking MIDI colormaps in our piano rolls as people experiment =D

vitalker · 01-01-2021, 12:22 AM

Could you also please add different colors for different velocities? I'm not sure, but the top pixels (on both selected and unselected parts) are 127 and the bottom ones are 0.

gxray · 01-01-2021, 12:28 AM

Quote:

Originally Posted by vitalker

Could you also please add different colors for different velocities? I'm not sure, but the top pixels (on both selected and unselected parts) are 127 and the bottom ones are 0.

You can do this currently, use the sections that say "Note velocity gradient color stops":

You can add as many color-stops as you want, from left-to-right going from 0 -> 127 velocity.

So it could be, for example, just 2 color stops, light blue and dark blue.
Or, you could add many color stops and do gradual gradients, or use multiple colors (red, green, blue, etc).

However you want to do it =)

So, if you wanted to mirror the Whitetie documentation image here:

You would click "+" to make 3 color stops, and make the colors "green, yellow, red".
Here's a shitty quick attempt:

gxray · 01-01-2021, 12:38 AM

I'm also more than open to better ways of laying out these controls, because this was a first attempt.

Folks will probably have some pretty smart ideas about how to make the experience of using this easier/more pleasant.