ZIM - Code and Learn Coding with ZIM for JavaScript and HTML Canvas with CreateJS


Practice with ZIM CODE see the Learn Page for tutorials


Lesson 04 - Abstraction

Creative Coding Videos are above at right - they are a few versions behind the current ZIM.
Differences are that time is now in seconds not milliseconds and ES6 is now used not ES5.


Abstraction means to remove specific details. There are different levels of abstraction. Here is some mid-level abstract art by Hollander Maui (Dr. Abstract's Photographer name).

When we organize we move between general and specific as described in the CREATIVITY FRAMEWORK. Abstraction happens as we generalize and go up the hierarchy. So the animals node, in the diagram below, is more general and has had its details taken out (abstracted) and stored below in cats and dogs which are more specific.

The above diagram shows classification. Classes, in OOP (object oriented programming), are what objects are made from. We store the general (common or abstract) code in the class. This is efficient as we only have to make changes in one place and it will ensure that our code is consistent. Below are the ZIM Display classes.

So let's take a look at REFERENCE and PRACTICE sections on abstraction!


Abstraction ► Code Zero - Abstraction
In the diagram below, we have our code made of many statements. We have noticed that the statements in green are repeated. Rather than code them twice, we abstract them to one place. We have a couple choices:


  1. abstract to a constant to hold a common value
  2. abstract to a function to organize general code
  3. abstract to a class to organize a template for objects

A constant (const) only holds one value - not the many statements needed in the diagram below. If the value ever changes in the code then abstract to a variable using let. The last two options, the function and the class, could both provide a solution.

A function is just a block of code that we may run more than once. Often this is kept in the same file. Sometimes it is moved to an external file such as a module if we need to run it in multiple projects. ZIM has lots of functions as we have seen in the last lesson.

A class is a body of code that is a template for making an object. The diagram below shows the common code being abstracted to a class. The class can be stored in the same code or placed in an external code to be used by different projects.

On the right side of the diagram, we remake our code using the new keyword to create objects from the class. These go where the green code used to be and our code is now composed of fewer statements. We can now edit the green code in one place. This is more efficient and consistent. It also makes the main code more clear to read.

Let's PRACTICE abstraction!


Here we will practice abstracting to a constant, function and class.

1 Abstraction - Constant Show
2 Abstraction - Function Show
3 Abstraction - Class Show


Using abstraction is efficient. Coders are lazy - in a good way. We want to do as little work as possible. So any duplicated code we want to put in one place. Then it is easier to edit and we know it will be consistent. If we edit in more than one place then we might do it differently or forget.

Classification is also very important in life in general - it is the same thing as organization. We group like things - it simplifies. It allows us to see more general arrangements. Coding is very much working up and down a hierarchy. Mastering abstraction will help you in all areas of life. Please see the https://creativityframework.com for more examples.

LESSON 03 - Functions and Events LESSON 05 - Arrays and Loops