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 09 - Data

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.


Data is often thought of in terms of scientific research or stock prices or in the realm of the counter creative... but that is not really the case at all. Let's see some examples.

A collage is a bunch of objects that can be placed to make a picture. In the digital world, if a creator (user) makes a collage, it would be helpful to save the collage for when they come back. They may also want to share the collage with others across computers and even across the world! Here are types of apps where we might want to save and share:

Apps that save



In this module we see how to store and retrieve the data to communicate and create! To do this we will use a server script (PHP) and a database (MySQL).

Data alone, will not be enough:

  The data says 10?  So?
  Oh, sorry... that is the width.

We also store meta data that tells us the purpose of the data. In the example above, the data is 10 and the meta data is width.

The combination of data and meta data is called information! Let's go have a look!


Data, Meta Data and Information ► Creative Coding Video 31 ► ZIP Sample Files

Diagram 1. The picture reads: width equals 32 ampersand c equals red.  Width is meta data, 32 is data.  The ampersand is a delimiter.  C is meta data and red is data.  The meta data and the data together are called information. Other names for meta data are identifier, id, key, name and index.  Other names for data are object and value.  Other names for delimiters are separator, punctuation, operator and split.

Data is an object, which is also called a value, like 7, true, "red".

Meta data describes the data otherwise we might not recognize its purpose.

These pairings are very common and collectively are called information.

Here are some examples:


x = 10; // a variable

{color:red}; // a property in an object literal

sound.paused = false; // a propery in an object

{width:10px;} // a css style

["good","bad"] // two array elements at indexes 0 and 1

search=love&data=today // CGI format for URLs

[time=>10, on=>true] // PHP Associative Array (like object)

To separate meta data and data pairs we use delimiters which are specified depending on the language or situation.


// JS Object Literal: comma delimiter between pairs
{size:"big", type:"fish", smell:true}

// CSS: semi colon between pairs, spaces between border values
{color:red; border:thin solid blue;}

// Arrays: comma between the elements with meta data being the index
["run", "walk", "stop", "jump"]

// CGI Format: & between pairs


You have been using many of these things already, like variables and objects. But we can give you a few tests!

1 Data, Meta Data and Information Show
2 Delimiters Show


Organization ► Creativity Framework - Code Zero (Organization)
To organize basically means to group things and to group things inside of things. Information changes depending on how we organize. Grouping by red things is often different than grouping by square things.

To plan our our organization, we can use nested boxes. We can start with a sketch or a wireframe diagram of what we want to make. This can help us figure out what to save. For example, our collage might have shapes and text as follows:

Diagram 2. The picture shows nested boxes with collage being the outer, shapes and text being the next two inside, circle and rectangle are boxes inside shapes and greetings and earthlings are boxes inside text. The four inner boxes all have x, y and c boxes inside.  C stands for color.  Labeled nested boxes is also called a wireframe diagram.

By the way, we coders organize inside of nested Arrays (lists). If you erase the top and bottom lines of the boxes and leave the corners then you get arrays!

Brackets are the text-based way to show boxes. This is true with Arrays [ ] and also with Objects { }.

Diagram 3. We have erased the top and bottom lines of the boxes from the last picture - but left the corners.  These now look like nested arrays.  Curly braces are also the same.

A hierarchy diagram is also used to show organization. Below you can see that a hierarchy can be drawn on or mapped to the boxes. These mappings are part of the Creativity Framework by ZIM Founder, Dan Zen (Dr Abstract).

Nodes are the same as the boxes - which are the same as the brackets.

Diagram 4. In this picture we have the nested boxes from the first picture in this series and have dawn a line from the top middle of the outer box then split to the top middle of the next two inner boxes.  We are starting to draw a traditional hierarchy diagram.  The lines bend at right angles.  We continue to draw the lines to the top middle of the next boxes within the boxes.  We do this until the hierarchy lines go to all the boxes.  This is called mapping.  We have mapped a hierarchy onto the nested boxes to show that these two sytems show the same information.

INFORMATION IN A HIERARCHY ► Creative Coding Video 31 ► ZIP Sample Files

Diagram 5. This diagram shows the same information as the diagram 1. where information is the meta data and the data.  It also shows a box around the information.  This box is datum.  Or a single bit of data.  We tend to use data for either singular or plural. So the point of the diagram is that data holds information and data is also in information (the data assigned to the meta data)

Information may have many meta data / data pairs. We call a single pair a variable, element or parameter but when refering to objects, it is called a property**.

** A property is a combination of a name and a value. It is information.

We also have specific names for meta data (name, identifier, id, key and index) and data (value, argument, object).

Diagram 6. Here we show the same boxes and mapped hierarchy as in diagram 3 but have labeled the information (boxes) in blue and the meta data and data (boxes) in red to show that they overlap each other - so the information box has meta data / data boxes inside.  But these are the information boxes for the meta data / data inside them, etc.  We also show that each box is a node.  And that inside the box is content and outside the box is context.

Look at the diagram above with the box names underneath the box. In a hierarchy, a node (box) is an object. The information of the object is all the meta data and data from ONE level below the object (inside the box). This is called the node's content. Just specifiy ONE level below because that one level already includes the next level below, etc. The node is also data for the information of the node above (parent node). This is called the node's context.

Note that this means that a node has content and that a node is content. The same with context. Such is the magnificence of life. An exception is the last node, called a leaf node and the very first node called Node Zero (Nodism).

INFORMATION IN CODING ► What IZ Object ► ZIP Sample Files

Diagram 7. We have zoomed in on the shapes node that splits into circle and rectangle nodes.  At the bottom of each we split to the x, y and c properties and use colons to show their values of 10, 20, red and 10, 50, blue.  We put those is curly brackets as an object.  Outside each object is a the meta data of circ and rect.  These are separated from their data with a colon. The circ and rect meta data / data pairs are surrounded with curly braces and this is data is assigned to shapes as the meta data.  Here we map the results of a hierarchy to a JavaScript Object Literal which we use to hold labeled nested data.

An Object Literal { } holds information as properties. These are separated by commas. The meta data and data are separated by colons.

The meta data is the name of a {node/box/object}. The data is the {node/box/object}. The brackets are the box which is the object which is the node which holds a part of information that our original object literal holds.

Diagram 8.  This is the same diagram as diagram 7 except we put the circ and rect data in an array rather than an outer object literal.  Instead of circ and rect meta data the array has indexes as meta data.  We have also added s properties to the data with values of circ and rect.  We have added another shape object as an example that now we can hold may objects in our collage without worrying about giving each one a meta data name.  These are equivilant to records in a database table as will be show in the next diagram.  Where the properties of the objects held in each record are the database table's fields.  The diagram also states that arrays are good for holding many similar types of objects (composition) whereas the object literal is good for holding different types of properties (classification).

We can use an index number as meta data if we do not need an understandable string id. In this case, we use an Array rather than an object literal.

We have also hinted at our next topic by adding Database records and fields. Records hold each object. And fields are the properties inside the objects.

INFORMATION IN DATABASES ► Creative Coding Video 33 ► ZIP Sample Files

Diagram 9. We show a table with meta data along the top of the columns - id, shape, x, y, color,  These are called fields. There are three rows with ids of 1, 2, 3.  These are called records and hold the data for the shape objects.  Curly brackets have been overlayed on each row to show that this is the equivilant of the JavaScript object literal from the last diagram.  One for each record. Data as labeled in the middle of the table as that is where the data is kept - circ, rect, 10, 20, red, blue, etc.  The whole table shows information for the shapes.  Each row along with the field names at the top are the information for each shape.

A database is used to hold information in tables which are grids of rows across and columns down.

This seems fairly simple but it is only holding one type of object. To hold nested objects a relational database is used and is beyond our teaching here on the database side.

Any number of nested objects can be stored easily with JSON JavaScript Object Notation. See the diagram below.

JSON holds an object literal or an array as a string. This means that whatever complex data we may have had in our JavaScript we can just JSON.stringify() it and store it as one field in the database table. JSON saves time in processing the data but the data cannot be sorted or reported in the database.

Diagram 10.  JSON (Jayson) is a way to turn an object literal into a string.  We can store this in a table as show in this diagram.  There is a database table with only two columns this time.  One for the id and one for the JSON.  This simplifies storing information because we do not need to split the information into all its properties.  We cannot sort or report this information so it has limitations.  But if this is not needed then storing JSON is easier.


Here are some questions to help see how you are doing with organization and storing information in code!

3 Organization Show
4 Information in Code Show


Client and Server ► Creative Coding Video 34 ► ZIP Sample Files

Diagram 11.  This diagram shows how we pass information from the user to the database through a server script and back again. Here we show a little user stick figure at the very left and very right.  Next to each is a box labeled client that represent the user's computer.  In the middle, between these is a stroked box for the server.  Inside the server box is a box for server script and a cylinder shaped box for the database.  Arrows connect the client to the server script as that is how the user sends a request.  Then the server script connects to the database and a reply is sent back to the server script which sends the results to the client - all these are shown with arrows.  The types of queries are input, update, select and delete.

The Internet provides a global way to share information. Information usually does not pass directly between people but rather goes to a server for processing and security and where it is stored in and retrieved from a database.

Web Information

CLIENT - HTML FORM ► Creative Coding Video 32 ► ZIP Sample Files
In HTML Hypertext Markup Language we collect user data in a form. This informs us with information. The form has fields with a parameter called name. This holds the data that is sent to the server so it is a must! There is also an id parameter that we can use in JavaScript to identify the field and get its value.

The form tag has a method parameter that is either GET for sending information on the URL, or POST for sending data invisibly. POST is usually used for privacy and GET is used to share the URL.

Here is what the HTML form code looks like in an example.html page:

<form action="example.php" method="post">
    <input type="text" id="visitor" name="visitor" placeholder="enter name">
    <!-- send along a number just for some more example data -->
    <input type="hidden" id="count" name="count" value="5">
    <input type="submit" id="submit" value="SUBMIT">

CLIENT - JavaScript Validation ► Creative Coding Video 32 ► ZIP Sample Files
We may want to check to see that the data the user is submitting is good. This is called validation. We can do that with JavaScript on the DOM Document Object Model.

Here is what the JavaScript for the form above looks like. The script can be placed in the HTML below the form. Or it goes in the head using a "DOMContentLoaded" event.

    // get a reference to the form input tags
    const visitor = document.getElementById("visitor");
    const submit = document.getElementById("submit");
    // add an event for when the user clicks
    // addEventListener() is like on() in ZIM
    submit.addEventListener("click", e=>{
        // validate the data
        if (visitor.value == "") {
            alert("please enter name");
            // should show a custom message not the system alert
            // if not valid do not submit form
        } else {
            // else valid and would let data to server
            // here we are just testing.
            // We would remove these for real


Server - Database Table ► Creative Coding Video 33 ► ZIP Sample Files


Information is stored on the server in a database and more specifically, in a table. See the earlier section on Information in Databases.

Follow these instructions to set up a table in MySQL with phpMyAdmin in cPanel.

Database Table Setup

  1. You need access to a server with cPanel
  2. Login to cPanel and select phpMyAdmin
  3. -- if no databases then go back to cPanel
  4. -- go to MySQL Databases and make a database
  5. Back in phpMyAdmin, select your database
  6. Press the little New link
  7. Give your table a name at the top
  8. Adjust the field number (an id will be one field)
  9. Make the first field the id of type int
  10. Scroll to the right and select the AI checkbox
  11. AI (auto increment) will pop up a primary box
  12. -- or just set a primary if you have custom ids
  13. In the box press GO = do not do anything else
  14. Scroll back to the left and fill in field names
  15. Choose the type of fields usually int or text
  16. Press save

Managing Table


Server - PHP ► Creative Coding Video 34 ► ZIP Sample Files
PHP PHP Hypertext Preprocessor is a common server script. The script is a text document with .php extension and it must be uploaded and run on the server. To upload we use an FTP client like FileZilla or an FTP package in our code editor.

Here is what the PHP syntax looks like in an example.php page:

<?php // start php - anywhere in html which goes outside PHP in the document

    $color = "blue"; // store a variable - use $ at start
    echo "My color is " . $color; // echo writes HTML, . is concatenation
    // or embed variables in strings
    echo "My color is $color";

    function testMatch($item) {
        global $color; // access $color or use parameter
        if ($color == $item) echo "match"; // or use brackets
        else echo "no match";
        echo "<br>"; // can echo HTML parts
    $colors = ["red", "blue", "green"]; // array
    foreach ($colors as $c) {
        testMatch($c); // no match, match, no match on different lines

    // also a traditional for loop - note the $i
    // also note the count() instead of a length property
    // as the PHP core is function based
    for ($i=0; $i<count($colors); $i++) {
        testMatch($colors[$i]); // no match, match, no match on different lines

    // end PHP below and go back into optional HTML code

PHP has Associative Arrays that are like object literals. They hold a key and a value.

    // associative array
    $person = [eyes=>"green", fingers=>10];
    echo $person[eyes]; // green
    $person["nose"] = true; // assigning a key and value

    echo "<table>";
    foreach($person as $key=>$val) {
        echo "<row><td>$key</td><td>$val</td></tr>";
    echo "</table>";
    // will make an HTML table with
    // eyes     |    green
    // fingers  |    10
    // nose     |    true

Server - PHP Data ► Creative Coding Video 34 ► ZIP Sample Files
Collecting data from the HTML form in PHP can be done as follows:

// to collect POST variables PHP gives us a $_POST associative array:
// that will hold variables that match the HTML form name parameters
// make sure the form has a method parameter of POST
$visitor = $_POST["visitor"];

// or to collect GET variables PHP gives us a $_GET associative array
// make sure the form has a method parameter of GET
$visitor = $_GET["visitor"];

// but we should use isset() to error check to make sure this exists
// here we use a ternary operator - (boolean) ? if true : if false;
$visitor = isset($_POST["visitor"]) ? $_POST["visitor"] : "";

Server - MySQLi Insert ► Creative Coding Video 34 ► ZIP Sample Files
SQL Structured Query Language is a commonly used to operate on a databases. A query is question that expects a result. We will use MySQLi which is a new version that binds user data to avoid previous hacking issues (MySQL injection).

Below we connect to the database and insert our data!

    // connect to the database
    $hostname = "localhost"; // do NOT change this
    $username = "username"; // change these
    $password = "password"; // change these
    $databasename = "databasename"; // change these
    $mysqli = new mysqli($hostname, $username, $password, $databasename);

    $visitor = isset($_POST["visitor"]) ? $_POST["visitor"] : "";
    $count = isset($_POST["count"]) ? $_POST["count"] : 0;

    // create our query but put a ? wherever user information would go (visitor and count)
    // also, change the tablename to your tablename
    // the id can be null if it has been set to auto-increment in the table structure
    $query = "INSERT INTO tablename (id, visitor, date, count) VALUES (NULL, ?, CURDATE(), ?)";

    // use MySQLi "prepared statements" to bind the user data to the statement
    // create, prepare, bind, execute and close a statement (sorry for the complexity!)
    $stmt = $mysqli->stmt_init();
    if ($stmt->prepare($query)) {
        $stmt->bind_param("si", $visitor, $count); // matches the ? in the query
        // options for the letters are s, i, b - string, integer, blob (picture)
        $stmt->close(); // if we are doing another statement
        echo "Thank you";
    } else {
        echo "Oops, an error";

    // press the Browse tab in phpMyAdmin to see the result in the table

    // add the SELECT code below to here, inside the PHP

Server - MySQLi Select ► Creative Coding Video 35 ► ZIP Sample Files
Continuing the example above, below we select from the database and output the result as an HTML table!

// make the query to select from the database
// this will select visitors with the same count
// the count came from the client computer so use the ? for binding
// btw the count is just an extra number we sent along to show more data
// you do not need to use a WHERE at all if you want all records
// you can also ORDER BY date DESC LIMIT 10, etc. and more - search SQL
// after the SELECT comes the fields for which we want to receive data
// this is not the rows but rather the columns!
// change the tablename to your table
$query = "SELECT visitor, date FROM tablename WHERE count=?";

$stmt = $mysqli->stmt_init();
if ($stmt->prepare($query)) {
    $stmt->bind_param("i", $count); // matches the ? in the query
    // bind results for a prepared statement
    // the order matches the fields we selected
    $stmt->bind_result($tempVisitor, $tempDate);
    // create an HTML table and fill it with fetched results
    echo "<br><br><table>
    // this gets each result record and inserts the data into our temp variables
    // we called them temp, because they get overwritten for each result record
    while ($stmt->fetch()) {
        echo "<tr>
    echo "</table>";
} else {
    echo "<br><br>Sorry could not retrieve data";


Async with AJAX ► Creative Coding Video 36 ► ZIP Sample Files
Sometimes we just want to send or receive data without loading the page. We can do this with an asynchronous call such as AJAX Asynchronous JavaScript and XML - no XML needed The code for AJAX is on the client in JavaScript and can be a little complex so we use a library to make it easier.

The form will have no action and method parameters. AJAX will instead send the data in URL encoded format. A callback function is made that will be called when AJAX recieves the response back from the server.

Here is the JavaScript code using the ajax.js file provided in the ZIP file. The PHP page is same as the code in box 08 above as we only need INPUT and not the SELECT.

<!-- call the AJAX library -->
<script src="ajax.js"></script>

    // this time the code is in the head tag
    // and we must wait until the tags are loaded
    window.addEventListener("DOMContentLoaded", e=>{
        // get a reference to the form input tags
        // note: we have added the count tag
        const visitor = document.getElementById("visitor");
        const count = document.getElementById("count");
        const submit = document.getElementById("submit");
        // add an event for when the user clicks
        // addEventListener() is like on() in ZIM
        submit.addEventListener("click", e=>{
            // validate the data
            if (visitor.value == "") {
                alert("please enter name");
                // should show a custom message not the system alert
            } else {
                //--------------------------------- AJAX
                // custom AJAX class from imported js file
                var client = new HttpClient();
                client.requestType = "POST";

                // Send to server
                // send CGI format of prop1=val&prop2=val
                // but should encodeURI each value to fix special characters
                // note: do not encodeURI the whole string... just the values!
                // use ES6 templating to insert values rather than + concatenation
                // "...visitor="+encodeURI(visitor.value)+"&count..."
                const string = `visitor=${encodeURI(visitor.value)}&count=${encodeURI(count.value)}`;
                client.makeRequest('sample_ajax.php', string);

                // callback function runs when result is received from server
                // the result will be what is echoed from PHP
                client.callback = function(result) {
                    // should show a custom message not the system alert
                //---------------------------------- END AJAX

            // do not submit the form - AJAX does this

        }); // end submit

    }); // end DOMContentLoaded


Binding ► Creative Coding Video 37 ► Creative Coding Video 38 ► ZIP Sample Files

Data Binding is a way to more automatically connect the front end property values to the back end data. We can bind TO the server data or bind FROM the server data or BOTH.

An advantage is that a Bind object takes care of all the sending and receiving and updating of the properties. Here is what that looks like in ZIM on the server we would handle the data the same as the previous sections

const bind = new Bind("https://zimjs.com/base/shapes.php", GET);

bind.from(()=>{ // get the bind data from the server

    // Here is the object with the properties we want to bind
    const blob = new Blob()
        .bind("blob", ["points", "x", "y"]); // a string id and properties

    // When we change the object send the data to the server
    // This sends all the data but we can specify if we need to
    blob.on("pressup", ()=>{

Here are two examples with Binding in ZIM:

ZIM Base - Canvas Database - easy MySQLi Example ZIM Base - Database Record Locking - easy MySQLi Example


ZIM Base ► BASE page ► Creative Coding Video 39 ► Creative Coding Video 40

ZIM Base is a custom PHP class to make database queries easier! It abstracts away all the steps of MySQLi.

Base Features

Here is a link to the ZIM Base Commands and the Base ZIP which includes three examples.


// import ZIM Base - your database connection is in there too

// collect either GET or POST variables
$base->makeVars("id", "data");

// INSERT (table, variables, update, where, more)
$result = $base->insert("zim_base", [id=>$id, data=>$data]);

// SELECT > SINGLE (table, fields, where, more)
$result = $base->select("zim_base", "*", [id=>$id]);

if ($result->num_rows > 0) {
    $record = $result->record;
    echo $record["data"];

// SELECT > MULTIPLE (table, fields, where, more)
$result = $base->select("zim_base", ["id", "data"], [status=>1], "ORDER BY id");
if ($result->num_rows > 0) {
    foreach ($result->assoc as $record) {
        echo $record["data"];

// UPDATE (table, update, where, more)
$result = $base->update("zim_base", [data=>"new data"], [id=>$id]);
if ($result->affected_rows < 1) {echo "error"; exit;}

// DELETE (table, where)
$result = $base->delete("zim_base", [id=>2]);
if ($result->affected_rows < 1) {echo "error"; exit;}

Here is an example of ZIM Base used with HTML - the PHP code is in the Base ZIP

ZIM Base - HTML Form - easy MySQLi Example


We have now seen how to let people save and share their creations! This is the true power of coding and the Internet. Mastering data will probably take some time - be proud as you continue to learn, create and help others to create as well!

We hope that you have enjoyed using ZIM and you continue to do so. There are all sorts of tutorials in the Learn section and sample code in the Examples section. Do not forget the Tips for the latest way to code! Connect with us on SLACK - All the best!

LESSON 08 - Controls