Beginner dev here. I’m a big fan of Processing and have used p5.js in personal projects. I wanted to try contributing to open source code to get some practice so I thought, why not p5?
Anyway, I watched The Coding Train’s intro video on contributing and have read the contributor docs. I understand how it works for the most part but I’m unsure of where to actually… put the code for the functionality I want to add.
The functionality: A method to color quantize the pixels in the pixels array that are populated after loading an image. Basically, take the image loaded in and spit a color palette that represents the colors in the image. I’ve used this functionality in a past project, so I have it all written and working, just need to tweak it so it works in the context of p5. It would need to make use of the pixels array (https://p5js.org/reference/#/p5/pixels) and maybe the p5 color object, but other than that it’s pretty much just crunching some numbers (I’m using the median cut algorithm to quantize the colors).
I was thinking it might go in the “pixels.js” or “image.js”… but it seems like the chunks of code for some of the methods in there actually live in the Renderer2D.js file. Can anyone provide some insight here?
Hi riss0z – first, really excited that you are excited about contributing!
My first question would be, what are the advantages to color quantization being implemented as part of the core API as opposed to a color library like p5.cmyk.js or p5.riso et cetera? Is it a performance issue?
Color palette extraction or image processing with a quantization filter is a highly customizable activity – there usually isn’t just one right way – and it isn’t a common operation like drawing a line. There are also two use cases – one is to extract the information, the other is to change the image, binning each pixel.
I know you are suggesting something simple, but it might be work looking at how existing color libraries already work on the p5.js end and also at what kinds of related things are on the Java end – such as:
p5.js devs also spend more time on github than on this forum – so trying an issue or PR and asking for feedback may be a better way to get architecture advice from them than a forum post.
Thanks for the advice! Yes, I was wondering if the functionality would be better suited for a library, but it doesn’t quite fit in with any of the existing libraries out there. This has more to do with images than it does with color, so I thought it might be best suited as a prototype method on a p5Image instance. That’s how I’m currently implementing it now. Since this is only one functionality, I wasn’t sure if it would warrant a separate library all to itself, though I agree that it may not be common enough to warrant being part of the core API.
There are indeed multiple ways to do this, but the algorithm that I’m using is fairly common for color quantization and easy to implement. There is only one parameter that dictates how many colors are extracted from the image and that’s the only thing that changes about the process.
That being said, there’s also room to grow with this idea - I’m sure with enough expansion it could stretch enough to warrant a separate library (image processing? image processing directly related to color?) if it doesn’t already. I’m just starting out, though, so I wanted to start with something small that I already had working code for.
If you already have an implementation as a function p5Image, you could always submit as a PR and discuss with the devs. My suspicion is that you may be suggested to take the library route – p5.js and Processing have big APIs, and it is a serious maintenance issue to expand it, especially with features that then exist in some modes but not others.
That said, maybe just open a PR and see if you can have that discussion!
