31: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; }32: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; }33:[] 2f:{"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"},{"id":1564,"value":"viewof rotate = html`