LOGO

WSTAR, my pet application

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.

Now, with the emergence of the canvas element of HTML5, it is possible to write it in JavaScript, and make it work on everything, that has a browser.

Parameters

If you want to use it on your web page:

  1. Download the files
  2. Include "wstar.js" in your page
  3. Define parameters or accept the defaults

This script works with all modern browsers that support HTML5.

1. Download the files

You can download the files in zip format.

2. Include wstar.js in your page

<script src="wstar.js">
</script>

3. Create a canvas on your page

<canvas id="canvas"
width=400 height=400>
</canvas>

You can use more than one canvas, with different ids.

4. Create an instance with default values

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

5. Define parameters

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>

6. Draw the image

Optionally clear the canvas and then call the draw() method to draw the image on the canvas.

<script>
mystar.clear();
mystar.draw();
</script>

More examples

See also