For this project, I wanted to make my landscape like you are scrolling through the cafeteria in the Among Us game with different crewmates (dead or alive) moving past you.
amongus
var diams = [];
var lastOdd = false;
var crewMate = makeCharacter(160, 250);
var buddies = [];
function setup() {
createCanvas(400, 600);
background(165,167,154);
//set up the grid for the cafeteria floor tiles
for (var row=0; row < 7; row++){
d_row = []
if (row % 2 == 0) {
for (var col=0; col < 4; col++){
if (col % 2 == 0) {
d_row.push(smallDiamond(col*105, row*105+35))
}
else {
d_row.push(bigDiamond(col*105+35, row*105+35))
}
}
diams.push(d_row)
}
else {
for (var col=0; col < 5; col++){
if (col % 2 == 0){
d_row.push(bigDiamond(col*105+35, row*105+35))
}
else{
d_row.push(smallDiamond(col*105, row*105+35))
}
}
diams.push(d_row)
}
}
//set up the array for the crew members that appear
for (var i=0; i < 3; i++) {
buddies[i] = (makeCrew());
}
frameRate(8);
}
function draw() {
background(165,167,154);
displayDiamond();
updateFloor();
elimRow();
updateRow();
crewMate.draw();
crewMate.update();
drawbuddies();
removebuddies();
addMate();
updatebuddies();
}
//update the among us character function drawn so the guy looks like he is walking
function updateCharacter(){
if (this.pos == 5){
this.pos = 1;
}
else {
this.pos += 1;
}
}
//display character with x, y positions and color associated to them
function drawCharacter() {
if (this.pos == 1) {
push();
translate(this.charx, this.chary);
AmongUs1(color(this.col));
pop();
}
else if (this.pos == 2) {
push();
translate(this.charx, this.chary);
AmongUs2(color(this.col));
pop();
}
else if (this.pos == 3) {
push();
translate(this.charx, this.chary);
AmongUs3(color(this.col));
pop();
}
else if (this.pos == 4) {
push();
translate(this.charx, this.chary);
AmongUs4(color(this.col));
pop();
}
else {
push();
translate(this.charx, this.chary);
AmongUs5(color(this.col));
pop();
}
}
//make the guy an object
function makeCharacter(x, y) {
var c = getColor();
var guy = {charx: x, chary: y, pos: 1, update: updateCharacter, draw: drawCharacter, col: c}
return guy;
}
//display crew with x, y positions and color associated to them
function drawCrew() {
if (this.fig == 0) {
if (this.pos == 1) {
push();
translate(this.charx, this.chary)
AmongUs1(color(this.col));
pop();
}
else if (this.pos == 2) {
push();
translate(this.charx, this.chary)
AmongUs2(color(this.col));
pop();
}
else if (this.pos == 3) {
push();
translate(this.charx, this.chary)
AmongUs3(color(this.col));
pop();
}
else if (this.pos == 4) {
push();
translate(this.charx, this.chary)
AmongUs4(color(this.col));
pop();
}
else {
push();
translate(this.charx, this.chary)
AmongUs5(color(this.col));
pop();
}
}
else {
push();
translate(this.charx, this.chary)
Dead1(color(this.col));
pop();
}
}
//updates crewmate positions with different speeds (to go down canvas if walking and up if dead)
function updateCrew() {
if (this.fig == 0) {
this.chary += this.speed;
if (this.pos == 5) {
this.pos = 1;
}
else {
this.pos += 1
}
}
else {
this.chary -= this.speed;
}
}
//choose a random x position for newly generated crewmates
function getX() {
var x = random(20, 330)
if (x >= 160) {
x += 70;
}
else {
x -= 20;
}
return x;
}
//choose starting position at top of canvas for walking crewmates and bottom for dead crewmates so it looks like they are all moving with the screen
function start(f) {
if (f == 0) {
return 0
}
else {
return 600
}
}
//return a random speed from the array, to be assigned to individual crewmate
function getVelocity(status) {
if (status == 0){
return Math.floor(random(1,6));
}
else {
return 5;
}
}
//return a random color from the array, to be assigned to individual crewmate
function getColor() {
var cols = ['red', 'orange', 'yellow', 'limegreen', 'green', 'blue', 'cyan', 'hotpink', 'brown', 'gray', 'white'];
var index = Math.floor(Math.random() * cols.length)
return cols[index];
}
//assign object properties to the crew (crewmates onscreen)
function makeCrew() {
var x = getX();
var f = Math.floor(random(0,2));
var y = start(f);
var v = getVelocity(f);
var c = getColor();
var crew = {charx: x, chary: y, speed: v, update: updateCrew, pos: 1, fig: f, draw: drawCrew, col: c}
return crew
}
//draw new crewmates
function drawbuddies() {
for (var i=0; i < buddies.length; i++){
buddies[i].draw();
}
}
function updatebuddies() {
for (var i=0; i < buddies.length; i++){
buddies[i].update();
}
}
//remove crewmates as they pass offscreen
function removebuddies() {
keep = []
for (var i=0; i < buddies.length; i++){
if (buddies[i].chary +600 > 0) {
keep.push(buddies[i])
}
}
buddies = keep;
}
//add new crewmates with a probability of 2%
function addMate() {
var threshold = 0.02
if (random(0,1) < threshold) {
buddies.push(makeCrew())
}
}
//draw all the stages of walking for one crewmate
function AmongUs1(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//body
beginShape();
curveVertex(20,9);
curveVertex(15,29);
curveVertex(15,64);
curveVertex(21,77);
curveVertex(32,75);
curveVertex(33,63);
curveVertex(39,63);
curveVertex(42,75);
curveVertex(52,72); //front of foot
curveVertex(57,60);
curveVertex(56,42);
curveVertex(59,24);
curveVertex(50,10);
curveVertex(35,3);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}
function AmongUs2(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//back leg
beginShape();
curveVertex(15,57);
curveVertex(5,68);
curveVertex(19,78);
curveVertex(34,63);
endShape(CLOSE);
//body
beginShape();
curveVertex(22,6);
curveVertex(15,30);
curveVertex(15,56);
curveVertex(24,65);
curveVertex(34,65);
curveVertex(42,66);
curveVertex(55,79);
curveVertex(68,70);
curveVertex(52,59); //front of foot
curveVertex(55,47);
curveVertex(55,34);
curveVertex(58,21);
curveVertex(47,7);
curveVertex(33,2);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}
function AmongUs3(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//back leg
beginShape();
curveVertex(46,56);
curveVertex(48,73);
curveVertex(19,72);
curveVertex(19,62);
endShape(CLOSE);
//body
beginShape();
curveVertex(19,10);
curveVertex(15,35);
curveVertex(17,61);
curveVertex(25,68);
curveVertex(28,75);
curveVertex(24,83);
curveVertex(36,82);
curveVertex(41,71);
curveVertex(39,60); //front of foot
curveVertex(49,58);
curveVertex(57,50);
curveVertex(56,35);
curveVertex(58,25);
curveVertex(54,14);
curveVertex(45,8);
curveVertex(32,4);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}
function AmongUs4(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//back leg
beginShape();
curveVertex(40,60);
curveVertex(56,79);
curveVertex(66,65);
curveVertex(54,52);
endShape(CLOSE);
//body
beginShape();
curveVertex(25,4);
curveVertex(16,24);
curveVertex(15,54);
curveVertex(19,61);
curveVertex(8,61);
curveVertex(5,74);
curveVertex(19,76);
curveVertex(28,69);
curveVertex(32,63); //front of foot
curveVertex(45,63);
curveVertex(56,56);
curveVertex(58,38);
curveVertex(58,26);
curveVertex(54,12);
curveVertex(43,3);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}
function AmongUs5(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//back leg
beginShape();
curveVertex(32,61);
curveVertex(34,76);
curveVertex(49,76);
curveVertex(50,56);
endShape(CLOSE);
//body
beginShape();
curveVertex(24,3);
curveVertex(17,24);
curveVertex(16,51);
curveVertex(15,59);
curveVertex(23,59);
curveVertex(10,64);
curveVertex(12,72);
curveVertex(32,70);
curveVertex(37,62); //front of foot
curveVertex(49,62);
curveVertex(56,54);
curveVertex(58,34);
curveVertex(58,23);
curveVertex(54,13);
curveVertex(47,5);
curveVertex(35,1);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}
//draw a dead crewmate
function Dead1(c) {
stroke(0);
strokeWeight(5);
fill(255);
//bone sticking out
beginShape();
curveVertex(33,39);
curveVertex(32,29);
curveVertex(27,22);
curveVertex(32,18);
curveVertex(35,23);
curveVertex(37,17);
curveVertex(41,21);
curveVertex(38,32);
curveVertex(38,42);
endShape(CLOSE);
fill(c);
//arm
beginShape();
curveVertex(2,39);
curveVertex(12,34);
curveVertex(20,38);
curveVertex(18,60);
curveVertex(6,59);
endShape(CLOSE);
//half body
beginShape();
curveVertex(15,37);
curveVertex(28,40);
curveVertex(34,37);
curveVertex(44,40);
curveVertex(58,38);
curveVertex(57,66);
curveVertex(45,74);
curveVertex(41,62);
curveVertex(35,62);
curveVertex(32,74);
curveVertex(17,73);
curveVertex(14,49);
endShape(CLOSE);
}
//draw the cafeteria floor
//make small diamond tile object
function smallDiamond(x, y) {
var diamond = {diamondx: x, diamondy: y, diamondw: 70, diamondh: 35, speed: -5.0, draw: drawDiamond, update: updateDiamond}
return diamond;
}
//draw small diamond
function drawDiamond() {
noStroke();
fill(133,135,124);
beginShape();
vertex(this.diamondx,this.diamondy);
vertex(this.diamondx+this.diamondw/2,this.diamondy-this.diamondh);
vertex(this.diamondw+this.diamondx, this.diamondy);
vertex(this.diamondx+this.diamondw/2,this.diamondy+this.diamondh);
endShape(CLOSE);
}
//update position of the tile with speed
function updateDiamond() {
this.diamondy += this.speed;
}
//make big diamond tile object
function bigDiamond(cx, cy) {
var bigdiam = {leftD: smallDiamond(cx-70, cy), topD: smallDiamond(cx-35, cy-35), rightD: smallDiamond(cx, cy), bottomD: smallDiamond(cx-35, cy+35), draw: drawBigDiamond, update: updateBigDiamond}
return bigdiam;
}
//make big diamond tile from smaller diamond tiles
function drawBigDiamond() {
this.leftD.draw()
this.topD.draw()
this.rightD.draw()
this.bottomD.draw()
}
//update position of big diamond tiles
function updateBigDiamond() {
this.leftD.update();
this.topD.update();
this.rightD.update();
this.bottomD.update();
}
//draw the diamonds
function displayDiamond() {
for (var i=0; i < diams.length; i++){
for (var j=0; j < diams[i].length; j++){
diams[i][j].draw();
}
}
}
//update the positons of the diamonds as the screen scrolls
function updateFloor() {
for (var i=0; i < diams.length; i++) {
for (var j=0; j < diams[i].length; j++) {
diams[i][j].update();
}
}
}
//get rid of rows that have slipped offscreen
function elimRow(){
keepRow = false;
for (var i=0; i < diams[0].length; i++) {
if (lastOdd == false){
if (i % 2 == 0) {
if (diams[0][i].diamondy + diams[0][i].diamondh > 0) {
keepRow = true
}
}
else {
if (diams[0][i].bottomD.diamondy + diams[0][i].bottomD.diamondh > 0){
keepRow = true
}
}
}
else {
if (i % 2 == 0) {
if (diams[0][i].bottomD.diamondy + diams[0][i].bottomD.diamondh > 0){
keepRow = true
}
}
else {
if (diams[0][i].diamondy + diams[0][i].diamondh > 0){
keepRow = true
}
}
}
}
if (keepRow == false){
diams.shift();
}
}
//update the new rows added such that they match the original cafeteria tile pattern
function updateRow() {
if (diams.length < 7){
n_row = []
if (lastOdd == true){
for (var col=0; col < 4; col++){
if (col % 2 == 0) {
n_row.push(smallDiamond(col*105, 665))
}
else {
n_row.push(bigDiamond(col*105+35, 665))
}
}
diams.push(n_row);
lastOdd = false;
}
else {
for (var col=0; col < 5; col++){
if (col % 2 == 0){
n_row.push(bigDiamond(col*105+35, 665))
}
else {
n_row.push(smallDiamond(col*105, 665))
}
}
diams.push(n_row);
lastOdd = true;
}
}
}