We Keep Coding

When spawning many iterations of a class object, how do I take an object out of the array using a if statement inside of the Class?

I'm a beginner using p5js and I'm trying to work with classes. I'm making a game where you have to find and click a 'wanted man', from a crowd.
So basically, a randomizer picks between 7 different types of 'civilians', and it's supposed to remove one of the types from the 'civilians' that have been spawned. After removing the 'wanted man', I want to add one wanted man so that there is only one 'wanted man'.
So the code spawns a bunch of random 'civilians', then it will delete all 'wanted man' types in the array, and add only one of them. I think there is a better way to do this though.
My basic desire is to have a crowd of 'civilians' that run around, - one of which is a 'wanted man' - and you would have to find and click that 'wanted man' (kind of like a hunting/assassination game).
This is the code for the sketch.js file:
var civilians = [];
var page = 0;
var man1img;
var man2img;
var man3img;
var man4img;
var man5img;
var man6img;
var aliemanimg;
var w;
var h;
var spawnCount = 14;
var wantedMan;
var randCiv;
function preload() {
man1img = loadImage("man1.png");
man2img = loadImage("man2.png");
man3img = loadImage("man3.png");
man4img = loadImage("man4.png");
man5img = loadImage("man5.png");
man6img = loadImage("man6.png");
aliemanimg = loadImage("alieman.png");
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function setup() {
createCanvas(windowWidth, windowHeight);
imageMode(CENTER);
// wantedMan = round(random(0, 6));
wantedMan = 0;
for (var i = 0; i < spawnCount; i++) {
randCiv = round(random(0, 6));
w = random(windowWidth);
h = random(windowHeight);
civilians.push(new Civilian(w, h, wantedMan, randCiv));
console.log(wantedMan);
if (civilians[i].isWantedMan()) {
//OVER HERE \/
civilians.splice(i, 1);
}
}
civilians.push(new Civilian(w, h, wantedMan, wantedMan));
}
// page setup
// page 1 : main screen (play, settings, and those stuff)
// page 2 : show chosen civilian
// page 3 : playing
// page 4 : lose
// page 5 : options
function draw() {
background(220, 80, 80);
for (var i = civilians.length - 1; i >= 0; i--) {
civilians[i].update();
civilians[i].show(mouseX, mouseY);
if (civilians[i].clickedOn(mouseX, mouseY)) {
// detect if is right person
console.log("clicked on boi");
if (civilians[i].isWantedMan()) {
console.log("HES WANTED");
} else {
console.log("HES NOT WANTED");
}
}
}
text(round(frameRate()), 20, 20);
//show wanted man
var tempImg = man1img;
if (wantedMan == 1) {
tempImg = man2img;
} else if (wantedMan == 2) {
tempImg = man3img;
} else if (wantedMan == 3) {
tempImg = man4img;
}
if (wantedMan == 4) {
tempImg = man5img;
} else if (wantedMan == 5) {
tempImg = man6img;
} else if (wantedMan == 6) {
tempImg = aliemanimg;
}
image(tempImg, 50, 70, 70, 90);
}
This is the code for the class:
class Civilian {
constructor(x, y, wantedMan, type) {
this.x = x;
this.y = y;
this.w = 47;
this.h = 60;
this.t = {
x: x,
y: y,
};
this.size = 47;
this.moveSpeed = 0.01;
this.moveDist = 20;
this.wantedMan = wantedMan;
this.civilian = type
this.civilianImg = man1img
this.wantedMan = wantedMan
}
update() {
//move target to random position
this.t.x = random(this.t.x - this.moveDist, this.t.x + this.moveDist);
this.t.y = random(this.t.y - this.moveDist, this.t.y + this.moveDist);
//edge detect
if (this.t.x < 0) {
this.t.x += 5;
}
if (this.t.x > width) {
this.t.x -= 5;
}
if (this.t.y < 0) {
this.t.y += 5;
}
if (this.t.y > height) {
this.t.y -= 5;
}
//images position follows target but with easing
this.x += (this.t.x - this.x) * this.moveSpeed;
this.y += (this.t.y - this.y) * this.moveSpeed;
}
show(ex, ey) {
var d = dist(ex, ey, this.x, this.y);
if (d > this.size / 2) {
tint(255, 255, 255);
} else {
tint(0, 255, 0);
}
if(this.civilian == 1) {
this.civilianImg = man2img
} else if(this.civilian == 2) {
this.civilianImg = man3img
} else if(this.civilian ==3) {
this.civilianImg = man4img
} if(this.civilian == 4) {
this.civilianImg = man5img
} else if(this.civilian == 5) {
this.civilianImg = man6img
} else if(this.civilian == 6) {
this.civilianImg = aliemanimg
}
image(this.civilianImg, this.x, this.y, 47, 60);
}
clickedOn(ex, ey) {
var d = dist(ex, ey, this.x, this.y);
return d < this.size / 2 && mouseIsPressed;
}
isWantedMan() {
return this.civilian == this.wantedMan;
}
}
However, whenever I add a .splice(i,1) under the 'for' loop in setup function - to remove the 'wanted man', it shows this error:
"TypeError: Cannot read properties of undefined (reading
'isWantedMan') at /sketch.js:41:22".
isWantedMan() is a function in the Civilian Class, that returns true if the current 'civilian' is wanted. The .splice is supposed to remove a object from the array, when it is a 'wanted man'.
I don't know why this happens. When I replace the .splice code with a console.log() code, then there is no error.
Also there were probably a lot of things that I could have done better in the code.

what did I do wrong with my arrow function? It says function not defined

I'm cloning the tetris game. And I defined an arrow function. To define the shape movement.when I run it. it told me that shape is not defined. what did I do wrong?
I'm trying to make drop movement inside the shape function. would that be doable?
let Piece = new shapes(pieces[0][0], pieces[0][1]);
//import shapes from shapes.js
shapes = (shape, color) => {
piece = shape;
color = color;
orientation = 0; //initial the shape from position 0;
activePiece = piece[orientation];
//position of the shape
x = 3;
y = 1;
draw = () => {
for (row = 0; row < activePiece.length; row++) {
for (col = 0; col < activePiece.length; col++) {
if (activePiece[row][col] == 1) {
drawSquare(x + col, y + row, color)
}
}
}
}
moveDown = () => {
y++;
draw();
}
// let drop = () => {
// moveDown();
// requestAnimationFrame(drop);
// }
}
Piece.draw();
Piece.moveDown();

p5.js mousePressed line animation

In p5.js I'm trying to create an animation where the bottom point of the lines smoothly (5px per frame) move to the bottom left corner of the canvas when the mouse is pressed. I can get them to the point they need to get to with lines.align but they instantly move there instead of animating.
let lines = []
function setup() {
createCanvas(600, 400);
for(let i = 0; i < 150; i++) {
lines[i] = new Line(random(600), 0, random(600), 400, random(149,212), random(89, 146), 1);
}
}
function draw() {
background(32, 44, 57);
for(let i = 0; i < lines.length; i++){
lines[i].show();
}
}
function mousePressed() {
for(let i = 0; i < lines.length; i++){
lines[i].align();
}
}
class Line {
constructor(xStart, yStart, xFinish, yFinish, g, b, w) {
this.xStart = xStart;
this.yStart = yStart;
this.xFinish = xFinish;
this.yFinish = yFinish;
this.g = g;
this.b = b;
this.w = w;
}
show() {
stroke(242, this.g, this.b);
strokeWeight(this.w);
line(this.xStart, this.yStart, this.xFinish, this.yFinish);
}
align() {
while (this.xFinish > 0) {
this.xFinish = this.xFinish - 5;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

You're using a blocking while loop which is why visually you see a jump from the lines' start to end positions.
One option is to use a condition and increment the value in draw():
let lines = []
function setup() {
createCanvas(600, 400);
for(let i = 0; i < 150; i++) {
lines[i] = new Line(random(600), 0, random(600), 400, random(149,212), random(89, 146), 1);
}
}
function draw() {
background(32, 44, 57);
for(let i = 0; i < lines.length; i++){
lines[i].align();
lines[i].show();
}
}
class Line {
constructor(xStart, yStart, xFinish, yFinish, g, b, w) {
this.xStart = xStart;
this.yStart = yStart;
this.xFinish = xFinish;
this.yFinish = yFinish;
this.g = g;
this.b = b;
this.w = w;
}
show() {
stroke(242, this.g, this.b);
strokeWeight(this.w);
line(this.xStart, this.yStart, this.xFinish, this.yFinish);
}
align() {
if (this.xFinish > 0) {
this.xFinish = this.xFinish - 5;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
You might want to also check out lerp() to interpolation between start and end positions.
Additionally, if you need more control over timing/easing/etc you can use something like TweenLite to do the interpolation for you.
(It is a good exercise though to get a hang of incrementing values/interpolating/tweening manually first through)

Phaser array not defined in update method

So I'm using the Phaser framework to create a space invaders game but I have a problem with and array of game objects. The array enemies is normal and I can do console.log(enemies.length) fine inside the create method but it says that enemies is not defined when I run it.
var game = new Phaser.Game(800, 600);
var bgTile;
var speed = 200;
var dropCnt = 100;
var box = function(options) {
var bmd = game.add.bitmapData(options.length, options.width);
bmd.ctx.beginPath();
bmd.ctx.rect(0, 0, options.length, options.width);
bmd.ctx.fillStyle = options.color;
bmd.ctx.fill();
return bmd;
};
var mainState = {
preload: function(){
//var music;
//game.load.audio('sound1',['track01.mp3','track01.ogg']); // need to make this spce music
game.load.image('bgTile', 'bgtile.jpg');
},
create: function(){
lives = 3;
//music = game.add.audio('sound1');
//music.loopFull(1);
this.cursor = game.input.keyboard.createCursorKeys();
game.physics.startSystem(Phaser.Physics.ARCADE);
game.world.enableBody = true;
BGTile = starfield = game.add.tileSprite(0, 0, 800, 600, 'bgTile');
game.physics.startSystem(Phaser.Physics.ARCADE);
this.player = game.add.sprite(384, 550, box({
length: 32,
width: 32,
color: '#FFFFFF'
}));
this.enemy = game.add.group();
this.enemy.enableBody = true;
var enemies= [];
for(var i = 0; i < 8; i++){
for(var j = 0; j < 8; j++){
enemies.push(this.enemy.create(i*75+100,j*30+20, box({
length: 32,
width: 16,
color: '#FF0000'
})));
}
}
var bullets= [];
this.bullet = game.add.group();
this.bullet.enableBody = true;
this.player.body.immovable = true;
this.enemy.body.immovable = true;
},
update: function(){
console.log(enemies.length);
starfield.tilePosition.y += 2;
this.player.body.velocity.y = 0;
this.player.body.velocity.x = 0;
if (this.cursor.left.isDown) {
this.player.body.velocity.x -= speed;
} else if (this.cursor.right.isDown) {
this.player.body.velocity.x += speed;
}
dropCnt--;
if(dropCnt === 0){
dropCnt = 100;
for(var i = 0; i < enemies.length;i++){
this.enemies.body.x -= 8;
console.log("test");
}
}
}
};
game.state.add('main', mainState);
game.state.start('main');

Here DEMO
enemies array is defined inside mainState.create() so therefore it's not accessible to another function inside object mainState
In order to access you have to define enemies array as object member
var mainState = {
enemies:[],
....
...
}
So now to access enemies you have to do
mainState.enemies.push(....)
mainState.enemies.pop()

HTML5 spin circle

I am trying to spin a circle on a canvas, i think i got most of the code but i don't know whats wrong with the code, the circle is not spinning. Do i need to create another function in order to spin the circle?
any suggestions
http://jsfiddle.net/qY85C/1/
var angle = 0;
function convertToRadians(degree) {
return degree*(Math.PI/180);
}
function incrementAngle() {
angle++;
if(angle > 360) {
angle = 0;
}
}
var myColor = ["#ECD078","#D95B43"];
var myData = [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50];
function getTotal(){
var myTotal = 0;
for (var j = 0; j < myData.length; j++) {
myTotal += myData[j];
}
return myTotal;
}
function drawColoredCircle() {
var lastend = 0;
var myTotal = getTotal();//160
for (var i = 0; i < myData.length; i++) {
ctxBg.fillStyle = myColor[i%2];
ctxBg.translate(canvasBg.width/2, canvasBg.width/2);
ctxBg.rotate(convertToRadians(angle));
ctxBg.translate(-canvasBg.width/2, -canvasBg.width/2);
ctxBg.beginPath();
ctxBg.moveTo(canvasBg.width/2,canvasBg.width/2);
ctxBg.arc(canvasBg.width/2,canvasBg.height/2,500,lastend,lastend+(Math.PI*2*(myData[i]/myTotal)),false);
ctxBg.lineTo(canvasBg.width/2,canvasBg.height/2);
ctxBg.fill();
lastend += Math.PI*2*(myData[i]/myTotal);
}
}
function loop(){
drawColoredCircle();
requestAnimFrame(loop);
}

You need to change the angle inside your loop
function loop(){
angle+=Math.PI/18000;
drawColoredCircle();
requestAnimFrame(loop);
}
Also, do you want to clear the canvas before drawing the circle?
function loop(){
ctxBg.clearRect(0,0,canvasBg.width,canvasBg.height);
angle+=Math.PI/18000;
drawColoredCircle();
requestAnimFrame(loop);
}