#New to Processing
1517 messages ยท Page 2 of 2 (latest)
Since I already showed you the other half, I didn't include it
we gotta make sure it dont move off to the screen
I honestly have no idea how to do that
Do we have to do another method/function
for that ?
oh the 4 connors think
i remember u said that like last time
For that, we can do this: ```pde
class Player {
int id; // player number (1, 2, etc)
int x, y; // position
Player(int number) {
id = number;
resetPosition();
}
void resetPosition() {
if (id == 1) {
x = 10;
y = 10;
}
else {
x = width - robberImage.width - 10;
y = height - robberImage.height - 10;
}
}
void move() {
if (id == 1) {
if (keys[2]) // A
x = x - 5;
else if (keys[3]) // D
x = x + 5;
if (x > width - policeImage.width)
x = width - policeImage.width;
}
else {
if (keys[6]) // LEFT
x = x - 5;
else if (keys[7]) // RIGHT
x = x + 5;
if (x > width - robberImage.width)
x = width - robberImage.width;
}
if (x < 0)
x = 0;
}
}
This is the entire class?
yes
hol up lemme fix my set up rq
PImage
oops
Oh god idk what i have done lol
something aint workin
I think you named your images differently than me
Can you show me the line it highlighted?
it doesnt show any line
okay, can you show me your full sketch file?
its fine
By the way, I usually create a separate page for classes. you can do it here
oh
for some reasn
its still not wroking
not sure what the reason is
ur is working fine?
Oh, I know what's wrong
So because width is a property of the images, we can't use it until they're fully set up, so we have to create the players inside setup() ```pde
Player playerOne;
Player playerTwo;
void setup() {
size(800,600);
bkg = loadImage("city.jpg");
policeImage = loadImage("police.png");
robberImage = loadImage("robber.png");
playerOne = new Player(1);
playerTwo = new Player(2);
}
oops i changed the image names to fit mine
This is what my main sketch file looks like ```pde
PImage bgImage;
PImage arrowImage;
PImage policeImage;
PImage robberImage;
PImage rockImage;
Player playerOne;
Player playerTwo;
// W, S, A, D, UP, DOWN, LEFT, RIGHT
boolean[] keys = new boolean[8];
void setup() {
size(800, 600);
bgImage = loadImage("city.jpg");
arrowImage = loadImage("arrow.png");
policeImage = loadImage("police.png");
robberImage = loadImage("robber.png");
rockImage = loadImage("rock.png");
rockImage.resize(50, 45);
playerOne = new Player(1);
playerTwo = new Player(2);
}
void draw() {
background(bgImage);
image(policeImage, playerOne.x, playerOne.y);
image(robberImage, playerTwo.x, playerTwo.y);
playerOne.move();
playerTwo.move();
}
/** Updates the keys array with the current key */
void keyPressed() {
int index = getIndex();
if (index != -1)
keys[index] = true;
}
/** Updates the keys array with the current key */
void keyReleased() {
int index = getIndex();
if (index != -1)
keys[index] = false;
}
/** Get the index of the current pressed/released key
- Since keys that are not letters are stored as ints
- inside keyCode, iterate twice to find the key. */
int getIndex() {
char[] chars = {'w', 's', 'a', 'd'};
// Compare the first 4 possible keys
for (int i = 0; i < 4; i++)
if (key == chars[i])
return i;
int[] codes = {UP, DOWN, LEFT, RIGHT};
// Compare the last 4 possible key(codes)
for (int i = 0; i < 4; i++)
if (keyCode == codes[i])
return 4 + i;
return -1;
}
and I already sent my player class
yep
sorry I gtg eat dinner now
so lemme just adjust the images
alright
we at least did some more progress tho Cat! : )
yeah
i'ev learned a few or two
more understanding about classes
but still havent gotten to the tricky part yet
the weapons lol ๐
Haha yeah
well anwayys
u should go eat dinner now]
I need go sleep rn so tmr could we finish up the game? @analog garnet How does that sound
I remove for the weapons u done another class for Rock
And an arraylist or sumthing
anyways i gtg
@analog garnet Hey wsp Cat gm btw but today i'm basically on the entire day lol 
Wait are you busy the whole day or free?
im free the entire day
wbu
?
I have school and work today
I'm gonna be busy until 5pm my time, which is 6pm for you
Ah alr
thats fine!
well then i'll see u than?
cause I really wanna finish the game today or at least get to there
@analog garnet
are u free rn?
Yeah, I have time
Sure
lemme get my ressources rq
Add in the straight โrockโ weapons. Make sure they only move in ONE direction.
Now were on this steps
so I assumed we did what u did last time where ushowed me a simple example of a weapon
^ this?
Yeah, though I'm pretty sure the rocks are actually going to be moving up/down instead of left/right
How would I do that?
Well, do you understand the code in that example?
Not the most probably a quarter of it since comments I would understand more of it
Rather than doing 'Class Rock { and class arrow {
why not class weapon {
as like a catagory
Well basically, vel = new PVector(3, 0); means that the velocity of the weapon is 3 pixels per frame in the X direction and 0 pixels in the Y direction
ohh
You could, but the way that arrows and rocks move are different, so you would have to either keep track of the weapon type, like the player number in the Player class
ur right nvm
serpertely would be much easier
so we could use this code but instead of rect we use our image, and then use key array instead of mouse
Yeah
well the image part thats pretty easy but the key array part is the tricky one
from my understanding we use another method for the key array again?
We should be able to add it to the player class pretty easily
It's very similar to the movement detection
The player fires the weapon, right?
right..
Yeah, we create the weapon class, then use it inside the player class
how do you use another class on another class
The same as using it anywhere else. Rock rock = new Rock(x, y);
Gotcha
class Weapon {
PVector pos, vel;
Rock(PVector start) {
pos = start.copy();
vel = new PVector(3, 0);
}
void display() {
fill(200, 150, 125);
rect(pos.x, pos.y, 50, 50);
}
void update() {
pos.add(vel);
}
}```
something like that?
I thought you said creating separate classes for each weapon was easier
wdym I thought this what u mean
Also, that code wouldn't run. You can't make the constructor ( Rock() {} ) be different from the class name (Weapon)
With separate classes, class Rock {} and class Arrow {} we can more easily create weapons of each type
ok
You named this class Weapon, so it's hard to know which weapon were talking about
well let's start wtih class Rock { then
Okay
class Rock {
PVector pos, vel;
Rock(PVector start) {
pos = start.copy();
vel = new PVector(3, 0);
}
void display() {
image(rockImage,0,0);
}
void update() {
pos.add(vel);
}
}```
IT lookin good now Cat?
Well, that code would make each rock moving to the right, and it would only draw rocks at the top left corner of the screen
oh.
Since you're not familiar with vectors, we can use integers for the position and velocity like the player
It's basically the same code as the players, at least for setting up variables. The only difference is that now id is something like type and now we have a velocity
I mean we could still call it id
But that typically refers to an individual
class Rock {
int type;
int pos;
int vel;
Rock(type, pos, vel) {
pos = start.copy();
vel = new PVector(3, 0);
}
void display() {
image(rockImage,0,0);
}
void update() {
pos.add(vel);
}
}```
this where im at
what am i missing here
Remember, each position has 2 components: x and y. Also, don't forget to include the data types on that constructor
datat types?
Data type is the category of variable, like integer, float, String, etc
class Rock {
int type;
int x;
int y;
int vel;
Rock(int type, vel) {
pos = start.copy();
vel = new PVector(3, 0);
}
void display() {
image(rockImage,0,0);
}
void update() {
pos.add(vel);
}
}```
am i there?
like this?
Well, pos isn't a variable anymore
Oh wait! I'm dumb lol I forgot rocks don't have a type
That must have been so confusing lol
For some reason, I had started making the Rock class as if it was a Weapon class. So I made the type variable to determine if it was a rock or an arrow. But I just remembered that we had decided against that strategy because having separate classes is easier. Unless you want to do it with only 1 class
It's not actually too hard to do it with a single Weapon class
well I wanna know how u done it with like comments that ik what is going on or something (we could do single weapon class if its more efficient)
Alright. I wouldn't worry about efficiency right now btw, we're just trying to make it work
mb
Here's something ```pde
/** Basic weapon class for Rocks and Arrows */
class Weapon {
int type; // Rock (1) or Arrow (2)
// Use float numbers because arrows curve slightly
float x, y; // Position
float vx, vy; // Velocity
// Used to create a new Weapon()
Weapon(int wtype, int startX, int startY, float velX, float velY) {
type = wtype;
x = startX;
y = startY;
vx = velX;
vy = velY;
}
// draw the weapon to the screen
void display() {
if (type == 1)
image(rockImage, x, y);
else
image(arrowImage, x, y);
}
// Change position of weapon
void update() {
// Add velocity (speed) to position
x = x + vx;
y = y + vy;
// Arrows curve
if (type == 2) {
// If an arrow is moving up, go more up
// Otherwise, go more down
if (vy > 0)
vy = vy + 0.1;
else
vy = vy - 0.1;
}
}
}
definitely the comments make a big impact
so everytime we reupdate the position of
wait this for arrow and rocks?
So from my understanding this is the set up stage. we still need a method for the key array?
Yeah, we still need to add weapons to the game screen
we can do that in the player class
in the player class?
Let's rename our move() method to action()
We're going to add weapon firing functionality to it
: O
so void move() becomes void action () instead
this is all inside the 'player' class
yep!
I have some notes about weapon firing
You can think of a weapon as having x and y coordinates that are updated as long as the weapon is ON the playing area. If it is NOT on the playing area, it has NOT been fired and should NOT be displayed. (If this kinda helps ๐คทโโ๏ธ )
But first, we need to add a few more variables to each player: ```pde
class Player {
int id; // player number (1, 2, etc)
int x, y; // position
boolean facingLeft;
ArrayList<Weapon> weapons;
Player(int number) {
id = number;
facingLeft = false;
weapons = new ArrayList<>();
resetPosition();
}
void resetPosition() {
if (id == 1) {
x = 10;
y = 10;
facingLeft = false;
}
else {
x = width - robberImage.width - 10;
y = height - robberImage.height - 10;
facingLeft = true;
}
}
Yeah, in my games I usually delete those things rather than stop using them tho
Right
I see
and then now we can do the void action () !
yeah
alright ๐
The comments most definitely do alot I totally forgot their so useful ๐คฆโโ๏ธ
I made the new action method, but I have to send it in 2 parts
Is there comments on it so I could understand? 
// Perform an action related to user input
// For example, moving around or firing weapons
void action() {
/* ----- PLAYER 1 ----- */
if (id == 1) {
// P1 move left (A)
if (keys[2]) {
x = x - 5;
facingLeft = true;
}
// P1 move right (D)
else if (keys[3]) {
x = x + 5;
facingLeft = false;
}
// Don't go out of bounds
if (x > width - policeImage.width)
x = width - policeImage.width;
// P1 fire Rock (W)
if (keys[0]) {
int sx = x + policeImage.width/2 - rockImage.width/2;
int sy = y + policeImage.height;
// Add a Rock at the bottom of the player
Weapon weapon = new Weapon(1, sx, sy, 0, 3);
weapons.add(weapon);
}
// P1 fire Arrow
else if (keys[1]) {
int sx = x + policeImage.width;
if (facingLeft)
sx = x - arrowImage.width;
int sy = y + policeImage.height/2;
float vx = 3;
if (facingLeft)
vx = -3;
// Fire an arrow at the left/right of P1
Weapon weapon = new Weapon(2, sx, sy, vx, 0.1);
weapons.add(weapon);
}
}
/* ----- PLAYER 2 ----- */
else {
// P2 move left (LEFT)
if (keys[6]) {
x = x - 5;
facingLeft = true;
}
// P2 move right (RIGHT)
else if (keys[7]) {
x = x + 5;
facingLeft = false;
}
// Don't go out of bounds
if (x > width - robberImage.width)
x = width - robberImage.width;
// P2 fire Rock (UP)
if (keys[4]) {
int sx = x + robberImage.width/2 - rockImage.width/2;
int sy = y - rockImage.height;
// Add a Rock at the bottom of the player
Weapon weapon = new Weapon(1, sx, sy, 0, -3);
weapons.add(weapon);
}
// P2 fire Arrow
else if (keys[5]) {
int sx = x + robberImage.width;
if (facingLeft)
sx = x - arrowImage.width;
int sy = y + robberImage.height/2;
float vx = 3;
if (facingLeft)
vx = -3;
// Fire an arrow at the left/right of P2
Weapon weapon = new Weapon(2, sx, sy, vx, -0.1);
weapons.add(weapon);
}
}
/* ----- BOTH PLAYERS ----- */
if (x < 0)
x = 0;
// Display and update all weapons
// Remove weapons that are out of bounds
for (int i = weapons.size() - 1; i >= 0; i--) {
Weapon weapon = weapons.get(i);
weapon.display();
weapon.update();
if (weapon.x > width || weapon.y > height || weapon.x < -100 || weapon.y < -100)
weapons.remove(i);
}
}
yeah
I've read it now i know whats going on in this code
One thing you'll notice tho
This code does not stop the user from firing weapons 100 times per second
wait is this like an entire rework with the two player key movement
OH GOD
๐คฃ
THE LAG XD ๐
We already had 2 player movement
but i thought this replaces move() or is move still up there?
I combined player movement with player firing a weapon because they're both related to key presses
Looking back, this makes the code very hard to read ๐
oh
the rock thing is funny lol
it is
i can definitely see the lag ๐
what's it say?
did you replace move() with action()?
its an easy fix, but a funny bug lol
i forgot the class weawpon part
for which?
this
I've gotten it to work
ur right lol ๐
everytime u fire
3 comes out instead of 1
but ima honest now there is a lot of lines its hard to find the bug or resolution unless u have encountered it
its firing every frame, so roughly 60 times per second. Unless you can let go after 1/60th of a second, it's gonna fire at least 5 lol
add some delay?"
yup!
well it is, but it's not the kind of delay we want here
Processing's delay() will cause the program to pause. So once i's done pausing the game would just keep firing weapons still
I fixed it by setting time constraints on the rate the player's fire arrows. Let's introduce some new global variables: ```pde
int ROCK_INTERVAL = 1000 / 2; // can fire 2 rocks per second
int ARROW_INTERVAL = 1000 / 1; // can fire 1 arrow per second
class Player {
int id; // player number (1, 2, etc)
int x, y; // position
boolean facingLeft;
ArrayList<Weapon> weapons;
int lastRock;
int lastArrow;
Player(int number) {
id = number;
facingLeft = false;
weapons = new ArrayList<>();
lastRock = -1;
lastArrow = -1;
resetPosition();
}
There's more code later
The variables lastRock and lastArrow represent the last rock/arrow fire time
Yep
(in milliseconds, 1000 ms = 1 second)
not this time
i meant
wait
ur right ur doing a different way
well then this would be implement in the class weapon?
No, I did it in the player class
lol the vast majority of this project is in the player class
Did I get it..? ๐
inside the scope?
which one?
the players scope?
right, but that's basically just the player class. I meant which method inside that class
void resetPosition... possibly..?
hint: it's the part that has to do with weapons
void update??
I was thinking more inside action()
OHH
Before we fire the weapon, check if we should
๐คฆโโ๏ธ around.. void action() scope?
inside* but yes
yeah
LETS GO : )
Or 4 if you count both players

Here's my updated player class. Read it and let me know if it makes sense
Mine's in a separate file
lol
Wrosk eprfectly
: D
I am definitely very thankful Cat that u came in help me like this
I've gotten to understand more on what processing is truly .
if anything comments are prob the best there is in processing 
that's good 
wait i've ac tually never used that emoji ๐ฎ

this one's a little outdated
oh, cool
haha
well now this thing is firing and : )
we need detect hit or miss thingy
so it means gotta come back to the falling game
pretty sure its similar
dang this comparison
haha
Thats insane

Alr cat let's do the detecting hit or miss now
: )
we could use Pvector but i probably still wouldn;t understand p vector tbh
The thing is, the robber image is at a much wider aspect ratio than the cop. So if we just did a basic bounding-box collision on that, things would hit the robber much easier.
I resized mine, but I don't think I made it larger
Making it smaller might actually be a good way to balance that
I think the real issue isn't about the dimensions of the image, it's that it's easier for a weapon to collide with the border of the robber image
without actually colliding with the robber
hmm
i know what u mean ur right
so maybe resize the robbers width
i mean height is perfectly fine
wait sorry im getting confused
mb mb 
Yeah, I can resize the robber image so that the width is the same as the cop. It will make it smaller, but hopefully not too much
๐
now it looks pretty fair
now it looks perfect!
So once they collide its a pretty fair collision
lol his heads the size of a rock
btw, can both players fire both weapons?
yeah
like fire both weapons at sametime??
no, P1 and P2 can fire either a rock or an arrow
from the picture, it looked like the weapons were player specific
it was just an example 
haha alrighty
Something like this? (I haven't added the code for scores yet, just the text)
oh yeah perfect!
yeah something like that
so everyimte miss well ofc that doesnt count
but everytime it hits
it would up the score
And when does the game end?
when u reach 5 hit the game ends and maybe a message on the screen (I've never tried this yet)
cool
equivalent exchange
back and forth
I guess
It's a pretty basic collision test
Basically, for every weapon, I checked if the middle pixel is inside the opponent's box
oohh
its not perfect, but its good enough
nothing needs to be perfect : )
Most of the changes are at the bottom of the player class ```pde
/* ----- BOTH PLAYERS ----- */
if (x < 0)
x = 0;
Player opponent;
PImage opImg;
if (id == 1) {
opponent = playerTwo;
opImg = robberImage;
}
else {
opponent = playerOne;
opImg = policeImage;
}
float opx = opponent.x;
float opy = opponent.y;
// Display and update all weapons
// Remove weapons that are out of bounds
for (int i = weapons.size() - 1; i >= 0; i--) {
Weapon weapon = weapons.get(i);
weapon.display();
weapon.update();
PImage weaponImg = rockImage;
if (weapon.vx != 0) // Only arrows can move left/right
weaponImg = arrowImage;
// The middle pixel of the current weapon
float mx = weapon.x + weaponImg.width/2;
float my = weapon.y + weaponImg.height/2;
// If the center collides with the boundary of the opponent image, increase score
if (mx > opx && mx < opx + opImg.width && my > opy && my < opy + opImg.height) {
score++;
weapons.remove(i);
}
if (weapon.x > width || weapon.y > height || weapon.x < -100 || weapon.y < -100)
weapons.remove(i);
}
}
}
Look where it says BOTH PLAYERS and replace the remaining code there.
Also, I added a `score` variable to the player class.
could you send me the file it prob be easier if i read from there
Cat u also have to eat dinner soon so I don't wanna take ur precious time 
We're almost done
true
But anyway, we also have to draw the score ```pde
void draw() {
background(bgImage);
image(policeImage, playerOne.x, playerOne.y);
image(robberImage, playerTwo.x, playerTwo.y);
/* DEBUG - outlines of players
noFill();
strokeWeight(2);
stroke(255, 0, 0);
rect(playerOne.x, playerOne.y, policeImage.width, policeImage.height);
stroke(255, 255, 0);
rect(playerTwo.x, playerTwo.y, robberImage.width, robberImage.height);
*/
fill(128);
textAlign(CENTER);
text("COP: " + playerOne.score, width/2, 40);
text("ROBBER: " + playerTwo.score, width/2, 80);
playerOne.action();
playerTwo.action();
}
would this be in the main code?
yes
wait ur main set might look a lil diff hol up
what's different?
nvm
we good
it works now!
how do I end the game like once a player reaches 5 hits and then show a message on the screen?
You could use noLoop() and then draw an end screen
this like basically the last part to the game
so this would be inside the main code?
yeah ```pde
void draw() {
background(bgImage);
image(policeImage, playerOne.x, playerOne.y);
image(robberImage, playerTwo.x, playerTwo.y);
/* DEBUG - player outlines
noFill();
strokeWeight(2);
stroke(255, 0, 0);
rect(playerOne.x, playerOne.y, policeImage.width, policeImage.height);
stroke(255, 255, 0);
rect(playerTwo.x, playerTwo.y, robberImage.width, robberImage.height);
*/
fill(128);
textAlign(CENTER);
text("COP: " + playerOne.score, width/2, 40);
text("ROBBER: " + playerTwo.score, width/2, 80);
playerOne.action();
playerTwo.action();
if (playerOne.score >= 5) {
noLoop();
textSize(100);
text("COP WINS", width/2, height/2);
}
else if (playerTwo.score >= 5) {
noLoop();
textSize(100);
text("ROBBER WINS", width/2, height/2);
}
}
you too 
Idk whatโs going on around but it doesnโt run anymore it says unexpected token on โArrayList<Weapon> weapons;
Did you make any changes?
Try restarting processing
Well you might have accidentally added a letter somewhere that broke the code, then if you removed it there's a chance the error checker didn't notice yet
Gotcha Iโm gonna try
๐
Ok
Alr mb
This internet ๐ญ
Do you still have the code from before we did cat?
The internet for my computer aboustely not loading
Google isnโt even loading
This one works?
Sorry I kinda had to reboot my internet
Alright Iโll check this after school because I donโt know why itโs not working for me
@analog garnet Idk why it isn't working
It works for me now but when I want to load into another my laptop
it says something
@analog garnet I think its something about the serperate tabs
the reasn the code doesn't work in zip
but only works when ex tracted
Well a zip isn't a folder, you have to extract its contents to use it
Ohh
so I'll need to extract it
Yeah, extract it to your sketchbook folder
wdym sketchbook folder?
With Processing, it's common to have a single folder to manage your projects, which are called "sketches". It's typically called the Sketchbook because it contains your sketches
If you open the folder containing one of your sketches, it's likely to be in the sketchbook folder if you didn't change it
I don't get it because when I try open the zip file and I open all the processing tabs it doesn't connect together
Only 1 tab shows out for example SlingsArrows
but not the player and weapon
What do you mean by open? Extract the zip file, and then when you open Processing, open the SlingsAndArrows.pde file inside the SlingsAndArrows folder that you extracted from it
Like I'm inside the zip file and I try to open the dode
code
but it doesn't work
It only works when I extract the zip file
Dont open the zip file. That's just a preview of the files it contains
Right click on the zip file and select "extract" or "extract to..."
ohh
I totally forgot about extracting it
It works now
Thanks Cat @analog garnet
So the entire time
It wasn't about the code or anything
just extracting?
Because from this perspective
I'm not sure what the issue was. I'm not fully convinced that you didn't change the code before it stopped working either
If it was working in the past, I dont see a reason for it not to work unless something important changed
nope nothing at all
im pretty sure i didn't extract is the issue
theres no other way
The extraction was only for running my code, I'm talking about why yours stopped working
stopped wqorking?
well you said you didn't change the code, but it gave that error
yeah
i think at that time i was in zip file mode
im sure i've never extracted anything before running it
For the record, it is technically unsafe to download, extract and run code you found on the internet. You're lucky that all I sent was my Processing sketch, but in the future, someone could easily send you maliciious code and ask you to run it. Just make sure that you trust the source of your software, and ideally read the code for yourself and try to understand it.
I-
Ur right
I kinda just trusted you, I thought of you as my friend 
Thank you for the advice tho ๐
Will do, I'm going to go eat dinner now
Cya
Alright, see you ๐





