FITC 2009 - Amsterdam ROCKED!!!

Posted on February 25, 2009
Filed Under Events | Leave a Comment

fitc2009

Ok it’s bin a blast! Seeing GMunk, Mario Klingemann, Keith Peters and many others presentations, most inspiring! They had a really high end speakers list, so unfortunately you can’t see all presentations.

A couple of things that I really think are true is what Aral Balkan said in his presentation (The future is so bright, I need to wear shades) - Ask yourself the question: ‘Does it give me joy?’ if not change it! It is so important to have fun in the work you do it only helps getting the end result perfect or at least better than that you don’t like what you are working on. This is also something you can see when you watch all the presentations/lectures, they all have so much passion in the way they talk about their work it’s addictive and inspiring. You know what I mean when you are at a presentation and you get inspired the only thing you want to do is start playing around with your own ideas or start projects with your friends just for fun and explore all the possibilities to learn from eachother and create some cool projects.

I want to end with some cool links to projects that they showed us at FITC Amsterdam 2009:
Seb Lee-DeLisle - BBC Game site for Big & Small. watch.
Seb Lee-DeLisle – Papervision3D Simplified. watch.
GMunk - New Showreel. watch.
Ralph Hauwert - Realtime SID (Sound Interface Device) Playback in flash. watch.
Joshua Davis - All his work. watch.
Andre Michelle - AudioTool. watch.
Keith Peters - Art from Code. watch.
Mario Klingemann - The Tinkerer’s box. Probably in the near future his presentation will be available here. But check out his site as well. watch.
Theo Watson - Openframeworks. watch.

Note - Most experiments make use of WismanAS3Lib

Posted on February 16, 2009
Filed Under General, Opensource, experiments | Leave a Comment

Ola peeps, some of my experiments use classes from wismanas3lib repository, so please get a copy from the repository so you can retrieve possible updates aswell. Or download them here (!! the classes will get updated so it’s better to use the googlecode repository !!).

Thanx for the understanding!

Cheers JW

Siftables, are AWESOME

Posted on February 16, 2009
Filed Under Events, Interaction, experiments | Leave a Comment

MIT grad student David Merrill demos Siftables — cookie-sized, computerized tiles you can stack and shuffle in your hands. These future-toys can do math, play music, and talk to their friends, too. Is this the next thing in hands-on learning? Go and read his full bio on TED.

Flash On Tap 09 Pre-Interview with Keith Peters

Posted on February 11, 2009
Filed Under Events | Leave a Comment

keith_peters_mini

This thurday, feb 11th Interview with Keith Peters! Make sure you join, its free!!!

Get your free ticket here.

For more information read ActionscriptHero.org’s post. Hope to see you there!

PV3D - Playing with light and cubes

Posted on February 5, 2009
Filed Under Actionscript 3.0, Papervision, experiments | 8 Comments

Little thingy in between, playing with light in the most simplest way there is. It has no purpose…, but thought he why not. Click and drag the cube. On click the light will tween out of the center outside the cubes, onrelease move back to the center. At this point i’m still looking around to play with multiple lights so if anyone has suggestions of ideas…leave a message

And here is the code:

  1. package
  2. {
  3.  // tweener
  4.  import gs.easing.Back;
  5.  import caurina.transitions.Tweener;
  6.  
  7.  // flash
  8.  import flash.events.MouseEvent;
  9.  import flash.filters.BlurFilter;
  10.  import flash.events.Event;
  11.  import flash.display.Sprite;
  12.  
  13.  // papervision
  14.  import org.papervision3d.view.BasicView;
  15.  import org.papervision3d.objects.DisplayObject3D;
  16.  import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  17.  import org.papervision3d.objects.primitives.Cube;
  18.  import org.papervision3d.lights.PointLight3D;
  19.  import org.papervision3d.materials.utils.MaterialsList;
  20.  import org.papervision3d.view.AbstractView;
  21.  import org.papervision3d.core.proto.CameraObject3D;
  22.  import org.papervision3d.core.proto.MaterialObject3D;
  23.  
  24.  [SWF(width="500", height="500", backgroundColor="#000000", frameRate="60")]
  25.  public class LightDemo3D extends Sprite
  26.  {
  27.   //
  28.   // private constants
  29.   //
  30.   private static const GRID_SPACE:int = 50;
  31.   private static const CUBE_SIZE:int = 150;
  32.  
  33.   //
  34.   // private properties
  35.   //
  36.   private var _viewBasic:BasicView;
  37.   private var _mList:MaterialsList;
  38.   private var _pl:PointLight3D;
  39.   private var _flatMat:FlatShadeMaterial;
  40.   private var _mainCube:DisplayObject3D;
  41.   private var _isDown:Boolean;
  42.   private var _prevMouseX:Number;
  43.   private var _prevMouseY:Number;
  44.   private var _cameraPitch:Number = 90;
  45.   private var _cameraYaw:Number = 270;
  46.   private var _cameraTarget:DisplayObject3D;
  47.  
  48.   //////////////////////////////////////////////////////////////////////////////////////
  49.   //
  50.   // Constructor
  51.   //
  52.   //////////////////////////////////////////////////////////////////////////////////////
  53.  
  54.   // ———————————————————————————–
  55.   public function LightDemo3D()
  56.   {
  57.    addEventListener(Event.ADDED_TO_STAGE, initialize);
  58.   }
  59.  
  60.   //////////////////////////////////////////////////////////////////////////////////////
  61.   //
  62.   // Public methods
  63.   //
  64.   //////////////////////////////////////////////////////////////////////////////////////
  65.  
  66.   // ———————————————————————————–
  67.   // none
  68.  
  69.   //////////////////////////////////////////////////////////////////////////////////////
  70.   //
  71.   // Private methods
  72.   //
  73.   //////////////////////////////////////////////////////////////////////////////////////
  74.  
  75.   // ———————————————————————————–
  76.   private function initialize(event:Event):void
  77.   {
  78.    removeEventListener(Event.ADDED_TO_STAGE, initialize);
  79.  
  80.    // setup view
  81.    initView();
  82.  
  83.    // materials
  84.    initMaterials();
  85.  
  86.    // objects
  87.    initObjects();
  88.  
  89.    // listeners
  90.    addEventListener(Event.ENTER_FRAME, render);
  91.  
  92.    stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  93.    stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  94.    stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
  95.    stage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveHandler);
  96.   }
  97.  
  98.   private function initView():void
  99.   {
  100.    _viewBasic = new BasicView(800, 600, true, true);
  101.    addChild(_viewBasic);
  102.  
  103.    _viewBasic.viewport.filters = [new BlurFilter(2,2,1)];
  104.  
  105.    // Camera
  106.    _cameraTarget = _viewBasic.scene.addChild(new DisplayObject3D());
  107.    _viewBasic.camera.lookAt(_cameraTarget);
  108.    _viewBasic.camera.z = -1200;
  109.  
  110.    // PointLight
  111.    _pl = new PointLight3D(true);
  112.  
  113.   }
  114.  
  115.   private function initMaterials():void
  116.   {
  117.    _flatMat = new FlatShadeMaterial(_pl, 0×7DC202, 0×000000);
  118.    _flatMat.doubleSided = false;
  119.    _flatMat.fillAlpha = .85;
  120.  
  121.    _mList = new MaterialsList();
  122.    _mList.addMaterial(_flatMat, "all");
  123.   }
  124.  
  125.   private function initObjects():void
  126.   {
  127.    /*
  128.     * create grid of 4×4x4 cubes with a
  129.     * space of 10px between all objects
  130.     */
  131.    var rows:int = 0;
  132.    var cols:int = 0;
  133.    var depth:int = 0;
  134.  
  135.    _mainCube = new DisplayObject3D();
  136.     _viewBasic.scene.addChild(_mainCube);
  137.  
  138.    for (var i:int = 0; i < 64; i++)
  139.    {
  140.     var cube:Cube = new Cube(_mList, CUBE_SIZE, CUBE_SIZE, CUBE_SIZE, 2, 2, 2);
  141.     cube.name = "cube_" + i;
  142.     cube.x = -320 + rows * (CUBE_SIZE + GRID_SPACE);
  143.     cube.y = -320 + cols * (CUBE_SIZE + GRID_SPACE);
  144.     cube.z = -320 + depth * (CUBE_SIZE + GRID_SPACE);
  145.  
  146.     if (++rows > 3)
  147.     {
  148.      rows = 0;
  149.      if (++depth > 3)
  150.      {
  151.       depth = 0;
  152.       cols++;
  153.      }
  154.     }
  155.  
  156.     _mainCube.addChild(cube);
  157.    }
  158.  
  159.    // place light in the center
  160.    _pl.x = _mainCube.x;
  161.    _pl.y = _mainCube.y;
  162.    _pl.z = _mainCube.z;
  163.   }
  164.  
  165.   private function mouseDownHandler(event:MouseEvent):void
  166.   {
  167.    _isDown = true;
  168.    _prevMouseX = event.stageX;
  169.    _prevMouseY = event.stageY;
  170.  
  171.    Tweener.addTween(_pl, {time: 2, z: 1500, transition: Back.easeInOut});
  172.   }
  173.  
  174.   private function mouseUpHandler(event:MouseEvent = null):void
  175.   {
  176.    _isDown = false;
  177.  
  178.    Tweener.addTween(_pl, {time: 2, z: -320, transition: Back.easeInOut});
  179.   }
  180.  
  181.   private function mouseMoveHandler(event:MouseEvent):void
  182.   {
  183.    var differenceX:Number = event.stageX - _prevMouseX;
  184.    var differenceY:Number = event.stageY - _prevMouseY;
  185.  
  186.    if(_isDown)
  187.    {
  188.     // with many thanx to Lee Brimelow
  189.     // blog post: http://pv3d.org/tag/orbit/
  190.     _cameraPitch += differenceY;
  191.     _cameraYaw += differenceX;
  192.  
  193.     _cameraPitch %= 360;
  194.     _cameraYaw %= 360;
  195.  
  196.     _cameraPitch = _cameraPitch > 0 ? _cameraPitch : 0.0001;
  197.     _cameraPitch = _cameraPitch < 90 ? _cameraPitch : 89.9999;
  198.  
  199.     _prevMouseX = event.stageX;
  200.     _prevMouseY = event.stageY;
  201.  
  202.     _viewBasic.camera.orbit(_cameraPitch, _cameraYaw, true, _mainCube);
  203.    }
  204.  
  205.   }
  206.  
  207.   private function mouseLeaveHandler(event:Event):void
  208.   {
  209.    mouseUpHandler();
  210.   }
  211.  
  212.   private function render(event:Event):void
  213.   {
  214.    _viewBasic.singleRender();
  215.   }
  216.  }
  217. }

Update - Code snippets will be placed ASAP

Posted on January 22, 2009
Filed Under General | Leave a Comment

After request and feedback from friends I’ll also place code hilights/snippets in the post itself, if you than still like it or have feedback on the code leave a comment and use codexperiments.googlecode.com to get the source files.

Cheers Paul for the feedback!

PV3D - Changing Cube Materials at runtime

Posted on January 21, 2009
Filed Under Actionscript 3.0, Opensource, Papervision, experiments | 3 Comments

A little demo illustrating how to change cube materials at runtime. In this demo you can click to go to the next side of the cube. Or just use your left and right arrow keys,

  1. _sidesLeftToRight = ["back", "right", "front", "left"];
  2. _currpageID = 0;
  3.  
  4. private function updateSkin():void
  5. {
  6.  var faceName:String = _sidesLeftToRight[(_currpageID % _sidesLeftToRight.length)];
  7.  var material:MovieAssetMaterial = new MovieAssetMaterial(_list[_currpageID], true, true, true, true);
  8.  material.animated = true;
  9.  material.doubleSided = true;
  10.  _cube.replaceMaterialByName(material, faceName);
  11. }

Where _list is an array with all the linkId’s to library assets. And _currPageID is updated by using the arrow keys (left & right) or mouse.

Will commit it to codexperience at googlecode soon

Free Carlos Ulloa - Papervision3D - Audio Session

Posted on January 20, 2009
Filed Under Events, Papervision | Leave a Comment

ActionscriptHero.org had a free session with Carlos Ulloa the 20th of Jan. You can download Carlos his session here in audio. Enjoy.

Just fun with dragging 3D Object

Posted on January 18, 2009
Filed Under Actionscript 3.0, experiments | 5 Comments

With many thanx to Andy Zupko. Next step adding more objects to it and apply some physics (JigLibFlash) to it.

[UPDATE] Had to remove ground texture, file became way to big.

  1. /**
  2.  * with many thanx to: Andy Zupko
  3.  */
  4. package
  5. {
  6.  // FLASH
  7.  import flash.filters.BlurFilter;
  8.  import flash.display.Sprite;
  9.  import flash.ui.Mouse;
  10.  import flash.display.Bitmap;
  11.  import flash.events.Event;
  12.  
  13.  // PAPERVISION
  14.  import org.papervision3d.materials.MovieMaterial;
  15.  import org.papervision3d.core.proto.LightObject3D;
  16.  import org.papervision3d.materials.BitmapMaterial;
  17.  import org.papervision3d.materials.special.CompositeMaterial;
  18.  import org.papervision3d.view.layer.util.ViewportLayerSortMode;
  19.  import org.papervision3d.lights.PointLight3D;
  20.  import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  21.  import org.papervision3d.core.math.Quaternion;
  22.  import org.papervision3d.objects.primitives.Sphere;
  23.  import org.papervision3d.core.math.Plane3D;
  24.  import org.papervision3d.core.math.Number3D;
  25.  import org.papervision3d.objects.DisplayObject3D;
  26.  import org.papervision3d.materials.ColorMaterial;
  27.  import org.papervision3d.objects.primitives.Plane;
  28.  import org.papervision3d.view.BasicView;
  29.  import org.papervision3d.view.layer.ViewportLayer;
  30.  import org.papervision3d.core.proto.MaterialObject3D;
  31.  
  32.  [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
  33.  public class MouseDepth extends BasicView
  34.  {
  35.   private var _plane:Plane;
  36.   private var _lookAt:DisplayObject3D;
  37.   private var _vz:Number = 0;
  38.   private var _vy:Number = 0;
  39.   private var _vx:Number = 0;
  40.   private var _plane3d:Plane3D;
  41.   private var _sphere:Sphere;
  42.   private var _radius:Number = 50;
  43.   private var _light:PointLight3D;
  44.   private var _ground:Plane;
  45.   private var _globalLight:LightObject3D;
  46.   private var _shadowPlane:Plane;
  47.  
  48.   [Embed(source="tennisball.jpg")]
  49.   public var ball:Class;
  50.  
  51.   public function MouseDepth()
  52.   {
  53.    initPapervision();
  54.   }
  55.  
  56.   private function initPapervision():void
  57.   {
  58.    Mouse.hide();
  59.  
  60.    // set sortmode
  61.    viewport.containerSprite.sortMode = ViewportLayerSortMode.INDEX_SORT;
  62.  
  63.    // create light for ball
  64.    _light = new PointLight3D(false);
  65.    _light.y = 300;
  66.  
  67.    // create general light
  68.    _globalLight = new PointLight3D(true);
  69.    _globalLight.y = 400;
  70.    _globalLight.x = 300;
  71.  
  72.    // create plane3d
  73.    _plane3d = new Plane3D();
  74.    _plane3d.setNormalAndPoint(new Number3D(0, 1, 0), new Number3D(0, 0, 0));
  75.  
  76.    // ground
  77.    // add some effect to it
  78.    var gravelFM:FlatShadeMaterial = new FlatShadeMaterial(_globalLight, 0xFFFFFF, 0×333333);
  79.    gravelFM.fillAlpha = .2;
  80.    _ground = new Plane(gravelFM, 2000,2000);
  81.    _ground.rotationX = 90;
  82.    scene.addChild(_ground);
  83.    viewport.getChildLayer(_ground).layerIndex = 0;
  84.  
  85.    // create mouse object
  86.    var cm:ColorMaterial = new ColorMaterial(0×333333);
  87.    cm.fillAlpha = .5;
  88.  
  89.    _plane = new Plane(cm, 50, 50, 2, 2);
  90.    _plane.rotationX = 90;
  91.  
  92.    // -radius, to place the sphere right on top of our plane
  93.    _plane.y = -_radius;
  94.    scene.addChild(_plane);
  95.    viewport.getChildLayer(_plane).layerIndex = 1;
  96.  
  97.    // create materials for sphere
  98.    var bmat:BitmapMaterial = new BitmapMaterial(Bitmap(new ball()).bitmapData, true);
  99.    bmat.tiled = true;
  100.    bmat.smooth = true;
  101.  
  102.    var fm:FlatShadeMaterial = new FlatShadeMaterial(_light, 0xFFFFFF, 0×333333);
  103.    fm.fillAlpha = .5;
  104.  
  105.    var sm:CompositeMaterial = new CompositeMaterial();
  106.    sm.addMaterial(bmat);
  107.    sm.addMaterial(fm);
  108.  
  109.    // create sphere
  110.    _sphere = new Sphere(sm, _radius, 20, 18);
  111.    scene.addChild(_sphere);
  112.    viewport.getChildLayer(_sphere).layerIndex = 3;
  113.  
  114.    // object to look at
  115.    _lookAt = new DisplayObject3D();
  116.    camera.focus = 100;
  117.    camera.zoom = 11;
  118.    camera.lookAt(_lookAt);
  119.  
  120.    // place camera higher up
  121.    camera.y = 800;
  122.  
  123.    createShadow();
  124.  
  125.    // render
  126.    startRendering();
  127.   }
  128.  
  129.   public function createShadow():void
  130.   {
  131.    var floorSprite:Sprite = new Sprite();
  132.    floorSprite.graphics.beginFill(0xdddddd, 0);
  133.    floorSprite.graphics.drawRect(0, 0, 400, 400);
  134.    floorSprite.graphics.endFill();
  135.  
  136.    var shadow:Sprite = new Sprite();
  137.    shadow.graphics.beginFill(0×101010, 1);
  138.    shadow.graphics.drawCircle(0, 0, 100);
  139.    shadow.graphics.endFill();
  140.    floorSprite.addChild(shadow);
  141.  
  142.    shadow.filters = [new BlurFilter(30, 30, 8)];
  143.    shadow.x = 200;
  144.    shadow.y = 200;
  145.  
  146.    _shadowPlane = new Plane(new MovieMaterial(floorSprite, true, false, true), 200, 200, 1, 1);
  147.    _shadowPlane.pitch(90);
  148.    scene.addChild(_shadowPlane);
  149.    _shadowPlane.y = -_radius;
  150.    viewport.getChildLayer(_shadowPlane).layerIndex = 2;
  151.   }
  152.  
  153.   override protected function onRenderTick(event:Event = null):void
  154.   {
  155.    // move plane
  156.    var cameraPosition:Number3D = new Number3D(camera.x, camera.y, camera.z);
  157.  
  158.    //get the direction vector of the mouse position
  159.    var ray:Number3D = camera.unproject(viewport.containerSprite.mouseX, viewport.containerSprite.mouseY);
  160.  
  161.    //convert ray to a 3d point in the ray direction from the camera
  162.    ray = Number3D.add(ray, cameraPosition);
  163.  
  164.    //find the intersection of the line defined by the camera and the ray position with the plane3D
  165.    var intersect:Number3D = _plane3d.getIntersectionLineNumbers(cameraPosition, ray);
  166.  
  167.    //find distance to object and add to velocity
  168.    _vx += (_sphere.x-intersect.x)/1200;
  169.    _vy += (_sphere.y-intersect.y)/100;
  170.    _vz += (_sphere.z-intersect.z)/1200;
  171.  
  172.    // update vel
  173.    _vx *= .98;
  174.    _vy *= .94;
  175.    _vz *= .98;
  176.  
  177.    // move out plane to mouse coordinates
  178.    _plane.x -= (_plane.x - intersect.x)/4;
  179.    _plane.z -= (_plane.z - intersect.z)/4;
  180.  
  181.    // apply vel
  182.    _sphere.x -= _vx;
  183.    _sphere.y -= _vy;
  184.    _sphere.z -= _vz;
  185.  
  186.    // move shadow allong with sphere
  187.    _shadowPlane.x = _sphere.x;
  188.    _shadowPlane.z = _sphere.z;
  189.  
  190.    // move light with ball
  191.    _light.x = _sphere.x;
  192.    _light.z = _sphere.z;
  193.  
  194.    // the function written by Andy Zupko (blog.zupko.info), so usefull!
  195.    rollMe(_vx, _vy, _vz);
  196.  
  197.    super.onRenderTick(event);
  198.   }
  199.  
  200.   private function rollMe(vx:Number, vy:Number, vz:Number):void
  201.   {
  202. //   var pos:Number3D = new Number3D(_sphere.x, _sphere.y, _sphere.z);
  203.    var dif:Number3D = new Number3D(-vx, -vy, -vz);
  204.    var dist:Number = Math.sqrt(dif.x*dif.x+dif.z*dif.z);
  205.  
  206.    //find the cross of the up axis with the direction vector
  207.    var rotAxis:Number3D = Number3D.cross(dif, new Number3D(0, 1, 0));
  208.    rotAxis.normalize();
  209.  
  210.    //rotate around that axis by how long the direction vector is relative to the radius
  211.    var rotation:Quaternion = Quaternion.createFromAxisAngle(rotAxis.x, rotAxis.y, rotAxis.z, dist/_radius);
  212.    rotation.normalize();
  213.  
  214.    _sphere.transform.calculateMultiply3×3(rotation.matrix, _sphere.transform);
  215.   }
  216.  }
  217. }

The Eco Zoo, wins the S.O.T.Y

Posted on January 15, 2009
Filed Under Actionscript 3.0, General | Leave a Comment

And yet another great year has passed by called 2008 and the winnen at thefwa is….
The Eco Zoo. Totally agree with the judges in this case, the guy who made it created his own 3D enigne for it called Sharikura 3D (I hope he is still working on it to make it opensource). Check this site out ones more and do not forget to visit the maker (Masayuki Kido) of this awesome project!

« go back — keep looking »
-->