2b:null 2c:["$","title",null,{"children":"Functions II | mark webster | Observable"}] 31: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(); } }32:[] 2f:{"id":"7d8710cb0a905261","slug":"functions-ii","title":"Functions II","thumbnail":"8683de230f82ea6f317774bd330631923b45670d54eea24212c3da3b44853a62","access_level":"public","create_time":"$D2019-03-21T14:58:29.660Z","update_time":"$D2026-03-17T13:30:11.759Z","view_time":null,"first_public_time":"$D2019-03-21T15:47:00.069Z","fork":false,"stars":0,"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":87,"publish_version":null,"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":1,"collection":null,"type":"notebook","body":{"title":"Functions II","cells":[{"id":0,"value":"html`\n\n\n
\n

Functions II

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n\n
\n

Introduction

\n\nA function can return values. This is a neat means for creating custom operations that can be re-used within a program. \n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html`\n\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 use the return keyword to return the value.
\n\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"html`\n\n
\n

Syntax

\n\nWe are going to define a simple function called oscillate. Our function defines an oscillating behavior using the trigonometric function sine. This value is stored in a variable and returned on call of the function.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function oscillate(sketch) {\n // our variable to return\n var val = sketch.sin(sketch.frameCount*0.05)*300;\n return val;\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.noStroke();\n };\n \n sketch.draw = function() {\n sketch.background(33);\n \n // We use our oscillate function to change \n // the size of our cross shape over time.\n var crossSize = oscillate(sketch);\n sketch.fill(200, 255, 0);\n cross(320, 210, crossSize, 0, sketch);\n }; \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"html`\n\n
\n

Syntax

\n\nWe can take this concept further and customise our function by adding two parameters that will determine the frequency and amplitude of oscillation. Take a look at the new function defined below. Note the addition of the parameters freq and amp both in parenthesis and as part of the function's definition. \n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function myOsc(sketch, freq, amp) {\n // sinus \n var val = sketch.sin(sketch.frameCount*freq)*amp;\n return val;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"html`\n\n
\n

Output

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"p5(sketch => {\n \n sketch.setup = function() {\n sketch.createCanvas(640, 420);\n sketch.background(255);\n sketch.noStroke();\n };\n \n sketch.draw = function() {\n sketch.background(33);\n \n // Now, when we call our function, we can give it\n // values that will be passed into our function as \n // the parameters for freq & amp\n var crossSize = myOsc(sketch, 0.05, 250);\n sketch.fill(255, 0, 0);\n cross(200, 210, crossSize, 0, sketch);\n \n //This means we can use the same function \n // but with different values.\n var crossSize2 = myOsc(sketch, 0.015, 350);\n sketch.fill(0, 0, 255);\n cross(440, 210, crossSize2, 0, sketch);\n }; \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function cross (_cntX, _cntY, _taille, a, sketch){\n sketch.rectMode(sketch.CENTER);\n sketch.push();\n sketch.translate(_cntX, _cntY);\n sketch.rotate(sketch.radians(a));\n sketch.rect(0, 0, _taille, _taille/4);\n sketch.rect(0, 0, _taille/4, _taille);\n sketch.pop();\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":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"