For this week, I wanted to build on the foundations on the previous week. Previously I had added a button that would randomise he colour bands by drawing a rectangular box over the resistor image. I wasn’t really a fan of this approach as the rectangular boxes looked jarring. For this week, I wanted to improve this functionality by directly replacing the pixels of the band colour with the selected colour. Interesting to see how image colours are stored. They're stored in 4 bytes: width * height * 4. The 4 include Red, Green, Blue and Alpha values.
I started this pixel replacement attempt by replacing the starting band colours with white. I did this by finding out the RBG colour combination of the bands and converting them to white. This more or less worked but was leaving ugly artifacts on the edges of the bands. I attempted to use tolerances to clean up the edges, but that didn’t really do much. Applying too much tolerance would break the borders of the bands.
Thinking back to the lesson in the earlier week, where it was much easier to manually manipulate an image to display left and right halves of it than use HTML. I applied a similar idea of using gimp to turn the bands white and clean up the edges.
Despite this, the earlier code was still useful, as I could implement the same logic to turn the white pixels into a desired colour. I was having difficulty figuring out why it wasn’t working, but I had accidentally been turning the transparency to 0. After I figured it out, the colour change worked seamlessly.
To expand the functionality, I created another HTML element to display text for a possible future resistance value. On clicking the button to change the colour, the text also gets updated.
Again, I have underestimated the scope for this project, so next week I will add a way to select the colour of the bands, and hopefully output the resistance value. I’m sort of thinking if this one website a week thing makes sense. Atomic habits supports the idea of being process driven rather than output driven. Based on that I think I should focus on the process rather the aim of delivering one website per week. Regardless I am still learning web development.
Learnings