HTML5 Installations

HTML5 Installations

This is a list of games, platforms, automata, languages, and gewgaws which have HTML5 installations hosted online on Cat's Eye Technologies' website, catseye.tc.

It contains some instructions for using each of these installations.

Note: some of the properties on the installation entries are meant to be more machine-read than human-read, but you can just skip over those.

Internal note: this file should not be used as input when creating a refdex.

Bubble Escape

You can play it online in the JaC64 emulator using Java Web Start. Use your arrow keys to guide the bubble through the maze. Avoid the hazards and find the five keys to unlock the exit.

You can also download the D64 disk image file bubble escape.d64 and run it in VICE x64 or some other Commodore 64 emulator.

If this game doesn't seem too impressive to you, try to remember, it's only two kilobytes of code! These days you can't even sneeze in less than a megabyte.

Super Wumpus Land

If your keystrokes aren't going into the "terminal", make sure you click in it first (it's focusable.)

The Never-Ending Maze

It's a text adventure. You can play it online in the Zplet emulator using Java Web Start. Type commands for the actions that you want to undertake in the game. For instance, go east.

You can also download the Z5 story file never-ending-maze-1.0.z5 and run it in Frotz or some other Z-Machine emulator.

The New Gamerly Realism

Background

Only when the conscious habit of coding culture's little interactions, Marios and Lara Crofts in games disappears will we witness a purely gamerly work of gamedev.

I have transformed myself in the zero of gameplay and have fished myself out of the rubbishy slough of mainstream gaming...

Only dull and impotent gamedevs veil their work with sincerity. Gaming requires truth, not sincerity.

Levels have vanished like smoke; to attain the new gamerly paradigm, gamedev advances towards creation as an end in itself and towards reification of the interactions of culture.

Instructions

Use the arrow keys to guide the protagonist (represented by a black square) around the playfield (represented by a black square) to collect all the treasures (represented by black squares) while avoiding the pits (represented by black squares.) Each treasure collected earns the player 10 points; the score is shown in the upper-left (in black). The player begins the game with three lives; succumbing to a pit costs a life; the number of lives is displayed in the lower-left (in black). When the game is over, left-click the canvas to start a new game.

Detractors and other peasants may satisfy themselves that this is actually a game and not just an entirely black gif or something by opening a Javascript console and typing BACKGROUND_COLOR='green'.

Cheshire Text

As if there aren't enough remixes of Lewis Carroll's works already.

BefOS

This is an HTML5 installation of BefOS, a Befunge-themed operating system which is neither Befunge, nor an operating system. (Discuss.) It runs on a web page thanks to the HTML5-based IBM PC compatible emulator, v86.

The system is delivered on a 1.44M floppy image, which contains the BefOS boot block, kernal, and the handful of sample pages which are included in the default build.

If v86 doesn't work in your browser, you can download the disk image and use it in an emulator such as QEMU or Bochs or DOSBox or, wonder of wonders, a real IBM PC compatible — if you can write it onto a floppy disk somehow...

Backtracking Wang Tiler

This is an in-browser implementation, in Javascript and HTML5, of a backtracking Wang tiler.

For more information on Wang tiles, see the Wikipedia article on Wang tiles.

For more information on this automaton and its implementation, see the README in the Wang Tilers distribution.

Braktif

This is the Braktif cellular automaton, compiled to Javascript using ALPACA and animated using yoob.js.

Instructions:

Select an example program from the dropdown box, then click "Start" to run it. Or click "Edit" to modify an example program, or create your own program.

You may wish to read the definition of this cellular automaton: braktif.alp.

Chzrxl

Instructions:

The percentage of balls held fixed can be changed by the slider, and the "Restart" button can be used to scatter the balls and restart their movements. You can try out different values and see which one you like the best.

Background:

The original idea was this: each ball travels on a sine-wave path (kind of like a spring) between a randomly-chosen pair of two other balls.

It was soon discovered that if all balls are free to move like this, they all quickly collapse to a single point. Thus, some number of balls are held fixed (5% by default). The result is a slightly organic-seeming emergent motion.

Circute

This is the Circute cellular automaton, compiled to Javascript using ALPACA and animated using yoob.js.

Instructions:

Select an example configuration from the dropdown box, then click "Start" to run it. Or click "Edit" to modify an example, or create your own.

You may wish to read the definition of this cellular automaton: circute.alp.

Cyclobots

This is an in-browser implementation of Cyclobots.

Instructions:

When a revolution occurs, every cyclobot picks a new cyclobot to follow at random.

In case the cyclobots leave the viewable area of the playfield, dragging on the playfield will scroll it.

Jaccia

This is the Jaccia cellular automaton, compiled to Javascript using ALPACA and animated using yoob.js.

Instructions:

Select an example configuration from the dropdown box, then click "Start" to run it. Or click "Edit" to modify an example, or create your own.

You may wish to read the definition of this cellular automaton: jaccia.alp.

Jacciata

This is the Jacciata cellular automaton, compiled to Javascript using ALPACA and animated using yoob.js.

Instructions:

Select an example configuration from the dropdown box, then click "Start" to run it. Or click "Edit" to modify an example, or create your own.

You may wish to read the definition of this cellular automaton: jacciata.alp.

REDGREEN

This is the REDGREEN cellular automaton, compiled to Javascript using ALPACA and animated using yoob.js.

Instructions:

Select an example configuration from the dropdown box, then click "Start" to run it. Or click "Edit" to modify an example, or create your own.

You may wish to read the definition of this cellular automaton: redgreen.alp.

Schrödinger's Game of Life

Schrödinger's Game of Life.

noit o' mnain worb

This online interpreter for the noit o' mnain worb probabilistic particle automaton is implemented in Javascript, on an HTML5 canvas.

Instructions:

Select an example configuration from the dropdown box, then click "Start" to run it. Or click "Edit" to modify an example, or create your own.

Etcha

This in-browser installation of Etcha is implemented in Javascript, using yoob.js.

Instructions:

Click "Start" to run the supplied example program. Or click "Edit" to modify it, and create your own program.

Gemooy

This in-browser installation of Gemooy is implemented in Javascript, using yoob.js.

Select an example program from the dropdown box, then click "Start" to run it. Or click "Edit" to modify an example program, or create your own program.

Matchbox

Instructions:

Select an example configuration from the dropdown box, click "Run" to run either of the programs individually, or "Find Race Conditions" to compute all interleavings of the two programs and look for race conditions between them.

Pixley

Instructions:

Select an example program from the dropdown box, then click "Start" to run it. Or click "Edit" to modify an example program, or create your own program.

Background:

This is an online implementation of Pixley which, as a bonus, also depicts the Pixley program as a set of coloured, nested rectangles.

This Javascript implementation of Pixley uses the Web Workers facility of your browser to run the evaluation process. So, if your browser does not support Web Workers, it may not function correctly.

For the Pixley project, a Pixley interpreter was implemented in Pixley itself ("meta-circularly") and in this installation, the Wrap in Pixley Interpreter button will take the Pixley program that has been loaded and put it inside this Pixley-interpreter-in-Pixley.

Evaluating a program wrapped in a Pixley interpreter will result in the same result as the unwrapped program. It will just take longer.

Evaluating a program wrapped in a Pixley interpreter wrapped in a Pixley interpreter will also result in the same result as the unwrapped program. It will just take quite a bit longer.

In theory, this "tower" of wrapped interpreters could go on forever, and they should all produce the same result.

However, in physical reality, computers have limitations, such as a finite amount of memory available. In my installation of Firefox, for example, wrapping a program in three levels of interpreters results in a "stack overflow" error being displayed in the Javascript console, and the evaluation process never finishing.

Shelta

This is Shelta, a language with a tiny compiler and a self-hosted compiler, running under FreeDOS running on a web page via the HTML5-based IBM PC compatible emulator, v86 — so you can bootstrap it right in your browser.

Instructions:

The system running online on v86 is delivered on a 720K floppy image, which contains a minimal bootable FreeDOS install, the Shelta distribution, plus various tools such as the TED3 text editor, and YASM. License and distribution information is included on the disk image.

You can use the pre-built Shelta compiler (whose source is written in NASM) to build the example programs, or to bootstrap the Shelta compiler written in Shelta. See the welcome message, shown after FreeDOS boots, for more details.

Documentation for Shelta is also on the disk image, and can be viewed with TYPE or EDIT, but you may find it more convenient to browse these files online:

If v86 doesn't work in your browser, you can download the disk image and use it in an emulator such as QEMU or Bochs or DOSBox or, wonder of wonders, a real IBM PC compatible — if you can write it onto a floppy disk somehow...

Whothm

Whothm is a simple language for describing infinite two-colour bitmapped graphics. This installation contains a Java application which implements Whothm, and lets you interactively try out Whothm programs online, using Java Web Start. The implementation is only an approximation; only a small portion of the infinite drawing (a couple of hundred iterations) is rendered. The rest is left up to your imagination.

Instructions:

Whothm is a simple language for describing infinite shapes. It is described fully in the documentation in the Whothm distribution.

Click "Run" or press Alt+R to run the program. The result is displayed in the canvas on the right. Page Up and Page Down can be used to zoom in and out of the canvas.

Syntax errors often result in an error message in the status bar, but might not in all cases. In these cases, consulting your browser's Java console, if it has one, might elucidate the cause of the error. Or it might not.

Obviously, this implementation does not support generating or displaying the entire infinite drawing. In fact, it only runs the loop for a couple of hundred iterations. The full shape is left up to your imagination.

Wierd (John Colagioia)

Wierd.

yoob

yoob is a public-domain framework for implementing esoteric programming languages, and allowing them to be interactively run on programs in a Java application.

Currently, yoob can interpret 21 languages: 1L_AOI, 1L_a, 2-ill, 2L, Ale, BackFlip, Befunge-93, Black, brainfuck, Circute, Etcha, Gemooy, LNUSP, noit o' mnain worb, PATH, Qdeql, Sceql, SMETANA, SNUSP, Wunnel, and Ypsilax. This installation shows yoob in action, and lets you play with all these esolangs online, using Java Web Start.

Wunnel

This is an HTML5-based implementation of the esoteric programming language Wunnel.

Instructions:

Select an example program from the drop-down (or click Edit and compose your own,) then click Run.

When INP is highlighted in the instruction matrix, the program is waiting for input. Click on the Input text box and input some 0s and 1s (Wunnel programs take bits as input.) The program will consume them in order, and continue running.

ZOWIE

This is an HTML5-based interpreter for the esoteric programming language ZOWIE. The reference implementation of the interpreter, written in Python, is itself being interpreted by Skulpt, written in Javascript.

Instructions:

Input is not yet supported, and errors are not yet handled in a user-friendly way, but it does work, as the example sources show.

Select an example program from the dropdown box, then click "Run" to run it. Or edit an example program in the text box, or create your own program.

A Minimalist Critique of Tetris

A minimalist critique of Tetris.

A Non-Random Walk

Pick a card, any card. Half are red, half are black. Each time a card is picked, the wheel moves. The distance moved is always half the distance from the wheel to the origin (the black dot), but the direction depends on the colour of the card: red moves left, black moves right.

Because the cards are shuffled, the picks are random, and you might think that it's not possible to tell where the wheel will stop, once all cards have been turned over. However, that's not the case. The wheel always stops at a distance a - a × 0.75^n from the origin, where a is the starting position of the wheel, and n is the number of red (or black) cards.

Art Restoration Simulator

Use your mouse (or your finger, on a touch device) to restore the artwork.

Black Hole Poem

Darker-beige squares can be dragged with your mouse or your finger (for what good it will do you.)

(Yes, you can't see the whole poem. Yes, that's the point. Yes, unless you look at the Javascript source. Yes, that's the point too.)

The background colour is beige because it's based on Illuminant E because that is our best guess at what colour the universe is.

Canvas Feedback

To begin exploring, we suggest you first try different presets from the Presets drop-down in the control panel on the right.

You can also paste the URL of an image in the Image URL text box, and click "Load", to try a different image.

If you want to get your hands dirty, you can open the Adjustments panel, in which you will find various sliders with which you can control all the parameters.

How can I save an image?

In Firefox, you can right-click on the canvas and select "View image", and save that. In other browsers, the easiest way may be to click the Pause button and take a screenshot. (You can thank the security model used in the HTML5 canvas for this.)

The animation isn't perfectly smooth.

This is an unavoidable consequence of conventional operating systems — your web browser isn't the only thing that's running, and may not get a chance to run until it's too late to display the next animation frame.

In other HTML animations, this can be worked around — the animation still drops frames, but intermediate steps can be computed so that it doesn't look excessively jerky. However, that may not be a realistic option here, due to how the feedback process works.

You can minimize frame-dropping by:

Now my desktop is twisting counter-clockwise!

You've just been staring at it too long.

Wait, I see five-fold symmetry. Where is that coming from?

To be honest, I really don't know.

Background

The idea came about while discussing Nam June Paik, and video art in general, with Gareth Jackson.

It was noted by one of us that, before digital video technology, there were a number of analogue effects that were employed in video art that aren't seen as frequently these days. A notable one was the use of feedback, the simplest version being training a camera on a monitor that is displaying the feed from that same camera. More sophisticated applications are of course possible; a relatively famous example is the 1970's version of the Doctor Who title sequence.

The question arose: could something analogous could be done with digital video, and if so, how?

And I came up with this as a simple technique which is similar to video feedback and which can be implemented straightforwardly in an HTML5 canvas element.

The default image used when Canvas Feedback starts up was designed by Gareth Jackson specifically to be a pleasing subject for this feedback process.

Circus Xamulus

Eine kleine Glitchfraktal

Select a mode from from the MODE dropdown to see different styles of glitching applied to the rectangles.

Fibonacci Spiral

The semicircles alternate being on the left and the right. The first two terms of the Fibonacci sequence are 1, 1 and these make up the unit circle in the center of the spiral.

The animation is simply a zooming out and back in on the spiral.

Fingerspelling

If you have a touchscreen, prod the lavender area of the screen with your finger. If you don't have a touchscreen, you may simulate this action with your mouse pointer.

Heronsis hermnonicii

Warning: the following may contain tedious and/or glib background and/or analysis.

Casting a negative space of knowledge. Calling itself a "plate" frames it as a work of learning, like some kind of 19th-century anthropology text. Yet it only raises questions — what are these entities? what kind of world do they inhabit? what are they protecting? who is Clarkson? — without providing answers, leaving it up to the observer to either imagine their own answers, or decide that answers to these questions are not necessary.

Plus it's fun to click on the red balls.

Hirsute Miasma

The animation will eventually cycle if you're patient (although it won't of course cycle exactly, as there is a random element.) You may enable the "terminal" option to prevent this cycling.

Hypongtrochoid

Each box moves with a constant velocity relative to the box it is contained in, and bounces around inside it in a simple fashion. Yet the path traced out by the innermost box is not very simple at all.

Lexeduct

Lexeduct.

Markov Font

Wait a few seconds while it analyzes the characters in the C64 character set. Then it will generate some of its own.

Multicolouralism

Each frame, the colour of each cell is chosen randomly from the set {cyan, magenta, yellow, white}. The probability of each of the colours is determined by the distance from the cell to each corner of the square, raised to a power (the "field strength") which can be selected by the slider.

Do you see false colours at the "borders" between the "fields"? You certainly can, but how much you see them seems to depend on several factors (your computer, monitor, lighting, persistence of vision, focus and peripheral vision...)

Noise to Signal No. 1

The two panels are constructed by randomly distributing the pixels from a source image randomly onto either panel.

Prairie

Progression

Radialjective

Tentacles, Undamped

Text Uniquifier

Copy some text of your choosing (from a web page, a local document, etc.) and paste it into the text area in the top half of the page. Then click "Uniquify" and see the uniquified text in the bottom half of the page.

Case-sensitive means that THIS, This, and this are treated as different words for uniquification purposes.

Punctuation-sensitive means that this, this?, "this" and (this are treated as different words for uniquification purposes.

You can also select to retain paragraph breaks only (output will look fairly similar to the input text), all line breaks (output tends to resemble free verse), or no breaks at all (output is one long unbroken stream of text.)

The Frame

Note 1. Green things can be dragged.
Note 2. Due to technical limitations, things cannot be dragged off of the computer screen.

The Judgment of Paris

Two Fifty Six

Uncle Ankur

Woman on Film

Use the navigation buttons to traverse the space of the work.