Audrey M. Roy

Art, design, Python, JavaScript, and general silliness 
Filed under

javascript

 

My big secret project with Fuzzy Rainbow

I wish I could post screenshots of the app I'm working on with Fuzzy Rainbow.  But I can't talk too much about it yet.

It's a Python/AppEngine + OpenSocial + JavaScript + jQuery UI app.  All the interaction & graphics are done with pngs and crazy JavaScript tricks because @shazow introduced me to the magic of jQuery & jQuery UI and convinced me that JavaScript could do anything.  Working on Fluffy Puffy Cloud Pets also taught me this to some extent, although I did nothing but draw clouds (and integrate my teammates' code) for that project, and I was skeptical of JS back then.

No canvas, no Flash.  If this turns out to be the wrong approach, I'm not afraid to throw away 2 months of code and rewrite it. 

The app is pretty odd.  Things do funny things.  It's either a game or a tool, depending on the user's perspective.

More pieces are coming down the line.  There will likely be a Pinax-based standalone site centered around the app.  There will also likely be a mobile client (maybe PhoneGap).  And more that I absolutely can't mention.  It's pretty ambitious, but it's just a matter of doing it piece-by-piece and cutting out pieces if needed. 

All the seemingly-scattered hacks & experiments that I've done over the summer are now coming together.  It is much more planned and well-thought-out than it might have appeared.  I am excited that I can say this much & can't wait to reveal more.

Filed under  //   Fuzzy Rainbow   Google App Engine   JavaScript   jQuery   OpenSocial   PhoneGap   Pinax   Python  
Posted by email 

Comments [1]

Processing.js for mobile devices

I completely adore Processing.js, John Resig's port of the Processing graphics programming language to JavaScript.  Everything that guy creates is a treasure.  As you might know, he's also the creator of jQuery, which is one of my favorite things.

I've been thinking a lot about how Processing.js would be great for making mobile apps.  I guess there are a couple of possible approaches:

  • something analogous to PhoneGap that turns your Processing.js code into native graphical apps optimized for each mobile device
  • an ultra-lightweight, specially-optimized (if that's even possible) subset of the parts of Processing.js that are most interesting to mobile apps and/or games, analogous to XUI

There have been a couple other Processing ports, an iPhone version (wish I could find the source) and a Flash/ActionScript one

And why Processing.js rather than the original Processing?  Because then you could reuse the code on the web.

I have a special interest in making something like this, since it would simplify a lot of my current work.  If you're interested in collaborating with me on this or know of anyone who might be, let me know.

Filed under  //   JavaScript   jQuery   mobile   PhoneGap   Processing   Processing.js   XUI  
Posted by email 

Comments [0]

Work in progress - Cloud editor

This runs slow because it's the debug build.  The release version is faster.  Even then, the clouds are purposely drifty rather than speeding around the sky.

It's HTML5 canvas/JavaScript, created with PhoneGap and running on an Android G1 phone. 

2 options I'm considering:

  1. Add more features and release it as a separate app.  
  2. Turn it into a game, e.g. trap birds by surrounding them with clouds.  (I don't know, I'm not so into this, too boring.)
  3. Integrate it with the code for "Brain Combustion: Multiples" as a bonus feature every 10 levels or so, where you get cloud coins as a result of your hard work.  Is that too weird?  The multiples game is almost totally unrelated.

(I'm open to advice)

Filed under  //   HTML 5 Canvas   JavaScript   PhoneGap  
Posted by email 

Comments [1]

XUI notes: Removing all divs of a class

1:15pm:  I try removing all divs of class "choicebox".  Doesn't work.
x$('div.choicebox').each(function() {$x(this).remove()});

1:20pm: I study the jQuery docs.  x$('div.choicebox').each($x(this).remove());  Doesn't work; deletes more than I had bargained for.

1:23pm: x$('div.choicebox').remove();  Works.  Life doesn't have to be so complicated.

Filed under  //   JavaScript   programming   XUI  
Posted by email 

Comments [0]

XUI notes: jQuery-like text() function, and other undocumented functions

To get the text of a div with id "box", do this:
x$('#box').first().innerText;

I didn't see a first() in the XUI docs.  A look at xui-0.9.0.js shows this:
        first: function() {
            return this.elements[0];
        },

In addition, I noticed definitions for elements, each, find, extend.  There's lots of good undocumented stuff in there - poke around a bit.

Filed under  //   JavaScript   programming   XUI  
Posted by email 

Comments [0]

Progress on my first PhoneGap/XUI app

I'm making great progress with the app.  I wrote the code entirely from scratch tonight.  And the app mostly works now.  You click on boxes that match a specified condition to earn points.  The faster you do it, the more bonus points you get. 

I spent over an hour trying to figure out how to get the text from a DOM element with XUI.  It must be something like x$('#foo').text() or x$('#foo').html().nodeValue.  I tried a million things and couldn't figure it out.

I know that x$('#foo').html() returns a Javascript object because I printed it in an alert, but then I don't know what to do with the object.  If only I could run the app in Firefox and use Firebug, then I could inspect it.  I did try loading just the html file in Firefox and commenting out the link to phonegap.js, but that didn't work. 

Tomorrow:

  1. Figure out how to get the text of a DOM element with XUI.  Fill in the condition test that uses the text from the number box divs.
  2. Load state from somewhere (a text file?) upon app launch, and save it at the end of every level.
  3. Try to add some cute accelerometer-using feature to the app.
  4. Come up with a good name.  Firethink?  I don't know.  Something about speed/fire + math/thinking/mental workouts.

Filed under  //   Android   JavaScript   PhoneGap   programming   XUI  
Posted by email 

Comments [2]

My art cataloging app

A few months ago, I wrote an app to catalog all of my artwork.  I've lost track of quite a bit of my sold art over time, which makes me teary-eyed.

My cataloging app is a Django app consisting of forms that I fill out with details about each art piece, e.g. dimensions, materials, where it's located, who owns it, any stories behind it, etc.  After filling out the details, I upload a variable number of photos of each piece via the app's uploader, which generates thumbnails and sticks them into Amazon S3. 

I didn't bother much with the front-end back then because I already had what I needed.  I hated js, css, html, ajax, etc., and the app was just for myself anyway.  I used it to catalog a bunch of my art, and then I forgot about it.

But last month I suddenly ramped up my front-end skills.  So it was a delight to pick up the app yesterday afternoon and see it in a new light.  I was up until 3am coding unnecessary things like transparent gradients overlaid on text, which I never had the motivation to do before.  It's still not publicly accessible, but chances are it may be soon.

Filed under  //   Django   JavaScript   Python  
Posted by email 

Comments [1]

Developer tips: AJAX and XSS

If your AJAX still isn't working, it's because you forgot that
cross-domain scripting is not allowed by most browsers.

 Just get over it. Write a proxy on your server for that remote data.
It'll take less effort than you think, and it'll work.

Filed under  //   JavaScript   XML  
Posted by email 

Comments [2]