Engineering a Paintbrush Made of Light: Day 3 Review

Learning P5 didn’t turn out to be as difficult as I thought. I had tried to learn C++ in the past, but deemed it too difficult and unrewarding (I wasn’t able to create anything other than text-based programs at the start). P5 on the other hand, allowed immediate access to draw functions like rectangle and ellipse. I began to get the gist of it as soon as I finished writing an example program. This program basically consisted of having a rectangle (a “car”) move across the screen and reset its position to zero once it reaches the end. This is mostly a “class” function practice. A “class” is basically a cookie cutter for an “object”, like my “car”. I then set out to do something a bit more complicated, because I didn’t really want to do something all that simple. I modified my original “car” code, and tried to create hitboxes and a health bar. It actually wasn’t as hard as I anticipated, because I was able to figure out a way to detect whether or not the mouse is in a certain area relative to the “car”. From there on, I simply had to make the health bar decrease every time a “car” was touched. If all your health is gone, the screen stays red. Below is a demonstration and my P5 code. (Note that I eliminated some of my class functions to make the process of writing the draw() section shorter; I explain an alternative method I should have used in the code below.)

Froggr Demo (click to download/view)


Car myCar;
Car myCar2;
Car a;
Car b;
Car c;
Car d;
Car e;
Car f;
Car g;
float health = 750;
//I've initialized all the global variables.
void setup() {
size (1000, 750); //This sets the window size.
myCar=new Car(50);
myCar2=new Car(100);
a=new Car(150);
b=new Car(200);
c=new Car(250);
d=new Car(300);
e=new Car(350);
f=new Car(400);
g=new Car(450);
//These are all "cars". As you can see, I got
//lazy with the naming process because I was
//running low on time.
}
void draw() {
background(255);
myCar.display();
myCar2.display();
a.display();
b.display();
c.display();
d.display();
e.display();
f.display();
g.display();
//Running all the car functions. In retrospect, I could've
//made a for(xp=0, xp<width, xp+=50) //Old wraparound code
yp2=-700;
yp2=yp2+ys;
rect(xp,yp2,10,750);*/
//}
//void drive() {
yp=yp+ys; //"Drive" the "car"
if(yp>height+50){
yp=0; //Reset position if past the edge of screen
}
if(yp<0){
yp=height; //Same as above except for the top of the screen
}
//}
//void detect(){
if((xp
//The above is my sloppy (but effective) collision detection.
//Even though it might not be optimal, I'm proud of coming
//up with it myself.
health=health-10; //Reducing health
background(255,0,0); //Flashing red to denote health loss
}
if(health<0)
background(255,0,0); //If you have no health, screen is
//permanently red.
}
}