Lesson 2.3

Objects

Watch JavaScript Objects

Video for 2.3

What are objects and why are they used in programming?

Objects are a variable that contains other variables in name:value pairs. They are composite rather than simple. The other composite variable we will see later are called arrays (or lists). When you use objects to organize your code we will say that we are using object-oriented programming. Our everyday language organizes the world in terms of objects (nouns) that behave in certain ways (verbs) and have certain properties (adjectives). Object-oriented programming is an effort to make programs more closely model the way people think about and deal with the world. It makes programming feel more natural and hence easier to understand.

Object Syntax: A circle object as example

Note that the items in the object are separated by commas not semicolons. The variable declaration ends in a semicolon as before. Curly brackets demarcate the name:value pairs listed.The value is not limited to numbers as shown, and can include other objects. For example, color: {r:100,g:200,b:20) could be a name:value pair to indicate a color.The red color of that circle would be referenced with circle.color.r. The green color of that circle would be referenced with circle.color.g

Example 2.3.1: Define three objects as shown and have them all move towards the center at the same pace.

We start with a drawing showing the intial positions of the red circles. From the drawing we can write the code for their declaration as objects.

We draw them and change their position with each call to draw()

Example 2.3.1

Example 2.3.2: Define three objects, two lines and a circle, and have them all move towards the right at the same pace.

Example 2.3.2

Example 2.3.3: Define four rectangles as objects, and have them all expand to the right and left at the variable rates.

We will use rectMode(CENTER) which interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.

Example 2.3.3

Example 2.3.4: Have a set of circles move clockwise around a circle.

The number of circles can vary. The x coordinate of the points that make up a circle are given by r cosϴ where r is the radius of the circle, and the y coordinates by r sinϴ. Note that we declared but did not initialize the variables at the top, but in setup(). This was because x and y required the use of the functions, sin() and cos(), which needed to be inside a function to be called. Each call to draw() increments theta and then calculates the new x and y coordinates. Since π is the angle for a half of a circle, the number of circles will be 2 x (the number we divide by when incrementing theta - see the circle highlight). For example 2 x 36 = 72 circles.

Example 2.3.4

Example 2.3.5: How would we write this if we made the circles an object?

  1. We declared theta as a global variable because it is not part of the circle object.
  2. We used this in the value expression for x and y.
  3. We assigned a value to circle.x and circle.y in setup after initializing the object variable. Until we do so it does not yet have a numeric value but only a reference to circle.radius.
  4. We declared circle as a global variable. If we had not, the value of its fields would not have been available to draw() or anywhere else outside of setup().

Example 2.3.5

Exercise 2.3a: Define three circles as shown and have them all move towards the center at the same pace.

This is like Example 2.3.1, but this time we have the circles start at the top as shown below.

Exercise 2.3a

Exercise 2.3b: Have a set of lines move to the right and change color as shown.

There is no need to duplicate the colors – just find something you like. I included two as examples. Hint: This has some similarities to Example 2.3.2.

Exercise 2.3b

Exercise 2.3c: Define five rectangles as objects, and have them all expand up and down at variable rates.

There is no need to duplicate the colors – just find something you like. I included two pictures; the first at the start, and the second after a few seconds of running. Hint: This has some similarities to Example 2.3.3.

Exercise 2.3c

Exercise 2.3d: Draw a circle dynamically.

There is no need to duplicate the color or the thickness of the circle. I included two pictures; the first at the start, and the second after a few seconds of running. Hint: Use Example 2.3.5 as your starting point.

Exercise 2.3d