2b:null 2c:["$","title",null,{"children":"Loops | mark webster | Observable"}] 31:T434,p5(sketch => { sketch.setup = function() { sketch.createCanvas(960, 420); sketch.background(0,0,33); sketch.smooth(); sketch.noStroke(); sketch.rectMode(sketch.CENTER); // the loop structure is made up of the following : // - declaration of a variable with an initial value >>> int i=0; // - a condition to test the variable >>> i<5000 // - increment or update of the variable as long as the test condition is true // Then // For as long as we are within the loop, the program executes what is within the main body // i.e. between the curly brackets. for (var i=0; i<5000; i++) { var x = sketch.random(sketch.width); // generate a random x value var y = sketch.random(sketch.height); // generate a random y value var dia = sketch.random(1, 9); // generate a random value for modifying the circle's diameter // we draw 5000 circles, each with a random position & size sketch.ellipse(x, y, dia, dia); } }; sketch.draw = function() {}; })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":"6bb231e7ccda6d54","slug":"loops","title":"Loops","thumbnail":"92f8026748f7c94aa2c77a6fc9b6a73123db07ce490ef4607369989f3b287681","access_level":"public","create_time":"$D2019-05-10T09:58:28.012Z","update_time":"$D2026-03-17T14:05:45.912Z","view_time":null,"first_public_time":"$D2019-05-10T10:19:35.504Z","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":195,"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":"Loops","cells":[{"id":0,"value":"html`\n\n\n
\n

Loops

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

Definition

\n\nA loop is an iterative structure used to execute repetitive tasks. \n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n\n
\n

Input

\n\n for(initialisation; condition; step) {
\n statement(s)
\n //perform functions within the loop;
\n }\n\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`\n\n

Output

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

\n

Using A Loop With Motion

\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"p5(sketch => {\n\n sketch.setup = function() {\n sketch.createCanvas(960, 420);\n sketch.background(0,0,33);\n sketch.smooth();\n sketch.noFill();\n };\n \n sketch.draw = function() {\n sketch.background(0,0,33);\n sketch.randomSeed(1);\n sketch.stroke(255);\n sketch.fill(0, 230, 255);\n sketch.strokeWeight(4);\n\n // we are using the iterative structure to repeat form on the x-axis\n for(var i=0; i\n\n
\n

Using Another Form

\n\nBy changing the basic shape, we get radically different compositions of generative form.\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"p5(sketch => {\n\n sketch.setup = function() {\n sketch.createCanvas(960, 420);\n sketch.background(0,0,33);\n sketch.smooth();\n };\n \n sketch.draw = function() {\n sketch.background(0,0,33);\n sketch.stroke(255);\n sketch.strokeWeight(4);\n sketch.fill(55, 55, 255); \n \n // some mouse interaction variables\n let vm = sketch.map(sketch.mouseX, 0, sketch.width, 0.001, 0.007);\n let sm = sketch.map(sketch.mouseY, 0, sketch.height, 10, 400);\n \n // we are using the iterative structure to repeat form on the x-axis\n for(var i=0; i\n\n
\n

References & Further Reading

\n\n

The FOR loop in Processing.

Loops & iteration in JavaScript.

\n\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"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":19,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"