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++