summaryrefslogtreecommitdiff
path: root/static/src/_posts/2021-05-11-ripple-v3.md
diff options
context:
space:
mode:
authorBrian Picciano <mediocregopher@gmail.com>2022-05-21 14:07:14 -0600
committerBrian Picciano <mediocregopher@gmail.com>2022-05-21 14:07:14 -0600
commitf3340ae5f4ac6c60823bf4d14e1fcdbeaaec353c (patch)
tree41d7eda870083cfa0776d650478ceeb2baee2837 /static/src/_posts/2021-05-11-ripple-v3.md
parent55eb40d4bb489b2b26ab5d0ce2c70c7cb2f766b7 (diff)
Remove old code related to static, it's not needed anymore
Diffstat (limited to 'static/src/_posts/2021-05-11-ripple-v3.md')
-rw-r--r--static/src/_posts/2021-05-11-ripple-v3.md442
1 files changed, 0 insertions, 442 deletions
diff --git a/static/src/_posts/2021-05-11-ripple-v3.md b/static/src/_posts/2021-05-11-ripple-v3.md
deleted file mode 100644
index 396dab0..0000000
--- a/static/src/_posts/2021-05-11-ripple-v3.md
+++ /dev/null
@@ -1,442 +0,0 @@
----
-title: >-
- Ripple V3
-description: >-
- We're getting there!
-tags: tech
-series: ripple
----
-
-<p>
- <b>Movement:</b> Arrow keys or WASD<br/>
- <b>Jump:</b> Space<br/>
- <b>Goal:</b> Jump as many times as possible without touching a ripple!<br/>
- <br/>
- <b>Press Jump To Begin!</b>
-</p>
-
-_Who can make the muddy water clear?<br/>
-Let it be still, and it will gradually become clear._
-
-<canvas id="canvas"
- style="border:1px dashed #AAA"
- tabindex=0>
-Your browser doesn't support canvas. At this point in the world that's actually
-pretty cool, well done!
-</canvas>
-<button onclick="reset()">(R)eset</button>
-<span style="font-size: 2rem; margin-left: 1rem;">Score:
- <span style="font-weight: bold" id="score">0</span>
-</span>
-
-<script type="text/javascript">
-
-const palette = [
- "#264653",
- "#2A9D8F",
- "#E9C46A",
- "#F4A261",
- "#E76F51",
-];
-
-const width = 800;
-const height = 600;
-
-function hypotenuse(w, h) {
- return Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
-}
-
-let canvas = document.getElementById("canvas");
-canvas.width = width;
-canvas.height = height;
-
-const whitelistedKeys = {
- "ArrowUp": {},
- "KeyW": {map: "ArrowUp"},
- "ArrowLeft": {},
- "KeyA": {map: "ArrowLeft"},
- "ArrowRight": {},
- "KeyD": {map: "ArrowRight"},
- "ArrowDown": {},
- "KeyS": {map: "ArrowDown"},
- "Space": {},
- "KeyR": {},
-};
-
-let keyboard = {};
-
-canvas.addEventListener('keydown', (event) => {
- let keyInfo = whitelistedKeys[event.code];
- if (!keyInfo) return;
-
- let code = event.code;
- if (keyInfo.map) code = keyInfo.map;
-
- event.preventDefault();
- keyboard[code] = true;
-});
-
-canvas.addEventListener('keyup', (event) => {
- let keyInfo = whitelistedKeys[event.code];
- if (!keyInfo) return;
-
- let code = event.code;
- if (keyInfo.map) code = keyInfo.map;
-
- event.preventDefault();
- delete keyboard[code];
-});
-
-
-const C = 700; // scales the overall speed of the radius
-const T = 500; // on which tick the radius change becomes linear
-
-/*
- f(x) = sqrt(C*x) when x < T
- (C/(2*sqrt(CT)))(x-T) + sqrt(CT) when x >= T
-
- radius(x) = f(x) + playerRadius;
-*/
-
-const F1 = (x) => Math.sqrt(C*x);
-const F2C1 = C / (2 * Math.sqrt(C*T));
-const F2C2 = Math.sqrt(C * T);
-const F2 = (x) => (F2C1 * (x - T)) + F2C2;
-const F = (x) => {
- if (x < T) return F1(x);
- return F2(x);
-};
-
-class Ripple {
-
- constructor(id, currTick, x, y, bounces, color) {
- this.id = id;
- this.tick = currTick;
- this.x = x;
- this.y = y;
- this.thickness = Math.pow(bounces+1, 1.25);
- this.color = color;
- this.winner = false;
-
- this.maxRadius = hypotenuse(x, y);
- this.maxRadius = Math.max(this.maxRadius, hypotenuse(width-x, y));
- this.maxRadius = Math.max(this.maxRadius, hypotenuse(x, height-y));
- this.maxRadius = Math.max(this.maxRadius, hypotenuse(width-x, height-y));
- }
-
- radius(currTick) {
- const x = currTick - this.tick;
- return F(x) + playerRadius;
- }
-
- draw(ctx, currTick) {
- ctx.beginPath();
- ctx.arc(this.x, this.y, this.radius(currTick), 0, Math.PI * 2, false);
- ctx.closePath();
- ctx.lineWidth = this.thickness;
- ctx.strokeStyle = this.winner ? "#FF0000" : this.color;
- ctx.stroke();
- }
-
- canGC(currTick) {
- return this.radius(currTick) > this.maxRadius;
- }
-}
-
-const playerRadius = 10;
-const playerMoveAccel = 0.5;
-const playerMoveDecel = 0.7;
-const playerMaxMoveSpeed = 4;
-const playerJumpSpeed = 0.08;
-const playerMaxHeight = 1;
-const playerGravity = 0.01;
-
-class Player{
-
- constructor(x, y, color) {
- this.x = x;
- this.y = y;
- this.z = 0;
- this.xVelocity = 0;
- this.yVelocity = 0;
- this.zVelocity = 0;
- this.color = color;
- this.falling = false;
- this.lastJumpHeight = 0;
- this.loser = false;
- }
-
- act() {
- if (keyboard["ArrowUp"]) {
- this.yVelocity = Math.max(-playerMaxMoveSpeed, this.yVelocity - playerMoveAccel);
- } else if (keyboard["ArrowDown"]) {
- this.yVelocity = Math.min(playerMaxMoveSpeed, this.yVelocity + playerMoveAccel);
- } else if (this.yVelocity > 0) {
- this.yVelocity = Math.max(0, this.yVelocity - playerMoveDecel);
- } else if (this.yVelocity < 0) {
- this.yVelocity = Math.min(0, this.yVelocity + playerMoveDecel);
- }
-
- this.y += this.yVelocity;
- if (this.y < 0) this.y += height;
- else if (this.y > height) this.y -= height;
-
- if (keyboard["ArrowLeft"]) {
- this.xVelocity = Math.max(-playerMaxMoveSpeed, this.xVelocity - playerMoveAccel);
- } else if (keyboard["ArrowRight"]) {
- this.xVelocity = Math.min(playerMaxMoveSpeed, this.xVelocity + playerMoveAccel);
- } else if (this.xVelocity > 0) {
- this.xVelocity = Math.max(0, this.xVelocity - playerMoveDecel);
- } else if (this.xVelocity < 0) {
- this.xVelocity = Math.min(0, this.xVelocity + playerMoveDecel);
- }
-
- this.x += this.xVelocity;
- if (this.x < 0) this.x += width;
- else if (this.x > width) this.x -= width;
-
- let jumpHeld = keyboard["Space"];
-
- if (jumpHeld && !this.falling && this.z < playerMaxHeight) {
- this.lastJumpHeight = 0;
- this.zVelocity = playerJumpSpeed;
- } else {
- this.zVelocity = Math.max(-playerJumpSpeed, this.zVelocity - playerGravity);
- this.falling = this.z > 0;
- }
-
- let prevZ = this.z;
- this.z = Math.max(0, this.z + this.zVelocity);
- this.lastJumpHeight = Math.max(this.z, this.lastJumpHeight);
- }
-
- drawAt(ctx, atX, atY) {
- const y = atY - (this.z * 40);
- const radius = playerRadius * (this.z+1)
-
- // draw main
- ctx.beginPath();
- ctx.arc(atX, y, radius, 0, Math.PI * 2, false);
- ctx.closePath();
- ctx.lineWidth = 0;
- ctx.fillStyle = this.color;
- ctx.fill();
- if (this.loser) {
- ctx.strokeStyle = '#FF0000';
- ctx.lineWidth = 2;
- ctx.stroke();
- }
-
- // draw shadow, if in the air
- if (this.z > 0) {
- let radius = Math.max(0, playerRadius * (1.2 - this.z));
- ctx.beginPath();
- ctx.arc(atX, atY, radius, 0, Math.PI * 2, false);
- ctx.closePath();
- ctx.lineWidth = 0;
- ctx.fillStyle = this.color+"33";
- ctx.fill();
- }
- }
-
- draw(ctx) {
- [-1, 0, 1].forEach((wScalar) => {
- const w = width * wScalar;
- [-1, 0, 1].forEach((hScalar) => {
- const h = height * hScalar;
- this.drawAt(ctx, this.x+w, this.y+h);
- })
- })
- }
-}
-
-class Game {
-
- constructor(canvas, scoreEl) {
- this.currTick = 0;
- this.player = new Player(width/2, height/2, palette[0]);
- this.state = 'play';
- this.score = 0;
- this.scoreEl = scoreEl;
- this.canvas = canvas;
- this.ctx = canvas.getContext("2d");
- this.ripples = [];
- this.nextRippleID = 0;
- }
-
- shouldReset() {
- return keyboard['KeyR'];
- }
-
- newRippleID() {
- let id = this.nextRippleID;
- this.nextRippleID++;
- return id;
- }
-
- // newRipple initializes and stores a new ripple at the given coordinates, as
- // well as all sub-ripples which make up the initial ripple's reflections.
- newRipple(x, y, bounces, color) {
- color = color ? color : palette[Math.floor(Math.random() * palette.length)];
-
- let ripplePos = [];
- let nextRipples = [];
-
- let addRipple = (x, y) => {
- for (let i in ripplePos) {
- if (ripplePos[i][0] == x && ripplePos[i][1] == y) return;
- }
-
- let ripple = new Ripple(this.newRippleID(), this.currTick, x, y, bounces, color);
- nextRipples.push(ripple);
- ripplePos.push([x, y]);
- this.ripples.push(ripple);
- };
-
- // add initial ripple, after this we deal with the sub-ripples.
- addRipple(x, y);
-
- while (bounces > 0) {
- bounces--;
- let prevRipples = nextRipples;
- nextRipples = [];
-
- for (let i in prevRipples) {
- let prevX = prevRipples[i].x;
- let prevY = prevRipples[i].y;
-
- [-1, 0, 1].forEach((wScalar) => {
- const w = this.canvas.width * wScalar;
- [-1, 0, 1].forEach((hScalar) => {
- const h = this.canvas.height * hScalar;
- addRipple(prevX + w, prevY + h);
- })
- })
- }
- }
- }
-
- // playerRipplesState returns a mapping of rippleID -> boolean, where each
- // boolean indicates the ripple's relation to the player at the moment. true
- // indicates the player is outside the ripple, false indicates the player is
- // within the ripple.
- playerRipplesState() {
- let state = {};
- for (let i in this.ripples) {
- let ripple = this.ripples[i];
- let rippleRadius = ripple.radius(this.currTick);
- let hs = Math.pow(ripple.x-this.player.x, 2) + Math.pow(ripple.y-this.player.y, 2);
- state[ripple.id] = hs > Math.pow(rippleRadius + playerRadius, 2);
- }
- return state;
- }
-
- playerHasJumpedOverRipple(prev, curr) {
- for (const rippleID in prev) {
- if (!curr.hasOwnProperty(rippleID)) continue;
- if (curr[rippleID] != prev[rippleID]) return true;
- }
- return false;
- }
-
- update() {
- if (this.state != 'play') return;
-
- let playerPrevZ = this.player.z;
- this.player.act();
-
- if (playerPrevZ == 0 && this.player.z > 0) {
- // player has jumped
- this.prevPlayerRipplesState = this.playerRipplesState();
-
- } else if (playerPrevZ > 0 && this.player.z == 0) {
-
- // player has landed, don't produce a ripple unless there are no
- // existing ripples or the player jumped over an existing one.
- if (
- this.ripples.length == 0 ||
- this.playerHasJumpedOverRipple(
- this.prevPlayerRipplesState,
- this.playerRipplesState()
- )
- ) {
- //let bounces = Math.floor((this.player.lastJumpHeight*1.8)+1);
- const bounces = 1;
-
- console.log("spawning ripple with bounces:", bounces);
- this.newRipple(this.player.x, this.player.y, bounces);
- this.score += bounces;
- }
- }
-
- if (this.player.z == 0) {
- for (let i in this.ripples) {
- let ripple = this.ripples[i];
- let rippleRadius = ripple.radius(this.currTick);
- if (rippleRadius < playerRadius * 1.5) continue;
- let hs = Math.pow(ripple.x-this.player.x, 2) + Math.pow(ripple.y-this.player.y, 2);
- if (hs > Math.pow(rippleRadius + playerRadius, 2)) {
- continue;
- } else if (hs <= Math.pow(rippleRadius - playerRadius, 2)) {
- continue;
- } else {
- console.log("game over", ripple);
- ripple.winner = true;
- this.player.loser = true;
- this.state = 'gameOver';
- // deliberately don't break here, in case multiple ripples hit
- // the player on the same frame
- }
- }
- }
-
- this.ripples = this.ripples.filter(ripple => !ripple.canGC(this.currTick));
-
- this.currTick++;
- }
-
- draw() {
- this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
- this.ripples.forEach(ripple => ripple.draw(this.ctx, this.currTick));
- this.player.draw(this.ctx)
- this.scoreEl.innerHTML = this.score;
- }
-}
-
-
-const requestAnimationFrame =
- window.requestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.msRequestAnimationFrame;
-
-let game = new Game(canvas, document.getElementById("score"));
-
-function reset() {
- game = new Game(canvas, document.getElementById("score"));
-}
-
-function nextFrame() {
- if (game.shouldReset()) reset();
-
- game.update()
- game.draw()
- requestAnimationFrame(nextFrame);
-}
-requestAnimationFrame(nextFrame);
-
-canvas.focus();
-
-</script>
-
-## Changelog
-
-The previous version was two easy to break, even with the requirement of jumping
-over a ripple to generate a new one and increase your score. This led to the
-following major changes:
-
-* The game now incorporates asteroid/pacman mechanics. Rather than bouncing off
- walls, the player and ripples will instead come out the opposite wall they
- travel through.
-
-* Jump height no longer affects score or the "strength" of a ripple.