o yeah
Experiment 20090529
Another SVG/jQuery medly, Experiment 20090529 plays witht he SVG canvas, a circle, animation, and finishes with a little DOM manipulation, proving that I can add SVG animation to the background of virtually anything. This opens up some interesting possibilities. For example, I always wondered how one could construct an interface like a database modeller, or one similar to what you see in tinderbox. Sure, it’s easy to use the jQuery UI to make nice boxes that can be filled with all kinds of good things, but what about the smooth, curvy lines that connect node to node?
With some imagination, planning, and an engine that keeps track of the position, height, and width of floating DOM nodes, I think it would be within our reach to add that polish that is typical in desktop apps.
javascript
:: the gist of the page in a click ::
DynaCloudlet v0.1 – another bookmarklet. Drag to your favorites/bookmarks, visit any web page, then click the bookmark. I’ll explain it tomorrow when I have more energy.
Note: this has not been extensively tested, but worst-case scenario, it just will not work or will throw an error. Good luck. 
———-
[UPDATE 2009-05-29] As promised, more info…
DynaCloudlet was actually very simple to program. There are 3 main pieces:
- the Bookmarklet code – this loads jQuery from ajax.googleapis.com, then loads my script which loads the next two items;
- the css and Javascript driving the dialog box (which all came ready to run from the jQuery UI project);
- the jQuery plugin called DynaCloud which hunts for non-stop-words and tallies up their frequency, and then generates the tag cloud based on that data.
javascript
-
What are Steve’s fingers doing now?
Steve’s Fingers
Note: requires an SVG-capable browser. If you keep your browser fresh-smelling with upgrades, you should be OK. (Google Chrome doesn’t like it. There’s always gotta be one.)
This application graphs Steve‘s fingers as he types his stories (not in real-time, unfortunately, but maybe in a future release). It gets a live feed from his web site, captures the last 4 stories, converts the non-HTML characters to Unicode numeric values, and plots them on a Scalable Vector Graphics (SVG) canvas. This is my first venture into the world of SVG, and I couldn’t have achieved this level of graphical manipulation without the help of the SVG Integration jQuery plugin.
javascript
Today’s script is called a bookmarklet. It’s a script which is embedded in a bookmark in your browser. After you’ve bookmarked this one, you can go to most anyweb site*, click it, and watch what it does to the page.
Experiment 20090525
- Drag the above link to your bookmarks bar, or right-click it and select Save As Bookmark (or whatever your menu item reads).
- OPTIONAL: Go to any blog (e.g. http://james.revillini.com, http://steveersinghaus.com, etc.)
- Click the bookmarklet (it should be labeled ‘Experiment 20090525′ unless you renamed it).
WARNING: This script is really processor intensive. Before you proceed, you might want to save anything you’re working on and finish up on any other web sites you might be using.
* except for Carianne’s, and I can’t figure out why!
[UPDATE 2009-05-26 5:31pm] On some sites, the text never shinks back down, but at least it’s not throwing errors.
javascript
experiment 20090524
Experiment 20090524 plays with dimensions and begins to explore randomness and likelihood. It is inspired by The Only Man. Future experiments will build on some of the concepts here.
———–
[UPDATE 2009-05-24 15:25] I am shocked to discover that FF3 on a PC cannot display this application correctly because of abug for which there is apparently no workaround right now. On Ubuntu, it’s fine, oddly enough. It’s also fine in Chrome for Windows. I shall try to find a hack to make this work.
———–
[UPDATE 2009-05-24 16:08] OK, I spoke too soon; it’s not a bug, per se, it’s Firefox apparently following some sort of rule for font selection which few other browsers use. Then again, the “proper” way to follow this rule is open to interpretation. I love firefox, but I wish development decisions that are so controversial would be put to a vote, especially since the *dings used to work in this browser. Sorry FF3/PC users, this application just won’t display correctly for you. 
javascript
$(poetic redux).rewrite_stuff()
Poetic Redux v 0.1
PR eats blog posts for breakfast, be they poetry, or stories, or emotional rants, and rewrites them a little bit. This experiment makes use of the jQuery UI. Specifically, I used the ‘South Street‘ css theme and the jQuery UI datepicker and tabs widgets. PR uses AJAX and a PHP proxy to fetch remote RSS feeds, then it hands it off to the jQuery core for processing and insertion on the page. Finally, hitting the REDUX button calls up the thesaurus web service API (big thank you to words.bighugelabs.com for this), and goes to town on the content it downloaded.
This experiment, again, took WAY longer than I expected, and is another reminder to self that I need to limit the scope of what I incorporate into each experiment. It’s just hard, because I want everyone to find the scripts interesting!!!
Note: please don’t REDUX too much … I’m only allowed to hit the API at bighugelabs 10000/month. But feel free to do a few per day if you like. I think that should be fine.
javascript
RSS Invaders :: shoot feeds
UPDATE 2009-05-23 09:07
I just couldn’t leave well enough alone, now could I? RSS Invaders v 0.2.1 adds music, improves collision detection a little, and should have improved performance by a lot, although to be honest I’m not seeing it. I don’t know if that’s a side effect of the flash being present to stream the mp3, or what. Other improvements include score – smaller words get a bigger score as calculated by (20 – (word length)); text does not highlight due to mouse interaction anymore – that was annoying.
————–
UPDATE 2009-05-22 20:24
RSS Invaders v 0.2 is up. I added the collision detection. It’s buggy, but works fairly well. Mostly, I need to work on performance-related issues, which are always going to be a problem since JavaScript is interpreted on the fly, and not compiled into the efficient machine code that computers adore. I also, in researching collision detection, came across what I think is going to become the foundation of future RSS Invaders versions: gameQuery! gameQuery provides many nice functions which would make javascript game programming much more succint and reliable. For this project, I wanted to roll my own just to see if I could. I’m happy with the results.
————–
This first script is old-school meets older-school meets new-school: RSS Invaders v 0.1
It’s an emulation of the famous game, Space Invaders, with a Web 2.0 twist in that it dynamically fetches a feed from Steve Ersinghaus’ stories category and pulls the excerpt in as the invading force! Not all features have been implemented. I didn’t get to collision detection, so the missiles don’t kill anything, but I had to cut myself off somewhere.
The fact that it emulated this old game makes it old school. The fact that it goes a step further and uses ASCII characters to depict the whole thing makes it older-school (or geek-school), and the AJAX bit is the new-school.
Don’t expect stuff like this for my future scripts. I want to try to do something ‘big’ like this every week or two, but in general, my experiments need to be more limited in scope and functionality because this took me 4 hours to program and debug. Still, when you think about how the original programmers of Space Invaders probably toiled over the program for months, if not years, 4 hours is pretty decent, and it’s a tribute to how far these coding libraries have come.
I’m going to attempt to translate my JavaScript code into pseudo-code for you. This means you should be able to read and understand it without knowledge of programming, and get an idea for program structure.
when the page is ready {
welcome the user
load the board
animate the board
append the following to the board:
status bar and title
invaders container
ship
get data from steve's site. when we got that data {
add the description to the invaders container
use the title and url to build a link to give credit at the bottom
}
start moving the invaders {
to the right once per second
if the invaders have gone past the right edge of the board {
move them down and reverse their direction
}
if the invaders strike the ship {
GAME OVER!
}
}
start moving the ship along with the mouse, but {
make sure it doesn't move too far to the left or right
}
if the mouse is clicked {
create a missile right where the ship is
animate it upward until it is off screen
}
}
Here’s the actual code that’s doing it all: rss-invaders.js
I plan to get the collision detection going, as well as a soundtrack (JOHN! hint hint) and a few other bells and whistles in v 0.2. None of this stuff can be reproduced without permission. That’s my license and I’m sticking to it until I figure out a more elegant way to license it.
javascript
This year, I’m participating in 100 Days, a little project started by Steve Ersinghaus and Carianne Mack (now Garside) which puts creativity to a test of time, stamina, and rhythm. The rule is, you have to do your thing every day for 100 Days. Also, the works should be interrelated somehow. Steve has all the players gathered in his netvibes aggregator, but here’s the rollcall:
- steve – short stories
- carianne – drawings
- jessica – pinhole photographs
- neha – poetry
- jim – scripts using jQuery
- maggie – food (wait, are we getting served this food daily? I hope so.)
So there you go. I’m hoping Steve will switch the netvibes aggregator to the “100 Days” tag feed only. Then again, it probably doesn’t matter because this is probably all I’ll use my blog for in the next 100 days anyway. [UPDATE: thanks Steve] Oh yeah – that reminds me – this all starts on May 22.
javascript life web
