OwMe the cat! Click here to get to the main ZIM site! This is a whole big world of code! Press the back button to come back - or at the very bottom the ZIM site are the gold bars and ZIM Kids is in the gold bars.

Pragma says coding can be fiddly diddly but funtastic!

Creative Coding

JavaScript tutorials for Schools, Coding Camps and Workshops

MAGIC SPELLS ZAPPS SLATE TEACH

This is the first of the ZIM Kids tutorials. They picture thumbnails all have the same format - a title bar, a picture of the tutorial and a footer bar with the name. Each tutorial has three levels but there is only one level pictured on this thumbnails - the rest will be a surprise! Pictured here is a red square on a grid that has lines at every five pixels with thicker lines at every ten pixels - this is how you locate an object on the stage. There is a title bar at top with a title of PARTS in a cool font and then a number in green at the left (number 1). It says basic at the right on the title bar. There is a bar at the bottom that says VARIABLES and it is the theme of this tutorial.

This is the thumbnail for functions - again under the category of PARTS. It shows a cool purple arc made from overlapping rotated rectangles that makes a pattern like a doily or the middle of a sunflower. We ran a function over and over again in time each time rotating the rectangle to make this pattern.

Loops - under the PARTS category. Wow! Concentric circles - or circles within circles of some of the ZIM colors (blue, pink and green). It looks like a target and gives feeling of depth because things get smaller as they are farther away. They were made with loops which can run many times quickly and are great for making pattens. The loops happen all at once - not over time like we did with the interval function in the last example.

Events - under the PARTS category. Events are when something happens, like when we click or press a key. Pictured is a red triangle pointing to the right - if we click it it moves this way! The triangle has faded triangles behind to indicate that it has been moving. In the tutorial, the faded triangles are not really there... it was an effect because just a triangle on the screen looked a little boring for the thumbnail - shhh... do not tell the others!

Conditionals - under the PARTS category. Oooo - it is a big yellow happy face! We are using conditionals - which are if statements - to either show a happy, sad or thinking face based on odds. Programming has a random number which can be used along with conditionals to give us odds of something happening. The odds are one third a chance that a happy face will show, etc.

Containers - under the PARTS category. There are many red circles with random numbers in them. These were added to a container so we can do things with them all at once like hide them or move them or animate them or click on the container and find out which object was clicked. Objects in containers are called children and the container is the parent!

Arrays - under the PARTS category. Here we several long bar graphs - one above the other. The bars are at different heights which represent the number in an array. An array is a list of things - this time we list numbers. We can also hold strings (words or letters) in an array or any type of object in an array - they are very handy. The next bar graph shows the first two numbers switched. The next one shows the first number moved to the last number. The bar graphs show the changes we are making to the arrays in the code!

Objects - under the PARTS category. Woah! Flying saucers! On a dark background, a silver domed suacer is slightly tilted to the left and has a trail of orange, yellow and read rings beneath it showing how the suacer is levetating in the air! A smaller suacer is in the background. These are animated in the tutorial to go up and down and wiggle. This is the last of the BASIC tutorials. We move on to BUGS and THINGS with four tutorials in each - although one day there may be more THINGS added.

a little yellow round bug with dark round eyes offset with white sits on a diagonally striped grey and silver background inside a purple dashed-line pen. The words at the bottom say drag bug in pen.

kids/images/bugpath_s.jpg

Our little round yellow bug with black eyes offset with white is sitting on the grey and silver striped background looking at a white cube of sugar. mmm. The example will let you make a bug that moves to where you press on the page. You try and make the bug eat the sugar and when you do, a new sugar will appear somewhere random.

Oh no! Our little round yellow bug with black eyes offset with white is surrounded by red bugs! There is a dashed white circle three times as big as our bug around the bug. This shows the area that we can press to make the bug shoot away from the red bugs - or shoot towards the red bugs. Our bug will always move in the opposite direction to where we press and if we press near the bug it moves slowly and if we press farther from the bug but still inside the dashed circle then the bug moves faster. This allows us to control the motion of the bug in a very easy but almost invisible manner. If we press outside the dashed circle then our bug will not move. There is also a big red triangle in the picture and that helps us sweep up the red bugs back into their home that is not shown. It is a cute little game because if our bug hits the home then a new red bug comes out. And we have to bump the red bugs back into their home to get rid of them. Controlling our bug is a little tricky so we often accidentally make more red bugs than we can send back home! All this is done with ZIM physics and simple enough for kids to make!

We have now left the bug tutorial series. Now we are starting general tutorials. This one is a grey rectangular head that has big green eyes a blue triangle nose, a funny red twisty blob for a mouth and a silly looking squiggle for hair! All these parts can be made and dragged about. They can be saved for the next time which is suggested by the pink button that says reset in white letters. The same grey and silver diagonal striped background is on this tutorial and all the next tutorials too.

twenty-five little squares with rounded corners are tiled (five by five) on our striped background. They have the following colors: white, pink, white, green, green then the next row: green, white, black, black, black, etc. They are random and look like yummy candies.

a firey orange and yellow explosion is in the center on our striped background. The explosion is roundish and is bright in the middle and then gets dark and curly around the edges. It kind of looks like a cloud, all puffy and soft but also looks scary like smokey, whispy fingers that will get you! In this tutorial we make simple explosions from a particle emitter that sends little shapes flying from one point. We also use a Sprite which is a bunch of pictures that we play quickly in sequence in the same place. This makes an animation that looks real - and that is how we make our eplosion. We also hear sounds in this one! Boooom!

The word Scribbler is at the top left in black with a white outline. Then there is a thick lined fluffy bumpy cloud with all sorts of thin lined scribbles inside. These are all curly like curly hair or a bunch of wild string. The picture was made with the Scribbler which is a drawing tool we can make in this tutorial. It makes a curve that follows the mouse but also keeps curving on its own!

ZIM ZAPPS - fun apps for kids to make with JavaScript and ZIM Code

Press above for hundreds of fun examples!

ZIM would like to thank Karel Rosseel
for making ZIM Kids better!