I was able to implement both of these things over the past couple of days. The HSV coloring (can be seen in the screen shot below) didn’t really work. I actually believe the the color detection is worse now, which is upsetting, so I’m going to be changing it back to RGB soon.

Looking at only half of the pixels in my image did work quite nicely. I timed how long it took to process an image on level medium before and after the change and was able to reduce the time by over 50%.

This leads me to my problem. To make the colors more accurate, I am going to need to run kMeans (my edge detection algorithm that looks at every other pixel now) twice, meaning it will be back to looking at the full number of pixels. I think I’m going tor try and reduce it down to looking at every third pixel so the process doesn’t go back to it’s previous speed.

This is something I would hope will all be sorted out by the beginning of next week. I really want to get save and print implemented quickly so I can start exploring with other things, such as replacing colors in the palette, or having the user be able to click on regions to color them in.

With this taken care of, I gave myself a little time to play around with the HTML and fix some minor things. The page isn’t complete, but I think it looks much better than it did before:

Here is an article explaining KMeans and it’s implementation I found:

https://medium.com/geekculture/implementing-k-means-clustering-from-scratch-in-javascript-13d71fbcb31e

Not much has changed visually in my project over the last week, but I have been working on the code. I recently was looking at similar projects online and seeing how they tried to incorporate their number of palette colors into their edge detection and tried to implement methods into my own project. Over the past week, I spent a lot of time debugging this code and working on it, and I was finally able to get it to run completely today.

The other project I’ve been looking at: https://github.com/daniel-munro/pbnify

I think I’m at the point where I can move on to other things and come back later to make improvements. What I would eventually like to do is transfer the onclick listener that triggers the EyeDropper to these canvases, so if the user would like to repick a certain color, they can just click on it in the canvas and over write it. This has some difficulties that I haven’t fully thought out yet (I will need to know which canvas they’ve clicked on so it replaces the color in that one and doesn’t just fill a new canvas with color) but I’ll look into it more soon.

Today, input three buttons for easy, medium, and hard, and have them limiting the number of colors a user can choose for their picture. If a user tries to pick more than the level allows, an alert box informs them of the error.

This is the website I used to find code on how to implement the eye dropper: https://dev.to/madsstoumann/introducing-the-eyedropper-api-14d7

I’m not sure how long this will take me, and after this, the really big parts of my project remaining are coloring the picture, having the option to save the picture, and making the website look nice.