Inside info: the artwork is arranged by acquisition date, earliest acquisitions are top left and latest are bottom right.

We've just posted Processing 1.0 at http://processing.org/download. We're so excited about it, we even took time to write a press release.

CAMBRIDGE, Mass. and LOS ANGELES, Calif. - November 24, 2008 - The Processing project today announced the immediate availability of the Processing 1.0 product family, the highly anticipated release of industry-leading design and development software for virtually every creative workflow. Delivering radical breakthroughs in workflow efficiency - and packed with hundreds of innovative, time-saving features - the new Processing 1.0 product line advances the creative process across print, Web, interactive, film, video and mobile.

Whups! That's not the right one. Here we go:

Today, on November 24, 2008, we launch the 1.0 version of the Processing software. Processing is a programming language, development environment, and online community that since 2001 has promoted software literacy within the visual arts. Initially created to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing quickly developed into a tool for creating finished professional work as well.

Processing is a free, open source alternative to proprietary software tools with expensive licenses, making it accessible to schools and individual students. Its open source status encourages the community participation and collaboration that is vital to Processing's growth. Contributors share programs, contribute code, answer questions in the discussion forum, and build libraries to extend the possibilities of the software. The Processing community has written over seventy libraries to facilitate computer vision, data visualization, music, networking, and electronics.

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.

+ At New York University's graduate ITP program, Processing is taught alongside its sister project Arduino and PHP as part of the foundation course for 100 incoming students each year.

+ At UCLA, undergraduates in the Design | Media Arts program use Processing to learn the concepts and skills needed to imagine the next generation of web sites and video games.

+ At Lincoln Public Schools in Nebraska and the Phoenix Country Day School in Arizona, middle school teachers are experimenting with Processing to supplement traditional algebra and geometry classes.

Tens of thousands of companies, artists, designers, architects, and researchers use Processing to create an incredibly diverse range of projects.

+ Design firms such as Motion Theory provide motion graphics created with Processing for the TV commercials of companies like Nike, Budweiser, and Hewlett-Packard.

+ Bands such as R.E.M., Radiohead, and Modest Mouse have featured animation created with Processing in their music videos.

+ Publications such as the journal Nature, the New York Times, Seed, and Communications of the ACM have commissioned information graphics created with Processing.

+ The artist group HeHe used Processing to produce their award-winning Nuage Vert installation, a large-scale public visualization of pollution levels in Helsinki.

+ The University of Washington's Applied Physics Lab used Processing to create a visualization of a coastal marine ecosystem as a part of the NSF RISE project.

+ The Armstrong Institute for Interactive Media Studies at Miami University uses Processing to build visualization tools and analyze text for digital humanities research.

The Processing software runs on the Mac, Windows, and GNU/Linux platforms. With the click of a button, it exports applets for the Web or standalone applications for Mac, Windows, and GNU/Linux. Graphics from Processing programs may also be exported as PDF, DXF, or TIFF files and many other file formats. Future Processing releases will focus on faster 3D graphics, better video playback and capture, and enhancing the development environment. Some experimental versions of Processing have been adapted to other languages such as JavaScript, ActionScript, Ruby, Python, and Scala; other adaptations bring Processing to platforms like the OpenMoko, iPhone, and OLPC XO-1.

Processing was founded by Ben Fry and Casey Reas in 2001 while both were John Maeda's students at the MIT Media Lab. Further development has taken place at the Interaction Design Institute Ivrea, Carnegie Mellon University, and the UCLA, where Reas is chair of the Department of Design | Media Arts. Miami University, Oblong Industries, and the Rockefeller Foundation have generously contributed funding to the project.

The Cooper-Hewitt National Design Museum (a Smithsonian Institution) included Processing in its National Design Triennial. Works created with Processing were featured prominently in the Design and the Elastic Mind show at the Museum of Modern Art. Numerous design magazines, including Print, Eye, and Creativity, have highlighted the software.

For their work on Processing, Fry and Reas received the 2008 Muriel Cooper Prize from the Design Management Institute. The Processing community was awarded the 2005 Prix Ars Electronica Golden Nica award and the 2005 Interactive Design Prize from the Tokyo Type Director's Club.

The Processing website (www.processing.org) includes tutorials, exhibitions, interviews, a complete reference, and hundreds of software examples. The Discourse forum hosts continuous community discussions and dialog with the developers.

Extremely well done and congratulations to all involved!

Anyway, this morning I woke up and for some reason Pulp's Mis-Shapes was going around my head. When it was released, my naive 15-year-old self thought it was all about the rise of britpop/indie music and nerdy guitar bands having their day in the charts. I must have listened to it hundreds of times* without really thinking about it. Thankfully it's bubbled up into my consciousness on a wave of late 90s political memories to remind me that it's all a bit deeper than I first thought.

Listening now, of course this 1995 hit is about meaningful political change, about being sick to death of right-wing politics, about setting things right, about doing things our way:

"Brothers, sisters, can't you see?
The future's owned by you and me.
There won't be fighting in the street.
They think that they've got us beat but revenge is going to be so sweet.
We're making a move. We're making it now.
We're coming out of the sidelines.
Just put your hands up – it's a raid.
We want your homes, we want your lives,
we want the things you won't allow us.
We won't use guns, we won't use bombs
We'll use the one thing we've got more of – that's our minds.
And that's our minds. Yeah."

Jarvis Cocker's a smart cookie. Go Listen!

* maybe thousands of times – the double A-side single was one of the only CDs I had, and the fact that you could use any CD as the soundtrack to Ridge Racer on the PlayStation meant that the song was on repeat in my life for most of that year.

I don't have time to write a full explanation tonight (packing calls, tomorrow I'm in Montréal for Design Engaged), but I've got a quick solution which might be of use to you if you googled upon this page. Read on for more if you're interested in a quick overview.

Here's a test showing two stars, one created from the outside-in and one created from the inside-out.

The source code:

 
 
package {
  import com.senocular.drawing.Path;
 
  import flash.display.Sprite;
  import flash.filters.GlowFilter;
  import flash.geom.Point;
  import flash.text.TextFormat;
  import flash.text.TextFormatAlign;
 
  [SWF(backgroundColor='#ffffff')]
  public class PathTests extends Sprite
  {
     [Embed(systemFont="Helvetica Neue", fontName="Helvetica", mimeType='application/x-font', unicodeRange='U+00A0,U+0020-U+007E,U+00A1-U+00BF,U+02BB-U+02BC,U+2010-U+2015,U+2018-U+201D,U+2024-U+2026')]
    private static var _ignoreMe:String;
 
    [Embed(systemFont="Helvetica Neue", fontName="Helvetica", fontWeight="bold", mimeType='application/x-font', unicodeRange='U+00A0,U+0020-U+007E,U+00A1-U+00BF,U+02BB-U+02BC,U+2010-U+2015,U+2018-U+201D,U+2024-U+2026')]
    private static var _ignoreMeToo:String;
 
    public function PathTests()
    {
      stage.align = 'TL';
      stage.scaleMode = 'noScale';
 
      drawStar(new Point(stage.stageWidth/4, stage.stageHeight/2), true);
      drawStar(new Point(3*stage.stageWidth/4, stage.stageHeight/2), false);
    }
 
    public function drawStar(center:Point, inToOut:Boolean):void
    {
      var textFormat:TextFormat = new TextFormat("Helvetica", 11, 0x000000, true);
      textFormat.kerning = true;
      textFormat.letterSpacing = 0;
      textFormat.align = TextFormatAlign.CENTER;
 
      var innerRadius:Number = 50;
      var outerRadius:Number = 125;
      var midRadius:Number = (innerRadius + (outerRadius-innerRadius)/2); 
 
      var path:Path;
 
      var paths:Array = [];
 
      for (var a:Number = 0; a < 2*Math.PI; a+=Math.PI/18) {
        path = new Path();
        paths.push(path);
 
        if (inToOut) {
          path.moveTo(center.x + innerRadius * Math.cos(a),
                      center.y + innerRadius * Math.sin(a));
          path.lineTo(center.x + midRadius * Math.cos(a - Math.PI/36),
                      center.y + midRadius * Math.sin(a - Math.PI/36));
          path.lineTo(center.x + outerRadius * Math.cos(a),
                      center.y + outerRadius * Math.sin(a));
        }
        else {
          path.moveTo(center.x + outerRadius * Math.cos(a),
                      center.y + outerRadius * Math.sin(a));
          path.lineTo(center.x + midRadius * Math.cos(a + Math.PI/36),
                      center.y + midRadius * Math.sin(a + Math.PI/36));
          path.lineTo(center.x + innerRadius * Math.cos(a),
                      center.y + innerRadius * Math.sin(a));
        }
 
        var pathField:TextPathField = new TextPathField('Sample text', path, textFormat);
        pathField.filters = [ new GlowFilter(0xffffff, 1, 2, 2, 4, 1, false, false) ]
        addChild(pathField);
      }
 
      graphics.lineStyle(13,0xff9900);
      for each (path in paths) {
        path.draw(graphics);
      }
      graphics.lineStyle(11,0xffff00);
      for each (path in paths) {
        path.draw(graphics);
      }
    }
  }
}
 

And the TextPathField code that powers it:

 
 
package
{
  import com.senocular.drawing.Path;
 
  import flash.display.Sprite;
  import flash.geom.Matrix;
  import flash.geom.Point;
  import flash.geom.Rectangle;
  import flash.text.AntiAliasType;
  import flash.text.GridFitType;
  import flash.text.TextField;
  import flash.text.TextFormat;
  import flash.text.TextFormatAlign;
 
  /** depends on com.senocular.drawing.Path */
  public class TextPathField extends Sprite
  {
    public static const DEFAULT_TEXTFIELD_PARAMS:Object = {
      embedFonts: true,
      antiAliasType: AntiAliasType.ADVANCED,
      gridFitType: GridFitType.NONE
    };
 
    // TODO: getters and setters that call redraw
    public var text:String;
    public var path:Path;
 
    public var textFormat:TextFormat;
    public var textFieldParams:Object;
 
    public function TextPathField(text:String, path:Path, textFormat:TextFormat, textFieldParams:Object=null)
    {
      mouseEnabled = false;
      mouseChildren = false;
 
      this.text = text;
      this.path = path;
      this.textFormat = textFormat;
      this.textFieldParams = textFieldParams || DEFAULT_TEXTFIELD_PARAMS;
 
      redraw();
    }
 
    public function redraw():void
    {
      // clear everything away...
      while (numChildren > 0) {
        removeChildAt(0);
      }
 
      // make a dummy textfield so we can measure its width
      var textField:TextField = new TextField();
      applyParamsToField(textField);
      textField.defaultTextFormat = textFormat;
      textField.text = text;
      textField.width = textField.textWidth+4;
      textField.height = textField.textHeight+4;
 
      // bail out if there's no room
      if (path.length < textField.width) return;
 
      var t1:Number;
      var t2:Number;
 
      if (textFormat.align == TextFormatAlign.LEFT || textFormat.align == null) {
        t1 = 0;
        t2 = textField.width / path.length;
      }
      else if (textFormat.align == TextFormatAlign.RIGHT) {
        t1 = 1.0 - (textField.width / path.length);
        t2 = 1.0;
      }
      else if (textFormat.align == TextFormatAlign.CENTER) {
        t1 = (path.length/2 - textField.width/2) / path.length;
        t2 = (path.length/2 + textField.width/2) / path.length;
      }
      else {
        // throw error?
        trace('justify alignment unsupported in TextPathField');
      }
 
      var angleOffset:Number; // so we can do a 180º if we're running backwards
      var offsetSign:Number;  // -1 if we're starting at t2
      var tStart:Number;      // t1 or t2
 
      // TODO: there are probably more than two cases here...?
       if (path.pointAt(t1).x < path.pointAt(t2).x && path.angleAt(t1) < Math.PI/2 && path.angleAt(t1) > -Math.PI/2) {
        angleOffset = 0;
        offsetSign = 1;
        tStart = t1;
      }
      else {
        // this catches text that's running right to left or upside down
        angleOffset = Math.PI;
        offsetSign = -1;
        tStart = t2;
      } 
 
      // make a textfield for each char, centered on the line, using getCharBoundaries to rotate it around its center point
      var chars:Array = text.split('');
      for (var i:int = 0; i < chars.length; i++) {
        var rect:Rectangle = textField.getCharBoundaries(i);
        var yOffset:Number = textField.height/2;
        if (rect) {
          var t:Number = tStart + offsetSign*(rect.left+rect.width/2)/path.length;
          addCharTextField(chars[i], path.pointAt(t), new Point(rect.width/2, yOffset), angleOffset+path.angleAt(t));
        }
      }
    }
 
    // place the given character at pt, registered using rpt, and rotated by r radians
    private function addCharTextField(char:String, pt:Point, rpt:Point, r:Number):void
    {
      var textField:TextField = new TextField();
      applyParamsToField(textField);
      textField.defaultTextFormat = textFormat;
      textField.text = char;
      textField.width = textField.textWidth+4;
      textField.height = textField.textHeight+4;
 
      var matrix:Matrix = new Matrix();
      matrix.translate(-rpt.x, -rpt.y);
      matrix.rotate(r);
      //matrix.translate(rpt.x, rpt.y);
      matrix.translate(pt.x, pt.y);
      textField.transform.matrix = matrix;
 
      addChild(textField);
    }
 

 
    private function applyParamsToField(textField:TextField):void
    {
      for (var param:String in textFieldParams) {
        if (textField[param]) {
          textField[param] = textFieldParams[param];
        }
      }
    }
 
  }
 
}
 

Hopefully I can post more about how I'm using this class soon.

You can now view archived advisories for the following storms: Arthur, Bertha, Cristobal, Dolly, Edouard, Fay, Gustav, Hanna, Ike and Josephine.

I've noticed a frustrating problem with text in Flash that I've finally managed to find a workaround for. I'm testing in Mac OS X using Firefox 3 and Flash 9, but I've seen it on other systems too, and recently had help reproducing this bug from our client at MSNBC, so I'm pretty sure it's widespread.

Since this is a fairly esoteric issue that will only bother Flash programmers, I'll continue only in the full version of this post.

Here's the setup to reproduce the bug:

1. add an editable text field (flash.display.TextField or fl.controls.TextInput) to the left side of the stage
2. select the text in one sweep, releasing the mouse outside the browser window
3. start typing, or move the mouse back over the stage

If you start typing in this scenario, then the letters are erased as they are typed, because the text is still being selected as if you hadn't released the mouse. If you move your mouse back over the stage, then the selecting action is still in progress and doesn't stop until the mouse is clicked. Two-for-one buggy behaviour, how frustrating!

Note that the continued selection behaviour is a common problem in Flash that affects any site that uses SIFR to enhance headlines, for example.

Here's a swf that demonstrates the problem ("offscreen" includes outside of the flash):

And the code for the above swf.

 
package {
  import flash.display.Sprite;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.text.TextField;
  import flash.text.TextFieldType;
 
  [SWF(backgroundColor="#eeeeee")]
  public class TextInputSelectionBad extends Sprite
  {
    public var textField:TextField;
 
    public function TextInputSelectionBad()
    {
      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;
 
      textField = new TextField();
      textField.type = TextFieldType.INPUT;
      textField.text = "select me and release the mouse off screen";
      textField.x = textField.y = 10;
      textField.width = textField.textWidth + 8;
      textField.height = textField.textHeight + 4;
      addChild(textField);
 
      textField.textColor = 0x202020;
      textField.border = true;
      textField.borderColor = 0xdddddd;
      textField.background = true;
      textField.backgroundColor = 0xffffee;
    }
 
  }
}
 

Once more I'm assuming you're familiar with Flex Builder's actionscript projects, if not then similar code should work in the Flash editor, but you're on your own with that I'm afraid.

OK OK, what's the fix?

The solution I came up with is to add a listener to the stage for mouse leave, and to temporarily disable selection. Text entry still works because the field maintains focus, but the text is not deleted on input. Additionally, the continued selection behaviour disappears. Clicking anywhere on the stage immediately restores the selectable flag on the field and everything should work as normal.

Here's an example of a swf with the fix implemented:

Flash focus behaviour works differently in Mac and Windows, on Mac I think you have to click twice but this is normal once the mouse has been released outside an application – I haven't managed to get the caret to go to the clicked point in the field, caretIndex is read-only sadly.

The code for the fixed swf is:

 
 
package {
  import flash.display.Sprite;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.events.Event;
  import flash.events.MouseEvent;
  import flash.text.TextField;
  import flash.text.TextFieldType;
 
  [SWF(backgroundColor="#eeeeee")]
  public class TextInputSelection extends Sprite
  {
    public var textField:TextField;
 
    public function TextInputSelection()
    {
      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;
 
      textField = new TextField();
      textField.type = TextFieldType.INPUT;
      textField.text = "select me and release the mouse off screen";
      textField.x = textField.y = 10;
      textField.width = textField.textWidth + 8;
      textField.height = textField.textHeight + 4;
      addChild(textField);
 
      textField.textColor = 0x202020;
      textField.border = true;
      textField.borderColor = 0xdddddd;
      textField.background = true;
      textField.backgroundColor = 0xffffee;
 
      stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
    }
 
    private function onStageMouseLeave(event:Event):void
    {
      textField.selectable = false;
      stage.addEventListener(MouseEvent.MOUSE_DOWN, onStageMouseDown, true);
    }
 
    private function onStageMouseDown(event:Event):void
    {
      stage.removeEventListener(MouseEvent.MOUSE_DOWN, onStageMouseDown, true);
      textField.selectable = true;
      textField.setSelection(0,0);
    }
 
  }
}
 

I promise that my next post will have prettier pictures.

There are four storms active in the Atlantic right now:

There's much to say about this, not least the fact that it's the first thing I've ever really worked on that exists in a competitive environment with many credible alternatives.

However, there's still more to come so it will be a while before there's time to properly reflect. For now, let me echo Mike in saying I also think map design for the web continues to be an exciting and vibrant area to be working in, and leave you with a quote from Google's Ed Parsons:

That’s not to say the principals of design are not important in the creation of “maps” for screen display, indeed one could argue for the need of a “new” cartography which adopts rather than ignores the capabilities of screen based maps to portray information dynamically.

— Ed Parsons, "Cartography is dead, long live the map makers"

"In choosing templates for workaday graphical productions, it is worthwhile to look for excellent, conventional templates. Conventional templates immediately solve a lot of graphical reading problems for the viewer of the display. But the classics are often classics because they are off-the wall, unconventional, idiosyncratic, one-off, brilliant, historically original performances. Tinkering with Minard's Napoleon's March is no better than an artist tinkering with Picasso's Guernica."

— Ask E.T. Museum Visits