2a:null 2b:["$","title",null,{"children":"Color Spaces - RGB | Stephen Osserman | Observable"}] 30:[] 2e:{"id":"af2a612935867d05","slug":"color-spaces-rgb","title":"Color Spaces - RGB","thumbnail":"6c0e4818db58e093518f823be83f9899436198b2c0a9bf9955824f348a262833","access_level":"public","create_time":"$D2024-02-05T22:16:29.632Z","update_time":"$D2024-02-27T07:38:12.789Z","view_time":null,"first_public_time":"$D2024-06-12T04:27:42.332Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1be7bc7ec19604c8","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":"starter_2024"},"version":811,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d0fe706fc5eb3479","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":null}],"members":[{"type":"individual","id":"d0fe706fc5eb3479","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":null,"role":"editor"},{"type":"team","id":"1be7bc7ec19604c8","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"4f78db032621f154","slug":"color-space-explorations","title":"Color Space Explorations","owner":{"id":"1be7bc7ec19604c8","login":"osserman","name":"Stephen Osserman"}},"type":"notebook","body":{"titling":"auto","title":"Color Spaces - RGB","cells":[{"id":0,"value":"# Color Spaces - RGB","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":454,"value":"Most representation of colors involve three dimensions. The version most monitors use is \"RGB\" -- assigning each pixel a certain amount of R(ed), of G(reen), and of B(lue). Below is a 3D representation of different colors in this color space. \n\nSelect colors below and zoom and rotate the 3D model to explore. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"chart = htl.html`\n

${renderer.domElement}

${scaleDescriptive(colorRGB.r)} red

${scaleDescriptive(colorRGB.g)} green

${scaleDescriptive(colorRGB.b)} blue

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"viewof colorSelection = {\n const element = html`

Color Selection:

`;\n element.value = colorChoices[0];\n d3.select(element).selectAll('button')\n .data(colorChoices)\n .join('button')\n .style('background-color', d=> d)\n .style('min-width', '50px')\n .style('min-height', '25px')\n .style('border', 'none')\n .style('margin-right', '10px')\n .on('click', function(e,d){\n element.value = d;\n element.dispatchEvent(new Event(\"input\", {bubbles: true}))\n });\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof color = Inputs.color({value: colorSelection, label: \"Manual Selection\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof transitionButton = Inputs.button('animate color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof resetCamera = html`${Inputs.button('reset 3d model perspective')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"viewof showHues = Inputs.toggle({label: 'Show Hue Axes'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"## Next Up: [Color Spaces - HSL](https://observablehq.com/@osserman/color-spaces-hsl?collection=@osserman/color-space-explorations)\nWhile monitors typically use RGB, different color spaces can be more intuitive for human interpretation. One of the most common is HSL. \n\n[A notebook to explore HSL](https://observablehq.com/@osserman/color-spaces-hsl?collection=@osserman/color-space-explorations)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"## Code Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":560,"value":"### Color Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"colorChoices = ['#AD3CCA', '#F9F9F0','#313824','#94CDDA','#BBF530' ,'#13EB3F','#DBBC32','#153FDB','#8A2015']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"colorRGB = d3.rgb(color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"rgbAxesSamples = [\n ...d3.range(100).map(r=> ({r: r * 255/100, g: 0, b: 0})), \n ...d3.range(100).map(g=> ({r: 0, g: g * 255/100, b: 0})), \n ...d3.range(100).map(b=> ({r: 0, g: 0, b: b * 255/100 })), \n ].map(d=> {\n return ({...d, col: d3.color(\"rgb(\" + Math.round(d.r) + \",\" + Math.round(d.g) + \",\" + Math.round(d.b) + \")\")})\n })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"hueSamples = [\n ...d3.range(100).map(i=> ({r: 255, g: i * 255/100, b: 0})), \n ...d3.range(100).map(i=> ({r: i * 255/100, g: 255, b: 0})).reverse(), \n ...d3.range(100).map(i=> ({r: 0, g: 255, b: i * 255/100})), \n ...d3.range(100).map(i=> ({r: 0, g: i * 255/100, b: 255})).reverse(), \n ...d3.range(100).map(i=> ({r: i * 255/100, g: 0, b: 255})), \n ...d3.range(100).map(i=> ({r: 255, g: 0, b: i * 255/100})).reverse(), \n ].map(d=> {\n const col = d3.color(\"rgb(\" + Math.round(d.r) + \",\" + Math.round(d.g) + \",\" + Math.round(d.b) + \")\")\n return ({...d, col: col, hsl: d3.hsl(col)})\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"scaleDescriptive = function(x) { \n if (x/255 == 0) { \n return \"no\" \n } else if(x/255<0.25){ \n return \"a little\" \n } else if(x/255<0.5){ \n return \"some\" \n } else if(x/255<0.75){ \n return \"a fair amount of\" \n } else {\n return \"a lot of\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"### Plot Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"chartWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"defaultDotSize = 1.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"### ThreeJS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"#### Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"makeBox = function( position, color) { \n const material = new THREE.MeshBasicMaterial( { color: color } ); \n const box = new THREE.Mesh( boxGeometry, material ); \n box.position.set(...position)\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"makeDot = function(radius, position, color) { \n const geometry = new THREE.SphereGeometry( radius, 32, 16 ); \n const material = new THREE.MeshBasicMaterial( { color: color } ); \n const sphere = new THREE.Mesh( geometry, material ); \n sphere.position.set(...position)\n return sphere;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"makeVertices = function(r, g, b) {\n return { r: new THREE.Vector3( r,0, 0 ), \n g: new THREE.Vector3( 0, g, 0 ), \n b: new THREE.Vector3( 0,0,b ), \n rg: new THREE.Vector3( r,g, 0 ), \n rb: new THREE.Vector3( r,0, b ), \n gb: new THREE.Vector3( 0, g,b ), \n rgb: new THREE.Vector3( r, g,b )\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"makeGuidelinePoints = function(vertices) {\n return [ vertices.rg, vertices.rgb, vertices.rb, vertices.r, vertices.rg, \n vertices.g, \n vertices.gb, vertices.rgb, vertices.rb, vertices.b, vertices.gb \n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"makeRGBGuidelines = function (material, vertices = makeVertices(colorRGB.r,colorRGB.g, colorRGB.b)) {\n const points = makeGuidelinePoints(vertices)\n const geometry = new THREE.BufferGeometry().setFromPoints( points );\n const line = new THREE.Line( geometry, material );\n return line;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"#### Elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":796,"value":"boxGeometry = new THREE.BoxGeometry( 2.55, 2.55, 2.55);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"guidelineMaterial = new THREE.LineBasicMaterial({color: 0x888888})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"rgbGuidelines = makeRGBGuidelines(guidelineMaterial, makeVertices(colorRGB.r,colorRGB.g, colorRGB.b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"selectedColorDot = makeDot(defaultDotSize * 4, [d3.rgb(color).r, d3.rgb(color).g, d3.rgb(color).b], color) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"hues = {\n const group = new THREE.Group();\n hueSamples.forEach(d=> {\n group.add(makeBox( [ d.r , d.g , d.b ], d.col.formatHex()))\n })\n return group;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"axes = {\n const group = new THREE.Group();\n rgbAxesSamples.forEach(d=> {\n group.add(makeBox( [ d.r , d.g , d.b ], d.col.formatHex()))\n })\n return group;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":" scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xE9E9E9);\n\n scene.add( axes )\n if(showHues){scene.add(hues)}\n scene.add(selectedColorDot)\n scene.add(rgbGuidelines)\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"camera = {\n resetCamera; \n const fov = 45;\n const aspect = chartWidth / height;\n const near = 1;\n const far = 3000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(cameraX, cameraY, cameraZ)\n camera.lookAt(0,0,0);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n\n const controls = new OrbitControls(camera, renderer.domElement);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n\n renderer.render(scene, camera)\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"### Animation Handling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"animateColorDuration = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"transitionStart = {\n transitionButton; \n return new Date()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"colorAnimation = { \n while (new Date() - transitionStart < ( 3 * animateColorDuration ) ) {\n const timeSinceTransition = new Date() - transitionStart\n const axis = Math.floor(timeSinceTransition / animateColorDuration)\n const interpAmt = d3.easeCubicInOut(\n (timeSinceTransition % animateColorDuration) / animateColorDuration)\n let [r, g, b] = [0, 0, 0]\n if ( axis == 0 ) {\n r = d3.interpolate(0, colorRGB.r)(interpAmt)\n } else if (axis == 1) { \n r = colorRGB.r\n g = d3.interpolate(0, colorRGB.g)(interpAmt)\n } else if (axis == 2) { \n r = colorRGB.r\n g = colorRGB.g\n b = d3.interpolate(0, colorRGB.b)(interpAmt)\n }\n\n selectedColorDot.position.set(r, g, b) \n selectedColorDot.material.color.setRGB(r/255, g/255, b/255)\n rgbGuidelines.geometry.setFromPoints(makeGuidelinePoints(makeVertices(r,g,b)) )\n \n renderer.render(scene, camera);\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"### Initial Camera Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"viewof cameraX = Inputs.range([-1000,1000], {value: 210, step:1, label: \"initial camera X\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof cameraY = Inputs.range([0,1000], {value: 435, step:1, label: \"initial camera Y\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"viewof cameraZ = Inputs.range([0,1000], {value: 600, step:1, label: \"initial camera Z\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"THREE = import(\"three@0.155.0\")\n\n // const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n // await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n // await require(\"three@0.130.0/examples/jsm/renderers/CSS2DRenderer.js\").catch(() => {});\n // return THREE;\n//}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"OrbitControls = (await import(\"three@0.155.0/examples/jsm/controls/OrbitControls.js\")).OrbitControls","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"gs = require('gsap@3.5.0/dist/gsap.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"