History of the development of Magic Designer programs.

I got the magic designer toy in 1966, when I was 10 years old. Here is a website which discusses the Magic designer:

Physical Parameters of the metal designer

In 1981, I got my first computer, an Atari 400. It had great graphics for the computer of that era, and a Basic language. Here is a website which discusses the Atari computers: Wiki on Atari

I developed the code to draw a design. However, this was before graphical user interfaces, and before hard disks, and even 180K floppy disk drives were several hundred dollars. So I did not have a useful way to interact with the program. Basically one did that with the joy stick. Looking back, I could have used that to select one number and two letters. That was all that was needed. I think it took a considerable amount of time to draw a design on a high resolution screen, which was 320 x 192. That was one color and I plotted a point for 360 degrees of angle. (The current program can draw a design in a 575 x 575 window in any color with 7200 calculated points, in a fraction of a second.) I knew that the floating point emulation in Atari Basic was very slow, so I wanted to do it in assembly language, but the 6502 8 bit CPU does not support floating point operations in hardware. Realizing this, I stopped working on speeding this up.

In 1994, I bought my first PC. It was made by CyberMax and it was a 486DX50 running Windows 3.11. That was a 16 bit version of Windows. Actually things were more complicated. I learned the Windows API, which was 16 bit at that time. I used Turbo C++ (in C rather than C++) to rewrite the magic designer math algorithm from Atari Basic. When I upgraded to Windows 95, my program broke and I lost interest in it for many years. What was important, was that it was my first experience with Windows style programming with what is called and IDE. When programming in Windows, it is a matter of placing controls, which the user uses to set up parameters and to run parts of the application, and writing code to respond to events that the Windows operating system captures and gives to these controls. Typical events would be the mouse moving or the user pressing a button on the screen.

Early in 2007 I was having fun looking for free software. Free software is not timed trial versions, or versions with limited capabilities, or versions where there are annoying things like a company logo. Nor is free software, shareware, which means the person who wrote the software is begging for a fee based upon your conscience to pay it. Free software is software you can download and use as is. It often comes with a support community of more experienced users, as well as source code in some cases. Examples of freeware are Audacity, the digital audio editor, Thunderbird, the email client program, and VLC Media player. Then I happened to see the Watcom C compiler. Watcom was the best names from the old days for language compilers. And now it is free software. In 2009, I switched to
Bloodshed Dev-C++
Here is a site which lists the well known C compilers: Free C/C++ Compilers

Basically, the redoing of the magic designer software divided into two parts. The first was to get the software working in C language again by using the Watcom compiler, debugger (it is the most stable low level debugger I have seen), and numerous manuals. I also downloaded the Microsoft Windows 2004 SDK, which is a place to look up how to call any Windows function in C language. I picked 2004, since I bought my computer in 2004. It is a Dell Dimension 3000 with a 2.4 GHz Celeron processor. Then I realized that I wanted a development tool, which is called an IDE, which can be used to visually place controls, and it generates source code for you. You still have to write the inside of event handlers. Basically, you visually place the controls, set properties of these controls, and there is a matrix of code control x event. I found this free language called Euphoria. It is interpreted like Basic, but has a syntax like a higher level C language. So, it is very easy for me to learn. They also claim it is very high performance. However, that was not my worry, since I already structured the actually drawing function in C language which was compiled by the Watcom compiler. I made it into a DLL to be called from the Euphoria program. Euphoria has a Windows library, with key developer Derek Parnell, and the IDE, with key developer Judith Evans. Here is the website: The Euphoria Programming Language . The people there have been very helpful.

My user interface design is based on the idea of saving screen space for a maximum sized square drawing window. So, I decided to use buttons rather than a standard menu. And I decided to stick with my original idea of having side by side parameters and draw area. My technical issues with Euphoria were tool tips which I use for help, and colored buttons. There was a colored button module, but I wanted something which I could simply change the color of the button in the program. So, I used a child window for the colored button. For the tool tips, I needed some help to make subfields in the status line. The status line is the major feedback to the user, so I had to make a sacrifice and give up drawing area for it. Derek provided me with the code to do the status line. But I am waiting on him for some improvements.

The next part of this page will discuss the way that the drawing of a design is implemented. It is best to read the page on the Magic designer mentioned first.

To solve this problem mathematically involves the following steps:

Determine the fixed points of the center of gears, relative to center of the center gear (where the paper is located). Using polar coordinates, this is r = radius of center + radius of gear, and theta is the angle of the gear. Polar coordinates start theta=0 as due East, and rotate counter clockwise, while radius is from the center of the center.

To convert this to x , y , see: Wiki on Polar coordinates
x = r * cos (theta), y = r * sin (theta)
Later calculations of radius and angle converted to x and y will be added to this. That is called vector arithmetic.

Determine the starting angles of the pegs. This is similar to a spirograph problem. The question is, how many times does a quarter rotate, when it is rotated around another quarter? It is twice, as described in this website:                                                        http://forum.physorg.com/index.php?act=Print&client=printer&f=20&t=9512

"A wheel rotates three times in rolling once around a fixed wheel with twice the diameter of the rolling wheel. Since the circumference of the rolling wheel is half that of the larger one, this produces two rotations with respect to the fixed wheel, and the revolution adds a third rotation with respect to an observer from above. The general formula, where 'a' is the diameter of the fixed wheel and 'b' is the diameter of the rolling wheel, is (a/b)+1. This gives the number of rotations for one revolution. Thus if the rolling wheel has a diameter twice that of the fixed wheel, it rotates 1.5 times. The rolling wheel, as it gets larger, approaches a limit of one rotation per revolution-a limit that is achieved only when it rolls around a degenerate 'circle' of zero diameter, namely a point."

So, since the ratio of gear to the center circle is 1:6, it rotates 7 times around. This means that it only takes 51.5 (360/7) degrees of rotation for the peg to return to its original angle.

So, to calculate the starting angle of peg for the design, ((center/gear)+1) * (70-shift lever) + starting value (270).

In a loop:

Imagine that the crank is being turned a tiny bit for each calculation. And then these points will be plotted. To make it a curve, one hopes that each point is continuous to the point before. Of course this is a pixel screen, but the points are maintained as floating point numbers, and then rounded to the nearest integer The concept of segments is used now, because this was how I needed to make DIVs to make the Web Browser version of the program. A segment is a rectangle of either 1xn or nx1 consecutive pixels. More on this later on. 2009 update is that I use Canvas and Cairo. Canvas is an HTML feature which supports 2-D vector drawing inside of rectangle. Firefox implemented Canvas using Cairo, which is a low level 2-D drawing library. And this is what I am now using in both the download and the browser versions. Floating point numbers are maintained and the curves are bezier curves with antialiasing, like in a PDF.

Determine the fixed points of the pegs, relative to the center of the gears. Using polar coordinates, this is r = distance from peg to center of gear and theta = starting value - (center/gear)*(how far in the turn). Note that the spirograph adjustment is not used, since the gears are fixed once the design begins. Also note, that how far into the turn is subtracted, since the gears are turning clockwise! Convert these to x , y and add (vectors) to the earlier calculation of center of gears to center of center.

Calculating the intersection of the two arms is the most complex problem. It is essentially the intersection of two circles drawn around the pegs. We know the arms lengths (from the letter the peg is in), and the positions of the pegs. I found the following site which not only explains it all, but provided a C program which is used here: Intersection of two circles It detects if there is an intersection, and where it is (there are 2). If there is no intersection, it would be as if the gears tore the arms apart! The problem is, that there are 2 intersections of 2 circles. These are called prime and not prime. It turns out that prime is almost always correct, but in the Advanced tab there is an option to choose not prime.

Next, convert these x , y back to polar coordinates, so I can move the point according to the rotation of the center. From the same wiki page is how this is done:
r = square root ( x^2 + y^2 )

The r value may be compared to the radius of the center, so that it will not go outside the lines. When this happens on the real device, there are gaps in the design. There are several ways this can be handled on the computer from leaving it alone to connecting the dots once it returns to the center circle. The program provides a clipping option, as well as not connecting the dots, since that is not real.

To obtain theta in the interval [0, 2pi], the following may be used (arctan denotes the inverse of the tangent function):

\theta = \begin{cases} \arctan(\frac{y}{x}) & \mbox{if } x > 0 \mbox{ and } y \ge 0\\ \arctan(\frac{y}{x}) + 2\pi & \mbox{if } x > 0 \mbox{ and } y < 0\\ \arctan(\frac{y}{x}) + \pi & \mbox{if } x < 0\\ \frac{\pi}{2} & \mbox{if } x = 0 \mbox{ and } y > 0\\ \frac{3\pi}{2} & \mbox{if } x = 0 \mbox{ and } y < 0 \end{cases}

It is important to know that the center circle is rotating in the opposite direction as the gears are. Because of this, the amount the center has rotated is subtracted from the polar angle.

Then convert back to x , y.

Finally, adjust the final coordinates to pixels, as was discussed.

When I went out to look for likely users of my Magic Designer program, I found a substantial portion of the community who thinks of designs and also uses computers, loves the Mac computer. A program written for the Windows operating system will not work on a Mac computer. And since I do not own a Mac, I could not develop software for one. So, I came up with another approach to allow anyone to make these designs. It is called Browser Version of Magic Designer. A web browser is an application which is made to work the same way on any computer. To make the web browser do things, a combination of technologies is used. I decided that javascript would be the best choice. I had considered java, but that requires either a java program to get loaded onto the users computer, or for a server hosting my site to run a java program (or any program) and sending the results back to the users computer's open browser. Since I do not want to rely on a hosting site, and I do not want the user to support any dynamically loaded plug ins, I decided to use javascript. All browsers support it, and it is very powerful. It is blocked by some browsers by default. But so many existing sites use javascript, that this blocking is not a worry. My main concern would be feasibility and speed of execution. Unlike a program running on a user computer, javascript is a high overhead interpreted language. Some of that is what makes it so very flexible. In addition to knowing javascript, I also need to understand HTML, which is the markup language which was first created to make the World wide web, and DOM, which is the way that HTML is converted internally inside of a browser and manipulated by javascript programs, much like Windows programs manipulate controls. And there is also CSS, which is defining styles. Finally, different browsers do work differently, even though there is only one javascript language. So, much of javascript programming involves supporting multiple browsers. I already have Internet Explorer and Firefox. So, I downloaded Opera, and decided I would make my program work in all 3 of these. In 2009, I support these 3, as well as Google Chrome and Safari.

I did alot of research, and my first thought was to learn to use some javascript library. However, I decided against it. It was hard to locate javascript which drew anything. Web pages were designed to handle text and image files, and not draw. But I found Walter Zorn. This is a key website: DHTML : Drawing shapes with javascript. His library handles lines, polygons, and ellipses. What I did was to extend his library, but not change his source code. I see my magic designer shapes as a complicated ellipse. It all comes down to making these little DIVs. Inside of the DOM are built hundreds of tiny rectangles of color. I call these segments. And I modified my standard windows program to make them, and it speeded that program up. I had been calling Window's LineTo function to make every plot point. I changed my program to make only tiny rectangular boxes either 1xn or nx1. I also implemented thick lines by taking these segments and surrounding them. And then, since javascript and C are so similar, I was able to go through my C program and quickly rewrite it for javascript. In 2009, I replaced my technique based on Walter Zorn, and use Canvas and Cairo in my C program. It is important to give credit to some one I only know of as Larry. He developed an algorithm to connect small bezier curves. His ideas inspired me.

What editors did I use? And, what other things did I use? Rather than look for a library of controls, I found just the ones I needed. I make heavy use of a slider control found at : Tigra Slider Control And, for picking color, I found this: Javascript Color Picker Input Controls T In 2009, I replaced both the sliders and color picker. See this link which lists all of the tools used. Third Party Links related to Magic Designer There are so many development editors which help with HTML and javascript. I started with Microsoft FrontPage, since I can visually layout a page. However, I now think that DIVs are better than tables for laying things out. But I still think that FrontPage is a good starting point, and for pages which have a simple layout, like this one, one can stay in FrontPage. So, what editor am I using? I am using several, but I like Notepad++ now. Here is where one can find that: Notepad++