From de1213c6759940e8c3ab84f96518bbe677e145c7 Mon Sep 17 00:00:00 2001 From: ivy Date: Wed, 20 Feb 2019 19:38:12 -0500 Subject: [PATCH 01/15] fix template? --- templates/template.html | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/templates/template.html b/templates/template.html index 257f243..d7f0b63 100644 --- a/templates/template.html +++ b/templates/template.html @@ -17,17 +17,14 @@ }; - - - <% if (htmlWebpackPlugin.options.noCanvasDOM) { %> -
- <% } else { %> - - <% } %> - + <% if (htmlWebpackPlugin.options.noCanvasDOM) { %> +
+ <% } else { %> + + <% } %>
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.ctime %> From a7ddc74b4191b6ecb1d5dcc3ac31f2140a0a571b Mon Sep 17 00:00:00 2001 From: ivy Date: Wed, 20 Feb 2019 19:38:27 -0500 Subject: [PATCH 02/15] first stuff --- js/ricochet.p5.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 js/ricochet.p5.js diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js new file mode 100644 index 0000000..45aeba4 --- /dev/null +++ b/js/ricochet.p5.js @@ -0,0 +1,25 @@ +import p5 from 'p5'; + +new p5((sketch) => { + let start = p5.createVector(100, 100), + end = p5.createVector(0, 0), + augment = p5.createVector(1, 1); + + const canvas_w = 1200, + canvas_h = 800; + + const update = () => { + start.add(augment); + }; + + sketch.setup = () => { + p5.createCanvas(canvas_w, canvas_h, p5.WEBGL); + p5.fill('white'); + }; + + sketch.draw = () => { + //sketch.clear(); + update(); + p5.line(start.x, start.y, end.x, end.y); + }; +}); \ No newline at end of file From 4b0f987af471891914cf2bf62e584c431b594cb6 Mon Sep 17 00:00:00 2001 From: ivy Date: Wed, 20 Feb 2019 20:54:42 -0500 Subject: [PATCH 03/15] trying to solve voector and hit proble, --- js/ricochet.p5.js | 27 ++++++++++++++++++--------- templates/template.html | 5 +++++ 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index 45aeba4..633ee73 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -1,25 +1,34 @@ import p5 from 'p5'; new p5((sketch) => { - let start = p5.createVector(100, 100), - end = p5.createVector(0, 0), - augment = p5.createVector(1, 1); + let start = sketch.createVector(100, 100), + end = sketch.createVector(0, 0), + augment = sketch.createVector(1, 1); - const canvas_w = 1200, - canvas_h = 800; + const distance = sketch.createVector(10, 10); + const canvas_w = 800, + canvas_h = 600; + + const hit = (v) => (v.x > canvas_w || v.x < 0 || v.y > canvas_h || v.y < 0); const update = () => { start.add(augment); + end.add(start - distance); + if (hit(start)) { + start.add(augment.mult(-1)); + } }; sketch.setup = () => { - p5.createCanvas(canvas_w, canvas_h, p5.WEBGL); - p5.fill('white'); + const c = sketch.createCanvas(canvas_w, canvas_h, p5.WEBGL); + sketch._pixelDensity = 1; + c.parent('container'); + sketch.fill('white'); }; sketch.draw = () => { - //sketch.clear(); + sketch.clear(); update(); - p5.line(start.x, start.y, end.x, end.y); + sketch.line(start.x, start.y, end.x, end.y); }; }); \ No newline at end of file diff --git a/templates/template.html b/templates/template.html index d7f0b63..5566d95 100644 --- a/templates/template.html +++ b/templates/template.html @@ -10,6 +10,11 @@ #container, #myCanvas { margin: 0 auto; } + + canvas { + border:1px solid black; + } + .about { margin: 0 5px; color: darkslategrey; From a44ac85e5ad200818203bdc975b85a7c0660b219 Mon Sep 17 00:00:00 2001 From: ivy Date: Wed, 20 Feb 2019 22:54:26 -0500 Subject: [PATCH 04/15] black line using buffer --- js/ricochet.p5.js | 44 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index 633ee73..eb78af7 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -2,33 +2,61 @@ import p5 from 'p5'; new p5((sketch) => { let start = sketch.createVector(100, 100), - end = sketch.createVector(0, 0), - augment = sketch.createVector(1, 1); + end = sketch.createVector(0, 0); - const distance = sketch.createVector(10, 10); + let currentAugmentKey; + + const buffer = []; + const s = 1; + const augment = { + 0: sketch.createVector(1 * s, 1 * s), + 1: sketch.createVector(-1 * s, 1 * s), + 2: sketch.createVector(1 * s, -1 * s), + 3: sketch.createVector(-1 * s, -1 * s) + }; + + const distance = 200; const canvas_w = 800, canvas_h = 600; const hit = (v) => (v.x > canvas_w || v.x < 0 || v.y > canvas_h || v.y < 0); + const getNextDirection = (curr) => { + let r = Math.floor(Math.random() * Math.floor(4)); + return (r != curr) ? r : getNextDirection(r); + }; + const update = () => { - start.add(augment); - end.add(start - distance); + if (buffer.length == distance) { + buffer.shift(); + end = buffer[0]; + } else { + let delta = sketch.createVector(distance, distance); + p5.Vector.sub(start, delta, end); + } + start.add(augment[currentAugmentKey]); + buffer.push(start.copy()); + + // console.log(`start = ${start}, 0 = ${buffer[0]}, end = ${end}`); + if (hit(start)) { - start.add(augment.mult(-1)); + currentAugmentKey = getNextDirection(currentAugmentKey); } }; sketch.setup = () => { const c = sketch.createCanvas(canvas_w, canvas_h, p5.WEBGL); - sketch._pixelDensity = 1; c.parent('container'); sketch.fill('white'); + currentAugmentKey = 0; }; sketch.draw = () => { sketch.clear(); update(); - sketch.line(start.x, start.y, end.x, end.y); + + for (let v = 0; v < buffer.length; v++) { + sketch.point(buffer[v].x, buffer[v].y); + } }; }); \ No newline at end of file From 2895335913db0666fd231d693cf300087352e763 Mon Sep 17 00:00:00 2001 From: ivy Date: Thu, 21 Feb 2019 21:53:19 -0500 Subject: [PATCH 05/15] Line refactor, works but still gets lost --- js/ricochet.p5.js | 197 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 139 insertions(+), 58 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index eb78af7..6dd7385 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -1,62 +1,143 @@ import p5 from 'p5'; + + new p5((sketch) => { - let start = sketch.createVector(100, 100), - end = sketch.createVector(0, 0); - - let currentAugmentKey; - - const buffer = []; - const s = 1; - const augment = { - 0: sketch.createVector(1 * s, 1 * s), - 1: sketch.createVector(-1 * s, 1 * s), - 2: sketch.createVector(1 * s, -1 * s), - 3: sketch.createVector(-1 * s, -1 * s) - }; - - const distance = 200; - const canvas_w = 800, - canvas_h = 600; - - const hit = (v) => (v.x > canvas_w || v.x < 0 || v.y > canvas_h || v.y < 0); - - const getNextDirection = (curr) => { - let r = Math.floor(Math.random() * Math.floor(4)); - return (r != curr) ? r : getNextDirection(r); - }; - - const update = () => { - if (buffer.length == distance) { - buffer.shift(); - end = buffer[0]; - } else { - let delta = sketch.createVector(distance, distance); - p5.Vector.sub(start, delta, end); - } - start.add(augment[currentAugmentKey]); - buffer.push(start.copy()); - - // console.log(`start = ${start}, 0 = ${buffer[0]}, end = ${end}`); - - if (hit(start)) { - currentAugmentKey = getNextDirection(currentAugmentKey); - } - }; - - sketch.setup = () => { - const c = sketch.createCanvas(canvas_w, canvas_h, p5.WEBGL); - c.parent('container'); - sketch.fill('white'); - currentAugmentKey = 0; - }; - - sketch.draw = () => { - sketch.clear(); - update(); - - for (let v = 0; v < buffer.length; v++) { - sketch.point(buffer[v].x, buffer[v].y); - } - }; + + const canvas_w = 800, + canvas_h = 600; + + const s = 10; + const augment = { + 0: sketch.createVector(1 * s, 1 * s), + 1: sketch.createVector(-1 * s, 1 * s), + 2: sketch.createVector(1 * s, -1 * s), + 3: sketch.createVector(-1 * s, -1 * s) + }; + + const hit = (v) => (v.x >= canvas_w || v.x <= 0 || v.y >= canvas_h || v.y <= 0); + + // trying to prevent changing directions too much if we are out of bounds + const isInBounds = (v) => (v.x <= canvas_w || v.x >= 0 || v.y <= canvas_h || v.y >= 0); + + const getNextDirection = (curr) => { + let r = Math.floor(Math.random() * Math.floor(4)); + return (r != curr) ? r : getNextDirection(r); + }; + + /** + * @returns percentage RGBA notation stroke('rgba(100%,0%,100%,0.5)'); + */ + const randomColor = (opacity = 1.0) => { + const c = new Array(3).fill(0).map(() => Math.ceil(Math.random() * 100)); + return c; + } + + const Line = function(x1 = 100, y1 = 100, x2 = 0, y2 = 0, s = 10, len = 100) { + this.currentColor = 'black'; + this.speed = s; + this.length = len; + + this.start = sketch.createVector(x1, y1), + this.end = sketch.createVector(x2, y2); + + this.buffer = []; + + this.currentAugmentKey = 0; + this.currentColor = randomColor(); + + this.setColor = (c) => { + this.color = c; + }; + + this.restart = () => {}; + + this.update = () => { + if (this.buffer.length == this.line_len) { + this.buffer.shift(); + end = this.buffer[0]; // the oldest values are at the front + } else { + let delta = sketch.createVector(this.line_len, this.line_len); + p5.Vector.sub(this.start, delta, this.end); + } + this.start.add(augment[this.currentAugmentKey]); + this.buffer.push(this.start.copy()); + + // console.log(`start = ${start}, 0 = ${buffer[0]}, end = ${end}`); + + if (hit(this.start)) { + // if (isInBounds(start)) { + // get nearest edge + + this.currentColor = randomColor(); + this.currentAugmentKey = getNextDirection(this.currentAugmentKey); + console.log("now the direction is", this.currentAugmentKey); + // } + // else { + // this.restart(); + // } + } + }; + + this.draw = () => { + const bufferLength = this.buffer.length; + + for (let v = 0; v < bufferLength; v++) { + const percent_left = (1 - (v / bufferLength)); // 0 opacity on the first one sice its the last pixel really + const opacity = bufferLength - (percent_left * bufferLength); + + if (v == bufferLength - 1) { + sketch.stroke('black'); + } else { + const str = `rgba(${this.currentColor[0]}%, ${this.currentColor[1]}%, ${this.currentColor[2]}%, ${opacity / 100})`; + sketch.stroke(str); + } + if (bufferLength > v + 1) { + sketch.line(this.buffer[v].x, this.buffer[v].y, this.buffer[v + 1].x, this.buffer[v + 1].y); + } else { + sketch.point(this.buffer[v].x, this.buffer[v].y); + } + } + } + } + + // const nearestEdge = (v) => { + // let nearestEdge = sketch.createVector(0, 0); + // if (v.x > canvas_w) { + // nearestEdge.x = canvas_w; + // // recalc + // } + // if (v.y > canvas_h) { + // nearestEdge.x = canvas_h; + // //recalc + // } + // if (v.x < 0) { + // // recalc + + // } + // if (v.y < 0) { + // //recalc + // const a = sketch.createVector(v.x, -1 * v.y); + // v.add(a); + // } + // } + + + let line; + + sketch.setup = () => { + const c = sketch.createCanvas(canvas_w, canvas_h, p5.WEBGL); + c.parent('container'); + + sketch.fill('white'); + sketch.strokeWeight(4); + + line = new Line(); + }; + + sketch.draw = () => { + sketch.clear(); + line.update(); + line.draw(); + }; }); \ No newline at end of file From fdfe5c220cbf33f7ffdb176d78d2ad78874f7362 Mon Sep 17 00:00:00 2001 From: ivy Date: Mon, 25 Feb 2019 23:31:24 -0500 Subject: [PATCH 06/15] webpacked version working --- js/ricochet.p5.js | 293 ++++++++++++++++++++++++---------------------- 1 file changed, 150 insertions(+), 143 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index 6dd7385..378fb49 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -1,143 +1,150 @@ -import p5 from 'p5'; - - - -new p5((sketch) => { - - const canvas_w = 800, - canvas_h = 600; - - const s = 10; - const augment = { - 0: sketch.createVector(1 * s, 1 * s), - 1: sketch.createVector(-1 * s, 1 * s), - 2: sketch.createVector(1 * s, -1 * s), - 3: sketch.createVector(-1 * s, -1 * s) - }; - - const hit = (v) => (v.x >= canvas_w || v.x <= 0 || v.y >= canvas_h || v.y <= 0); - - // trying to prevent changing directions too much if we are out of bounds - const isInBounds = (v) => (v.x <= canvas_w || v.x >= 0 || v.y <= canvas_h || v.y >= 0); - - const getNextDirection = (curr) => { - let r = Math.floor(Math.random() * Math.floor(4)); - return (r != curr) ? r : getNextDirection(r); - }; - - /** - * @returns percentage RGBA notation stroke('rgba(100%,0%,100%,0.5)'); - */ - const randomColor = (opacity = 1.0) => { - const c = new Array(3).fill(0).map(() => Math.ceil(Math.random() * 100)); - return c; - } - - const Line = function(x1 = 100, y1 = 100, x2 = 0, y2 = 0, s = 10, len = 100) { - this.currentColor = 'black'; - this.speed = s; - this.length = len; - - this.start = sketch.createVector(x1, y1), - this.end = sketch.createVector(x2, y2); - - this.buffer = []; - - this.currentAugmentKey = 0; - this.currentColor = randomColor(); - - this.setColor = (c) => { - this.color = c; - }; - - this.restart = () => {}; - - this.update = () => { - if (this.buffer.length == this.line_len) { - this.buffer.shift(); - end = this.buffer[0]; // the oldest values are at the front - } else { - let delta = sketch.createVector(this.line_len, this.line_len); - p5.Vector.sub(this.start, delta, this.end); - } - this.start.add(augment[this.currentAugmentKey]); - this.buffer.push(this.start.copy()); - - // console.log(`start = ${start}, 0 = ${buffer[0]}, end = ${end}`); - - if (hit(this.start)) { - // if (isInBounds(start)) { - // get nearest edge - - this.currentColor = randomColor(); - this.currentAugmentKey = getNextDirection(this.currentAugmentKey); - console.log("now the direction is", this.currentAugmentKey); - // } - // else { - // this.restart(); - // } - } - }; - - this.draw = () => { - const bufferLength = this.buffer.length; - - for (let v = 0; v < bufferLength; v++) { - const percent_left = (1 - (v / bufferLength)); // 0 opacity on the first one sice its the last pixel really - const opacity = bufferLength - (percent_left * bufferLength); - - if (v == bufferLength - 1) { - sketch.stroke('black'); - } else { - const str = `rgba(${this.currentColor[0]}%, ${this.currentColor[1]}%, ${this.currentColor[2]}%, ${opacity / 100})`; - sketch.stroke(str); - } - if (bufferLength > v + 1) { - sketch.line(this.buffer[v].x, this.buffer[v].y, this.buffer[v + 1].x, this.buffer[v + 1].y); - } else { - sketch.point(this.buffer[v].x, this.buffer[v].y); - } - } - } - } - - // const nearestEdge = (v) => { - // let nearestEdge = sketch.createVector(0, 0); - // if (v.x > canvas_w) { - // nearestEdge.x = canvas_w; - // // recalc - // } - // if (v.y > canvas_h) { - // nearestEdge.x = canvas_h; - // //recalc - // } - // if (v.x < 0) { - // // recalc - - // } - // if (v.y < 0) { - // //recalc - // const a = sketch.createVector(v.x, -1 * v.y); - // v.add(a); - // } - // } - - - let line; - - sketch.setup = () => { - const c = sketch.createCanvas(canvas_w, canvas_h, p5.WEBGL); - c.parent('container'); - - sketch.fill('white'); - sketch.strokeWeight(4); - - line = new Line(); - }; - - sketch.draw = () => { - sketch.clear(); - line.update(); - line.draw(); - }; -}); \ No newline at end of file +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var p5__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! p5 */ "./node_modules/p5/lib/p5.js"); +/* harmony import */ var p5__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(p5__WEBPACK_IMPORTED_MODULE_0__); + +new p5__WEBPACK_IMPORTED_MODULE_0___default.a(function (sketch) { + var canvas_w = 800, + canvas_h = 600; + var vel = 10; + var directions = [sketch.createVector(1 * vel, 1 * vel), sketch.createVector(-1 * vel, 1 * vel), sketch.createVector(1 * vel, -1 * vel), sketch.createVector(-1 * vel, -1 * vel)]; + /** + * @function hit + * @param {Vector} v + * @returns {Boolean} whether or not vector has hit the wall + */ + + var hit = function hit(v) { + return v.x >= canvas_w || v.x <= 0 || v.y >= canvas_h || v.y <= 0; + }; // trying to prevent changing directions too much if we are out of bounds + + + var isInBounds = function isInBounds(v) { + return !hit(v); + }; + + var getNewDirection = function getNewDirection(direction) { + var d = Math.floor(Math.random() * Math.floor(directions.length)); + return d != direction ? d : getNewDirection(d); + }; + /** + * @returns percentage RGBA notation stroke('rgba(100%,0%,100%,0.5)'); + */ + + + var randomColor = function randomColor() { + var opacity = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1.0; + return new Array(3).fill(0).map(function () { + return Math.ceil(Math.random() * 100); + }); + }; + + var Vector = function Vector() { + var _this = this; + + var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100; + var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100; + var vel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10; + var mag = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 100; + this.velocity = vel; + this.magnitude = mag; // magnitude ?? + + this.buffer = []; + this.currentDirectionIndex = 0; + this.currentColor = randomColor(); + this.headPoint = sketch.createVector(x1, y1); + this.endPoint = null; + + this.setColor = function (c) { + _this.color = c; + }; + + this.restart = function () {}; + + this.bufferIsFull = function () { + return _this.buffer.length === _this.magnitude; + }; // https://processing.org/examples/accelerationwithvectors.html + + + this.update = function () { + if (_this.bufferIsFull()) { + _this.buffer.shift(); + + _this.endPoint = _this.buffer[0]; // the oldest are at the front of the buffer + } + + _this.headPoint.add(directions[_this.currentDirectionIndex]); + + _this.buffer.push(_this.headPoint.copy()); // console.log(`start = ${start}, 0 = ${buffer[0]}, end = ${end}`); + + + if (hit(_this.headPoint)) { + // if (isInBounds(start)) { + // get nearest edge + _this.currentColor = randomColor(); + _this.currentDirectionIndex = getNewDirection(_this.currentDirectionIndex); + console.log("now the direction is", _this.currentDirectionIndex); // } + // else { + // this.restart(); + // } + } + }; + + this.draw = function () { + var bufferLength = _this.buffer.length; + + for (var v = 0; v < bufferLength; v++) { + var percentageLeft = 1 - v / bufferLength; // 0 opacity on the first one since its the last pixel really + + var opacity = bufferLength - percentageLeft * bufferLength; + + if (v == bufferLength - 1) { + sketch.stroke('black'); + } else { + var str = "rgba(".concat(_this.currentColor[0], "%, ").concat(_this.currentColor[1], "%, ").concat(_this.currentColor[2], "%, ").concat(opacity / 100, ")"); + sketch.stroke(str); + } + + if (bufferLength > v + 1) { + sketch.line(_this.buffer[v].x, _this.buffer[v].y, _this.buffer[v + 1].x, _this.buffer[v + 1].y); + } else { + sketch.point(_this.buffer[v].x, _this.buffer[v].y); + } + } + }; + }; // const nearestEdge = (v) => { + // let nearestEdge = sketch.createVector(0, 0); + // if (v.x > canvas_w) { + // nearestEdge.x = canvas_w; + // // recalc + // } + // if (v.y > canvas_h) { + // nearestEdge.x = canvas_h; + // //recalc + // } + // if (v.x < 0) { + // // recalc + // } + // if (v.y < 0) { + // //recalc + // const a = sketch.createVector(v.x, -1 * v.y); + // v.add(a); + // } + // } + + + var line; + + sketch.setup = function () { + var c = sketch.createCanvas(canvas_w, canvas_h, p5__WEBPACK_IMPORTED_MODULE_0___default.a.WEBGL); + c.parent('container'); + sketch.fill('white'); + sketch.strokeWeight(4); + line = new Vector(); + }; + + sketch.draw = function () { + sketch.clear(); + line.update(); + line.draw(); + }; +}); From cd42a054752f085066599feafa35fa07a4dbff6d Mon Sep 17 00:00:00 2001 From: ivy Date: Thu, 28 Feb 2019 00:13:14 -0500 Subject: [PATCH 07/15] basic example bouncing ball, dumb direction --- js/basic.p5.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 js/basic.p5.js diff --git a/js/basic.p5.js b/js/basic.p5.js new file mode 100644 index 0000000..2e3e5f8 --- /dev/null +++ b/js/basic.p5.js @@ -0,0 +1,29 @@ +import p5 from 'p5'; + +new p5((s) => { + + let pos = s.createVector(1, 1); + + let speed = s.createVector(1., 3.); + + const update = function() { + if (pos.x > s.width || pos.x < 0) { + speed.x *= -1; + } else if (pos.y > s.height || pos.y < 0) { + speed.y *= -1; + } + pos.add(speed); + }; + + s.setup = function() { + s.createCanvas(400, 300); + s.background(0); + }; + + s.draw = function() { + update(); + s.background(0); + s.ellipse(pos.x, pos.y, 10); + }; +}); + From 898535a28ccaccdaafb21e76732f343f94951d9f Mon Sep 17 00:00:00 2001 From: ivy Date: Thu, 28 Feb 2019 00:13:24 -0500 Subject: [PATCH 08/15] first version --- js/ricochet.p5.js | 97 +++++++++++++++++++++-------------------------- 1 file changed, 43 insertions(+), 54 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index 378fb49..0d246f7 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -1,29 +1,28 @@ -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var p5__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! p5 */ "./node_modules/p5/lib/p5.js"); -/* harmony import */ var p5__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(p5__WEBPACK_IMPORTED_MODULE_0__); - -new p5__WEBPACK_IMPORTED_MODULE_0___default.a(function (sketch) { - var canvas_w = 800, - canvas_h = 600; - var vel = 10; - var directions = [sketch.createVector(1 * vel, 1 * vel), sketch.createVector(-1 * vel, 1 * vel), sketch.createVector(1 * vel, -1 * vel), sketch.createVector(-1 * vel, -1 * vel)]; +import p5 from 'p5'; + +new p5((sketch) => { + const canvas_w = 800, + canvas_h = 600; + const vel = 10; + const directions = [ + sketch.createVector(1 * vel, 1 * vel), + sketch.createVector(-1 * vel, 1 * vel), + sketch.createVector(1 * vel, -1 * vel), + sketch.createVector(-1 * vel, -1 * vel)]; /** * @function hit * @param {Vector} v * @returns {Boolean} whether or not vector has hit the wall */ - var hit = function hit(v) { - return v.x >= canvas_w || v.x <= 0 || v.y >= canvas_h || v.y <= 0; - }; // trying to prevent changing directions too much if we are out of bounds + const hit = (v) => v.x >= canvas_w || v.x <= 0 || v.y >= canvas_h || v.y <= 0; + // trying to prevent changing directions too much if we are out of bounds - var isInBounds = function isInBounds(v) { - return !hit(v); - }; + const isInBounds = (v) => !hit(v); - var getNewDirection = function getNewDirection(direction) { - var d = Math.floor(Math.random() * Math.floor(directions.length)); + const getNewDirection = function(direction) { + const d = Math.floor(Math.random() * Math.floor(directions.length)); return d != direction ? d : getNewDirection(d); }; /** @@ -31,21 +30,14 @@ new p5__WEBPACK_IMPORTED_MODULE_0___default.a(function (sketch) { */ - var randomColor = function randomColor() { - var opacity = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1.0; + const randomColor = function randomColor(opacity=1.0) { return new Array(3).fill(0).map(function () { return Math.ceil(Math.random() * 100); }); }; - var Vector = function Vector() { - var _this = this; - - var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100; - var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100; - var vel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10; - var mag = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 100; - this.velocity = vel; + const Vector = function(x1=100, y1=100, vel=10, mag=100) { + this.velocity = vel; this.magnitude = mag; // magnitude ?? this.buffer = []; @@ -54,35 +46,32 @@ new p5__WEBPACK_IMPORTED_MODULE_0___default.a(function (sketch) { this.headPoint = sketch.createVector(x1, y1); this.endPoint = null; - this.setColor = function (c) { - _this.color = c; - }; this.restart = function () {}; - this.bufferIsFull = function () { - return _this.buffer.length === _this.magnitude; + this.bufferIsFull = function() { + return this.buffer.length === this.magnitude; }; // https://processing.org/examples/accelerationwithvectors.html - this.update = function () { - if (_this.bufferIsFull()) { - _this.buffer.shift(); + this.update = function() { + if (this.bufferIsFull()) { + this.buffer.shift(); - _this.endPoint = _this.buffer[0]; // the oldest are at the front of the buffer + this.endPoint = this.buffer[0]; // the oldest are at the front of the buffer } - _this.headPoint.add(directions[_this.currentDirectionIndex]); + this.headPoint.add(directions[this.currentDirectionIndex]); - _this.buffer.push(_this.headPoint.copy()); // console.log(`start = ${start}, 0 = ${buffer[0]}, end = ${end}`); + this.buffer.push(this.headPoint.copy()); // console.log(`start = ${start}, 0 = ${buffer[0]}, end = ${end}`); - if (hit(_this.headPoint)) { + if (hit(this.headPoint)) { // if (isInBounds(start)) { // get nearest edge - _this.currentColor = randomColor(); - _this.currentDirectionIndex = getNewDirection(_this.currentDirectionIndex); - console.log("now the direction is", _this.currentDirectionIndex); // } + this.currentColor = randomColor(); + this.currentDirectionIndex = getNewDirection(this.currentDirectionIndex); + console.log("now the direction is", this.currentDirectionIndex); // } // else { // this.restart(); // } @@ -90,28 +79,28 @@ new p5__WEBPACK_IMPORTED_MODULE_0___default.a(function (sketch) { }; this.draw = function () { - var bufferLength = _this.buffer.length; + const bufferLength = this.buffer.length; for (var v = 0; v < bufferLength; v++) { - var percentageLeft = 1 - v / bufferLength; // 0 opacity on the first one since its the last pixel really - - var opacity = bufferLength - percentageLeft * bufferLength; + let percentageLeft = 1 - v / bufferLength; // 0 opacity on the first one since its the last pixel really + let opacity = bufferLength - percentageLeft * bufferLength; if (v == bufferLength - 1) { sketch.stroke('black'); } else { - var str = "rgba(".concat(_this.currentColor[0], "%, ").concat(_this.currentColor[1], "%, ").concat(_this.currentColor[2], "%, ").concat(opacity / 100, ")"); - sketch.stroke(str); + let str = `rgba(${this.currentColor[0]}%, ${this.currentColor[1]}%, ${this.currentColor[2]}%, ${opacity / 100})`; + sketch.stroke(str); } - if (bufferLength > v + 1) { - sketch.line(_this.buffer[v].x, _this.buffer[v].y, _this.buffer[v + 1].x, _this.buffer[v + 1].y); + sketch.line(this.buffer[v].x, this.buffer[v].y, this.buffer[v + 1].x, this.buffer[v + 1].y); } else { - sketch.point(_this.buffer[v].x, _this.buffer[v].y); + sketch.point(this.buffer[v].x, this.buffer[v].y); } } }; - }; // const nearestEdge = (v) => { + }; + + // const nearestEdge = (v) => { // let nearestEdge = sketch.createVector(0, 0); // if (v.x > canvas_w) { // nearestEdge.x = canvas_w; @@ -134,7 +123,7 @@ new p5__WEBPACK_IMPORTED_MODULE_0___default.a(function (sketch) { var line; - sketch.setup = function () { + sketch.setup = () => { var c = sketch.createCanvas(canvas_w, canvas_h, p5__WEBPACK_IMPORTED_MODULE_0___default.a.WEBGL); c.parent('container'); sketch.fill('white'); @@ -142,7 +131,7 @@ new p5__WEBPACK_IMPORTED_MODULE_0___default.a(function (sketch) { line = new Vector(); }; - sketch.draw = function () { + sketch.draw = () => { sketch.clear(); line.update(); line.draw(); From 1c82339013c5ef3787a48fe84a5cbddf51868290 Mon Sep 17 00:00:00 2001 From: ivy Date: Fri, 1 Mar 2019 18:10:21 -0500 Subject: [PATCH 09/15] working version with shift and magnitude --- js/ricochet.p5.js | 265 +++++++++++++++++++++++----------------------- 1 file changed, 130 insertions(+), 135 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index 0d246f7..f7cd74a 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -1,139 +1,134 @@ import p5 from 'p5'; new p5((sketch) => { - const canvas_w = 800, - canvas_h = 600; - const vel = 10; - const directions = [ - sketch.createVector(1 * vel, 1 * vel), - sketch.createVector(-1 * vel, 1 * vel), - sketch.createVector(1 * vel, -1 * vel), - sketch.createVector(-1 * vel, -1 * vel)]; - /** - * @function hit - * @param {Vector} v - * @returns {Boolean} whether or not vector has hit the wall - */ - - const hit = (v) => v.x >= canvas_w || v.x <= 0 || v.y >= canvas_h || v.y <= 0; - // trying to prevent changing directions too much if we are out of bounds - - - const isInBounds = (v) => !hit(v); - - const getNewDirection = function(direction) { - const d = Math.floor(Math.random() * Math.floor(directions.length)); - return d != direction ? d : getNewDirection(d); - }; - /** - * @returns percentage RGBA notation stroke('rgba(100%,0%,100%,0.5)'); - */ - - - const randomColor = function randomColor(opacity=1.0) { - return new Array(3).fill(0).map(function () { - return Math.ceil(Math.random() * 100); - }); - }; - - const Vector = function(x1=100, y1=100, vel=10, mag=100) { - this.velocity = vel; - this.magnitude = mag; // magnitude ?? - - this.buffer = []; - this.currentDirectionIndex = 0; - this.currentColor = randomColor(); - this.headPoint = sketch.createVector(x1, y1); - this.endPoint = null; - - - this.restart = function () {}; - - this.bufferIsFull = function() { - return this.buffer.length === this.magnitude; - }; // https://processing.org/examples/accelerationwithvectors.html - - - this.update = function() { - if (this.bufferIsFull()) { - this.buffer.shift(); - - this.endPoint = this.buffer[0]; // the oldest are at the front of the buffer - } - - this.headPoint.add(directions[this.currentDirectionIndex]); - - this.buffer.push(this.headPoint.copy()); // console.log(`start = ${start}, 0 = ${buffer[0]}, end = ${end}`); - - - if (hit(this.headPoint)) { - // if (isInBounds(start)) { - // get nearest edge - this.currentColor = randomColor(); - this.currentDirectionIndex = getNewDirection(this.currentDirectionIndex); - console.log("now the direction is", this.currentDirectionIndex); // } - // else { - // this.restart(); - // } - } - }; - - this.draw = function () { - const bufferLength = this.buffer.length; - - for (var v = 0; v < bufferLength; v++) { - let percentageLeft = 1 - v / bufferLength; // 0 opacity on the first one since its the last pixel really - let opacity = bufferLength - percentageLeft * bufferLength; - - if (v == bufferLength - 1) { - sketch.stroke('black'); - } else { - let str = `rgba(${this.currentColor[0]}%, ${this.currentColor[1]}%, ${this.currentColor[2]}%, ${opacity / 100})`; - sketch.stroke(str); - } - if (bufferLength > v + 1) { - sketch.line(this.buffer[v].x, this.buffer[v].y, this.buffer[v + 1].x, this.buffer[v + 1].y); - } else { - sketch.point(this.buffer[v].x, this.buffer[v].y); - } - } - }; - }; + + const canvas_w = 800, + canvas_h = 600; + + + const vel = 10; + + // t, r, b, l + const normals = [ + sketch.createVector(1,1), + sketch.createVector(-1,1), + sketch.createVector(1,-1), + sketch.createVector(1,-1) + ]; + + /** + * @function hit + * @param {Vector} v + * @returns {String, Boolean} what edge it hit or false if none + */ + + // need to more accuratel calculate what will hit, + // could hit a corner + const hit = (v) => { + console.log("calling hit test with v is ", v); + if (v.y <= 0) { + return 't'; + } else if (v.x >= canvas_w) { + return 'r'; + } else if (v.y >= canvas_h) { + return 'b' + } else if (v.x <= 0) { + return 'l' + } + return false; + }; + + // trying to prevent changing directions + // too much if we are out of bounds + const isInBounds = (v) => !hit(v); + + const getNewDirection = (direction) => { + let d = Math.floor(Math.random() * Math.floor(normals.length)); + return (d != direction) ? d : getNewDirection(d); + }; + + /** + * @returns percentage RGBA notation stroke('rgba(100%,0%,100%,0.5)'); + */ + const randomColor = (opacity = 1.0) => new Array(3).fill(0).map(() => Math.ceil(Math.random() * 100)); + + const Ray = function(x1=100, y1=100, vel=.2, mag=100) { + + this.velocity = vel; + this.maxMagnitude = mag; // magnitude ?? + + this.currentDirectionIndex = 0; + this.currentColor = randomColor(); + + // start by storing initial vertex + this.vertices = [ sketch.createVector(x1, y1) ]; + + // the last point in our buffer + this.lastVertex = () => this.vertices[this.vertices.length - 1]; + + this.setColor = (c) => this.color = c; + + this.getMagnitude = () => { + const mag = p5.Vector.sub(this.vertices[0], this.lastVertex()).mag(); + + const a = (this.vertices[0].x - this.vertices[this.vertices.length - 1].x); + const b = (this.vertices[0].y - this.vertices[this.vertices.length - 1].y); + const mag2 = Math.sqrt(a*a + b*b); + console.log(a, b, mag, mag2, this.vertices.length); + return mag; + } + + // https://processing.org/examples/accelerationwithvectors.html + // http://www.mightydrake.com/Articles/ricochet.htm + //https://gamedev.stackexchange.com/questions/23672/determine-resulting-angle-of-wall-collision + + this.update = () => { + // if this thing is less than the magnitude we want, add a vertex + if (this.getMagnitude() > this.maxMagnitude) { + this.vertices.pop(); + } + const newVertex = (this.vertices[0].copy()).add(normals[this.currentDirectionIndex]); + this.vertices.unshift(newVertex); + + // console.log(`start = ${this.vertices[0]}, end = ${this.lastVertex()}`); - // const nearestEdge = (v) => { - // let nearestEdge = sketch.createVector(0, 0); - // if (v.x > canvas_w) { - // nearestEdge.x = canvas_w; - // // recalc - // } - // if (v.y > canvas_h) { - // nearestEdge.x = canvas_h; - // //recalc - // } - // if (v.x < 0) { - // // recalc - // } - // if (v.y < 0) { - // //recalc - // const a = sketch.createVector(v.x, -1 * v.y); - // v.add(a); - // } - // } - - - var line; - - sketch.setup = () => { - var c = sketch.createCanvas(canvas_w, canvas_h, p5__WEBPACK_IMPORTED_MODULE_0___default.a.WEBGL); - c.parent('container'); - sketch.fill('white'); - sketch.strokeWeight(4); - line = new Vector(); - }; - - sketch.draw = () => { - sketch.clear(); - line.update(); - line.draw(); - }; -}); + if (hit(this.vertices[0])) { + // debugger + this.currentColor = randomColor(); + this.currentDirectionIndex = getNewDirection(this.currentDirectionIndex); + console.log("now the direction is", this.currentDirectionIndex); + } + }; + + this.draw = () => { + //sketch.push(); + //sketch.translate(this.lastVertex().x, this.lastVertex().y); + sketch.stroke(`rgba(${this.currentColor[0]},${this.currentColor[1]},${this.currentColor[2]},1.0)`); + + for (let v = 0; v < this.vertices.length; v++) { + sketch.point(this.vertices[v].x, this.vertices[v].y); + } + + sketch.stroke('yellow'); + sketch.point(this.vertices[0].x, this.vertices[0].y); + //sketch.pop(); + } + } + + + let ray; + + sketch.setup = () => { + const c = sketch.createCanvas(canvas_w, canvas_h, p5.WEBGL); + c.parent('container'); + sketch.fill('white'); + sketch.strokeWeight(4); + ray = new Ray(); + }; + + sketch.draw = () => { + sketch.clear(); + ray.update(); + ray.draw(); + }; +}); \ No newline at end of file From 811acfd1bc433a1cee76f57ab97155c225384588 Mon Sep 17 00:00:00 2001 From: ivy Date: Sat, 2 Mar 2019 16:03:45 -0500 Subject: [PATCH 10/15] more correct debug --- js/ricochet.p5.js | 77 +++++++++++++++++++++++++++++------------------ 1 file changed, 48 insertions(+), 29 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index f7cd74a..d92f227 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -1,6 +1,6 @@ import p5 from 'p5'; -new p5((sketch) => { +new p5((s) => { const canvas_w = 800, canvas_h = 600; @@ -10,10 +10,10 @@ new p5((sketch) => { // t, r, b, l const normals = [ - sketch.createVector(1,1), - sketch.createVector(-1,1), - sketch.createVector(1,-1), - sketch.createVector(1,-1) + s.createVector(1,1), + s.createVector(-1,1), + s.createVector(1,-1), + s.createVector(1,-1) ]; /** @@ -46,7 +46,6 @@ new p5((sketch) => { let d = Math.floor(Math.random() * Math.floor(normals.length)); return (d != direction) ? d : getNewDirection(d); }; - /** * @returns percentage RGBA notation stroke('rgba(100%,0%,100%,0.5)'); */ @@ -58,25 +57,26 @@ new p5((sketch) => { this.maxMagnitude = mag; // magnitude ?? this.currentDirectionIndex = 0; + this.directionAngle = 45; + this.currentColor = randomColor(); // start by storing initial vertex - this.vertices = [ sketch.createVector(x1, y1) ]; + this.vertices = [ s.createVector(x1, y1) ]; // the last point in our buffer this.lastVertex = () => this.vertices[this.vertices.length - 1]; this.setColor = (c) => this.color = c; - this.getMagnitude = () => { - const mag = p5.Vector.sub(this.vertices[0], this.lastVertex()).mag(); - - const a = (this.vertices[0].x - this.vertices[this.vertices.length - 1].x); - const b = (this.vertices[0].y - this.vertices[this.vertices.length - 1].y); - const mag2 = Math.sqrt(a*a + b*b); - console.log(a, b, mag, mag2, this.vertices.length); - return mag; + this.getMagnitude = () => p5.Vector.sub(this.vertices[0], this.lastVertex()).mag(); + + this.setNewDirection = () => { + const currentDirectonAngle = this.directionAngle; + + this.direction = getNewDirection(this.currentDirectionIndex); } + // https://processing.org/examples/accelerationwithvectors.html // http://www.mightydrake.com/Articles/ricochet.htm @@ -95,40 +95,59 @@ new p5((sketch) => { if (hit(this.vertices[0])) { // debugger this.currentColor = randomColor(); - this.currentDirectionIndex = getNewDirection(this.currentDirectionIndex); + this.setNewDirection(); console.log("now the direction is", this.currentDirectionIndex); } }; this.draw = () => { - //sketch.push(); - //sketch.translate(this.lastVertex().x, this.lastVertex().y); - sketch.stroke(`rgba(${this.currentColor[0]},${this.currentColor[1]},${this.currentColor[2]},1.0)`); + s.stroke(`rgba(${this.currentColor[0]},${this.currentColor[1]},${this.currentColor[2]},1.0)`); for (let v = 0; v < this.vertices.length; v++) { - sketch.point(this.vertices[v].x, this.vertices[v].y); + s.point(this.vertices[v].x, this.vertices[v].y); } - sketch.stroke('yellow'); - sketch.point(this.vertices[0].x, this.vertices[0].y); - //sketch.pop(); + s.stroke('yellow'); + s.point(this.vertices[0].x, this.vertices[0].y); + //s.pop(); } } let ray; + let drawDebug = false; + + s.debug = () => { + // update + s.stroke('green'); + + const v0 = s.createVector(s.width/2, s.height/2); + const v1 = s.createVector(s.mouseX, s.mouseY); + const h = p5.Vector.sub(v1, v0).heading(); - sketch.setup = () => { - const c = sketch.createCanvas(canvas_w, canvas_h, p5.WEBGL); + s.line(v0.x, v0.y, v1.x, v1.y); + s.text(`heading: \n radians ${h} \n degrees ${s.degrees(h)}`, v1.x + 5, v1.y + 5); + }; + + + s.setup = () => { + const c = s.createCanvas(canvas_w, canvas_h, p5.WEBGL); c.parent('container'); - sketch.fill('white'); - sketch.strokeWeight(4); + s.fill('white'); + s.strokeWeight(4); ray = new Ray(); + }; - sketch.draw = () => { - sketch.clear(); + s.keyPressed = () => drawDebug = !drawDebug; + + s.draw = () => { + s.clear(); ray.update(); ray.draw(); + + if (drawDebug) { + s.debug(); + } }; }); \ No newline at end of file From 83c621205404622f3bcd7392e7c0da119d1003da Mon Sep 17 00:00:00 2001 From: ivy Date: Sat, 2 Mar 2019 16:29:43 -0500 Subject: [PATCH 11/15] working again but really dumb about to go into normals --- js/ricochet.p5.js | 70 +++++++++++++++++++++++++++++------------------ 1 file changed, 44 insertions(+), 26 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index d92f227..8ae6c39 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -22,17 +22,31 @@ new p5((s) => { * @returns {String, Boolean} what edge it hit or false if none */ - // need to more accuratel calculate what will hit, + // need to more accurate calculate what will hit, // could hit a corner + const topBottomEdge = (v) => (v.y >= canvas_h - 3 || v.y <= 3); + const leftRightEdge = (v) => (v.x >= canvas_w - 3 || v.x <= 3); + const hit = (v) => { - console.log("calling hit test with v is ", v); if (v.y <= 0) { + if (leftRightEdge(v)) { + return 'c'; + } return 't'; } else if (v.x >= canvas_w) { + if (topBottomEdge(v)) { + return 'c'; + } return 'r'; } else if (v.y >= canvas_h) { + if (leftRightEdge(v)) { + return 'c'; + } return 'b' } else if (v.x <= 0) { + if (topBottomEdge(v)) { + return 'c'; + } return 'l' } return false; @@ -42,10 +56,6 @@ new p5((s) => { // too much if we are out of bounds const isInBounds = (v) => !hit(v); - const getNewDirection = (direction) => { - let d = Math.floor(Math.random() * Math.floor(normals.length)); - return (d != direction) ? d : getNewDirection(d); - }; /** * @returns percentage RGBA notation stroke('rgba(100%,0%,100%,0.5)'); */ @@ -56,46 +66,53 @@ new p5((s) => { this.velocity = vel; this.maxMagnitude = mag; // magnitude ?? - this.currentDirectionIndex = 0; - this.directionAngle = 45; + this.directionVector = s.createVector(1, 1); this.currentColor = randomColor(); // start by storing initial vertex - this.vertices = [ s.createVector(x1, y1) ]; + this.verticesArray = [ s.createVector(x1, y1) ]; // the last point in our buffer - this.lastVertex = () => this.vertices[this.vertices.length - 1]; + this.lastVertex = () => this.verticesArray[this.verticesArray.length - 1]; this.setColor = (c) => this.color = c; - this.getMagnitude = () => p5.Vector.sub(this.vertices[0], this.lastVertex()).mag(); + this.getMagnitude = () => p5.Vector.sub(this.verticesArray[0], this.lastVertex()).mag(); - this.setNewDirection = () => { - const currentDirectonAngle = this.directionAngle; - - this.direction = getNewDirection(this.currentDirectionIndex); + this.setNewDirection = (side) => { + const vector = this.directionVector.copy(); + + if (side == 'c') { + vector.y *= -1; + vector.x *= -1; + } else if (side == 't' || side == 'b') { + vector.y *= -1; + } else { + vector.x *= -1; + } + this.directionVector = vector; } - // https://processing.org/examples/accelerationwithvectors.html // http://www.mightydrake.com/Articles/ricochet.htm - //https://gamedev.stackexchange.com/questions/23672/determine-resulting-angle-of-wall-collision + // https://gamedev.stackexchange.com/questions/23672/determine-resulting-angle-of-wall-collision this.update = () => { // if this thing is less than the magnitude we want, add a vertex if (this.getMagnitude() > this.maxMagnitude) { - this.vertices.pop(); + this.verticesArray.pop(); } - const newVertex = (this.vertices[0].copy()).add(normals[this.currentDirectionIndex]); - this.vertices.unshift(newVertex); + const newVertex = (this.verticesArray[0].copy()).add(this.directionVector); + this.verticesArray.unshift(newVertex); - // console.log(`start = ${this.vertices[0]}, end = ${this.lastVertex()}`); + // console.log(`start = ${this.verticesArray[0]}, end = ${this.lastVertex()}`); - if (hit(this.vertices[0])) { + let side; + if (side = hit(this.verticesArray[0])) { // debugger this.currentColor = randomColor(); - this.setNewDirection(); + this.setNewDirection(side); console.log("now the direction is", this.currentDirectionIndex); } }; @@ -103,12 +120,12 @@ new p5((s) => { this.draw = () => { s.stroke(`rgba(${this.currentColor[0]},${this.currentColor[1]},${this.currentColor[2]},1.0)`); - for (let v = 0; v < this.vertices.length; v++) { - s.point(this.vertices[v].x, this.vertices[v].y); + for (let v = 0; v < this.verticesArray.length; v++) { + s.point(this.verticesArray[v].x, this.verticesArray[v].y); } s.stroke('yellow'); - s.point(this.vertices[0].x, this.vertices[0].y); + s.point(this.verticesArray[0].x, this.verticesArray[0].y); //s.pop(); } } @@ -148,6 +165,7 @@ new p5((s) => { if (drawDebug) { s.debug(); + s.text('heading of ray: ', s.width - 80, s.height - 10); } }; }); \ No newline at end of file From ba9e1cb5ba159c0401d4a9a345e1431782e10690 Mon Sep 17 00:00:00 2001 From: ivy Date: Sat, 2 Mar 2019 17:10:28 -0500 Subject: [PATCH 12/15] version with velocity scalar multiply --- js/ricochet.p5.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index 8ae6c39..f20fd63 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -5,7 +5,6 @@ new p5((s) => { const canvas_w = 800, canvas_h = 600; - const vel = 10; // t, r, b, l @@ -22,8 +21,8 @@ new p5((s) => { * @returns {String, Boolean} what edge it hit or false if none */ - // need to more accurate calculate what will hit, - // could hit a corner + // need to more accurate calculate what will hit, + // could hit a corner const topBottomEdge = (v) => (v.y >= canvas_h - 3 || v.y <= 3); const leftRightEdge = (v) => (v.x >= canvas_w - 3 || v.x <= 3); @@ -61,7 +60,7 @@ new p5((s) => { */ const randomColor = (opacity = 1.0) => new Array(3).fill(0).map(() => Math.ceil(Math.random() * 100)); - const Ray = function(x1=100, y1=100, vel=.2, mag=100) { + const Ray = function(x1=100, y1=100, vel=10, mag=100) { this.velocity = vel; this.maxMagnitude = mag; // magnitude ?? @@ -103,7 +102,7 @@ new p5((s) => { if (this.getMagnitude() > this.maxMagnitude) { this.verticesArray.pop(); } - const newVertex = (this.verticesArray[0].copy()).add(this.directionVector); + const newVertex = (this.verticesArray[0].copy()).add(p5.Vector.mult(this.directionVector, this.velocity)); this.verticesArray.unshift(newVertex); // console.log(`start = ${this.verticesArray[0]}, end = ${this.lastVertex()}`); @@ -126,7 +125,6 @@ new p5((s) => { s.stroke('yellow'); s.point(this.verticesArray[0].x, this.verticesArray[0].y); - //s.pop(); } } From bea635f00b55e719f785b70f1e01d79ac857b5ab Mon Sep 17 00:00:00 2001 From: ivy Date: Sun, 3 Mar 2019 20:12:55 -0500 Subject: [PATCH 13/15] woeking with wall normals, still bug with corner length --- js/ricochet.p5.js | 43 +++++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index f20fd63..3a840fc 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -5,29 +5,30 @@ new p5((s) => { const canvas_w = 800, canvas_h = 600; - const vel = 10; + // t, r, b, l = sides top, right, bottom, left + const normals = { + t: s.createVector(0,1), + r: s.createVector(-1,0), + b: s.createVector(0,-1), + l: s.createVector(1,0) + }; - // t, r, b, l - const normals = [ - s.createVector(1,1), - s.createVector(-1,1), - s.createVector(1,-1), - s.createVector(1,-1) - ]; - /** - * @function hit - * @param {Vector} v - * @returns {String, Boolean} what edge it hit or false if none - */ // need to more accurate calculate what will hit, // could hit a corner const topBottomEdge = (v) => (v.y >= canvas_h - 3 || v.y <= 3); const leftRightEdge = (v) => (v.x >= canvas_w - 3 || v.x <= 3); + const MARGIN = 2; + + /** + * @function hit + * @param {Vector} v + * @returns {String, Boolean} what edge it hit or false if none + */ const hit = (v) => { - if (v.y <= 0) { + if (v.y <= MARGIN) { if (leftRightEdge(v)) { return 'c'; } @@ -85,12 +86,11 @@ new p5((s) => { if (side == 'c') { vector.y *= -1; vector.x *= -1; - } else if (side == 't' || side == 'b') { - vector.y *= -1; } else { - vector.x *= -1; + vector.add(normals[side]); } this.directionVector = vector; + console.log(`directionVector ${this.directionVector}`); } // https://processing.org/examples/accelerationwithvectors.html @@ -102,14 +102,18 @@ new p5((s) => { if (this.getMagnitude() > this.maxMagnitude) { this.verticesArray.pop(); } - const newVertex = (this.verticesArray[0].copy()).add(p5.Vector.mult(this.directionVector, this.velocity)); + + + const velocityDirection = p5.Vector.mult(this.directionVector, this.velocity); + console.log(`directionVector ${this.directionVector}, velocity ${this.velocity} = ${velocityDirection}`); + + const newVertex = (this.verticesArray[0].copy()).add(velocityDirection); this.verticesArray.unshift(newVertex); // console.log(`start = ${this.verticesArray[0]}, end = ${this.lastVertex()}`); let side; if (side = hit(this.verticesArray[0])) { - // debugger this.currentColor = randomColor(); this.setNewDirection(side); console.log("now the direction is", this.currentDirectionIndex); @@ -151,7 +155,6 @@ new p5((s) => { s.fill('white'); s.strokeWeight(4); ray = new Ray(); - }; s.keyPressed = () => drawDebug = !drawDebug; From f1d1dd0ace4845df53c41a4f817be18353d41fd2 Mon Sep 17 00:00:00 2001 From: ivy Date: Sun, 10 Mar 2019 22:28:15 -0500 Subject: [PATCH 14/15] lerp color gradient experiment --- js/lerp_color.p5.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 js/lerp_color.p5.js diff --git a/js/lerp_color.p5.js b/js/lerp_color.p5.js new file mode 100644 index 0000000..770909d --- /dev/null +++ b/js/lerp_color.p5.js @@ -0,0 +1,30 @@ +import p5 from 'p5'; + +new p5((s) => { + + let c1 = s.color('blue'); + let c2 = s.color('red'); + + s.windowResized = () => { + s.resizeCanvas(s.windowWidth, s.windowHeight); + } + + s.setup = () => { + s.createCanvas(s.windowWidth, s.windowHeight); + + s.background('black'); + }; + + s.update = () => { + + }; + + s.draw = () => { + debugger + for (let x = 0; x < s.width; x++) { + s.stroke(s.lerpColor(c1, c2, x/100)); + s.line(x, 0, x, s.height); + } + }; + +}); \ No newline at end of file From e4b07b6fb007cf1d8a9954a20b4ce1c8fd423317 Mon Sep 17 00:00:00 2001 From: ivy Date: Tue, 26 Mar 2019 16:20:55 -0500 Subject: [PATCH 15/15] some margin changes --- js/ricochet.p5.js | 57 +++++++------ js/ricochet_color.p5.js | 173 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 200 insertions(+), 30 deletions(-) create mode 100644 js/ricochet_color.p5.js diff --git a/js/ricochet.p5.js b/js/ricochet.p5.js index 3a840fc..728cb67 100644 --- a/js/ricochet.p5.js +++ b/js/ricochet.p5.js @@ -20,7 +20,7 @@ new p5((s) => { const topBottomEdge = (v) => (v.y >= canvas_h - 3 || v.y <= 3); const leftRightEdge = (v) => (v.x >= canvas_w - 3 || v.x <= 3); - const MARGIN = 2; + const MARGIN = 0; /** * @function hit @@ -28,28 +28,22 @@ new p5((s) => { * @returns {String, Boolean} what edge it hit or false if none */ const hit = (v) => { + let hitpoints = ""; + if (v.y <= MARGIN) { - if (leftRightEdge(v)) { - return 'c'; - } - return 't'; - } else if (v.x >= canvas_w) { - if (topBottomEdge(v)) { - return 'c'; - } - return 'r'; - } else if (v.y >= canvas_h) { - if (leftRightEdge(v)) { - return 'c'; - } - return 'b' - } else if (v.x <= 0) { - if (topBottomEdge(v)) { - return 'c'; - } - return 'l' + hitpoints = 't'; + } + if (v.x >= canvas_w - MARGIN) { + hitpoints += 'r'; + } + if (v.y >= canvas_h - MARGIN) { + hitpoints += 'b'; + } + if (v.x <= MARGIN) { + hitpoints += 'l'; } - return false; + + return hitpoints || false; }; // trying to prevent changing directions @@ -83,12 +77,13 @@ new p5((s) => { this.setNewDirection = (side) => { const vector = this.directionVector.copy(); - if (side == 'c') { - vector.y *= -1; - vector.x *= -1; - } else { - vector.add(normals[side]); - } + const sides = side.split(''); + + // for (let s in sides) { + // vector.add(normals[s]); + // } + + vector.add(normals[sides[0]]); this.directionVector = vector; console.log(`directionVector ${this.directionVector}`); } @@ -98,17 +93,19 @@ new p5((s) => { // https://gamedev.stackexchange.com/questions/23672/determine-resulting-angle-of-wall-collision this.update = () => { + // if this thing is less than the magnitude we want, add a vertex if (this.getMagnitude() > this.maxMagnitude) { this.verticesArray.pop(); } - const velocityDirection = p5.Vector.mult(this.directionVector, this.velocity); - console.log(`directionVector ${this.directionVector}, velocity ${this.velocity} = ${velocityDirection}`); + // console.log(`directionVector ${this.directionVector}, velocity ${this.velocity} = ${velocityDirection}`); const newVertex = (this.verticesArray[0].copy()).add(velocityDirection); this.verticesArray.unshift(newVertex); + + // console.log(`start = ${this.verticesArray[0]}, end = ${this.lastVertex()}`); @@ -116,7 +113,7 @@ new p5((s) => { if (side = hit(this.verticesArray[0])) { this.currentColor = randomColor(); this.setNewDirection(side); - console.log("now the direction is", this.currentDirectionIndex); + // console.log("now the direction is", this.currentDirectionIndex); } }; diff --git a/js/ricochet_color.p5.js b/js/ricochet_color.p5.js new file mode 100644 index 0000000..8779530 --- /dev/null +++ b/js/ricochet_color.p5.js @@ -0,0 +1,173 @@ +import p5 from 'p5'; + +new p5((s) => { + + const canvas_w = 800, + canvas_h = 600; + + // t, r, b, l = sides top, right, bottom, left + const normals = { + t: s.createVector(0,1), + r: s.createVector(-1,0), + b: s.createVector(0,-1), + l: s.createVector(1,0) + }; + + + + // need to more accurate calculate what will hit, + // could hit a corner + const topBottomEdge = (v) => (v.y >= canvas_h - 3 || v.y <= 3); + const leftRightEdge = (v) => (v.x >= canvas_w - 3 || v.x <= 3); + + const MARGIN = 0; + + /** + * @function hit + * @param {Vector} v + * @returns {String, Boolean} what edge it hit or false if none + */ + const hit = (v) => { + let hitpoints = ""; + + if (v.y <= MARGIN) { + hitpoints += 't'; + } + if (v.x >= canvas_w - MARGIN) { + hitpoints += 'r'; + } + if (v.y >= canvas_h - MARGIN) { + hitpoints += 'b'; + } + if (v.x <= MARGIN) { + hitpoints += 'l'; + } + + return hitpoints || false; + }; + + // trying to prevent changing directions + // too much if we are out of bounds + const isInBounds = (v) => !hit(v); + + /** + * @returns percentage RGBA notation stroke('rgba(100%,0%,100%,0.5)'); + */ + const randomColor = (opacity = 1.0) => new Array(3).fill(0).map(() => Math.ceil(Math.random() * 255)); + + const Ray = function(x1=100, y1=100, vel=10, mag=100) { + + this.velocity = vel; + this.maxMagnitude = mag; // magnitude ?? + + this.directionVector = s.createVector(1, 1); + + this.currentColor = randomColor(); + + // start by storing initial vertex + this.verticesArray = [ s.createVector(x1, y1) ]; + + // the last point in our buffer + this.lastVertex = () => this.verticesArray[this.verticesArray.length - 1]; + + this.setColor = (c) => this.color = c; + + this.getMagnitude = () => p5.Vector.sub(this.verticesArray[0], this.lastVertex()).mag(); + + this.setNewDirection = (side) => { + const vector = this.directionVector.copy(); + + const sides = side.split(''); + + // for (let s in sides) { + // vector.add(normals[s]); + // } + + vector.add(normals[sides[0]]); + this.directionVector = vector; + console.log(`directionVector ${this.directionVector}`); + } + + // https://processing.org/examples/accelerationwithvectors.html + // http://www.mightydrake.com/Articles/ricochet.htm + // https://gamedev.stackexchange.com/questions/23672/determine-resulting-angle-of-wall-collision + + this.update = () => { + + + if (this.getMagnitude() > this.maxMagnitude) { + this.verticesArray.pop(); + } + + // if this thing is less than the magnitude we want, add a vertex + const velocityDirection = p5.Vector.mult(this.directionVector, this.velocity); + // console.log(`directionVector ${this.directionVector}, velocity ${this.velocity} = ${velocityDirection}`); + + const newVertex = (this.verticesArray[0].copy()).add(velocityDirection); + this.verticesArray.unshift(newVertex); + + // console.log(`start = ${this.verticesArray[0]}, end = ${this.lastVertex()}`); + + let side; + if (side = hit(this.verticesArray[0])) { + this.currentColor = randomColor(); + this.setNewDirection(side); + // console.log("now the direction is", this.currentDirectionIndex); + } + console.log(this.verticesArray); + }; + + this.draw = () => { + s.stroke(this.currentColor[0], this.currentColor[1], this.currentColor[2], 255); + + s.beginShape(); + for (let v = 0; v < this.verticesArray.length; v++) { + // s.point(this.verticesArray[v].x, this.verticesArray[v].y); + s.vertex(this.verticesArray[v].x, this.verticesArray[v].y) + } + s.endShape(); + + // s.stroke('yellow'); + // s.point(this.verticesArray[0].x, this.verticesArray[0].y); + } + } + + + let ray; + let drawDebug = false; + + s.debug = () => { + // update + s.stroke('green'); + + const v0 = s.createVector(s.width/2, s.height/2); + const v1 = s.createVector(s.mouseX, s.mouseY); + const h = p5.Vector.sub(v1, v0).heading(); + + s.line(v0.x, v0.y, v1.x, v1.y); + s.text(`heading: \n radians ${h} \n degrees ${s.degrees(h)}`, v1.x + 5, v1.y + 5); + }; + + + s.setup = () => { + const c = s.createCanvas(canvas_w, canvas_h, p5.WEBGL); + c.parent('container'); + s.fill('white'); + s.strokeWeight(4); + ray = new Ray(); + // ray.update(); + }; + + s.keyPressed = () => drawDebug = !drawDebug; + + s.draw = () => { + s.clear(); + ray.update(); + ray.draw(); + + if (drawDebug) { + s.debug(); + s.text('heading of ray: ', s.width - 80, s.height - 10); + } + }; +}); \ No newline at end of file