To download an image file, click the draw button to draw the image then click the file button to download a copy of the image.png file to your downloads folder. To save the code, click the code button then copy and paste the contents to a text editor. Reverse the procedure to copy code back into Debden script. Debden Script This is a simple programming language that allows you to program graphic shapes and save the composite picture as a png file. There are four stages to writing a program. You start with a problem statement, then define an algorithm, then code it in a programming language, and finally test it to see if it solves the problem. In this case the problem is to produce a png image file, the algorithm is a hand-drawn sketch of the image you want to produce, The code is Debden Script as described below, and the testing takes place while you are actually writing the code. For example, if the problem is to draw a house, the algorithm would be a sketch of the house to facilitate the programming, the code would be written in the code page and constant switches could be made to the draw page to see the picture is building up as expected. when it is complete you can save it to a png file on your computer. You can also save the code text at any stage to a word processor or text editor then copy and paste it back into the code page when you are ready to do some more programming. In Debden Script you draw figures with a set of component shapes which you select from the list given below. You use the text editor in your mobile to text a keyword for the shape followed by a few numeric paramaters to describe it. The parameters can be denoted by c, for colour, n the number of sides of a shape, l for a line width, x for an x-position measured in from the left, y for a y-position measured down from the top, more x and y parameters if they are required, w for a width of a shape, h for its height, r for a radius, and a for an angle of orientation of a shape. So the shapes are - back c,w,h for the background line c,l,x1,y1,x2,y2 for a line from x1,y1 to x2,y2 for a straight line box c,l,x1,y1,x2,y2,x3,y3,x4,y4 for a lined box linecircle c,l,x,y,r for a lined circle centred at x,y of radius r rectangle c,x,y,w,h for a filled rectangle centred at x,y of width w and height h quad c,x1,y1,x2,y2,x3,y3,x4,y4 for a four sided figure circle c,x,y,r for a filled circle centred at x,y and radius r curve c,l,x,y,r,a,b for a part of a circle from a radians to b radians counterclockwise triangle c,x1,y1,x2,y2,x3,y3 for a filled triangle mark c x,y for a circular temporay mark to confirm a position polygon c,n,x,y,r,a a regular polygon with n sides, centred at x,y at angle a degrees pentagon c,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5 filled five sided figure grid a temporary grid to help with positioning The mark and grid should be removed before publishing the image. You can edit and change the source code in the code page at any time and click the draw button to see the effect. When you have finished you can copy the code and paste ito a text editor on your device then copy it back into the code page when you are ready to continue your design. To save as a png image click the draw button, to display it, then the file button to save the image in your device. Colours are specified in the usual way as three digits representing the red, green and blue components snd the opacity. These are hexadecimal numbers from 1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. So 000 is black, fff is white, f00 is brightest red, 0f0 is green and 00f is blue. Adding the fourth digit is optional and defines the opacity - f for totally opaque, 0 for transparent. For example here is a house code - back 0af 100 100 quad fff 20 50 80 50 80 90 20 90 quad 700 18 50 30 20 70 20 82 50 quad 000 30 70 40 70 40 80 30 80 quad 000 60 70 70 70 70 80 60 80 quad 000 30 52 40 52 40 62 30 62 quad 000 60 52 70 52 70 62 60 62 quad 770 44 70 56 70 56 90 44 90 And here is an Emoji - back 0af0 100 100 circle ab8 50 50 50 curve 800 4 50 30 50 0.8 2.34 circle dfd 50 60 10 circle fff 30 35 10 circle fff 70 35 10 circle 00a 30 35 5 circle 00a 70 35 5 line 550 2 20 15 40 20 line 550 2 60 20 80 15 linecircle 000 1 50 50 49 You can copy and paste these examples into the code page to see what they look like. If using a computer instead of a mobile you should reduce the display size until all of it fits into the screen.

Download image file back 0af0 100 100 line f00 3 50 10 50 50 line f00 4 45 20 55 20 line f00 3 45 20 40 35 line f00 3 55 20 60 35 line f00 3 40 35 30 50 line f00 3 60 35 70 50 line f00 3 50 50 40 90 line f00 3 50 50 60 90 f00 circle f00 50 10 8