NeXTClock

So here is a new project on GitLab called NeXTClock: a small browser-based recreation of a NeXTSTEP-style clock applet from the 1990s. This modern version renders a 64-unit clock face into a square <canvas> using JavaScript and requestAnimationFrame(), with optional scaling from 64 to 500 pixels, because, well, Java Applets aren’t really a thing anymore.

Background

The original source code of the Java applet came from the Internet Archive. This original NeXTClock applet was written by Rene K. Mueller and is preserved in original/NeXTClock.java in the GitLab project. That applet used AWT, a background GIF, and a thread that updated the displayed time. I used that Java applet in my “GaMMA” home page around 1999, until 2004.

Interestingly enough, the original Java version was written almost exactly 30 years ago at the time of this article:

// --- NeXTClock, written by Rene K. Mueller <kiwi@the-labs.com>
//     V0.20: Jul 20, 1996

import java.awt.Graphics;
import java.awt.Image;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.util.Date;

public class NeXTClock extends java.applet.Applet
        implements Runnable {
// ...

The translated source code in JavaScript in src/NeXTClock.js keeps the same 64 x 64 layout and the same visual idea: a NeXT-like clock tile with the weekday, day of the month, month, green seven-segment time, and blinking separator pixels. The drawing code scales that original layout to fit larger square canvases while preserving the pixelated look.

Usage

Include NeXTClock.js, add a <CANVAS> object on your page, then create and start a clock:

<script src="NeXTClock.js"></script>
<canvas id="clock" width="128" height="128"></canvas>
<script>
  const canvas = document.getElementById("clock");
  const clock = new NeXTClock(canvas, {
    size: 128,
  });

  clock.start();
</script>

The constructor expects an HTMLCanvasElement. By default, it uses the canvas display size and keeps it square. You can also pass a size option or call setSize() later; requested sizes are rounded and clamped between 64 and 500 pixels.

Available methods on the class:

• start() begins animation using requestAnimationFrame().
• stop() cancels the animation frame loop.
• draw(date) draws one frame for the supplied Date, or the current local time when omitted.
• setSize(size) updates the square canvas size and redraws the clock.

You can pass the following options to the constructor:

• backgroundSrc: optional path to a background image. When omitted, the built-in canvas background is used.
• darkGreen: color used for the seven-segment time display. Defaults to #00c800.
• size: optional square canvas size in pixels, clamped from 64 to 500.

The clock automatically observes canvas resizing when ResizeObserver is available, so CSS-driven size changes are reflected in the next rendered frame.

As usual, you can grab the source code on my GitLab account.