Bei's Bits

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.

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

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

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

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.

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.

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.

1. 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.
2. 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
3. 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.

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

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