Kevin Reid's blog

Latest Posts

 

new
Name
Kevin Reid
Website
My Website

View

Navigation

April 7th, 2013

Yesterday I completely rewrote my resource embedding test to cover more cases (especially ones new in HTML5) and be more usable. In the likely event you're not familiar with it, it's a HTML document which embeds many types of resources (images, audio, other HTML, etc.) using all of the possible containers (<img>, <iframe>, etc.) to see how browsers react.

The results can be quite interesting; for example, with the current expansion I discovered that JavaScript embedded in a SVG document will not execute if embedded using <img>, but will with <object>. (In hindsight, this makes perfect sense given the fundamental design principle of Web security, namely “don't add anything which would obviously make existing sites' security assumptions false”, the assumption here being that it's safe to allow <img>s as user-generated content.)

Specific new features:

  • Audio, HTML, and plain text content. (Unfortunately, some combinations cause the audio to autoplay; I tried to make it quiet and plain to make up for that.)
  • <audio> and <video> containers.
  • Scripts inside HTML and SVG content, which also attempt to modify window.top.
  • Fixed-scrolling headers so you don't need a large window to make sense of the large table.

Let me know if you've thought of any additional useful cases.

Tags: ,

September 7th, 2012

My GLToyJS project now has a live instance so you can play with it without setting up your own server. Caveats: • I don't promise it will remain at this URL or that the parameter format won't change. • There is an automatic 5-minute-interval change to a new random effect which cannot be disabled (but you can undo it by going back). • It doesn't tell you if your browser doesn't have WebGL, it just stops (gray screen).

June 25th, 2012

The draft-standard Gamepad API allows JavaScript in the browser to obtain input from connected gamepad/joystick devices. This is of course useful for games, so I have worked on adding support for it to Cubes.

This (about) is the only Gamepad API demo that I found that worked with arbitrary gamepads (or rather, the junk one I had around) rather than ignoring or crashing on anything that wasn't a known-to-it devices such as a PS3 or Xbox controller. (It's part of a game framework called Construct 2, but I haven't investigated that further.) It was critical to my early setup in making sure that I had a compatible gamepad and browser configuration.

(There's a reason for libraries having information about specific devices — the Gamepad API just gives you a list of inputs and doesn't tell you what the buttons should be called in the user interface — and these days you're almost expected to have pictures of the buttons, too. But there's no reason not to have a fallback, too. Incidentally, the USB HID protocol which most gamepads use is capable of including some information about the layout/function of buttons, but this information is often incorrect and the Gamepad API does not expose it.)

In order to integrate gamepad support into Chrome, I used Toji's Game Shim library, a very nice lightweight library which only adapts browser-provided interfaces to the current draft standards so that you can use the Gamepad API, as well as requestAnimationFrame, fullscreen, and pointer lock, without making your code full of conditionals or browser-specific prefixes.

March 9th, 2012

Cubes update

Share
new

Some new features in Cubes:

  • An automated test suite. It’s hardly complete coverage, but at least it exists and so can grow. (I ended up going with Jasmine for in-browser testing. I’m not a big fan of the Englishy syntax, but it does the job reasonably well and has niceties like rerunning individual tests and adequate support for asynchronous tests.)
  • Precise collision against rotated blocks: you can now walk up the slope of those funky pyramid blocks, and so on. Stairs, anyone?
  • Performance monitoring widget with fancy graphs. (If you click the “[-]” to hide it, then it won’t waste CPU time updating itself, either.)

February 22nd, 2012

.innerText and .textContent

Share
new

Today I learned that there is a standard-DOM alternative to the convenient IEism element.innerText (a close relative of element.innerHTML): element.textContent.

It is slightly different, according to MDN: .innerText returns the visible text (omitting scripts and CSS-hidden text), whereas .textContent returns everything, more like walking the document tree.

(This information crossed my awareness while working on Caja, but I didn't recognize it as something I could actually make use of until now.)

January 13th, 2012

Based on the feedback I’ve received, I conclude that the white-screen/crash problem with Cubes is hardware/driver-specific and not very widespread. Since

  • this is a hobby project and an experiment, not a Game to be Published,
  • the problem looks hard to debug,
  • I don't have a variety of machines to test on, and
  • I replaced the MacBook Pro in question with a newer model which does not exhibit the same problem,

I have decided not to debug it further at this time. I've added a note about the problem to the documentation, and I’ll instead work on the problems Cubes exhibits on the new machine :-) (such as a speckling of not-the-right-texture-tile at the edges of blocks, and a strange input lag) or adding new features, like more useful saving/persistence, sub-block collision detection, or subworlds.

December 29th, 2011

I upgraded to Mac OS X 10.7 Lion this month, and ever since then Cubes has crashed or otherwise misbehaved on my machine. However, I have only the one to test on, so I would like your help in figuring out what the extent of the incompatibility is — whether this is a GPU driver bug or something Cubes is doing wrong.

If you have a WebGL-capable browser (such as Chrome or Firefox) and GPU, and especially if you're running Lion or are otherwise similar to my configuration, please run Cubes (no installation is required) and tell me whether it works and what your system configuration is, including these properties:

PropertyI have
Hardware modelMacBookPro5,1
GPU modelNVIDIA GeForce 9600M GT
OS versionMac OS X 10.7.2
GPU driver version?
Browser versionChrome 17.0.963.12, Firefox 8.0

(For some MacBook Pro models such as mine, the GPU used (9600M or 9600M GT) depends on the “Graphics” setting in Energy Saver preferences.)

The problems I observe are:

  • All blocks (terrain) being flat white except for lighting; the sky and particle effects still have color. (For the interested, this appears to be a mis-execution of the over-unity-to-white code introduced in commit 48674f….)
  • After some amount of usage, a crash (in Firefox, the browser exits; in Chrome, the display goes gray and the Web Inspector console says “WARNING: WebGL content on the page might have caused the graphics card to reset” while the in-page text says “Previous GL errors: INVALID_OPERATION”).

I will appreciate any help as this is making it quite impractical to work on Cubes.

October 20th, 2011

Cubes is a work-in-progress open-source block game (that is, like Minecraft) where the blocks are made out of blocks; in principle, you should be able to build a complete custom block game from scratch simply by building the appropriate block-set, out of blocks. As I mentioned earlier, I'm doing a project on the HCI for this game. I need data.

If you think you might be interested in playing my game, or if you're a current player of a block game (Minecraft, Terraria, FortressCraft, what-ever), please take this survey. I assure you there are no “On a scale from 1 to 5” questions in it.

October 5th, 2011

In September, I wrote of my new project Cubes that “unfortunately, it wasn't an idea for either of my course projects this semester.” Since I have completely failed to find motivation for the course-related project I had planned to do, þreader (a thread-emphasizing feed reader; you can read the project introduction), I have decided to make the best of it and somehow make Cubes into the needed project.

I will therefore be using Cubes as my project for the course CS459 Human-Computer Interaction; the main consequence of this is that I need to actually study the potential users of my system.

So. To recap, Cubes is a block game (like Minecraft) where the blocks are made out of blocks; in principle, you should be able to build a complete custom block game from scratch simply by building the appropriate block-set, out of blocks. If you're a potential user of a game like this, and interested in giving me data (surveys, interviews, etc.), let me know. I will have something for you within the next few days.

Also, the live version of Cubes now supports load/save (either to Local Storage or by cut-and-paste of text (!)), so you can save your work! (I don't promise not to change the world format incompatibly, though.)

September 12th, 2011

New Project: Cubes

Share
new

On September 6, I had an idea which I couldn't not work on. (Unfortunately, it wasn't an idea for either of my course projects this semester.)

As you may know, in Minecraft, the individual cubical blocks are textured with unsmoothed 16×16 pixel textures. All blocks’ shapes (that aren't just cubes) have lengths in multiples of 1⁄16 block (example, so that the objects have (to some degree) the appearance of being made out of voxels, or smaller cubes. And, people have built giant versions of specific blocks out of colored blocks.

So, what if building blocks out of blocks was actually how the block types were defined?

And that's what I've implemented, in JavaScript/WebGL. The working project name is “Cubes”, because I don't know where it's going enough to give it a better name right now.

The block types you see above were all procedurally generated as placeholders, since I don't have any save/load facility to save manually edited blocks (and I'm not sure about the color scheme of the current set of blocks-you-make-blocks-out-of).

Play (requires WebGL-capable browser; I recommend Chrome).

Source code.

Controls: Standard WASD keys, or arrow keys, and mouselook. The left button adds or removes blocks at the location of the white rectangle cursor; the right button brings up a menu for choosing blocks (the empty square at the top left is the removal tool). The R key enters the world of the selected block; the F key exits.

Update 2011-09-13: I've improved startup; it now tells you more explicitly what went wrong if it fails to load, rather than a blank white screen. I've also added an in-game Help button with controls and browser compatibility info.

March 2nd, 2011

LinkedIn?

Share
new

Should I get on LinkedIn? One hears far less about what they're up to than Facebook, and I recently received an invitation from a friend of mine.

Less subjectively: What does LinkedIn offer (given that it's a social network site), and do you find it worth your time?

Update: I signed up. No especially noticeable effects so far other than one newsletter sort of mailing and a lot of people I know wanting to add me as a contact^Wconnection; presumably LinkedIn notifies you when people in your address book create an account?

February 6th, 2011

“Tile Game”

Share
new

“Tile Game” was a game I wrote in the spring of 2010 as my final project for CI272 Visual Basic at MVCC. It was written in, of course, Visual Basic. I have just finished porting it to JavaScript and you can play it online.

October 21st, 2010

HTML or PDF?

Share
new

I'm planning to write a short introduction/quick reference to LaTeX (with a particular emphasis on “what corresponds to this HTML element?”, and actually explaining the core syntax rather than just examples of particular cases), as another page on my web site. Should I write it as HTML or LaTeX (rendered to PDF)? Using LaTeX means I can embed rendered examples without each one being an image (which I don't really want to deal with), but the result being a PDF rather than HTML means that the document would have a fixed line width, and possibly require download/be unviewable depending on the particular browser/platform/installed plugins. (It could still have hyperlinks.)

(In case you're wondering, there are several LaTeX-to-HTML conversion tools, and the last time I looked they all either didn't run, accepted a far-too-small subset of LaTeX, or produced too-low-quality or obviously broken output. I used one of them for this post and had to hand-edit black bars out of every image and trim the margins, and the antialiasing is poor.)

What would you prefer?

September 20th, 2010

Got a nice fluid layout on your web site? Annoyed at how mobile browsers like to assume pages need nine hundred virtual horizontal pixels to display properly? Add this to your <head>, as I've just done across my site:

<meta name="viewport" content="width=device-width">

This tells iPhone and Android browsers, at least, to present the page with a virtual window width equal to the device's actual screen width. It was invented and specified by Apple.

(I am not taking up the question of whether these browsers are making the right default choice. I will say, however, that in my technical opinion this is the wrong choice of location for this parameter: whether a layout will work at narrow widths depends largely on the stylesheet, not on the HTML; this parameter therefore ought to be stored in the stylesheet (that is, be a CSS extension); insofar as it does depend on the HTML, you can then put it in a <style> element.)

If you're looking to use media types to provide different styles: These browsers also don't respect the “handheld” media type; but they do support draft CSS3 Media Queries, which allow you to condition on the actual screen width — if you want, even in ems! I've used this on the main switchb.org page to make the Big Text less likely to spill off the screen (could use some further testing; all I've used so far is my desktop and a Nexus One), and also in the Caja Corkboard demo (which I wrote this summer (among other things) and ought to blog about).

August 28th, 2010

A data: URL directly contains its content; for example, data:text/plain,Hello%20World!. The main usefulness of this is that you can do things like including images inline in a document. But you can also use it to create 'anonymous' HTML documents, where any link to them or bookmark contains the entire document.

I originally did this in 2006 when I was in need of a URL-encoding tool and did not have one to hand; so I wrote out:

data:text/html,<form action="data:text/plain,"><input id=r>

Properly encoded, that's:

data:text/html,%3Cform%20action=%22data:text/plain,%22%3E%3Cinput%20name=r%3E

This produces a form with a single field which, when submitted, will generate a data URL for a plain text document containing “?r=” and then the text; the URL, then, will contain the entered text URL-encoded after the “?r=”.

Of course, that's a horrible kludge and JavaScript has an encodeURI function...

See my site for the rest of that thought and more examples. (I can't include any actual data URLs in this post because LiveJournal doesn't permit them, for necessary but unfortunate reasons — the origin, in the sense of same-origin policy, of a data URL is the origin of the page containing it.)

June 6th, 2010

(If anyone has already used this title, that wasn't my intent.)

Screenshot of the game.

“Fire Worms From Outer Space!” was a game I wrote in spring 2009 as my final project for PH115 Science of Multimedia at MVCC.

It was written in Macromedia Adobe Director, and designed as “with the structure of a shoot-em-up and the mechanics of a physics game”; you must defeat the enemies in each of a series of levels — by smashing apart their chains-of-spheresical bodies with your wrecking ball of an inexplicably orbiting asteroid.

Most of the development time was focused on getting the physics right; the graphics, sounds, and level design were all secondary.

(I'm not particularly a fan of Director; it's just what was used in the class. If I ever get around to it, I'll rewrite it in JavaScript.)

Play Fire Worms

  • Play on web (requires Shockwave plugin)

    (Please let me know if this doesn't work; I don't have the Shockwave plugin so I can't test it.)

  • Mac OS X app (standalone)
  • Windows app (standalone?)

Source

The Director file, plain-text copies of the scripts, and all of my saved development history (reconstructed; it was originally a bunch of directory copies) are available in a Git repository at git://switchb.org/fire-worms/. (No web view yet; need to do that.)

Other than the background image, credited in game and in “Title Page” to NASA, all elements of the game are Copyright 2009 Kevin Reid. I haven't gotten around to sticking a license on it; contact me and I'll get around to labeling it MIT or CC — let me know what license would be useful for what you'd like to do with it.

May 6th, 2010

I've several times seen the complaint that URL shortening services (tinyurl.com, bit.ly, etc etc) eliminate the ability to see where you're going by viewing the “real” URL and that this is dangerous.

In my opinion, if it is unsafe (except in the “seeing something you'd rather not” sense) to not know what the destination site is, then there's something wrong with the system. After all, you visit unknown sites all the time whenever you're learning about some new-to-you topic; it shouldn't be necessary to trust them.

The info visible from the URL is useful as a time-saving hint — “oh, that info is being presented as a video on YouTube — I don't have time to watch that now” or “I've seen that already” or “that site requires an account to do anything useful with”, but if it's neccessary to check it, then something needs fixing. I'm not saying you need fixing — it might be “the design/defaults of current web browsers” (e.g. that any web page is permitted to play sound by default) or “such-and-such protocol or plugin” — but something needs fixing.

That said, I don't actually approve of URL shorteners — because they do remove that helpful hint, and they create opportunities for links to break in the future.

Tags: , ,

May 1st, 2010

I just wrote my first use of that <canvas> thing that everyone's talking about. (If you don't know, this is part of the WHATWG/HTML5 general vicinity of features: an element which creates a bitmap pixmap image that can be drawn on by JavaScript.)

Since LJ doesn't let me embed JavaScript or iframes (a restriction which I'm only just noticing...) I'll have to provide only a link (but your CPU meters will thank me for that):

Brownian Tree

(This is also part of a personal goal to learn more about Modern Web Applications technologies: “Ajax”, jQuery, web frameworks, etc. I used to (a) not have a personal server, and (b) tend to “All web content must be accessible to non-JS and pure-text users” — but I’ve come to realize that while one should still avoid unnecessary dependence on fancy stuff, there is value in using these systems to create what are not so much “web pages” as cross-platform, zero-install applications — they may not be usable by $NON-MAINSTREAM-BROWSER-TYPE but nothing else would be more compatible and still provide the same benefits.)

April 20th, 2010

 +----------------------------------------------------------------------------+
 |                                                                            |
 |                                 A thought                                  |
 |                                 ---------                                  |
 |                                                                            |
 |  |\  /|onospaced text  documents were the first  WYSIWYG-edited documents. |
 |  | \/ | One can create paragraph formatting and headings, special layouts, |
 |  |    | integrated diagrams, decorations --  all interactively with exact  |
 |  immediate feedback  upon just how it  will appear (outside of  choice of  |
 |  font) on screen, paper printout, someone else's email client -- anything  |
 |  whatsoever that displays this medium.  Though,  font characteristics can  |
 |  affect the quality of diagrams and decoration; for example, how high the  |
 |  “~” or “^” symbol is,  and how much of a character cell is filled by the  |
 |  character shape.                                                          |
 |      This, however, is a minor disadvantage,  and I have even today found  |
 |  uses for this style of document preparation;  for example, certain class  |
 |  assignment submissions.  The usual tool is Microsoft Word documents; but  |
 |  I do not own a copy of Word,  and while OpenOffice (dot org) is adequate  |
 |  for reading, its rendering is often different from Word's  -- and I have  |
 |  even encountered data loss bugs: “Hey! Where'd my table go?”  After that  |
 |  incident, I resorted to plain text for the assignment (which was essenti- |
 |  ally tabular in structure) and have used such formatting since for those  |
 |  things which are amenable to the format.  I could have used HTML, or sub- |
 |  mitted a PDF rendered from OpenOffice-on-my-computer or a LaTeX document, |
 |  but I wanted to choose a format  which I was confident would seem a reas- |
 |  onable type of document to the recipient,  and plain monospaced text fit  |
 |  that role well.                                                           |
 |      It can even be fun  to lay out your document  completely by hand, if  |
 |  it is not too long  -- and rather than fiddling with margins,  tab stops, |
 |  table editing tools, etc.,  you can just  *write what you want* directly, |
 |  just as much as if you were writing on paper, with all the advantages of  |
 |  an electronic document. Unless you want graphics that are no bigger than  |
 |  a character.                                                              |
 |                                                                            |
 |   |/    .    /)  . /                                                       |
 |  /\_Ø\///\  /\_Ø/(/.                                                       |
 |                                                                            |
 |  P.S. If you want to reply in like style,  use the <pre>...</pre> element  |
 |  and click the “More Options...” button to get to the “Don't auto-format”  |
 |  option.                                                                   |
 |                                                                            |
 +----------------------------------------------------------------------------+
Powered by LiveJournal.com