31:T672,sketch6 = function(sketch) { sketch.setup = () => { sketch.createCanvas(container.width, container.height); sketch.noLoop(); }; sketch.draw = () => { sketch.background(0); // Optional: adjust noise detail here // sketch.noiseDetail(8,0.65); sketch.loadPixels(); let d = sketch.pixelDensity(); let fullImage = 4 * (container.width * d) * (container.height * d); let xoff = 0.0; let yoff = 0.0; let bright; for (var i = 0; i < fullImage; i += 4) { xoff += increment; yoff += increment; bright = sketch.map(sketch.noise(xoff, yoff), 0, 1, 0, 100); sketch.pixels[i] = 0; sketch.pixels[i + 1] = 0; sketch.pixels[i + 2] = 0; sketch.pixels[i + 3] = bright; } // let xoff = 0.0; // for (let x = 0; x < container.width; x++) { // xoff += increment; // let yoff = 0.0; // for (let y = 0; y < container.height; y++) { // yoff += increment; // // Calculate noise and scale by 255 // let bright = sketch.map(sketch.noise(xoff, yoff), 0, 1, 0, 255); // // Try using this line instead // // let bright = sketch.random(0,255); // // Set each pixel onscreen to a grayscale value // sketch.pixels[x + y * container.width] = bright; // // sketch.pixels[x + y * container.width * d / 2] = bright; // // sketch.pixels[x + y * container.width * (1/4) * d] = bright; // // sketch.pixels[x + y * container.width * (3/4) * d] = bright; // } // } sketch.updatePixels(); } }32:[] 2f:{"title":"The Nature of Code - Introduction","cells":[{"id":0,"value":"md`# The Nature of Code - Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md` ## Examples from [Dan Shiffman](http://shiffman.net/)'s [book](http://natureofcode.com)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`The following examples are from **Introduction**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"html`Book's p5.js Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"// viewof chosenSketch = radio([sketch1, sketch2, sketch3, sketch4, sketch5, sketch6, sketch7, sketch8, sketch9, sketch10, sketch11])\n// {\n // debugger;\n // var chosenSketch = radio({ // chosenSketch.value === 0\n viewof chosenSketch = radio({\n title: 'Choose a sketch',\n description: '',\n options: [\n { label: \"Example I.1: Traditional random walk\", value: '0' }, \n { label: \"Example I.2: Random number distribution\", value: '1' }, \n { label: \"Example I.3: Walker that tends to move to the right\", value: \"2\" }, \n { label: \"Example I.4: Gaussian distribution\", value: \"3\" }, \n { label: \"Example I.5: Perlin noise walker\", value: \"4\" }, \n { label: \"Example I.6: 2D Perlin noise\", value: \"5\" }\n ],\n value: '0'\n })\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"chosenSketch","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"p5Container = createContainer()","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"p5 = require(\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"container = ({ width: 640, height: 360 }) // object needs parentheses to differentiate from blocks","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"createContainer = () => { // create a div or node to attach sketch to\n \tlet el = document.createElement(\"div\");\n \tel.style.width = `${container.width}px`;\n \tel.style.height = `${container.height}px`;\n\treturn el;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"class Walker {\n constructor(sketch){\n this.sketch = sketch;\n this.x = container.width/2;\n this.y = container.height/2;\n }\n\n render() {\n // debugger; // let's check docs of p5.stroke (very detailed docs with examples)\n this.sketch.stroke(0);\n this.sketch.point(this.x,this.y);\n }\n\n step() { // create random choice for which direction to move\n // debugger; // let's check docs of p5.stroke (very detailed docs with examples)\n var choice = this.sketch.floor(this.sketch.random(4));\n if (choice === 0) {\n this.x++;\n } else if (choice == 1) {\n this.x--;\n } else if (choice == 2) {\n this.y++;\n } else {\n this.y--;\n }\n this.x = this.sketch.constrain(this.x,0, container.width-1); // I guess it start from 0 to width-1\n this.y = this.sketch.constrain(this.y,0, container.height-1);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"sketch1 = function( sketch ) {\n let walker;\n\n // debugger; //set a breakpoint here, but it won't be triggered by running this cell, but the main action cell, i.e.g, the last cell in the end\n \n // The usual setup function of p5\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n \twalker = new Walker(sketch);\n\t sketch.background(255);\n };\n \n // the usual draw function of p5\n sketch.draw = () => {\n \twalker.step();\n\t walker.render();\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"sketch2 = function( sketch ) {\n let randomCounts = [];\n let total = 20;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n for (let i = 0; i < total; i++) {\n randomCounts[i] = 0;\n }\n };\n\n sketch.draw = () => {\n sketch.background(255);\n let index = sketch.floor(sketch.random(total));\n randomCounts[index]++;\n\n // Draw a rectangle to graph results\n sketch.stroke(0);\n sketch.strokeWeight(2);\n sketch.fill(255);\n\n let w = container.width/randomCounts.length;\n\n for (let x = 0; x < randomCounts.length; x++) {\n sketch.rect(x*w,container.height-randomCounts[x],w-1,randomCounts[x]);\n }\n };\n\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"class RightWalker {\n constructor(sketch){\n this.sketch = sketch;\n this.x = container.width/2;\n this.y = container.height/2;\n };\n\n render() {\n this.sketch.stroke(0);\n this.sketch.point(this.x,this.y);\n };\n\n step(){\n let choice = this.sketch.floor(this.sketch.random(4));\n let r = this.sketch.random(1);\n // A 40% of moving to the right!\n if (r < 0.4) {\n this.x++;\n } else if (r < 0.6) {\n this.x--;\n } else if (r < 0.8) {\n this.y++;\n } else {\n this.y--;\n }\n this.x = this.sketch.constrain(this.x,0,container.width-1);\n this.y = this.sketch.constrain(this.y,0,container.height-1);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"sketch3 = function( sketch ) {\n let walker;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n \twalker = new RightWalker(sketch);\n\tsketch.background(255);\n };\n \n sketch.draw = () => {\n \twalker.step();\n\twalker.render();\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"sketch4 = sketch => {\n let walker;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n sketch.background(255);\n };\n\n sketch.draw = () => {\n // Get a gaussian random number w/ mean of 0 and standard deviation of 1.0\n let xloc = sketch.randomGaussian();\n\n const sd = 60; \t// Define a standard deviation\n const mean = container.width/2; // Define a mean value (middle of the screen along the x-axis)\n xloc = ( xloc * sd ) + mean; \t// Scale the gaussian random number by standard deviation and mean\n\n sketch.fill(0, 10);\n sketch.noStroke();\n sketch.ellipse(xloc, container.height/2, 16, 16); // Draw an ellipse at our \"normal\" random position\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"class PerlinWalker {\n constructor(sketch){\n this.sketch = sketch;\n this.position = sketch.createVector(container.width/2, container.height/2);\n this.noff = sketch.createVector(sketch.random(1000), sketch.random(1000));\n }\n\n display() {\n this.sketch.strokeWeight(2);\n this.sketch.fill(51);\n this.sketch.stroke(0);\n this.sketch.ellipse(this.position.x, this.position.y, 48, 48);\n }\n\n walk() {\n this.position.x = this.sketch.map(this.sketch.noise(this.noff.x),0,1,0, container.width);\n this.position.y = this.sketch.map(this.sketch.noise(this.noff.y),0,1,0, container.height);\n this.noff.add(0.01,0.01,0);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"sketch5 = function( sketch ) {\n let walker;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n \twalker = new PerlinWalker(sketch);\n\tsketch.background(255);\n };\n \n sketch.draw = () => {\n \twalker.walk();\n\twalker.display();\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"increment = 0.02","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"{\n // debugger; /* to see how p5 constructor work, or docs*/\n const sketches = [sketch1, sketch2, sketch3, sketch4, sketch5, sketch6];\n const selectedSketch = sketches[parseInt(chosenSketch, 10)];\n // Resets div container\n // Reinstantiate the p5 with the sketch\n p5Container.innerHTML = \"\";\n new p5(selectedSketch, p5Container); // dig into p5 constructor\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}