2f:[] 2d:{"title":"Getting Started with p5.js: 4. Variables","cells":[{"id":0,"value":"# Getting Started with `p5.js`: 4. Variables\n\nCode examples are adapted from \"Make: Getting Started with p5.js\" by McCarthy, Reas, & Fry.\n\nThe original code is found at https://github.com/lmccart/gswp5.js-code/tree/master/04_Variables.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"## Examples 4-1 and 4-2","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"p5((sketch) => {\n // change both `y` and `d` and observe the effect.\n var y = 60;\n var d = 40;\n\n sketch.setup = () => {\n sketch.createCanvas(width, 120);\n };\n\n sketch.draw = () => {\n sketch.background(204);\n sketch.ellipse(75, y, d, d); // Left\n sketch.ellipse(175, y, d, d); // Middle\n sketch.ellipse(275, y, d, d); // Right\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"## Example 4-3\n\nAdjust the canvas","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"p5((sketch) => {\n let w = width / 2; // adjust and see what happens\n let h = 120;\n\n sketch.setup = () => {\n sketch.createCanvas(w, h);\n };\n\n sketch.draw = () => {\n sketch.background(204);\n sketch.line(0, 0, w, h); // Line from (0,0) to (w, h)\n sketch.line(w, 0, 0, h); // Line from (w, 0) to (0, h)\n sketch.ellipse(w / 2, h / 2, 60, 60);\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"## Example 4-4","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"p5((sketch) => {\n var x = 25;\n var h = 20;\n var y = 25;\n\n sketch.setup = () => {\n sketch.createCanvas(width, 120);\n };\n\n sketch.draw = () => {\n sketch.background(204);\n sketch.rect(x, y, 300, h); // Top\n // x = x + 100;\n sketch.rect(x + 100, y + h, 300, h); // Middle\n // x = x - 250;\n sketch.rect(x - 250, y + h * 2, 300, h); // Bottom\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"## Examples 4-5 and 4-6\n\nDo the same thing over and over","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"p5((sketch) => {\n sketch.setup = () => {\n sketch.createCanvas(width, 120);\n sketch.strokeWeight(8);\n };\n\n sketch.draw = () => {\n sketch.background(204);\n for (var i = 20; i < 400; i += 60) {\n sketch.line(i, 40, i + 60, 80);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"## Examples 4-7, 4-8, and 4-9\n\nFlexing the for loop. Try changing the expression for `x2`.","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"p5((sketch) => {\n sketch.setup = () => {\n sketch.createCanvas(width, 120);\n sketch.strokeWeight(2);\n };\n\n sketch.draw = () => {\n sketch.background(204);\n for (var i = 20; i < 400; i += 8) {\n var x2 = i + 60;\n sketch.line(i, 40, x2, 80);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"p5((sketch) => {\n sketch.setup = () => {\n sketch.createCanvas(width, 120);\n sketch.strokeWeight(2);\n };\n\n sketch.draw = () => {\n sketch.background(204);\n for (var i = 20; i < 400; i += 20) {\n var x2 = i + i / 3;\n sketch.line(i, 40, x2, 80);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"p5((sketch) => {\n sketch.setup = () => {\n sketch.createCanvas(width, 120);\n sketch.strokeWeight(2);\n };\n\n sketch.draw = () => {\n sketch.background(204);\n for (var i = 20; i < 400; i += 20) {\n sketch.line(i, 0, i + i / 2, 80);\n sketch.line(i + i / 2, 80, i * 1.2, 120);\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"## Example 4-10 and 4-11\n\nNested for loops","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"p5((sketch) => {\n let w = width;\n let h = 120;\n sketch.setup = () => {\n sketch.createCanvas(w, h);\n sketch.noStroke();\n };\n\n sketch.draw = () => {\n sketch.background(0);\n let d = 40;\n for (var y = 0; y <= h; y += d) {\n // first loop runs throuh the rows.\n for (var x = 0; x <= w + d; x += d) {\n // second loop runs through the columns.\n sketch.fill(255, 150);\n sketch.ellipse(x, y, d, d);\n }\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"## Example 4-12\nPins and lines","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"p5((sketch) => {\n let h = 120;\n\n sketch.setup = () => {\n sketch.createCanvas(width, h);\n sketch.fill(255);\n sketch.stroke(102);\n };\n\n sketch.draw = () => {\n sketch.background(0);\n for (var y = 20; y <= h - 20; y += 10) {\n for (var x = 20; x <= width - 20; x += 10) {\n sketch.ellipse(x, y, 4, 4);\n // Draw a line to the center of the display\n sketch.line(x, y, width / 2, h / 2);\n }\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"## Example 4-13\nHalftone dots","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"p5((sketch) => {\n let h = 120;\n let w = width;\n\n sketch.setup = () => {\n sketch.createCanvas(width, h);\n };\n\n sketch.draw = () => {\n sketch.background(0);\n for (var y = 24; y <= h; y += 12) {\n let r = 16 - y/12; // Radius grows smaller as y increases.\n for (var x = 12; x <= w; x += 15) {\n sketch.ellipse(x + y, y, r, r);\n }\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Importing `p5.js` instance built for Observable","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"import {p5} from \"@josesho/p5-latest\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}