Member-only story

Innovations in Code

And how they can help you to start coding

--

Code runs our apps, games and systems of society but on a more personal level code is a magical puzzle great for story telling, art and communication. It is a shame that people miss out on the wonders of code thinking they can’t code or don’t want to. So please, code with me — for real. With just a couple clicks and taps we can explore the magic.

INNOVATIONS 1 & 2 :: The Online Editor and Chaining

Are you ready? Open up this Online Editor we have made for kids. Sure… it is time to think like a kid again. Be excited with something new. Now type or copy this into the editor and press TEST (then drag around the circle).

NOTE: we now have the ZIM Editor (based on the Kids Editor shown)

new Circle().center().drag();

This is pretty amazing. We have coded in less than a minute with no downloading software and no complex installations. The code even looks pretty readable! We chain together things with dot which means less lines.

Circle is called a class which holds instructions to make a circle. We make a new Circle object from the class. An object is like a noun. We then tell the object to be centered and be draggable. These are called methods. Methods are like verbs to tell the object to do something or have something done to it. We can also pass parameters into the round brackets ( ) to set properties of the object. Properties are like adjectives, for example, size and color.

Let’s animate a purple circle from small to big. Change the code and TEST:

new Circle(50, purple).center().animate({scale:2});

The {scale:2} part is called an Object Literal. It is a way to make a blank object that holds some properties. We could animate more properties in there too like: {scale:2, x:100, alpha:0}

INNOVATIONS 3 & 4…

--

--

Dr Abstract
Dr Abstract

Written by Dr Abstract

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator

Responses (1)

Write a response