├── README.md ├── index.html ├── boundary.js ├── sketch.js ├── LICENSE ├── particle.js └── ray.js /README.md: -------------------------------------------------------------------------------- 1 | # p5-sketch-video-tutorial 2 | I am making a video tutorial on how to upload your p5.js sketch to GitHub for hosting with GitHub pages! 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /boundary.js: -------------------------------------------------------------------------------- 1 | // Daniel Shiffman 2 | // https://thecodingtrain.com/CodingChallenges/145-2d-ray-casting.html 3 | // https://youtu.be/TOEi6T2mtHo 4 | 5 | // 2D Ray Casting 6 | 7 | class Boundary { 8 | constructor(x1, y1, x2, y2) { 9 | this.a = createVector(x1, y1); 10 | this.b = createVector(x2, y2); 11 | } 12 | 13 | show() { 14 | stroke(255); 15 | line(this.a.x, this.a.y, this.b.x, this.b.y); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /sketch.js: -------------------------------------------------------------------------------- 1 | // Daniel Shiffman 2 | // https://thecodingtrain.com/CodingChallenges/145-2d-ray-casting.html 3 | // https://youtu.be/TOEi6T2mtHo 4 | 5 | // 2D Ray Casting 6 | 7 | let walls = []; 8 | let ray; 9 | let particle; 10 | let xoff = 0; 11 | let yoff = 10000; 12 | 13 | function setup() { 14 | createCanvas(400, 400); 15 | for (let i = 0; i < 5; i++) { 16 | let x1 = random(width); 17 | let x2 = random(width); 18 | let y1 = random(height); 19 | let y2 = random(height); 20 | walls[i] = new Boundary(x1, y1, x2, y2); 21 | } 22 | walls.push(new Boundary(-1, -1, width, -1)); 23 | walls.push(new Boundary(width, -1, width, height)); 24 | walls.push(new Boundary(width, height, -1, height)); 25 | walls.push(new Boundary(-1, height, -1, -1)); 26 | particle = new Particle(); 27 | } 28 | 29 | function draw() { 30 | background(0); 31 | for (let wall of walls) { 32 | wall.show(); 33 | } 34 | //particle.update(noise(xoff) * width, noise(yoff) * height); 35 | particle.update(mouseX, mouseY); 36 | particle.show(); 37 | particle.look(walls); 38 | 39 | xoff += 0.01; 40 | yoff += 0.01; 41 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Daniel Shiffman 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /particle.js: -------------------------------------------------------------------------------- 1 | // Daniel Shiffman 2 | // https://thecodingtrain.com/CodingChallenges/145-2d-ray-casting.html 3 | // https://youtu.be/TOEi6T2mtHo 4 | 5 | // 2D Ray Casting 6 | 7 | class Particle { 8 | constructor() { 9 | this.pos = createVector(width / 2, height / 2); 10 | this.rays = []; 11 | for (let a = 0; a < 360; a += 1) { 12 | this.rays.push(new Ray(this.pos, radians(a))); 13 | } 14 | } 15 | 16 | update(x, y) { 17 | this.pos.set(x, y); 18 | } 19 | 20 | look(walls) { 21 | for (let i = 0; i < this.rays.length; i++) { 22 | const ray = this.rays[i]; 23 | let closest = null; 24 | let record = Infinity; 25 | for (let wall of walls) { 26 | const pt = ray.cast(wall); 27 | if (pt) { 28 | const d = p5.Vector.dist(this.pos, pt); 29 | if (d < record) { 30 | record = d; 31 | closest = pt; 32 | } 33 | } 34 | } 35 | if (closest) { 36 | // colorMode(HSB); 37 | // stroke((i + frameCount * 2) % 360, 255, 255, 50); 38 | stroke(255, 100); 39 | line(this.pos.x, this.pos.y, closest.x, closest.y); 40 | } 41 | } 42 | } 43 | 44 | show() { 45 | fill(255); 46 | ellipse(this.pos.x, this.pos.y, 4); 47 | for (let ray of this.rays) { 48 | ray.show(); 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /ray.js: -------------------------------------------------------------------------------- 1 | // Daniel Shiffman 2 | // https://thecodingtrain.com/CodingChallenges/145-2d-ray-casting.html 3 | // https://youtu.be/TOEi6T2mtHo 4 | 5 | // 2D Ray Casting 6 | 7 | class Ray { 8 | constructor(pos, angle) { 9 | this.pos = pos; 10 | this.dir = p5.Vector.fromAngle(angle); 11 | } 12 | 13 | lookAt(x, y) { 14 | this.dir.x = x - this.pos.x; 15 | this.dir.y = y - this.pos.y; 16 | this.dir.normalize(); 17 | } 18 | 19 | show() { 20 | stroke(255); 21 | push(); 22 | translate(this.pos.x, this.pos.y); 23 | line(0, 0, this.dir.x * 10, this.dir.y * 10); 24 | pop(); 25 | } 26 | 27 | cast(wall) { 28 | const x1 = wall.a.x; 29 | const y1 = wall.a.y; 30 | const x2 = wall.b.x; 31 | const y2 = wall.b.y; 32 | 33 | const x3 = this.pos.x; 34 | const y3 = this.pos.y; 35 | const x4 = this.pos.x + this.dir.x; 36 | const y4 = this.pos.y + this.dir.y; 37 | 38 | const den = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4); 39 | if (den == 0) { 40 | return; 41 | } 42 | 43 | const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den; 44 | const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / den; 45 | if (t > 0 && t < 1 && u > 0) { 46 | const pt = createVector(); 47 | pt.x = x1 + t * (x2 - x1); 48 | pt.y = y1 + t * (y2 - y1); 49 | return pt; 50 | } else { 51 | return; 52 | } 53 | } 54 | } 55 | --------------------------------------------------------------------------------