Newer
Older
Leanna Mi N.
committed
function Game() {
// 0 = forward, 1 = backward, 2 = left, 3 = right.
let direction = 0;
Leanna Mi N.
committed
// Four numbers that define the transform, i hat and j hat
const i_x = 1;
const i_y = 0.5;
const j_x = -1;
const j_y = 0.5;
// Symmetric 2D array to store instances of TileClass
const tile_arr_size = 12;
let tileArr = new Array(tile_arr_size).fill(null).map(() => new Array(tile_arr_size).fill(null));
let playerSprite;
let playerSprite_curTgc; // the current tgc coordinates that the player is at
let playerSprite_curTileType; // The tile type that the player is currently sitting on
// Sprite size
const w = 64;
const h = 64;
// what the current cursor calculation is based off
let maxWinWidth = 1920;
let maxWinHeight = 1080;
// TODO: replace
let tools = ["Fix Sidewalk", "Add Curb Ramp"];
let currentToolIndex = 0; // keyPressed() has logic to make sure that index doens't go outisde of tools array bounds
/**** Variables for Pose Classifier */
let video;
let poseNet;
let pose;
let skeleton;
let brain;
let poseLabel = "";
let state = 'waiting';
let targetLabel;
Leanna Mi N.
committed
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/*
0 --> grass block (use for where houses go for now)
1 --> road tile
2 --> sidewalk tile
3 --> sidewalk rotated 180 degrees
4 --> broken sidewalk
5 --> broken sidewalk rotated 180 degrees
6 --> sidewalk corner topLeft (no curb ramp)
7 --> sidewalk corner botLeft (no curb ramp)
8 --> sidewalk corner botRight (no curb ramp)
9 --> sidewalk corner topRight (no curb ramp)
*/
// Hardcoding tile placement for the first level
// x and y here are just the grid coordinates
const startingTileIndex = {
x: 3,
y: 0
};
const endingTileIndex = {
x: 3,
y: 11
};
const levelOne = [
[0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
[0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
[0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
[3, 3, 5, 6, 1, 1, 1, 1, 9, 3, 5, 3],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[3, 5, 3, 7, 1, 1, 1, 1, 8, 3, 3, 3],
[0, 0, 0, 2, 1, 1, 1, 1, 4, 0, 0, 0],
[0, 0, 0, 2, 1, 1, 1, 1, 4, 0, 0, 0],
[0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
]; // Currently 10 by 10
this.setup = function() {
// createCanvas(maxWinWidth, maxWinHeight);
new Canvas(maxWinWidth, maxWinHeight);
imageMode(CENTER);
// Setup our pose classifier
/****** CODE FOR THE POSE CLASSIFER! UNCOMMENT TO HAVE THE MODEL RUNNING */
// video = createCapture(VIDEO);
// video.hide();
// poseNet = ml5.poseNet(video, modelLoaded);
// poseNet.on('pose', gotPoses);
// let options = {
// inputs: 34,
// outputs: 4,
// task: 'classification',
// debug: true
// }
// brain = ml5.neuralNetwork(options);
// LOAD PRETRAINED MODEL: Uncomment below to train your own model!
// const modelInfo = {
// model: 'model1/model.json',
// metadata: 'model1/model_meta.json',
// weights: 'model1/model.weights.bin',
// };
// brain.load(modelInfo, brainLoaded);
Leanna Mi N.
committed
// Now loop through our tile map and draw
// each tile accoridng to our levelOne matrix
// mapping
for (let i = 0; i < tile_arr_size; i++) {
for (let j = 0; j < tile_arr_size; j++) {
let tile_type = levelOne[i][j];
let tsc = toScreenCoords({
x: i,
y: j
});
switch (tile_type) {
case 0: // grass block (use for where houses go for now)
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "city", "none");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, grassTile, "decoration", "normal");
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
break;
case 1: // road tile
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "vertical");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, roadTile, "road", "normal");
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
break;
case 2: // sidewalk tile
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "horizontal");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalk, "sidewalk", "normal");
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
break;
case 3: // sidewalk rotated 180 degrees
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkRotated180, "sidewalk", "rotated180");
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
break;
case 4: // broken sidewalk
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkBroken, "broken_sidewalk", "normal");
tileArr[i][j].display(tileArr[i][j].sprite);
break;
case 5: // broken sidewalk rotated 180 degrees
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkBrokenRotated180, "broken_sidewalk", "rotated180");
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
break;
case 6: // sidewalk corner topLeft (no curb ramp)
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerTopLeft, "sidewalk_corner", "normal");
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
break;
case 7: // sidewalk corner botLeft (no curb ramp)
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerBotLeft, "sidewalk_corner", "rotated90"); // TODO: Replace with rotated versions
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
break;
case 8: // sidewalk corner botRight (no curb ramp)
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerBotRight, "sidewalk_corner", "rotated180"); // TODO: Replace with rotated versions
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
break;
case 9: // sidewalk corner topRight (no curb ramp)
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerTopRight, "sidewalk_corner", "rotated270"); // TODO: Replace with rotated versions
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
break;
default:
// Otherwise, default to road
// grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "city", "none");
tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, roadTile, "road", "normal");
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
}
// tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, roadTile);
// tileArr[i][j].display(tileArr[i][j].sprite);
}
}
}
// Variables to store the current position of the character
let characterX = startingTileIndex.x;
let characterY = startingTileIndex.y;
let lastKeyPressTime = 0;
let keyPressInterval = 200; // Adjust this value to change the movement speed
Leanna Mi N.
committed
this.draw = function() {
background('#588dbe');
translate(width / 2, height / 3);
// For now, use simple text to show which
// tool you have selected
// Top-left corner
// textAlign(LEFT, TOP);
textSize(16);
// fill(255);
// stroke(0);
// strokeWeight(4);
text(`Current Tool: ${tools[currentToolIndex]}`, -300, -10);
Leanna Mi N.
committed
let tgc = screenToGridCoords({
x: mouseX,
y: mouseY
});
let newCharacterX = characterX;
let newCharacterY = characterY;
// Move the character based on WASD keys
if (keyIsDown(65) && millis() - lastKeyPressTime > keyPressInterval) { // 'A' key
newCharacterX = constrain(characterX - 1, 0, tile_arr_size - 1);
direction = 2; // left
lastKeyPressTime = millis();
} else if (keyIsDown(68) && millis() - lastKeyPressTime > keyPressInterval) { // 'D' key
newCharacterX = constrain(characterX + 1, 0, tile_arr_size - 1);
direction = 3; // right
lastKeyPressTime = millis();
} else if (keyIsDown(87) && millis() - lastKeyPressTime > keyPressInterval) { // 'W' key
newCharacterY = constrain(characterY - 1, 0, tile_arr_size - 1);
direction = 1; // backward
lastKeyPressTime = millis();
} else if (keyIsDown(83) && millis() - lastKeyPressTime > keyPressInterval) { // 'S' key
newCharacterY = constrain(characterY + 1, 0, tile_arr_size - 1);
direction = 0; // forward
lastKeyPressTime = millis();
}
Leanna Mi N.
committed
// First loop: display the tiles
for (let i = 0; i < tile_arr_size; i++) {
for (let j = 0; j < tile_arr_size; j++) {
tileArr[i][j].display(tileArr[i][j].sprite);
// Hover highlighting
if (tgc.x == i && tgc.y == j && tileArr[i][j].sprite == roadTile) {
tileArr[i][j].display(roadHighlightedTile);
} else {
tileArr[i][j].display(tileArr[i][j].sprite);
Leanna Mi N.
committed
}
}
// Check to make sure that the new position of the character does not
// violate game rules (e.g. character cannot go onto broken sidewalk tiles)
if (movementIsValid(characterX, characterY, newCharacterX, newCharacterY)) {
characterX = newCharacterX;
characterY = newCharacterY;
}
// Second loop: display the character
let tsc = tileArr[characterX][characterY];
if (tsc.sprite !== null && tsc.sprite !== undefined) {
let tsc = tileArr[characterX][characterY];
switch (direction) {
case 0:
image(forward, tsc.x_screen, tsc.y_screen);
break;
case 1:
image(backward, tsc.x_screen, tsc.y_screen);
break;
case 2:
image(left, tsc.x_screen, tsc.y_screen);
break;
case 3:
image(right, tsc.x_screen, tsc.y_screen);
break;
}
}
Leanna Mi N.
committed
/**** For debugging the pose classifier *****/
// Uncomment for seeing each prediction drawn on the screen
// for easy debugging
// push();
// translate(video.width, 0);
// scale(-1, 1);
// // For debugging the pose classifier:
// if (pose) {
// for (let i = 0; i < skeleton.length; i++) {
// let a = skeleton[i][0];
// let b = skeleton[i][1];
// strokeWeight(2);
// stroke(0);
// line(a.position.x, a.position.y, b.position.x, b.position.y);
// }
// for (let i = 0; i < pose.keypoints.length; i++) {
// let x = pose.keypoints[i].position.x;
// let y = pose.keypoints[i].position.y;
// fill(0);
// stroke(255);
// ellipse(x, y, 16, 16);
// }
// }
// pop();
}
Leanna Mi N.
committed
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
function movementIsValid(prevX, prevY, nextX, nextY) {
/*
Checks to see if the character moving from (prevX, prevY) to (nextX, nextY)
is valid for the wheelchair character to move to
*/
// Check to make sure that the new coords are valid, if not, then don't
// allow the player to move to that tile
let tileType_playerIsOn = tileArr[prevX][prevY].type;
let tileType_nextTile = tileArr[nextX][nextY].type;
// check redundancy later here
if (tileType_nextTile == "road" && tileType_playerIsOn == "sidewalk_corner_curbRamp") {
return true;
}
if (tileType_nextTile == "sidewalk_corner_curbRamp" && tileType_playerIsOn == "road") {
return true;
}
if (tileType_nextTile == "road" && tileType_playerIsOn == "road") {
return true;
}
if (tileType_nextTile == "sidewalk_corner_curbRamp") {
return true;
}
// I think we only want to walk on sidwalk no?
if (tileType_playerIsOn != "road" &&
(tileType_nextTile == "sidewalk" || tileType_nextTile == "sidewalk_corner")) {
return true;
}
// If we got here, then the movement is not allowed
return false;
}
Leanna Mi N.
committed
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
this.mouseClicked = function() {
let {
x: tgc_x,
y: tgc_y
} = screenToGridCoords({
x: mouseX,
y: mouseY
});
if (!isValidGridCoords(tgc_x, tgc_y)) {
return;
}
/* Type can either be
- decoration (grass, house, etc)
- road
- sidewalk
- broken_sidewalk
- sidewalk_corner
- sidewalk_corner_curbRamp
*/
/* Orientation can either be
- normal (rotated 0 degrees)
- rotated90
- rotated180
- rotated270
*/
// TODO: Make a fixed_sidewalk sprite
tile_type = tileArr[tgc_x][tgc_y].type;
tile_orientation = tileArr[tgc_x][tgc_y].orientation;
// Depending on what type of tile you clicked on,
// update the sprite accordingly
if (tile_type === "broken_sidewalk" && tools[currentToolIndex] === "Fix Sidewalk") {
// If broken sidewalk is clicked, then
// repair to make fixed sidewalk
updateTileType(tgc_x, tgc_y, "sidewalk");
// Check to see this tile's orientation to make sure we
// place down the right sprite
if (tile_orientation === "normal") {
updateTileSprite(tgc_x, tgc_y, sidewalk);
} else if (tile_orientation === "rotated180") {
updateTileSprite(tgc_x, tgc_y, sidewalkRotated180);
}
} else if (tile_type === "sidewalk_corner" && tools[currentToolIndex] === "Add Curb Ramp") {
// If sidewalk corner is clicked, then
// replace with curb ramp
updateTileType(tgc_x, tgc_y, "sidewalk_corner_curbRamp");
// Check to see this tile's orientation to make sure we
// place down the right sprite
if (tile_orientation === "normal") {
updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampTopLeft);
} else if (tile_orientation === "rotated90") {
updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampBotLeft);
} else if (tile_orientation === "rotated180") {
Leanna Mi N.
committed
updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampBotRight);
} else {
updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampTopRight);
}
}
}
this.keyPressed = function() {
// FUTURE FEATURE: rotation
// if (key === 'r') {
// tileArr = rotateMatrixClockwise(tileArr);
// }
if (key === 't') {
// Cycle to the next tool in our tools array (and wrap back around if
// we have reached the end of our tools array)
currentToolIndex = (currentToolIndex + 1) % tools.length;
// TODO: Change the cursor to an image that matches the current tool
// type can either be predefined image or path to image
// cursor(type, x, y)
}
}
// this.keyReleased = function() {
// // why is the player not showing up?
// // it seems to be a reference issue
// let playerSprite_newTcgCords_x = playerSprite_curTgc.x;
// let playerSprite_newTcgCords_y = playerSprite_curTgc.y;
// if (key === 'w') {
// playerSprite_newTcgCords_y -= 1;
// } else if (key === 's') {
// playerSprite_newTcgCords_y += 1;
// } else if (key === 'a') {
// playerSprite_newTcgCords_x -= 1;
// } else if (key === 'd') {
// playerSprite_newTcgCords_x += 1;
// }
// // Check to make sure that the new coords are valid, if not, then don't
// // allow the player to move to that tile
// let tileType_playerIsOn = tileArr[playerSprite_curTgc.x][playerSprite_curTgc.y].type;
// let tileType_nextTile = tileArr[playerSprite_newTcgCords_x][playerSprite_newTcgCords_y].type;
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
// // console.log(`\nCurrent tile: ${tileType_playerIsOn}`);
// // console.log(`Next tile: ${tileType_nextTile}`);
// // console.log(`tileType_nextTile !== "broken_sidewalk": ${tileType_nextTile !== "broken_sidewalk"}`);
// // console.log(`tileType_nextTile !== "grass": ${tileType_nextTile !== "grass"}`);
// // console.log(`(tileType_nextTile !== "road" && tileType_playerIsOn !== "sidewalk_corner") : ${(tileType_nextTile !== "road" && tileType_playerIsOn !== "sidewalk_corner") }`);
// // console.log(`(tileType_nextTile !== "sidewalk_corner" && tileType_playerIsOn !== "road"): ${(tileType_nextTile !== "sidewalk_corner" && tileType_playerIsOn !== "road")}`);
// // console.log(`(tileType_nextTile !== "sidewalk" && tileType_playerIsOn !== "road"): ${(tileType_nextTile !== "sidewalk" && tileType_playerIsOn !== "road")}`);
// // check redundancy later here
// if (tileType_nextTile == "road" && tileType_playerIsOn == "sidewalk_corner_curbRamp") {
// playerSprite_curTgc.x = playerSprite_newTcgCords_x;
// playerSprite_curTgc.y = playerSprite_newTcgCords_y;
// return;
// }
// if (tileType_nextTile == "sidewalk_corner_curbRamp" && tileType_playerIsOn == "road") {
// playerSprite_curTgc.x = playerSprite_newTcgCords_x;
// playerSprite_curTgc.y = playerSprite_newTcgCords_y;
// return;
// }
// if (tileType_nextTile == "road" && tileType_playerIsOn == "road") {
// playerSprite_curTgc.x = playerSprite_newTcgCords_x;
// playerSprite_curTgc.y = playerSprite_newTcgCords_y;
// return;
// }
// if (tileType_nextTile == "sidewalk_corner_curbRamp") {
// playerSprite_curTgc.x = playerSprite_newTcgCords_x;
// playerSprite_curTgc.y = playerSprite_newTcgCords_y;
// return;
// }
// // I think we only want to walk on sidwalk no?
// if (tileType_playerIsOn != "road" &&
// (tileType_nextTile == "sidewalk" || tileType_nextTile == "sidewalk_corner")) {
// console.log("The movement has been allowed...");
// playerSprite_curTgc.x = playerSprite_newTcgCords_x;
// playerSprite_curTgc.y = playerSprite_newTcgCords_y;
// }
// }
Leanna Mi N.
committed
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
function rotateMatrixClockwise(matrix) {
let rotatedMatrix = new Array(tile_arr_size).fill(null).map(() => new Array(tile_arr_size).fill(null));
for (let i = 0; i < tile_arr_size; i++) {
for (let j = 0; j < tile_arr_size; j++) {
let newX = j;
let newY = tile_arr_size - 1 - i;
let tile = matrix[i][j];
let screenCoord = toScreenCoords({
x: newX,
y: newY
});
rotatedMatrix[newX][newY] = new TileClass(newX, newY, screenCoord.x, screenCoord.y, tile.sprite);
}
}
return rotatedMatrix;
}
// Helper function to check if grid coordinates are within bounds
function isValidGridCoords(tgc_x, tgc_y) {
return tgc_x >= 0 && tgc_x < tile_arr_size && tgc_y >= 0 && tgc_y < tile_arr_size;
}
// Helper function to update tile sprite
function updateTileSprite(tgc_x, tgc_y, sprite) {
tileArr[tgc_x][tgc_y].sprite = sprite;
}
// Helper function to update tile type
function updateTileType(tgc_x, tgc_y, type) {
tileArr[tgc_x][tgc_y].type = type;
}
function invertMatrix(a, b, c, d) {
/*
Invert a 2d matrix, with a, b, c, and d being
[ a b ]
[ c d ]
*/
const det = (1 / (a * d - b * c));
return {
a: det * d,
b: det * -b,
c: det * -c,
d: det * a,
}
}
function toGridCoords(screen) {
const a = i_x * 0.5 * w;
const b = j_x * 0.5 * w;
const c = i_y * 0.5 * h;
const d = j_y * 0.5 * h;
const inv = invertMatrix(a, b, c, d);
return {
// offset mouse cursor to align with block
x: screen.x * inv.a + screen.y * inv.b - 25.75,
y: screen.x * inv.c + screen.y * inv.d + 4.15,
}
}
function toScreenCoords(tile) {
return {
x: tile.x * i_x * 0.5 * w + tile.y * j_x * 0.5 * w,
y: tile.x * i_y * 0.5 * h + tile.y * j_y * 0.5 * h,
}
}
// Helper function to convert screen coordinates to grid coordinates
function screenToGridCoords(screen) {
let tgc = toGridCoords(screen);
return {
x: Math.floor(tgc.x),
y: Math.floor(tgc.y)
};
}
/****** POSE CLASSIFIER HELPER FUNCTIONS ******/
function brainLoaded() {
console.log('pose classification ready!');
classifyPose();
}
function classifyPose() {
// console.log("We are in classifyPose");
if (pose) {
// console.log("We got a pose to classify!");
// console.log(pose);
let inputs = [];
for (let i = 0; i < pose.keypoints.length; i++) {
let x = pose.keypoints[i].position.x;
let y = pose.keypoints[i].position.y;
inputs.push(x);
inputs.push(y);
}
brain.classify(inputs, gotResult);
} else {
setTimeout(classifyPose, 100);
}
}
function gotResult(error, results) {
if (results[0].confidence > 0.75) {
poseLabel = results[0].label.toUpperCase();
}
// console.log("Do we ever call gotResult?");
console.log(results);
classifyPose();
}
function gotPoses(poses) {
// console.log("Did we get any poses??");
// console.log(poses);
if (poses.length > 0) {
pose = poses[0].pose;
skeleton = poses[0].skeleton;
if (state == 'collecting') {
let inputs = [];
for (let i = 0; i < pose.keypoints.length; i++) {
let x = pose.keypoints[i].position.x;
let y = pose.keypoints[i].position.y;
inputs.push(x);
inputs.push(y);
}
let target = [targetLabel];
brain.addData(inputs, target);
}
}
}
function modelLoaded() {
console.log('poseNet ready');
}