Letting Go of Random

tutorial

In a recent post I shared some thoughts about art and included a few, somewhat tongue-in-cheek comments about the use of random number generation. Specifically,

Random is evil. Random is lazy. Random is OK when you’re starting a new piece. It’s OK when you have a formula and you’re searching for an interesting range of input parameters. But once you find something interesting, lock in those parameters and start focusing.

Interestingly, this was the part of the post that generated the most comments – only a few, but it was definitely the thing that several people latched onto. So I thought I’d expand my thoughts on it.

Now of course I don’t actually think random is evil. But it can be lazy, and it can definitely be boring. But yes, I use random all the time. In my blgo library I have a random module with all kinds of useful functionality that derives from Golang’s built-in pseudo random number generator (PRNG). In my bljs library, I had to build my own PRNG because one doesn’t exist in JavaScript. No, Math.random is not a useful PRNG since you cannot seed it.

So what, in my opinion, is a good use of random and what is not?

Random positions and sizes

Not a great use of random. One of the most boring. I once said something like, “If you can draw a shape, you’re an artist. Randomly draw 10,000 of the same shape, you’re a generative artist.” But honestly I think that’s the ultimate in boring, lazy generative art. Here’s 10,000 random points:

And 500 random squares with random sizes:

And 500 random lines:

I could go on. And I could generate 10,000 individual “art works” like any one of these with a few lines of code. Each would be different. But I wouldn’t call it art. Maybe in my very, very early days of experimenting with graphic code I thought this looked kind of cool. But seriously, I hope your skills and self-expectation rise above this level really quickly.

A Different Random?

So what might be better? Taking it slowly, let’s just try a different random. If you’re using Math.random or something similar that generates a random number, you’re probably getting a uniform distribution. This means that there is an equal probability that you’ll hit any given number in a given range. So it’s all pretty flat and boring. You could try a normal distribution. This favors numbers in the center of your given range, giving you something like this:

For this, you’ll either need a PRNG that has a normal distribution function, or you’ll need to come up with one yourself. Here’s a JavaScript example I found on StackOverflow that seems to do the trick:

// Standard Normal variate using Box-Muller transform.
function randn_bm() {
    var u = 0, v = 0;
    while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)
    while(v === 0) v = Math.random();
    return Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
}

Unlike a uniform distribution generators however, normal distribution generators will usually give you a range of numbers both negative and positive. Most of the generated numbers (around 99.7%) should fall into the range of -3.0 to +3.0. So you’ll have to do some transformations to get them into the range you actually want them.

Here’s an example that places 100 squares in a normally distributed random position, and uses a normal distribution for their sizes as well:

In this case, I took the absolute value of a generated number (which would generally wind up in the range of 0 to 3, weighted heavily towards 0) and multiplied it by 40 to get the size of each square. This skews the square sizes toward the smaller range. Of course, you could do different math to skew it to larger squares, or even towards medium sized squares, with smaller and larger ones occurring less frequently.

And some random lines with normal distribution:

If you find normal distribution interesting, you might want to look at one of the many other probability distributions.

We’re still in the realm of random, but even so, I think the results are much more interesting.

Noise

Another strategy that is more interesting than uniform random distribution is using noise. This usually means Perlin or Simplex noise (which I’ve discussed here in depth). Here, I chose 10,000 random points, but only accepted them if the noise value at that location was above 0 (in a range of -1 to +1):

Things get more interesting when you throw size into the mix. This one does the same thing, but draws squares. The size of each square is in proportion to the value of the noise at that point.

Other

Other things to try are various types of attractor formulas, chaos games, iterated function systems (IFS) and other fractal-related formulas. These can often be just as chaotic and unpredictable as PRNGs, but at the same time give some kind of underlying structure that is much more interesting than uniformly distributed random numbers.

Random Colors

I know next to nothing about color theory, and tend to do things in black and white as long as I can get away with it. Big fan of monochrome. But now and then I’m forced to use color under extreme duress. My first naive attempts to fly under the radar with color usually go along with a function I created called randomRGB, which does what you would guess.

Here’s the above normally distributed squares (a few more of them this time) with random RGB color values.

Well, it IS colorful. But it evokes absolutely nothing. From there, I usually move over to HSV colors, which at least sends me in the right direction. Here, I’m using a random hue from 0 to 60 and a saturation and value of 1.0:

At least this has something going for it. A kind of pixelated, MineCraftian fire maybe. Or, we could keep a single hue and vary the saturation:

Or a random value:

These at least have something going for them. If you want to go all out, you can start creating color palettes. Adobe Color Wheel is a great resource. Here’s a split complementary palette I generated:

To be fair, I’m still just picking one of the five values from the palette randomly, so it’s still pretty lame. I refer back to my first statement of this section. I think it would probably be better to use the reds in one area and the blues in another and the green as a highlight… or something.

Random is Not Evil

As you can see, in just about all of my “non-random” examples, I’m still using random to some degree. But I’m using it secondarily, piping it through something else, which gives it some structure. Once you have some kind of predictable structure, then you start tweaking values to move that structure a bit this way or that way and start adding some of your own taste and judgement into what you are creating. Then it starts to become more of your work, not just the work of a PRNG.

Often, I will have some formula that generates some kind of fractal or attractor. It can produces quite different images depending on what parameters you give it. But that means there can be millions or even billions of different potential images (infinite really, but many of them will be very similar). So I’ll create a loop that just makes a bunch of thumbnails with random parameters and generate a grid of images. On each thumbnail, I’ll print the parameters that created that image.Here’s a sample from last year:

click to see full size.

When I see one I like, I’ll hard code those parameters into the code and generate a larger version. Then I’ll tweak them one way or the other to create something that I really, really like. This use of random allows me to explore way more possibilities in a much shorter time than manually trying to find a good set of parameters.

Summary

I could probably go on about this subject a lot longer, but hopefully I’ve clarified my thoughts a little bit and maybe given you some ideas to try out.

Circle Inversion

tutorial

Circle inversion is a mathematical technique that holds a lot of opportunities for the creative coder.

Circle inversion, or circular inversion, or geometric inversion is a method of transforming a point within a circle to a new point outside the circle or vice-versa. By transforming multiple points, you can transform entire shapes, which become warped and curved in interesting ways, as if the original shape was reflected onto a curved surface. You can even do a circle inversion chaos game with multiple random circles to create interesting fractals. We’ll dive into that after we cover the basics.

The All Important Formula

So we start with a circle centered at x0, y0 with a radius of r. And a point x1, y1 within that circle. We want to invert that point to x2, y2, outside of the circle. That’s the point we need to find.

To describe it a different way, we can easily get the distance from the center of the circle to point x1, y1. We’ll call that dist0. We want to get the distance from the center to x2, y2, which we’ll call dist1.

The formula is simply r^2 / dist0. That’s if the first point is inside the circle. If you want to transform a point outside the circle to a point inside it … well, actually, it’s the exact same formula, which is nice and handy.

I’m not going to go deep into the geometry and math that you use to work out that formula, but it’s a good idea to work it out if you’re into that kind of stuff. There are plenty of pages that will show you exactly what’s going on here.

And the code that will make it happen:

function invert(cx, cy, r, x1, y1) {
  const dx = x1 - cx;
  const dy = y1 - cy;
  const dist0 = Math.sqrt(dx * dx + dy * dy);
  const dist1 = r * r / dist0;
  const angle = Math.atan2(y1 - cy, x1 - cx);

  return {
    x: cx + Math.cos(angle) * dist1,
    y: cy + Math.sin(angle) * dist1,
  }
}

This takes the center x, y and radius of a circle and the x, y of another point. It calculates the distance from the point to the center using standard Pythagorean theorem, and finds dist1 using the formula I just described. It then finds the angle from the circle center to the point and uses some trig to find the new point. And here it is in action:

You can move the circle’s center, change its radius, and move point p0. Point p1 will then move in accordance. Things to note:

  • As p0 gets close to the edge of the circle, p1 also moves in close to the edge of the circle.
  • As p0 gets close to the center of the circle, p1 moves out to infinity.
  • When p0 goes outside of the circle, p1 crosses over to the inside.

There’s a bit of an optimization you can make to this code to remove all the trig. I’ll just put it here and leave it to you to figure out how it’s working:

function invert(cx, cy, r, x1, y1) {
  const dx = x1 - cx;
  const dy = y1 - cy;
  const dist0 = Math.sqrt(dx * dx + dy * dy);
  const dist1 = r * r / dist0;
  const ratio = dist1 / dist0;

  return {
    x: cx + dx * ratio,
    y: cy + dy * ratio,
  };
}

In fact, you can go even one step further. Since we’re dividing by dist0 twice, we’re actually dividing by the square of dist0. So we can use that to get rid of the square root and both distances:

function invert(cx, cy, r, x1, y1) {
  const dx = x1 - cx;
  const dy = y1 - cy;
  const ratio = (r * r ) / (dx * dx + dy * dy);

  return {
    x: cx + dx * ratio,
    y: cy + dy * ratio,
  };
}

Shapes

Once you can invert a single point, you can start inverting entire paths of points, meaning you can invert shapes. To give you a feel for this, here’s a little app that lets you draw on the canvas with your mouse. It will draw both the exact path you are drawing, as well as the inverted path.

There’s no clear button, so you’ll have to refresh the whole page if you want to restart a drawing. If you want to spend some more time with it, you can open up the app in a fresh page.

I’m going to stop here for now. The core takeaway is that invert function. Play around with it and see what happens when you draw different shapes. I’ll come back later with that circle inversion chaos game concept I mentioned earlier. That’s where things get really fun.

Note on diagrams.

The drawings above were done on my Onyx Boox Note Air eInk tablet. I had talked about sketching in eInk in an earlier post. I was about to code up some graphics to show the principles, or maybe break out some kind of drawing application, then decided to give it a go just sketching on the tablet. I then exported the drawings and added them to the post. It’s also the first time I used color in sketching on eInk. Although the Note Air is not a color tablet, you can choose different colors to draw with. They render in black and white on the eInk screen, but when exported, they are indeed color drawings. Not super important to the post. It was just a fun little workflow that worked out pretty well from my viewpoint

Controls: MiniComps

Graphics: BLJS

Support this work

Source for the final piece.

BIT-101 in 2021

misc

I don’t always to a year in review post, but I like to do them when I remember to do so. Looking back over 2021, I’m surprised by how much I did and how much I posted here. Things really got quiet during the last few months, so I forgot how much stuff I cranked out earlier.

Some highlights:

  • 75 blog posts this year! Whoa. Most in a LONG time. And more views on this blog than in well over ten years (thanks HackerNews!)
  • I did a fair number of tutorials on math, graphics and creative coding techniques.
  • I finally created a solid version of MinimalComps for the web! Renamed Minicomps (https://minicomps.org/).
  • I did a bunch of general visual, interactive experiments, even some interactive audio generation stuff.
  • I participated in 7 days of code in July.
  • I created an animated gif every day in August for #awegif2021
  • I bought a Mac. And liked it. But Linux is still my personal daily driver.
  • I did a deep dive into Perlin, Simplex, and Curl noise, which was pretty interesting for me and spurred a lot of conversation elsewhere. https://www.bit-101.com/blog/2021/07/the-noise-series/.
  • I broke down and experimented with NFTs.
  • I did a deep dive into gif and video making tools, several posts worth of tips and tricks.
  • I started a mailing list.
  • I celebrated 20 years of BIT-101!

Sometimes I get a bit down on myself, thinking I’m not doing anything interesting. But when I list it all out, it looks pretty impressive. There was quite a bit going on in my personal and work life the last few months, so things toned down recently. Nothing particularly bad, just stuff pulling my attention away and leaving me with not much energy for writing either code or much else at the end of the day.

I’m hoping to get back into the swing of things in the coming year though. I think I’ve inspired myself to write more after taking a look at the above.

One thing I definitely feel the need to follow up on is the whole subject of NFTs. I’m still very conflicted over them. I created more than a handful and was surprised how much money I was able to earn from the ones I created. Then I took a little break from it for a few weeks and came back and did some more. Then took a more permanent break. I still don’t feel very good about the whole thing right now. I still don’t understand what people are paying for and what they think they are getting. There’s a whole lot of people cranking out a whole lot of low quality, low cost NFTs. And there are established, well known artists making fewer pieces and getting very high prices for them. And there is everything in between. The system as it stands seems like a fad right now and it feels like it will all come crashing down before very long. On the other hand, I believe there is something there that could evolve into a very stable and useful system of rewarding artists for their work. I’ll keep watching the space. I expect a lot of change in it in the coming year. I’m intrigued where it might go, but I’m not 100% comfortable participating in it as things stand. Which sucks, because I like money as much as the next person, and it’s a relatively easy way to make money doing what I like to do. I’m not drawing a line in the sand, but for now I’d rather just code cool pieces and let people look at them without “collecting” them.

Thoughts on Art

misc

I’ve been thinking a lot about “art” recently. Specifically, what people call “generative art”, “algorithmic art”, “code art”, “math art”, etc. Here are some random thoughts.

Message

I’ve never been one to try to communicate some message through the things I create. I really only try to create things that are visually interesting. I can get very excited about the way a piece looks and I just want to show others and hope that they get a taste of that excitement too. Sometimes things I create can evoke various emotions – they can look ominous, dark, scary, energetic, fun, etc. I often find that when I feel a certain way about a piece, others tend to experience that same feeling. I guess you could call that a message if you want. But I don’t know that I’ve ever sat down to create some digital art with the thought, “I feel like creating something dark and ominous today,” or intentionally tried to create any emotion before I started.

Discovery

For me, creating art with code is way more about discovery. I play around with some technique, or combine one technique with another dis-related technique just to see what happens. Then I see something interesting and I zoom in on it. Sometimes this means literally zooming into some detail in an image. More often it means focusing on some combination of parameters that have created a particular result. There’s a promise of something even more interesting there. I start tweaking numbers to see if I can bring out more of that something. I increment a parameter a few times and that thing I saw goes away. So I decrement it and maybe that thing becomes bigger, or more clear, or more detailed. It’s more like mining than creating.

Math

I love math, or “maths” if that’s how you think of it. I love finding some new interesting formula. I subscribe to recreational math blogs, YouTube channels, Twitter feeds. I go to the math section of bookstores and libraries. I scroll through Wolfram and Wikipedia looking for new ideas. Old copies of Scientific American, Omni, Quantum and other math and science magazines. I get sucked in by anything that has a graph or an interesting diagram. It’s got to be visual. For me, math is the ultimate creative tool. It’s the canvas, it’s the paint, it’s the brush. Really, it’s the artist. All the images are already there. I’m just carefully extracting a few of them out of the sea of numbers. If I have to have a message in my art it’s “Look how amazing math is.”

Random

Random is evil. Random is lazy. Random is OK when you’re starting a new piece. It’s OK when you have a formula and you’re searching for an interesting range of input parameters. But once you find something interesting, lock in those parameters and start focusing. My code framework is set up to allow me to easily create animations by changing parameters over each of many frames. Sometimes I’ll generate several hundred frames all with random parameters. I’ll print the parameters right on the piece. Then I’ll sift through the frames one by one and find those that have something I like. I’ll grab those parameters and hard code them and start tweaking them as described above. But random should come at the start, not at the end. I never continue to use random parameters to generate a finished piece. I’m totally lying. I do it often enough. But I feel lazy when I do it.

Technology

People often ask me what technology I used to create my images. I think they expect that I’m using some app or framework that has all these kinds of image generation tools built into it. I don’t. I write mostly in Go (Golang). I have some custom Go bindings for the C library, cairographics. Cairo is a pretty powerful drawing API, but that’s all it is – it draws lines and arcs curves and rectangles, sets colors, etc. Nearly identical in most important ways to the HTML Canvas drawing API. That’s all I need – those 2D drawing primitives. I have a framework of my own that I’ve built up over many years that does all the complex fancy stuff. But it’s all based on those 2d primitive drawing actions.

Color

I love monochrome. Black and white. I love to be able to bring out form and emotion just by the relative brightness of black and white pixels. Sometimes I’ll experiment with color. I have a random RGB function that makes me feel guilty when I use it. I like using HSV colors better. You can create nice gradients. You can keep one hue and vary the saturation or value. You can create a range of colors with a similar hue. I’d like to take a deep dive into learning color theory some time. But I’m very comfortable with black and white.

Combination

One of my best techniques is a meta-technique. I mentioned it above. Every time I learn some new technique or formula, I do a mash up with that and some other technique I already know. I know I’ve talked about that in other posts in more detail. It’s the best way to discover something that has a chance of the elusive “nobody has done this before”.

Dislikes

  • AI/ML/GAN stuff. It just does nothing for me. To me it just looks like Photoshop filters on steroids. I know there’s a lot of impressive stuff going on behind the scenes, but the result is not interesting to me.
  • Glitch art. I think this is due to the fact that I grew up in the 60s and 70s and 80s. Everything was glitchy. I didn’t like it then and I don’t like it now. I like that things are not glitchy now. I like that I turn on the TV and see a clear picture without bending the coat hanger stuck in the back into some new shape.
  • 3D. By this I mean slick, realistic 3D stuff done in professional 3D rendering packages. I like occasionally hand-coding lofi 3D stuff.
  • Shaders. In either 2D or 3D. I probably should like shaders. You can do some impressive math-based stuff with them. I’ve used them. I even written about them and touched on them in some videos, but they never stuck as something I wanted to continue working with.

OK, now here’s where you’re going to say, “You should check out _____ (AI/Glitch/3D/Shader thing).” And I’ll say, “Thanks, that looks cool. Maybe I’ll check it out.” But I never will. But really, thanks! I appreciate your enthusiasm. I’m not saying any of these things are inherently bad. Just sharing my tastes.

My Music Appreciation Project

misc

Not a big fan of music streaming.

I have a good size, custom curated, very well organized library of music on my hard drive. It’s taken me years to create, it’s all backed up. I have a subsonic server behind Wireguard so I can listen to it from my phone or other devices, and it’s all also synced to my Sony Walkman NW-A55 hi-res digital audio player that I use with my Ikko OH1 IEMs.

I’m really very satisfied with this setup.

But still, I find myself not being able to decide what to listen to way too often. The paradox of choice. Fairly often I’ll just throw the whole thing, or maybe some specific genre on shuffle, and that’s pretty good. But I also like listening to albums. When I’m just choosing an album myself, I’ll gravitate to the same few dozen or so artists. Other stuff might go months or years without being listened to.

I think my devices and software let me shuffle albums, but I wanted to create a long range plan to get to all of it over time. Here’s what I did:

  1. Printed out a list of all artists. Literally just went to the terminal and did an ls in my music folder, directing it to a file.
  2. Pulled that file into a Google spreadsheet, one artist per line.
  3. Shuffled them.

Now I’m just working down the list. I just grab the next artist in the list and choose an album and start playing.

If I’m not feeling the vibe with that particular artist or album, I just move on. But I try to listen to at least one or two songs anyway.

When I move on to the next artist, I mark the previous one as done.

Here’s what’s on my playlist for today:

  • Ministry
  • Van Morrison
  • Harry Nillson
  • The White Stripes
  • John Lee Hooker

I’ve really been enjoying this strategy. Been listening to music that I haven’t in a long time, not just the same albums over and over. And it’s all content that I’ve chosen to put in my library, so it’s all artists I generally like to some degree. And sometimes get totally different genres up against each other, which is fun.

This is going to take months to go through, but it’s been keeping things fresh.

Strange Attractor Flow Fields

tutorial

One of my tricks when coming up with new generative ideas is to take two (or three) completely unrelated techniques and combine them. I even created an app once where I had a long list of concepts and it would randomly combine them and come up with things like, “circle packing with diffuse limited aggregation”. (I just made that up and I’m not sure how it would work, but it’s intriguing, isn’t it?) I can’t say that the app ever sparked any projects that I ended up using, but I’ll probably go back to it some time and see if I can make it better.

This post was one of those successful combinations that evolved on its own and produced something that I have never seen anyone explore before. It produces a visualization of the forces behind a strange attractor that I find fascinating and beautiful. It feels like putting on special glasses that let you see the invisible workings of the universe.

Sketching in eInk

misc

In my last post I talked about my newest eInk tablets from Onyx Boox. Beyond reading ebooks and saving articles, the Note Air is a fantastic sketching tool. The Wacom layer and stylus is one of the big features that led me to look beyond Kindle devices. It was nice on the 7.8″ Nova Pro, but on the 10.3″ Note Air, I’ve really fallen in love with the drawing feature.

Preliminary Pen Points

The Note Air comes with a stylus that attaches to the side of the device via a magnet. All I can say is that it makes a good backup stylus.

Issues with the stylus:

  1. The magnet is not strong enough to trust, so you wind up having to figure out your own way to keeping track of the stylus. Because it WILL fall off and get lost.
  2. The stylus does not have an eraser feature. some styluses put an eraser function in the top of the stylus, where you’d find an eraser on a regular pencil. Others add a button that switches the stylus into erase mode. The default Note Air stylus does neither. So when you want to erase something, you have to choose the eraser tool from the tool bar, erase, then re-choose the drawing tool you were drawing with.

I wound up getting a Wacom One stylus.

It looks nice, feels nice, has an eraser button, and doesn’t break the bank.

I read a lot of reviews about the Remarkable 2 Marker stylus that is made for the Remarkable 2 eInk tablet. It’s apparently really good, but pretty pricey. It does work on the Boox devices. Maybe I’ll spring for one some day, but I’m happy with the Wacom One for now. One of the pros of the Remarkable stylus is that the tips are made of a different substance than a lot of other styluses, which gives it a good amount of drag and makes it feel like a regular pen, rather than sliding a piece of plastic across glass. Remarkable sells replacement tips, which fit the Wacom One, so I got a set of them, and I can attest it does add to the experience.

To hold the pen when I’m not using it, I got some of these Ringke pen holders.

These just stick to the cover and have an elastic loop. Been working out perfectly.

Seriously Sketching Stuff

Now onto the sketching functionality of the device. The built-in notes app is where you do the sketching and it’s one of the main apps on the Note Air. This is what it looks like:

You can name your notes, organize them in folders, rename them, view them as a list or thumbnails, etc.

Notes can have multiple pages. You can see above the Notepad1(1) has a little “6” in the corner. This means that this note has 6 pages. While in the note, you can choose to see an overview of all of the pages.

You can delete, add, rearrange, export, and share pages here.

There are multiple sketch tools you can use:

I most often just use the default pen tool. All of the tools allow you to adjust their width. All but the ballpoint pen and marker are also pressure sensitive. You can change colors – various shades of gray mostly, but also a few real colors. Though you won’t be able to see these on a black and white eInk device until you export the note.

There’s all the usual other tooling, if all a bit basic. A few basic shapes, several different kinds of erasers, lasso tool for selecting and moving parts of your sketch, zoom, text, handwriting recognition.

It even has layers, which is pretty damn cool.

You can add layers, rearrange them, hide them, delete them. The bottom layer is a background template. It can be blank, our you can set it to just about anything. Above you can see a basic grid template. There are a bunch built in:

Three pages worth, for drawing, writing, penmanship, accounting, whatever. There are also ones you can download from the Boox cloud:

And you can add your own, just by putting the into the right folder on the device. Just do an internet search for PDF graph paper or pdf templates and you’ll find all kinds of useful stuff. Or you can just create any PDF you want and put it in there. Here are some I added:

You can turn the template’s visibility on and off from the layers tool, which is really quite nice.

On for drawing:

And then off:

I’m constantly using this to figure out stuff that I want to code. I have pages and pages of sketches like this. Most are just brainstorming or figuring out the math about something.

The touch layer of the device is totally separate from the Wacom drawing layer, so there’s no need to worry about putting your hand on the device as you’re drawing. When you want a new page in a particular sketch, just swipe with your finger, right to left, and you’re on a new page. Go back and forth to existing pages by swiping right or left.

You can set up notes to automatically sync to the cloud, using Onyx’s own cloud sync, Youdao (a Chinese service), Evernote, Dropbox and/or OneNote. Synced notes are available in the cloud as PDFs, but you can also export them as PNGs.

I always have the Note Air nearby when I’m doing some creative coding, so it’s easy to just grab it and work out some idea. I just create note after note, page after page. Space is no worry. They’re backed up and easily available on Dropbox, not floating around on pieced of dead tree pulp.

While the sketch/notes app is probably not something you’re going to create amazing art with, it’s super useful for sketching and notes. I also use it to take notes in meetings and interviews. Very nice for that.

I have to give a warning though. While the built-in notes app is super responsive and a joy to use, the Wacom layer is not optimized for third party drawing, sketching or note-taking applications on the web or Android apps. It will be a bad experience using apps like that. It would be nice if that got fixed, but not holding my breath. I did see where someone has put together their own libraries that make the experience much better in third party apps, but I have not tried it myself.

[Update 01/01/22]

The latest firmware for the Boox tablets has apparently improved the third party app sketching functionality. At least for popular apps like Evernote. I’ve not tried it out myself. Pretty happy with the internal note app.

20 years

misc

TWENTY

DAMN

YEARS

September 11, 2001 is quite a memorable day for the obvious reasons. But for me, it holds an additional significance. Because on September 10, 2001 I registered the domain bit-101.com and on the morning of September 11 the first version of the site went live, only to be massively overshadowed by other events just a couple of hours later.

Initially the site was a single page with a Flash application containing a calendar that linked to various interactive experimental pieces. I’d started doing the experiments in late August, so I was able to launch BIT-101 with fourteen experiments. It ultimately grew to over 600.

This was the previous site that was retired on 9/11/01, also fully Flash:

That KP logo came in with a really cool animation and there was a funky 5-second free music loop that I snagged off of FlashKit, which got really annoying after roughly 10 seconds.

A later version of BIT-101:

Yeah, I liked the Papyrus font back then. Also… what are lower case letters? All those sections were draggable and closable windows. Peak 2002 “web design”.

BIT-101 lasted in this general form, with various interface changes up until the end of 2005. There were many months I posted something new every day. Towards the end, it got a bit slower.

While all this was going on, near the end of 2003, I started the first BIT-101 blog. I say the “first” one because in late 2017 I did a blog reboot, to the new blog that you are reading here. The old one had a good 14 year run though. And is immortalized here: http://www.bit-101.com/old/. Amazing to think that the blog reboot is now almost 4 years old, which is about as long as the first old Flash site lasted. Time keeps moving faster.

Changes

Things sure have changed since that first site 20 years ago. Back then it was all about Flash for me. I was not working full time as a programmer, but I had a steady flow of side jobs doing Flash work. I’d written a few Flash tutorials on the KP Web Design site and those had done really well. In fact it led me to contributing to my first book, Flash Math Creativity.

This led to many more books, mostly with Friends of ED and Apress, but also OReilly.

In 2003 I was invited to FlashForward in NYC where I was a finalist for their Flash awards ceremony in the Experimental category. I remember being so starstruck meeting all my Flash heroes there – many of whom I consider good friends to this day. As it turns out I won the award, which was amazing. I went back to my day job the following Monday. I was working in the estimation department of a mechanical contracting company. I hated that job. I was thinking, “Why am I here? I am a published author and I just won an award for Flash. That’s what I should be doing.” Amazingly, when the boss came in, he called me into his office. Apparently I had screwed up delivering an estimate the previous week and he fired me. What I remember most clearly about that conversation was trying not to smile as I realized I was free. The next day I went to talk to a company in Boston that I had been talking to about doing some Flash work on the side and said I was ready to go full time. They hired me and thus began my official career as a “professional” developer.

Of course, Flash officially died earlier this year. But I had really moved on from it in early 2011, when I did my “31 days of JavaScript” series on the old blog. The inaugural post here: http://www.bit-101.com/old/?p=3030. This series got a lot of attention and by the end of it I had personally switched over to doing all my personal creative coding using HTML5 Canvas.

In 2018 I started looking for some other platforms for creative code. I discovered Cairo Graphics, a C library that is pretty similar to the canvas api in JavaScript. It has bindings for many other languages. I tried it with Python and liked it, but wanted to learn a new language. I’d been interested in both Rust and Golang. I converted my JS library over to Rust and got it working well. But Rust is a pretty exacting language. I found it hard to work with for something like creative coding. I spent more time trying to satisfy the compiler than I did writing any interesting code. So I tried Go and that really hit the spot. It’s been the mainstay language for my creative work for the last three and a half years, though I still keep active in JavaScript as well.

Work-wise, starting from first job in 2003:

  • Exit 33 / Xplana Learning
  • Flash Composer
  • Brightcove
  • Infrared5
  • Disney
  • Dreamsocket
  • Notarize

I started all of those jobs as a Senior Developer/Engineer/Programmer. At Notarize I am now an Engineer Manager, managing 10 other engineers and not really doing any hands-on coding myself. That’s fine with me. It’s a totally new challenge and I’m enjoying it, especially seeing and helping new grads out of school growing into amazing engineers. Interestingly, only two of those jobs required a formal interview. The rest of them were almost straight to offer from people I had gotten to know well through the Flash community.

Summary

It’s been an amazing 20 years. I had no idea where this was going when I randomly came up with “bit-101” and registered the name back then. But it’s worked out pretty damn well. What about the next 20 years? If I’m still breathing and able to type coherent code, I’ll be cranking out something for sure.