31:T40e,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:{"title":"p5.js: Coding train :) | 04 Loops","cells":[{"id":0,"value":"md`# p5.js: Coding train :) | 04 Loops\n\nHaving a nice introduction to creative coding and p5.js fundamentals through _[Code! Programming with p5.js](https://youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA)_ video series from **[The Coding Train](https://www.youtube.com/c/TheCodingTrain)** by Daniel Shiffman 🙌🏻\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`\nReference:\n- https://observablehq.com/@tmcw/p5\n\nDocumentation:\n- https://p5js.org/reference/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"md`### 4.1 | Loops\n\nLoops inside the draw() function are not for animate, are just for drawing a bunch of things at a time\nhttps://www.youtube.com/watch?v=cnRD9o6odjk&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=19\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"p5(sketch => {\n sketch.setup = function() {\n sketch.createCanvas(width, 400);\n };\n\n sketch.draw = function() {\n sketch.background(0);\n sketch.noStroke();\n\n /*\n let x = 0;\n \n sketch.circle(x, 200, 25);\n x = x + 50;\n\n sketch.circle(x, 200, 25);\n x = x + 50;\n\n sketch.circle(x, 200, 25);\n x = x + 50;\n */\n\n // While loop option\n let x = 0;\n while (x <= width) {\n sketch.fill(0, 0, 255);\n sketch.circle(x, 100, 25);\n //x = x + 50;\n x += 50;\n }\n\n // For loop\n for (let x = 0; x <= width; x += 50) {\n sketch.fill(255, 0, 0);\n sketch.circle(x, 300, 25);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":737,"value":"md`### 4.2 | Nested Loops\nhttps://www.youtube.com/watch?v=1c1_TMdf8b8&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=19\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"p5(sketch => {\n let x = 0;\n let speed = 3;\n\n sketch.setup = function() {\n sketch.createCanvas(width, 400);\n };\n\n sketch.draw = function() {\n sketch.background(0);\n sketch.noStroke();\n\n // For loop\n for (let i = 0; i <= sketch.width; i += 50) {\n sketch.fill(sketch.random(255), 0, sketch.random(255));\n sketch.circle(i + x, sketch.height / 2, 25);\n }\n\n if (x >= sketch.width || x < 0) {\n speed = speed * -1; // Possitive to negative etc\n }\n x = x + speed;\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"md`2d grids`","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"p5(sketch => {\n sketch.setup = function() {\n sketch.createCanvas(width, 400);\n sketch.frameRate(8); // Change frame rates per second!\n };\n\n sketch.draw = function() {\n sketch.background(0);\n sketch.noStroke();\n\n // For loop\n for (let x = 0; x <= sketch.width; x += 50) {\n for (let y = 0; y <= sketch.width; y += 50) {\n sketch.fill(sketch.random(255), 0, sketch.random(255));\n\n sketch.circle(x, y, 25);\n }\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"p5(sketch => {\n sketch.setup = function() {\n sketch.createCanvas(width, 400);\n sketch.frameRate(8); // Change frame rates per second!\n };\n\n sketch.draw = function() {\n sketch.background(0);\n sketch.noStroke();\n\n // For loop\n for (let x = 0; x <= sketch.mouseX; x += 50) {\n for (let y = 0; y <= sketch.width; y += 50) {\n sketch.fill(sketch.random(255), 0, sketch.random(255));\n\n sketch.circle(x, y, 25);\n }\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":766,"value":"p5(sketch => {\n sketch.setup = function() {\n sketch.createCanvas(width, 400);\n sketch.frameRate(8); // Change frame rates per second!\n };\n\n sketch.draw = function() {\n sketch.background(0);\n sketch.noStroke();\n\n // For loop\n for (let x = 0; x <= sketch.width; x += 50) {\n for (let y = 0; y <= sketch.mouseY; y += 50) {\n sketch.fill(sketch.random(255), 0, sketch.random(255));\n\n sketch.circle(x, y, 25);\n }\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`\n---\n\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"P5 = require('https://unpkg.com/p5@1.2.0/lib/p5.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}