Html5

HTML5 canvas point operations

This is the last demo I made using JSImage. I created it some time around 2009-2010. At the time, I had checked out an imaging book from my university’s library at least ten times. Most of the exercises in that book I implemented in Python using PIL, but point operations were simple enough to port to JavaScript quickly. Point operations are image alterations that affect all pixels equally. Other operations, like blurring for example, each result pixel depends on adjacent pixels.

HTML5 tool for creating color palettes from an image

For an HCI class project in Fall 2009, I pulled together some of my previous demos to make this integrated tool. It was just a prototype, and I haven’t taken the time to get the code set up and working on this blog. If anyone is interested, I can dig up the code and send it along. In retrospect, it really could have used some narration…

How not to use CSS3

How to ruin a good thing by abusing CSS3 text shadows… CSS3! The code: // Random factors to determine x/y offsets for text shadows and amount of blur var x_factor = Math.floor(Math.random() * 20) - 10; var y_factor = Math.floor(Math.random() * 20) - 10; var blur_factor = Math.floor(Math.random() * 10) + 1; // Pretty colors var the_colors = [ "#7f9f7f", "#dca3a3", "#80d4aa", "#f8f893", "#ffcfaf", "#e89393", "#9ece9e", "#c0bed1", "#6c6c9c", "#71d3b4", "#a0afa0", "#efefef" ]; function make_it() { // MAKE IT SHINE // Build a string containing a comma-delimited list of the each shadow we want to apply // sprintf would be nice here.

HTML5 canvas 3D pixel array

This is another demo from 2009-ish. When I started experimenting with canvas, I felt uncomfortable with the 1-dimensionality of CanvasPixelArray. I wrote this script to convert it into a more logical format: X by Y by RGBA. Let me rephrase that. By “more logical”, I mean “more logical, to me, at the time). 1D is fine, and I can’t think of any use for this script. But, nonetheless, here it is, including the original description.

HTML5 canvas RGB histogram

This is yet another demo from around 2009. It’s simple enough. Click a button, draw an unbinned RGB histogram of the source image. It’s powered by an early version of an old JS toolkit I wrote called JSImage. The latest version is available at my JSImage github repo. Don’t be fooled by the 2011 commits, those are just artifacts from svn->git migration. No guarantees that the histo’s are actually correct.

HTML5 canvas area selection averaging

This is a demo from late 2009. It’s an extension of the single-pixel eyedropper I wrote previously. It’s powered by an early version of an old JS toolkit I wrote called JSImage. The latest version is available at my JSImage github repo. Don’t be fooled by the 2011 commits, those are just artifacts from svn->git migration. No guarantees that the histo’s are actually correct. :) Click and drag to set the image border to the average of the selected pixels.

AEJS

AEJS was an experimental Amiga 500 emulator written in JavaScript. The name stands for Amiga Emulator JavaScript and is pronounced “aegis”. My motivation to build AEJS came from these sources: The HTML5 era introduced new APIs which finally made it possible: Typed arrays, Web Audio, File, Canvas, Fullscreen, Gamepad Fabrice Bellard’s JavaScript PC emulator JavaScript performance was finally good enough to make it feasible It bridged front-end web development with low-level machine code, both of which are super awesome I still have the Amiga 500 I played with obsessively since 3 years-old The 68000 is legendary and I wanted to find out why I stopped development for these reasons:

Opcode patterns 70% finished

genlut.py is really filling out. It generates the LUT for all 68k opcodes (68000 only), and I’m about 70% done. 77 down, 34 to go. The OPCODES dict defines the first two bytes of each opcode, both static bits and operands. The operand strings act as keys into the PATTERNS struct, which contains all possible values for each operand. The recursive function gen() is fed an opcode pattern which may contain operand strings as well as static bits.

LUT

Decoding is easy. Decoding requires a lot of typing. (I am starting to believe this is true of ever aspect of interpreted emulation…) For the AEJS decoder, I am creating a look-up table with every possible pattern for each instruction. It was my first idea, but I initially discarded it as “wasteful and inelegant”. Later, I accepted it as “really fast”. I’m generating a large set of bit patterns that map to 68k opcodes, like so:

Introducing AEJS

Introducing AEJS, an Amiga emulator written in JavaScript. Wait, wording it like that makes it sound like it’s finished. It isn’t. It won’t be for a long time. AEJS is just a hobby, and will never hold a candle to UAE. Why the Amiga? Given that this is my first emulator, it would have been much easier to go with a 6502 or 8080 instead, but I didn’t grow up with those; I grew up with a 68k powering an Amiga 500.

JSImage

JSImage was a basic, buggy, just-for-fun image processing library that I wrote in 2008/2009 when I first started seriously studying JavaScript. A stumbled across a book in my university library, and started implementing the algorithms on the newly available HTML5 canvas element. I’ve made several posts about JSImage which contain live demos. I think I put more work into code formatting than correct output. ;)