Out Of the Page

Virtual Cityscape

2011-02-21T13:01:00.000-08:00

I've had the idea for awhile now of a virtual city with buildings of different shapes and sizes that are randomly generated and organically grown by some set of rules. This is my first success with this idea:

I used the code from klein blue along with the following code snippet:

getGuy[x_, h_] := {Append[graphs[[x]][[2]][[1]], 0],
Append[graphs[[x]][[2]][[2]], h]};
hh = {graphs[[#]][[1]], Cuboid[getGuy[#, Round[8*Random[] + 1]]]} & /@
Range[Length[graphs]]; Manipulate[
Graphics3D[{hh[[1 ;; q]]}, Boxed -> False], {q, 1, Length[graphs],
1}]
It seems like the possibilities are endless.

3D TV

2010-11-28T03:14:00.000-08:00

Sky TV says it has made a significant step towards bringing 3D television to British viewers. The satellite broadcaster says it has successfully tested the delivery of 3D programming to a domestic television, via a high-definition set-top box. Sky has been filming a number of events using 3D cameras over recent months. Such broadcasts would require the use of 3D televisions, not yet available in UK stores, and viewers would need to wear 3D polarising glasses.

With the release of a new set of 3-D video screens next week, Philips Electronics is bringing a sci-fi cinema standby a little closer to everyday use. Philips' WOWvx displays--which allow viewers to perceive high-quality 3-D images without the need for special glasses--are now beginning to appear in shopping malls, movie-theater lobbies, and theme parks worldwide.

Lookin at the state of 3D.

2010-09-18T15:01:00.000-07:00

I remember when I first saw Papervision 3D, I thought that was the future. Nearly 4 years later, and no websites are 3D yet. I currently work for a 2D Casual Flash Gaming platform. Before that was Slide with Pets and Rock Riot. Before that was the 3D creature editors in Spore when 3D was alot more exciting, while Spore failed because it was not social. It seems like 3D will be postponed for awhile as we adjust more to the way we respond to data conditioned on social, time and location (in addition to context).

View With Old School 3D Glasses

2010-09-18T14:59:00.000-07:00

3D Video Games!

2010-05-11T23:32:00.002-07:00

Fireflies Trailer from Lee Byron on Vimeo.

Avatar

2010-01-17T22:02:00.000-08:00

Will be remembered as the first great film in a new genre of 3D movies.

Alice: 3D Graphics for Kids

2009-08-08T09:20:00.001-07:00

Javascript Web Graphics Route

2009-07-20T00:04:00.000-07:00

I'm not headed this way, but it is nice to know about it:

here, here and here.

The History of Video Cards

2009-07-11T16:18:00.000-07:00

Too much info for me here, but a nice reference, nonetheless. Shown in the image is the Rage 3D (32-bit memory bus, and a max memory of just 2MB) from 1995.

Interactive Color Coded Grids

2009-07-06T21:14:00.000-07:00

What I want to do is make visualizations of grids (for churn, etc) that are interactive. This was a nice start tonight but flash development still goes so slow for me...

public function Blueray()
{
for(var i:int = 0; i < 5; i++){
for(var j:int = 0; j < 5; j++){
var a:Sprite = new Sprite(); a.graphics.beginFill(0xFF0000);
a.graphics.drawRect(50*i, 50*j, 50, 50);
this.addChild(a);
a.transform.colorTransform =new ColorTransform(1, 1, 1, 1, -50*i, 0, 50*j, 0);
a.addEventListener(MouseEvent.MOUSE_DOWN, drag);
a.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
}
}
private function drag(event:MouseEvent):void {
event.target.startDrag();
}
private function stopdrag(event:MouseEvent):void {
event.target.stopDrag();
}

Drawing Sprites in a Flex Application

2009-06-07T16:54:00.000-07:00

Pretty useful code to draw Sprites from within a Flex application:

mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
mx:Script>![CDATA[
import flash.display.Sprite;

public function drawRectTest(nX:Number, nY:Number, nWidth:Number, nHeight:Number):void {
var testrect:Sprite = new Sprite();
testrect.graphics.beginFill(0xFF0000, 1);
testrect.graphics.drawRect(nX, nY, nWidth, nHeight);
testrect.graphics.endFill();
myPanel.rawChildren.addChild(testrect);
}
]]>/mx:Script>
mx:Panel id="myPanel"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
height="200"
width="200"
>
mx:Button click="drawRectTest(75,75,50,100)" x="10" y="10" label="Draw" id="btnDrawRectangle"/>
/mx:Panel>
/mx:Application>

Its all about the rawchild. Now I just need to figure out how to do this "onload".

3D Television

2009-06-04T15:43:00.000-07:00

With the release of a new set of 3-D video screens next week, Philips Electronics is bringing a sci-fi cinema standby a little closer to everyday use. Philips' WOWvx displays--which allow viewers to perceive high-quality 3-D images without the need for special glasses--are now beginning to appear in shopping malls, movie-theater lobbies, and theme parks worldwide.

Sky TV says it has made a significant step towards bringing 3D television to British viewers. The satellite broadcaster says it has successfully tested the delivery of 3D programming to a domestic television, via a high-definition set-top box. Sky has been filming a number of events using 3D cameras over recent months. Such broadcasts would require the use of 3D televisions, not yet available in UK stores, and viewers would need to wear 3D polarising glasses.

http://news.bbc.co.uk/2/hi/technology/7788582.stm

2009-05-19T14:07:00.001-07:00

Some good progress today but have gotten sleepy. I built two classes: one for creating pieces of text on a page (TextFields) and one for drawing graphics (Sprites) such as circle on a page. I was then able to add an event listener to one of the sprite, read in the resulting word, string split the word and display the first element of the word.
package {
import flash.display.Sprite;
import flash.events.*;
import flash.text.*;
public class ParseString extends Sprite
{
public var theTextField:TextField = new TextField();

public function ParseString()
{
var sT:ShowText = new ShowText();
theTextField = sT.makeInputText( 10, 10, 20, 400, true, true );
this.addChild(theTextField);
var s:ShowCircle = new ShowCircle(50, 150, 15);
s.addEventListener(MouseEvent.CLICK, showText);
this.addChild(s);
}

public function showText(e:Event):void
{
var sT:ShowText = new ShowText();
var um:String = theTextField.text.toString();
var guy:Array = um.split(" ");
var result:TextField = sT.makeDynamicText( guy[0], 10, 50, 20, 400, false, true );
this.addChild(result);
}
}
}

Sweetness. From here I need to count all the words and how many times each one is used.

TextFieldType.INPUT;

2009-05-18T13:50:00.000-07:00

A nice way to collect input from a user and then do what you want with it (i.e. use it for Twitter Search). The key is TextFieldType.INPUT
public function Twitter()
{
mText.x= 240;
mText.y= 0;
mText.width = 200;
mText.text = "Your momma and stuff";
this.addChild(mText);

theTextField.type = TextFieldType.INPUT;
theTextField.border = true;
theTextField.x = 10;
theTextField.y = 10;
theTextField.multiline = true;
theTextField.wordWrap = true;
addChild(theTextField);

var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xcccccc, 0.5);
sprite.graphics.lineStyle(1, 0x000000);
sprite.graphics.drawCircle(0, 0, 30);
sprite.x = 50;
sprite.y = 150;
sprite.addEventListener(MouseEvent.CLICK, showText);
this.addChild(sprite);
}
public function showText(e:Event):void
{
mText.text = theTextField.text;
}

Dragging Images in Actionscript

2009-05-15T16:47:00.000-07:00

Ugh. Been trying all afternoon to load in an image and then make it draggable, interactive (in any way possible, draggable, clickable). If I add that image (the loader actually) as a child of a Sprite, the Sprite is not interactive (and I cannot add anything else to the Sprite, other shapes, etc.). If I dont add the image and I add other things (circles, etc.) then the Sprite is interactive. I don't know wtf! Hmf.

Link doesn't help either.

GetChildByName

2009-04-21T14:18:00.001-07:00

This is nice. If you have "parts" (children) of a movie clip that you want to show as the result of some event (mouse overs, mouse clicks, button clicks), then you need to give the children of the movie clips names. i.e. :

private function createCircle(x:Number, y:Number, r:Number):Sprite
{
var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xcccccc, 0.5);
sprite.graphics.lineStyle(1, 0x000000);
sprite.graphics.drawCircle(0, 0, r);
sprite.x = x;
sprite.y = y;
var textField:TextField = new TextField();
var textFormat:TextFormat = new TextFormat();
textFormat.color = 0xFF0000;
textFormat.size = 12;
textField.name = "Larry";
textField.visible = false;
textField.text = "[" + x.toString() + ", " + y.toString() + "]";
textField.y=-50;
textField.setTextFormat(textFormat);
sprite.addChild(textField);
sprite.addEventListener(MouseEvent.MOUSE_OVER, showText);
sprite.addEventListener(MouseEvent.MOUSE_OUT, noText);
return sprite;
}

private function showText(event:MouseEvent):void {
event.target.getChildByName("Larry").visible =true; }

private function noText(event:MouseEvent):void {
event.target.getChildByName("Larry").visible = false; }

Drawing in Flex Actionscript World,

2009-04-20T21:42:00.001-07:00

Its amazing how much this little piece of code has helped me out in life! Simply create a new actionscript project (call it something like tutorial) and write this code in a default Tutorial.as file.

package {
import flash.display.Sprite;
[SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")]

public class Tutorial extends Sprite
{
public function Tutorial()
{
var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xcccccc, 0.5);
sprite.graphics.lineStyle(1, 0x000000);
sprite.graphics.drawCircle(0, 0, 10);
this.addChild(sprite);
sprite.x = 50;
sprite.y = 50;
trace("our sprite is at: "+sprite.x+", "+sprite.y);
}
}
}

Flex Data Grids

2009-04-17T15:57:00.000-07:00

Very nice way to display xml in a readable form (with little effort!)

<`mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#27148A"
backgroundGradientColors="[#1D4184, #020000]"
creationComplete="init()"
initialize="stats.send()"
width="730" height="600">
<`mx:Script>
<`![`CDATA[

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
private var datars:ArrayCollection;

private function resultHandler(event:ResultEvent):void{
datars = event.result.assets.asset;
}
]]>

<`mx:HTTPService id="stats" url="http://www.spore.com/rest/assets/search/TOP_RATED/0/100" result="resultHandler(event)"/>
<`mx:DataGrid dataProvider="{datars}" x="30" y="20" height="500">
<`mx:columns>
<`mx:DataGridColumn dataField="name" headerText="Name" width ="120" />
<`mx:DataGridColumn dataField="rating" headerText="Rating" width ="50" />
<`mx:DataGridColumn dataField="description" headerText="Description" width = "500" />

HTTPService in Flex

2009-04-17T15:34:00.001-07:00

Awesome way to use TextInput to display live web data in xml format:

<`mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#27148A"
backgroundGradientColors="[#1D4184, #020000]"
creationComplete="init()"
initialize="stats.send()"
>
<`mx:Script>
<`![`CDATA[
import mx.rpc.events.ResultEvent;
private function resultHandler(event:ResultEvent):void{
Uploads.text = event.result.stats.totalUploads;
Users.text = event.result.stats.totalUsers;
RecentUploads.text = event.result.stats.dayUploads;
RecentUsers.text = event.result.stats.dayUsers;
}
]]>

<`mx:HTTPService id="stats" url="http://www.spore.com/rest/stats" result="resultHandler(event)"/>
<`mx:TextInput id="Uploads"
x="100" y="100" />
<`mx:TextInput id="Users"
x="100" y="150" />
<`mx:TextInput id="RecentUploads"
x="100" y="200" />
<`mx:TextInput id="RecentUsers"
x="100" y="250" />

Changing the Color of A Movieclip (Again)

2009-04-17T14:38:00.000-07:00

If you create an movieclip in Flash, add it to the stage and call it shape. Then you add a button and provide these actions for the button:
on (rollOver) {
var colorful = new Color("_root.shapes");
colorful.setRGB(0x003366);
}
the color is changed. Cool!

Data Binding in Flex

2009-04-16T09:56:00.000-07:00

<`mx:TextInput id="Home"
x="100" y="100" />
x="300" y="100"
text="{Home.text}" />

Yeah!

Top Creators in Spore

2009-04-14T10:12:00.000-07:00

I've been wanting to do this for awhile. This Flash app reads in data from here and displays the top ten of those creators. Each creator element has an image, a rectangle sprite and some text filled in. That element is a movieclip with an event listener added to it: mHolder.addEventListener(MouseEvent.CLICK, goToSpore); to send the user to a webpage. Each movie clip is then added to the main stage.

I had trouble morphing the color from one shade to another as you transcend the list, it seems to have something to do with sprite.transform.colorTransform. Also, I am still struggling with how to add particular elements to a movie clip without displaying that info, and then when the user clicks on a movie clip we are able to extract certain info about it. How to do?

Programatically Formatting Text in Actionscript

2009-04-14T10:08:00.000-07:00

Create a text format object first and then add it to a text field with "setTextFormat".
var textFormat:TextFormat = new TextFormat();
textFormat.color = 0xFF0000;
textFormat.size = 32;
var textField:TextField = new TextField();
textField.autoSize = TextFieldAutoSize.LEFT;
textField.wordWrap = true;
textField.text = "The quick brown fox ";
textField.width = 500;
textField.x = 25;
textField.y = 25;
textField.setTextFormat(textFormat);
addChild(textField);

Interactive Graphics Progress!

2009-04-09T13:22:00.000-07:00

import flash.display.Sprite;
import flash.events.MouseEvent;
for(i = 1; i< 50; i++)
{
var mc1:MovieClip = new MovieClip();
var circle1:Sprite = new Sprite();
circle1.graphics.beginFill(Math.random() *0xFF0000);
circle1.graphics.drawCircle(0, 0, 30*Math.random()+20);
mc1.addEventListener(MouseEvent.MOUSE_DOWN, drag);
mc1.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
mc1.y = 380*Math.random()+10;
mc1.x = 600*Math.random()+15;
mc1.buttonMode = true;
mc1.addChild(circle1);
this.addChild(mc1);
}
function drag(event:MouseEvent):void {
event.target.startDrag();
}
function stopdrag(event:MouseEvent):void {
event.target.stopDrag();
}
function click(event:MouseEvent):void {
mc2.x += 5;
}

Figuring out which button is pushed

2009-04-08T08:04:00.001-07:00

A simple one. Suppose we create two buttons: one called offButton with a label value of "off" and another one onButton with a label value of "on".

Then, if we add event listeners to both:
onButton.addEventListener("click", buttonPushed);
offButton.addEventListener("click", buttonPushed);

we can tell which one we pushed with this function:

function buttonPushed(evt:Object):Void{
var label:String = evt.target.label;
if(label == "off")
{
trace("You pushed the off button");
}else if(label == "off")
{
trace("You pushed the on button");
}
}

Changing the Color of A Movieclip

2009-04-08T08:01:00.001-07:00

Code to change the color of a movie clip to red.
import flash.geom.ColorTransform;
var mc:MovieClip;
var ct:ColorTransform = new ColorTransform();
ct.rgb = 0xFF0000;
mc.transform.colorTransform = ct;

Collision Detection too.

2009-04-08T07:41:00.000-07:00

A little more progress. I'm able to move movie clips individually and I've also added collision detection:
mc_1.onPress = mc_2.onPress =
function():Void {
this.startDrag(false);
this.onMouseMove = this._parent.checkHit;
};
mc_1.onRelease = mc_2.onRelease =
function():Void {
this.stopDrag();

};
function checkHit():Void {
for(var instanceName in this._parent){
var obj:Object = this._parent[instanceName];
if(obj instanceof MovieClip && obj != this){
if(this.hitTest(obj)){
chuck.text = "collision occuring";
}else{
chuck.text = "no collision yet";
}
}
}
}
Wondering what the difference is between adding event listeners and these "onPress" "onRelease" characteristics.

2009-04-08T07:01:00.000-07:00

A little confused. I'd like to be able to "draw something" and then have it be interactive: dragable, clickable, whatever. Here's the code I have, but I cannot drag the movie clip:
var a:MovieClip = new MovieClip();
var child:Shape = new Shape();
child.graphics.beginFill(0xFF0000);
child.graphics.drawRect(0, 0, 100, 100);
child.graphics.endFill();
a.addChild(child);
this.addChild(a);
a.x=100;
a.y=100;
a.addEventListener(MouseEvent.MOUSE_DOWN,keyPressHandler);
a.addEventListener(MouseEvent.MOUSE_DOWN,keyReleaseHandler);
function keyPressHandler(event:MouseEvent):void
{
a.startDrag();

}
function keyReleaseHandler(event:MouseEvent):void
{
a.stopDrag();
}

Drag and Drop

2009-04-07T15:21:00.000-07:00

The only objects that can be moved with a mouse are Movie Clip instances. So if you want a drawing of a triangle to be moveable by the user , you first have to put that triangle into a movie clip and then place a named instance of that movie clip onto the stage.

Clicking on buttons to display text

2009-04-06T22:54:00.000-07:00

Ah, the joys of programming. I created a dynamic text box called "hector" and three instances of a button called susi, mary and jocylen. Three functions to handle when the user clicks on each button.
hector.text = "Hello";
susi.addEventListener(MouseEvent.MOUSE_DOWN,sue);
mary.addEventListener(MouseEvent.MOUSE_DOWN,mair);
jocylen.addEventListener(MouseEvent.MOUSE_DOWN,joy);
function sue(event:MouseEvent):void
{
hector.text = "susie";
}
function mair(event:MouseEvent):void
{
hector.text = "mary";
}
function joy(event:MouseEvent):void
{
hector.text = "jocylen";
}

Get URL in AS 3.0

2009-04-06T22:21:00.000-07:00

Here

Displaying Text in Flash

2009-04-06T22:11:00.001-07:00

Ok, so suppose you want to populate your swf with some data that you read in from an xml source. If you create a dynamic text box on your stage and call in mTexticle, then in your package (can only be done in a package) define a TextHolder:
public var mTextHolder:TextHolder;
public var mTextField:TextField;
Then you just need to do something weird like:
mTextField = mTextHolder.getChildByName("mTextField") as TextField;
mTextField.text = "Hello world" ;
addChild(mTextHolder);

*******

Ah, nevermind. Not that complicated. Suppose you create a dynamic text box in your app and it is called "coolTextThing". Then in your actionscript you can simply write:
coolTextThing.text = "Hello Senor";
Much easier...

Simple Event Listeners in Flash

2009-04-06T15:34:00.001-07:00

Just get reminded of the simple stuff in Flash. Suppose you have an object and you want to do something like change its width (height, position, color, whatever). We will need some buttons, call them longer and shorter. If the object we are talking about is called Luis, then the most basic code is simply:

var luis:MovieClip;
longer.addEventListener(MouseEvent.MOUSE_DOWN,longener);
shorter.addEventListener(MouseEvent.MOUSE_DOWN,shortener);
function longener(event:MouseEvent):void
{
luis.scaleX +=.3;
}
function shortener(event:MouseEvent):void
{
luis.scaleX -=.3;
}

Drawing and Manipulating in Flash

2009-04-06T14:54:00.000-07:00

I found out how to "draw something" in Flash and then be able to move it around using event listeners.
var a:Sprite = new Sprite();
a.graphics.beginFill(0xFF00FF);
a.graphics.drawRect(200,0,100,100);
a.graphics.endFill();
a.addEventListener(MouseEvent.MOUSE_DOWN, mousedown);
a.addEventListener(MouseEvent.MOUSE_UP, mouseup);
addChild(a);

function mousedown(event:MouseEvent):void
{
this.startDrag();
}

function mouseup(event:MouseEvent):void
{
this.stopDrag();
}
Now my task is to generate a whole bunch of sprites (or shapes) and be able to individually move around each one.

How to load an image on to the Stage

2009-03-31T20:47:00.001-07:00

var pictLdr:Loader = new Loader();
var pictURL:String = "http://www.spore.com/static/image/500/308/917/500308917068_lrg.png";
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
pictLdr.x = 200;
addChild(pictLdr);

Spore Visualizations

2009-03-04T09:40:00.000-08:00

Some recent work of prototype applications for new ways of looking at Spore content.

The first one takes the top few creatures (either top rated of all time or top rated from today) and attempts to compare different data about them via bar charts. The three bar charts are for ratings, comments and complexity. When you mouse over one of the creatures it shows the exact data for that creature.

The second application is a creature comparer. It takes the data from two different creatures (stats, rigblocks, colors, ratings, etc.) and puts them head to head with diagrams, bars, etc.

Recent Work in Processing

2009-01-31T00:47:00.000-08:00

More Work With Processing

2009-01-04T13:07:00.001-08:00

I've spent Christmas vacation learning the Java based processing language. Things have been slow but still overwhelming interesting for the power and diversity of the visualizations you can make with it.

Here is just a "mouse over circle", very early start of some great things:

2008-12-23T11:48:00.001-08:00

Your browser does not support iframes.

2008-12-19T18:52:00.000-08:00

My first processing work can be found here
void setup(){
size(400,400);
stroke(255);
}
void draw(){
line(150, 25, mouseX, mouseY);
}
void mousePressed(){
background(0, 0, 250);
}

What does GPU acceleration mean?

2008-12-19T18:49:00.000-08:00

here and here

Ralph Hauwert

2008-12-19T18:33:00.001-08:00

Flare

2008-11-25T21:04:00.001-08:00

Data visualization for the web, get it here.

Amazon's Windowshopping

2008-11-25T20:47:00.001-08:00

Check it out here

Too Much Flash!

2008-11-24T21:45:00.000-08:00

Andre-Michelle
Away3D tutorials
Joa Ebert
Polygonal
Drawlogic

What to do with all of this stuff?

Processing

2008-11-05T20:54:00.000-08:00

void setup() {
size(400, 400);
background(000000);
smooth();
noLoop();
}

void draw() {
vine(33,17, 24);
vine(133,17, 24);
}

void vine(int x, int numLeaves, int leafSize) {
stroke(255);
line(x, 0, x, height);
noStroke();
int gap = height / numLeaves;
int direction = 1;
for (int i = 0; i < numLeaves; i++) {
int r = int(random(gap));
leaf(x, gap*i+r, leafSize, direction);
direction = -direction;
}
}

void leaf(int x, int y, int size, int dir) {
pushMatrix();
translate(x,y);
scale(size);
beginShape();
vertex(1.0*dir, -0.7);
bezierVertex(1.0*dir, -0.7, 0.4*dir, -1.0, 0.0, 0.0);
bezierVertex(0.0, 0.0, 1.0*dir, 0.4, 1.0*dir, -0.7);
endShape();
popMatrix();
}

Learning DirectX

2008-11-05T14:56:00.000-08:00

This book was recommended to me as the place to go to learn the DirectX API. We'll see about that...

Holograms!

2008-11-05T14:46:00.000-08:00

Autodesk Project Showroom

2008-11-05T14:42:00.000-08:00

A pretty cool way to explore interior design options.

3D Sketch

2008-10-28T09:17:00.001-07:00

ILoveSketch from Seok-Hyung Bae on Vimeo.

Four Ways

2008-10-22T21:18:00.001-07:00

With this method (which we can call the blanket method) it looks like we have four ways of creating 3D objects: Luc's CSG, sketch extensions and parameterized curve definitions.

The Graphics Pipeline, Shaders and Virtual Lighting

2008-10-21T20:37:00.000-07:00

The four major functions of a traditional graphics pipeline: geometry processing, fragment generation, hidden surface removal and framebuffer display. The most complicated step in this process is fragment generation that determines how light interacts with the 3D objects in the scene. Not only is the given angle of the local area of the object in relation to all of the light sources important, but texturing determines the color of the light, amount of reflectance and scattering, bumps, transparency and shadows! Designing shaders that realistically portray these graphical effects is the name of the game in computer graphics. Most common shaders such as Phong and Gouraud rely on the Bidirectional Reflectance Distribution Function. The Oren Nayer diffuse model is a reflectance model for diffuse reflection from rough surfaces. It has been shown to accurately predict the appearance of a wide range of natural surfaces, such as concrete, plaster, sand, etc. Many of these shaders rely on the multithread capacity of the graphics card to process each vertex and fragment as a stream. What is the way to think about how we translate this over to the web in the form of Flash and Javascript 3D rendering capacity?

Nice

2008-10-20T17:04:00.001-07:00

A very nice article on importing a design into papervision and manipulating its color.

Mission Accomplished

2008-10-16T08:16:00.000-07:00

Cool, so a bunch of things are accomplished here. I am able to start with a fully connected "picture" (list of marked pixels) and sequentially index them into a drawing. I can then take that drawing a turn it into an N sided polygon by skipping every M points along the drawing. Finally, I can extrude that polygon into the third dimension (third dimensionalize the 2D object) of arbitrary length. What I am really doing is using the polygon as the "left view" of the object and using a width to be a representation of a rectangle on the front view. The challenge is to now use more complex (interesting) front views. I guess the first next step is a triangle front view. The next is to export this process into Flash (Papervision).

New Thought!

2008-10-13T21:47:00.000-07:00

The idea came to me, we can create any 3D object if we have two perpendicular views of that object. If we have two perpendicular views, then all we need to do is parameterize the drawn shape and then triangulate it. Creating a 3D object from two perpendicular views, parameterizing a shape and triangulating a draw are three separate problems and I will attack them one at a time. The long term goal would be the attempt to turn any image seen on the web into a 3D object.

Flash 10

2008-10-09T11:17:00.000-07:00

The newest version of Flash, v10, code-named "Astro," introduces new expressive features and visual performance improvements. This version is good news to existing 3De engines such as Papervision and Away3D. In addition, developers can tweak parts of curves, change styling, replace parts, and use custom filters and effects, delivering improved performance, creative control, and developer productivity. The enhancements extend the current drawing API to allow for read/write rendering and triangle drawing with UV coordinates, while adding memory and performance improvements that allow developers to create shapes using ActionScript that can be modified at runtime without re-drawing. Finally, Pixel Bender is a high performance image processing language that takes the pain out of writing custom, multithreaded effects and filters that can be added to web applications without any Flash Player update. Custom filters and effects can be combined with existing native Flash Player filters and applied to all display objects, including vectors, bitmaps, and video while retaining full interactivity.

Flash Graphics

2008-10-09T11:13:00.000-07:00

I've been investigating for awhile how graphics happen in flash, before I found this class. Besides some obvious primitive type methods such as drawCircle() and drawRect(), there are also more basic drawing operations such as lineTo() and fill(). Display objects that support drawing include Sprite and Shape objects. You cannot create a Graphics object directly from ActionScript code. If you call new Graphics(), an exception is thrown

Autodesk's Project Draw

2008-10-06T16:16:00.000-07:00

BitmapEffectLayer

2008-10-06T15:53:00.000-07:00

Putting "effects" on papervision objects is a little bit awkward.

In the example shown here, basically what we are doing is defining a BitmapEffectLayer called bfx, adding bfx to the viewport and then effect effects to bfx, just like you would any other bitmap. We also need to set the render layer of the object to display its effects. In this case, I was only able to add effects to a collada file I imported, not any old primitive...
var bfx:BitmapEffectLayer = new BitmapEffectLayer(350, 600, true, 0, BitmapClearMode.CLEAR_PRE, true, false);
view.viewport.addRenderLayer(bfx);
bfx.addEffect(new BitmapLayerEffect(new BlurFilter(2, 2, 4)));
dae.setRenderLayer(bfx);
Much of the tutorial can be found here.

Applying Flash Filters in Papervision

2008-10-06T13:19:00.000-07:00

...is rather easy.

Simply import your import flash.filters.* and extend your class from a sprite. Then you are actually applying it to the viewport via:
public var filter:SomeKindOfFilter = new SomeKindOfFilter(0xFF0000, 1, 10, 10, 2, 1);
viewport.filters = [filter];

Possible "someKindOfFilter"s include:
GlowFilter(0xFF0000, 1, 10, 10, 2, 1);
BevelFilter(8, 45, 0xAAAAAA, 1, 0x000000, 1, 4, 4, 1, 1, "inner");

with other info here.

Papervision Shaders

2008-10-06T11:36:00.000-07:00

In this example I use the material.shader class of the Papervision library to explore some of the 3D lighting techniques available in Flash. The top Earth primitive uses a Phong shader which provides a slightly more focused (realistic) version of lighting than the Gouraug shader shown on the bottom. The lighting sources for these two objects are different for a contrast in perspective.

To achieve a lighting effect like this, we first need to define a PointLight3D object and add it to the scene.:
light = new PointLight3D();
view.scene.addChild(light);
Next we need to define a bitMapMaterial and a shader using that light source. We then add those together to create a ShadedMaterial.
var bitmapMaterial:BitmapMaterial = new BitmapMaterial(new earthMaterial(0,0),true);
var shader:GouraudShader = new GouraudShader(light, 0xFFFFFF, 0x303030);
var shadeMat:ShadedMaterial = new ShadedMaterial(bitmapMaterial, shader);
Finally, we simply create a sphere primitive and add it to the scene:
new var planet:Sphere = new Sphere(shadeMat, 50, 10, 10);
view.scene.addChild(planet);

Moving the Camera

2008-09-29T16:49:00.001-07:00

When you have your 3D objects that you want to manipulate, I've been exploring how/when its better to move the camera around and when its better to manipulate the object. In this case I create 5 primitive objects (four spheres and 1 plane) and place them around the camera.

Using a FreeCamera3D object, I simply rotate the camera via:
camera.rotationY = mouseX*360/(600) ;
camera.rotationX = mouseY*360/(600) ;

Homework for the Week

2008-09-26T21:32:00.001-07:00

Autodesk's Project Draw

2008-09-23T21:35:00.001-07:00

The First Web Based Surfboard Editor!

2008-09-18T16:49:00.001-07:00

Using the code:
var incrButton:Button;
var decrButton:Button;
var incrButton2:Button;
var decrButton2:Button;
var circle:MovieClip;

decrButton2.onRelease = function():Void{
with(circle){
_yscale -= 4;

}
};
incrButton2.onRelease = function():Void{
with(circle){
_yscale += 4;

}
};
incrButton.onRelease = function():Void{
with(circle){
_xscale += 2;

}
};
decrButton.onRelease = function():Void{
with(circle){
_xscale -= 2;
}
};

Quick Flash Tutorial

2008-09-18T16:49:00.000-07:00

Using the code:

var tracker:MovieClip;

tracker.onMouseMove = function () {
this._x = _root._xmouse;
this._y = _root._ymouse;
updateAfterEvent();
};

Flash Tooltips

2008-09-18T10:18:00.000-07:00

Done using this code:
// import class for mouse events
import flash.events.MouseEvent;
// import class for ActionScript-only instance tooltip type
import com.afcomponents.tooltip.ContentType
// set tooltip content
myTooltip.type = ContentType.INSTANCE;
myTooltip.content = NeatoAFC;
// mouse is over an item (e.target)
function overHandler(e:MouseEvent) {
// show tooltip
myTooltip.show();
}
// mouse out
function outHandler(e:MouseEvent) {
// hide tooltip
myTooltip.hide();
}
// add event listeners to items on stage
image_mc.addEventListener(MouseEvent.ROLL_OVER, overHandler);
image_mc.addEventListener(MouseEvent.ROLL_OUT, outHandler);

btn.addEventListener(MouseEvent.ROLL_OVER, overHandler);
btn.addEventListener(MouseEvent.ROLL_OUT, outHandler);

Adobe's Flex

2008-09-07T22:32:00.000-07:00

There are alot of good examples of Flex functionality shown here. Recently, I've been following the Flex tutorials for learning how to build application based on data binding.

A Surfboard Editor

2008-09-05T21:23:00.000-07:00

I've been thinking about easier ways to create an object and edit shapes ala a Spore drag and drop approach. I've made some decent strides in managing a curve fitting to a list of points that corresponds to the shape of a 3D object in the adjacent screen. Next steps are probably to actually transition this to two dimensions for faster editing and transferring a basic form into flash.

Differentiating Between Spore Rigblocks

2008-08-22T21:26:00.000-07:00

Spore rigblocks are of a certain type: vertabrate, arms, legs, feet, eyes, mouths. Doing color coded differentiation between those types paints a different picture. Importing this into Papervision and manipulating it in 3D is the next step...

Surfboard Progress

2008-08-22T21:19:00.001-07:00

I've managed to create a surfboard with an arbitrary cross section an iterate that along its length, providing function that indicates width and thickness. Next step is to smooth a structure between two different cross sections.

Perceptive Pixel

2008-08-17T20:33:00.000-07:00

Spore Creature Files

2008-08-16T00:20:00.000-07:00

The construction of Spore creatures are completely defined by the "crt" files that describe the position, orientation and scaling of the "rigblocks" (such as arms, feet and vertabrae) that make up the creature. The crt files for each creature are available by a url, such as here. One can parse these xml files and display the 3D construction of any of the creatures.

Physics

2008-08-13T20:51:00.000-07:00

I'm working on doing some physics, to follow of the footsteps of traer who is simply awesome.
I started with some simple force balancing equations with local spring interactions, endpoints fixed.

Sweet. Next step is to bend a surfboard!

The Greatest Game Ever

2008-08-12T17:44:00.001-07:00

Second Flash Project

2008-08-12T17:40:00.000-07:00

If we define an instance of a movie clip called "ball1" then we just need the actions:

ball1.addEventListener("mouseDown", pieceMove);
ball1.addEventListener("mouseUp", pieceMove);

function pieceMove(evt:Event):void {
if(evt.type == "mouseDown") {
evt.target.startDrag();
}
else if(evt.type == "mouseUp"){
evt.target.stopDrag();
}

Bending Things

2008-08-09T22:02:00.001-07:00

As part of some of the physics and UI stuff I've been thinking about lately, I made two little leaps. The first involves a simple mathematical way to represent the bending of an object for small distances as a quadratic or sine wave. Changing the sign of the amplitude can make an object appear to bend:

Ala spore creature creator, I've been thinking of a way to move around parts of an object and have the rest of the object correspond appropriately by adjusting their position in proportion that they are from the moved point. I started with a flat object that I moved the end position far off and then applied the function to allow the rest of the system to relax.

My next task will be to allow the flexing of an already curved object...

Surfboard: User Interface

2008-08-03T09:20:00.000-07:00

Going is slow in the editing tools / user interface in Mathematica. I've made a mockup interface where the user can adjust the width, thickness and rocker, view their shape and determine the total volume of the board. Not really that friendly to play with, but a decent start.

Now I need to take a serious step back and start doing some of these same operations in Flash. At the same time, I'd like to dive a little deeper into flow over curved surfaces. More later...

Some Physics (At Last!)

2008-07-20T19:54:00.001-07:00

Not much (again), but another landmark. Since our surfboard is now mathematically described we can start to do all sorts of things like measure the thickness from any given perspective. Here is the thickness of my surfboard from a top view and a side view:

Isn't this stuff you always wanted to know? Like "Where is the thickest part of my board?" or "At what point does the thickness of my tail exceed one inch?". Simple questions and simple ways to see the answers. This data has implications for more important things such a bending modes in the board, flex and strength.

Now We Are Talking

2008-07-16T21:26:00.000-07:00

I've been thinking of a ways to simplify our 1 million atomed surfboards. Here's a solution: have an automated way to take segments, choose points on those cross sections and create polygons based on those points. Here's the quick and dirty solution. Still described by three mathematical functions: width, thickness and rocker as a function of length on the board. Again, the resolution can be modified to what ever degree one chooses. Shown here: 6 sets of 14 points each for a total of 84. Much less than 1 million, at least.

2008-07-15T09:12:00.000-07:00

Next mission accomplished. This board was created by using a series of elliptical cross sections that determine the width, thickness and rocker of the board. It is a fully smooth, organically curved board constructed by a few smooth functions.

Yes the resolution is horrible again, but having this low of resolution enables me to work quickly to test things, etc. Just to show that 1 inch resolution is not the end, here is the top 3 inches of the same board created at 0.1 inch res. Alot smoother, eh?

The problem here is that the entire surfboard is created out of hundreds of thousands of atoms, making calculations slow and rendering inefficient even though the description of the board is the same as the 1 inch resolution. Next I'm trying to think of a way to to dicretely represent the object so that we can do physics on it, etc.

We've got rails!

2008-07-13T23:22:00.000-07:00

Just need to put together all the pieces now.

Update: slight change of plans. I realize that creating unique functions for the top of the board, the bottom and then the rails and getting each function to match up is a challenge. Instead, a surfboard is made of a set of ellipses (for now, more general shapes later). All one need to do is define the major axis (width), minor axis (thickness) and y position (rocker) as you traverse down the stringer. As in my previous post, for each of these variables, one needs a small set of points (~5) along the length of the board, and a nice interpolating function to smooth things along...

The Least Glorious Post About Surfboards Yet!

2008-07-10T22:32:00.000-07:00

Okay, some progress this week, but meager at best. I'm trying to improve the tools that a user has access to to modify the shapes, curves that make up a board. This first demo shows a slider for width and length of a board and the resultant quadralateral, er, surfboard, on the right.

Basic tools to create basic objects. How can we take this further? In the second example, I show a set of points that can be moved around that we then fit a curve to.

In this case, the user can play with different placements of the a points and different resulting curves. Given a set of points that determine a curve, particular board can be chosen that we can build into a 3D object that we can then do some physics on, measure fluid flow around, etc. First, I need to be able to constrain how the points move and then I'll need to reflect the points to create the other half. All in good time...

Tirnua's Blender

2008-07-08T21:29:00.000-07:00

The new virtual world Tirnua has decided that Blender will be it's tool of choice for open sourcing custom content. It is still amazing that there is no clear standard in 3D content creation and the learning curve is still so steep! Oh well, better start learning...

Surfboard: Curved in Two Dimensions

2008-07-05T19:50:00.000-07:00

Cool, I did it. Not too hard of a task from my previous post, I've created a board built out of about 3000 atoms, shaped by 4 curves. Here are the atoms:

and here is the gridded result.

Yes the grid needs some work, but that's another story. Also, I'd like to create an object with probably about 100x greater resolution (if thats a 6 ft board, then our current resolution is an inch!). Maybe switch over to Java to make things run faster and figure out another way to view it (Mathematica is too slow!) Next I'd like to do some simple physics on it (simple ball and spring connections to calculate bend and twist modes) and create a little easier User Interface so I can more easily change the length, thickness and overall shape. Yes, the rails need some work too...

Next Step: Mapping Atoms to Curves

2008-07-04T10:14:00.000-07:00

As you can see from this picture, Mathematica doesn't have the greatest tools, (best resolution) for doing 3D contour plots (I don't think this board could turn too well.) But you get the idea. This object was created by restraining the material to be within four functions (top, bottom, left and right).

So the general idea will be to use mathematical curves to map the gridded atoms. First, we need to determine the curves (say left and right as shown in the picture) that restrict the domain of the grid.

Then we will take these points and use another function (top and bottom rocker) to map the domain to a range. More soon...

A Brief Detour: The Way of the Google

2008-07-04T09:57:00.000-07:00

With the going slow in creating 3D virtual surfboards from scratch, I decided to check out Google's freely downloadable 3D content creator, Sketchup. For being free, this is an amazing tool that you can use to create all sorts of things as shown in their Warehouse of creations made from Sketchup. You can even use Sketchup to recreate real life buildings, upload them into Google Earth and fly around them in your virtual airplane.

So it is easy to make a rectangular blank and then curve off the edges:

But when you take to take this blank and put some rocker in it, Sketchup doesn't let you. Technically, the idea is that you can't extrude a curved surface in one dimension with a curve in another direction. Bummer. Back to our previously scheduled program...

Rotating Atoms

2008-06-27T22:05:00.000-07:00

More progress today. I was able to rotate these objects by any angle but restricting the atoms to the grid by simply rounding to the nearest grid point. This method works generally well, but it does turn nice smooth surfaces to these strange, jaggedy things.

As I rotated the object, I also did a measurement of the distance between the two furthest points in the object and the number of unique points (i.e. the volume) both as a ratio to the non-rotated object. As shown as the two numbers in the picture, the distance between the furthest points drops only as low as 0.98, but the volume could actually drop below 0.8 at points.

Should this be a problem?

More Thoughts on Atoms

2008-06-26T20:24:00.000-07:00

Lately, I've been thinking more about a new method of content creation that includes keeping track of tiny particles that live on a 3 dimensional grid. One thing I was wondering was how to take a object described by a long list of particles and define its surface, its inside and its outside. I figured out an algorithm to do this and then use that list of particles to create a 3D grid of points but defining a points nearest neighbors in each direction, x, y and z. The algorithm isn't perfect yet (its hard to perfectly define a contour) but you get the idea.

The next thing I wanted to do was "create complex structures by the simple operation of combining more simple objects" just like I did for my previous method of creating 3D structures. The operation wound up being simple, its simply Boolean operations on lists.

Overall, progress is going well. I think the next thing to do is attempt to rotate objects and have them still adhere to the grid. We would do something like keep the entire list of atoms, then we simply might round the atom to the nearestgrid point. Each atom should have a unique name, a specific coordinate system (one where the center of the object is at the origin) and a general coordinate system (to allow for translations and rotations).

Could this approach be useful for defining a simple, universal method of building 3D objects. It seems like this approach requires computers to have more memory than vast computational skills. Could an entire virtual world be built out of a collection of virtual atoms?

3D Geometry: A New Approach

2008-06-23T14:01:00.000-07:00

My brute force constructive solid geometry stuff has been going okay, but I feel like I've been hitting a wall with creating really complex objects with this approach. For something as simple as a surfboard requires lots of triangles and very awkward ways of adjusting the shape.

What is the limit in doing 3D content creation using particles? Then the problem is reduced to adding and subtracting particles the the object. It will also be easier to do physics calculations such as determining the strength (or weak points) and finding the total volume of the object and doing other discrete simulations such as heat flow, vibrational modes, etc. The thing to figure out is which particles are on the surface and redefine the surface as you add and subtract particle, or is this even necessary?

Now you can even do things like shape objects with arbitrary curved surface!

Disneyland in Google Earth

2008-06-15T12:35:00.001-07:00

The Most Powerful Content Creator Ever Produced

2008-06-11T23:10:00.000-07:00

Coming soon to an internet near you!

Random Stuff

2008-05-24T12:42:00.000-07:00

Hmm... getting bored. Thinking about Spore creature creator, sharing objects via web services, virtual worlds built completely in Flash.

The Virtusphere

2008-05-22T19:41:00.000-07:00

Introducing BumpTop

2008-05-02T21:40:00.001-07:00

This is what I am talking about!

Wii Flash

2008-04-24T23:43:00.000-07:00

This is excellent. You can get read some more documentation here and here

The Evolution of a 3D Interface

2008-04-24T09:06:00.000-07:00

A few posts ago, I talked about how the internet is becoming more 3D with tools like papervision and more webservice connectivity to virtual worlds like Second Life. Before the internet becomes 3D, I think the desktop will evolve more 3D capabilities as we have already seen from Apple. Using directory structure as an example, one can see how we moved from lists to widgets to a 3D interface. The 3D interface is definitely cool and user friendly, but I must admit, I still have am used to using the 2D interface more.

Rotating Surfboard

2008-04-21T08:53:00.001-07:00

Papervision Materials

2008-04-18T18:05:00.000-07:00

First Flash Project

2008-04-18T17:51:00.001-07:00