2d:null 2e:["$","title",null,{"children":"Soil Textures | Priya | Observable"}] 33:T972,sandSwatch = ({ colorProps, colorPropsNext, depth, width = 100 }) => { const dimensions = { width: width, height: depth * 2 }; const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) .style("background-color", getSoilColor(colorProps)); // gradient background const svgDefs = svg.append("defs"); const randomIdString = `soilGradient${colorProps.h}${colorProps.value}${ colorProps.value }${Math.random()}`; let soilGradient = svgDefs .append("linearGradient") .attr("id", randomIdString); soilGradient .attr("y1", "50%") .attr("y2", "90%") .attr("x1", "0%") .attr("x2", "0%"); //Set the color for the start (0%) soilGradient .append("stop") .attr("offset", "0%") .attr("stop-color", getSoilColor(colorProps)); //light blue //Set the color for the end (100%) soilGradient .append("stop") .attr("offset", "100%") .attr("stop-color", getSoilColor(colorPropsNext)); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 100) .attr("height", depth * 2) .style("fill", `url(#${randomIdString}`); const radiusArray = [6, 8, 5, 9, 10]; const offsetXArray = [1.4, 1.6, 0.6, 0.6, 0.6]; const offsetYArray = [0, 4, 3, 3, 3]; const nodesArray = [3, 3, 4, 2, 3]; const amplitudeArray = [2.7, 0, 0.1, 0.1, 0.1]; const shiftX = [-0.66, 0, -0.098, -0.098, -0.098]; const shiftY = [0.65, 0, -0.036, -0.036, -0.036]; const rowSpacing = 18; const colSpacing = 23; for (let row = 0; row < dimensions.height / rowSpacing; row++) { for (let col = 0; col < dimensions.width / (colSpacing - 6); col++) { let i = Math.floor(Math.random() * 5); //node type generator const nodeArray = createNodes( nodesArray[i], radiusArray[i], offsetXArray[i], offsetYArray[i] ); const cpArray = createControlPoints( nodeArray, radiusArray[i], shiftX[i], shiftY[i] ); svg .append("g") .attr( "transform", `translate(${17 * col + (Math.random() * 6 - 3)}, ${ Math.floor(rowSpacing * row) + (Math.random() * 6 - 3) })` ) .append("path") .attr("d", drawBlobPath(nodeArray, cpArray)) .attr("stroke", "none") .attr("opacity", 0.1); } } return svg.node(); }34:Tac3,siltSwatch = ({ colorProps, colorPropsNext, depth, width = 100 }) => { const svg = d3 .create("svg") .attr("width", width) // width is auto taken from notebook width .attr("height", depth * 2); // width is auto taken from notebook width // gradient background const svgDefs = svg.append("defs"); const randomIdString = `soilGradient${colorProps.h}${colorProps.value}${ colorProps.value }${Math.random()}`; let soilGradient = svgDefs .append("linearGradient") .attr("id", randomIdString); soilGradient .attr("y1", "50%") .attr("y2", "90%") .attr("x1", "0%") .attr("x2", "0%"); //Set the color for the start (0%) soilGradient .append("stop") .attr("offset", "0%") .attr("stop-color", getSoilColor(colorProps)); //light blue //Set the color for the end (100%) soilGradient .append("stop") .attr("offset", "100%") .attr("stop-color", getSoilColor(colorPropsNext)); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 100) .attr("height", depth * 2) .style("fill", `url(#${randomIdString}`); // radius a float btwn 2 and 6 let clayRadius, numNodes, clayOffsetX, clayOffsetY, clayAmplitude, clayShiftX, clayShiftY; let clayNodes, clayControlPoints; // make a set of blobs appear scatter across square randomly but within some set parameter of belowcontrols // calculations on placement should depend on radius? or center points can be randomly assigned for (let i = 0; i < 850; i++) { //setting up parameters clayRadius = parseFloat((Math.random() * 2 + 1).toFixed(2)); numNodes = Math.floor(Math.random() * 4 + 1); clayOffsetX = parseFloat((Math.random() * 2).toFixed(2)); clayOffsetY = parseFloat((Math.random() * 2).toFixed(2)); clayAmplitude = parseFloat((Math.random() * 0 + 0.5).toFixed(2)); clayShiftX = ((~~(Math.random() * 1) - 2) * Math.random() * clayAmplitude) / 2; clayShiftY = ((~~(Math.random() * 4) - 2) * Math.random() * clayAmplitude) / 2; //creating blobs clayNodes = createNodes(numNodes, clayRadius, clayOffsetX, clayOffsetY); clayControlPoints = createControlPoints( clayNodes, clayRadius, clayShiftX, clayShiftY ); svg .append("g") .attr("transform", `translate(${6 * (i % 20)},${Math.floor(i / 20) * 4})`) .append("path") .attr("d", drawBlobPath(clayNodes, clayControlPoints)) .attr("stroke", "none") .attr("opacity", 0.1); } // const shiftBlob = svg.append("g") // .attr("transform", `translate(5,${5})`); // const path = shiftBlob.append("path") // .attr("d", drawBlobPath(clayNodes, clayControlPoints)); return svg.node(); }35:T425,claySwatch = ({ colorProps, depth, width = 100 }) => { const svg = d3 .create("svg") .attr("width", width) // width is auto taken from notebook width .attr("height", depth * 2) // width is auto taken from notebook width .style("background-color", getSoilColor(colorProps)); const clayRadius = 1; const clayOffsetX = 0; const clayOffsetY = 0; const clayNodes = 3; const amp = 2.7; const clayShiftX = -0.66; const clayShiftY = 0.65; let i = 0; const nodeArray = createNodes( clayNodes, clayRadius, clayOffsetX, clayOffsetY ); const cpArray = createControlPoints( nodeArray, clayRadius, clayShiftX, clayShiftY ); for (let j = 0; j < 3500; j++) { svg .append("g") .attr( "transform", `translate(${3 * (j % 70) + Math.random() * 0.8 - 0.4},${ Math.floor(j / 70) * 3 + Math.random() * 0.9 - 0.45 })` ) .append("path") .attr("d", drawBlobPath(nodeArray, cpArray)) .attr("opacity", 0.15); } return svg.node(); }36:[] 31:{"id":"fc2dc94e62c812f9","slug":"soil-textures","title":"Soil Textures","thumbnail":"2bdd3d86fabc2f0735a3c6b765885c2c0038c226cd749ff2c3cd8ec6babe20af","access_level":"public","create_time":"$D2022-03-15T21:35:30.405Z","update_time":"$D2022-03-31T04:48:20.179Z","view_time":null,"first_public_time":"$D2022-03-15T21:41:53.369Z","has_unpublished_edits":null,"fork":{"id":"1a0d67203e698ce4","slug":"state-soils","title":"State Soils","owner":{"id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya"}},"stars":2,"starred":false,"owner":{"type":"team","id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":"starter_2024"},"version":1528,"publish_version":1528,"role":null,"authored":false,"authors":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null}],"members":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d96ea904d4d96a21","slug":"soil","title":"Soil","owner":{"id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya"}},"type":"notebook","body":{"title":"Soil Textures","cells":[{"id":0,"value":"# Soil Textures\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1435,"value":"This is still very much a work in progress, but the goal of this notebook is to create a bunch of randomly generated swatches representing common soil types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1442,"value":"## Swatch Types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"### Sand ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1150,"value":"html`\n

\n${sandSwatch({colorProps: {hue:\"2.5Y\", value: \"8\", chroma: \"4\"},colorPropsNext:{hue:\"2.5Y\", value: \"8\", chroma: \"4\"}, depth: 50}) }\n

\n${siltSwatch({colorProps: {hue:\"2.5Y\", value: \"8\", chroma: \"4\"},colorPropsNext:{hue:\"2.5Y\", value: \"8\", chroma: \"4\"}, depth: 50}) }\n

\n${claySwatch({\n colorProps: { hue: \"2.5Y\", value: \"8\", chroma: \"4\" },\n colorPropsNext: { hue: \"2.5Y\", value: \"8\", chroma: \"4\" },\n depth: 50\n})}\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"## Blob Generator Playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"a modified, glitchier version of Mathieu Jouhet's [Drawing and animating blobs with svg and javascript\n](https://observablehq.com/@daformat/drawing-blobs-with-svg) used to create organic, random soil particles of various sizes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"soiltextures = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, radius * 5]) // width is auto taken from notebook width\n .style(\"background-color\", \"floralwhite\");\n\n const shiftBlob = svg\n .append(\"g\")\n .attr(\"transform\", `translate(10,${radius / 4 + 4})`);\n const path = shiftBlob\n .append(\"path\")\n .attr(\"d\", drawBlobPath(nodes, controlpoints));\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof radius = Inputs.range([1, 100], {value: 5, step: 1, label: \"Radius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"viewof offsetX = Inputs.range([0, 5], {value: 1, step: .2, label: \"OffsetX\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof offsetY = Inputs.range([0, 20], {value: 5, step: 1, label: \"OffsetY\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"viewof totalNodes = Inputs.range([2, 6], {value: 3, step: 1, label: \"Nodes\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"viewof amplitude = Inputs.range([0, 10], {value: 5, step: .1, label: \"Amplitude\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"shiftX = (~~(Math.random() * 1) - 2) * Math.random() * amplitude / 2; \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"shiftY= (~~(Math.random() * 4) - 2) * Math.random() * amplitude / 2; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"nodes = createNodes(totalNodes,radius,offsetX,offsetY)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"controlpoints = createControlPoints (nodes,radius, shiftX, shiftY)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"function drawBlobPath(nodes, controlPoints) {\n return `\n M${nodes[nodes.length - 1].x} ${nodes[nodes.length - 1].y}\n ${nodes.map((n, i) => `\nC ${i === 0\n ? controlPoints[controlPoints.length - 1].c2x\n : controlPoints[i - 1].c2x\n} ${i === 0\n ? controlPoints[controlPoints.length - 1].c2y\n : controlPoints[i - 1].c2y\n}, ${controlPoints[i].c1x} ${controlPoints[i].c1y}, ${n.x} ${n.y}\n`).join('')}\n Z\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"function createControlPoints(nodes, radius, offsetX, offsetY) {\n // https://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves\n const idealControlPointDistance = (4 / 3) * Math.tan(Math.PI / (2 * totalNodes)) * radius;\n\n const cp0 = {\n c1x: nodes[0].x,\n c1y: nodes[0].y - idealControlPointDistance,\n c2x: nodes[0].x,\n c2y: nodes[0].y + idealControlPointDistance\n };\n\n return nodes.map(\n (n, i) => {\n if (i === 0) {\n return cp0;\n } else {\n const angle = -n.angle;\n const rotatedC1 = rotate(radius + offsetX, radius + offsetY, cp0.c1x, cp0.c1y, angle);\n const rotatedC2 = rotate(radius + offsetX, radius + offsetY, cp0.c2x, cp0.c2y, angle);\n return {\n c1x: rotatedC1[0],\n c1y: rotatedC1[1],\n c2x: rotatedC2[0],\n c2y: rotatedC2[1]\n };\n }\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"function createNodes (num, radius, offsetX, offsetY) {\n let nodes = [], \n width = (radius * 2),\n height = (radius * 2),\n angle,\n x,\n y;\n for (let i = 0; i < num; i++) {\n angle = (i / (num / 2)) * Math.PI; // Angle at which the node will be placed\n x = (radius * Math.cos(angle)) + (width / 2);\n y = (radius * Math.sin(angle)) + (width / 2);\n nodes.push({\n id: i,\n x: x + offsetX,\n y: y + offsetY,\n prevX: x + offsetX,\n prevY: y + offsetY,\n nextX: x + offsetX,\n nextY: y + offsetY,\n baseX: x + offsetX,\n baseY: y + offsetY,\n angle,\n debug: {}\n });\n }\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"function rotate(cx, cy, x, y, radians) {\n const cos = Math.cos(radians),\n sin = Math.sin(radians),\n nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,\n ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;\n return [nx, ny];\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"## References","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1521,"value":"Check out the [References + Inspiration](https://observablehq.com/@pmisner/soil-references) page for the full list. Special thanks to Mathieu Jouhet and his notebook [Drawing and animating blobs with svg and javascript\n](https://observablehq.com/@daformat/drawing-blobs-with-svg)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":987,"value":"## Data and Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1422,"value":"import {getSoilColor} from \"@pmisner/soil-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"