2e:null 2f:["$","title",null,{"children":"100 Days of Code 90- 3D vector graphics and animations. | Kim Fitter | Observable"}] 34:T436, function drawAxisIndicator(context, matrix) { context.save(); context.textBaseline = 'middle'; context.textAlign = 'center'; context.strokeStyle = '#05f60f'; context.fillStyle = '#05f60f'; var x = new Vec3([30.0, 0.0, 0.0]).multiply(matrix); context.fillText('X', x.element(0), -1 * x.element(1)); drawLineFromVectors( context, new Vec3([0.0, 0.0, 0.0]).multiply(matrix), new Vec3([20.0, 0.0, 0.0]).multiply(matrix) ); context.strokeStyle = '#f605ec'; context.fillStyle = '#f605ec'; var y = new Vec3([0.0, 30.0, 0.0]).multiply(matrix); context.fillText('Y', y.element(0), -1 * y.element(1)); drawLineFromVectors( context, new Vec3([0.0, 0.0, 0.0]).multiply(matrix), new Vec3([0.0, 20.0, 0.0]).multiply(matrix) ); context.strokeStyle = '#f60f05'; context.fillStyle = '#f60f05'; var z = new Vec3([0.0, 0.0, 30.0]).multiply(matrix); context.fillText('Z', z.element(0), -1 * z.element(1)); drawLineFromVectors( context, new Vec3([0.0, 0.0, 0.0]).multiply(matrix), new Vec3([0.0, 0.0, 20.0]).multiply(matrix) ); context.restore(); }35:T731,Mat3 = { function Mat3(elements) { if (elements.length !== 9) { throw new Error('Mat3 must have 9 elements'); } this.element = function(x, y) { if (x < 0 || x > 2) { throw new Error('x must be in the range 0 -2'); } if (y < 0 || y > 2) { throw new Error('y must be in the range 0 - 2'); } return elements[y * 3 + x]; }; this.multiply = function(other) { if (!(other instanceof Vec3) && !(other instanceof Mat3)) { throw new Error('vector must be either a Vec3 or Mat3'); } if (other instanceof Vec3) { var elements = []; for (var y = 0; y < 3; ++y) { var sum = 0; for (var x = 0; x < 3; ++x) { sum += other.element(x) * this.element(x, y); } elements.push(sum); } return new Vec3(elements); } else { var elements = []; for (var z = 0; z < 3; ++z) { for (var y = 0; y < 3; ++y) { var sum = 0; for (var x = 0; x < 3; ++x) { sum += other.element(y, x) * this.element(x, z); } elements.push(sum); } } return new Mat3(elements); } }; } Mat3.identity = function() { return new Mat3([ 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ]); } Mat3.rotationX = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ 1.0, 0.0, 0.0, 0.0, a, -b, 0.0, b, a, ]); }; Mat3.rotationY = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ a, 0.0, b, 0.0, 1.0, 0.0, -b, 0.0, a, ]); }; Mat3.rotationZ = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ a, -b, 0.0, b, a, 0.0, 0.0, 0.0, 1.0, ]); }; Mat3.isometric = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ a, 0, a, -b, 1, b, 0, 0, 0 ]); }; return Mat3; }36:Tb17,function draw (id, width, height, numAcross, itemWidth, itemSpacing, itemColor, backgroundColor, isDiamond, useAlternates, drawIcon) { const svg = d3.select(DOM.svg(width, height)); const minDim = itemWidth * numAcross + itemSpacing * (numAcross - 1); const margin = {top: (height - minDim) / 2, bottom: (height - minDim) / 2, left: (width - minDim) / 2, right: (width - minDim) / 2}; const rows = Array(numAcross).fill(0).map((x,i) => i); let positions = Array(numAcross * numAcross).fill(0).map((x,i) => ({row: Math.floor(i/numAcross), col: i % numAcross, display: true })); // identify the corners of the position data grid if (isDiamond) { const midFloor = Math.floor(numAcross / 2); const midCeil = Math.ceil(numAcross /2 ); positions.forEach(x => { if ((x.col > x.row + midFloor)// topRight || (x.col < midCeil - 1 - x.row) // topLeft || (x.row > x.col + midFloor) // bottomLeft || (x.col > numAcross + midFloor - 1-x.row)) { // bottomRight x.display = false; } }); } // remove corner elements from position grid for (let i = positions.length - 1; i >=0; i--) { if (positions[i].display === false) { positions.splice(i,1); } } // assign a number that will be used to rotate the starting position of alternating icons positions.forEach(x => { if (!useAlternates) { x.display = 0; } else if ((x.col % 2 === 0) ? (x.row % 2 === 0) : (x.row % 2 !== 0)) { x.display = 0 + ((x.row % 2 === 0) ? 0 : 2); } else { x.display = 1 + ((x.row % 2 === 0) ? 2 : 0); } }); // assign unique id if (id !== '') { svg.attr("id", id); } // draw background svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("height", height) .attr("width", width) .attr("fill", backgroundColor) // append a group per item position, rotated by the appropriate starting amount // the spinning animation is performed on the children of these groups const squares = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) .selectAll("g") .data(positions) .enter().append("g") .attr("class", d => "item") .attr("transform", d => `translate(${d.col * (itemWidth + itemSpacing) + itemWidth/2},${d.row * (itemWidth + itemSpacing) + itemWidth/2}) rotate(${90 * d.display})`); // draw one icon per 'square' , using a function listed under 'SVG shapes' const item = drawIcon(squares, itemWidth); item.attr("fill", itemColor); return svg.node(); }37:T841,// generate a unique set of styles for SVG/s located inside a #id element // this allows SVG/s located within different #id elements to have different types of animations function stylesheet (id, animationDuration, pausePercent = 0, animationTimingFunction = "linear") { // id: unique identifier that matches the SVG's #id or its parent's #id // animationDuration (time to make the full 360 degree rotation), ex: '5s' // pausePercent, ex: 50 (for a 50% pause after every 90 degree rotation) // animationTimingFunction, ex: 'ease' pausePercent = pausePercent === 100 ? 99.9 : pausePercent; return (html` ` ); }38:T6a2,chained = { "play"; const clamp = (a, b, v) => v < a ? a : v > b ? b : v; const height = Math.ceil(width * screen.height / screen.width); const svg = d3.select(DOM.svg(width/2, height/2)); const color_t1 = d3.interpolateRgb(color1, color2), color_t2 = d3.interpolateRgb(color2, color3), color_t3 = d3.interpolateRgb(color3, color1); const w = 20; const cols = Math.floor(width / w) const rows = Math.floor(height / w); const n = cols*rows; const sa = width / cols; const pad = clamp(.75, w, Math.floor((w/2) * 1/100)); const delay = 2500; const stroke_width = 0.5; const stroke = "#00000"; const delay_m = 7; const sel = svg.selectAll("rect") .data(d3.range(n)) .enter().append("rect") .attr("x", (d,i)=>(i % cols)*sa) .attr("y", (d,i)=>(i / cols | 0)*sa) // Start animation with fill color1 .attr ("fill",color1) .attr("width", w-pad*2) .attr("height", w-pad*2) .attr("stroke", stroke) .attr("stroke-width", stroke_width) .transition() .delay(function(d, i) { return i + Math.random() * n / delay_m; }) .ease(d3.easeLinear) .on("start", function repeat() { d3.active(this) .styleTween("fill", function() { return color_t1; }) .transition() .delay(delay) .styleTween("fill", function() { return color_t2; }) .transition() .delay(delay) .styleTween("fill", function() { return color_t3; }) .transition() .delay(delay) .on("start", repeat); }); while ("play") { yield svg.node(); } return svg.node(); }39:T490,html`

`3a:T49f,html`

`3b:T6b0,{ let ssSvg = d3.select('#solar-system'); let sortedSolarSystem = solarSystem.sort((a,b)=> a.distanceFromSun - b.distanceFromSun); const sun = sortedSolarSystem[0]; sortedSolarSystem = sortedSolarSystem.slice(1) const planetSizeScale = d3.scaleLinear().domain([2370, 142984]).range([5, 20]) const distFromSunScale = d3.scalePow() .exponent(0.1) .domain([57.9, 5906.4]) .range([60, 400]) sortedSolarSystem.forEach(planet => { const X = getRadialX(distFromSunScale(planet.distanceFromSun)); const Y = getRadialY(X, distFromSunScale(planet.distanceFromSun)); planet.X = X; planet.Y = Y; }); const solarSystemGroup = ssSvg.append('g').attr('transform', 'translate(450, 450)'); solarSystemGroup.append('circle').attr('r', 30).style('fill', sun.color); const planets = solarSystemGroup.selectAll('.planet').data(sortedSolarSystem); planets.join('circle') .classed('planet', true) .attr('r', d => planetSizeScale(d.diameter)) .attr('cx', d=> d.X) .attr('cy', d => d.Y) .style('fill', d => d.color); const orbits = solarSystemGroup.selectAll('.orbit').data(sortedSolarSystem); orbits.join( enter => enter .append('circle') .classed('orbit', true) .attr('stroke', d=> d.color) .attr('r', d => distFromSunScale(d.distanceFromSun)) .attr('stroke-width', 1), update => update.classed('orbit', true) .attr('stroke', d=> d.color) .attr('stroke-width', 1), exit => exit.remove() ) return sortedSolarSystem; }3c:[] 32:{"id":"1b180707082a427f","slug":"100-days-of-code-90-visualising-randomness","title":"100 Days of Code 90- 3D vector graphics and animations.","thumbnail":"49563dfdd89580c25b654923101fa920f19d91a7d1813dbc6eca041071876749","access_level":"public","create_time":"$D2020-03-16T00:38:01.192Z","update_time":"$D2020-05-21T05:28:53.210Z","view_time":null,"first_public_time":"$D2020-03-16T01:45:44.354Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7d7941efbb2313ba","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":"starter_2024"},"version":919,"publish_version":919,"role":null,"authored":false,"authors":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null}],"members":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"100 Days of Code 90- 3D vector graphics and animations.","cells":[{"id":0,"value":"md`# 100 Days of Code 90- 3D vector graphics and animations.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`For the remaining days of code challenge I would like to create animations using randomness and learn more about vector graphics. \nWe search for structure and predictability in many of the problems we try to solve with data. So being open minded about the randomness of things may let us see more. \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof color1 = colorPicker(\"#05ECF6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof color2 = colorPicker(\"#FCE86B\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"viewof color3 = colorPicker(\"#CCE86B\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"viewof color4 = colorPicker(\"#E5ECF6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`**Day 90**\n\nThese last 10 days will be trying out 3D vector graphics and animations.\n\nFollow this tutorial [Projection of 3D Models using JavaScript and HTML5 Canvas](https://observablehq.com/@kelleyvanevert/projection-of-3d-models-using-javascript-and-html5-canvas) for the code.\n\nFirst draw 3D cube with polygons and an oblique projection.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"{\t\t\n\tvar canvas = DOM.canvas(640, 250);\n\tvar context = canvas.getContext('2d');\n\n // Remap the position of the canvas object to the centre\n\tcontext.translate(canvas.width / 2, canvas.height / 2); \n // Set the object to be cube line colour to the blue palette colour\n\tcontext.strokeStyle =color1;\n\n\tvar size = canvas.width / 6;\n\tvar scale = size / 2;\n\tvar c = 0.5;\n\tvar fx = oblique.gx(scale, c);\n\tvar fy = oblique.gy(scale, c);\n \n // Then draw the polygons using HTML canvas closed path\n\n \n \n\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\tdrawPolygon(context, modelPolygons[i], fx, fy);\n\t}\n\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"oblique = ({\n gx: (scale, zc) => (vertex) => (vertex.x + vertex.z * zc) * scale,\n gy: (scale, zc) => (vertex) => (vertex.y + vertex.z * zc) * scale,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function drawPolygon2(context, polygon, matrix, fx, fy) {\n\tcontext.beginPath();\n\tvar vertex = Vertex.transform(polygon.vertex(0), matrix);\n\tcontext.moveTo(fx(vertex), -1 * fy(vertex));\n\tfor (var i = 1; i < polygon.count(); ++i) {\n\t\tvertex = Vertex.transform(polygon.vertex(i), matrix);\n\t\tcontext.lineTo(fx(vertex), -1 * fy(vertex));\n\t}\n\tcontext.closePath();\n\tcontext.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`**Day 91**\n\nSpin the cube with colourful vectors to get an idea of the 3rd dimension`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"{\n\tvar canvas = DOM.canvas(640, 300);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2);\n\tcontext.strokeStyle = color1;\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar step = 0;\n\n\trender(function() {\n\t\tcontext.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height);\n\t\tvar transform = Mat3.rotationZ(Math.PI * step / 356)\n\t\t\t.multiply(Mat3.rotationY(Math.PI * step / 356*2))\n\t\t\t.multiply(Mat3.rotationX(Math.PI * step++ / 356*2));\n\n\t\tvar fx = function(vertex) {\n\t\t\treturn vertex.x * scale;\n\t\t};\n\n\t\tvar fy = function(vertex) {\n\t\t\treturn vertex.y * scale;\n\t\t};\n\n\t\tdrawAxisIndicator(context, transform);\n\n\t\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\t\tdrawPolygon2(context, modelPolygons[i], transform, fx, fy);\n\t\t}\n\t});\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"\nfunction drawLineFromVectors(context, a, b) {\n\tcontext.beginPath();\n\tcontext.moveTo(a.element(0), -1 * a.element(1));\n\tcontext.lineTo(b.element(0), -1 * b.element(1));\n\tcontext.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"function render (f) {\n var step = () => {\n f();\n window.requestAnimationFrame(step);\n };\n window.requestAnimationFrame(step);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"orthogonal = ({\n gx: (scale) => (vertex) => vertex.x * scale,\n gy: (scale) => (vertex) => vertex.y * scale,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"function drawPolygon(context, polygon, fx, fy) {\n context.beginPath();\n\n // The -1 * is used to flip the y coordinate as y value increases\n // as you move down the canvas.\n context.moveTo(fx(polygon.vertex(0)), -1 * fy(polygon.vertex(0)));\n for (var i = 1; i < polygon.count(); ++i) {\n context.lineTo(fx(polygon.vertex(i)), -1 * fy(polygon.vertex(i)));\n }\n context.closePath();\n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"modelPolygons = [\n\tnew Polygon([\n\t\tmodelVerts[0],\n\t\tmodelVerts[1],\n\t\tmodelVerts[5],\n\t\tmodelVerts[4]\n\t]), // FRONT\n\tnew Polygon([\n\t\tmodelVerts[2],\n\t\tmodelVerts[3],\n\t\tmodelVerts[7],\n\t\tmodelVerts[6]\n\t]), // REAR\n\tnew Polygon([\n\t\tmodelVerts[0],\n\t\tmodelVerts[1],\n\t\tmodelVerts[3],\n\t\tmodelVerts[2]\n\t]), // BOTTOM\n\tnew Polygon([\n\t\tmodelVerts[4],\n\t\tmodelVerts[5],\n\t\tmodelVerts[7],\n\t\tmodelVerts[6]\n\t]), // TOP\n\tnew Polygon([\n\t\tmodelVerts[0],\n\t\tmodelVerts[2],\n\t\tmodelVerts[6],\n\t\tmodelVerts[4]\n\t]), // LEFT\n\tnew Polygon([\n\t\tmodelVerts[1],\n\t\tmodelVerts[3],\n\t\tmodelVerts[7],\n\t\tmodelVerts[5]\n\t]) // RIGHT\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function Polygon(vertices) {\n this.count = function() {\n return vertices.length;\n };\n this.vertex = function(i) {\n if (i < 0) {\n throw new Error('Vertex index must be a positive integer')\n }\n if (i >= vertices.length) {\n throw new Error('Vertex index out of bounds');\n }\n return vertices[i];\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"modelVerts = vertices","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"class Vertex {\n constructor (x, y, z) {\n this.x = x;\n this.y = y;\n this.z = z;\n }\n \n static transform (vertex, matrix) {\n\treturn Vertex.fromVec3(\n\t\tmatrix.multiply(\n\t\t\tVertex.toVec3(vertex)\n\t\t)\n\t);\n }\n\n static toVec3 (vertex) {\n\treturn new Vec3([vertex.x, vertex.y, vertex.z]);\n }\n\n static fromVec3 (vector) {\n\treturn new Vertex(vector.element(0), vector.element(1), vector.element(2));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function Vec3(elements) {\n\n\tif (elements.length !== 3) {\n\t\tthrow new Error('Vec3 must have 3 elements');\n\t}\n\n\tthis.element = function(i) {\n\n\t\tif (i < 0 || i > 2) {\n\t\t\tthrow new Error('i must be in the range 0 - 2');\n\t\t}\n\n\t\treturn elements[i];\n\t};\n\n\tthis.multiply = function(matrix) {\n\n//\t\tif (!(matrix instanceof Mat3)) {\n//\t\t\tthrow new Error('matrix must be a Mat3');\n//\t\t}\n\n\t\treturn matrix.multiply(this);\n\t}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"vertices = [\n new Vertex(-1.0, -1.0, -1.0), // Front-Bottom-Left\n new Vertex( 1.0, -1.0, -1.0), // Front-Bottom-Right\n new Vertex(-1.0, -1.0, 1.0), // Rear-Bottom-Left\n new Vertex( 1.0, -1.0, 1.0), // Rear-Bottom-Right\n new Vertex(-1.0, 1.0, -1.0), // Front-Top-Left\n new Vertex( 1.0, 1.0, -1.0), // Front-Top-Right\n new Vertex(-1.0, 1.0, 1.0), // Rear-Top-Left\n new Vertex( 1.0, 1.0, 1.0) // Rear-Top-Right\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`**Day 92**\n\nTrying out another library pimJS, which creates a [a single-page fast-loading protected html experience](https://enkimute.github.io/packaging3Dcontent.pimJS/) , load 3D content using the pimjs-element html tag.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"html2`\nmyDir.scene.addParticle({\n parent : this.obj.inst,\n Version : 8,\n alphaName : 'https://enkimute.github.io/res/star.jpg',\n birthRate : 40, \n Intensity : 20,\n lifeTime : 5,\n Size : 0.55,\n velocity : 0.5,\n randomColor : true,\n GravityY : -0.65,\n Weight : 0.5,\n direction : [0,1,0],\n coneAngle : 1,\n scale : [0.01,0.01,0.01]\n});\n\n\n\n``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"\nmd`**Day 93**\n\nAnimating with a CSS example. Are these rotating petals or rotating circles?\n\nhttps://observablehq.com/@lemonnish/rotating-geometry\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"{\n const itemWidth = 50;\n \n // set spacing, to be frequent dashes\n const numDashesPerSection = 1;\n const dashRatio = 1;\n const gapLength = 5;\n const lineLength = gapLength * dashRatio;\n let dashArray = Array(numDashesPerSection * 2 + 1).fill(0);\n dashArray = dashArray.map((x,i) => {\n if (i === dashArray.length - 1) {\n return gapLength;\n } else {\n return (i % 2 === 0) ? lineLength : gapLength;\n }\n })\n \n return (html`\n ${stylesheet('sashiko', `20s`, 20, \"ease-in-out\",\"none\")}\n \n \n ${draw('sashiko', width, 500, 8, 100, 0, \"none\", color1, true, true, eye)}\n `\n)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"eye = (group, size) => {\n return group.append(\"path\")\n .attr(\"d\", d => `M ${-size/2} ${-size/2} \n A ${size} ${size} 90 0 1 ${size/2} ${size/2} \n A ${size} ${size} 90 0 1 ${-size/2} ${-size/2} Z`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"pim=require('https://enkimute.github.io/res/pim-min-jr.js').catch(()=>{return window.pimDirector})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"html2 = function(string) {\n function toPRE(x,s) { \n var xt = x[0]; if (!xt) return;\n if (xt.length>150 && !xt.match(/\\n/)) xt = xt.replace(/\\s+(\\S+=\".*?\")/g,'\\n $1').replace(/([^\\n])\\>\\<\\/pimjs\\-element\\>/,'$1\\n>');\n if (s!==false) xt=xt.replace(/ *id=\".*?\"| *style=\".*?\"/g,'');\n xt = xt.replace(/\\$1=');\n xt = xt.replace(/=\"\"/g,\"\");\n xt = xt.replace(/=\"(.*?)\"/g,'=\"$1\"');\n return `

${xt.replace(/\\.pimJS/,'.lws').replace(/=\"\"/g,'').replace(/\\n\\s*\\n/g,'\\n')}

`;\n }\n return html`

${toPRE(string)+string[0]}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"md`**Day 94**\n\nChained transitions with D3 and own colour palette and parameters. I removed the checkboxes and options to simplify the code.\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`**Day 95**\n\nSwitching away from vector graphics briefly using HTML and CSS to understand grids and boxes.\n\nThe next mini project creating random coloured boxes was inspired by [CSS Grid Mondrian](https://observablehq.com/@tmcw/css-grid-mondrian) based on [Piet Mondrian](https://en.wikipedia.org/wiki/Piet_Mondrian).\n\nLet's build up the box design.\n\nFirst define a random [Mondrian colour palette]( https://www.color-hex.com/color-palette/27086) generator:\n\n#fff001\t(255,240,1)\n#ff0101\t(255,1,1)\n#0101fd\t(1,1,253)\n#f9f9f9\t(249,249,249)\n#30303a\t(48,48,58)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"mondrianColor = () => {\n let colors = [\n '#fff001',\n '#ff0101',\n '#0101fd',\n '#30303a'\n ];\n return colors.sort(() => Math.random() - 0.5)[0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md`Define the HTML and CSS Styling for a container class with a box.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"html`\n \n\n \n

\n \n

\n\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"md`Define the HTML and CSS Styling for a container class with a black background with 5 boxes using the grid.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"md`Now with colour padding and borders.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`And then create some boxes in D3 now with SVG as a quick refresh`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"{\n const width = 200;\n const height = width/2;\n const a=10;\n const b=60;\n const c=100;\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"rect\")\n .style(\"fill\",mondrianColor())\n .attr(\"x\", a)\n .attr(\"y\", a)\n .attr(\"width\", c)\n .attr(\"height\", c)\n \n svg.append(\"rect\")\n .style(\"fill\",mondrianColor())\n .attr(\"x\", a)\n .attr(\"y\", b)\n .attr(\"width\", c)\n .attr(\"height\", c)\n \n svg.append(\"rect\")\n .style(\"fill\",mondrianColor())\n .attr(\"x\", b)\n .attr(\"y\", a)\n .attr(\"width\", c)\n .attr(\"height\", c)\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"md`**Day 96**\n\nCreating an orbit with SVG using this notebook as inspiration. https://observablehq.com/@kirangadhave/lab-javascript-and-d3-basics\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"solarSystem = [\n{name: 'Mercury', diameter: 4879, meanTemperature: 167, distanceFromSun: 57.9, color: '#C0BEC7'},\n{name: 'Venus', diameter: 12104, meanTemperature: 464, distanceFromSun: 108.2, color: '#F5B16B'},\n{name: 'Earth', diameter: 12756, meanTemperature: 15, distanceFromSun: 149.6, color: '#24BCEA'},\n{name: 'Mars', diameter: 6792, meanTemperature: -66, distanceFromSun: 227.9, color: '#FD753E'},\n{name: 'Jupiter', diameter: 142984, meanTemperature: -110, distanceFromSun: 778.6, color: '#F49A30'},\n{name: 'Saturn', diameter: 120596, meanTemperature: -140, distanceFromSun: 1433.5, color: '#FBDB78'},\n{name: 'Uranus', diameter: 51118, meanTemperature: -195, distanceFromSun: 2872.5, color: '#88DBD1'},\n{name: 'Neptune', diameter: 49528, meanTemperature: -200, distanceFromSun: 4495.1, color: '#FFAC65'},\n{name: 'Pluto', diameter: 2370, meanTemperature: -225, distanceFromSun: 5906.4, color: '#6560C6'},\n{name: 'Sun', diameter: 1392530, meanTemperature: 5504, distanceFromSun: 0, color: '#ffff00'}\n]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"function getRadialX(max) {\n const X = Math.random() * max;\n if (Math.random() > 0.5)\n return X;\n return -X;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"function getRadialY(X, R) {\n const Y = Math.sqrt(R*R - X*X);\n if (Math.random() > 0.5) return Y;\n return -Y; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {colorPicker} from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 33:"$32:body"