Category — 3D
Artistic Flash.
I have just spent the last day or so polishing up on my generative art in flash. This basically means creating random motion using TweenLite or/and Away3d.
Here are some sceen shots of what I am talking about:
(Just click on the images to view them :))
These were made using a combination of TweenLite, Away3D and general brilliance :). The first one actually uses no 3d, and I made the second one to see how easily it would be the get the same (or close to) result, but in 3D space.
Here is the code for the first one, just past it in the first frame.
import gs.TweenFilterLite; import gs.easing.Expo; var Blur:BlurFilter = new BlurFilter(100, 100, 3); var BMBlur:BlurFilter = new BlurFilter(20, 20, 3); var bmd:BitmapData = new BitmapData(550, 400, true, 0x000000); var bm:Bitmap = new Bitmap(bmd); addChild(bm); var currentSquare:Box = new Box(); currentSquare.filters = [Blur]; addChild(currentSquare); function mover_single():void { TweenFilterLite.to(currentSquare, .5, { x:Math.random() * 550, y:Math.random() * 400, ease:Expo.easeInOut, alpha:100/*Math.random() * 1*/, blurFilter:{blurX:Math.random() * 0, blurY:Math.random() * 50}, tint:Math.round( Math.random()*0xFFFFFF ), onComplete:mover_single }); } mover_single(); addEventListener(Event.ENTER_FRAME, EnterFrame); function EnterFrame(evt:Event):void { bmd.draw(this); bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), BMBlur); bmd.scroll(5, 0); //trace(getChildAt(1)); }
And the second:
package { import away3d.containers.Scene3D; import away3d.containers.View3D; import away3d.primitives.Cube; import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.MovieClip; import flash.events.Event; import flash.filters.BlurFilter; import flash.geom.Point; import gs.TweenLite; import gs.easing.Expo; public class Organic extends MovieClip { public var scene:Scene3D = new Scene3D; public var view:View3D = new View3D( { scene:scene, x:0, y:0 } ); public var square:Cube; public var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x000000); public var bm:Bitmap = new Bitmap(bmd); public var BMBlur:BlurFilter = new BlurFilter(10, 0, 3); public var Blur:BlurFilter = new BlurFilter(5, 5, 3); public function Organic():void { addEventListener(Event.ADDED_TO_STAGE, Init); addEventListener(Event.ENTER_FRAME, EnterFrame); } private function Init(evt:Event):void { addChild(view); addChild(bm); view.camera.zoom = 1.5; square = new Cube( { height:200, width:200, material:"red#black" } ); square.filters = [Blur]; view.scene.addChild(square); Mover(); // This animates the box and then renders it/ } private function Mover():void { TweenLite.to(square, .5, { x:Math.random() * -5550, y:Math.random() * -5400, z:Math.random() * 200, ease:Expo.easeInOut, onComplete:Mover, alpha:Math.random() * 1, rotationX:Math.random() * 360, rotationY:Math.random() * 360, height: Math.random() * 1000, width: Math.random() * 1000 } ); view.render(); } private function EnterFrame(evt:Event):void { bmd.draw(this); bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), BMBlur); bmd.scroll(5, 0); view.render(); } } }
So there you go. Here are the links to download the whole package:
- The First one: http://harry-northover-code-store.googlecode.com/files/Random%20Squares.zip
- The Second one: http://harry-northover-code-store.googlecode.com/files/3D%20Organic.zip
Harry.
September 27, 2008 No Comments
Some more Away3D :)
I have just spent the last hour or so playing with Away3d (again :)), and have just made this among other things. It is a sort of implementation of a particle system, but as I am still fairly rough around the edges with Away3D, its probably not the best.
- For a start, I am a bit confused with the maths side of things. For example getting the most out of the view-ports and how to get the cameras in the right position. So this caused me that problem of all the dots being in the bottom left right corner. :(
- When you go close up to the dots, some of them seem stretched.
- Any ideas?
Here’s a snap shot:
And the code:
package { import away3d.cameras.HoverCamera3D; import away3d.containers.Scene3D; import away3d.containers.View3D; import away3d.primitives.Sphere; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; public class ThreeDParticle extends Sprite { public var cam:HoverCamera3D = new HoverCamera3D; public var scene:Scene3D = new Scene3D; public var view:View3D = new View3D( { x:550, y:400, scene:scene, camera:cam } ); public var numOfDots:Number = 50; public var sphere:Sphere; public var cameraSpeed:Number = 0.3; // Approximately same speed as mouse movement. public var lastPanAngle:Number; public var lastTiltAngle:Number; public var lastMouseX:Number; public var lastMouseY:Number; public var move:Boolean; public function ThreeDParticle():void { // This is added so you can include this SWF in another. this.addEventListener(Event.ADDED_TO_STAGE, Init); } private function Init(evt:Event):void { addChild(view); cam.zoom = 1; cam.x = 0; cam.y = 0; for (var i:uint = 0; i <= numOfDots; i++) { sphere = new Sphere( { material:"black#red", radius:20, x:Math.random() * 1000, y:Math.random() * 1000, z:Math.random() * 100, segmentsH:10, segmentsW:10 } ); view.scene.addChild(sphere); } this.addEventListener(Event.ENTER_FRAME, enterFrame); this.stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseLeave); view.render(); } private function enterFrame(evt:Event):void { if (move) { cam.targetpanangle = cameraSpeed * (this.stage.mouseX - lastMouseX) + lastPanAngle; cam.targettiltangle = cameraSpeed * (this.stage.mouseY - lastMouseY) + lastTiltAngle; } cam.hover(); view.render(); } private function mouseDown(evt:MouseEvent):void { move = true; lastPanAngle = cam.targetpanangle; lastTiltAngle = cam.targettiltangle; lastMouseX = stage.mouseX; lastMouseY = stage.mouseY; cam.hover(); view.render(); } private function mouseLeave(evt:MouseEvent):void { move = false; } } }
And here’s the link to download it all: http://harry-northover-code-store.googlecode.com/files/3D%20Particle.zip
Right there you go for tonight!
Harry.
September 25, 2008 No Comments
Harry Northover – 2008 – Portfolio Update.
I have just been working a my portfolio for the last day or two and have come up with what I think is the final design. You can view it here: http://www.harrynorthover.com/beta/v2
Once you have views it, you may be thinking, where is the 3D? Well, what I am planning to have is a 3D World inside the gray box. This means that you will be able to fly round and explore this 3d world, and along the way be able to view information about me and my projects. I am having a bit of trouble with this at the moment (see more here).
Other Designs:
Other designs I have come up with, but haven’t been used will be posted soon. This is because they may inspire you to do something with them? Here is the second most favorite design I came up with:
So I hope you like it, and as usual all comments are welcome!
Harry.
September 22, 2008 No Comments
Playing with Away3D
I have just spent a couple of hours last night getting to grips with Away3D. I just created a little demo that creates a few spheres and then adds an ENTER_FRAME event listener and responds to mouse movement.
You can download the whole thing here: http://harry-northover-code-store.googlecode.com/files/Away3DBasics.zip
Here is a screene:
And here’s the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | package { import away3d.cameras.HoverCamera3D; import away3d.containers.View3D; import away3d.primitives.Sphere; import flash.events.MouseEvent; import flash.display.Sprite; import flash.events.Event; import caurina.transitions.Tweener; public class Away3DBasics extends Sprite { public var stageHeightCenter:uint = stage.stageHeight / 2 - 100; public var stageWidthCenter:uint = stage.stageWidth / 2 + 100; public var cam:HoverCamera3D = new HoverCamera3D( { zoom:1, focus:200 } ); public var view:View3D = new View3D( { x:stageWidthCenter, y:stageHeightCenter, camera:cam } ); public function Away3DBasics() { cam.steps = 16; // Add the view to the stage. addChild(view); // Create 20 spheres. for (var i:uint = 0; i <= 20; i++) { var sphere:Sphere = new Sphere(); sphere.invertFaces(); sphere.x = Math.random() * 1000; sphere.y = Math.random() * 1000; sphere.z = Math.random() * 600; sphere.rotationX = Math.random() * 360; sphere.rotationY = Math.random() * 360; view.scene.addChild(sphere); } // Add Event listeners. this.addEventListener(Event.ENTER_FRAME, onRun); // Render the scene... cam.hover(); view.render(); } // This is the code for the ENTER_FRAME event. private function onRun(evt:Event):void { cam.rotationX = Math.random() * 360; cam.rotationY = Math.random() * 360; cam.rotationZ = Math.random() * 360; cam.pan(Math.random() * 360); Tweener.addTween(cam, { zoom: (stage.mouseY / stage.stageHeight) * 4 + 0.5, time:0.1, transition:"easeInOutExpo" } ); cam.hover(); view.render(); } } } |
There you go! I will be doing a lot more stuff with Away3D so keep an eye out!
Harry.
September 13, 2008 No Comments
Away3D – Getting Started
I have recently been trying to pick up Away3D. I have to say this engine is absolutly awesome!
I have decided to build my portfolio using this, so this will help me get used to using the engine as well as hopefully creating a sweet site! :)
During my efforts to find out more info and tutorials about this engine, I have found these links:
- http://www.flashmagazine.com/tutorials/index/ – This site has a whole host of tutorials and info on Away3D and Flash 3D in general.
- http://blog.paranoidferret.com/index.php/2008/03/28/getting-started-with-adobe-flex-and-away3d/ - Getting Started with Away3D and Adobe Flex.
- http://www.thetechlabs.com/3d/setting-up-away3d-with-flex/ – Setting up and using Away3D in Flex.
- http://flashenabledblog.com/2008/09/02/frameworks-away3d-away3d-web-roundup-tutorials-and-examples/ – This is a haven for info on Away3D tutorials, samples and general info!
- http://www.lemlinh.com/flash-tutorial-away3d-pathextrude-cords-ribbons – Away3D Path Extrude – Cords And Ribbons.
- http://blog.arnomanders.nl/index.php/archives/imageviewer3d-final-release/ - This is a very cool application demonstrating the powers of Away3D.
- http://www.closier.nl/playground/greenplanet.html – This is a very cool example, indeed! Green Planet!!
- http://flash-3d.org/en/Create-the-Earth-and-heavens-in-less-than-an-hour-with-Away3D – This is a great tutorial for Away3D. This could be used for some sort of language selection of area selection or even a contact form. The potential is infinite… :)
- http://www.ultrashock.com/forums/third-party-tools/away3d-93241.html – This sheds on Away3D and how it differs from Papervision3D.
- http://www.sharingb.com/programming/away3d/focus-on-away3d – Some very cool examples of Away3D in action.
- http://drawlogic.com/2008/04/11/3ds-parser-added-to-papervision-from-away3d/ – 3DS Parser Added to Papervision3D from Away3D.
- http://docs.google.com/View?docid=dczs397v_12ftrscdd9 – Getting started with Away3D.
- http://www.closier.nl/playground/temple.html – This is a very cool example indeed!
So there you go for starters. I hope this helps you guys out!
Harry.
September 3, 2008 3 Comments
XSI 7!
Yes, you heard me, and probably quite a lot of other people, that 3D program XSI 7 is out!
I have just had an e-mail telling me that XSI 7 is out. Here are some of the new features:
- Well, the main one is the launch of ICE. This enables you to customize XSI and create new tools. You are probably think that you will need to write code, but no code is needed to use ICE. It is completly visual!
- There are also many new user interface and workflow enhancement.
- Zooming with the mouse wheel
- Automatic Scaling on Sliders, to name a few…
- GIGACORE II ARCHITECTURE
- With the development of ICE for XSI 7, the core architecture of XSI went through a major revision. The new core, GigaCore II, has been engineered to provide stable and fast performance for ICE. It is fully multi-threaded and 64-bit, allowing users to scale the performance of XSI efficiently by adding more cores to a system.
Those are just the major ones, if you would like to see a complete list, visit here: http://www.softimage.com/products/xsi/new_features/default.aspx
XSI is defnitly work checking out! Another thing worth checking out is Christoph Schinko’s video on XSI 7.
Harry.
August 8, 2008 No Comments













