2b:null 2c:["$","title",null,{"children":"Loops 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":"89852a4dd54cd106","slug":"loop-ii","title":"Loops II","thumbnail":"aa8e5e4c9f834beba07d0c1983283c034bd838ce736904698f945cbf56e6ea3e","access_level":"public","create_time":"$D2019-05-29T09:19:43.285Z","update_time":"$D2026-03-17T14:07:28.349Z","view_time":null,"first_public_time":"$D2019-05-30T12:55:28.029Z","fork":false,"stars":5,"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":148,"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":2,"collection":null,"type":"notebook","body":{"title":"Loops II","cells":[{"id":0,"value":"html`\n\n\n
\n

Loops II

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

Introduction

\n\nWe can use a nested loop to create grids and patterns. In the example below, we use a little noise to animate the circles. By changing the values for noise frequency (noiseFreq), noise amount (noiseAmm) and the freq variables, you can get quite different motion. To learn about how the noise function works, see this page and learn more about it here with a video introduction by Dan Shiffman. \n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"html`\n\n
\n

Some Variables

\n\nPlay with these three variable values and observe what happens. For the float values, noiseFreq & freq, small values bring about large changes.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"noiseFreq = 0.015; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"noiseAmm = 33;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"freq = 0.003;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"p5(sketch => {\n\n sketch.setup = function() {\n sketch.createCanvas(800, 420);\n sketch.background(0,0,33);\n sketch.smooth();\n sketch.noStroke(); \n };\n \n sketch.draw = function() {\n sketch.background(0,0,33);\n for (var y=75; y\n\n
\n

Going Further

\n\nWe can use use a little randomness to create variation and break up the regularity of the grid. The basic principal here is that we use the random function to calculate a probabilty. Depending on the value that the function returns on each iteration of the loop, we either draw a circle or not. \n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"p5(sketch => {\n let dia = 25;\n\n sketch.setup = function() {\n sketch.createCanvas(800, 420);\n sketch.background(0,0,33);\n sketch.smooth();\n sketch.noStroke();\n for (var y=75; y\n\n
\nWe can also combine shapes and develop more complex graphics. Pattern making is a whole area of creativity that is really satisfying in code due to the dynamic nature of the medium. Once you have understood the basic nested loop structure and how shapes can be combined, one can quickly change a variable value and get very different visual results. From here, I encourage you to play with other shapes, create your own using functions, add colour, mouse and key interaction, the possibilities are really boundless. The secret to making good patterns are in choosing simple basic elements and making small changes to your variables. It takes time to observe and explore a dynamic system like this.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"p5(sketch => {\n let dia = 25;\n\n sketch.setup = function() {\n sketch.createCanvas(800, 420);\n sketch.background(0,0,33);\n sketch.smooth();\n sketch.rectMode(sketch.CENTER);\n sketch.noStroke();\n \n \n for (var y=75; y2)&&(rand<4)){ \n sketch.ellipse(x, y, 25, 25); \n }else {\n sketch.rect(x, y, 20, 20); \n }\n }\n }\n \n };\n \n sketch.draw = function() {};\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"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":9,"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":11,"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"