Creating our Own Objects
Rather than a tutorial with detailed directions, this tutorial takes the form of a series of steps, with comments in the code itself describing what is happening, and what is bieng added each time.
We start by making a class for a simple object that bounces left to right, and using that class to create a single object on the screen. Bit by bit, we add complexity to the program, with multiple objects, and more complex behaviors for them.
Step 1 - Making a basic 'bouncer' object class:
// declare a new "Mover" object named "m"
Mover m = new Mover(100, 100, 10);
void setup(){ // Runs once at start
size(640, 480); // Set screen size
background(0); // Make background black
}
void draw(){ // Runs every frame
background(0); // Cover all with black background
m.display(); // This calls the function in "m" to draw it on the screen
}
// Here is the code that sets up what a "Mover" is,
// what values (variables) it has, and what
// behaviors (functions) it has
class Mover {
//DATA: Here are the values we want every Mover to have
int x; // x position of the Mover
int y; // y position of the Mover
int speed; // Speed of the Mover
//CONSTRUCTOR: This is the "constructor." It's a special function
//that is used to make a new Mover. We called it at the top
//of this program. You can put "arguments" in the cosntructor
//to set variables when each new object is made.
//So "new Mover(100, 100, 10);" sets x to 100, y to 100, speed to 10.
Mover(int _x, int _y, int _speed) {
x = _x;
y = _y;
speed = _speed;
}
//This is a function for actually drawing the mover on the screen.
//It uses the x, y , and speed values to draw the mover in the right position.
//It also includes code for the "bouncing" behavior
void display() {
if(x<0 || x>width){ // If the Mover goes off the screen...
speed = -1*speed; // Reverse the speed (multiply it by -1)
}
x = x+speed; // Add the 'speed' to the x value to make it move to another position.
stroke(100, 50, 0); //Stroke color
fill(200, 100, 0); //Fill color
ellipse(x,y,13,13); //Draw the circle
}
}
Step 2 - Making multiple 'Movers' (new code highlighted in yellow):
// declare 4 "Mover" objects
Mover m = new Mover(100, 100, 10);
Mover m2 = new Mover(110, 110, 5);
Mover m3 = new Mover(120, 120, 1);
Mover m4 = new Mover(130, 130, 7);
void setup(){ // Runs once at start
size(640, 480); // Set screen size
background(0); // Make background black
}
void draw(){// Runs every frame
background(0); // Cover all with black background
//Call the "display()" function in all the movers to draw them on screen
m.display();
m2.display();
m3.display();
m4.display();
}
// Here is the code that sets up what a "Mover" is,
// what values (variables) it has, and what
// behaviors (functions) it has
class Mover {
//DATA: Here are the values we want every Mover to have
int x; // x position of the Mover
int y; // y position of the Mover
int speed; // Speed of the Mover
//CONSTRUCTOR: This is the "constructor." It's a special function
//that is used to make a new Mover. We called it at the top
//of this program. You can put "arguments" in the cosntructor
//to set variables when each new object is made.
//So "new Mover(100, 100, 10);" sets x to 100, y to 100, speed to 10.
Mover(int _x, int _y, int _speed) {
x = _x;
y = _y;
speed = _speed;
}
//This is a function for actually drawing the mover on the screen.
//It uses the x, y , and speed values to draw the mover in the right position.
//It also includes code for the "bouncing" behavior
void display() {
if(x<0 || x>width){ // If the Mover goes off the screen...
speed = -1*speed; // Reverse the speed (multiply it by -1)
}
x = x+speed; // Add the 'speed' to the x value to make it move to another position.
stroke(100, 50, 0); //Stroke color
fill(200, 100, 0); //Fill color
ellipse(x,y,13,13); //Draw the circle
}
}
Step 3 - Using arrays and loops to make hundreds of objects (new code highlighted in yellow):
Mover[] m = new Mover[100]; // Creates an ARRAY of 100 Mover objects
void setup(){ // Runs once at start
size(640, 480); // Set screen size
background(0); // Make background black
//This is a 'for' loop, which we can use to repeat code without typing it all
//You give it variable with a starting value, a limit, and a change in
//value which will happen each time it loops.
//This 'for' loop starts when i=0, continues while i < m.length (the number of objects in our
//array, 100), and adds 1 to i each loop. So it will run 100 times.
//
//The code inside the loop is 'stepping' through each empty space in our array 'm',
//starting in space m[0], and ending in space m[99].
//In each of these spaces, it's creating a new mover and sticking it in there.
for (int i = 0; i < m.length; i++)
{
//Every time this code loops, it creates a new 'Mover' in a slot in the array
//It initializes each 'Mover' with random values for x, y, and speed
m[i] = new Mover(int(random(width)), int(random(height)), int(random(7)+1));
}
}
void draw(){ //Runs every frame
background(0); // Cover all with black background
//Another 'for' loop. This one calls 'display' for all the 'Movers' in
//the array we made.
for (int i = 0; i < m.length; i++)
{
m[i].display();
}
}
//The 'Mover' class is mostly the same, however we've added some new behaviors
//in the 'display' function
class Mover {
int x;
int y;
int speed;
Mover(int _x, int _y, int _speed) {
x = _x;
y = _y;
speed = _speed;
}
void display() {
if(x<0 || x>width){ //If Mover goes off screen, reverse direction
speed *= -1;
}
if(dist(x, y, mouseX, mouseY)<100)// If Mover is close to mouse, jump down
{
y += 10;
if (y >= height){ //If object jumps off of bottom of screen, jump back to top
y=1;
}
}
x = x+speed;
stroke(100, 50, 0);
fill(200, 100, 0);
ellipse(x,y,13,13);
}
}
Step 4 - Adding different behaviors and variables to objects (new code highlighted in yellow):
//This code is mostly the same as the previous, but we've added
//other behaviors to the Mover class's display() function
Mover[] m = new Mover[100];
void setup(){
size(640, 480);
background(0);
for (int i = 0; i < m.length; i++)
{
m[i] = new Mover(int(random(width)), int(random(height)), int(random(7)+1));
}
}
void draw(){
background(0);
for (int i = 0; i < m.length; i++)
{
m[i].display();
}
}
class Mover {
int x;
int y;
int speed;
int diameter = 13; // Added a new variable, 'diameter' to change size
Mover(int _x, int _y, int _speed) {
x = _x;
y = _y;
speed = _speed;
}
void display() {
if(x<0 || x>width){ //If Mover goes off screen, reverse direction
speed *= -1;
}
// If Mover is close to mouse, make its diameter increase
if(dist(x, y, mouseX, mouseY)<100)
{
diameter +=1;
}
else{
diameter = 13;
}
x = x + speed;
stroke(100, 50, 0);
// Random flicker fill
fill(random(50, 255), random(50, 255), random(50, 255));
ellipse(x,y,diameter,diameter);
}
}
Step 5 - Having Objects React to Each Other:
//This code is mostly the same as the previous, but we've added
//other behaviors to the Mover class's display() function
Mover[] m = new Mover[100];
void setup(){
size(640, 480);
background(0);
for (int i = 0; i < m.length; i++)
{
m[i] = new Mover(int(random(width)), int(random(height)), int(random(1,4)));
}
}
void draw(){
background(0);
for (int i = 0; i < m.length; i++)
{
m[i].display();
}
}
class Mover {
int x;
int y;
int speed;
int diameter = 13; // Added a new variable, 'diameter' to change size
Mover(int _x, int _y, int _speed) {
x = _x;
y = _y;
speed = _speed;
}
void display() {
if(x<0 || x>width){ //If Mover goes off screen, reverse direction
speed *= -1;
}
// If Mover is close to mouse, make its diameter increase
if(dist(x, y, mouseX, mouseY)<100)
{
diameter +=1;
}
else{
diameter = 13;
}
x = x + speed;
stroke(255, 100);
strokeWeight(15);
fill(255);
ellipse(x,y,diameter,diameter);
//example of interaction among things//
//every object scans the other objects in the array 'm'
for (int i = 0; i < m.length; i++)
{
//make temporary variable to store the current 'other' Mover we're checking
Mover other = m[i];
//it's not a good idea to make the interact with itself
//'this' is how the object refers to itself
if (this != other) // "If the Mover I'm looking at is not me..."
{
//after I determine it's another thing I check the distance
if (dist(x, y, other.x, other.y)<50)
{
//and do something, like draw a line between them
stroke(255, 125);
strokeWeight(5);
line(x, y, other.x, other.y);
}
}
}
}
}