31:T47d,// viewof chosenSketch = radio([sketch1, sketch2, sketch3, sketch4, sketch5, sketch6, sketch7, sketch8, sketch9, sketch10, sketch11]) viewof chosenSketch = radio({ title: 'Choose a sketch', description: '', options: [ { label: "Example 1-1: Bouncing Ball, no vectors", value: '0' }, { label: "Example 1-2: Bouncing Ball, with p5.Vector!", value: '1' }, { label: "Example 1-2: Bouncing Ball, with p5.Vector! and Ball Class", value: "2" }, { label: "Example 1-3: Vector subtraction", value: "3" }, { label: "Example 1-4: Vector multiplication", value: "4" }, { label: "Example 1-5: Vector magnitude", value: "5" }, { label: "Example 1-6 Normalizing a vector", value: "6" }, { label: "Example 1-7: Motion 101 (velocity)", value: "7" }, { label: "Example 1-8: Motion 101 (velocity and constant acceleration)", value: "8" }, { label: "Example 1-9: Motion 101 (velocity and random acceleration)", value: "9" }, { label: "Example 1-10: Accelerating towards the mouse", value: "10" }, { label: "Example 1-11: Array of movers accelerating towards the mouse", value: "11" } ], value: '0' })32:T4ea,class Mover3 { constructor(sketch){ this.sketch = sketch; this.position = this.sketch.createVector(container.width / 2, container.height / 2); this.velocity = this.sketch.createVector(); this.acceleration = this.sketch.createVector(); this.topspeed = 5; } update() { // this.acceleration = p5.Vector.random2D(); // random2D() not implemented? doing raw math for now instead var angle = this.sketch.random(this.sketch.TWO_PI); this.acceleration = this.sketch.createVector(this.sketch.cos(angle), this.sketch.sin(angle)); this.acceleration.mult(this.sketch.random(2)); this.velocity.add(this.acceleration); this.velocity.limit(this.topspeed); this.position.add(this.velocity); } display() { this.sketch.stroke(0); this.sketch.strokeWeight(2); this.sketch.fill(127); this.sketch.ellipse(this.position.x, this.position.y, 48, 48); } checkEdges() { if (this.position.x > container.width) { this.position.x = 0; } else if (this.position.x < 0) { this.position.x = container.width; } if (this.position.y > container.height) { this.position.y = 0; } else if (this.position.y < 0) { this.position.y = container.height; } } }33:T4e2,class Mover4 { constructor(sketch){ this.sketch = sketch; this.position = this.sketch.createVector(this.sketch.random(container.width / 2), this.sketch.random(container.height / 2)); this.velocity = this.sketch.createVector(); this.acceleration = this.sketch.createVector(); this.topspeed = 5; } update() { // Compute a vector that points from position to mouse var mouse = this.sketch.createVector(this.sketch.mouseX,this.sketch.mouseY); this.acceleration = p5.Vector.sub(mouse,this.position); // Set magnitude of acceleration this.acceleration.setMag(0.2); this.velocity.add(this.acceleration); this.velocity.limit(this.topspeed); this.position.add(this.velocity); } display() { this.sketch.stroke(0); this.sketch.strokeWeight(2); this.sketch.fill(127); this.sketch.ellipse(this.position.x, this.position.y, 48, 48); } checkEdges() { if (this.position.x > container.width) { this.position.x = 0; } else if (this.position.x < 0) { this.position.x = container.width; } if (this.position.y > container.height) { this.position.y = 0; } else if (this.position.y < 0) { this.position.y = container.height; } } }34:[] 2f:{"title":"The Nature of Code - Chapter 1","cells":[{"id":0,"value":"md`# The Nature of Code - Chapter 1`","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 **Chapter 1: Vectors**.`","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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"p5Container = createContainer()","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"p5 = require(\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"container = ({ width: 640, height: 360 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"createContainer = () => {\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":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"sketch1 = function( sketch ) {\n let x = 100;\n let y = 100;\n let xspeed = 2.5;\n let yspeed = 2;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n };\n \n sketch.draw = () => {\n \tsketch.background(51);\n \n // Add the current speed to the position.\n x = x + xspeed;\n y = y + yspeed;\n\n if ((x > container.width) || (x < 0)) {\n xspeed = xspeed * -1;\n }\n if ((y > container.height) || (y < 0)) {\n yspeed = yspeed * -1;\n }\n\n // Display circle at x position\n sketch.stroke(0);\n sketch.strokeWeight(2);\n sketch.fill(127);\n sketch.ellipse(x, y, 48, 48);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"sketch2 = function( sketch ) {\n let position;\n let velocity;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n position = sketch.createVector(100, 100);\n velocity = sketch.createVector(2.5, 5);\n };\n \n sketch.draw = () => {\n \tsketch.background(255);\n \n // Add the current speed to the position.\n\tposition.add(velocity);\n\n if ((position.x > container.width) || (position.x < 0)) {\n \tvelocity.x = velocity.x * -1;\n }\n \n if ((position.y > container.height) || (position.y < 0)) {\n velocity.y = velocity.y * -1;\n }\n\n // Display circle at x position\n sketch.stroke(0);\n sketch.strokeWeight(2);\n sketch.fill(127);\n sketch.ellipse(position.x, position.y, 48, 48);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"class Ball {\n constructor(sketch) {\n this.sketch = sketch;\n this.position = new this.sketch.createVector(100, 100);\n this.velocity = new this.sketch.createVector(2.5, 5);\n }\n\n update() {\n // Add the current speed to the position.\n this.position.add(this.velocity);\n if ((this.position.x > container.width) || (this.position.x < 0)) {\n this.velocity.x = this.velocity.x * -1;\n }\n if ((this.position.y > container.height) || (this.position.y < 0)) {\n this.velocity.y = this.velocity.y * -1;\n }\n }\n display() {\n // Display circle at x position\n this.sketch.stroke(0);\n this.sketch.fill(175);\n this.sketch.ellipse(this.position.x, this.position.y, 48, 48);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"sketch3 = function( sketch ) { \n let b;\n\n sketch.setup = () => {\n sketch.createCanvas(640, 360);\n b = new Ball(sketch);\n };\n\n sketch.draw = () => {\n sketch.background(255);\n b.update();\n b.display();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"sketch4 = function(sketch) {\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n };\n\n sketch.draw = () => {\n sketch.background(51);\n \n let mouse = sketch.createVector(sketch.mouseX, sketch.mouseY);\n let center = sketch.createVector(container.width / 2, container.height / 2);\n mouse.sub(center);\n\n sketch.translate(container.width / 2, container.height / 2);\n sketch.strokeWeight(2);\n sketch.stroke(255);\n\tsketch.line(0, 0, mouse.x,mouse.y);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"sketch5 = function(sketch) {\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n };\n\n sketch.draw = () => {\n sketch.background(51);\n\n let mouse = sketch.createVector(sketch.mouseX, sketch.mouseY);\n let center = sketch.createVector(container.width / 2, container.height / 2);\n mouse.sub(center);\n\n // Multiplying a vector! The vector is now half its original size (multiplied by 0.5).\n mouse.mult(0.5);\n \n sketch.translate(container.width / 2, container.height / 2);\n sketch.strokeWeight(2);\n sketch.stroke(255);\n\tsketch.line(0,0,mouse.x,mouse.y);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"sketch6 = function(sketch) {\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n };\n\n sketch.draw = () => {\n sketch.background(51);\n\n let mouse = sketch.createVector(sketch.mouseX, sketch.mouseY);\n let center = sketch.createVector(container.width / 2, container.height / 2);\n mouse.sub(center);\n\n let m = mouse.mag();\n sketch.fill(255);\n sketch.stroke(0);\n sketch.rect(0, 0, m, 10);\n \n sketch.translate(container.width / 2, container.height / 2);\n sketch.strokeWeight(2);\n sketch.stroke(255);\n\tsketch.line(0, 0, mouse.x, mouse.y);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"sketch7 = function(sketch) {\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n };\n\n sketch.draw = () => {\n sketch.background(51);\n\n // A vector that points to the mouse position\n let mouse = sketch.createVector(sketch.mouseX, sketch.mouseY);\n // A vector that points to the center of the window\n let center = sketch.createVector(container.width / 2, container.height / 2);\n mouse.sub(center);\n // Normalize the vector\n mouse.normalize();\n // Multiply its length by 50\n mouse.mult(150);\n \n sketch.translate(container.width / 2, container.height / 2);\n // Draw the resulting vector\n sketch.strokeWeight(2);\n sketch.stroke(255);\n\tsketch.line(0, 0, mouse.x, mouse.y);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"class Mover {\n constructor(sketch){\n this.sketch = sketch;\n this.position = this.sketch.createVector(this.sketch.random(container.width), this.sketch.random(container.height));\n this.velocity = this.sketch.createVector(this.sketch.random(-2, 2), this.sketch.random(-2, 2));\n }\n\n update() {\n this.position.add(this.velocity);\n }\n\n display() {\n this.sketch.stroke(0);\n this.sketch.strokeWeight(2);\n this.sketch.fill(127);\n this.sketch.ellipse(this.position.x, this.position.y, 48, 48);\n }\n\n checkEdges() {\n\n if (this.position.x > container.width) {\n this.position.x = 0;\n }\n else if (this.position.x < 0) {\n this.position.x = container.width;\n }\n\n if (this.position.y > container.height) {\n this.position.y = 0;\n }\n else if (this.position.y < 0) {\n this.position.y = container.height;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"sketch8 = function(sketch) {\n let mover;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n mover = new Mover(sketch);\n };\n\n sketch.draw = () => {\n sketch.background(51);\n mover.update();\n mover.checkEdges();\n mover.display();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"class Mover2 {\n constructor(sketch){\n this.sketch = sketch;\n this.position = this.sketch.createVector(container.width / 2, container.height / 2);\n this.velocity = this.sketch.createVector();\n this.acceleration = this.sketch.createVector(-0.001, 0.01);\n\tthis.topspeed = 10;\n }\n\n update() {\n this.velocity.add(this.acceleration);\n this.velocity.limit(this.topspeed);\n\tthis.position.add(this.velocity);\n }\n\n display() {\n this.sketch.stroke(0);\n this.sketch.strokeWeight(2);\n this.sketch.fill(127);\n this.sketch.ellipse(this.position.x, this.position.y, 48, 48);\n }\n\n checkEdges() {\n if (this.position.x > container.width) {\n this.position.x = 0;\n }\n else if (this.position.x < 0) {\n this.position.x = container.width;\n }\n\n if (this.position.y > container.height) {\n this.position.y = 0;\n }\n else if (this.position.y < 0) {\n this.position.y = container.height;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"sketch9 = function(sketch) {\n let mover;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n mover = new Mover2(sketch);\n };\n\n sketch.draw = () => {\n sketch.background(51);\n\n mover.update();\n mover.checkEdges();\n mover.display();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"sketch10 = function(sketch) {\n let mover;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n mover = new Mover3(sketch);\n };\n\n sketch.draw = () => {\n sketch.background(51);\n\n mover.update();\n mover.checkEdges();\n mover.display();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"sketch11 = function(sketch) {\n let mover;\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n mover = new Mover4(sketch);\n };\n\n sketch.draw = () => {\n sketch.background(51);\n\n mover.update();\n mover.checkEdges();\n mover.display();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"sketch12 = function(sketch) {\n let movers = [];\n\n sketch.setup = () => {\n sketch.createCanvas(container.width, container.height);\n for (var i = 0; i < 20; i++) {\n movers[i] = new Mover4(sketch);\n }\n };\n\n sketch.draw = () => {\n sketch.background(51);\n\n for (let i = 0; i < movers.length; i++) {\n movers[i].update();\n movers[i].display();\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"{\n const sketches = [sketch1, sketch2, sketch3, sketch4, sketch5, sketch6, sketch7, sketch8, sketch9, \tsketch10, sketch11, sketch12];\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);\n return \"Container Created\";\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}