Objects

Objects are compound variables that can have multiple sub variables also known as attributes.

Before we can create an object, we have to first define the BluePrint of the Object. The Blue Print describes the Object to the Computer.

The blueprint for an object is called a class.

Say we want to define a blueprint (class) for a Ball object. Let us first identify what attributes a ball has.

A ball has a position on the X axis of the canvas – x attribute
A ball has a position on the Y axis of the canvas - y attribute
A ball has size – size attribute

So we have identified 3 attributes for a ball. Now let us define a class with these 3 attributes

Defining a Class

Select ‘Add File’ from the Sketch menu. In the pop-up that appears type ‘Ball.js’ as the name for file and click ‘Add File’.

Then Type the following code in the ‘Ball.js’ file.

Ball class

class Ball{

constructor(xVal, yVal, size){

this.x = xVal;

this.y = yVal;
this.size = size;

}
}

The above code defines a Ball class with 3 attributes.

Creating an Object of the Ball class

A class is just a Blueprint for an Object. It is not an Object. From this blueprint (class) we can create objects.

Steps to create an Object.

Define a variable that will point to the object.

var b1; // object variable

Create an Object with the new keyword and assign it to the variable

b1=new Ball(25,200,50); // create object

We can access the attributes of the ball object with the dot notation.

b1.x=30;

ellipse(b1.x, b1.y, b1.size);

Adding create object code to the Sketch

Click ‘>’ icon below the Run button to display the files Pane.

Then click sketch.js from the file list.

Add the following code to the sketch.

var b1; // object variable

function setup(){

createCanvas(600, 400);

//create a ball object

//x=25, y=height/2, size=50

b1 = new Ball(25,height/2, 50);

}

function draw(){

background(225);

fill(250,0,0); //set brush color to red

ellipse(b1.x, b1.y, b1.size, b1.size);

}

When you run the above sketch. You will get an error at line 6.

ReferenceError: Ball is not defined

This is because the class Ball which is defined in Ball.js is not available to the sketch. To make the code defined in Ball.js available to the sketch we have to add the following line to a special file called index.html.

Now change the file back to sketch.js and run the sketch.

Passing an Object to a function

A function can be defined to receive an Object as a parameter.

        function drawBall(ball){
          fill(250,0,0);
          ellipse(ball.x, ball.y, ball.size, ball.size);
        }

Open the file Ball.js and add the above function to it.

Ball.js

class Ball{

constructor(xVal, yVal, size){

this.x = xVal;

this.y = yVal;
this.size = size;

}
}

function drawBall(ball){
fill(250,0,0);
ellipse(ball.x, ball.y, ball.size, ball.size);
}

Note: We could even define drawBall() function in sketch.js instead of Ball.js.

Change the file to sketch.js and replace lines 11 and 12 with following line and run the sketch.

drawBall(b1);

Sketch.js

var b1; // object variable

function setup(){

createCanvas(600, 400);

//create a ball object

//x=25, y=height/2, size=50

b1 = new Ball(25,height/2, 50);

}

function draw(){

background(225);

drawBall(b1);

}

Exercise: Define a Brick class with the following attributes – x,y,width,height . Create 2 objects of the Brick class.

Set the object attributes as follows

	X	Y	Width	Height
brick1	100	200	40	20
brick2	200	200	40	20

Define a function drawBrick() that will display a Brick on the canvas. This function will be passed a brick object as a parameter. Call this function twice in draw() to display the 2 bricks on the canvas

Brick.js

class Brick{

constructor(xVal, y, width, h){

this.x = xVal;

this.y = y;

this.width = width;

this.height = h;

}
}

function drawBrick(b){
fill(170, 77, 5);
rect(b.x, b.y, b.width, b.height);
}

Sketch.js

var brick1; // object variable

var brick2; // object variable

function setup() {

createCanvas(600,400);

rectMode(CENTER);

brick1 = new Brick(100,200,40,20); // create object

brick2 = new Brick(200,200,40,20); // create object

}

function draw() {

background(225);

drawBrick(brick1);

drawBrick(brick2);

}

Exercise: Add another attribute to the Ball class (xForward) which keeps track of whether the ball is moving forward or backward. Define a function called moveBall() which receives a Ball object as a parameter. Depending on the value of the xForward attribute, the function should move the ball forward or backWard.

Ball class

class Ball{

constructor(xVal,yVal,size){

this.x = xVal;

this.y = yVal;
this.size = size;

this.xForward = true;

}
}

function drawBall(ball){
fill(250,0,0);
ellipse(ball.x, ball.y, ball.size, ball.size);
}

function moveBall(ball){
if (ball.xForward == true) {
ball.x++;
}
else {
ball.x--;
}
}

Sketch – move ball

var b1; // object variable

function setup(){

createCanvas(600, 400);

b1 = new Ball(25,height/2, 50);

}

function draw(){

background(225);

drawBall(b1);

moveBall(b1);

}

Practice Assignments

Define a function called detectWallCollision() in Ball.js. The function should receive a Ball object as a parameter and detect if the ball is colliding with the left or right wall of the canvas. If collision is detected then function should change direction of the ball.

Code a sketch showing 2 Horizontal Bouncing balls of different sizes.
Hint: Create 2 Ball objects

Add a speed attribute to the Ball class. Show 2 balls moving at different speeds