2d:null 2e:["$","title",null,{"children":"Sequentializing RGB Color Space | Paul Chaikin | Observable"}] 33:T467,{ const renderScale = 1; const svg = DOM.svg(width, height); const svgSelection = d3.select(svg).append('g') .attr("transform", `translate (${width/2} ${height/2}) scale(${renderScale},${-renderScale})`); svgSelection.append('rect') .attr('width', width) .attr('height', height) .attr('x', -width/2) .attr('y', -height/2) .style('opacity', 1) //.style('fill', '#003153') svgSelection.selectAll('.cubes') .data(v3D0) .join('path') .attr('class', 'cubes') .style('stroke-width', strokeWidth) .style('stroke', d => d3.rgb(d.rgb.r,d.rgb.g,d.rgb.b)) .style('fill', d => d3.rgb(d.rgb.r,d.rgb.g,d.rgb.b)) .style('stroke-opacity', .5) .style('fill-opacity', fillOpacity) .attr('d', d => { return units.map(q => { return `M ${q[0].x + d.xyz.x} ${q[0].y + d.xyz.y} L ${q[1].x + d.xyz.x} ${q[1].y + d.xyz.y} L ${q[2].x + d.xyz.x} ${q[2].y + d.xyz.y} L ${q[3].x + d.xyz.x} ${q[3].y + d.xyz.y} L ${q[0].x + d.xyz.x} ${q[0].y + d.xyz.y}`; }) .join(' ') }) return svg; }34:T814,function getHilbertCube(initialX, initialY, initialZ, iterations) { let coordinates = []; let origin = ({x: initialX, y: initialY, z: initialZ}) let counter = 0; let step = Math.pow(2,(counter - 1)); coordinates.push(origin); while(counter < iterations) { // reorient then shift a copy of the current path to each octant let q1 = coordinates.map(coord => zAxisRotation(xAxisRotation(coord, 90), 90)) .map(c => ({x: c.x - step, y: c.y - step, z: c.z - step})); let q2 = coordinates.map(coord => zAxisRotation(yAxisRotation(coord, -90), -90)) .map(c => ({x: c.x + step, y: c.y - step, z: c.z - step})); let q3 = coordinates.map(coord => zAxisRotation(yAxisRotation(coord, -90), -90)) .map(c => ({x: c.x + step, y: c.y + step, z: c.z - step})) let q4 = coordinates.map(coord => zAxisRotation(xAxisRotation(coord, 180), -90)) .map(c => ({x: c.x - step, y: c.y + step, z: c.z - step})) .reverse() let q5 = coordinates.map(coord => zAxisRotation(xAxisRotation(coord, 180), -90)) .map(c => ({x: c.x - step, y: c.y + step, z: c.z + step})) .reverse() let q6 = coordinates.map(coord => zAxisRotation(yAxisRotation(coord, 90), -90)) .map(c => ({x: c.x + step, y: c.y + step, z: c.z + step})) let q7 = coordinates.map(coord => zAxisRotation(yAxisRotation(coord, 90), -90)) .map(c => ({x: c.x + step, y: c.y - step, z: c.z + step})) let q8 = coordinates.map(coord => zAxisRotation(xAxisRotation(coord, -90), 90)) .map(c => ({x: c.x - step, y: c.y - step, z: c.z + step})) //concatenate coordinates = q1.concat(q2, q3, q4, q5, q6, q7, q8); //increment counter += 1; step = Math.pow(2,(counter - 1)); } // shift and rescale coordinates to correctly span RGB color space var scalingFactor = 2**(8-n); var objectCoordinates = coordinates.map(d => { var x = scalingFactor * (d.x + step); var y = scalingFactor * (d.y + step); var z = scalingFactor * (d.z + step); return {x, y, z}; }) return objectCoordinates; }35:[] 31:{"id":"797ae3e7ece0fec6","slug":"sequentializing-rgb-color-space","title":"Sequentializing RGB Color Space","thumbnail":"941723276c7e627704bb9e83d55cdbd322352a110c6185b64fc75ca9887615ae","access_level":"public","create_time":"$D2019-09-16T18:59:27.330Z","update_time":"$D2019-09-23T21:59:57.167Z","view_time":null,"first_public_time":"$D2019-09-23T18:37:17.635Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"f3e403e35f097161","login":"pamacha","name":"Paul Chaikin","avatar_url":"https://avatars-next.observableusercontent.com/649b970c76896a3916ec5b0974cc8ca651b4afa19618672aacf2584be5a52253","tier":"starter_2024"},"version":1928,"publish_version":1928,"role":null,"authored":false,"authors":[{"type":"individual","id":"22e199567a0e1d31","login":"pamacha","name":"Paul Chaikin","avatar_url":"https://avatars-next.observableusercontent.com/649b970c76896a3916ec5b0974cc8ca651b4afa19618672aacf2584be5a52253","tier":null}],"members":[{"type":"individual","id":"22e199567a0e1d31","login":"pamacha","name":"Paul Chaikin","avatar_url":"https://avatars-next.observableusercontent.com/649b970c76896a3916ec5b0974cc8ca651b4afa19618672aacf2584be5a52253","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Sequentializing RGB Color Space","cells":[{"id":0,"value":"md`# Sequentializing RGB Color Space\n\nRGB color space, as sampled along a 3D [Hilbert curve](http://mathworld.wolfram.com/HilbertCurve.html). You can modify the snake-length, total number of cubes, face opacity, edge width, and orientation with the sliders below. Click *Rotate* to spin the cube 360° around a central axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"viewof rotate = html`