Just don't have to think of the arithmetic too much. Will get you the same result as int h = round(map(i, 0, 499, 0, 100)) , In this particular case the 0-500 to 0-50 range is trivial: 500 / 100 = 5, since map returns a float, round helps make that an intįill(map(mouseX, 0, width, 0, 100), map(mouseY, 0, height, 0, 100), 100) simply map i from 0-499 range to 0-100 to map into hueįor (int i = 0 i width) to 0 - 100 range for hue.the top image show a rainbow gradient with the same saturation and brightness, so those could be kept constant:.i, j are in in 0-500, 0-50 range (x, y positions).It maps a number from one range to another.įor example this bit of code is trying to remap i, j positions to hue and saturation. One thing that could make things easier is the map() function. Perhaps the intention was to simplify things by treating the hue as a percentage too. It's a bit strange you're mapping to 0-100 range for hue, saturation and brightness.
HSB COLOR PICKER FULL
Notice in the diagram above saturation increases away from the centre: 0 saturation = gray, 100% saturation = full tint.īrightess increases from bottom to top in the diagram. Saturation and brightnesses typically go between 0-100%. In fact, if you go every 60 degrees you'll go through red, yellow, green, cyan, blue, magenta and back to red at 360/0. Intuitively you'd find orange halfway between red and yellow at 30 degrees. Let's say you start at red, at 0 degrees hue and you know yellow is at 60 degrees hue.
![hsb color picker hsb color picker](https://3.bp.blogspot.com/-o6CEbUayEBE/WWgYk7m5qXI/AAAAAAAACzU/AaFgD3u-0bMZHOlLRCz0Ii9UBDedSor2gCLcBGAs/w1200-h630-p-k-no-nu/1200x630bf.jpg)
Hue is typically in a 0-360 degrees range so picture going around in a rainbow circle, starting at red and ending at red. SharkD, CC BY-SA 3.0, via Wikimedia Commons I'd move nested for loop to setup to make it more efficient: it would rendered once and stay there since you're not calling background() and rect(0,50,500,500) is bellow the rainbow gradient.
![hsb color picker hsb color picker](https://assets.codepen.io/918406/internal/screenshots/pens/eWvewo.default.png)
![hsb color picker hsb color picker](https://pixls-discuss.s3.dualstack.us-east-1.amazonaws.com/original/3X/0/5/05553811321c014ab35d1f7ca1101da7baa4484d.jpeg)
You're already doing great using colorMode(HSB) to render the rainbow.