Introduction

The impulse for the creation of "Charmed Chalks" was a memory of children's cartoon TV series about two bears, called "Pojďte pane, budeme si hrát". In one of the episodes, the two friends draw simple pictures using chalk and then revive them with a touch of a wand - for example an ugly beetle begins to crawl. I started wondering whether I'd be able to recreate the same idea with a program. It wasn't the first time a similar thought came to me, a long time ago I tried doing something similar using the first ever computer I could get my hands on (Sinclair Spectrum), but its power and Basic programming language weren't enough to perform the necessary calculations in real time.

It soon became apparent that even with today's technology, it wasn't going to be a trivial task. The contrast between the simplicity seen from the outside - you just scribble a few lines and they begin to move - and the complexity of the mathematical and programming tools necessary for proper execution is surprising (see section "What's under the bonnet").

Control buttons

We have placed great emphasis on making the application control as simple and intuitive as possible (children don't read instruction manuals). Even so, there are still a few things that the users have to figure out for themselves. The process of discovery is in fact part of the game, so we didn't include any superfluous instructions. For those who prefer to read up on everything beforehand though, there are the following directions:

	Switches between the offered colour palettes. On the chosen palette also depends the colour of the background and the control buttons.
	Selects the chalk colour. The chosen colour is then displayed as
	Opens a menu for saving and opening images from the gallery. You can also set some of the parameters here.
	Opens a blank canvas. In case the old image has not been saved, a confirmation dialogue window opens. Every new image is assigned a default name.
	Removes the last drawn line. (You can repeat this until you erase everything, but it is better to use the blank canvas button.)
	Switches to a deletion mode, in which you can delete any line simply by touching it. The button remains activated (red) until it is pressed again, or a different function is selected.
	Switches to a mode in which you can pin any part of any line by a simple touch, for removing the pin, touch the same place again. The button remains activated (red) until it is pressed again, or a different function is selected.
	Makes your drawing come alive, to stop the animation, press again. During the animation, all the other buttons remain hidden.

Control by touch

The application responds to the touch of one or two fingers. Using one finger, you draw or move your pictures, while you use two fingers to zoom and move the screen.

Drawing is naturally very simple, yet it is possible to point out a few things:

In order for the individual lines to behave as a single object, they have to "stick" together. You do this by either beginning or ending up on an already existing line (you can obviously stick both ends).
In order to help you, the program creates a turquoise indication circle around your finger as you connect two lines.

In the special case you connect the end of a line with its beginning, you create a closed shape, which has one useful feature, any other lines drawn inside this shape (eyes on a face for instance) will become part of this shape without being explicitly connected ("stuck") to any of its parts. During animation, these lines then move along with the surrounding shape.

Be careful though, any closed shape must be drawn in one stroke - so even if a circle made out of two semicircles looks the same as a normal circle, the program doesn't consider it to be such and any eyes drawn onto such a face will "scamper away". The application will again help you by creating a red indication circle when you are about to close a shape.

Despite all that, in certain situations, creating delicate drawings with your finger might be difficult - in such cases it helps a lot to zoom in on the picture with two fingers. (With two fingers you can also pan it.)

The individual colours from the palettes are assigned another hidden property and that is "gravity". The first colour in a palette is lighter than air, i.e. a ring painted in this colour will rise in animation, the last colour in a palette is heavier than air and will fall to the ground. The other three colours are neutral - they merely float in animation. Gravitational influences on all particles are mathematically added. Try to draw a hot-air balloon for example.

As I mentioned in the introduction, a "mandatory" task was to enable drawing of a crawling bug. All lines with one free end (except for the shortest ones) are therefore considered to be "legs". These legs then alternately move rhythmically during animation.

This is usually the desirable effect of course. In case it doesn't suit you, you can prevent it with a simple trick - draw a short line or a dot a the end of the unwanted "leg". This ensures that the program doesn't consider the end of the line to be a free end, ie. it will no longer behave like a leg and walk.

Main menu

Open private gallery	Opens a list of drawings saved in the local storage. The selected drawing can be loaded into the application (or deleted).
Save "drawings name"	Saves the current drawing to the local storage. Every new file is assigned a default name. To save the file under a meaningful name, use the "Save As" choice. After installing a new version, the drawings will remain stored, but when you uninstall the application, the files will be deleted. If you want to save your pictures somewhere better, publish them on our website (see below).
Save as	Opens a dialogue window for saving your file under a new name. It also includes a list of already existing files (the new name can't have already been used).
Settings	Opens a dialogue window where you can set certain parameters.
The following options will be offered only if the option "Enable public gallery" is selected in "Settings":
Open public gallery	Opens a dialogue window where you can enter selection conditions and get a list of drawings stored on our website. You do not have to be registered to view any of the published drawings!
Publish	Saves your current artwork to our website (requires registration). Any user may insert or change drawings only under his own name (but you can open someone else's drawing, change it and save its copy under your name).
Registration	Opens a dialogue window for registration. Only login and password are required, but entering your email might be useful in case you forget your password. Registration is only necessary if you want to share your artwork with others.

Settings

Enable public gallery	Turns on the main menu items for downloading published drawings from the public gallery on our website, publish your own drawings and registration.
Portrait width (mm)	This parameter describes the screen width in portrait mode (as measured by the operating system). To have the dimensions exact, use a ruler and set the proper value. Android sadly does not give us the accurate physical dimensions of the screen, the information it provides can vary by up to 8%. The rough categorization of screens from LDPI to XXXHDPI doesn't allow today's applications to accurately set the size of controls. For our application, however, it is particularly important because all dimensions are converted to physical units (millimetres) to allow transfer of drawings between devices with different resolutions and different screen sizes.
Portrait height (mm)	Ditto.
Stroke width (mm)	The stroke width that will be used with opening a blank canvas. The current value is saved along with the drawing, different images can therefore be saved each with a different width of your strokes.
Selection radius (mm)	This parameter determines at what distance do the lines begin to 'stick' together. If its value is too small, it is too difficult to touch the existing line with your finger and your pictures won't hold together. If the value is too large, the lines stick to each other, even if you don't want them to. We consider the preset value to be optimal, yet if you still have problems with drawing small details (such as eyes on a face), use zoom.
The following options are here mostly just for technical geeks:
Render mesh of the strokes	As explained in "What's under the bonnet", the drawing is displayed using OpenGL 3D library. The individual lines are made of wireframe mesh, which is subsequently rendered with texture or colour. Enabling this option allows you to see the triangles of the mesh (rather only two sides are shown of each triangle, which is sufficient in this case).
Render constraits of the shapes	As explained in "What's under the bonnet", the drawing consists of a number of autonomous particles that are connected together by a large number of "springs". Enabling this option allows you to see these individual particles and springs. Beware - it consumes a lot of the power of the graphic processor.

What's under the bonnet

This part is very technical and won't say much to an ordinary user. For a programmer however, it is the most interesting information.

Although the program looks like a simple "drawing program", it works with neither raster nor vector images. The drawing is used only as an input of information for a complicated physical model.

The individual shapes and lines are made of number of autonomous "particles" which are connected by variously stiff "springs". Each particle has its own direction and speed, and are influenced by a number of physical forces at any moment in time:
- tension of the springs, which try to keep the particles in their original distances
- momentum
- positive and negative gravity
- the user's finger (that can drag the shapes along the screen)

To calculate the position of each particle in each frame, it would normally be necessary to solve a large system of differential equations about 60 times every second. This would be impossible to handle in real time for a normal computer, therefore a certain approximation is called for - this program uses so called Verlet integration to calculate the motion of particles.

It is obvious that with the rising number of particles, the number of needed calculations also rapidly increases. On the other hand, if we want to maintain the "hand-drawn" quality of our picture and enough flexibility of the lines during their movement, the particles must have a sufficient density. It was also necessary to take into account the changing speed of our finger during drawing and the need to combine individual strokes into a single shape. So the transfer of a drawn picture into a structure of particles was another tricky problem. In the end, it was necessary to use a simple Bezier curves.

Despite this computational complexity, the physical calculations aren't the most power consuming part of the algorithm. In reality, the first version of the algorithm worked well in Javascript/HTML5 (even in a mobile browser). Only after the first attempt to implement the program as a full-fledged application for Android, it turned out that the display capabilities of modern browsers are much better than they seem. The same code proved to be virtually non-functional on Android in pure Java. In the end, I reckoned that it is because graphical engine of modern browsers is programmed in C ++, while Java canvas is programmed in Java.

The entire display portion of the application is therefore now built using the graphics library OpenGL ES 2.0 (normally used for 3D games programming). For the system of particles to display, it is converted to a standard wire 3D model, which is then covered with a suitable texture or coloured. To achieve the necessary fluidity on mobile devices, it was necessary to carry most of this work to the graphic card using the so called "shaders".

The remaining part, i.e. the logic behind the app, is simple. The pictures do not have any artificial intelligence, unlike the creatures in Evolution they don't hunt or eat each other. All logic therefore consists of objects rebounding from the walls and the alternating movement of the little "feet".

A separate chapter was the storage of a created drawing. The main problem was to permit transfer between different devices with an enormous variety in resolutions and screen sizes. We have solved the issue of resolution by converting all dimensions into millimetres before saving the file. When you load the file then, the millimetres are first converted to the proper resolution of the new device and the size is then adjusted to that of the new screen.

This enables the users to create a drawing on a large tablet with big resolution and then display in on a small mobile phone screen with a mediocre resolution, and vice versa.

(The Android operating system sadly does not tell you the exact physical size of the screen. Even the most accurate method "lies", even more so if the equipment is newer and has a greater resolution. So until Android corrects this, we decided to make a compromise - use the best method, which the operating system has to offer, and allow the user to set the actual size.)

Privacy policy

The only private information we store is your e-mail address, which you can enter during registration. It serves a single purpose - password recovery.

If you do choose to enter your e-mail, it will not be published or shared with a third party.