Steve's Real Blog

irskep, steveasleep.com, slam jamsen, diordna, etc

SillyPond

SillyPond generates unplayable sheet music in the style of John Stump's “Faerie’s Aire and Death Waltz”. It's my entry for PROCJAM 2019! Using a mixture of generative grammars, a linguistics library, noise functions, and a lot of hand-stitched random distributions, SillyPond constructs a description of sheet music, which is then converted to an image using the open-source music engraving software LilyPond.

The source code is one 720-line Ruby file that only depends on basic natural language and noise libraries. It boils down to a simple grammar with a cute library of phrases. Lovely stuff.

Emoji Soup Heritage

Life simulator with emphasis of simulating learning, communicating and creativity.

It simulates NPCs being born, living and eventually dying, gaining skills and advancing careers, meeting each other and learning from each other. And, sometimes, creating something that can be called a “Heritage” – a great work that will stay forever and can be used by NPCs to learn, or even find someone with common interest in it.

This is my favorite kind of half-finished project. The aesthetic says “I am getting down to business and have no time to do fancy visual crap,” and the content suggests so much to the imagination.

1002. Learned Charisma
1003. Learned Charisma
1003. Met Vicente Hobbs
1004. Will be a Actor
1004. Advanced as Actor
1005. Learned Charisma because of the interest in Actor career
1005. Met Esther Morse
1006. Advanced as Actor
1007. Advanced as Artist because of the interest in Actor career
...
1098. Met Nellie Trujillo because of the common interest in Actor career
1098. Met Cary Silva
1100. Met Willis Walton
1101. Was introduced to Abel Reese by Bruce Howard
1101. Met Chris Byrd because of the common interest in Police career
1101. Met Dwight Schultz
1103. Met Everett Mitchell because of the common interest in Actor career
1104. Met Julius Santana because of the common interest in Teacher career
1110. Died

The source code confirms that the author is building a rich world model from which they can draw interesting stories, which means they're after my own heart.

Sitcom Generator

Jay's off-color remark puts a sensitivity trainer in the office for a presentation, which prompts Richard to create his own. Bertha gets flashed in the parking lot, and Jay goes all out to secure the premises.

One of Bertha's old college friends comes to The Registrant. Bertha hits the Candelariochester media circuit to promote the Harvest Festival, but Jeremiah freaks out on air when his past is exposed.

Richard decides he can be a sitcom writer and comes up with “nothing.” What he doesn't realize is that he was only chosen because all the big-name players weren't available.

Now Jay must fess up, which will reveal his relationship with Bertha, or risk getting fired. Grace gets a town hall meeting to discuss her park idea, but she finds out that public reception is less than receptive.

A few weeks ago I ordered some drum gear from Sweetwater. They’re the anti-Amazon of music gear shopping: well-categorized, curated, human-run, and reliably legitimate.

When my package arrived, Procjam was in full swing, and I was working on a stories-about-dead-aliens generator. Sitting in the bottom of the box was Sweetwater’s paper catalog, and found myself flipping through the pages reading descriptions of snare drums.

The Gretsch Renown Series snare covers the warm tones of the 1950s as easily as it punches with the authority of 1980s rock. Much of the snare’s versatility comes from its 7-ply maple construction and 30-degree bearing edges.

I’m not a guitarist, but I wondered what the guitar pedal section would look like. It turns out there are, uh, a lot of guitar pedals.

Want to create rich, wild, and ambient soundscapes? The Slö is the creative tool you need. There are three reverb modes with totally different characters, and the full set of controls makes dialing in your sound easy.

When I sat down to work on my Procjam entry again, I realized I would have a lot more fun generating guitar pedals than stories about dead aliens.

Play with the guitar pedal generator

Download a PDF catalog

Source code

Guitar pedals!

Screen Shot 2019-11-24 at 1.34.11 PM.png

Screen Shot 2019-11-24 at 1.34.44 PM.png

Screen Shot 2019-11-24 at 1.34.59 PM.png

Screen Shot 2019-11-24 at 1.36.19 PM.png

Why procgen? Why guitar pedals?

Everest Pipkin gave a talk at Roguelike Celebration this year about corpora-as-media, and gave a great argument for why procedural generation is a good way of making art:

  1. It increases the likelihood of surprise.
  2. It can produce novel ideas that humans cannot or do not.
  3. It can be responsive and unique.
  4. Writing is hard, so we should make the computer do it.

When looking at the body of guitar pedal appearances and descriptions as corpora, several characteristics pop out as making them good procgen candidates. For descriptions, there is a jargony vocabulary describing features and output, a varied but predictable structure, and a large number of examples. For appearances, there is a flexible visual grammar that makes a guitar pedal recognizable no matter what the tiny details are.

Beyond all that theory stuff, I try to float with the currents of inspiration and not think too much. This time I was inspired by a Sweetwater catalog.

Computer as music catalog copywriter

As I was writing this post I kept wanting to quote parts of Everest Pipkin’s talk, but I was in danger of reproducing the whole thing in text, so you should just go watch the talk (it’s only 23 minutes) and I’ll assume you did that from now on. If you don’t have time, it’s fine. You’ll understand well enough.

The goal of my procedural guitar pedal marketing copy generator is to co-create a celebration of the unique language of music with the original copywriters. My corpus is 20 pages of guitar pedals literally torn out of the Sweetwater catalog.

A page torn out of the Sweetwater catalog

Rules, Ethos, Poetics

To create a grammar for generating new copy, it helps to figure out the rules, ethos, and poetics of the copyspace. (Thanks, Everest!)

Rules:

  1. Less than 400 characters.
  2. Always positive, never negative.
  3. Roughly two sentences.

Ethos:

  1. Every guitar pedal is valuable.
  2. Every guitar pedal is unique.
  3. Every guitar pedal is perfect.

Poetics:

  1. Details over comprehensiveness.
  2. Use the full body of musical language.
  3. Revere the guitar legends.
  4. Celebrate jargony features.

Anatomy of guitar pedal marketing copy

For each item in the corpus, I broke it down into its component parts before I entered it into my data files.

Here’s a word-for-word blurb for the Archer (“Classic Transparent Overdrive”) pedal:

The Archer is a high-headroom, transparent overdrive pedal, packing coveted K-style harmonic saturation and plenty of clean output. Archer’s touch-preserving headroom and endless amp-pushing boost are the results of an internal charge pump that boosts its 9-volt operating voltage up to 18 volts.

Broken down into its component parts, it looks like this:

[The :shortname] is a high-headroom, transparent [:purpose] [:pedal],
packing [:benefit] and [:benefit]. [:shortname]’s [:benefit] and
[:benefit] are the results of [:benefit].

Here’s another one, the PlimSoul (“A New Flavor of Overdrive”) pedal:

What’s better than a great overdrive pedal? How about two great overdrives in one pedal? Fulltone’s PlimSoul delivers just that, giving you a smooth, bluesy overdrive on one side and a more biting overdrive on the other. You can even blend the two channels to craft your ultimate signature overdrive.

What’s better than a great [:purpose] [:pedal]? How about _two_ great
[:purposes] in one [:pedal]? [:brand]’s [:shortname] delivers just
that, giving you [a :toneAdjective], [:toneAdjective] [:purpose] on
one side and a more [:toneAdjective] [:purpose] on the other. You can
even blend the two channels to craft your ultimate signature [:purpose].

Between these two, we’ve collected a list of “benefits”:

  • “endless amp-pushing boost”
  • “an internal charge pump that boosts its 9-volt operating voltage up to 18 volts”
  • “a genuine, US-made NOS 6205 preamp tube”

We also have some “tone adjectives”:

  • “smooth”
  • “bluesy”
  • “biting”
  • “clean”

Now let’s do a remix from scratch for “The Stevebox”:

[The :shortname] features [:benefit] for [a :toneAdjective],
[:toneAdjective] sound that everyone will love. And [:benefit] means
you’ll never lose that [:toneAdjective] [:purpose].

The Stevebox features a genuine, US-made NOS 6205 preamp tube for a biting, smooth sound that everyone will love. And an internal charge pump that boosts its 9-volt operating voltage up to 18 volts means you’ll never lose that bluesy overdrive.

Perfect!

One last thing worth pointing out in this section is that most descriptions can be cleanly split into “first sentence” and “second sentence,” and it’s usually possible to match any first sentence with any second sentence.

What’s better than a great overdrive pedal? How about two great overdrives in one pedal? Fulltone’s PlimSoul delivers just that, giving you a smooth, bluesy overdrive on one side and a more biting overdrive on the other. And an internal charge pump that boosts its 9-volt operating voltage up to 18 volts means you’ll never lose that clean overdrive.

Not perfect, but more than good enough!

What you’re looking at here is a grammar: recursive rules for putting things together. As I write this, my grammar contains 2,901 words, plus a list of 1,820 famous musicians.

Improv

The tool I used to process the grammar into text is called Improv by Bruno Dias. Improv’s core idea is that phrases have tags, and once a tag is used, its value doesn’t change. So if I have a phrase tagged type: distortion, and that phrase is used somewhere in my output, then phrases tagged type: reverb will not appear because their tag has the wrong value.

To learn more about Improv, read Bruno's tutorial. My code uses most of Improv’s features, so it might serve as a good example. Feel free to email me if you’re working with Improv and need help.

My main “innovation” around using Improv is I do some of the text entry in a CSV with LibreOffice, so I can browse word lists very quickly. I have a Python script that converts the CSV to YAML.

Screenshot of LibreOffice editing my CSV file

Computer as guitar pedal designer

Text is cool, but to really sell something like this to internet randos, I needed graphics. I used Vue.js and a massive amount of CSS to create a grammar for guitar pedals that looks something like this:

  • Controls: pair, single row, pair of rows, triangle
    • Single control: knob, finger switch, or LED
  • I/O
    • Inside: labels
    • Outside: rectangles representing jacks
  • Name and brand
  • Bottom: 1-4 foot switches
    • Foot switch: Stomp plate, hex foot switch, or round foot switch

Examples of pedals

The graphical part has no connection to the marketing copy besides the name and brand, so the descriptions can sometimes mention features the pedal doesn’t appear to have, but in practice no one notices.

CSS is a deep technical topic and I don’t have energy left to write about details, but here are some opinions:

  • CSS with Flexbox is a great visual prototyping tool.
  • Use Puppeteer for PDF output.
  • Use ems for sizing so you can scale the whole thing using font size.

PDF

I did a PDF version for NaNoGenMo (“write a program that generates 50,000 words of fiction”). The catalog has 760 pedals organized by type and brand.

Tips for PDF output using Puppeteer:

  • Fix background colors using -webkit-print-color-adjust: exact;.
  • Fix box shadows using -webkit-filter: opacity(1);.
  • Text shadows must be done using -webkit-filter rather than text-shadow.
  • There is a minimum font size. Trying to make text smaller than 0.5rem won’t work.
  • CSS columns don’t work well with page breaks. Group pages in divs.

Fun parts of the data files

Discussion

You can talk to me on Twitter at @irskep or over email. The main feedback I’ve gotten so far is “this is great, do modular synths next.” No promises!

I recently got the procgen bug and the space nerd bug at the same time. So I decided to see if I could write a bit of code that could generate star systems that pass the astronomy nerd sniff test based on recent research.

I'm sure I made a lot of mistakes, and if this is ever posted in a proper space science forum many flaws will be found, but even so, I think I fulfilled the spirit of my mission.

I'm not really an astronomy nerd myself, so I started with Wikipedia pages. I learned about the Kepler mission. I found some charming old-school web sites. All told, I skimmed about 40 articles and papers, and directly used about half of what I came across.

When I finished, I published a JavaScript library called Stellar Dream that programmers can use in their own projects. I also built a cute Windows 95-style web app that lets you browse imaginary star systems as if you were using digital telescope software: The Keplverse! My hope is that people will use this tool to assist in worldbuilding for roleplaying campaigns and works of art.

Play with the imaginary telescope

Keplverse Telescope Software 1.0.png

Stars

The first thing you need in a star system is a star. I decided to include only main sequence stars, since some of my sources didn't include information about anything else. Non-main-sequence stars, i.e. giants and white dwarfs, happen to be inhospitable to interesting exoplanets anyway.

Star type is picked using a simple weighted random choice. Each star type is associated with an approximate color, luminosity range, and radius range. The mass can be computed from luminosity.

Colors are from What color are the stars? by Mitchell Charity. Probabilities are from The Real Starry Sky by Glenn LeDrew.

Type Probability Color
M 0.7645629 #9bb0ff
K 0.1213592 #aabfff
G 0.0764563 #cad7ff
F 0.0303398 #f8f7ff
A 0.0060679 #fff4ea
B 0.0012136 #ffd2a1
O 0.0000003 #ffcc6f

Radius, temperature, and luminosity are much trickier. Calculating the Radius of a Star from the Sloan Digital Sky Survey explains how to do it properly, but I hate real math, so I just took a random value 0-1 and mapped it to a min and max value for the star based on its type. Because I was much more interested in planets than stars, and I wasn't planning to create accurate orbital mechanics, I was eager to hand-wave past this part of the generator.

Every star system has a habitable zone: an orbital radius that is close enough for liquid water to exist on a planet's surface, but far enough away for the atmosphere not to burn off. I learned how to compute the habitable zone for each type of star from solstation.com, an amazing Web 1.0 site. You combine the star's luminosity with a magic (to me) number, the normalized solar flux factor, or seff. Each star has a seffMin and seffMax value representing the beginning and end of the habitable zone. The habitable zone boundaries in AU can be computed using Math.sqrt(luminosity / seff[Min|Max]).

The last interesting value I chose to look at was metallicity. Research published in The Astrophysics Journal in 2004 by Fischer and Valenti suggests that gas giants are much more common around stars with high metallicity. My best approximation for picking reasonable metallicity values came from a small figure on page 5 of The Metallicity Distribution of the Milky Way Bulge by Ness and Freeman. I combined two Gaussian distributions that put most stars in the 0–0.5 range, with the rest at -0.5–0. There's a correlation between high metallicity and proximity to the galactic plane, but I explicitly ignored that since I wasn't trying to place any stars in a coordinate space.

Binary star systems

Many star systems, perhaps most, contain two or more stars in orbit 0–1 light years apart. The fraction of star systems in various configurations is not well known as far as I could tell. I also didn't want to deal with modeling the effects of the distance between binary stars on orbits and such.

So I decided to do pull some heuristics out of thin air: 11% of the time, an extra star will be added to the system as a “close binary”, and the less massive star will be ignored for planet-generating purposes. The less massive star also does not affect the habitable zone of the system, which I realize might be too extreme of a simplification.

Planets

Research on stars has been steady for as long as people have had telescopes, but research on exoplanets took a huge leap forward when NASA launched the Kepler telescope into space, surveying 150,000 stars for exoplanets over four years. Because of this mission, there's a huge difference in the quality and results of research published before and after about the year 2010. I wanted to combine some high-level basic facts from the Kepler mission into a simplistic yet believable model for placing planets in star systems.

What we know about exoplanets

Googling around for Kepler findings is a good way to spend an afternoon. I learned a few interesting and surprising facts, not all directly related to Kepler: * Few gas giants have been found in far-out orbits, despite Jupiter and Saturn being quite far out in our solar system. * At least one in six stars has an earth-like planet. * Planets tend to have a similar size to those in adjacent orbits. (Many Worlds is a great blog!) * Nearly all sun-like stars have earth-like planets. * 70% of stars, regardless of type, have an Earth- or Neptune-like in orbits up to a bit over 1 AU. * M-Dwarf stars have an average of 0.5 Earth-like planets in their habitable zones.

Beyond those neat little nuggets, I also discovered a fun mini-controversy: experts disagree about how to classify planets! Some charts have as many as 8 classes: Mars-size, Earth-size, super-Earth-size, Neptune-size, sub-Jupiter-size, Jupiter-size, and super-Jupiter-size. But an article called Sorry, Super-Earth Fans, There Are Only Three Classes Of Planet, a summary of the much drier Probabilistic Forecasting of the Masses and Radii of Other Worlds, convinced me that there three types is enough:

  1. Terran worlds with rocky surfaces and maybe atmospheres
  2. Neptunian worlds with large atmospheres made of hydrogen and helium
  3. Jovian worlds that are big enough to compress on the inside

The only thing that differentiates these classes is size. Once a planet gains a certain mass, two Earths or so, it gains a hydrogen-helium envelope that is inhospitable to life and becomes a Neptunian planet. And when it crosses another mass threshold, the extreme gravity means it can't have a well-defined surface, and becomes a Jovian. Finally, a body might be massive enough to behave like a successful or failed star, no longer even classified as a planet.

Each planet type has a different mass-radius relation. The unit M⊕ is Earth-masses.

Type Mass (10^X M⊕) Radius exponent (M⊕^x)
Terran -1.3–0.22 0.28
Neptunian 0.22–2 0.59
Jovian 2–3.5 -0.4

Imagining solar systems

Putting all these facts together, I made what I thought was a reasonable pass at a set of simplistic rules.

First, if the star type is A, B, or O, then create no planets. These stars either change too quickly to support life, or have stranger rules regarding planet formation. O-type stars become supernovas, B-type stars may only have gas giants, and I couldn't find enough data on A-type stars. (Terraforming Wiki: Stars and other hosting celestial bodies)

Next, there's a 30% chance of stopping, because only about 70% of remaining star systems have planets at all.

Now that it's time to make some planets, use the some eyeballed and estimated figures to weight different kinds of planets.

  • Gas giants have a weight of 0.3 if the star's metallicity is >= 0, otherwise it's 0.04.
  • Terrans have a weight of 0.3.
  • Neptunians have a weight of 0.6. This is the most common type of observed exoplanet.

I decided to ignore the “planets in adjacent orbits have similar sizes” correlation, and instead pick planet type by simple weighted random choice. But where in orbit will they go? I couldn't find any accessible research-supported models for this, so I pieced together a few ideas:

  • Kepler was mostly looking for planets in close orbits, so it might have missed many planets in far orbits.
  • Kepler found a lot of planets in close orbits.
  • Planets are pretty common in the habitable zones of stars.
  • The Titus-Bode relation is pretty accurate.

Combining those ideas, I thought it would be reasonable to create eleven “slots”: one somewhere in the habitable zone, five closer to the star, and five farther away from the star. One would be randomly chosen as the “start,” and then planets could be added inside and outside the existing planets based on some probability, occasionally skipping an orbit just for fun.

I added a special cheat case to match the statistic that M-dwarfs average 0.5 Terran planets in their habitable zones. If the star is an M-dwarf, there's a 40% chance of forcing the start of the planet sequence to be a Terran planet in the habitable zone.

Once a planet is added, there's a 30% chance of adding an additional planet in an orbit closer or farther away from the star. Half the time, an orbit slot is skipped. The 30% value comes from a NASA infographic, Planetary Systems by Number of Known Planets.

Each planet gets a random mass based on its type, and its radius can be computed from its mass.

That's the end of the algorithm! The result is a model of a star system that sort of, kind of, if you squint at it, vaguely lines up with what scientists know about the distribution of exoplanets among star systems.

Future work

There are a few facts I didn't account for in my program that would be simple to fix. I made no attempt to make planets in adjacent orbits have similar sizes, since I couldn't find precise explanations of how strong that correlation was. I also didn't try to build a model of planets any deeper than Kepler studies: I have no idea what planets are made of, or anything about moons around exoplanets. I didn't include asteroid belts, even though they are likely quite common according to /r/cosmology.

Since this program is mainly for science fiction worldbuilding, I think the lack of an orbital period calculator is my biggest missing feature. It's probably a simple calculation, but I haven't yet found a good resource for someone as lazy with math as I am. Hopefully someone taking a physics class can help me out with applying Kepler's 3rd Law. I made an attempt, but I got stuck on dealing with units and the Gaussian gravitational constant.

If you have a suggestion or notice a problem, please email me or open a GitHub issue on either the Stellar Dream or Keplverse project.

Bibliography

Stars

Exoplanets

Prior art

I'm an incurable hobby coder. The rate changes depending on what's happening at work, but it never stops completely. Even during 2018, when I left Hipmunk, joined Asana, and got married, I made:

The year before that was similar:

These are not outliers. The topics change, the technologies change, but the output is consistent. Some years it's been Python, some years it's been Swift, others it's been JavaScript, TypeScript, Nim, Go, OCaml, React, Vue, Cocoa, a web API, Postgres, or Brainf**k.

I used to throw up my hands once in a while and say, “It's all too much! I have to slow down!” But I don't slow down. So now, instead of trying to slow down, I'm trying to understand myself better and make decisions about what I work on more consciously.

My projects break down cleanly into the categories defined by the contents of my ~/dev directory:

apps/             # GUI apps for iOS and Mac
cli/              # Command line utilities
games/            # Games :-)
libraries/        # Reusable libraries
steveasleep/      # steveasleep.com
websites/         # non-steveasleep.com web sites

# other stuff:
3p/               # clones of 3rd party libraries
irskep_dotfiles/
old/
scratch/

The apps and games are ephemeral: I release them and move on. The libraries are benignly neglected, with patches getting merged quickly and releases going out sporadically. For example, I used to work on Literally Canvas a lot, but now all I do is merge pull requests and close the occasional GitHub issue.

Of all the subdirectories of apps/, games/, and libraries/, 75% have been shipped to “users” in some way as itch.io uploads, App Store apps, PyPI/NPM packages, or live web sites. Every single one has a bitchin' README.

Another way to look for patterns is to identify what's absent. There are no major contributions to third party libraries made in my spare time, though there are a few small ones. There are no Project Euler solutions, or any other “algorithms for fun” exercises. I don't use difficult-to-learn languages. And I haven't written any libraries that weren't an important building block for something else.

For most projects, I can identify the thought that made me start. Those thoughts fall consistently into two buckets. Either I'm doing a game jam with the intention of making something better than what I made for the last game jam; or I have what I think is a great idea that needs to exist, and I think I'll do a great job at making it happen.

The first bucket hasn't resulted in any stress or heartbreak. I make a bit of art and move on. The second one has all the problems. Here's why:

A Venn diagram with three circles: Things I think would be fun to make or ought to exist; Things I would personally use; and Thinks that feel like work to maintain. The intersections of 'things that feel like work to maintain' are labeled 'disappointments' and 'regrets'.

Some hobbyist programmers feel like they can never finish anything. I'm the opposite: I don't drop a project until it's “released” to some degree.

Too many times, I implement a set of neat ideas, but it doesn't feel like an accomplishment unless I commit to spending more energy than I have left. That's how Computer Words ended up. Literally Canvas was at least successful, but I still feel some ongoing guilt for neglecting it or even failing to rewrite it from scratch for the modern JavaScript ecosystem.

Here's how I want to think about starting these kinds of projects in the future:

A Venn diagram with three circles: Things I think would be fun to make or ought to exist; Things I would personally use; and Thinks that feel like work to maintain. Everything intersecting with "Things that feel like work to maintain" is labeled "Bad," things that would be fun to make are "good," and the rest of "things I would personally use" is "maybe."

Or, in “mission statement” form:

  1. I will do time-boxed game jams when I have time, I have energy, and I have an idea that motivates me.

  2. I will take on non-game hobby projects if they won't feel like work and might be useful to me personally.

Roguelike Celebration; Arkham City roguelike mockup

A week ago, I was at the Roguelike Celebration. Josh Ge did a great writeup of the whole thing with lots of photos, so I'll just say that I met a lot of great people, showed off Dr. Hallervorden, and came away inspired.

I fell sick the Tuesday after the conference, and wasn't really functional until Friday night, when I had enough energy to make this mockup capturing an idea I'd had at the conference:

Arkham City as a roguelike mockup

Having done that, I decided that 10PM on a Friday night was a great time to translate the REXPaint manual into HTML. REXPaint users, you're welcome.

Roguelike tools in Nim

On Saturday, I got the itch to try out the Nim programming language, so I skimmed the tutorial again and sat down to do some real coding in it. Naturally, my first program was a wrapper for the C[++] library BearLibTerminal, which I used to make Dr. Hallervorden. It was a neat experience to have my first program consist mostly of C bridge code.

With my BearLibTerminal integration finished, I moved on to a REXPaint .xp file parser. These are the two basic tools of game development for me: a way to display stuff, and a way to render ASCII “images” to that display.

REXPaint uses a straightforward binary format, except it mixes 32-bit integers with 8-bit integers, and the 8-bit parts throw off the alignment of the 32-bit parts. In safety-oriented languages like Nim and Swift (which I wrote a REXPaint file parser for earlier this year), this means it's necessary to unfasten your seat belt and do pointer arithmetic, even though the car beeps annoyingly at you the whole time.

Here's how you read a 32-bit integer from an arbitrary spot in a binary blob in Swift:

let data: Data = Data(contentsOf: URL(string: "file://foo"))
let pos = 13 // or whatever
let theNumber: Int32 = data.withUnsafeBytes({
    return Array(UnsafeBufferPointer<Int32>(start: pos, count: 1))[0]
})

Here it is in Nim:

let data: string = readFile("foo")
let pos = 13
let stringPointer = unsafeAddr(data[pos])
let theNumber: int32 = cast[ptr array[0..0, int32]](stringPointer)[0]

I packaged my code up into two libraries:

To use them, you simply nimble install and import them.

Generally, my impression of Nim is that it's a workmanlike language, but it also feels like somebody took Swift and beat it with jumper cables.

Literally Canvas JSification

For the past few months, there has been a community effort (be still my beating heart!) to translate Literally Canvas's CoffeeScript codebase to ES6. Today, that effort crept forward a little bit more: someone separated the “core” version of Literally Canvas into its own repository! This means we can significantly reduce the size of the main code base and drastically simplify the build process, removing barriers to new contributors.

That's great news for me, because I would love to move on from being involved with Literally Canvas.

Drawsana

That doesn't mean I'm done with open source libraries that help you make illustration programs! I announced on the Asana blog on Monday that we're releasing Drawsana, a “markup tool construction kit” for iOS in the same vein as literallycanvas-core.

Tangledeep

When I wasn't doing all that stuff, I was playing Tangledeep. The developers were showing off the upcoming Switch port at the Roguelike Celebration arcade, so I had an excuse to try it out again. It's progressed a lot since the last time I played a year or two ago!

Last month I found out my first web sites were still online, so I've been digging through the downloads to see what I was working on when I was 12. (Part 1, Part 2, Part 3)

The last few files I found in the admin console for my old web sites were 3D renderings and MIDI files. StrataVision 3D, the software used to make the original Myst, was released for free in the late '90s. I used it to make things like this sassy robot:

Sassy robot

I was also obsessed with spaceships and things that go fast. Here are a few of those:

Spaceship 1

Spaceship 2

Rocket car

I rendered all the MIDI files to AIFF using TiMidity and uploaded them to my Soundcloud page. Here's CoolSong1.mid:

One of the better ones is a song called Chase that I cleaned up a little in Logic Pro:

There's some not-too-bad dungeon crawly music in here, like this one, Escape:

You can torture yourself with the rest of them here.

Eventually, I left MIDI for GarageBand. I collected a lot of my GarageBand experiments in an EP on BandCamp. I still write a bit of music for my games.

Last week I found out my first web sites were still online, so I've been digging through the downloads to see what I was working on when I was 12. (Part 1, Part 2)

Although I spent most of my coding time making games, I also experimented with making “useful” programs. Since I was 12 years old and writing in various dialects of BASIC, my idea of “useful” a bit off the beaten path. I was dedicated, though, so in almost every case I wrote a very, very, very comprehensive README file so you would know exactly how to use my garbage software.

Visual MacStandardBasic

I made all of these in Visual MacStandardBasic, a tool reminiscent of modern Interface Builder with a late-'90s BASIC dialect spin. The source code is still available, which is pretty cool.

Typical button title for the time period

StephenEdit (December 2000)

Read Me

StephenEdit

Introduction

StephenEdit is a simple HTML editor. It was highly modified from an example that I got from www.squirrelsw.com. It could let you create an entire web site in less than an hour, but there are a few things that you need to know first.

What is HTML?

HTML stands for HyperText Markup Language. Don't even ask me what that is supposed to mean. This program will sort of write it for you.

Tutorial

First, do what the buttons say. Click on the one that says “Click me first thing”. It will give you the basic beginning HTML. In it it will have a tag that says <META NAME="KEYWORDS" CONTENT="Put keywords separated with commas here">. Where the message is, you put in keywords that will let your page pop up in a search by one of those words if you register your page with a search engine.

Commands

Add Link
This will add a link to your page.

Add Image
This will add an image to your page. <IMG SRC="toaster.gif"> name of image∆

Indent
This will indent the text after it.

Margin
This will add a margin about 2 cm wide.

Next Line
HTML doesn't skip to the next line when you do in an editor or word processor. These tags must be used to go to the nex line.

Table
If you want your page to be stationery instead of rearranging itself every time you resize the window, use these tags.

          <TABLE WIDTH=200 BORDER=2>Text for table here</TABLE>
Width of table in pixels∆         ∆Border width

Bold, Italic, and Underline Well duh, kind of obvious, isn't it?

Center
Use centered text

Font
Change the font

Horizontal line
Makes a line like the one below across your page


The “Text Window” This window has text sizes in it.

Looking at your web page

If you want to see what your web site will look like, drag it to the icon or alias of your web browser.(like Netscape, or Internet Explorere) When the icon of the browser goes dark, let go of the mouse. Your browser should open your web page as if it had been saved from the browser. Another way is to go into your browser and select “Open” from the File menu. If you want to save your page as a document that will open with your browser automatically, just select “Save As...” from the File menu.

Extra commands

StephenEdit also lets you add your own commands. Here are a few:
<FONT COLOR="your color here">Colored text here</FONT>
<FONT SIZE="whatever number size">Sized text here</FONT>

Tips and Tricks
Copy and Paste come in handy. If you are trying to learn HTML, just look at the commands.

Questions and comments go to wsj@mac.com

Notes

  • I used the glyph to point to things.
  • The email address at the bottom was my dad's.
  • 90% of this program was example code for Visual MacStandardBasic.

Output

FileReader (Feb 2001)

I used a GIF as an example

Read Me

File Reader ReadMe

What is File Reader?

File Reader is an application that reads the data forks of files. In other words, it can open just about any file kind of like SimpleText, except it's got a lot of extra hexadecimal junk. File Reader will open ALMOST ANYTHING with a data fork, as lonk as they aren't things with only numbers in the left column.(you can check if you have ResEdit.)

I AM EMAIL HUNGRY!!! Email me at: srjohnson@usa.com or visit my web site at: imaciscool.htmlplanet.com

What does this button do?

Open

This will give you an open dialog where you can choose which file to open.

Export to ttxt

“ttxt” is just the four-letter file code for SimpleText files. It saves the file (and whatever changes you have made to it) into SimpleText format and will put it in File Reader's Folder.

Replace Text/Add To Text

When new files are open, you can either have File Reader replace the current text or add to it.

Type/Creator

Type is the file type. Creator is the file signature of the program that created it.

Default is set to SimpleText text file, but if you know the codes for other applications, you can change it.

What Data Forks Reveal

A lot of saved source files, saved games, and compiled applications have a lot of interesting data. Sometimes it's very interesting, as in revealing codes and all that. This document contains guides to some of those things.

By the way, when I say,“Skip a few lines”, that means that I don't know what the stuff that fills those skipped lines is.

GM Source Files

2018 Steve: I was trying to document the data fork formats of GameMaker files.

Game version number
file code,GamD

Skip a few lines...

About Box Text

Skip a few lines...

“top-left button name”,“top-middle button name”,“top-right button name”,“bottom-left button name”,“bottom-middle button name”,“bottom-right button name”

Saved GM Game Files

Name of Creator Application

"RECENTCARD"  
Most_recent_card_#  
"BARVALUE"  
Bar_value  
"COUNTER"  
Counter_value  

After that come all of the game's variables in quotation marks and their values beneath them.

Somewhere in there is the text last put in the text field via the PRINT statement.

GM Games

App Name,four_letter_file_code,GamD

Skip a few lines...

"top-left button name","top-middle button name","top-right button name","bottom-left button name","bottom-middle button name","bottom-right button name"

This repeats for every card.

Visual MacStandardBasic Source

2018 Steve: I was trying to document the data fork format of Visual MacStandardBasic project files.

MacStandardBasic Form Version version_number

AppName=Executable Filename
Target=Library(example=Standard PPC Library)
MemMin=Minimum Memory Requirements
MemPref=Preferred Memory Requirements
FormCtr=?
ModuleCtr=?
Form=?

Visual MacStandardBasic Forms

MacStandardBasic Form Version MSB_version

This sets the form parameters.

FormBegin
      Name=Form_Name
      Title=Form_Title
      Left=distance_from_left_side_of_screen
      Top=distance_from_top
      Width=width
      Height=height
      Sub Proc.=Form Sub Procedure
      Visible=whether_visible(1/0)
      Style=window_style_number
      Font=default_font
      FontSize=default_font_size
      FontStyle=default_font_style_number
      Show Grid=whether_show_grid(1/0)
      Grid Snap=whether_grid_snap(1/0)
      Grid Size=grid_size
      Min. Width=minimum_control_width
      Max. Width=maximum_control_width
      Min. Height=minimum_control_height
      Max. Height=maximum_control_height
      AutoCenter=whether_auto_center(1/0)
      ForeColor=R G B
      BackColor=R G B
FormEnd

This part repeats for every control on a form.

ControlBegin=NameOfControl
      Name=control_name
      Text=control_text
      Left (x)=distance_from_left_side_of_form
      Top (y)=distance_from_left_side_of_form
      Width=control_width
      Height=control_height
      Sub Proc.=sub_name
      Visible=whether_visible(1/0)
      Value=control_value(1/0)
      Enabled=whether_enabled(1/0)
      Font=control_font
      FontSize=font_size
      FontStyle=font_style_number
      ScrollBar=whether_has_scrollbar(1/0)
      Read Only=whether_read_only(1/0)
      Opt20=?
      Frame=?
      ForeColor=R G B
      BackColor=R G B
ControlEnd

This is the startup procedure.

Start
    Dim A

    CreateTheMenus
    Form Form1

    A=0
    Do While A=0
    Loop
Finish

This repeats for every sub procedure.

Sub CreateTheMenus( )
    MenuApple
    MenuAddItem 1, "About Application", "", AboutTheApp
    MenuDesk
    MenuAdd 2, "File", None
    MenuAddItem 2, "Quit", "Q", QuitTheApp

EndSub

Notes/Bugs:

  • Sorry that it doesn't have a save feature, but I couldn't get it to work. Maybe in future version... But you could export it to the same type and creator and then copy the resources to it with ResEdit!
  • If you don't have ResEdit, get it from Apple's web site, developer.apple.com
  • Once you open something in File Reader, it isn't closed until you quit.
  • I don't know why, but sometimes, instead of opening a file, the text area is cleared.
  • Wondering what GamD is? It's GameMaker's file signature.
  • For some reason, exported files are changed to “TEXT” format instead of the specified one. This can be fixed in ResEdit. If you're going to do this, delete the “RMAP” resource.
  • File Reader can open SimpleText files and not have any extra junk! This means that SimpleText wouldn't look at it any differently if you changed any file's type to TEXT or ttro and its creator to TTXT. This program is just a quicker way.
  • I cheated big time in War of Shadows with this!

2018 Steve: War of Shadows was someone else's GameMaker game.

Daphctarcs (March 2001)

Documentation

Daphctarcs

Formerly known as The Third Attempt

By Stephen

imaciscool.htmlplanet.com srjohnson@usa.com

I'm sure you're wondering where I got the name. It is “Scratchpad” spelled backwards. Dahpctarecs is a drawing program with all the normal features of any drawing program. (Minus the paint can, unfortunately. It can't save, either.) Use the navigation bar at the bottom of the screen to browse through the chapters.

File

Quit

Sort of obvious, eh?

Makeovers

Everything in this menu will have an effect on the entire graphics window.

Erase All

This erases everything in the graphics window.

Invert All

Everything in the graphics window is inverted. (White to black, etc.)

Inverted Quilt

10-pixel-inverted-squares will be layed diagonally, filling up the whole window.

Options

Pen modes, text scrollbars on/off and paint fill on/off.

Text Scrollbars:

Textboxes can have scrollbars. You can turn them on and off.


Shape Fill:

The options just below this label can toggle filled-in shapes.

Pen Mode:

There are many pen modes, but these are the only ones useful to this program.

Normal

Normal, non-see-through pen mode.

Invert

When using the pen tool, the pen updates as fast as it can, so using this pen mode with the pen tool can appear scrambled, especially black and white. (See below.)

Illustration

With the line tool, there is no scrambling. Pen mode is not the same as fill mode and will not work with filled-in shapes!

Eraser

Erasers can be useful.

Tips

  • Dahpctarcs can't save, but press Command-Shift-4 and then drag a box around the area that you would like saved. The computer will make a snapshot noise, and the picture will be saved as “Picture 1 (or 2, 3, etc.)” in your hard drive folder.
  • To undo a full invert or inverted quilt, just invert all again!
  • Inverts can be used to get colors that are not available on the menu.
  • If you use any invert tool that fills the whole screen, doing it twice in a row will undo the invert affect.

Bugs

  • Sometimes, a color will revert back to white on its own. THIS IS NOT MY FAULT!!! 2018 Steve: It was my fault.

  • Whenever an area of the drawing window is covered up and then shown again, the entire process that you went through to draw your picture will be repeated as fast as the computer can draw. This can be taken as a bug or as a feature. THE COMPILER DID IT!!!

  • When you click on a new color or pen size, the active tool is deactivated.

  • If you hold down a tool button for too long, Daphctarcs draws a line or a dot to the right of the cursor, inside the drawing window.

Things that I really wish I could add, but can't

  • Saving

  • Copy/Pasting with pictures(works with text)

  • Non-flashy inverting pen

Stephen's Movie Viewer (April 2001)

Read Me

Stephen's Movie Viewer

Everything You Need to Know About Stephen's Movie Viewer

This is pretty easy. All you have to do is click “Play Movie” and you will be asked which movie. Type the name. Then click okay. If you press Return instead, the movie name box will go to the next line.

Now your movie will be played in a new window. To close it, just hit “Close Movie” to close your movie. If you try to open a new movie while one is already running, weird things will happen. I will try to include more than one movie running at the same time in later versions.

Note: Only movies that are in this application's folder may be played. I'd fix this if I could, but I can't. That's one reason why I wouldn't suggest using this player as your main one.

Gilderoy the Goldfish (April 2001)

Where are his fins?

Glideroy is a goldfish who talks when you mouse over him.

Phrases: * What's that slimy thing on your shoulders? Oh, it's your head. * What's that behind you? * Stop treating me like a minnow! * I'm too good to be on your computer. * I love you, you love me, we're a fishy family. * Oh no! I'ts a runaway toaster! Run! * If you appreciate fishing, I'm never talking to you again! * The meaning of the universe is pi-r-squared. * If you're happy and you know it clap your hands! * Go jump into the swirling black void that is your head. * Oh no! A virus! Somebody help me!

ASCII Machine (April 2001)

1.0 Read Me

ASCII Machine 1.0

By Stephen srjohnson@usa.com

This program just lets you look up characters’ ASCII values and values’ characters. To look up a character’s value, type it in the upper text box in the “Look Up Char” window. Then click “Look Up.” The character’s value wil appear in the lower box. The same applies for the other window.

Version 1.1 is going to have a cooler look and will be able to display a full ASCII chart. I have it ready, but I have to get permission from the author of ButtonMaker before I release it.

PageStarter (April 2001)

Read Me

PageStarter 1.0

By Stephen Johnson of iMac Island Software and Stratus Software

(Too many titles!)

PageStarter is a utility for people who already know HTML, but are tired of typing in the HTML to start off pages. This program will write the HTML for you, and all you have to do is enter in some text and click a few buttons!

Buttons/Fields:

Page Title: This fills in the <TITLE> tag.

Background: Select whether the background is a plain color or an image.

Color/Image Name: The name of the color or picture to be used as a background.

Alignment: Make your page left-aligned, centered, or right-aligned.

Page Heading: PageStarter will take the text from this field, put it in <H1> tags and stick it at the top of the page.

Opening Text: You can type some text to start off your page, but it will only accept 100 characters.

Go!: Click this button to have PageStarter display your HTML in the righthand box.

You can now use Cut, Copy, and Paste to edit the HTML in the field. I’ll try to have it be able to save to a file in future versions, but for now you’ll just have to copy the HTML in the field and paste into your HTML document.

FreeStuff

(These are some AppleScripts I made while playing around with Smile.)

FreeStuff v1.0

By Stephen

What is FreeStuff?

FreeStuff is the free alternative to DropStuff and StuffIt Expander. It supports drag-and-drop, but unfortunately, only drag-and-drop. You cannot open a file from within the application.

All you need to use FreeStuff is the “StuffIt Commands” scripting addition. Just make sure that “FreeStuff ƒ” is on the desktop, or the installation will not be successful. If the installer doesn’t work, or if you’re running Mac OSX, put “StuffIt Commands” wherever you put scripting additions. (In OS 8+, it’s the Scripting Additions folder in the System folder.)

What is included with this package?

FreeStuff v1.0

Just drag and drop files onto it, then choose your format. Right now, FreeStuff can’t do Zip, BZip, or UUEncode formats because I’m having problems with them. You can Stuff, BinHex, or MacBinary encode them. Stuffing decreases the file size, but judging from some tests I’ve run, I don’t think BinHex or MacBinary really decrease the file size, just prepare it for the internet.

ExPand v1.0

ExPand is just like StuffIt Expander, except it has a MUCH smaller file size(only 4k!).

DADDIM v1.0

DADDIM stands for Drag-And-Drop Disk Image Mounter. I haven’t been able to test it, because I have no way to make disk images and don’t have any on my drive! If you find any kind of error in this program, I need to know about it!

StuffIt Commands

by Leonard Rosenthol

StuffIt Commands is a Scripting Addition that allows you to have direct access to the StuffIt Engine and compress or decompress files in any format that StuffIt can.

Installer

The Installer will install StuffIt commands for you. (see second paragraph)

Contact

Email:
srjohnson@usa.com

Stratus Software
stratus.iwarp.com

iMac Island Software
members.home.net/sonpreach

Personal Site (Hasn’t been updated in forever, but there’s still some good stuff on it) imaciscool.htmlplanet.com

These programs were all made using Smile 1.8.0 with AppleScript 1.4 and compressed using FreeStuff v1.0.

FinderQuitter

Read Me

FinderQuitter 1.0

By Stephen

FinderQuitter is a little app that lets you quit the Finder to free up RAM. If you don’t know what I’m talking about, RAM (memory) is stored in blocks. If there is something in between two large blocks of memory and a game needs a lot of RAM, it won’t be able to have enough memory. That’s when you should use FinderQuitter will quit the Finder, which is usually what is in between blocks of memory.

Daphctarcs 2 (November 2001)

Can't even spell the name right now that I'm almost 30

Read Me

Daphctarcs 2.0

By Stephen

Tools

Pen
Comments:

Crazy Pen
Comments: It's the same as the pen, but it's got wacky colors.

Dots
Comments: Draws a trail of dots behind your cursor. The colorful one draws a colorful trail of dots behind your cursor.

Line
Comments:

Eraser
Comments:

Really Crazy Pen
Comments: The pen...but crazier and harder to describe. You'll have to try it.

Text
Comments: Drag a rectangle and a box of text appears that you can type in. The box will always be there. If you try to draw over it and click there again, the box will pop to the top. It will keep doing this until you select the “Clear All Text” menu. You can turn the scrollbar on and off using the option in the bar under the drawing window.

Beacon
Comments: You draw a circle (see the Circle tool) and Daphctarcs draws five circles around it, each one bigger than the last.

Square Beacon
Comments: This is just like the circular one except with rectangles.

Rectangle
Comments:

Circle
Comments: This is NOT the Ellipse tool! You click the mouse where you want the center of the circle, then drag outward to make it bigger. Don't mix this up with the Ellipse tool. If you do, you'll end up with your whole graphics window filled with one color because you've made your circle too big.

Ellipse
Comments:

Line Spray 1
Comments: Draws random lines coming out from your cursors. The colored one changes colors (like the Crazy Pen tool), but the black one doesn't.

Line Spray 2
Comments: Draws random lines, but they are all within 40 pixels of your cursor.

Options

The options are in a little bar just below the paint window.

Delay:
If you want the line sprays to go slower, or you just want to watch the Checkerboard and Invert effects go slower, than make this number larger.

Pen Size:
This will make the pen bigger. All lines and dots will be drawn thicker if this value is bigger.

Pattern #:
The Macintosh OS has many patterns stored in itself. I was too lazy to figure out which number goes with which pattern, but I do know that normal black is 1. Any pattern number below 1 is random every time Daphctarcs launches, probably because you're not supposed to do that.

Text Scrollbars:
As described earlier in this document, text boxes can have scrollbars or not. This option turns them on and off.

“Checkerboard” effect: It inverts every other square in the graphics area.

“Invert” effect: It inverts the whole graphics window. (Black to white, white to black, etc.)

Windows

Upper Left

These are all the tools.

Lower Left

This is the color selection bar. Click “Custom Color” to enter your own RGB value.

Upper Middle

The Paint window.

Lower Middle

This bar has the options and effects.

Tips and Tricks

  • If you collapse the Paint window and uncollapse it again, you will get a replay of everything you have done since you last selected the “Clear All” menu. This could either be a bug or a feature. I didn't put it there, but it's cool anyway.
  • If you create a new text box, the text will be the same color as the main color.
  • If you really want to save your work, you can take a screenshot by pressing Command-Shift-4 and dragging a rectangle around the area that you want saved. It will be saved directly to your hard drive as “Picture 1,” or any other number, depending on how many screenshots you have taken.

Bugs

  • After using the “colorful” tools, the main color will be reset to black. I put this in because before, the color would be random.
  • Don't overdo the replay. If you go on for too long, you will get a “Memory Allocation Error.”
  • When you use some tools for the first time, you will be prompted with a dialog box. I have no idea why it does this, and you should just click the Cancel button.

Contact

Stratus Software
http://stratus.iwarp.com

Email
bytebouncer@yahoo.com

iSketch (November 2001)

Background music

That's right, background music!!!

Read Me

iSketch v1.0

By Stephen

What the heck is iSketch?
iSketch is a virtual Etch-A-Sketch with way too many features.

Why would I want a virtual Etch-A-Sketch?
I don't know.

What does it do?
A lot.

How to Use iSketch

Controls
Of course, you could always use the simple little detail controls, but you can also use the arrow keys or the “Etch-A-Sketch” keys: A-S and :–“. A moves down, S moves up, : moves left, “ moves right.

Customization

Select “Preferences” from the File menu for these options:
Set Background/Line Color—You can change line color and even the background color (if there is no background image).

Pen Size—You can change the size of the line.

Pen Pattern—This should be a number from 0 to 38. I didn't feel like displaying all the patterns for you so you'll have to find out which ones are which. 0 is just a random collection of pixels every time you start up iSketch.

Pixels Per Move—You can make your line “jump” this many pixels when you move.

Pen Mode—Make you line into an eraser, normal pen, or super-cool invert tool.

The File Menu

Clear All—Erases the background image and drawing from the main window.
Clear Graphics—Erases your drawing from the main window.
Restart Music—Starts the background music over again. The music controller is in the Detail Controls window.
Preferences—Described above.

Other Stuff You Should Know

  • You can change the background music and image by replacing “Background Image” and “Background Music” with your own stuff.
  • By deleting, moving, or renaming the background image, it will not show up and you will have a blank white window. By doing this you can use the Background Color feature.
  • By deleting, moving, or renaming the background music, you will have eliminated it from iSketch.
  • If you want to try out the pen patterns, make your pen size something like 50.

Contact

Email: bytebouncer@yahoo.com
Diordna Software: http://stratus.iwarp.com

All together

That's everything up to about 2002, when I moved to a web host that didn't survive to the present day.

Looking at all these wacky programs together, I think it's hilarious how much effort I went into documenting everything. It's a compulsion I still have, and I'm glad it's a benefit in my professional life rather than a burden.

It might be fun to go back and remake some of these as modern Cocoa apps or static sites, but I'd rather keep moving forward. I'm grateful to have had the time, resources, and safety to play with this stuff at a time when I was still figuring out what I was interested in. Programming is still my hobby as well as my job for this time in my life, and while I might want to leave the coding for weekdays between nine and five at some point, for now I'm still going, as enthusiastically as ever.

I didn't learn to program in order to make games, but once I had learned a bit of BASIC, it's what I spent most of my time doing. I played around with a bunch of kid-oriented tools that didn't survive to the present day, copying and experimenting and just generally spending a ton of time glued to a screen trying to make things happen. Some of these tools were brought home on CDs by my dad: Learn to Program Basic, TrueBASIC, Visual MacStandardBasic. Others I found online, like the original Cocoa.

In this post I'll collect a few screenshots for your amusement and mine…mostly mine. :–) I had made a few text-based games earlier, but this is the first batch of things I ever uploaded to the internet.

First, a video to get you in the mood!

Learn to Program Basic

The Original Cocoa

Back when Cocoa was still NeXTSTEP, before the return of Steve Jobs, Apple had a small team working on a programming tool for children with the same name. I discovered it around 1999, when it had already been spun out into Stagecast Creator. Stagecast Creator was commercial by then, but the last development version from Apple was still available and free. So I picked it up and made some things. Here's the “IDE” with an example that came with it:

Screenshot of Cocoa DR3

My best Cocoa DR3 game was Super Dude, a simple puzzle game where you had to fire rainbow arrows to destroy obstacles.

Super Dude

I also made a bad Space Invaders clone…

Alien Invaders

a bad Breakout clone…

BrickBall

…and games where you had to abduct humans into your spaceship, and drop packages from Santa's sleigh into chimneys.

Beamer

Christmas Package Drop

The Original GameMaker

There have been a lot of programs called GameMaker. The one I learned was this one, an approximation of HyperCard tailored toward World Builder-style games. It had a simple interface, a simple programming language, and a relatively large community, so it was perfect for a kid just figuring things out.

Most of what I did was simple. Here's Save the Cute Little Doggy, a game in which you save your dog from aliens:

Save the Cute Little Doggy

And here's a “game” called Destroy the World:

Destroy the World

The biggest thing I made in GameMaker was CubeWars, in which you'd run around a maze of cubicles shooting managers with Nerf darts to avoid getting “fired.” I haven't been able to dig up the final build, but here's an unfinished version:

CubeWars

At some point, I tried making an “operating system” called FUNK OS – really a toy desktop environment. All I ever released was this “chat client” that would talk back to you with random phrases:

Chat Room


Those are all the games I thought were worth putting online around 2000-2001 when I was about 12. In part 3, I'll look at some non-games, and the overly detailed README files for those non-games!

This week, I was prompted by Glitch to take a look at my first web site on the Wayback Machine. I made a fun discovery: what I thought was my first web site was actually my second. And not only could I find the original on the Wayback Machine, but it's still being hosted, unchanged! Somehow, Freeservers has survived for over 17 years by putting banner ads on people's static sites. So imaciscool.htmlplanet.com, my very first web site, has been accessible all along. Look at this beauty:

Title: Welcome to the Wonderful World of Stephen. Background: tiled pieces of bread.

Discovering this forgotten piece of my awkward and enthusiastic past sent me down a rabbit hole of past-self discovery. I got most of my early games running in Basilisk II, a 68k Mac emulator, and successfully guessed the passwords to my old web hosts so I could download all the files. This post will focus on the sites themselves; later on I'll dig into the apps and games. I already did a bit of that on Twitter, but I think it's worth collecting it all in posts, just for my own sake.

My first web site: imaciscool.htmlplanet.com

Most of the home page is full of irrelevant updates. At the bottom is a list of links to other pages, and this animated toaster:

Toaster shooting toast into the air

The rest of the pages follow a familiar throw-everything-at-the-wall approach of a kid making their first web site:

  • Download links for games and other software I had made
  • Transcripts of “conversations” I had with MegaHAL, ELIZA, and HeX
  • Download links for simple plugins and cheats for Escape Velocity
  • Links to resources I used to learn to make things like web pages and games
  • A “coming soon” page
  • “AJs Page,” made by a friend

(In Autoarchaeology Part 2 I'll look at what I found on those download pages.)

Naturally, nothing on “Coming Soon” ever came…

Coming Soon

Here is where you see what is coming soon to this site. Duh.

Invade Bill's Base

This will probably be my best game yet. It will be an RPG where you are walking through Bill's base trying to find him so you can bring him back to your planet and Macs will rule the universe once more. The graphics will be better than in Save the CLD and Destroy the World. I warn you, I may never get around to finishing this.

Probably won't get around to these...

MacWarrior

If you've got Escape Velocity and you want to wipe out Windows, then this is the plugin for you. There is a system called Mac Territory surrounded by the Mac face. But I can't get the Mac Armor outfit to work, and the Windows part isn't made yet. I probably won't finish this one or the Animorphs plugin either.

Animorphs Plugin

Instead of Confeds and Rebels we have Andalites, Yeerks, Leerans, Skrit Na, Hork-Bajir, Taxxons, and Iskoort.

Please e-mail me with any questions, comments or suggestions you might have.

Some of the links are still active. Lissa Explains it All is still around. “AppleWorks” just links to apple.com. But internet4kids.com, kidsdomain.com, and javagameplay.com are domain-squatted now, and the rest of the links are just dead. All the references to “Cocoa” are for a game creation program that I'm pretty sure Apple bought just for the Cocoa name; it's unrelated to the modern Cocoa API. But I've used both, so I guess that means I've come full circle. :–)

My second web site: stratus.iwarp.com

At some point in 2001, I decided that imaciscool.htmlplanet.com was not a good enough URL for a totally legitimate purveyor of software like myself. So I started to parrot shareware culture more seriously, and moved to stratus.iwarp.com, home of “Stratus Software,” the extremely respectable establishment where you can download very good video games. (I had recently written a report for science class on clouds.) Within a couple of years I changed it to “Diordna Software” (see earlier post Usernames) and eventually gave it this amazing logo, made in a 3D program distributed for free with a MacAddict CD:

Diordna Software logo

At stratus.iwarp.com, you can see an even longer list of irrelevant updates, and a minor evolution of the original site content:

I rendered all the MIDI files to WAV and uploaded them to SoundCloud. I might give a couple of them a proper mix eventually. It would be a nice complement to Salvage Operation EP!

The rest

Over time I got a little better at making games, a little better at making web pages, and a little better at self-editing. The next iteration of the site, silvernetwork.net/diordna (2004), had a similar structure, but was a little less background-imagey. When someone in the little Mac indie game dev scene I was in started handing out subdomains on macintoshdevelopers.net, I started over with my new CSS skills and made diordna.macintoshdevelopers.net (2004-2007). When I finally bought my own domain, thebiggerbox.com (2007), I ran WordPress and made a custom theme. But “The Bigger Box” didn't last long; I picked up steveasleep.com at the end of 2008, and it slowly converged on what you see today at steveasleep.com.

Postscript

A couple days after I wrote this post, I found an even older version of the site using the site admin tool.

Screenshot of site; text is reproduced below

About My Site

This is not the true web site that I have prepared. I meant to upload one from home, but I couldn't figure out how to use the stupid FTP program. Oh, well. In my real one I have some downloads. Wait a while and maybe I'll get it up and running soon. List of my programs not available yet. Only this page (the about page) and the home page have been modified from the templates, so they will not be cool.

The History or Story Behind My Site

I was looking through a book order and came across a book called “Build Your Own Web Site”. I got it, read it, and made a site as I went along. But after that, I saw that it was stupid and even later I created another, better page. The one that I can't upload! So hopefully it will be here soon.

It has a list of all the “games” I had made that I thought were worth mentioning as of December 21st, 2000:

Programs by Me

Idiot Invaders Alien Invaders, the arcade classic, AC

BrickBall Brick Bash, AC

Super Dude The alien politicians from mars are trying to become president of the United States. You must stop them!

Race Alley Race to the top of the screen while avoiding obstacles. Requires a screen size of 1024 x 768

Bombs! Avoid the falling bombs or shoot them.

Beamer Beam up Earthlings from your spaceship.

Christmas Package Drop Drop presents down chimneys from Santa's sleigh.

Save the Cute Little Doggy In this game you do just as the name suggests!

Destroy the World In this game you destroy the world!

CityGunner Shoot the bombs before your city is destroyed or before you are destroyed.

Useful Programs

StephenEdit Make your own web pages with this HTML editor.

SuperCalc Calculator so great that my mom uses it instead of the system calculator!

The Third Attempt Drawing program. Enough said.

In the future, when my real site is up, all of these programs will be available for download for Mac users.

I'm writing a simple internet forum as a hobby project. Here are some of the questions I asked myself along the way that would apply to any web app with a server component. I had to build in some explicit answers to these questions based on the choices I made.

Which programming language?

Which version of Python?

Which Python package manager?

Which web framework?

How should I interact with the database?

Which Python ORM library should I use?

Should I develop against SQLite, or use a “real” database from the start?

When I query the database, should I use fancy ORM features, or more direct queries?

Should I store passwords, or only use OAuth?

How does secure password storage work these days?

How will I inevitably mess up password storage?

Should I do access control ad hoc, or learn the web framework's sophisticated API?

Should I do form validation ad hoc, or research the right library and learn it?

What the heck does REST actually mean? Do I care?

Should I write my API like a normal person, or add a fancy REST framework?

How much JavaScript will I use?

How will I get my Python web server to show my JavaScript?

Which JavaScript package manager?

Which JavaScript build system?

Should I use plain CSS, or SASS?

Which JavaScript framework will I use, if any?

Is this JavaScript library I want to use actually finished and maintained?

Do I care about Web Components?

What browser versions do I want to target?

What browser features can I use these days?

How can I get my Python web server to live-reload when my JavaScript changes?

How will my CSS and JavaScript build pipelines change when I switch from development to deployment?

Should I write my own wrapper around fetch, or use someone else's?

Should I render most of my markup on the server, or in the browser with JavaScript?

What the hell is hot module reloading? Can I disable it?

Should I worry about GDPR?

Am I doing anything now that's going to make deployment difficult later?

That's it for now. I feel like I'm about halfway through the final list.