3f:null 40:["$","title",null,{"children":"p5 to svg, red Pythagoras tree | Brett Cooper | Observable"}] 46:T655,# p5 to svg, [red Pythagoras tree](https://twitter.com/inaba_darkfox/status/1528387543787786242) ## by 黒狐 [inaba_darkfox](https://twitter.com/inaba_darkfox) https://twitter.com/inaba_darkfox/status/1528387543787786242

```js z=0; setup=_=>{ createCanvas(800,600); noStroke(); colorMode(HSB,99); background(0); (t=translate)(400,440); u=d=>{ z++; fill(z/2,99-z*4,99); square(0,0,d); push(); (r=rotate)(-.6435); t(0,-d*.8); if(d*4>5)u(d*.8); t(d*1.4,d*.8); r(PI/2); if(d*3>5)u(d*.6); pop(); z-- }; u(120) } #つぶやきProcessing ```

https://openprocessing.org/sketch/1582207 red Pythagoras tree by mathfoxLab // Description. // Recursive series conclusion. // I'd never drawn snowflakes or anything this way before, so... // I thought of it and tried a few things. It was fun! // I didn't think I could get Mengar to work (surprise). // But it's time to stop writing so much short code...

The push() and pop() reduces the size of the SVG Transform string making it possible to have 120 branches without running out of memory, SVG only 27MB. Unlike [this example](https://observablehq.com/@hellonearthis/p5-to-svg-inaba_darkfox-furn). 168MB HSB colour was tricky as I had to use chroma.js and it [has a HSV, which is different]( https://observablehq.com/d/c6ec76af4f3f17f0#cell-248) to the P5 HSB mode. Another fun conversion that taught me about P5 and SVG ---47:[{"id":"59e7f627037865da5bd251064b0c4ad385ab8d6868cc1593ea95e0fa149369cecd5f21f4df3793e5810d22e1d18418bb0d4a07d83d54c4886447036a58689826","href":"https://static.observableusercontent.com/files/59e7f627037865da5bd251064b0c4ad385ab8d6868cc1593ea95e0fa149369cecd5f21f4df3793e5810d22e1d18418bb0d4a07d83d54c4886447036a58689826","name":"FT45REPaAAEkrtr.jpg","type":"image/jpeg","lastModified":1653853977326.606,"size":48969}] 44:{"id":"c6ec76af4f3f17f0","slug":"p5-to-svg-red-pythagoras-tree","title":"p5 to svg, red Pythagoras tree","thumbnail":"6b2f634e7a968610646716e53650f1e36396afd36a4c3fb31df97ed3fa7ee22a","access_level":"public","create_time":"$D2022-05-27T08:08:28.771Z","update_time":"$D2022-06-08T07:19:25.922Z","view_time":null,"first_public_time":"$D2022-05-28T17:50:32.955Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024","bio":"In New Zealand being kid of human.\n\nWe might make mistakes but we will make other things too. - \nMichael Joseph Savage","following":false},"version":621,"publish_version":621,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"bio":"In New Zealand being kid of human.\n\nWe might make mistakes but we will make other things too. - \nMichael Joseph Savage","following":false}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"p5 to svg, red Pythagoras tree","cells":[{"id":0,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"treeSvg = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, w, h])\n .style('background', \"#000\")\n .attr('width',w)\n .attr('height',h); \n\n const out = svg.append('g')\n .attr('id','out')\n .attr('transform',`translate(400,440)`)\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"{\n treeSvg // once the SVG base is ready, run the draw function\n depth[0]=0\n trans.str = \"\"\n draw(120)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"function draw(d) {\n depth[0]++; // avoiding using observables mutable to have a globale constant\n\n let out = d3.selectAll('#out')\n\n out.append('rect')\n .attr('fill',chroma.hsv((depth[0]*2)%99,((99-depth[0]*4)*0.01)%0.99,0.99).toString())\n .attr('x', 0)\n .attr('y', 0)\n .attr('rx', d*0.1) // added curves to rects\n .attr('width', d)\n .attr('height', d)\n .attr('transform', `${trans.str}`)\n\n stack.push(trans.str) // push(); \n\n let t = `rotate(${radToDeg(-0.6435)}) translate(0 ${-d*0.8})`\n trans.str = trans.str.concat(' ',t)\n\n if(d*4>5) draw(d*0.8);\n\n t = `translate(${d*1.4} ${d*0.8}) rotate(${radToDeg(Math.PI/2)})`;\n trans.str = trans.str.concat(' ',t)\n\n if(d*3>5) draw(d*.6);\n \n trans.str = stack.pop(); // pop();\n \n depth[0]--\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"depth = [0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"stack = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"trans = ({ \n str: ''\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"w = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"h = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"# P5 Version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"p5js(p5 => {\n\n let z=0;\n\n p5.setup = () => {\n p5.createCanvas(w,h);\n p5.noStroke();\n p5.colorMode(p5.HSB,99);\n p5.background(0);\n p5.translate(400,440);\n p5.noLoop()\n uu(120)\n }\n p5.draw = () => {}\n \n function uu(d){ // recursive function\n z++;\n p5.fill(z/2,99-z*4,99); // colour HSB\n p5.square(0,0,d);\n\n p5.push();\n p5.rotate(-.6435);\n p5.translate(0,-d*.8);\n if(d*4>5)uu(d*.8);\n p5.translate(d*1.4,d*.8);\n p5.rotate(p5.PI/2);\n if(d*3>5)uu(d*.6);\n p5.pop();\n z--\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"Descriptive code:\n${await FileAttachment(\"FT45REPaAAEkrtr.jpg\").image()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"import {p5 as p5js} from \"@tmcw/p5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"import {radToDeg} from \"@makio135/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"chroma = require('chroma-js@2.4.2/chroma.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"# P5 [HSB vs HSV](https://en.wikipedia.org/wiki/HSL_and_HSV#Examples)\n\n## P5.js\nHue — ranges from 0 to 360. \nSaturation — ranges from 0 to 100. \nBrightness — ranges from 0 to 100. \n\n## chroma.js \n#### chroma.hsv(H,S,V).toString()\nHue: ranges from 0 to 360. \nSaturation: ranges from 0 to 1. \nValue (Brightness): ranges from 0 to 1. \n\n\nIt also feels like the HUE is reversed because \n黒狐 Hue colour formular was this **z/2** and I had to **z*2** to get the same colour.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"viewof H = Inputs.range([0, 360], {label: \"hue\", step: 1, value:50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof S = Inputs.range([0, 1], {label: \"sat\", step: 0.01, value:0.7})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"viewof L = Inputs.range([0, 1], {label: \"bright\", step: 0.01, value:0.99})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"

\n# HSV Colour test \n`chroma.hsv(H,S,L).toString()`\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"