Most professional programmers regard programming not only as work, but as a hobby too. Writing software is such a tremendous experience that programmers continue doing it in their spare time. The only difference is that when they are free of other people's deadlines they work on their "pet" applications. Ordinary people keep cats, dogs, fish or dwarf hamsters as pets. Programmers keep pet applications. The pet application may be useless to others; we write it just for the pleasure of creation. If we have to learn a new programming language, we often rewrite the pet application first. Just as ordinary people keep different kinds of pets, programmers have different kinds of pet applications, often more than one at any time.
This is my favorite pet application. I call it WSTAR. I wrote the earliest version in Basic, while I was in high school. Then I adapted it to almost all computers I encountered and rewrote it in all the programming languages I learned. I wrote it in Basic, Pascal, C, PL1, Algol, Fortran, assembler, and several scripting languages. It worked on ZX Spectrum, Commodore 64, some ancient Atari computer whose name I do not remember, and of course on PCs and on Android.
You can download the files in zip format.
<script src="wstar.js"> </script>
<canvas id="canvas" width=400 height=400> </canvas>
You can use more than one canvas, with different ids.
<script> var canvas= document.getElementById( "canvas"); var mystar= new wstar(canvas); </script>
You can draw more than one wstar image on your page, either by creating more instances or by changing the parameters and repeatedly drawing it.
You can accept the defaults or assign new values to these variables:
The number of points.
<script> mystar.points= 19; </script>
The center of the image is (center.x, center.y). The default is the center of the canvas.
<script> mystar.center.x= 100; mystar.center.y= 100; </script>
The radius of the image is radius. The default value is the biggest image that fits on the canvas.
<script> mystar.radius= 50; </script>
The color of the lines is color. You can use any valid CSS color code, or expression, or the special "random" value, which is the default.
<script> mystar.color= "red"; </script>
Optionally clear the canvas and then call the draw() method to draw the image on the canvas.
<script> mystar.clear(); mystar.draw(); </script>