X Tutup
Showing posts with label Flash. Show all posts
Showing posts with label Flash. Show all posts

26 January 2012

PhyloPic Is Back!

Last year, I launched a project called PhyloPic. The goal of this project was to create an open database of freely reuseable silhouette images of organisms. Furthermore, it featured a phylogenetic taxonomy so that, if a taxon wasn't illustrated, an approximation could be found.

I launched it as a "public alpha", meaning that it wasn't complete and still had some bugs. The year turned out to be very busy for me: an awful thing happened, and a wonderful thing happened. And I didn't really have time to push PhyloPic to the next level.

Unfortunately, I hadn't built it well enough in the first place. The architecture was not optimized, and the site became extremely slow and buggy. I took it offline, hoping to release a new version in short order, but it turned out to need a lot more work than I first thought.

Happily, it is now ready again!

08 March 2011

To Flash or not to Flash

I love building stuff with Flash technologies. I think ActionScript 3.0 is an excellent language and Flex 4 is a very good framework. I'm not particularly enamored of the alternatives. I find JavaScript to be a mediocre language (albeit with some excellent libraries). I don't like wrangling CSS more than I have to (although Less makes it much nicer). I find HTML 5 to be a pretty immature technology so far. SilverLight's days are probably numbered. (I haven't yet delved into mobile operating systems, like Android and iOS, so I can't speak for those. And those aren't complete alternatives, anyway.)


Because I love Flash, I have a tendency to want to build everything in it. But over the years I've learned that this tendency must be curbed whenever possible. There are definite downsides to Flash, and especially to doing entire websites in Flash. (The now-defunct March of Man website and some abandoned versions of the Dinosauricon are testaments to this.)


For PhyloPic, it was pretty clear to me that there would be no significant advantage to building it in Flash. Load times would be increased without any functionality enhancement. I wouldn't be able to use it on my iPhone. And all the functionality I needed was easily available in plain old HTML/JavaScript/CSS.


With one exception.


The Submission Tool is built as a Flex app. There is one primary reason for this: image processing. Processing the silhouettes on the server side was an option, but one that could have potentially bogged the server down. (It's already starting to buckle a bit as is, pending some optimizations.) But, by using Flash's BitmapData class, I can do that bit of work on the client side before the silhouettes are shipped off to the database.


Of course there are some other benefits as well. In descending order of importance:

  • Flash allows for a more unified experience for the submitter. No page reloads and no cross-browser differences.
  • SPAM bots are much more capable of cracking HTML forms than cracking custom AMF web services. SWF files are generally opaque to them.
  • It was easier for me to build and test.
Had it just been those three reasons, there might still have been a good argument to do it as HTML/AJAX. The image processing requirement is what really tipped the scales. One hundred submitters contrasting, cropping, and rescaling bitmaps is much nicer if they're doing it on their own machines than if they're all doing it on the server. (Okay, I've barely had even two simultaneous submitters so far, but I can dream....)

There may be other Flash tools in PhyloPic's future. For example, I think it is the best technology for the Cladogram Generator. But for the rest of the site, plain old HTML/JavaScript/CSS is certainly sufficient—better, even.

UPDATE (2012 Jan 26): The Submission Page still uses Flash but is not a Flex app.

12 October 2010

What I Do For A Living: TRONiverse

We recently launched a Flash app for the upcoming film TRON: Legacy:


It pulls posts from Twitter, Facebook, and Flickr and displays them orbiting a 3D globe. You can click on the globe to find posts near that area. Post about TRON and your post might appear, too!

Also, we added a neat little Easter egg: click on the globe and then hold down the "M", "C", and "P" keys. (People who've seen the original film might have an idea what to expect....)

26 July 2010

3D Visualization of the Fossil Distribution of the Human-Chimpanzee Total Clade

What it says.
Click on the image to open the visualization.
I've been compiling data on "pan-mangani" fossils. This is my first March of Man toolshop post in a while: a 3D visualization of that data, where the horizontal axis is longitude, the vertical axis is latitude, and depth (the z-axis) is age. The "blobs" each represent a fossilized individual, and you can mouse over them to see what their taxon is.

Some data is missing, notably a lot of entries for our own species. Other data needs to be refined—some of the better-known species (ahem, Neandertals) are big clouds that need to be tied down to specific sites. Also, I obviously need to do more work on that present-day distribution map. But it's a decent start.


Fun things to do:

  • See if you can find the oldest individual (the lone specimen of Sahelanthropus tchadensis).
  • Try to find its Chadian compatriots.
  • Find the earliest non-African individuals (hint: East Europe and the Malayan Archipelago).
  • Wonder what the heck that thing in India is.
  • Look for the single cluster of extinct chimpanzees (Pan sp.).
  • Find the three subspecies of Homo sapiens other than our own. (Note: these may not be distinct from each other—I just prefer to err on the side of splitting for projects like these. Easier to revise later.)
  • Marvel at how easy it is to become sympathetic to multiregionalism when you just view the distribution data without any morphological context and ignore the fact that not all regions are good for preservation.
  • Wonder how people can possibly believe in baraminology in the face of such ample evidence. (Adding morphological data to this would help a lot—there really aren't any good "cutoff" points for our lineage.)
UPDATE:

Better version here.

27 May 2010

Upcoming Names on Nodes Presentation

I'll also be presenting Names on Nodes at iEvoBio, at the Software Bazaar on June 29. Here's the abstract:

Names on Nodes: Automating the Application of Taxonomic Names within a Phylogenetic Context

Names on Nodes1 is an open-source2 Flex application which utilizes a mathematical approach to automate the application of phylogenetically-defined names to phylogenetic hypotheses. Phylogenetic hypotheses are modeled as directed, acyclic graphs, and may be read from bioinformatics or graph files (Nexus, NexML, Newick, and GraphML) or created de novo. Hypotheses may also be merged from multiple sources. Names on Nodes stores hypotheses as MathML, an XML-based language for representing mathematical content and presentation. Phylogenetic definitions may be constructed using a visual editor and exported in MathML. Thus, it is possible to create a dictionary of defined names and automatically apply them to phylogenetic hypotheses. In the current version of the application, such dictionaries exist only as MathML files, but in future versions definitions may also be loaded from databases (e.g., RegNum).

Additional functionality in Names on Nodes includes the ability to coarsen a phylogenetic graph (thereby simplifying it while still reflecting the overall structure) or to export it as an image file (raster or vector, potentially with semantic annotations).

  1. Source code available at: http://bitbucket.org/keesey/namesonnodes-sa/
  2. MIT license
I have my work cut out for me....

12 May 2010

Why HTML 5 Canvas Will Not Be Replacing Flash That Soon

Previously I mentioned a tool, PhyloPainter, which uses the HTML 5 <canvas> element to draw a phylogenetic graph. Here's what it looks like on my iPhone:


Not only are the arrowheads missing (as they are on Safari on all platforms, not just the iPhone), but the labels have bizarrely been placed outside the canvas, flipped upside-down! The tool works fine on Firefox and Chrome. (Internet Explorer has not implemented <canvas> yet, and I haven't played enough with the interim solution, ExplorerCanvas, to get it working.)

I think the <canvas> element is a cool idea, and I'll continue to play with it. But it has a long way to go to compete with a cross-platform tool like Flash. HTML 5 may be "open"—but it also needs to "work".

06 May 2010

PhyloPainter: Happy Little Trees

The whole Flash/Apple fracas has been rather distasteful to me. But I'm not going to dwell on that right now. Instead, I am trying to keep an open mind by trying out some of the technologies that are competing with my favored development tools. First up: HTML 5.

I'll probably write more on the topic later, but suffice to say for now that working HTML 5 feels like I've traveled in time back to 2001, the days of ActionScript 1.0. JavaScript is a poor language for anything complicated. Canvas has covered the basics of vector drawing well, but little else. That said, I see potential and I'm pretty certain the tools will improve.

For my first HTML 5 app, I ported some basic functionality from Names on Nodes, namely, the ability to read Newick tree strings and the ability to draw graphs. I give you:


It's a bit rough right now. For one thing, it doesn't work in Internet Explorer (despite the inclusion of a workaround JavaScript tool—the current version of IE doesn't support HTML 5 Canvas). But it's a start.

Give it a try—paint some happy little trees!

08 April 2010

Viewing Phylogenies at Different Graph Resolution

Although I've been primarily reining in features on the next version of Names on Nodes, there was a new feature I couldn't resist adding. I think it's coming along pretty well.

A common problem with working with phylogenies is that many of them are gigantic, far too big to view all at once. As an example, consider Figure 1 from Beck et al. (2006). It models a hypothesis about placental mammal phylogeny, at an arbitrary resolution ("family-level"). Here's how the current version of Names on Nodes renders it:


When you look at it "zoomed out", it's almost impossible to know what's going on. When you look at it full size, you can see various local areas, but you lose a sense of what's going on with the larger image. Note that I've highlighted our own species' twig on the tree (Hominidae, the great ape clade) in yellow.

Earlier I used the term "resolution" to refer to the size of the graph's nodes. We can refer to a graph with very small nodes (e.g., each node representing an individual organism) as being "fine" and a graph with very large nodes (e.g., "class-level") as being "coarse". Thinking about the problem from this angle, I had the idea to create a control for coarsening or refining the viewed graph.

I implemented a simple graph-coarsening algorithm*, and then created an algorithm for picking the best name for the new, coarser graph's nodes. And here is the phylogeny at near-maximum coarseness:


This is placental phylogeny boiled down to its basics: rodents, laurasiatheres, and a bunch of other junk (including us). The node labelled "Placentalia*" contains the placental ancestor but not all descendants—it lacks an unnamed clade included most non-afrothere placentals. The unnamed greenish node includes all members of that unnamed clade except for rodents and laurasiatheres. (This happens to include Hominidae, which is why it has that greenish color.)

Let's refine it one step:


We're starting to get a better idea of the hypothesis. Finer:


Now we can see the basal split between afrotheres and other placentals, as well as developing complexity in Rodentia and Laurasiatheria. Finer:

Getting a little bit on the big side, now, but we can see more details. There are a lot of unnamed clades within Hystricoidea and Chiroptera—we can see that those clades are diverse, although we can't see details. Finer:
This has about 2/5 as many nodes as the base graph. It's a bit large, but still much easier to view than the base graph. Many important details are visible (e.g., the platyrrhine-catarrhine split), while others are just suggested (e.g., lots of diversity in Caviomorpha).

Obviously this works best if lots of clades have been named. I think it'll be a useful for boiling a phylogeny down to an appropriate level: coarser for quick overviews, finer for in-depth discussion.



* Basic summary of the coarsening algorithm:
  1. Look through all nodes that have children, and find the ones whose children are all terminal (sinks).
  2. Merge each of those nodes with their children to create a "supernode".
  3. Merge all overlapping supernodes. (This is important for graphs where nodes may have multiple ancestors, although it doesn't come into play in this example.)
  4. Remove the supernodes from the graph and repeat from step 1. Keep going until no nodes are left.
  5. Add the supernodes to a new graph. A supernode is ancestral to another supernode if any of its subnodes are ancestral to any of the other supernode's subnodes.

20 November 2009

What I Do For a Living, Part 312: Dr. Facilier's Parlour

I recently completed a new application. This one is a collection of three games associated with Disney's upcoming animated film, The Princess and the Frog. This one requires a Facebook account: Dr. Facilier's Parlour. (Dr. Facilier is the villain of the movie.)

This is my first completed project using certain technologies:
Also see the Shadow Shakedown game therein for an example of how DisplacementMapFilter can be useful. (I also got to do a tiny bit of character animation there.)

I have to say I was very pleased with all of these new technologies. In particular, the Spark component set is a huge improvement over the previous Halo components. Skinning components is so easy now it's hard to imagine that it was ever difficult. Adobe has acted on the "Favor composition to inheritance" maxim, and it has paid off. Also, props to Code Igniter, with its flexible tools and strong emphasis on the MVC pattern, for making PHP development (something I had all but sworn off) actually kind of fun.

Enjoy!

24 August 2009

Online NEXUS File Viewer

It's been a month since my last post, but I have a very good reason for the hiatus. Namely, I was busy getting married to this woman (at the Los Angeles County Museum of Natural History) and going on our honeymoon (in Sydney, Australia).

Now that I'm back in California, time to get back to work on Names on Nodes! I've just put together a small demo of two key parts of its functionality: the reading of NEXUS files and the displaying of phylogenetic networks. Click here to see the NEXUS Viewer demo. This application opens NEXUS files and displays the trees in them as a combined phylogenetic network.

Things you need to know:
  1. You must have a NEXUS file stored locally on your computer to use this.
  2. That file should have a TREES section. (If not, the viewer should just display a list of operational taxonomic units.)
  3. This could get messy for NEXUS files with lots of trees. (Although it's kind of neat-looking.)
  4. You can move the nodes around by clicking on them, or click anywhere else to move the entire diagram.
  5. I would dearly love to know if, for some reason, it does not work for a given file.
Enjoy!

23 July 2009

Two "Names on Nodes"-Related Launches

I'm still a clear way away from launching the beta application, but I've just made a couple of launches related to my long-time work-in-progress, Names on Nodes.

First up, and probably of more interest to most people, I've begun the documentation for the MathML definitions used by Names on Nodes. The document includes general reviews of relevant mathematical and biological concepts, a quick review of MathML and the technologies it's based on, some comments on correlating mathematical and biological concepts, and definitions for all entities (including operations) used by Names on Nodes. Note that this covers a lot of the same ground as in my 2007 paper, with a few minor changes in the symbols and terminology (e.g., I now call the ancestor of a clade a "cladogen" rather than a "cladogenetic set").

Secondly, I've made the project open-source, by moving it to Google Code. If you are a developer interested in checking this out, go here. It's incomplete, so I don't know if anyone will have any real interest in looking at it yet. (Honestly, I mostly posted so that, on the off chance that I unexpectedly kick the bucket, my magnum opus won't be lost forever.)

This information is also on the new Names on Nodes home page.

30 June 2009

New Useless Utility: Text Tree Maker

I finally got around to launching something at namesonnodes.org. No, it's not Names on Nodes itself, unfortunately. The project is taking a huge amount of time. But I thought I'd post something, so here's a little Flex application I made (using the new Flash Builder 4 Beta!) using a smidgen of the technology behind Names on Nodes.

Have you ever been discussing phylogeny online and wished there was an easy way to make a readable cladogram? (95% of readers leave.) Those of you who are left, check this out: Text Tree Maker. Just type in a Newick tree string, and voilá! Okay, so typing in a Newick tree string is not that easy in the first place, but it is easier.

Well, I'll be using it, anyway. Check this one out!


Ardipithecus
|--ALA-VP 2/10
`--+--ARA-VP 6/1
|--KNM-T1 13150
`--Praeanthropus
|--KNM-KP 29281
`--+--AL 288-1
|--KNM-WT 40000
|--KT 12/H1
|--LH 4
`--+--BOU-VP 12/130
|--Australopithecus
| |--Taung 1
| |--Australopithecus (Paranthropus)
| | |--SK 6
| | `--TM1517
| `--Australopithecus (Zinjanthropus)
| |--KNM-WT 17000
| |--OH 5
| `--Omo 18
`--Homo
|--KNM-ER 1470
|--KNM-ER 1813
|--OH 7
|--OH 9
`--Homo (Homo)
|--D 2600
|--KNM-ER 992
|--LB 1
`--+--Ceprano 1
|--Trinil 2
`--Homo (sapiens)
|--ATD 6-5
`--+--Mauer 1
`--+--Neandertal 1
`--+--Florisbad 1
|--Kabwe 1
`--Uppsala domkyrka: Carolus Linnaeus


NOTE: Right-click on the application and select "View Source" if you want to see some of the code behind it.

05 May 2009

'Nother Toolshop Animatic: The Head Map

I created a sort of "mashup" of the previous two and added a temporary music track. (The ultimate version will have something different.) Click on the thumbnail (might take a moment to load):


Still clunky, but I'm just fleshing out the ideas at this point. Enjoy!

04 May 2009

March of Man: The Toolshop

My somewhat ambitious web app, March of Man, has not been proving too successful. The idea behind the project is to illustrate human and chimpanzee evolution using hundreds of figures. The web app includes tools for submitting images and generating collages. But there are only a couple dozen images right now. At this rate, the project will be completed by the time I am an old man. Time for a new approach!

I'm going to leave the site up as is, but I am also going to be working on a CG animation. I've made a new area of the website called "The Toolshop" where I'll be posting progress. Here are the first two mockups, using vector animation (click on the image to see the animation):

Human/chimpanzee evolution depicted as streams of bubbling heads.


The ranges of various taxa over time.

Enjoy!

16 December 2008

My Yuletide Gift: Open Source ActionScript 3.0 Libraries!

I finally got around to setting up a Google Code site:

A Three-Pound Monkey Brain: ActionScript 3.0 Libraries

As you can see, there is still much to be done. But it's a start, and it's available to anyone.

Merry Solsticetime, everyone!

10 December 2008

Uncle Sam wants YOU!

In case you all were curious about what I actually do for a living, this just launched:


This is a project I worked on with several other developers. (Well, I still am working on it—there are a couple of revisions we'll be rolling out before too long.) I also did some work on the main Army Experience Center website.

I believe this is the first project I've worked on involving Papervision3D that has made its way online. Hoo-ah!

17 August 2008

Sets for ActionScript

It's been a busy couple of months!

One of the things keeping me busy is, of course, Names on Nodes, the web application I am developing that will automate phylogenetic nomenclature. As part of that project, I have developed a mathematics package that I would eventually like to release as its own package. One class, however, is so useful that I have decided to jump the gun and offer it on its own.

We (ActionScript programmers) all know how useful the Array class is. It can be used to store a sequence of anything, so it can be repurposed as a list, a vector, an edge—all manner of collections.

Well, not all manner of collections. Just ordered collections that allow duplicate elements. What if you want a set: an unordered collection with no duplicates? I find I need sets all the time, but I have to use arrays. And arrays are not optimal for looking up an element's membership, or preventing duplication. As lists they're great, but as sets they suck.

For a while I used a class I'd made called ArraySet that wrapped an array, but this was only an improvement in API, not in performance. Then I took a cue from Java and created: HashSet.


The HashSet class wraps a Dictionary object, which it uses as a hash table. If an element belongs to the set, then that element is a self-referential key in the dictionary. If it doesn't, then there is no such key in the dictionary. And HashSet extends Proxy, so you can use bracket notation for many operations,. You can also use for..in and for each..in loops.

Here's a quick example:


// Create and populate the set.
var s:HashSet = HashSet.fromObject([1, 2, 3]);

trace(s.size); // 3
trace(s[1]); // 1
trace(s[2]); // 2
trace(s[0]); // undefined
trace(s.has(1)) // true

// Trace all elements of the set.
for each (var i:int in s)
{
trace(i);
}
// Trace all elements of the set (different method).
for (var x:* in s)
{
trace(x);
}

trace(s); // {1, 2, 3}
s.add(1);
trace(s); // {1, 2, 3}
s.add(4);
trace(s); // {1, 2, 3, 4}
s.remove(1);
trace(s); // {2, 3, 4}
delete s[2];
trace(s); // {3, 4}
s[3] = undefined;
trace(s); // {4}


...and so on. Full documentation is in the class itself, so you can figure out the details for yourself. I will mention that HashSet also has a number of functions in common with Array (every, filter, forEach, map, some) and others that are unique to sets (get empty, diff, intersect, prSubsetOf, subsetOf, union). It also has a few functions that Array really ought to have (clone, equals, remove).

Download it and try it! The full version is integrated into the mathematics package that I'm still tweaking, but this is too useful to keep to myself any longer. At least, I think so—let me know what you think.

06 June 2008

Three-Pound Monkey Brain: The Open Source Project

In an earlier post, I was bemoaning the unimaginative (and self-centered) name I was using for my general open source ActionScript project: net.tmkeesey. But someone pointed out to me this morning that a better name was staring me in the face all this time. Thus, I have changed the packages from net.tmkeesey to ... threelbmonkeybrain! (A bit long-winded, but unfortunately you cannot start package names with numerical digits.)

Along with this much-better name is a new location for the code. Point your Subversion clients to:
(Or, if you just want the code itself without unit tests, etc.: http://svn3.cvsdude.com/keesey/PROJECTS/ threelbmonkeybrain/as3/trunk/src/threelbmonkeybrain)

I've added a lot of new packages under the rubrics of threelbmonkeybrain.load and threelbmonkeybrain.net, but I have not had time to build full unit tests for them. Once that's done, I'll write more about those.

04 June 2008

More Additions to Open Code: Collections and Connectivity

I've added two new utility packages to net.tmkeesey. SVN repository here.)

net.tmkeesey.utils.mx
Static classes with utilities for handling Flex objects.
net.tmkeesey.utils.mx.ArrayCollectionUtil
Contains a convenience method for converting arrays to ArrayCollection objects with filters and/or sorts.
net.tmkeesey.utils.mx.Filtration
Contains handy functions which can be used for ICollectionView.filterFunction.
net.tmkeesey.utils.mx.ListCollectionViewUtil
Contains a convenience method for converting ListCollectionView objects to arrays, using filters and/or sorts.

net.tmkeesey.utils.net
Static classes with utilities for handling flash.net objects.
net.tmkeesey.utils.net.URLRequestHeaderUtil
Contains methods for cloning and comparing URLRequestHeader objects.
net.tmkeesey.utils.net.URLRequestUtil
Contains methods for cloning and comparing URLRequest objects.
net.tmkeesey.utils.net.URLVariablesUtil
Contains methods for cloning and comparing URLVariables objects.

As always, I commit nothing until I've created ASDoc comments and flexunit tests for everything.

(O.K., not the most exciting update, but....)
X Tutup