31:T45f,chart = { const container = d3.create('div').style('width', chartWidth).style('height', chartHeight) const phases = container.call(addPhases) const colorDescription = container.append('div').attr('id','color-description') const colorMarker = colorDescription.append('div').attr('id','color-marker') const colorDescriptHue = colorDescription.append('div') const colorDescriptSat = colorDescription.append('div') const colorDescriptLgt = colorDescription.append('div') const tl = makeTl(phases) tl.pause(); container.node().appendChild(renderer.domElement); return Object.assign(container.node(),{ colorUpdate(col, colHSL) { colorMarker.style("background-color",col) colorDescriptHue.html('Hue: ' + Math.round(colHSL.h) + '°') colorDescriptSat.html('Saturation: ' + d3.format('.0%')(colHSL.s) + '') colorDescriptLgt.html('Lightness: ' + d3.format('.0%')(colHSL.l) + '') } }) }32:T48f,phase5 = function(tl, phases){ tl.add('next', '+=1') highlightPhaseText(tl, phases, 5, 'next') tl.to(slPlane.material.uniforms.uHue, { value: 1.0, duration: 1.5, onUpdate: () => renderer.render(scene, camera) }, 'next') .to(slPlane.position, { x: 1, duration: 1.5, onUpdate: () => renderer.render(scene, camera) }, 'next') tl.add('next-reverse') .to(slPlane.material.uniforms.uHue, { value: 0.0, duration: 1.5, onUpdate: () => renderer.render(scene, camera) }, 'next-reverse') .to(slPlane.position, { x: 0, duration: 1.5, onUpdate: () => renderer.render(scene, camera) }, 'next-reverse') tl.to(slPlane.material.uniforms.uOpacityMultiplier, { value: 0, duration: 0.7, onUpdate: () => renderer.render(scene, camera) }) tl.add('fadeInSLAxes', '-=0.7') tl.to(saturationLine.material, {opacity:1, duration: 0.7, onUpdate: () => renderer.render(scene, camera)}, 'fadeInSLAxes') tl.to(lightnessLine.material, {opacity:1, duration: 0.7, onUpdate: () => renderer.render(scene, camera)}, 'fadeInSLAxes') }33:T568,fragmentShader = ` uniform float uOpacityCutoffZ; uniform float uOpacityCutoffX; uniform float uHue; uniform float uPlaneLength; uniform float uOpacityMultiplier; varying vec2 vUv; // color functions from: https://www.shadertoy.com/view/4dKcWK vec3 HUEtoRGB(in float hue) { // Hue [0..1] to RGB [0..1] // See http://www.chilliant.com/rgb2hsv.html vec3 rgb = abs(hue * 6. - vec3(3, 2, 4)) * vec3(1, -1, -1) + vec3(-1, 2, 2); return clamp(rgb, 0., 1.); } vec3 HSLtoRGB(in vec3 hsl) { // Hue-Saturation-Lightness [0..1] to RGB [0..1] vec3 rgb = HUEtoRGB(hsl.x); float c = (1. - abs(2. * hsl.z - 1.)) * hsl.y; return (rgb - 0.5) * c + hsl.z; } void main() { // should use step() instead of in-line ternary. But not getting it to work. float colAlpha = vUv.x < (uOpacityCutoffX/uPlaneLength) ? 1.0 : 0.0; // colAlpha *= abs(vUv.y - 0.5) < (uOpacityCutoffZ/100.0) ? 1.0 : 0.0 ; colAlpha *= abs(vUv.y - 0.5) < (uOpacityCutoffZ/(uPlaneLength/2.0)) ? 1.0 : 0.0 ; colAlpha *= uOpacityMultiplier; vec3 colorRBG = HSLtoRGB(vec3(uHue, 1.0 - vUv.x, vUv.y)); gl_FragColor = vec4(colorRBG, colAlpha); }`34:[] 2f:{"title":"Color Spaces - HSL","cells":[{"id":0,"value":"# Color Spaces - HSL\n\nIn the [previous notebook](https://observablehq.com/@osserman/color-spaces-rgb) we looked the RGB color space.\n\nThis notebook explore colors in a different 3 dimensional space, HSL. The H is for Hue and can be thought of as all the colors around the color wheel (ranging from 0 and 360 in degrees); the S is for Saturation (between 0 and 100%); and the L is for Lightness (between 0 and 100%). \n\nClick the play button to get started:","pinned":false,"hidden":false,"mode":"md"},{"id":493,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"viewof colorSelection = {\n if( animationDone ){\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 } else { \n const element = html`

`;\n element.value = colorChoices[0];\n return element;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"viewof color = {\n if(animationDone){\n return Inputs.color({value: colorSelection , label: \"Manual Selection\"})\n } else { \n const element = html`

`;\n element.value = colorChoices[0];\n return element;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"Note that 0 Lightness is always black and 100% Lightness is always white, regardless of Hue and Saturation. \n0 Saturation is always grey, regardless of Hue value. ","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"## Code Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1235,"value":"### Colors","pinned":false,"hidden":false,"mode":"md"},{"id":899,"value":"colorChoices = ['#AD3CCA', '#F9F9F0','#313824','#94CDDA','#BBF530','#13EB3F','#B1F7BF','#C4B054','#153FDB','#1A0872']","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"colorHSL = {\n let hsl = d3.hsl(color)\n hsl.h = hsl.h || 0\n hsl.s = hsl.s || 0\n return hsl\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"### Chart Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":613,"value":"chartHeight = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"chartWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"defaultDotSize = 0.02","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"### Chart Elements - Axes","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"boxGeometry = new THREE.BoxGeometry( 0.01, 0.01, 0.01);","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"makeBox = function( position, color) { \n const material = new THREE.MeshBasicMaterial( { color: color, transparent: true, depthWrite: false } ); \n const box = new THREE.Mesh( boxGeometry, material ); \n box.position.set(...position)\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"rgbAxesGroup = {\n const rgbAxesGroup = new THREE.Group();\n rgbAxes.forEach(d=> {\n rgbAxesGroup.add(makeBox( [ d.r , d.g , d.b ], d.col.formatHex()))\n })\n return rgbAxesGroup\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"rgbAxes = rgbAxesSamples.map(d=> ({...d, r: d.r/255, g: d.g/255, b: d.b/255})) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"huesGroup = {\n const huesGroup = new THREE.Group();\n hueAxis.forEach(d=> {\n const curBox = makeBox( [ d.r , d.g , d.b ], d.col.formatHex())\n curBox.material.transparent = true; \n curBox.material.opacity = 0;\n huesGroup.add(curBox)\n })\n return huesGroup\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"hueAxis = hueSamples.slice(0, hueSamples.length -1)\n .map(d=> {\n return {...d, \n r: d.r/255,\n g: d.g/255,\n b: d.b/255,\n h: d.hsl.h / 360,\n s: d.hsl.s, \n l: d.hsl.l,\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"slPlane = {\nconst slPlane = new THREE.Mesh(\n new THREE.PlaneGeometry(1, 1), \n new THREE.ShaderMaterial( {\n side: THREE.DoubleSide,\n depthWrite: false,\n transparent: true, \n opacity: .5,\n uniforms: {\n uOpacityCutoffZ: {value: 0.}, \n uOpacityCutoffX: {value: 0.01}, \n uHue: {value: 0.0}, \n uPlaneLength: {value: 1},\n uOpacityMultiplier: {value: 1}, \n }, \n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n } )\n ) \n slPlane.position.y = 0.5; \n slPlane.rotation.y = Math.PI * 0.5; \n return slPlane;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"lightnessLine = {\n const points = [new THREE.Vector3(0,0, 0.5), new THREE.Vector3(0,1,0.5)] \n const geometry = new THREE.BufferGeometry().setFromPoints( points );\n const line = new THREE.Line( geometry, \n new THREE.LineBasicMaterial({color: 0x444444, transparent: true, opacity: 0, depthWrite: false}) \n );\n return line\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"saturationLine = {\n const points = [new THREE.Vector3(0,0.5, 0.5), new THREE.Vector3(0,.5,-.5)] \n const geometry = new THREE.BufferGeometry().setFromPoints( points );\n const line = new THREE.Line( geometry, \n new THREE.LineBasicMaterial({color: 0x444444, transparent: true, opacity: 0, depthWrite: false}) \n );\n return line\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"### Chart Elements - Color Indicator","pinned":false,"hidden":false,"mode":"md"},{"id":1095,"value":"chart.colorUpdate(color, colorHSL)","pinned":true,"hidden":false,"mode":"ojs"},{"id":895,"value":"makeDot = function(radius, position, color) { \n const geometry = new THREE.SphereGeometry( radius, 32, 16 ); \n const material = new THREE.MeshBasicMaterial( { color: color, transparent: true , depthWrite: false} ); \n const sphere = new THREE.Mesh( geometry, material); \n sphere.position.set(...position)\n return sphere;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"highlightedDot = makeDot(defaultDotSize, [0,0,0], '#000000')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"updateDot = { // will rerun automatically when color updates. \n highlightedDot.material.opacity = animationDone ? 1 : 0; \n highlightedDot.material.color = new THREE.Color(color)\n highlightedDot.position.set(colorHSL.h/360, colorHSL.l, colorHSL.s - 0.5)\n renderer.render(scene,camera)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"makeVertices = function(h, s, l) {\n return { h: new THREE.Vector3( h ,0.5, 0.5 ), \n l: new THREE.Vector3( 0, l, 0.5 ), \n s: new THREE.Vector3( 0,0.5,s ), \n hl: new THREE.Vector3( h,l, 0.5 ), \n hs: new THREE.Vector3( h,0.5, s ), \n ls: new THREE.Vector3( 0, l, s ), \n hsl: new THREE.Vector3( h, l,s )\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"guidelineMaterial = new THREE.LineBasicMaterial({color: 0x888888, transparent: true, depthWrite: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"makeGuidelinePoints = function(vertices) {\n return [ \n vertices.hl, vertices.hsl, vertices.hs, vertices.h, vertices.hl,\n vertices.l,\n vertices.ls, vertices.hsl, vertices.hs, vertices.s, vertices.ls \n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"makeHSLGuidelines = function (material = guidelineMaterial, vertices = makeVertices()) {\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"},{"id":963,"value":"hslGuidelines = makeHSLGuidelines()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"updateGuidelines = { // rerender when color changes with\n hslGuidelines.material.opacity = animationDone ? 1 : 0; \n hslGuidelines.geometry.setFromPoints(makeGuidelinePoints(makeVertices(colorHSL.h/360, colorHSL.s-0.5, colorHSL.l )))\n renderer.render(scene, camera)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"### THREE.js setup","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"scene = { \n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xE9E9E9);\n scene.add( rgbAxesGroup );\n scene.add(huesGroup);\n scene.add(slPlane);\n scene.add(lightnessLine);\n scene.add(saturationLine);\n scene.add(highlightedDot);\n scene.add(hslGuidelines);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"camera = {\n const fov = 45;\n const aspect = chartWidth / chartHeight;\n const near = 0.2;\n const far = 3000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(0.8, 1.55, 2.55)\n camera.lookAt(0,0,0);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"renderer = { \n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, chartHeight);\n renderer.setPixelRatio(devicePixelRatio);\n\n invalidation.then(() => ( renderer.dispose()));\n renderer.render(scene, camera); \n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"### Animation Phases","pinned":false,"hidden":false,"mode":"md"},{"id":596,"value":"animationPhases = ['RGB Space', 'Color Wheel', 'Hue Axis', 'Lightness Axis', 'Saturation', 'HSL Space']","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"addPhases = function(selection){\n const phasesDiv = selection.append('div').style('position','absolute').style('top', '25px').style('left', '15px').attr('id', 'phase-texts')\n\n phasesDiv.selectAll('div').data(animationPhases).join('div')\n .attr('id', (d,i)=> 'phase' + i) \n .attr('class', (d,i)=> i == 0 ? 'active' : 'future')\n .text((d,i)=> (i+1) + '. ' + d)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"makeTl = function(phases) { \n const tl = gsap.timeline({ onComplete: () => {\n setTimeout(() => {\n d3.select('div#color-description').style('opacity',1)\n mutable animationDone = true\n }, 1000)\n }} )\n highlightPhaseText(tl, phases, 0) \n phase0(tl, phases)\n phase1(tl, phases)\n phase2(tl, phases)\n phase3(tl, phases)\n phase4(tl, phases)\n phase5(tl, phases)\n\n const play = document.querySelector(\"button#play\");\n const pause = document.querySelector(\"button#pause\");\n const restart = document.querySelector(\"button#restart\");\n const reverse = document.querySelector(\"button#reverse\");\n\n play.onclick = () => tl.play();\n pause.onclick = () => tl.pause();\n restart.onclick = () => {\n d3.select('div#color-description').style('opacity',0)\n mutable animationDone = false\n tl.restart()\n };\n reverse.onclick = () => {\n d3.select('div#color-description').style('opacity',0)\n mutable animationDone = false\n tl.reverse()\n };\n\n return tl\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"highlightPhaseText = function(tl, phases, n, tlPosition){\n tl.set(Array.from(phases.selectAll('div')),{\n className: (index)=>{\n if(index > (n+1)){ \n return 'future'\n } else if (index == (n+1)){\n return 'active' \n } else {\n return 'default'\n }}\n }, tlPosition)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"setCamera = function(tl, cameraPosition, duration, tlPosition = '' ){\n tl.to(camera.position, {\n duration: duration, \n x: cameraPosition[0], y: cameraPosition[1], z: cameraPosition[2], \n onUpdate: () => {\n camera.lookAt(0,0,0);\n renderer.render(scene, camera)\n }\n }, tlPosition)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"phase0 = function(tl, phases){\n \n highlightPhaseText(tl, phases, 0, '<') \n setCamera(tl, [2, 1.55, 2.55], 0.7)\n\n tl.to(huesGroup.children.map(d=> d.material), {\n duration:0.7, opacity: 1, stagger: 0.002, \n onUpdate: () => renderer.render(scene, camera)\n })\n .to(rgbAxesGroup.children.map(d=> d.material), {\n duration:0.5, opacity: 0, delay: 0.05, \n onUpdate: () => renderer.render(scene, camera)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"colorWheelOffset = Math.PI * 0.35","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"phase1 = function(tl, phases){\n tl.add('colorWheel', '+=1')\n highlightPhaseText(tl, phases, 1, 'colorWheel') \n setCamera(tl, [0, 0, 1], 0.7, 'colorWheel')\n\n tl.to(huesGroup.children.map(d=> d.position), {\n x: i => 0.2* Math.sin(colorWheelOffset + Math.PI * 2 * (1-hueAxis[i].h)),\n y: i => 0.2* Math.cos(colorWheelOffset + Math.PI * 2 * (1-hueAxis[i].h)),\n z: 0,\n // stagger: 0.001,\n duration:0.7, //delay: 0.1, \n onUpdate: () => renderer.render(scene, camera)\n },'colorWheel')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"phase2 = function(tl, phases){\n tl.add('hAxis', '+=1') // delay for 1 seconds before starting this group. \n highlightPhaseText(tl, phases, 2, 'hAxis') \n setCamera(tl, [1.6, 1.6, 1.6], 0.7, 'hAxis')\n \n tl.to(huesGroup.children.map(d=> d.position), {\n x: i => hueAxis[i].h,\n y: 0.5,\n z: 0.5,\n duration:0.7, delay: 0.1, \n onUpdate: () => renderer.render(scene, camera)\n }, 'hAxis')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"phase3 = function(tl, phases){\n tl.add('lightness', '+=1')\n highlightPhaseText(tl, phases, 3, 'lightness') \n tl.to(slPlane.material.uniforms.uOpacityCutoffZ, {\n value: 1/2, \n duration:0.7,\n onUpdate: () => renderer.render(scene, camera)\n }, 'lightness')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"phase4 = function(tl, phases){\n tl.add('saturation', '+=1') \n highlightPhaseText(tl, phases, 4, 'saturation') \n tl.to(slPlane.material.uniforms.uOpacityCutoffX, {\n value: 1, \n duration:0.7, delay: 0.6, \n onUpdate: () => renderer.render(scene, camera)\n }, 'saturation')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"mutable animationDone = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"### Shaders - for saturation/lightness plane","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"vertexShader = `\n varying vec2 vUv;\n void main() { \n vec4 modelPositions = modelMatrix * vec4(position, 1.0); \n gl_Position = projectionMatrix * viewMatrix * modelPositions;\n vUv = uv;\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"### CSS ","pinned":false,"hidden":false,"mode":"md"},{"id":1289,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":41,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"import { rgbAxesSamples, hueSamples } from '@osserman/color-spaces-rgb'","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"THREE = {\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 return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"gs = require('gsap@3.5.0/dist/gsap.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}