2b:null 2c:["$","title",null,{"children":"FUNCTIONS III | mark webster | Observable"}] 31:T500,/** Tree function by Robert Sedgewick & Kevin Wayne * link : http://introcs.cs.princeton.edu/java/23recursion/Tree.java.html * A more elegant version of the tree algorithm in my opinion * * REF : http://introcs.cs.princeton.edu/java/23recursion/ * @param : * n = number of iterations * x, y = coordinate positions * a = angle for tree * branchRadius = length of each branch * _w = initial strokweight for line */ function tree(n, x, y, a, branchRadius, _w, sketch) { var bA = sketch.radians( bendAngle ); var brA = sketch.radians( branchAngle ); var branchRatio = 0.73; //var branchRatio = sketch.map(branchRadius, 1, 80, .735, .799); var weight= _w; _w*=branchRatio; // the elegance of this solution is found here to calculate x, y positions // as opposed to using rotate & matrix transformations var cx = x + sketch.cos(a) * branchRadius; var cy = y + sketch.sin(a) * branchRadius; sketch.stroke(255); sketch.strokeWeight(weight); sketch.line(x, y, cx, cy); if (n == 0) return; // Here, we are calling our function and on each call we subtract from the number of iterations. tree(n-1, cx, cy, a + bA - brA, branchRadius * branchRatio, _w, sketch); tree(n-1, cx, cy, a + bA + brA, branchRadius * branchRatio, _w, sketch); }32:T418,function* p5(sketch) { const element = DOM.element('div'); // p5.js really likes its target element to already be in the DOM, not just // floating around detached. So, before we call P5, we yield it, which puts // in the DOM. yield element; // This is ‘instance mode’ in p5 jargon: instead of relying on lots of // globals, we create a sketch that has its own copy of everything under p5. const instance = new P5(sketch, element, true); // This is the tricky part: when you run P5(sketch, element), it starts a // loop that updates the drawing a bunch of times a second. If we were just // to call P5 repeatedly with different arguments, the loops would all keep // running, one on top of the other. So what we do is we use this cell // as a generator, and then when that generator is interrupted, like // when you update the code in the sketch() method, then we call instance.remove() // to clean it up. try { while (true) { yield element; } } finally { instance.remove(); } }33:[] 2f:{"id":"e77e8f0a1d6091c1","slug":"functions-iii","title":"FUNCTIONS III","thumbnail":"98b4061895d338eeb2eae3a3859a3bead1dd6c24c426384fec4a960e0a965c20","access_level":"public","create_time":"$D2019-04-05T08:08:37.300Z","update_time":"$D2026-03-17T13:38:06.491Z","view_time":null,"first_public_time":"$D2019-04-05T08:34:08.783Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"fdd6745cdbf31729","login":"motiondesign_01","name":"mark webster","avatar_url":"https://avatars-next.observableusercontent.com/e0b8a22b318090909fb4c12837ea7b63c5b1c04bc42534bf28e6ff551875e8ff","tier":"starter_2024"},"version":85,"publish_version":85,"role":null,"authored":false,"authors":[{"type":"individual","id":"3085cdbc76a2312b","login":"motiondesign_01","name":"mark webster","avatar_url":"https://avatars-next.observableusercontent.com/e0b8a22b318090909fb4c12837ea7b63c5b1c04bc42534bf28e6ff551875e8ff","tier":null}],"members":[{"type":"individual","id":"3085cdbc76a2312b","login":"motiondesign_01","name":"mark webster","avatar_url":"https://avatars-next.observableusercontent.com/e0b8a22b318090909fb4c12837ea7b63c5b1c04bc42534bf28e6ff551875e8ff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"FUNCTIONS III","cells":[{"id":0,"value":"md`# FUNCTIONS III`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html`\n
\n

Definition

\n\nRecursion is a function that makes a call to itself within it's main body definition.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`\n
\n

Input

\n\n1). We declare a function, giving it a name and eventually its parameters.
\n2). We define our function within curly brackets.
\n3). We call our function within the function.
\n4). We have a means to exit this call - usually a condition.
\n\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function drawCircle(_x, _y, _radius, _fact, sketch) {\n sketch.ellipse(_x, _y, _radius/2, _radius/2);\n\n // Notice our condition to avoid an infinite loop!\n // Try different values, comment out lines, try to understand \n // the general construction\n if (_radius > 7.3) { \n _radius *= _fact;\n drawCircle(_x+_radius/2, _y, _radius/2, 0.89, sketch);\n drawCircle(_x-_radius/2, _y, _radius/2, 0.89, sketch);\n drawCircle(_x, _y+_radius/2, _radius/2, 0.89, sketch);\n drawCircle(_x, _y-_radius/2, _radius/2, 0.89, sketch);\n \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`\n
\n

Output

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"p5(sketch => {\n \n sketch.setup = function() {\n sketch.createCanvas(640, 420);\n sketch.background(255);\n sketch.noFill();\n };\n \n sketch.draw = function() {\n sketch.background(0,0,33);\n sketch.stroke(255); \n sketch.strokeWeight(1); \n\n // we call our function here passing in values for our arguments\n // Try different values for the radius & factorial arguments\n drawCircle(320, 210, 750, 0.65, sketch); \n \n }; \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"html`\n
\n

The Lindenmayer System

\nThe Lindenmayer or L-System is a recursive structure that is often used to simulate tree structures. It is also attributed to a number of intriguing geometric shapes, such as the Dragon curve and the Sierpinski triangle. You can read more about these in the links below.

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"viewof bendAngle = slider({min: 0, max: 180, value:25, step: .5,title: \"Angle\", \n description: \"Cahnges orientation of all branches\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"viewof branchAngle = slider({min: 0, max: 90, value:45, step: .5,title: \"Branch Angle\", \n description: \"Changes orientation of the branching\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof branchRadius = slider({min: 10, max: 300, value:100, step: .5,title: \"Tree Size\", \n description: \"Changes radius, hence size of tree\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof iterations = slider({min: 1, max: 12, value:10, step: 1, title: \"Iterations\", \n description: \"Number of branches\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"p5(sketch => {\n \n sketch.setup = function() {\n sketch.createCanvas(640, 420);\n sketch.background(255);\n sketch.noFill();\n };\n \n sketch.draw = function() {\n sketch.background(0,0,33);\n sketch.randomSeed(1);\n sketch.push();\n sketch.translate(320, 210);\n sketch.stroke(255); \n sketch.strokeWeight(0.5); \n \n tree(iterations, 0, 150, -sketch.HALF_PI, branchRadius, 5, sketch);\n sketch.pop();\n \n }; \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"html`\n
\n

Resources & Further Reading

\n\n

Definition of recursion on Wikipedia.

Fractals.

A resource on fractal curves.

L-System on Wikipedia.

Play with some L-System grammars.

\n\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"P5 = require('https://unpkg.com/p5@0.6.0/lib/p5.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {slider,button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"