The Pianist v1.0

After the easter break I decided to do a recording of every key on my Roland HP1300e digital piano (I used to play about 7-8 years ago). I also took some source shots of it on my Nokia N80. I took the shots in to work and ashepherd managed to whip up something fantastic very quickly 😀

Click the image below to be whisked over to the parks page on www.vastpark.com to have a go at it:

VietPark 1.5 Online

A new version of VietPark is now online, here’s what I’ve changed:

• The site now shows all of my photos rather than just 5 max
• Added smart caching system to prevent redundant queries to Flickr
• Added a loading animation
• Removed the movie clapper, it wasnt being used for anything just yet so was adding unnecessary size
• Removed the picture frames, instead im using the Slider plugin to display the images

Its starting to get closer to where I want it for version 2, which I had a few ideas about over here.

Check it out for yourself at vp://vastpark/craigomatic/vietpark and let me know what you think.

BTW, thanks to ashepherd for his efforts in making the assets for VietPark.

A collection of ideas…

After spending a lot of time developing and not much time on anything else, I’ve finally had a chance to have a think about some new ideas for sites I want to put together and get online.

Here’s a brief run-down on what im hoping to achieve:

VietPark 2.0

For the next incarnation of VietPark I want to improve the usability of the site as well as the presentation of the photos. Currently only 5 pics from the collection can be viewed at any one time and the picture viewing system isn’t powerful enough. I want to allow users to print, save and zoom into each image as much as they would like. I’d also like to use the Slider functionality for image viewing.

Pool Game

I’ve always loved Virtual Pool 3 so a pool game is definately on the cards for VastPark. Im thinking this site will be fairly basic to begin with, just a table in the middle of a room and some ambient sound. I want people to be able to play the game and then save their score to a high-scores list that shows up on the site.

MySpace Style

Everyone seems to have a MySpace page these days so to be different I want to try to emulate something similar.

Im thinking of an island thats filled with a heap of my favourite things; Music, movies, tv shows, sports, bars/pubs/clubs, restaurants, and maybe a dart-board with a random picture on it of something I dislike (ie: JAVA/Collingwood football club/Ian Thorpe/etc).

Most of this will be image based so hopefully the file size will be fairly reasonable.

Piano Site

A site that has a piano in it which can be played. Users will be able to save their songs for others to play back and rate. These songs might end up being linked to via a jukebox in the MySpace style site above and the history of these songs shown via the Slider plugin with a picture of the user’s avatar.

VietPark – Part 4: Implementation

Setting up the actual layout of the site in the VastPark Site Builder is very quick and easy, so I got our champion 3D modeller in the office to knock up some assets for me and I did just that.

Some of the ideas in the original mockup I’ve decided against, such as the walls. Instead its going to be a black space with the entities arranged in a similar way to how I previously wanted them.

Here’s are some screenshots that show the site in the builder:

And here is a code sample that shows how im making it all happen:

Clicking the flags:

Using the Flickr Plugin, this is fairly simple. First I search Flickr for my username and the tags for the images that I want to show for a particular example. The below code sample shows how to do the Saigon flag:

function OnClick(sender, entity)
	--create the flickr object and perform a search
	a = Flickr()	
	a:SearchUser('craigomatic', 'vietnam,saigon')	
	i = 1	
 
	--generate an entity for each search result using the MoveNext command
	while i < 6 do
		item = a:MoveNext()
		_GenerateEntity(item, i, entity.Position)
		i = i+1	
	end
end
 
--Create the function to generate an entity for each item
function _GenerateEntity(item, count,pos)
	--dimensions of the entity
	dim = Vector(0.2, 0.2, 0.01)	
	entity = GenerateBoxEntity(dim, pos)
	
	--add the OnClick events so each entity when clicked will go to the correct page
	entity.Script.ScriptDictionary[EventType.OnClick].Enabled = true;	
	--entity.Script.ScriptDictionary[EventType.OnClick].Payload = "function OnClick(sender, entity)\r\ndest = GetEntity('PicDest')\r\ninFocus = dest:GetCustom('focused')\r\nif(inFocus ~= nil and inFocus.Name ~= entity.Name) then\r\ninFocus:SetPosition(inFocus:GetCustom('basePos'), 250)\r\ninFocus:SetCustom('atBase', true)\r\nend\r\nif(entity:GetCustom('atBase') == true) then\r\npos = GetEntity('PicDest').Position\r\nentity:SetPosition(pos,125)\r\nentity:SetCustom('atBase',false)\r\ndest:SetCustom('focused', entity)\r\nelse\r\nDebug(entity:GetCustom('basePos'):ToString())\r\npos = entity:GetCustom('basePos')\r\nentity:SetPosition(pos,125)\r\nentity:SetCustom('atBase',true)\r\nend\r\nend"
	entity.Script.ScriptDictionary[EventType.OnClick].Payload = "function OnClick(sender, entity)\r\ndest = GetEntity('PicDest')\r\ninFocus = dest:GetCustom('focused')\r\nif(inFocus ~= nil and inFocus.Name ~= entity.Name) then\r\ninFocus:SetPosition(inFocus:GetCustom('basePos'), 250)\r\ninFocus:SetRotation(inFocus:GetCustom('baseRot'), 250)\r\ninFocus:SetCustom('atBase', true)\r\nend\r\nif(entity:GetCustom('atBase') == true) then\r\npos = GetEntity('PicDest').Position\r\nentity:SetPosition(pos,125)\r\nentity:SetRotation(Vector(0,0,0), 125)\r\nentity:SetCustom('atBase',false)\r\ndest:SetCustom('focused', entity)\r\nelse\r\npos = entity:GetCustom('basePos')\r\nrot = entity:GetCustom('baseRot')\r\nentity:SetPosition(pos,125)\r\nentity:SetRotation(rot, 125)\r\nentity:SetCustom('atBase',true)\r\nend\r\nend"
			
	e = GetEntity('frame'..count-1)
	destPos = Vector(e.Position.x,e.Position.y,e.Position.z)
	destRot = Vector(e.Rotation.x, e.Rotation.y, e.Rotation.z)
	
	--keep a record of where this entity first appeared at  
	entity:SetCustom('basePos', Vector(destPos.x, destPos.y, destPos.z))
	--and its rotation
	entity:SetCustom('baseRot', Vector(destRot.x, destRot.y, destRot.z))
	
	--tell it that its at the starting pos
	entity:SetCustom('atBase', true)  
  	entity.RenderEnabled = false
	
  	--look for the image, and apply it to the entity
  	if(item.MediumUrl ~= nill) then
    	tex = LoadTextureURL(count, item.MediumUrl) 
    	SetTexture(tex, entity)
 	end  	
	
	entity.RenderEnabled = true
 	startpos = Vector(pos.x,pos.y,pos.z)
 	entity:SetPosition(startpos,100)
	entity:SetScale(Vector(2,2,2),100) 
	Sleep(100)  
	entity:SetPosition(destPos, 500)
	entity:SetScale(Vector(7.5,7.5,7.5),500)
	entity:SetRotation(destRot, 500)
end

To view this site in action, visit www.vastpark.com and sign up to get access to download the browser. Once you have downloaded the browser, the link to view VietPark is: vp://vastpark/craigomatic/vietpark

Well thats it, version 1 of VietPark is up and running…so what do you think? Im already at work on version 2 which I’m pretty excited about. More details soon 😉

VietPark – Part 3: The Design

With the mockup sketches in hand, I can now look at how the scripting will come into play.

My first design decision is to use Flickr as my photo storage area. The benefits of this are:

1. VastPark supports Flickr natively through a plugin
2. Flickr is free and nice to use
3. I dont have to worry about the bandwith bill

My second design decision is to use a managed control system for this site. Rather that letting the user walk around the site at will Im going to restrict the movement to certain regions so I can better control their experience.

With these design decisions in place, I can now think about the triggers and events I’m going to need for this site. I’ll take a look at this on an entity-by-entity basis:

Flags
The flags are going to connect to Flickr and download a certain set of images according to my Flickr username and the tags I have applied to the pics. I want this to happen when the user clicks on the flag. I also want the flags to animate when the users mouse hovers over them.

Events
OnClick: Connect to Flickr and generate entities for each search result
OnHoverEnter: Play flag animation (looping) and apply the highlight shader
OnHoverLeave: Stop flag animation and remove the highlight shader

Movie clapper
When this is clicked on its going to cause the currently visible photos to begin a slideshow. Its animation will play while the mouse is over it and it will light up to show the user its clickable.

Events
OnClick: Begin slideshow for currently visible photos
OnHoverEnter: Play looping animation and apply highlight shader
OnHoverLeave: Stop animation and remove highlight shader

Notepad
Will allow the users to add a comment to my site.

Events
OnClick: Open my blog to the comments section for Vietpark (alternatively use the comments section on the VastPark Commons)
OnHoverEnter: Play looping animation and apply highlight shader
OnHoverLeave: Stop animation and remove highlight shader

Finally I need to think about site events. When the site first loads I want it to connect to my chosen comments website and download all of the comments and the user’s avatar that posted the comment and generate entities for each one in the site. This can all happen asynchronously. So in the SiteLoadEnd event, I’ll write some code to accomplish this.

Its been fairly brief, but I now have a simple design that I can take to the implementation stage.

VietPark – Part 2: The Mockup

Now that I have the basic idea together (see Part 1: The Idea), its a good idea to do a few mockup images or sketches to begin formalising the layout of VietPark.

Rather than jumping into photoshop at this stage, I’ve decided to go oldskool and do a few sketches. Because my original idea is fairly basic, I can probably get away with only doing a sketch of the top and an isometric view that covers 2 of the 4 walls.

Top Down

Isometric

From the sketches you can probably work out that I’m going to need about 6 unique entities (an entity in VastPark is what 3D assets become once they are imported into the system):

• 1 room that is sort of squarish and consists of 4 walls and maybe a roof
• 1 flag (maybe animated)
• 1 table
• 1 animated notepad with pen
• 1 animated movie clapper board
• 1 heightmap of Vietnam

You may be wondering why I haven’t included any assets on the list for the pictures and messages that are going to appear in the site. Luckily, VastPark has built in scripting commands that can generate a number of primitive objects on the fly, including:

GenerateBoxEntity
GenerateConeEntity
GenerateCylinderEntity
GenerateSphereEntity

In this case, im going to use

GenerateBoxEntity

to create polaroid looking assets for the images and sticky notes for the messages, all of which will happen on the fly as the result of an event trigger.

Part 3 will go into further detail on the design aspects, including some actual code samples and test implementations.

VietPark – Part 1: The Idea

My special lady and I are headed to Vietnam for a 2 week holiday next month and instead of setting up a photo page, I have decided that this is a perfect opportunity to create a VastPark site to share with my family and friends (and anyone else who wants to take a peek). I’ve decided to name this site VietPark.

The basic idea of this site is to create a single room with a table in the middle of it. On top of that table I want to put a smallish 3D model of Vietnam with a series of flags that act as the navigation system for the site. Each of these flags will correspond to a place of interest that we photographed along the way. Users will be able to click on the flags and have the images appear on 3 of the 4 walls around the table. The fourth wall will be used as a message board for visitors to leave me a message.

Stay tuned for some sketches of VietPark in my next post 😉

• 
  

• Recent Posts

  • Open Avatar Introductory Video
  • Presentation: The Technology Behind VastPark
  • Plugin Framework available via NuGet
  • The Pianist v2
  • Continuum v2 – Open Capture Framework