2c:null 2d:["$","title",null,{"children":"Color Solids: RGB and HSL | Sumant Pattanaik | Observable"}] 32:T6f8,colorCubeRenderable = ({ vert: ` precision mediump float; attribute vec3 position, color; uniform mat4 projection, view; uniform vec3 eye; uniform float maxDistance; varying vec3 fragColor; varying float fragSize; float getPointSize(){ // Constants (tweakable): const float minPointScale = 0.1; const float maxPointScale = 0.9; const float maxPointSize = 18.; // Calculate point scale based on distance from the viewer // to compensate for the fact that gl_PointSize is the point // size in rasterized points / pixels. float cameraDist = distance(position, eye); float pointScale = 1.0 - (cameraDist / maxDistance); pointScale = clamp(pointScale, minPointScale, maxPointScale); return maxPointSize*pointScale; } void main() { fragSize = getPointSize(); gl_PointSize = fragSize; fragColor = color; gl_Position = projection * view * vec4(position, 1); }`, frag: ` precision mediump float; varying vec3 fragColor; varying float fragSize; void main () { float r = 0.0, delta = 0.0, alpha = 1.0; vec2 cxy = 2.0 * gl_PointCoord - 1.0; r = dot(cxy, cxy); if (r > 1.0) { discard; } gl_FragColor = vec4(fragColor,1.); } `, attributes: { position: colorPositions[+solidOption], color: colors[+solidOption], }, count: colorPositions[+solidOption].length, uniforms: { view: regl.prop("viewMatrix"), eye: regl.prop("eye"), projection: perspectiveMatrix[+solidOption], maxDistance: maxDistances[+solidOption] }, primitive: "point" }) 33:[] 30:{"id":"35847958838b4d8a","slug":"color-solids-rgb-and-hsl","title":"Color Solids: RGB and HSL","thumbnail":"d30bd84c0caaa4908a6d27ee5040c1f9be81f9344c453b6bc2d7461096161632","access_level":"public","create_time":"$D2020-10-31T17:21:00.830Z","update_time":"$D2020-10-31T23:57:47.690Z","view_time":null,"first_public_time":"$D2021-03-29T14:11:34.188Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":"starter_2024"},"version":354,"publish_version":354,"role":null,"authored":false,"authors":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null}],"members":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"baff35547a2323b5","slug":"cap-5738","title":"Data Visualization Using D3 and Ploty.js","owner":{"id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik"}},"type":"notebook","body":{"titling":"auto","title":"Color Solids: RGB and HSL","cells":[{"id":0,"value":"md`# Color Solids: RGB and HSL`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"viewof solidOption = radio ({\n options: [\n {label: \"RGB\", value: 0}, \n {label: \"HSL\", value: 1}\n ], \n value:0,\n description:\"Choose Solid\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"myCanvas = html `