2f:[] 2d:{"title":"\"Thickened\" line with SVG filled Bezier","cells":[{"id":0,"value":"# \"Thickened\" line with SVG filled Bezier","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"A simple bezier curve, using `` with the C command. \nSee [this explanation](https://css-tricks.com/svg-path-syntax-illustrated-guide/) about 1/3 of the way down the page.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":12,"value":"viewof point1 = Inputs.range([0, 300], {label: \"left control point X\", step: 1, value: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof point2 = Inputs.range([0, 300], {label: \"right control point X\", step: 1, value: 250})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof height = Inputs.range([0, 100], {label: \"height\", step: 1, value: 100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"---\n## \"thicken\" a line using this\nNow draw on y=0 for control (using the to be able to easily go negative (up)) \nMirror the coordinates about the line (using +/- flip about 0 for vertical coordinates makes this easy) \nand draw a line (L) to connect them, and close (Z) to start. \nThen give it a fill. \nThe `` object is just there for visual reference and can be removed.","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":163,"value":"M: move to coordinate without drawing \nC: Bezier curve. Sequence is handle_control_point, handle_control_point, ending_point_of_curve \nL: Draw straight line to coordinate \nZ: Close polygon","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"---\n## Now turn the inputs into variables\nincluding location and rotation to be able to use this in many places.","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":110,"value":"lineStartX = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"lineLengthX = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"startHalfWidth = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"endHalfWidth = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"innerControlPointHalfWidth = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"leftControlPointX = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"rightControlPointX = 270","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"translateX = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"translateY = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"rotate = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"### ^^ Edit the variable values to see the result","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"### Then use code / data / calculations to set these values and instantiate.\nof course we can create a function that generates this given inputs.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W2f","stdlib":"1","titling":"auto"}