Bei's Bits

Visually Interesting Ceilings

nospam@example.com (Bei Yang) — Sat, 04 Jul 2009 15:19:17 -0500

Every morning when you wake up, usually the first or second thing you see is the ceiling. Most of us don't pay any attention to it all because more than often, it's usually quite plain. Most of the time it's plain white ceiling and at most you may have some visual interest in the form of a ceiling fan. Why start your day off with such boring design? Check these crazy ceilings out featured on deputy dog.

link
Most of these belong to giant cathedrals or office buildings, but what's stopping us from doing something creative with our won residential spaces? Moreover, what about hospital beds? Imagine how boring it is just to stare into plain white all day when your sick!

Oops Awards

nospam@example.com (Bei Yang) — Sat, 04 Jul 2009 14:55:47 -0500

Many people say that there's a difference between art and design. Design is suppose to serve a purpose... but sometimes designers get carried away and design things where form is definitely over any semblance of function. Cool to look at, but definitely fitting the definition of "ugly" these designs definitely stand above the rest in their own right. Check out the nominees for 2009's Oops Awards: the award from bad product design.

Link

My personal favorite is the Cozy Furniture Collection,designed by Hannes Grebin.

The Thug

nospam@example.com (Bei Yang) — Sun, 28 Jun 2009 14:47:48 -0500

About an hour on a Wacom tablet. This is from another cgtalk daily sketch thread.

Free Maya Tutorials

nospam@example.com (Bei Yang) — Sat, 27 Jun 2009 18:35:47 -0500

For the last month, I've been working on an online video series that is aimed at teaching Maya. I want it to focus on good fundamental techniques as well as ease of understanding. I would also like to include chapters about fundamentals of 3d graphics. I often find that many 3d artists lack a solid understanding of what's going on under the hood of computer graphics. With this additional information artists can take their art further faster.

You can find it here: http://beiontheweb.com/maya.html

Little Wheel by OneClickDog.com

nospam@example.com (Bei Yang) — Fri, 19 Jun 2009 02:12:31 -0500

The game "Little Wheel" from OneClickDog.com is a graphically beautiful game with simple story and nice soundtrack. It's got some very well paced puzzles and has a good amount of hand holding so your not searching for what to click making this a very accessible game. The puzzles certainly aren't the most original but they're well executed. The whole game only takes about 5 minutes or so to finish but it's a very refined and polished game so that 5 minutes is very enjoyable. Try it out.

Found also on Newgrounds

First Love

nospam@example.com (Bei Yang) — Sun, 14 Jun 2009 14:21:51 -0500

Titled first love, this is another CGTalk Daily Sketch topic. This one is sort of autobiographical with some twists. Wacom tablet about an hour this morning. CGTalk thread.

Programmatically generated functions in Actionscript 3

nospam@example.com (Bei Yang) — Tue, 09 Jun 2009 02:03:03 -0500

Many people know and use object oriented languages like C++ or Java. However, functional languages like SML and Lisp are just plain cool. Unfortunately, functional programming is a little hard to wrap your head around. Many of today's great scripting languages supports both object oriented programming and functional programming.

Actionscript is no different. It include one of the most useful programming features: function objects. This is used extensively in the callback functions of event handling. When you use a addEventListener, you pass in a function.

Another really useful functional programming feature is the ability to have a function generate another function. Just like a function returning an integer or a float, you can have a function return another function. This is really useful when you need a bunch of similar functions. Having a single function that generates other functions is far easier to maintain and modify.

Check this AS3 example out:

import fl.controls.Button;
import fl.controls.TextArea;

//Lets procedurally do everything... yah!
//this array will store all the button components
var buttonArray:Array = new Array(8);

//create a text area
var txtArea:TextArea = new TextArea();
txtArea.move(130,10);
txtArea.width = 150;
txtArea.height = 230;
addChild(txtArea);

//this is a function that will generate another function
//that can be used as a button event handler dpending on the string
function buttonEventGenerator(i:int):Function{
	//just like declaring a regular variable, we define a fucntion
	var returnValue:Function;
	returnValue = function(e:MouseEvent):void{
		txtArea.text += "Button clicked: " + i + "\n";
	}
	return returnValue;
}

//make some buttons
for(var i:int=0; i < 8; i++){
	//create a button
	var newButton = new Button();
	newButton.label = "Button ID: " + i;
	//move it to the correct location and added it to the movie
	newButton.move(10, 10+i*30);
	addChild(newButton);
	//add the event handler
	newButton.addEventListener( MouseEvent.CLICK, buttonEventGenerator(i));
	//cache it away
	buttonArray[i] = newButton;
}

To use this example, you can either download the (.fla) or, since everything is generated procedurally in this example, you can simply copy and paste the code into frame 1 of a new Flash AS3 file.

In this example, we generate button event handler functions with the function buttonEventGenerator. It takes in an integer i and generates a new function that appends text to txtArea with i in the text.

Now go fourth and save yourself some typing and generate some functions with functions.

download the example

PS. In case your wondering, yes you can write functions that generate functions that generate other functions.

wxPython with Flash Actionscript 3

nospam@example.com (Bei Yang) — Sun, 07 Jun 2009 18:19:50 -0500

As programmer, I always try to avoid to using something just because it's what I know. I'm always trying to avoid the "If you have a hammer, everything looks like a nail" problem. I always try to use the best tool for the job. In the long run, it's almost always easier. Of course, you can't always do this. Sometimes in programming, the tools just don't plan talk to each other easily. Fortunately, my two favorite tools do and it's relatively easily and clean!

I'm talking about Python and Flash/Actionscript. Both tools are based on the "batteries included" mantra but were intended for different purposes. Flash is great for multi-media related stuff. Video, sound, animations, font management, and all user interface components are built right in. On top of that, it's got a visual editor that's easy to use. There's a lot that can be said about "what you see is what you get." Python, on the other hand, is a great multi-purpose programming language. It's got built-in everything! Sockets, serial communications, zip file manipulation, xml parsing, file management, threads, just to name a few, are all included and far easier to use than their C/C++ counterparts.

So how to get them to talk to each other nicely? Fortunately, python has the ability to create ActiveX objects through wxPython and Adobe (formerly Macromedia) has provided some nice hooks into flash that we can access.

Before the examples, there are few caveats.

This will work for windows machines only since it works using ActiveX controls.
This example is intended to be used with Actionscript 3.0 and not 2.0.
This example is intended to be used with wxPython 2.8 or greater. Since 2.8, wxPython has started using comtypes to access ActiveX controls.
Since Python 3.0 is not compatible with 2.x, this example is for use with Python 2.x only.

Without further ado, here's the example. First, the example actionscript for flash:

import fl.controls.Button;
import fl.controls.TextInput;
import flash.events.MouseEvent;
import flash.external.*;

//simple click handler from flash.  Just calls 
function clickHandler(event:MouseEvent):void {
	ExternalInterface.call("externCall", txtInput.text);
}

//external handler
int function externHandler(externalStr:String){
	txtStatus.text = "External Command Received: " + externalStr;
	return 1;
}

//make externHandler available to the outside world as "ExternalReceiver"
ExternalInterface.addCallback("ExternalReceiver",externHandler);

//Make sure the button does something
btSubmit.addEventListener(MouseEvent.CLICK, clickHandler);

As you can see for the example above, we are simply using the "ExternalInterface" class. Basically, to get data out of flash, just use ExternalInterface.call() and design a receiver function on the python side to receive the data. Conversely, to receive data within flash, we use the ExternalInterface.addCallback() to expose an actionscript function to python.

Next the example code for python:

#Flash example
#Author: Bei Yang
#Date: 6-2-09
#Description: Simple example of safe message
#passing to and from flash using a windows activeX control
#Since this depends on ActiveX controls, you can only use this on
#windows.
#
#Disclaimer: Use at your own risk

#depending on your install you may have either delete or modify the
#following 2 lines
import wxversion
wxversion.select('2.8')

#import the needed libraries
import wx
from wx.lib.flashwin import FlashWindow

#which file to load... assuming you put into c:\temp
DEFAULT_MOVIE_TO_LOAD = "file://C:\\temp\\flashExample.swf"

#An object, it really doesn't need to be, but it sure makes it easier
#Many people like to inherit a frame... it does make it easier to then
#drop your code into another wx app afterwards... but that's confusing
#in an example.  If your doing it for real, it's probably a good idea.
class FlashExample:
  def <u>_init_</u>(self, parent, sort):
    self.makeWxWindow(parent, sort)
    self.loadMovie(DEFAULT_MOVIE_TO_LOAD)

    return

  # ----------- Initialization methods --------------------------------
  def makeWxWindow(self, parent, sort):
    """
    Initialization for the making a window and some sizers to auto-
    matically exand the window to fit the flash app
    """
    self.rootPanel = wx.Panel(parent, sort)

    #make a flash window
    self.flashWin = FlashWindow(self.rootPanel)
    #make a button and a text box
    self.txtBox = wx.TextCtrl(self.rootPanel, wx.NewId())
    self.btSend = wx.Button(self.rootPanel, wx.NewId(), "Send Aove To Flash")
    
    #place them all in a sizer and vertically lay the out... not pretty but simple
    self.flashSizer = wx.BoxSizer(wx.VERTICAL)
    self.flashSizer.Add(self.flashWin,proportion=1, flag=wx.EXPAND)
    self.flashSizer.Add(self.txtBox, proportion=0.3, flag=wx.EXPAND|wx.ALL, border=2)
    self.flashSizer.Add(self.btSend, proportion=0.3, flag=wx.EXPAND|wx.ALL, border=2)

    #actually set the sizer to the root panel
    self.rootPanel.SetSizer(self.flashSizer)
    self.rootPanel.SetAutoLayout(True)

    #now that the flash component has been created we can tell the com object
    #to use this class as the event sink.  The flash activeX control has,
    #FlashCall, FSCommand, OnProgress, and OnReadyStateChange as events.
    #We just need to make functions that have the same name and they'll get
    #called when the event is triggered.
    self.flashWin.AddEventSink(self)

    #now for wxEvent handling.
    self.rootPanel.Bind(wx.EVT_BUTTON, self.sendToFlashHandler, self.btSend)
    return

  def loadMovie(self, moviePath):
    """
    This can be called from the outside. It just loads a new swf movie.
    And then sets the window size to the newly load flash app size.
    """
    self.flashWin.LoadMovie(0, moviePath)
    return

  # ----------- Event Sink handlers ------------------------------------------
  def FlashCall(self, xmlStr):
    """
    This is an event sink handler.  The ActiveX control has several events,
    when they get triggered, they simply call a function with the same name
    In this case, we're catching the "FlashCall" event.  The argument will be
    an xml string from flash specifying which function should be called and
    which arguments to give it.  Docs for the xml format can be found at:
    http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7caf.html
    """
    print "FlashCall:", xmlStr

  # ----------- WxPython Event handlers --------------------------------------
  def sendToFlashHandler(self, btEvent):
    """
    Does handling of the "send to flash" button event.  When this key is pressed
    we'll take the string from the text box and pass it onto flash
    """
    sendStr = self.txtBox.GetValue()
    #This is the string that was passed to ExternalInterface in flash. See
    #the .fla actionscript.
    flashFunctionName = "ExternalReceiver"
    #like the flashCall, calling a flash function also requires an xml string
    #we'll just generate one really quick.  Usually I'd probably do an automatic
    #xml parser/caller, but for clarity sake, we'll just do our own really quick here
    xmlStr = "<invoke name=\"" + flashFunctionName + "\" returntype=\"xml\">"
    xmlStr += "<arguments>"
    xmlStr += "<string>" + sendStr + "</string>"
    xmlStr += "</arguments>"
    xmlStr += "</invoke>"
    
    #now to actually invoke it
    rValue = self.flashWin.ctrl.CallFunction(xmlStr)
    
    #you'll notice that you can get return values too.  This return value will
    #be in the same xml format.  For this example, we'll just print it.
    print "XML return value: ", rValue

#basic wx stuff
app = wx.PySimpleApp()
frame = wx.Frame(None, -1, "Flash Example")
example = FlashExample(frame, -1)
frame.Show(True)
app.MainLoop()

This is a bit more complicated. If you use wxPython already, it's pretty straightfoward. If you don't, learn a bit about wxPyhon. It's a great user interface toolkit for flash.

First I create a with a wx.lib.flashwin.FlashWindow object inside it. This object is the python representation of the ActiveX control for flash. I simply use FlashWindow.LoadMovie to load a swf.
I use the AddEventSink function to target the class I just wrote to capture ActiveX events. This means that the ActiveX control will try to find the function with the same name as it's internal events to call. The flash player control has:

FlashCall - Called when "ExternalInterface.call()" is used in Actionscript
FSCommand - Called when fscommand() is used in Actionscript
OnProgress - Called when a swf is being loaded
OnReadyStageChange - Called when a swf either just started loading or just finished

Lastly, I use the CallFunction method to invoke flash Actionscript functions that were exposed earlier using the ExternalInterface.addCallback() within flash. However, to use this function, I must encode a string into an xml format that then Flash will interpret. Further documentation, for the xml format can be found on the Adobe online help site.

With that, you should have two way communication between flash and python. You can even pass arrays in between the too!

Download the Source (zip) Includes a .fla file as well as .py file.
Python - If you don't have this, this tutorial was probably not for you ;)
wxPython - A pretty good GUI Library for python. This should come with Python, but if you don't have it, you can get it here.
comtypes - This is what wxPython uses to access the ActiveX control.

The Fleet

nospam@example.com (Bei Yang) — Mon, 25 May 2009 18:26:23 -0500

Really simple 45min sketch. Topic is from CGTalk's daily sketch forum. "The Fleet". Throw back to Homeworld the game here...

Ink Style

nospam@example.com (Bei Yang) — Tue, 19 May 2009 01:44:54 -0500

Tried to do some stuff with an ink style. These took about 10 minutes or less.