javascript

Hexadecimal Clocks in Javascript (to be updated)

  • Posted on: 10 January 2015

Hexadecimal clocks are pretty cool. They just take the hours, minutes and seconds of the current time, and concantenate them to form a hexadecimal color. We can do whatever we want with the color, I suppose. For example, if the time were 11:14:45, we would display the color #111445.

This is the 'classic' hexadecimal clock, which was described above. I have reproduced it here:
Original Hex. Clock

Here's a slightly different mapping. In this mapping, we use a 12-hour/am/pm clock, and use the hexadecimal equiavlent of the hours for the red digts in the hex color. For example, 11:14:45 am maps to #0B1445. Here it is:
Hex. Clock - Hex Hours Representation.

Alpha-Surf, my half-baked Google Chrome Extension

  • Posted on: 9 December 2014

A while ago, I hurt my wrist in a way that made it painful to use the mouse. This obviously put quite a hindrance on my ability to effectively surf the internets.

I was able to get around on most websites pretty easily with keyboard shortcuts, but I found that tabbing through links was still pretty tedious and time consuming.

I was using Google Chrome at the time, so I decided to try to write up an extension to help me 'tabigate' through links on a page more effectively. The extension would let me tab through links based on the first letter of the text in the link. For example, if you wanted to get to this link:

Blog Home

You could hold down the 'X' key to activate the letter-based tabbing, and then press the 'b' key. Only links that began with 'B' would be tabbed through. Maybe 'X' is a poor choice for activation, but most of the special keys have functions I didn't want to hijack.

Javascript Tutorial: Reading Binary Files using Typed Arrays

  • Posted on: 16 November 2014

In my last post, I briefly mentioned that building my STL file viewer required that I learn a thing or two about binary file reading in Javascript. In this post, I'm going to recreate a stripped-down version of the reader, and focus on the binary I/O. Well, really just I.

Getting the File From the Client Filesystem

The STL reader is entirely client side. It uses Javascript's Filereader object to get the file from the user's filesystem, and then uses three.js for rendering. Now, we'll cover getting the file's contents from the filesystem to the browser.

First, we need an html input of type file:

THREE.js-based Online STL File Viewer

  • Posted on: 28 October 2014

After the tinkerings of my last post, I started thinking about how I could read a binary STL file in javascript, and display the model in the browser. Yeah, yeah. GitHub has a browser-based STL viewer, and GrabCAD has something similar, but I wanted to see what would be involved.

I started tinkering with things like ArrayBuffers, Float32Arrays, and related built-in objects related to reading binary and/or interpreting binary data. I'll probably expand on these objects in a later post -- they're very interesting!

I also had very little experience with graphics programming, let alone THREE.js. It turned out THREE.js couldn't have been simpler to learn. A hearty stick-tap to those folks for creating such a useful piece of javascript.

Not Asteroids! (The HTML5 Game) Pre-Alpha Release

  • Posted on: 1 March 2014

Well, here is a very early (but semi-playable) version of the game I'm working on, Not Asteroids! Go ahead and give it a try.

If you're a fellow programmer, do yourself a favor, and don't look at the source. It's a total mess. I just wanted to get something out there because I find if I focus on maintaining the code as I write it, I'm less likely to actually finish anything (I'd like to clean it up at some point, though). Oh, and I'm also still not actually sure how to write javascript well.

Maybe I'll create another YouTube video later on, but for now, here are some screen shots:




HTML5 / Javascript Game / Game Engine Attempt

  • Posted on: 24 February 2014

I've decided it's time to take a shot at creating a video game.

I'm trying to write a cartoony Asteroid-clone using Javascript and HTML5. I chose HTML5 becuause I really enjoy the 'nativeness' of it, and it seems to be moving faster than Flash, although it still might not be the defacto favorite.

I'm trying to maintain some kind of architecture as far as what code belongs to the game engine, and what code is specific to this game. Why didn't I use one of the many availble game engines/frameworks? Good question.

Drawing the Mandelbrot Set With the HTML5 Canvas Element

  • Posted on: 2 February 2014

You've seen the Mandelbrot Set, even if you didn't know that's what you were looking at. Representing the set visually creates a pleasing fractal, but there's a good bit of mathematics just below the surface.

The idea is relatively simple. The 2-dimensional space shown in an image of the Mandelbrot set represents the complex plane. At each point on the complex plane, the following sequence is computed for each point c in the complex plane:

z(n+1) = z(n)*z(n) + c

If the sequence doesn't go to infinity, than that value c is part of the Mandelbrot Set. These values (values in the set) are traditionally colored black in an image of the set.

For values of c where the sequence diverges, a color can be used to represent how quickly the sequence diverges. In other words, if it takes 3 iterations of the sequence to to get to infinity, we see a different color than if it took 100 iterations.