Day 4 - Overwhelmed

p393.mov Watch on Posterous

We toured Nairobi today. History, politics, religion, oppression, hope, fear and violence.

We visited the site of the 1998 US Embassy bombing in Nairobi http://en.m.wikipedia.org/wiki/1998_United_States_embassy_bombings

We drove through the slums that sit right next to wealthy neighborhoods. The contrast is unbelievable.

It's going to take me some time to process all of what I've seen and heard today.

Posted via email from Color and Voice

Morning

Posted via email from Color and Voice

On Game Design, Inspiration and an Apple Trailers Addiction

I have a secret to confess. I'm addicted to Apple Trailers. Odd, I know, but I love the whole experience.

The trailers are great little mico-movies. The juxtapositions of ideas that you get are fantastic. On any given view you can have Saw III next to Toy Story III. When you cram those two concepts together you end up with a Buzz Lightyear that is more deserving of the name.

Try this exercise. Watch the first two trailers that show up in the upper left hand corner of Apple Trailers. Then, combine all the characters in a game, pitting the first cast against the second cast. Quirky yes, but you start to look at things differently.

And that's the point. If your trying to create new ideas, sometimes you have to combine unnatural ingredients to create a killer mix.

Posted via email from Color and Voice

Day 1. Stuck in Portland

Thanks to Hurricane Irene, we're stuck in Portland for another day. We've been re-routed through Canada and then Europe before arriving in Kenya on Monday at 1:30 in the morning.

The last few weeks have been insane. It's strange that before and after every trip the level of tension and stress goes through the roof.

Spending the day walking around Portalnd, Italian Fest and various coffee shops trying to get an internet connection.

I'm excited to begin, to learn, to see things I've never seen before. In conversations leading up to this trip, there has always been the expectation that I will be changed, that I will return different. I'm fully expecting that.

My wife and I talked about "The Trip" as it's been dubbed. We agreed that I will return with a new zeal for things not yet know. The coming weeks are pregnant with potential.

But between Africa and now is 30 hours of travel. So, I've got that going for me.

Posted via email from Color and Voice

My computing gear for Africa

No heavy laptop for me.

Sent from my iPhone

Posted via email from Color and Voice

The Semantic Grid System - I need to check this out... next year

Check out this website I found at semantic.gs

Posted via email from Color and Voice

Aurasma - Augmented Reality Engine

via aurasma.com

Posted via email from Color and Voice

spin.js - It's the little things in life that are awesome - Thanks @robhudson

spin.js spin.min.js

Features

• No images, no external CSS
• No dependencies
• Highly configurable
• Resolution independant
• Works in all major browsers, including IE6
• Smaller than an animated GIF (2.8K minified, 1.7K gzipped)
• MIT License

Example

How it works

Spin.js uses the CSS3 to render the UI, falling back to VML Internet Explorer. If supported by the browser, @keyframe rules are used to animate the spinner.

Usage

var opts = { lines: 12, // The number of lines to draw length: 7, // The length of each line width: 5, // The line thickness radius: 10, // The radius of the inner circle color: '#000', // #rbg or #rrggbb speed: 1, // Rounds per second trail: 100, // Afterglow percentage shadow: true // Whether to render a shadow }; var target = document.getElementById('foo'); var spinner = new Spinner(opts).spin(target);

The spin() method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.

Manual positioning

In order to manually position the spinner, invoke spin() without arguments and use the el property to access the HTML element:

var spinner = new Spinner().spin(); target.appendChild(spinner.el);

The returned element is a DIV with position:relative and no height. The center of the spinner is positioned at the top left corner of this DIV.

Hiding the spinner

To hide the spinner, invoke the stop() method, which removes the UI elements from the DOM and stops the animation. Stopped spinners may be reused by calling spin() again.

jQuery plugin

Spin.js does not require jQuery. Anyway, if you use jQuery (or zepto.js) you may use the following plugin:

$.fn.spin = function(opts) { this.each(function() { var spinner = $(this).data('spinner'); if (spinner) spinner.stop(); if (opts !== false) { $(this).data('spinner', new Spinner(opts).spin(this)); } }); return this; }

Supported browsers

Spin.js has been successfully tested in the following browsers:

• Chrome
• Safari 4+
• Firefox 3.5+
• IE 6,7,8,9+
• Opera 10.6+
• Mobile Safari (iOS 4)

Contact

If you encounter any problems, please use the GitHub issue tracker.
For updates follow me on Twitter.
If you like spin.js and use it in the wild let me know.

via fgnass.github.com

Posted via email from Color and Voice

Apple OS X Lion Buttons in CSS | Improve your UI | Pixify - Very pretty

Use OS X Lion to Improve Your UI

As you probably know, OS X Lion was released yesterday. While there are 250 some odd new features in Lion, what you probably notice first is the new interface design. Part of the new design is new icon buttons in apps like Mail, seen below. I'm going to recreate OS X Lion's buttons in CSS for use in your UI.

Download Files View Demo

The New Look

The new control bar in Mail. The colored, gel-like buttons have been replaced with smaller, monochrome buttons. The buttons have a slight background gradient while the icons have a dark inner shadow and a white drop shadow to give an inset feeling.

Lion Buttons in CSS

I want to use similar buttons in my app's user interface. I would like to add a single class to my links to indicate a button or an icon button: button or icon. I want to support grouping of buttons, so I can add a second class for that: left, middle, or right.

I used Glyphish's nice icon set to create my icon buttons. I simply numbered the buttons 1 to 200 and wrote a three-line script to spit out the CSS for each of the 200 buttons. To use an icon just add another class: iconX, where X is the icon number.

Buttons Demo

Button hereLeftMiddleRightLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabel

And here is the complete set of icon buttons:

LabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabel/span>LabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabel

Follow us on twitter or signup to be notified by email when we publish new stuff like this.

Bonus GIF

Also new to Lion is the progress bar. Here's an an Apple-esque animated GIF that you can use while you load all those scripts.

Download Files

Support: Firefox, Chrome, Safari, IE7+, IE6 (via Fireworks PNG transparency fix)
License: Creative Commons CC-BY (give attribution if you want to)

via pixify.com

Posted via email from Color and Voice

Education | Brighton Digital Festival - Want to do here in Eugene!

via brightondigitalfestival.co.uk

Posted via email from Color and Voice

HTML5 Demos and Examples - Awesome examples

Check out this website I found at html5demos.com

Posted via email from Color and Voice

Oh Land - crazy site design

via ohlandmusic.com

Posted via email from Color and Voice

Front End Development Guidelines - Great Read

Aggressive Degradation

It's worth noting that this is a personal opinion, and best suited to very specific situations. The stance of aggressive degradation will not be well received in large commercial projects or enterprise solutions relying upon older browsers.

Aggressive degradation dictates that if a particular (older) browser cannot render a certain effect, it should simply be omitted. A CSS3 button is a good example. Effects such as border-radius, box-shadow, text-shadow and gradients will be displayed in cutting edge browsers. A graceful fallback of a .PNG would be provided for slightly older browsers, and the most graceful of all solutions would include a PNG-Fix for IE6 or the use of filter arguments to replicate gradients and shadows. However, aggressive degradation in this situation instructs you to neglect the older browsers and present them with a flat, satisfactory object.

Put simply, aggressive degradation boils down to: if your browser can't render a gradient or a box shadow, tough luck.

While not ideal for every situation, it ensures the timely delivery of projects and that the root product is still usable and not reliant on (validation breaking) hacks.

via taitems.github.com

Posted via email from Color and Voice

mrdoob/three.js - GitHub - thanks @robhudson

three.js

Javascript 3D Engine

The aim of the project is to create a lightweight 3D engine with a very low level of complexity — in other words, for dummies. The engine can render using <canvas>, <svg> and WebGL.

Contributors — Getting Started — API Reference

More? #three.js on irc.freenode.net

Examples

WebGL (Context 3D)

Canvas (Context 2D)

Featured projects

Usage

Download the minified library and include it in your html.

<script src="js/Three.js"></script>

This code creates a camera, then creates a scene, adds a cube on it, creates a <canvas> renderer and adds its viewport in the document.body element.

<script>  var camera, scene, renderer, geometry, material, mesh;  init(); animate();  function init() {  camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000;  scene = new THREE.Scene();  geometry = new THREE.CubeGeometry( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );  mesh = new THREE.Mesh( geometry, material ); scene.addObject( mesh );  renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );  document.body.appendChild( renderer.domElement );  }  function animate() {  // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility. requestAnimationFrame( animate ); render();  }  function render() {  mesh.rotation.x += 0.01; mesh.rotation.y += 0.02;  renderer.render( scene, camera );  }  </script>

Change Log

2011 07 06 - r42 (277.852 KB, gzip, gzip: 69.469 KB)

• Added AnaglypWebGLRenderer and CrosseyedWebGLRenderer. (mrdoob, alteredq and marklundin)
• Added TextGeometry. (zz85 and alteredq)
• Added setViewOffset method to Camera. (greggman)
• Renamed geometries to *Geometry. (mrdoob)
• Improved Blender exporter. (alteredq, sweetfish and Jhonnyg)
• Added Blender 2.58 exporter. (georgik)
• Fixed Matrix4.multiply(). (thanks lukem1)
• Added support for additional Euler rotation orders in Matrix4. (rectalogic)
• Renamed QuakeCamera to FirstPersonCamera. (chriskillpack)
• Improved Normal Map Shader. (alteredq)
• Collision now supports Object3D.flipSided and Object3D.doubleSided. (NINE78)
• Removed most of SceneUtils methods. (mrdoob)
• Removed Sound object and SoundRenderer. (mrdoob)

2011 05 31 - r41/ROME (265.317 KB, gzip: 64.849 KB)

(Up to this point, some rome specific features managed to get in the lib. The aim is to clean this up in next revisions.)

• Improved Blender Object and Scene exporters. (alteredq)
• Fixes on WebGL attributes. (alteredq and empaempa)
• Reduced overall memory footprint. (mrdoob)
• Added Face4 support to CollisionSystem. (NINE78)
• Added Blender 2.57 exporter. (remoe)
• Added Particle support to Ray. (mrdoob and jaycrossler)
• Improved Ray.intersectObject performance by checking boundingSphere first. (mrdoob)
• Added TrackballCamera. (egraether)
• Added repeat and offset properties to Texture. (mrdoob and alteredq)
• Cleaned up Vector2, Vector3 and Vector4. (egraether)

2011 04 24 - r40 (263.774 KB, gzip: 64.320 KB)

• Fixed Object3D.lookAt. (mrdoob)
• More and more Blender exporter goodness. (alteredq and mrdoob)
• Improved CollisionSystem. (drojdjou and alteredq)
• Fixes on WebGLRenderer. (empaempa)
• Added Trident object. (sroucheray)
• Added data object to Renderers for getting number of vertices/faces/callDraws from last render. (mrdoob)
• Fixed Projector handling Particles with hierarchies. (mrdoob)

2011 04 09 - r39 (249.048 KB, gzip: 61.020 KB)

• Improved WebGLRenderer program cache. (alteredq)
• Added support for pre-computed edges in loaders and exporters. (alteredq)
• Added Collisions classes. (drojdjou)
• Added Sprite object. (empaempa)
• Fixed *Loader issue where Workers were kept alive and next loads were delayed. (alteredq)
• Added THREE namespace to all the classes that missed it. (mrdoob)

2011 03 31 - r38 (225.442 KB, gzip: 55.908 KB)

• Added LensFlare light. (empaempa)
• Added ShadowVolume object (stencil shadows). (empaempa)
• Improved Blender Exporter plus added Scene support. (alteredq)
• Blender Importer for loading JSON files. (alteredq)
• Added load/complete callbacks to Loader (mrdoob)
• Minor WebGL blend mode clean up. (mrdoob)
• *Materials now extend Material (mrdoob)
• material.transparent define whether material is transparent or not (before we were guessing). (mrdoob)
• Added internal program cache to WebGLRenderer (reuse already available programs). (mrdoob)

2011 03 22 - r37 (208.495 KB, gzip: 51.376 KB)

• Changed JSON file format. (Re-exporting of models required) (alteredq and mrdoob)
• Updated Blender and 3DSMAX exporters for new format. (alteredq)
• Vertex colors are now per-face (alteredq)
• Geometry.uvs is now a multidimensional array (allowing infinite uv sets) (alteredq)
• CanvasRenderer renders Face4 again (without spliting to 2 Face3) (mrdoob)
• ParticleCircleMaterial > ParticleCanvasMaterial. Allowing injecting any canvas.context code! (mrdoob)

2011 03 14 - r36 (194.547 KB, gzip: 48.608 KB)

• Added 3DSMAX exporter. (alteredq)
• Fixed WebGLRenderer aspect ratio bug when scene had only one material. (mrdoob)
• Added sizeAttenuation property to ParticleBasicMaterial. (mrdoob)
• Added PathCamera. (alteredq)
• Fixed WebGLRenderer bug when Camera has a parent. CameraCamera.updateMatrix method. (empaempa)
• Fixed Camera.updateMatrix method and Object3D.updateMatrix. (mrdoob)

2011 03 06 - r35 (187.875 KB, gzip: 46.433 KB)

• Added methods translate, translateX, translateY, translateZ and lookAt methods to Object3D. (mrdoob)
• Added methods setViewport and setScissor to WebGLRenderer. (alteredq)
• Added support for non-po2 textures. (mrdoob and alteredq)
• Minor API clean up. (mrdoob)

2011 03 02 - r34 (186.045 KB, gzip: 45.953 KB)

• Now using camera.matrixWorldInverse instead of camera.matrixWorld for projecting. (empaempa and mrdoob)
• Camel cased properties and object json format (Re-exporting of models required) (alteredq)
• Added QuakeCamera for easy fly-bys (alteredq)
• Added LOD example (alteredq)

2011 02 26 - r33 (184.483 KB, gzip: 45.580 KB)

• Changed build setup (build/Three.js now also include extras) (mrdoob)
• Added ParticleSystem object to WebGLRenderer (alteredq)
• Added Line support to WebGLRenderer (alteredq)
• Added vertex colors support to WebGLRenderer (alteredq)
• Added Ribbon object. (alteredq)
• Added updateable textures support to WebGLRenderer (alteredq)
• Added Sound object and SoundRenderer. (empaempa)
• LOD, Bone, SkinnedMesh objects and hierarchy being developed. (empaempa)
• Added hierarchies examples (mrdoob)

2010 12 31 - r32 (89.301 KB, gzip: 21.351 KB)

• Scene now supports Fog and FogExp2. WebGLRenderer only right now. (alteredq)
• Added setClearColor( hex, opacity ) to WebGLRenderer and CanvasRenderer (alteredq & mrdoob)
• WebGLRenderer shader system refactored improving performance. (alteredq)
• Projector now does frustum culling of all the objects using their sphereBoundingBox. (thx errynp)
• material property changed to materials globaly.

2010 12 06 - r31 (79.479 KB, gzip: 18.788 KB)

• Minor Materials API change (mappings). (alteredq & mrdoob)
• Added Filters to WebGLRenderer
• python build.py --includes generates includes string

2010 11 30 - r30 (77.809 KB, gzip: 18.336 KB)

• Reflection and Refraction materials support in WebGLRenderer (alteredq)
• SmoothShading support on CanvasRenderer/MeshLambertMaterial
• MeshShaderMaterial for WebGLRenderer (alteredq)
• Removed RenderableFace4 from Projector/CanvasRenderer (maybe just temporary).
• Added extras folder with GeometryUtils, ImageUtils, SceneUtils and ShaderUtils (alteredq & mrdoob)
• Blender 2.5x Slim now the default exporter (old exporter removed).

2010 11 17 - r29 (69.563 KB)

• New materials API Still work in progress, but mostly there. (alteredq & mrdoob)
• Line clipping in CanvasRenderer (julianwa)
• Refactored CanvasRenderer and SVGRenderer. (mrdoob)
• Switched to Closure compiler.

2010 11 04 - r28 (62.802 KB)

• Loader class allows load geometry asynchronously at runtime. (alteredq)
• MeshPhongMaterial working with WebGLRenderer. (alteredq)
• Support for huge objects. Max 500k polys and counting. (alteredq)
• Projector.unprojectVector and Ray class to check intersections with faces (based on mindlapse work)
• Fixed Projector z-sorting (not as jumpy anymore).
• Fixed Orthographic projection (was y-inverted).
• Hmmm.. lib file size starting to get too big...

2010 10 28 - r25 (54.480 KB)

• WebGLRenderer now up to date with other renderers! (alteredq)
• .obj to .js python converter (alteredq)
• Blender 2.54 exporter
• Added MeshFaceMaterial (multipass per face)
• Reworked CanvasRenderer and SVGRenderer material handling

2010 10 06 - r18 (44.420 KB)

• Added PointLight
• CanvasRenderer and SVGRenderer basic lighting support (ColorStroke/ColorFill only)
• Renderer > Projector. CanvasRenderer, SVGRenderer and DOMRenderer do not extend anymore
• Added computeCentroids method to Geometry

2010 09 17 - r17 (39.487 KB)

• Added Light, AmbientLight and DirectionalLight (philogb)
• WebGLRenderer basic lighting support (philogb)
• Memory optimisations

2010 08 21 - r16 (35.592 KB)

• Workaround for Opera bug (clearRect not working with context with negative scale)
• Additional Matrix4 and Vector3 methods

2010 07 23 - r15 (32.440 KB)

• Using new object UV instead of Vector2 where it should be used
• Added Mesh.flipSided boolean (false by default)
• CanvasRenderer was handling UVs at 1,1 as bitmapWidth, bitmapHeight (instead of bitmapWidth - 1, bitmapHeight - 1)
• ParticleBitmapMaterial.offset added
• Fixed gap when rendering Face4 with MeshBitmapUVMappingMaterial

2010 07 17 - r14 (32.144 KB)

• Refactored CanvasRenderer (more duplicated code, but easier to handle)
• Face4 now supports MeshBitmapUVMappingMaterial
• Changed order of *StrokeMaterial parameters. Now it's color, opacity, lineWidth.
• BitmapUVMappingMaterial > MeshBitmapUVMappingMaterial
• ColorFillMaterial > MeshColorFillMaterial
• ColorStrokeMaterial > MeshColorStrokeMaterial
• FaceColorFillMaterial > MeshFaceColorFillMaterial
• FaceColorStrokeMaterial > MeshFaceColorStrokeMaterial
• ColorStrokeMaterial > LineColorMaterial
• Rectangle.instersects returned false with rectangles with 0px witdh or height

2010 07 12 - r13 (29.492 KB)

• Added ParticleCircleMaterial and ParticleBitmapMaterial
• Particle now use ParticleCircleMaterial instead of ColorFillMaterial
• Particle.size > Particle.scale.x and Particle.scale.y
• Particle.rotation.z for rotating the particle
• SVGRenderer currently out of sync

2010 07 07 - r12 (28.494 KB)

• First version of the WebGLRenderer (ColorFillMaterial and FaceColorFillMaterial by now)
• Matrix4.lookAt fix (CanvasRenderer and SVGRenderer now handle the -Y)
• Color now using 0-1 floats instead of 0-255 integers

2010 07 03 - r11 (23.541 KB)

• Blender 2.5 exporter (utils/export_threejs.py) now exports UV and normals (Thx kikko)
• Scene.add > Scene.addObject
• Enabled Scene.removeObject

2010 06 22 - r10 (23.959 KB)

• Changed Camera system. (Thx Paul Brunt)
• Object3D.overdraw = true to enable CanvasRenderer screen space point expansion hack.

2010 06 20 - r9 (23.753 KB)

• JSLinted.
• autoClear property for renderers.
• Removed SVG rgba() workaround for WebKit. (WebKit now supports it)
• Fixed matrix bug. (transformed objects outside the x axis would get infinitely tall :S)

2010 06 06 - r8 (23.496 KB)

• Moved UVs to Geometry.
• CanvasRenderer expands screen space points (workaround for antialias gaps).
• CanvasRenderer supports BitmapUVMappingMaterial.

2010 06 05 - r7 (22.387 KB)

• Added Line Object.
• Workaround for WebKit not supporting rgba() in SVG yet.
• No need to call updateMatrix(). Use .autoUpdateMatrix = false if needed. (Thx Gregory Athons).

2010 05 17 - r6 (21.003 KB)

• 2d clipping on CanvasRenderer and SVGRenderer
• clearRect optimisations on CanvasRenderer

2010 05 16 - r5 (19.026 KB)

• Removed Class.js dependency
• Added THREE namespace
• Camera.x -> Camera.position.x
• Camera.target.x > Camera.target.position.x
• ColorMaterial > ColorFillMaterial
• FaceColorMaterial > FaceColorFillMaterial
• Materials are now multipass (use array)
• Added ColorStrokeMaterial and FaceColorStrokeMaterial
• geometry.faces.a are now indexes instead of references

2010 04 26 - r4 (16.274 KB)

• SVGRenderer Particle rendering
• CanvasRenderer uses context.setTransform to avoid extra calculations

2010 04 24 - r3 (16.392 KB)

• Fixed incorrect rotation matrix transforms
• Added Plane and Cube primitives

2010 04 24 - r2 (15.724 KB)

• Improved Color handling

2010 04 24 - r1 (15.25 KB)

• First alpha release

via github.com

Posted via email from Color and Voice