Lehrblogger

I made substantial progress on the main layout and animation for my keyboard portfolio. The keyboard is built dynamically from what is now an array of letters, and I used the MooTools tween/morphing functionality to handle the animation. Tweening of both the size and location of keys on the full keyboard at 24 fps seems to be more than my browser can handle, however, and I need to figure out a way to improve performance. There are three versions below – the first is without any tweening, the second is with tweening for only a part of the keyboard, and the third is with tweening for the whole keyboard.

In all versions, clicking on or typing a letter will zoom in on that letter, and spacebar zooms out keeping that letter in the upper left. I’m using Firefox 3.0.3 to view these, and I’m not sure if other browsers will work.

(It was much trickier than I expected to get the keys to change and move correctly, so I didn’t have time to modify the Flickr/GoogleMaps/YouTube/Twitter examples – I will later this week.)

HW6 Part 1 (no tweens): http://lehrblogger.com/nyu/classes/fall08/ajax/hw6/part1_notweens
HW6 Part 1 (partial keyboard): http://lehrblogger.com/nyu/classes/fall08/ajax/hw6/part1_partial
HW6 Part 1 (all): http://lehrblogger.com/nyu/classes/fall08/ajax/hw6/part1_all/
HW6 Part 2: http://lehrblogger.com/nyu/classes/fall08/ajax/hw6/part2/

I used the first few assignments for experimentation with the canvas tag to begin to think about the implementation of my keyboard project. For the first part, I used some Javascript and CSS to draw out rows of boxes for a basic keyboard layout. The second example draws and then resizes a simple rectangle within a canvas tag using scale() and translate(), but it should work for any content.

I initially had (in HW5 Part 2a) some question about whether I should use one canvas tag for the entire keyboard or multiple canvas tags for each key. I was thinking that it makes much more sense to use one for the whole keyboard, since everything will be scaling and translating at once (perhaps with photos off the screen not switching to a larger version? hmm). I started to run into problems, however, when I began to look into displaying text on a canvas tag. There are a few alternatives, and maybe something that doesn’t work in Firefox yet, but all seem to involve drawing the actual typecface vectors manually. This might work for now, but it would be nice to have selectable text on the pages, and I’m worried about S(earch)E(ngine)O(ptimization) later on, so I decided to look for other ways to make it work.

Instead, I continued to move forward with representing the keys as div tags (in HW5 Part 2b). I made a fair amount of progress displaying the keyboard, adding key listeners, and moving keys around appropriately. Multiple sizes are almost, but not quite, working, and once that is done I can work on tweens. I still need the text to resize smoothly though, and might be able to get something based off of this idea to work well, but I’m skeptical. Does anyone know of any other solutions? Maybe generating an image for each text field, and replacing the text with that when it’s being resized, and shrinking the image, and then replacing the image with text again when it’s done resizing?

More on that project later this week — the last assignment here was to modify the ‘animals’ example that he presented in class. It was the first example we had seen of a full web project – using HTML, CSS, and Javascript, as well as PHP and MySQL to pull information from a database. I had an absurd amount of trouble getting it to work on either the Dreamhost or the ITP servers, but I finally resolved the various issues. Getting the naming to work was much more manageable, but I learned the basics of using a database in the process. (The information for the animals is stored in a single database, so all visitors to the site are viewing and modifying the same animals – refresh the page to see any changes made by others.)

Note that I’ve noticed these are acting sporadically in browsers other than Firefox 3+, and I’ll try to figure out the browser compatibility issues this week.

HW4 Part 1: http://lehrblogger.com/nyu/classes/fall08/ajax/hw4/part1/
HW5 Parts 1 and 3: http://lehrblogger.com/nyu/classes/fall08/ajax/hw5/parts1and3/
HW5 Part 2a: http://lehrblogger.com/nyu/classes/fall08/ajax/hw5/part2a/
HW5 Part 2b: http://lehrblogger.com/nyu/classes/fall08/ajax/hw5/part2b/
HW5 Part 4: http://lehrblogger.com/nyu/classes/fall08/ajax/hw5/part4/

For my midterm project I want to build a visualization of the geographic paths followed by ideas and conversations on Twitter. Users can refer to other users in their tweets using the @username syntax, and people often post public replies to or ‘retweet’ other user’s posts. Twitter also associates some geographic information with users and with specific tweets. I plant to combine these two types of data to show the ‘jumps’ that an idea makes across a country or around the world.

I started off focusing on the ‘retweeting’ keyword that people use on Twitter to indicate that they are reposting something written by someone else (of the form “Retweeting @username text”). I wrote a Processing sketch (again in Scala) that gets the 15 most recent retweets from Twitter, prints them one by one, and continuously checks for new retweets in real time. I’ve posted a Processing page, but note that all output is just going to the computer’s console, and that they grey applet will not change.

A next step is to extract the author of the retweet and the author of the author of the original tweet, and possible previous authors if the post has been retweeted repeatedly. Twittervision.com has a geographic display of Tweets that is somewhat similar to my idea (without the conversational threading), and they also have an API that anyone can use to get location data for a specific user. Given the tweet, the series of users, and their (general) locations, the final task is (effectively and attractively) displaying it on a map/globe.

I continued my work with Scala for this assignment, for which we were asked to “Create a Processing sketch that uses input from a text file or URL.” Recently I’ve become increasingly interested in Twitter, and I decided to explore the reactions that people had to Tuesday’s presidential debate that they had marked with the ‘#debate’ hash tag. Twitter let’s you search past tweets, and returns up to 1500 results. I downloaded the tweets from Twitter, displayed them in a downward-scrolling list (oldest first), and set the greyscale for each word based on the number of occurrences of that word in other tweets currently on the screen (ignoring other hashtags and certain common words). One can get a rough sense of shifting debate/thought/discussion topics over time by watching which words are darkest as tweets scroll by.

Jorge Ortiz was again extremely helpful (see post on HW4). He helped me early on by providing and explaining a simple php script to obtain the raw search results via proxy (because otherwise it would be necessary to sign the applet). He also provided the code for the parallel threaded downloading of the tweets from Twitter, which was much faster than the previous implementation, and he answered many random Scala questions. It’s a tricky language, but it is also much more expressive, powerful, and intuitive than Java, and I’m getting better.

Since I wrote this assignment in Coderspiel’s Spde rather than Eclipse, I was able to easily export an applet that runs in a browser. See it on this Processing page (you’ll need to wait 20 seconds or so for it to load all of the tweets). (Also, be careful when opening this – it’s crashes browsers at random.. maybe a browser other than your primary one?)

UPDATE: I decreased the number of Tweets that this loads on startup to 20 pages with 15 each, since it seemed to be breaking sporadically.  It should behave more consistently now.

(Sorry for the late post – I was hoping to find a better way to post this online, but no luck so far.)

I had been wanting to try a programming language called Scala for a while, and recently there were a few posts on the Coderspiel blog about a Scala fork for the Processing Development Environment. I decided to take this weeks ICM assignment as an opportunity to try it out. Jorge Ortiz, a friend and Scala programmer extraordinaire, deserves immense credit for teaching me much about the new language and helping me resolve various issues.

For the second Coderspiel post, n8an rewrote Flocking (a simple emergent behavior simulation) in Scala, basing his work on a Processing applet written by my ICM instructor Daniel Shiffman. I based my work off of n8an’s Scala code, worked through everything carefully to get a feel for it, and added a couple of modifications (more on those in a minute). I worked in Eclipse (rather than the Spde that Coderspiel made available), and this was helpful for dealing with the syntax of a new language and a project with multiple classes, but I ran into problems trying to export my applet. I was able to use the Fat Jar Eclipse plugin (being sure to have both core.jar and scala-library.jar added to my build path) and a couple of semi-hacks recommended by Jorge (scroll to the end of Flocking.scala) to get a working applet. The Scala library jar is ~3.5mb and Fat Jar incorporates the entire thing, and this made my applet much bigger than it needed to be, so I tried to use ProGuard (as recommended by Coderspiel) to shrink it down. I couldn’t get this to give me a jar file that I could run, and I also couldn’t get the larger jar file to display in a browser. I needed to move on to other things, and hopefully I can get it working later.

The first modification I made to Flocking was the introduction of multiple species (represented by color). Boids only flock with members of the same species, and they steer away from members of other species. The second modification was collission detection – when two boids collide (because they were unable to turn quickly enough), both boids are removed from the screen, and there is a quickly shrinking ‘poof’ to represent the collision.

Right click and save this jar to try it out, and let me know if you have any questions about the code.

• Flocking_solo.jar (click to make new boids)
• Flocking.scala
• Flock.scala
• Boid.scala
• Poofs.scala
• Poof.scala
• Vector.scala