Drawing and Animation: Concept 1

A real-world entity is anything that exists in the physical world and can be identified as a distinct object.

Examples include:

People: Like you, your friends, or family members.
Animals: Such as dogs, cats, or birds.
Objects: Like cars, books, or buildings.
Places: Such as cities, parks, or countries.

In the context of Object-Oriented Programming (OOP), these real-world entities are modelled as objects, with attributes and methods that represent their properties and behaviors.

In OOP an object is like a real-world entity that has two main characteristics:

Attributes: These are the properties or data that describe the object. For example, if you have an object representing a car, attributes might include its color, make, model, and year.
Methods: These are the actions or behaviors that the object can perform. Continuing with the car example, methods might include starting the engine, accelerating, or braking.

Think of an object as a combination of data (attributes) and functions (methods) that work together. Objects are instances of classes, which are like blueprints that define the structure and behavior of the objects.

For example, take a pen:

A pen has properties such as the ink colour, the colour of the casing, the type of nib, the type of ink etc.
A pen has things it can do such as when the nib comes into contact with a surface and some pressure is applied to it onto the surface, ink will be transferred from the pen to the surface.
We interact with a pen by picking it up, holding, putting it in a pencil case, writing with it etc.

Classes and Objects

In Object-Oriented Programming (OOP), entities are represented as objects.

We can think of an object as a combination of data (attributes) and functions (methods) that work together.

A class serves as a blueprint or template for creating objects.

For example, a Shape class might have attributes like line color and fill colour,and methods like draw() and move().

An object is an instance of a class.

Drawing Shapes

In this tutorial, we will use several classes. these are nomrally shown in a Class Diagram with attributes and methods clearly defined.

Defining a Class in JavaScript

xxxxxxxxxx
 
class shape {
    constructor(strokeStyle, strokeWidth, xvalue, yvalue, fillStyle) {
        /* Constructor method for shape class
           @param: strokeStyle  (hex)String  colour of the line
           @param: strokeWidth  integer      width of the drawing line
           @param: x            integer      x coordinate of shape
           @param: y            integer      y coordinate of shape
            
        */      
        this.strokeStyle = strokeStyle;
        this.strokeWidth = strokeWidth;
        this.xcoord      = xvalue;
        this.ycoord      = yvalue;
        this.fillStyle   = fillStyle;
    }
​
    get x(){
        return this.xcoord;
    }
    get y(){
        return this.ycoord;
    }
    set x(xvalue){
        this.xcoord = xvalue;
    }
    set y(yvalue){
        this.ycoord = yvalue;
    }
    draw(){
        console.log("to be defined in child class")
    }
}

Constructors

Constructor methods are executed when an Object is instantiated and is used to set the initial values for the attributes.

Information Hiding

Attributes are only accessed, set and exposed to the "outside world" through the use of modifier methods: getters and setters. These are collectively called the interface

JavaScript has special keyword codes for getter and setter routines as seen here.

Abstract Methods

In JavaScript, an abstract method is a method that is declared in a base class but is meant to be implemented by derived classes.

Here, we can see the draw() method is partly implemented. However, it makes no sense here becuase we don't know which type of shape it is. Therefore, it must be implemented in the child class where it has a context. i.e. if the child class is a rectangle, we can easily define how to draw a rectangle.

Defining a Class in PYTHON

xxxxxxxxxx
 
class shape:
    def __init__(self, strokeStyle, strokeWidth, xvalue, yvalue, fillStyle):
        ''' Constructor method for shape class
           @param: strokeStyle  (hex)String  colour of the line
           @param: strokeWidth  integer      width of the drawing line
           @param: x            integer      x coordinate of shape
           @param: y            integer      y coordinate of shape
            
        '''     
        self.__strokeStyle = strokeStyle;
        self.__strokeWidth = strokeWidth;
        self.__xcoord      = xvalue;
        self.__ycoord      = yvalue;
        self.__fillStyle   = fillStyle;
    #end def
​
    def getx():
        return self.__xcoord;
    #end def
    def gety():
        return self.__ycoord;
    #end def
    setx(xvalue):
        self.__xcoord = xvalue;
    #end def
    set y(yvalue):
        self.__ycoord = yvalue;
    #end def
#end def
​

This is a development site to gather together teaching materials for AQA A Level Computer Science. It will be changing and being remodelled throughout this year.

No data is stored on the site but cookies are used to enable the website to function properly.

Contact: jpatel@dixons6a.com