Before taking a crack at any Design Then Code project tutorials you'll need some knowledge of Xcode, Objective-C, Cocoa and UIKit. My goal is for this guide to help bridge the gap between having no knowledge of iOS development and having enough to start tackling more interesting projects.

Octopress is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator powering Github Pages. To start blogging with with Jekyll, you have to write your own HTML templates, CSS, Javascripts and set up your configuration. But with Octopress All of that is already taken care of.

Curveship is an interactive fiction system that provides a world model (of characters, objects, locations, and things that happen) while also modeling the narrative discourse, so that the narration and description of the simulated world can change. Curveship can tell events out of order, using flashback and other techniques, and can tell the story from the standpoint of particular characters and their perceptions and understandings.

Formulas for performing a number of geometric functions on a computer.

The Most Pixels Ever is an open-source Java framework for spanning Processing sketches across multiple screens. We are also developing a C++ client for use with openFrameWorks.

TONS of processing goodness: big screen stuff, tutorials, all good.

From September 2010, myself with CreativeApplications.Net will be the curator of the online exhibition of projects on Processing.org. It’s a great privilege and pleasure to contribute to the almost 10 year old open source project initiated by Ben Fry and Casey Reas. Processing has won hearts and minds of many artists, researchers, designers and architects over the years and still remains one of the most used creative code programming environments. Students at hundreds of schools around the world use Processing for classes ranging from middle school math education to undergraduate programming courses to graduate fine arts studios. Tens of thousands of companies, artists, designers, architects, and researchers use Processing to create an incredibly diverse range of projects. CAN has posted some of these but processing.org/exhibition/ still remains an archive of some of the most amazing Processing projects out there. It’s also easy to get the quick sense of how Processing has changed over the years by looking at the exhibition, from Applets to large installations. The original idea was simple; to show what Processing can do. A priority in recent years has been to show the range of what is possible (fabrication, installation, rendered video) in addition to realtime graphics – Casey writes. From this month very few carefully selected projects shown on CAN will make their way to the exhibition.

We kick things off with the wonderful Understanding Shakespeare by Stephan Thiel. In case you missed it, see this post on CAN.
Understanding Shakespeare is an attempt to create a new visual understanding of the work by analysing most frequently used words for each character. Using Processing, a scene is represented by a block of text and scaled relatively according to its number of words. Characters are ordered by appearance from left to right throughout the play. The major character’s speeches are highlighted to illustrate their amounts of spoken words as compared to the rest of the play…more

Additionally to the above, Stephan and two fellow designers are trying to give something back to the Processing community. They are providing teaching materials available at www.creativecoding.org which they use at various german universities. So far, these have developed into a well known resource among german designers and media artists and the team hopes to translate them to english soon.

We leave you with 10 of the 144 projects that have made their way to the Processing exhibition, starting with Valence by Ben Fry (2002) and ending One Perfect Cube by Florian Jenett (2010). See all at processing.org/exhibition/

Processing.org Exhibition now curated by FV [News] is a post from: CreativeApplications.Net | Follow us on Twitter - Facebook - Flickr - Vimeo

Related Posts:

Getting Started with Processing [Books] + ContestBegotten [iPhone, Mobilizing, c++]Sync/Lost [Processing]Processing is Coming to Android [Processing, Android]Toxiclibs [Processing]The HyperCard Legacy [Theory, Mac]

bildr is a community driven site for Artists, Designers, Makers, Builders, or anyone interested in the world between electronics and code.

Part 1: Loading, projecting, and drawing geodata

I’m getting into more canvas and JavaScript for interactive mapping. Much of the Flash/ActionScript work I’ve written or come to rely upon is directly portable to JS/canvas. What’s missing is a sweet RIA framework and IDE for the kind of development Flash and Flex have made possible for years.

Luckily it’s not hard to roll our own interactive web map using web standard technologies. In this post I’m just showing off the basics: dynamically loading geodata, projecting it client-side, and rendering to the canvas element.

Hopefully the above map shows up for you. It’s loaded into this blog post with dynamic KML data, projected using the Proj4js library, and drawn onto HTML’s canvas element using JavaScript. You can check out the P.O.C. on a separate page.

Loading geographic data
It all starts with data. Points, polylines, or polygons — typically defined by latitude/longitude coordinates. Your data may be in a CSV file or in a database. For a simple interactive web map it’s best if it’s in a common GIS file format, like the Shapefile or KML.

These days, it’s not too hard to load a geographic layer on top of a web map — using Google Maps or OpenLayers, say. But since we’re looking down the road to interactivity, custom projections, and thematic mapping, it’s best to roll our own. Luckily, getting the data in is pretty easy.

In ActionScript I would use Edwin van Rijkom’s ESRI SHP parser, my own E00 parser, or some simple custom methods I’ve written to load in KML documents. Tom Carden of Stamen has done some great work porting the AS3 SHP library to JavaScript, with additional classes and methods to allow basic layering, panning, and zooming.

Carden’s classes are great; for demo purposes, and to keep this as lightweight as possible, I’ve just written a quick JavaScript method to grab what I need from a KML document:

$.get( "data/kml/generalized_african_countries.kml", function( xml ) {
    var features = new Array();
    $( xml ).find( 'Placemark' ).each( function() {
        var rings = new Array();
        $( this ).find( 'outerBoundaryIs' ).each( function() {
            var ring = new Array();
            var coordsText = $( this ).find( 'coordinates' ).text();
            var coordStrings = coordsText.split( ' ' );
            for ( var coordText in coordStrings ) {
                var coordinate = new Array();
                var coordSplit = coordStrings[ coordText ].split( ',' );
                for ( var coordInd in coordSplit ) coordinate.push( Number( coordSplit[ coordInd ] ) );
                ring.push( coordinate );
            }
            rings.push( ring );
        } );
        features.push( rings );
    } );
       
    /* feature coordinates all loaded -- now do something with them */
       
} );
You’ll notice a bit of jQuery in there. And you’ll also notice that it grabs only coordinate data and works only for polygons. But it produces an array of feature coordinates, which is an array of ring coordinates, which is an array of lat/long coordinates, which is all we need for the current application.

Projecting geographic data
One of my biggest beefs with the typical online map providers is that they’re all rendered in a Mercator projection. No problem for most purposes (and great for producing those 90 degree road intersections), but not so great for country-level mapping and bad for many thematic mapping pursuits. That’s one reason we’re rolling our own here.

PROJ.4 is a generally sweet projections library, originally written in C by Gerald Evenden then of the USGS. It’s been ported to JavaScript as Proj4js. To use it you just have to define source and a dest objects:

Proj4js.defs[ 'albersEqualArea_Africa' ] = '+title= albers_AFR\
                                            +proj=aea\
                                            +lat_1=20\
                                            +lat_2=-23\
                                            +lat_0=0\
                                            +lon_0=25\
                                            +x_0=0\
                                            +y_0=0\
                                            +ellps=WGS84\
                                            +datum=WGS84\
                                            +units=m\
                                            +no_defs';
var source = new Proj4js.Proj( 'WGS:84' );
var dest = new Proj4js.Proj( 'albersEqualArea_Africa' );
And thereafter you can call

Proj4js.transform( source, dest, pt );
where pt is any object with x and y properties. So all coordinates gathered from the KML above can be run through the Proj4js.transform() method, in this case applying a custom Albers Equal Area projection (proj=aea) for the African continent.

Drawing geographic data on the canvas element
The results of the above can be easily rendered to HTML’s canvas element using JavaScript. I’m used to ActionScript’s Graphics class, and its assorted vector drawing methods. Of course, given the common ECMAScript heritage, the JS methods are nearly identical. So the projected linework is rendered thusly:

function drawPolygonFeatures( features, minX, maxX, minY, maxY )
{
    var c_canvas = document.getElementById( "map" );
    var context = c_canvas.getContext("2d");
    var multiFactor = Math.min( c_canvas.width / ( maxX - minX ), c_canvas.height / ( maxY - minY ) );
    var x = 0; var y = 0;
    for ( var featureNum in features ) {
        for ( var ringNum in features[ featureNum ] ) {
            var ring = features[ featureNum ][ ringNum ];
            context.moveTo( ( ring[ 0 ][ 0 ] - minX ) * multiFactor, c_canvas.height - ( ring[ 0 ][ 1 ] - minY ) * multiFactor );                  
            for ( var coordNum = 1; coordNum < ring.length; coordNum++ ) {
                x = ( ring[ coordNum ][ 0 ] - minX ) * multiFactor;
                y = c_canvas.height - ( ring[ coordNum ][ 1 ] - minY ) * multiFactor;
                context.lineTo( x, y );
            }
        }
    }
    context.shadowOffsetX = context.shadowOffsetY = 3;
    context.shadowBlur    = 4;
    context.shadowColor   = 'rgba(0, 0, 0, 0.5)';
    context.fillStyle = "#0099cc";
    context.fill();
    context.shadowOffsetX = context.shadowOffsetY = context.shadowBlur = 0;
    context.strokeStyle = "#fff";
    context.stroke();
}
That method’s made a bit longer by that bitchin’ drop shadow (sorry Firefox, but you Konqueror folks should be cool). See above, or the P.O.C. on a separate page.

Up next
So far this has been pretty sweet: we’ve loaded coordinate data dynamically, projected it, and drawn it to the canvas element. But it hasn’t exactly lived up to the “interactive” part of the title. Next time I hope to get going on panning and zooming, feature mouse-over, and perhaps even attribute loading and thematic mapping.

Over the years, I find myself going back to the same online resources to learn specific things which one might not cover until chapter 14 of the corresponding manual. Some are tutorials, some are resources, and some are just plain confusing, but they have all helped me along my journey and I would like to acknowledge them here.

tons of info and sample code for interfacingthe AD7746 with Arduino

sample code for interfacing a touch sensor to the arduino

Development Seed is a unique mix of a strategic consultancy and an open source product development company. As you can see from some of our past projects, we specialize in implementing technology projects for large international development organizations and leading open source research and development initiatives.

For those who couldn’t be there, and for those who were there and seek to savor the memories, here is An Event Apart Chicago, all wrapped up in a pretty bow:

AEA Chicago – official photo set
By John Morrison, subism studios llc. See also (and contribute to) An Event Apart Chicago 2009 Pool, a user group on Flickr.
A Feed Apart Chicago
Live tweeting from the show, captured forever and still being updated. Includes complete blow-by-blow from Whitney Hess.
Luke W’s Notes on the Show
Smart note-taking by Luke Wroblewski, design lead for Yahoo!, frequent AEA speaker, and author of Web Form Design: Filling in the Blanks (Rosenfeld Media, 2008):

Jeffrey Zeldman: A Site Redesign
Jason Santa Maria: Thinking Small
Kristina Halvorson: Content First
Dan Brown: Concept Models -A Tool for Planning Websites
Whitney Hess: DIY UX -Give Your Users an Upgrade
Andy Clarke: Walls Come Tumbling Down
Eric Meyer: JavaScript Will Save Us All (not captured)
Aaron Gustafson: Using CSS3 Today with eCSStender (not captured)
Simon Willison: Building Things Fast
Luke Wroblewski: Web Form Design in Action (download slides)
Dan Rubin: Designing Virtual Realism
Dan Cederholm: Progressive Enrichment With CSS3 (not captured)
Three years of An Event Apart Presentations

Note: Comment posting here is a bit wonky at the moment. We are investigating the cause. Normal commenting has been restored. Thank you, Noel Jackson.

Short URL: zeldman.com/?p=2695

This is the online home of Version Control with Subversion, a free book about Subversion, a new version control system designed to supplant CVS.

Static HTML with Haml

A series of excellent presentations held by Douglas Crockford from Yahoo!

Ruby Learning Test #1: Are You There, World?