29:null 2a:["$","title",null,{"children":"SVG curving flower. | Brett Cooper | Observable"}] 2f:T906,viewof SVG = { now // << a while(TRUE){} could also do the loop but using observables now triggers this cell to update // using a while loop could control the itterations peformed let all_points = [] let ang = 0 let pmin = -40 // min size of the circles bumps let pmax = 60 // max size of the circles bumps let peek = pmax // start size of the circles bumps let gap = 10 let cx = W/2 // circle center let cy = H/2 let R = (H/2)-80 // radius of the circle with some padding for the drop shadow // the flower could be calulated once and then a transisition used to rotate? for(let depth=1;depth<=level;depth++){ // console.log('rd',R, R/depth, peek/depth) let QTau = TAU/4*depth // Quarter Tau 1/4 of the circle in radiuns let points = [] for(let i=0;i{t||createCanvas(720,720)\nt+=.01\nnoStroke()\nfor(d=400;d>0;d-=9){drawingContext.filter=\"drop-shadow(0 0 30Q#A\"+hex(d,3)+\")\"\nbeginShape()\nfor(r=0;r<=7;r+=PI/7)curveVertex(cos(r)*(D=noise(sin(r*3+d/9),d/99+t)*2)*d+360,sin(r)*D*d+360)\nendShape()}}\n#つぶやきProcessing\n~~~\ntodo: convert the drop shadow\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"viewof useColour = Select(colour, {label: \"Select Colour:\", multiple: false, value:'interpolatePlasma'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"viewof SVG3 = {\n \n const svg = d3.create('svg')\n .attr(\"width\", 720)\n .attr(\"height\", 720)\n \n const main3 = svg.append(\"g\").attr('id','main3')\n \n for(let draw = 0;draw d.x)\n .y(d => d.y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"noise_points = {\n now\n let D = 0\n let t = np[0]\n let ap =[]\n for(let d=399;d>0;d-=9){\n // console.log('depth',d)\n let p = []\n for(let r=0;r<=7;r+=Math.PI/7){\n p.push({x:Math.cos(r)*(D=noise(Math.sin(r*3+d/9),d/99+t)*2)*d+360,y:Math.sin(r)*D*d+360})\n }\n ap.push(p)\n }\n np[0]+=0.02\nreturn ap\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"np= [0] // avoiding using mutable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"colour = [\n \"interpolateBrBG\",\"interpolatePRGn\",\"interpolatePiYG\",\"interpolatePuOr\",\"interpolateRdBu\",\"interpolateRdGy\",\n \"interpolateRdYlBu\",\"interpolateRdYlGn\",\"interpolateSpectral\",\"interpolateBlues\",\"interpolateGreens\",\n \"interpolateOranges\",\"interpolatePurples\",\"interpolateReds\",\"interpolateTurbo\",\"interpolateViridis\",\n \"interpolateInferno\",\"interpolateMagma\",\"interpolatePlasma\",\"interpolateCividis\",\"interpolateWarm\",\"interpolateCool\",\n \"interpolateCubehelixDefault\",\"interpolateBuGn\",\"interpolateBuPu\",\"interpolateGnBu\",\"interpolateOrRd\",\"interpolatePuBuGn\",\n \"interpolatePuBu\",\"interpolatePuRd\",\"interpolateRdPu\",\"interpolateYlGnBu\",\"interpolateYlGn\",\"interpolateYlOrBr\",\n \"interpolateYlOrRd\",\"interpolateRainbow\",\"interpolateSinebow\"\n]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"md`# Done in two parts:\n~~~js\nMath.cos(ang+(TAU/4 * d))\n~~~\nThat controls the start angel in radiuns. \nThe addition of (TAU / 4 \t* d) to the *ang*le gives a quarter turn to each depth drawn. \n\n\nThe height of each **peeks** controls the gap between levels\n\nso the step/gap equasion is ** R = R - ((peek*0.8)/depth) **\n\n---\n\n## how they got x,y points with perlin noise\n~~~js\ncurveVertex(cos(r)*(D=noise(sin(r*3+d/9),d/99+t)*2)*d+360,sin(r)*D*d+360)\n~~~\nas that is making the x and y cords.\n~~~js\n\nx = cos(radius_point)*(let D=noise(sin(radius_point*3+depth/9),depth/99+turn_tilt)*2)*depth+360\n D is a number between 0 - 1...........................)*2)*depth+360\n\ny = sin(radius_point)*D*depth+360)\n~~~\n\n---\n\nissues:\nMaking the svg wider messing the image as the scaling looks best at 512. It's due to pmin and pmax being hard coded.\n\nPetals have similaity pattern evey four cycles. ie: 12 ,14 ,16 ,18 \nI think that's due to the 1/4 rotutation of the levels.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md`# Appendix\n### research:\n\nLooking at how to curve the lines. \n\n[3-shape#areaRadial](https://github.com/d3/d3-shape#areaRadial) effect looks good but too high level for my needs.\n\nhttps://observablehq.com/@d3/d3-path\n\nhttps://github.com/d3/d3-shape#curves\n\nThis [d3-line](https://observablehq.com/@d3/d3-line#lc) example this was useful and what I went with to draw my line.\n\n## SVG infomation:\nhttps://developer.mozilla.org/en-US/docs/Web/SVG/Index \nhttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Core\n\n---\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"style = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"TAU = Math.PI*2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"W = 512","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"H = W","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"import {Range, Select} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"import {perlin2 as noise} from \"@mbostock/perlin-noise\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"