31:T66d,{ // Define the size and radius of the disc const width = 400; const height = 400; const radius = Math.min(width, height) / 2; const step = 1; // Step size, decrease for smoother gradations // Create a canvas element const canvas = d3 .create("canvas") .attr("width", width) .attr("height", height) .node(); const context = canvas.getContext("2d"); // Loop through each pixel of the canvas for (let y = -radius; y < radius; y += step) { for (let x = -radius; x < radius; x += step) { // Calculate the hue based on the angle const angle = Math.atan2(y, x); const hue = (angle * 180) / Math.PI + 180; // Calculate the lightness based on the radius const distance = Math.sqrt(x * x + y * y); const lightness = 100 - (distance / radius) * 100 * 0.5; const saturationsRange = selChroma.map((d) => (d / voxelSize) * 100); const lightnessRange = selTone.map((d) => (d / voxelSize) * 100); let color = "#fff"; if (colorMode === "HCT") { const hctColor = MCU.Hct.from(hue, saturationsRange[1], lightness); color = MCU.hexFromArgb(hctColor.argb); } if (colorMode === "HSL") { color = d3.hcl(hue, saturationsRange[1], lightness); } // Set the fill color of the pixel context.fillStyle = distance <= radius && lightness >= lightnessRange[0] && lightness <= lightnessRange[1] ? color : "#fff"; // context.fillStyle = color; context.fillRect(x + radius, y + radius, step, step); } } // Return the canvas element return canvas; }32:T5d3,{ // return; // Define the size and radius of the disc const width = 1000; const height = 400; const radius = Math.min(width, height) / 2; const step = 20; // Step size, decrease for smoother gradations // Create a canvas element const canvas = d3 .create("canvas") .attr("width", width) .attr("height", height) .node(); const context = canvas.getContext("2d"); // Loop through each pixel of the canvas for (let y = 0; y <= height; y += step) { for (let x = 0; x < width; x += step) { // Calculate the hue based on the angle // const angle = Math.atan2(y, x); const hue = (x / width) * 360 * 1.6 - 60; // Calculate the lightness based on the radius // const distance = Math.sqrt(x * x + y * y); const lightness = 100 - (y / height) * 100; const saturationsRange = selChroma.map((d) => (d / voxelSize) * 100); const lightnessRange = selTone.map((d) => (d / voxelSize) * 100); let color = "#fff"; if (colorMode === "HCT") { const hctColor = MCU.Hct.from(hue, saturationsRange[1], lightness); color = MCU.hexFromArgb(hctColor.argb); } if (colorMode === "HSL") { // color = d3.hcl(hue, saturationsRange[1], lightness); color = d3.hcl(hue, 100, lightness); } // Set the fill color of the pixel context.fillStyle = color; context.fillRect(x, y, step, step); } } // Return the canvas element return canvas; }33:Tcc7,scene = { // create a scene and set the background color to white const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // specify the dimensions of the color cube const size = voxelSize; // add voxels to the scene, color them according to their HSL position for (let x = selHue[0]; x <= selHue[1]; x++) { for (let y = selChroma[0]; y <= selChroma[1]; y++) { for (let z = selTone[0]; z <= selTone[1]; z++) { // create a voxel (cube) if ( x === selHue[0] || x === selHue[1] || y === selChroma[0] || y === selChroma[1] || z === selTone[0] || z === selTone[1] ) { const geometry = new THREE.BoxGeometry(1, 1, 1); const color = genColor(x, y, z, size); // set the color of the voxel based on its position const material = new THREE.MeshBasicMaterial({ color }); // create a mesh with the geometry and material const voxel = new THREE.Mesh(geometry, material); // position the voxel voxel.position.set( (x / size) * size - size / 2, (z / size) * size - size / 2, (y / size) * size - size / 2 ); // add the voxel to the scene scene.add(voxel); } } } } // add arrows for each axis const arrowSize = size + 1; const dir = new THREE.Vector3(1, 0, 0); const origin = new THREE.Vector3(0, 0, 0); const length = arrowSize; // let hex = 0xffff00; // let arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex); // scene.add(arrowHelper); // dir.set(0, 1, 0); // hex = 0xff00ff; // arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex); // scene.add(arrowHelper); // dir.set(0, 0, 1); // hex = 0x00ffff; // arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex); // scene.add(arrowHelper); // add text labels // const loader = new THREE.FontLoader(); // loader.load( // "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", // function (font) { // const geometry = new THREE.TextGeometry("Hue", { // font: font, // size: 0.4, // height: 0.1, // curveSegments: 12, // bevelEnabled: true, // bevelThickness: 0.15, // bevelSize: 0.3, // bevelSegments: 5 // }); // const material = new THREE.MeshBasicMaterial({ color: 0x000000 }); // const textMesh = new THREE.Mesh(geometry, material); // textMesh.position.set(arrowSize + 1, 0, 0); // scene.add(textMesh); // geometry = new THREE.TextGeometry("Chroma", { ...geometry.parameters }); // material = new THREE.MeshBasicMaterial({ color: 0x000000 }); // textMesh = new THREE.Mesh(geometry, material); // textMesh.position.set(0, arrowSize + 1, 0); // scene.add(textMesh); // geometry = new THREE.TextGeometry("Tone", { ...geometry.parameters }); // material = new THREE.MeshBasicMaterial({ color: 0x000000 }); // textMesh = new THREE.Mesh(geometry, material); // textMesh.position.set(0, 0, arrowSize + 1); // scene.add(textMesh); // } // ); return scene; }34:[] 2f:{"title":"HCT Color Space","cells":[{"id":0,"value":"md`# HCT Color Space\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"## ${colorMode} Color Cube","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"viewof colorMode = Inputs.radio([\"HCT\", \"HSL\", \"RGB\"], {\n label: \"Color Model\",\n value: \"HCT\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"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 while (true) {\n // cube.rotation.x += 0.01;\n // cube.rotation.y += 0.01;\n\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof selHue = interval([0, voxelSize], {\n step: 1,\n value: [0, voxelSize],\n label: colorMode === \"RGB\" ? \"R\" : \"Hue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"viewof selChroma = interval([0, voxelSize], {\n step: 1,\n value: [0, voxelSize],\n label:\n colorMode === \"RGB\" ? \"G\" : colorMode === \"HCT\" ? \"Chroma\" : \"Saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"viewof selTone = interval([0, voxelSize], {\n step: 1,\n value: [0, voxelSize],\n label: colorMode === \"RGB\" ? \"B\" : colorMode === \"HCT\" ? \"Tone\" : \"Lightness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"## ${colorMode} Hue Disc ","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"## Gradient","pinned":false,"hidden":false,"mode":"md"},{"id":183,"value":"viewof color1 = Inputs.color({ label: \"Color1\", value: \"#f2cf21\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof color2 = Inputs.color({ label: \"Color2\", value: \"#2f6ea2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"viewof gSteps = Inputs.range([3, 100], {\n value: 12,\n label: \"Gradient Steps\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"viewof grayscale = Inputs.range([0, 100], {\n value: 0,\n step: 1,\n label: \"desaturation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"gradient(hctScale2, \"HCT\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"gradient(hslScale2, \"HSL\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"gradient(rgbScale2, \"RGB\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"## Hue Scale","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"viewof chroma = Inputs.range([0, 100], {\n step: 1,\n value: 100,\n label: \"Chroma(Saturation)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof tone = Inputs.range([0, 100], {\n step: 1,\n value: 50,\n label: \"Tone(Lightness)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"gradient(hctScale, \"HCT\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"gradient(hslScale, \"HSL\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":665,"value":"function pickColors(colorScale, n) {\n const step = Math.floor(colorScale.length / n);\n let pickedColors = [];\n\n for (let i = 0; i < colorScale.length; i += step) {\n pickedColors.push(colorScale[i]);\n }\n pickedColors.push(colorScale.slice(-1)[0]);\n return pickedColors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"function gradient(colorScale, label, n = gSteps) {\n const colorScale2 = pickColors(colorScale, n - 1);\n return html`

${\n label\n ? `

${label}

`\n : \"\"\n }${colorScale2.map(\n (d) => html`

`\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"hctScale = d3.range(0, 256).map((hue) => {\n const color = MCU.Hct.from(hue, chroma, tone);\n const rgb = MCU.hexFromArgb(color.argb);\n return rgb;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"hslScale = d3.range(0, 256).map((hue) => {\n const color = d3.hsl(hue, chroma / 100, tone / 100);\n return color.formatHex();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"hct1 = MCU.Hct.fromInt(MCU.argbFromHex(color1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"hct2 = MCU.Hct.fromInt(MCU.argbFromHex(color2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"hctScale2 = d3.range(0, steps).map((i) => {\n const hue1 = hct1.hue;\n let hue2 = hct2.hue;\n hue2 = correctHue(hue1, hue2);\n\n const hue = hue1 * (1 - i / steps) + hue2 * (i / steps);\n const chroma = hct1.chroma * (1 - i / steps) + hct2.chroma * (i / steps); // Interpolate chroma\n const tone = hct1.tone * (1 - i / steps) + hct2.tone * (i / steps); // Interpolate tone\n\n const color = MCU.Hct.from(hue, chroma, tone); // Convert back to color\n const rgb = MCU.hexFromArgb(color.argb);\n return rgb;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"hslScale2 = d3.range(0, steps).map((i) => {\n const c1 = d3.hsl(color1);\n const c2 = d3.hsl(color2);\n c2.h = correctHue(c1.h, c2.h);\n \n const v = [\"h\", \"s\", \"l\"].map(\n (key) => (c1[key] * (steps - i) + c2[key] * i) / steps\n );\n const color = d3.hsl(v[0], v[1], v[2]);\n return color.formatHex();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"correctHue = (h1, h2) => {\n const diff = Math.abs(h1 - h2);\n if (diff > 180) {\n if (h1 > h2) {\n return h2 + 360;\n } else {\n return h2 - 360;\n }\n }\n return h2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"rgbScale2 = d3.range(0, steps).map((i) => {\n const c1 = d3.rgb(color1);\n const c2 = d3.rgb(color2);\n const v = [\"r\", \"g\", \"b\"].map((key) =>\n Math.round((c1[key] * (steps - i) + c2[key] * i) / steps)\n );\n // return v;\n const color = d3.rgb(v[0], v[1], v[2]);\n return color.formatHex();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"steps = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"voxelSize = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"function genColor(x, y, z, size) {\n const color = MCU.Hct.from(\n (x / size) * 360,\n (y / size) * 100,\n (z / size) * 100\n );\n const hex = MCU.hexFromArgb(color.argb);\n const threeColor = new THREE.Color();\n const rgb = `rgb(${Math.round((x / size) * 256)},${Math.round(\n (y / size) * 256\n )},${Math.round((z / size) * 256)})`;\n\n const h = x / size;\n const s = y / size;\n const l = z / size;\n\n if (colorMode === \"HSL\") threeColor.setHSL(h, s, l);\n else threeColor.set(colorMode === \"HCT\" ? hex : rgb);\n return threeColor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"cube = {\n const material = new THREE.MeshNormalMaterial();\n const geometry = new THREE.BoxGeometry(1, 1, 1);\n return new THREE.Mesh(geometry, material);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.x = 30;\n camera.position.z = 30;\n camera.position.y = 20;\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"import { interval } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"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"},{"id":92,"value":"MCU = import(\n \"https://cdn.skypack.dev/pin/@material/material-color-utilities@v0.2.7-MgMrT0nfmqoM3qMfy8sS/mode=imports,min/optimized/@material/material-color-utilities.js\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}