31:T465,p5(sketch => { sketch.setup = function() { sketch.createCanvas(width, 400); // Actual canvas }; sketch.draw = function() { //sketch.background(50); sketch.background(0, 10); // Transparent background gives "delay" effect, as frames are transparent sketch.stroke(255); sketch.strokeWeight(5); sketch.noFill(); // Distance //let d = sketch.dist(sketch.mouseX, sketch.mouseY, centerX, centerY); //console.log(d); if (sketch.mouseX < sketch.width / 3) { sketch.circle(sketch.width / 2, sketch.height / 2, 100); } else if ( sketch.mouseX > sketch.width / 3 && sketch.mouseX < (2 * sketch.width) / 3 ) { sketch.rectMode(sketch.CENTER); // Reference system on the center sketch.rect(sketch.width / 2, sketch.height / 2, 100); } else { //sketch.tiangleMode(sketch.CENTER); // Reference system on the center sketch.triangle( sketch.width / 2 - 50, sketch.height / 2 + 50, sketch.width / 2 + 50, sketch.height / 2 + 50, sketch.width / 2, sketch.height / 2 - 50 ); } }; })32: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(); } }33:[] 2f:{"title":"p5.js: Coding train :) | 03","cells":[{"id":0,"value":"md`# p5.js: Coding train :) | 03\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\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":490,"value":"md`### 3.1 | Conditional statements\n\nhttps://www.youtube.com/watch?v=1Osb_iGDdjk&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=14\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"p5(sketch => {\n sketch.setup = function() {\n sketch.createCanvas(width, 400); // Actual canvas\n };\n\n sketch.draw = function() {\n sketch.background(50);\n\n sketch.stroke(255);\n sketch.strokeWeight(5);\n sketch.noFill();\n\n // Distance\n //let d = sketch.dist(sketch.mouseX, sketch.mouseY, centerX, centerY);\n //console.log(d);\n\n if (sketch.mouseX > width / 2) {\n sketch.fill(255, 0, 200);\n }\n\n sketch.circle(300, 200, 100);\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"md`### 3.2 | The Bouncing Ball\nhttps://www.youtube.com/watch?v=LO3Awjn_gyU&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=15\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"p5(sketch => {\n let x = 0;\n let speed = 3;\n\n sketch.setup = function() {\n sketch.createCanvas(width, 400); // Actual canvas\n };\n\n sketch.draw = function() {\n sketch.background(0);\n\n sketch.stroke(255);\n sketch.strokeWeight(5);\n sketch.noFill();\n sketch.circle(x, 200, 100);\n\n if (x >= sketch.width) {\n speed = -3;\n } else if (x < 0) {\n speed = 3;\n }\n x = x + speed;\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`### 3.3 | Else and Else if, AND and OR\nhttps://www.youtube.com/watch?v=r2S7j54I68c&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=16\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"p5(sketch => {\n // Global variables\n let x = 0;\n let speed = 3;\n\n sketch.setup = function() {\n sketch.createCanvas(width, 400); // Actual canvas\n };\n\n sketch.draw = function() {\n sketch.background(0);\n\n sketch.stroke(255);\n sketch.strokeWeight(5);\n sketch.noFill();\n sketch.circle(x, 200, 100);\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":729,"value":"viewof trail = Inputs.range([0, 100], { label: \"Trail\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"p5(sketch => {\n // Global variables\n let x = 0;\n let speed = 3;\n\n sketch.setup = function() {\n sketch.createCanvas(width, 400); // Actual canvas\n };\n\n sketch.draw = function() {\n sketch.background(0, trail); // The background opacity gives the \"trail\" effect ❤\n\n sketch.stroke(255);\n sketch.strokeWeight(5);\n sketch.noFill();\n sketch.circle(x, 200, 100);\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":552,"value":"md`### 3.4 | Boolean Variables\nhttps://www.youtube.com/watch?v=Rk-_syQluvc&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=17\n\nEvent mousePressed() vs boolean variable mouseIsPressed // true or false\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"p5(sketch => {\n sketch.setup = function() {\n sketch.createCanvas(600, 400); // Actual canvas\n };\n\n sketch.draw = function() {\n sketch.background(50);\n\n sketch.stroke(255);\n sketch.strokeWeight(5);\n sketch.noFill();\n\n if (\n sketch.mouseX > 250 &&\n sketch.mouseX < 350 &&\n sketch.mouseY > 150 &&\n sketch.mouseY < 250\n ) {\n // check flag variable (true/false)\n if (sketch.mouseIsPressed) {\n sketch.background(0, 255, 0);\n }\n sketch.fill(255, 0, 200);\n }\n\n sketch.rectMode(sketch.CENTER);\n sketch.rect(300, 200, 100);\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"p5(sketch => {\n // Flag varible -> kind of \"state\" of the program\n let lightIsOn = 0;\n\n sketch.setup = function() {\n sketch.createCanvas(600, 400); // Actual canvas\n };\n\n sketch.draw = function() {\n lightIsOn ? sketch.background(0, 255, 0) : sketch.background(0);\n\n sketch.noStroke();\n sketch.fill(255);\n\n const isInsideRect =\n sketch.mouseX > 250 &&\n sketch.mouseX < 350 &&\n sketch.mouseY > 150 &&\n sketch.mouseY < 250;\n\n if (isInsideRect) {\n sketch.fill(255, 0, 200);\n }\n\n sketch.rectMode(sketch.CENTER);\n sketch.rect(300, 200, 100);\n };\n\n sketch.mousePressed = function() {\n const isInsideRect =\n sketch.mouseX > 250 &&\n sketch.mouseX < 350 &&\n sketch.mouseY > 150 &&\n sketch.mouseY < 250;\n if (isInsideRect) {\n lightIsOn = !lightIsOn;\n //console.log(lightIsOn);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"p5(sketch => {\n // Flag varible -> kind of \"state\" of the program\n let lightIsOn = 0;\n\n // Refactoring\n function testIsInside(x, y) {\n const answer = x > 250 && x < 350 && y > 150 && y < 250;\n return answer;\n }\n\n sketch.setup = function() {\n sketch.createCanvas(600, 400); // Actual canvas\n };\n\n sketch.draw = function() {\n lightIsOn ? sketch.background(0, 255, 0) : sketch.background(0);\n\n sketch.noStroke();\n sketch.fill(255);\n\n if (testIsInside(sketch.mouseX, sketch.mouseY)) {\n sketch.fill(255, 0, 200);\n }\n\n sketch.rectMode(sketch.CENTER);\n sketch.rect(300, 200, 100);\n };\n\n sketch.mousePressed = function() {\n if (testIsInside(sketch.mouseX, sketch.mouseY)) {\n lightIsOn = !lightIsOn;\n //console.log(lightIsOn);\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":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}