My software
Computer programming

While my favorite things to do in life are outdoor activities, I am not always outside. So my second favorite activity is creating things I have an interest in. At one point I was given an opportunity to learn computer repair, operations, and programming. Since then I have had a deep passion for creating using computer programming.

Computer programming is the act of writing a set of instructions that a computer follows to perform some action. This has an extremely broad scope, but for the purpose of what I will share here I focus on what I think are awesome graphics and animation displays.

Over the years, computer programming has changed a great deal. There are a variety of languages, and the ever increasing scope of features which are available to use. Way back in the 1970's, we had a possible THREE colors to work with. Now the palette is almost unlimited. Resolution has improved dramatically also. Processing speed is so much greater now also so gaming is a popular type of software. With all of this ability, I started playing with computer animations in my spare time.

I find it interesting that I can tell a computer what to do! I especially appreciate having the ability to create my own software for any specific need I have personally. That not only saves me a lot of money not having to purchase applications and also allows me to create customized programs for my specific needs and devices. It also gives me a chance to learn while playing. In fact, most of what is shared below was written as a way to learn certain principles, having fun while doing so!

Website programming is very similar to other software creation, except that the target audience is a website visitor rather than just to make the computer do something. So I love to do website programming so that I can share what I create with others.

One drawback to computer programming is that even in todays world it seems different companies are still not completely willing to give up proprietary aspects. In other words, many animation related commands are named differently for different platforms. Because I write programs for MY purpose, the items below are shared as-is (mostly) without doing the modifications to attempt supporting all of the proprietary system requirements. So while I am sorry if any of these do not work on your system, I consider that to be the result of bad practice by companies rather than something which ALL programmers should have to build bloated code to deal with it. Even though the W3C (World Wide Web Consortium group) has set many wonderful standards, some platforms STILL add their own prefixes (like webkit_, moz_, etc) to function names. Thus making life harder for programmers and often resulting in programs NOT supporting some platforms (and their users) because of the added hassle. All of that just so that the company can insure their name is in there, even though the end user will never see it!

Another drawback to computer programming is the large variety of devices available today. Programs can run on the very small screen of a cell phone up to the very large screen of a big HDTV. Although there are thankfully many methods available to deal with this, the simple creations I share below are kept SIMPLE for the reason of keeping them simple. While I have made some minor modifications to some, mostly they are presented as they were originally written for my own usage on my system. In most cases, that means being displayed on a screen that is wider than it is high. So to help you determine what may work for you, I have included specifications in the description of the programs shared. So with that, just below this paragraph you should see a report of detection for your current system. This is a basic detection so its results may not be accurate for all systems.

Your system:

Unable to detect anything....
Canvas is NOT supported!
Inline SVG is NOT supported!

Above you SHOULD see a report of what is detected about your system. Some notes on that report:

  • if the Javascript is either not supported or disabled! text is shown, your system does NOT support basic Javascript or it is disabled by option. Javascript is used in almost all of my shared programs below.
  • If the Unable to detect anything.... text remains, it means that your system did NOT run some basic Javascript code. Javascript is used in almost all of my shared programs below.
  • if the Javascript IS enabled! text is shown, Javascript is detected on your system. Javascript is used in almost all of my shared programs below.
  • If the Browser screen size: text is shown followed by two numbers (such as 480x360), then basic Javascript IS supported by your system and the numbers represent the detected size of the browser window. While you MAY be able to run programs which state a larger screen size, the full content will probably not fit on the screen and you will have to scroll to the rest of the content. If the text appears but the numbers are either zero or not present, your system uses NON STANDARD (proprietary) functions and will likely not be able to run most of my shared programs.
  • If the Canvas is NOT supported! text is shown, your system does NOT support the HTML5 Canvas feature. This is used in many of my shared programs.
  • If a small yellow rectangle is shown, your system supports the HTML5 Canvas feature and is able to render at least basic graphics.
  • If the Inline SVG is NOT supported! text is shown, your system does NOT support SVG as an inline element. This is used in my shared SVG programs.
  • If a small blue circle with a red border is displayed, your system DOES support inline SVG. This is used in my shared SVG programs.

Since my shared programs were designed for my usage on a large widescreen HDTV, most require a wider screen size than height. Therefore, using a device with a wide screen (or sideways phone) will be your best option for viewing these.


I have grouped my programs into different areas so that you can look at related ones together.

Each program is run in a separate browser window. If your system blocks this action due to popup blockers, you will have to allow them individually. I do it this way so that you can easily return to this page WITHOUT having to use the back feature of the browser.

Many of these programs use timing functions for animations. Once you close the program, the burden of the timing function is removed from your systems workload. Each program by itself has very limited duty cycles, so they do not burden the system much. However if you have multiple programs running at the same time (ie: do NOT close them before running others), this CAN lead to a slow system performance. Therefore, I suggest running these individually and closing them after watching.

SVG graphics

  • SVG Lego bricks
    Requires: SVG, Javascript, and a x display area.

  • SVG Lego Technic
    Requires: SVG, Javascript, and a x display area.


  • Requires: Canvas, Javascript, and a x display area.


  • Planets
    Requires: Canvas, Javascript, and a 900x450 display area but should adjust for screen size of most compliant devices.

    One of the reasons I started to relearn geometric formulas is the fact that i wamted tp create a simulation of the solar system. This is the result of that desire. The scale of the distance from the sun is mostly accurate (planets close to it are spread out just a bit). The size of each planet is mostly to scale to each other but NOT to the scale of distance. Making this completely to accurate scale would take a very large monitor or very small (unseen) planets. Even so, its close enough to be good.

    Sitting there watching this is similar to watching grass grow or paint dry. But again, in order for the movement (time for each planet to orbit) to be accurate for all planets, if Neptune moved faster then Earth would be unrecognizable orbit. So each step is a day on earth and the outermost planets will take awile to do a full orbit. But that IS reality! Note that Pluto is NOT in this program. I have nothing against Pluto even if it is no longer considered to be a planet. But since its distance from the sun is so great (even beyond Neptune) it would not have been practical to include it considering the impact it would have upon the entire system scale.

  • Aqterrium
    Requires: Canvas, Javascript, and a 580x580 display area but should adjust to the screen size of most compliant devices.

    The Aqterryum is my version of a virtual aquarium. It comes complete with 24 very active colorful fish in severial species. For their comfort, it includes a cave and several plants.

    This aquarium was made using several different methods. All of the fish are drawn with the same routine, which creates different body and tail sizes as well as the fish color based upon variables. The cave and plants are drawn using array data, which can be of any width or height, and then scaled in size as need be. Layering allows these objects to be placed either in front of or behind the fish layer.

    The fish change direction when they get close to the sides of the tank. They also have the ability to change directions and speed without being near an edge. You can replace the fish with new ones by clicking in the banner which appear frequently in the center of the tank.

    This is my favorite self created animation because it comes very close to acting like a real aquarium. Yet there is no need to clean the tank or worry about fish which have expired.

  • Doll
    Requires: Canvas, Javascript, and a 540x600 display area.

    I created Doll. Originally this was going to be a puppet (where strings lifted the arms and legs), but that was too restrictive as it produced only an up/down movement. So I made Doll move without strings.

    The segments are moved relative to others (such as a foot relative to the lower leg). Instead of a simple line, two opposing arcs form each of the body segments. The result is close to lifelike movement ability (in two dimensional display), as restrictions are applied to the range which each segment can move to.

    Doll took me a LONG time to complete. After I had done an initial working model which did not quite look or act right dimensionally (like a human), I converted to real life measurements of body parts scaled down proportionately to fit on my screen. Then I also had to figure out the width of the parts as well as what range of movement would be realistic for a human.

    The end result was a simulation of a humans movement in a two dimensional scope. My initial version had each part moving at random independent angles. After I was done laughing hysterically at the conveluted dance that was the result, I decided to include direct instruction for movement. So the current version allows the Doll to wave or do jumping jacks too! Demo A is the initial version. Demo B is the same except at a higher speed so as to simulate a dance, some kind of very weird dance that might scare your friends away if you did it that way!

  • Terris Wheel
    Requires: Canvas, Javascript, and a 580x580 display area.

    My Terris Wheel is a simulation of a ferris wheel going around. But it does more than that to show techniques beyond calculating circle angles and points. As a more complete demonstration of animation, I use layering to show effects of objects behind and in front of the object being animated.

    As the Terris Wheel rotates, you can watch the passenger cabins and the support beams move. Each time the animation is started, each cabin is assigned a color. This makes it easy to watch any particular cabin go around. There is also a blue circle on the wheel as reference to one point, which at the start of the program is at the bottom (where passengers load).

    Then I added some other distractions. The support beams change color as they move. This simulates the lights on a real ferris wheel. Next I added two trees. The taller tree is on the right and in front of the wheel. So parts of the wheel are not displayed as they go behind that tree. A shorter tree is on the left and behind the wheel. In this case the wheel never disappears but parts of the tree do. Finally, I added an office building behind the wheel on the right side. The foreground tree blocks part of that building. Note that sometimes the buildings lights go on and off as they would in a real building.

    Calculating all of that would be a VERY COMPLEX situation. But with the use of layering in animations it is pretty simple AND results in less burden on the system. For Terris Wheel I use 3 layers: background, wheel, and front. Once I set the display priority of each layer, the browser handles all of the intense display/hide calculations for me. Layering also results in less need to redraw objects. For each rotation of the wheel, the area needs to be erased and redrawn piece by piece. If everything was on one layer, I would have to redraw EVERYTHING (trees, building, and wheel)! That is silly since the trees never move and only the lights of the building change in the background. Giving each area its own layer, lets me erase and redraw ONLY the wheel (cabins, wheel, and beams) for each move. In the background layer, I never have to erase anything because the lights of the building are either on (a yellow rectangle) or off (black rectangle). These can just be drawn without erasing as it just overwrites whatever was there. So without having to redraw everything for each wheel movement, I have cut the workload burden by about 66% using layers.

    I also added options to adjust the number of passenger cabins on the Terris Wheel and the speed of rotation. Changing these ONLY takes effect when the animation is started, so if it is already running you need to click STOP and then click GO when the options are as you wish.

  • Spinning Clock
    Requires: Canvas, Javascript, and a 400x300 display area.

    Many years ago I had a wall clock which had a slight problem. The paper face with the numbers had become unglued from the back. As the second hand went around, it would slightly pull the paper with it. Now the hands always indicated the correct time, but the numbers weren't in the right place. I could have easily fixed the clock by reattaching the paper to the back again, but instead I just enjoyed the amusement I got every time I saw the clock.

    So when I was playing with the code to display a clock, I just had to pay tribute to that old clock by simulation. Although I do not remember how long it took for the numbers to get back to their proper place (complete rotation), this program does that in just over 1.5 minutes. Watching the display feels like its pretty close to what the old clock did.

    My brother once had a backwards clock, where the hands moved counterclockwise. This program could be easily modified to simulate that action also.

  • Gears
    Requires: Canvas, Javascript, and a 540x600 display area but should adjust to the screen size of most compliant devices.

    Gears is an animation to demonstrate gear interaction. Although the spiked type of teeth would not be practical for a real world application, it does demonstrate the way that gears work together.

    The gears are all drawn by the same routine. An object is created for each gear and all of the major calculations are done before the animation starts. In this way, fewer calculations need to be made during the animation run which results in less workload.

  • Fountain
    Requires: Canvas, Javascript, and a 400x540 display area.

    Fountain is an example of animation with gravity force. At start, all of the water is tossed into the air. Each drop has a unique velocity and angle, so they will reach the ground at different times. Once a drop hits the ground it is launched again at another velocity and angle. The result quickly becomes what looks like a real life water fountain.

    I added color to each drop to make it more entertaining. I also have a version where the color fades the longer it is active. But this version is my favorite of them all.


  • Circle Draw
    Requires: Canvas, Javascript, and a 800x800 display area but should adjust for most screen sizes on compliant devices.

    This is a simulation of a drawing tool I had as a child. One shape with teeth is pinned to the base. A circle with teeth is held against that while being moved around it. Putting a pencil into any hole of the circle (placed at various distances from the teeth) while moving it around the pinned shape will produce some interesting visual effects.

    The premise is simple and the program is pretty easy also. But instead of displaying all of the shapes, I just display the resulting drawing. There are controls to change the sizes of the shapes (circles only in this version) and the drawing color. Even though I don't draw the guide shapes, calculating the draw point requires figuring multiple positions and angles. It was a lot of learning and experimenting, but the result is just like the original game has.

  • Maze
    Requires: Canvas, Javascript, and a 580x400 display area.

    Maze is mostly based upon a popular maze creation algorithm but it does a better job of picking a challenging finish point than most. Some maze programs often pick a spot fairly close to the start point. My code keeps track of points during the creation and insures the finish point is a decent distance from the start.

    This version is coded for a 32x24 grid maze, but my code can easily build almost any size maze. I have found this size to be challenging but not too overwhelming. The start point is always at the top left of the maze with a red square. The finish is a green square somewhere on the maze. Your marker is orange and starts on top of the start square. Each time the program runs it creates a different maze.

    The game has a timer. The timer does not start until you press a key. Move your marker using EITHER the cursor keys or the W, A, S, or D keys. The game tracks how many steps you take and the elapsed time. Once you have reached the finish point, the game reports your performance. Try to solve the maze in as few steps and as little time as possible.


  • Requires: Canvas, Javascript, and a x display area.

Page last updated: February 16 2018 17:18:49.
Page visited: 928