2b:null 2c:["$","title",null,{"children":"HSV values in RGB space | sw1227 | Observable"}] 31:[] 2f:{"id":"9df0eef937876dde","slug":"hsv-values-in-rgb-space","title":"HSV values in RGB space","thumbnail":"5e8362197c69779caeac34fe043bfe446f5f58b91f0192108ce7fbbb7985840c","access_level":"public","create_time":"$D2020-09-06T12:18:33.459Z","update_time":"$D2020-09-13T03:40:28.441Z","view_time":null,"first_public_time":"$D2020-09-12T12:38:15.146Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"06475ae5027cde36","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":"starter_2024"},"version":152,"publish_version":152,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null}],"members":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"HSV values in RGB space","cells":[{"id":0,"value":"md`# HSV values in RGB space\nA color can be thought of a point in three-dimensional RGB space, and can also be represented by HSV values.\nThe relationship is kind of a coordinate transformation in 3D space.\n\nSo, what if the points in RGB space (shown as cubes in this visualization) are colored by their HSV values, instead of RGB values itself? This notebook tries to visualize that.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`**Color by RGB / Hue / Saturation / Brightness**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof selected = {\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"viewof density = {\n const form = html`\n`;\n form.i.oninput = () => form.o.value = `Cube density = ${form.value = form.i.valueAsNumber}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"colorFunctions = ({\n RGB: (r, g, b) => `rgb(${r}, ${g}, ${b})`,\n Hue: (r, g, b) => colorScale(rgbToHsv(r, g, b).h / 360),\n Saturation: (r, g, b) => colorScale(rgbToHsv(r, g, b).s),\n Brightness: (r, g, b) => colorScale(rgbToHsv(r, g, b).v),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"colorScale = d3.interpolateViridis","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"{\n const renderer = new THREE.WebGLRenderer({antialias: true});\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n renderer.render(scene, camera);\n return renderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"rgbToHsv = (r, g, b) => {\n // 0 <= r, g, b <= 255\n const minRgb = Math.min(r, g, b);\n const maxRgb = Math.max(r, g, b);\n \n let h, s, v;\n // 0 <= h <= 360\n if (minRgb === maxRgb) h = undefined;\n if (minRgb === b) h = 60 * (g - r) / (maxRgb - minRgb) + 60;\n if (minRgb === r) h = 60 * (b - g) / (maxRgb - minRgb) + 180;\n if (minRgb === g) h = 60 * (r - b) / (maxRgb - minRgb) + 300;\n // 0 <= s, v <= 1\n v = maxRgb / 255;\n s = (maxRgb - minRgb) / 255;\n \n return {h: h, s: s, v: v};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"cubes = {\n const n_split = 16;\n const boxRate = density;\n const boxSize = boxRate * (1 / n_split);\n const meshes = [];\n \n const color = colorFunctions[selected];\n\n for (let i = 0; i < n_split; i++) {\n for (let j = 0; j < n_split; j++) {\n for (let k = 0; k < n_split; k++) {\n const r = Math.round(255 * i / n_split);\n const g = Math.round(255 * j / n_split);\n const b = Math.round(255 * k / n_split);\n const geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);\n const material = new THREE.MeshBasicMaterial({color: color(r, g, b)});\n const cube = new THREE.Mesh(geometry, material);\n cube.position.set(\n (i / n_split),\n (j / n_split),\n (k / n_split)\n );\n meshes.push(cube);\n }\n }\n }\n\n return meshes;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x202020);\n cubes.forEach(cube => scene.add(cube));\n scene.add(new THREE.AxisHelper(2));\n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 100;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(2, 2, 2);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"d3 = require(\"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"