Mike Chantler's Project Suggestions

Session 2009-2010

 

 

Projects

 

  1. Web application: Genetic Algorithm assisted Photographic Flickr Collage Generation
  2. Web application: Flickr image texture search and geberation
  3. Web application – Multi-user Brainstorm tool for creating 3D Mind-maps
  4. Google map, Flickr image mashup for student guide to campus and local areas
  5. Web application: Photo Editor
  6. Cool/fun/wacky Web application: Your Idea
  7. Web application - OpenGL 3D Transformation Tutor
  8. Wii head tracking for 3D display
  9. Web application - texture generator
  10. Web navigation designer
  11. Project 11: Web-based meeting  planner

 

 

Introduction to Rich Internet Applications

The projects described here nearly all use Abobe's Flex so that their full graphical functionality is completely portable and accessible via www browsers. Essentially, Flex allows you to build client-side applications that have the responsiveness and sophisticated graphics that you used to only get with good desktop executables. It also allows you to easily produce mashups using web APIs available for Flickr and Google maps for instance.

Rich Internet Applications.

Three years ago Adobe released Flex a new programming environment for so called “Rich Internet Applications”. This is causing a revolution in the way internet applications are programmed that means the days of frustrating Java/HTML + serverside scripting combinations are numbered. Microsoft's similar offering is Silverlight, however, Flex has the advantage that its target is the Flash player - which already has a huge usre base.

Flex’s delivery platform is the Flash player which means that applications look identical on any browser/OS combination. It also means that it will execute on 99% of all computers. Gone are the days of adding screeds of conditional script to webpages to cater for the differences between Firefox, IE etc.

Flex has:

  • an extensive range of interactive gadgets: colour pickers, navigation systems, tree controls, drop-downs, rich text boxes, buttons, sliders, scroll bars, pie charts, bar charts;
  • a good range of graphical effects such as fades, glows, bounces, easing, reveals etc.
  • support for simple 3D graphics (Flex 4)
  • a set of dynamic layout  components: tillers, repeaters, sliding partitions, vertical and horizontal boxes;
  • excellent support for XML and databases - that makes interfacing its gadgets (e.g. graphs and datagrids) to MySQL via PHP
  • a scripting language similar Java script;
  • good support for styling of the visual gadgets and layout using cascading style sheets;
  • an XML based layout language; and
  • an excellent  visual layout IDE that helps you place and configure all the visual gadgets.

Its quick to pick up for anyone who has used HTLM and Java or similar layout and programming languages. ‘Flex is being used for the first half of the 4th year module “Animation and 3D Modelling”.

Examples

The picture gallery example shows how Flex layout and navigation tools can be used to quickly create an web application which automatically resizes, scrolls, has click behaviours etc. Note that the application is driven by a single xml file that was generated by an image manipulation program (XnView).

Notice that this is an incomplete teaching example and still has many irritating behaviours!

For other apps etc. see “Links: Animated Flex & Flash Examples” section at http://www.macs.hw.ac.uk/~mjc/teaching/Animation/index.htm

 

 

Project 1: Web application: Genetic Algorithm assisted Photographic Flickr Collage Generation

Goal

To develop highly interactive, cool web application that allows users to quickly generate a range of collages of Fickr photos using Flickr tags and image features.

Idea

  • Browser application in which user selects Flickr photos using tags, browsing etc.
  • The images are laid out in a collage and displayed to the user using some simple rules e.g. images with 50% light sky should be at the top, images containing bright primaries should be at the front, images with similar Flickr tags.
  • Simple effects should be occasionally applied to the images - e.g. sepia, blurring, distortions, hue adjustments etc.
  • The user presses a “reshuffle” button and a new collage is produced.
  • If the user presses the button quickly then the collage receives a low score, those that the user lingers on receive a high score.
  • A genetic algorithm is used to generate new collages which are combinations of old (popular) collages.
  • At any point the user may ‘drag’ images into new positions or ‘zoom’ them to new sizes. These actions cause automatic repositioning of surrounding images using simple dynamics to give the photographs ‘weight’.

Sources

Skills required

Flex application so basic programming skills required.

Inspiration

 

 

Project 2: Web application: Flickr image texture search and geberation

Goal

To develop highly interactive, web application that allows users to quickly search for images of various Flickr textures  using Flickr tags and image content.

Idea, Sources and Inspiration

Similar to project 1a with bits of project 9.

Skills required

Flex application so basic programming skills required.

 

 

Project 3: Web application – Multi-user Brainstorm tool for creating 3D Mind-maps

Goal:

Web application that allows several people at different locations to brainstorm, alowing them to share and develop ideas to create and evolve a 3D mind-map.

Idea:

  • 3D space where you can create idea “bubbles” and link them to other bubbles.
  • Full 3D navigation, pan, tilt, move, rotate, zoom in mind space.
  • Bubbles can have sound clips, images, clip-art and .swf movies attached.
  • Configurable bubble attributes: weight, size, gloss, name, links, simple animation.
  • Configurable link attributes: affinity, thickness, transparency, colour.
  • Change control tracking/auditing and limited ‘undo’
  • Bubbles are hierarchical (they can contain mini-mind-map).
  • Dragging a bubble keeps its links attached to neighbouring bubbles and will also drag these neighbouring bubbles according to their weight and link affinities.
  • Users ‘own’ the bubbles that they create but may pass on ownership to other brain-stormers.

Skills required

Flex application so basic programming skills required.

Inspiration:

 

 

Project 4: Google map, Flickr image mashup for student guide to campus and local areas

Goal:

Web application that allows students to upload images, movies, and comments to a Flex application that displays all information on a local Google Map. Users should be able to 'sketch' paths, routes, buildings as well as adding comments, movies etc. to locations.

Application should be locally hosted using simple PHP and MySQL.

Idea:

  • Use Google's Flex API to create a web application that has full Google map functionality (see Google's Flex Developer's Guide) that on startup goes to the local Google Map.
  • Add simple sketching capability to allow users to sketch routes, important locations, walks etc
  • Add basic information to Riccarton map (e.g. building outlines, paths, department info on zoom and mouse over).
  • Add basic information to local area map (e.g. bus routes, airport, bus station etc.)
  • Add PHP/MySQL interface to allow users to add and store images, sketches, movies and comments to map locations
  • Add Flickr referencing using geotagging

Skills required

Flex application so programming skills required.

Inspiration:

  • Google myMaps provides a nice idea of the basics of the interface (I've added the routes and polygons highlighting our building and its carparks below). But imagine that this was a Flash app. to which we could add various animations, comment lists, wkiki, and mouseovers etc. and that it was linked to our own mySQL database. Local students could add movies, routes, places of interest, comments etc. (ok, so local pubs, shops, clubs would be more interesting.....)


    View Click here for larger map  
     
  • Google's Flex demos and Developer's Guides show you how to get a simple Flex app. talking to Google maps (it took me about an hour to get something going).

 

 

Project 5: Web application: Photo Editor

Idea:

  • Web application that implements some of Photoshop, Gimp etc. - the most interesting ones being those that are highly interactive (and hence client-side processing) e.g. cutting out and compositing foreground figures and fitting 3D virtual rooms etc.

Skills required

Flex application so basic programming skills required.

Inspiration:

 

 

Project 6: Cool/fun/wacky Web application: Your Idea

Idea:

Anything that you want to do for a Web application that’s legal and is challenging enough to provide good marks for a 4th year project. But it must have a clearly defined set of potential users and be of clear benefit to them, so it can't be just an "I want to learn about Flex apps" project.

Skills required

Flex application so basic programming skills required.

Student must self-reliant and be likely to get a 2.1, of first class degree.

 

 

Project 7: Web application - OpenGL 3D Transformation Tutor

Idea:

Web application that provides interactive tutorial for how OpenGL 3D transformations work.

Skills required

Flex application so basic programming skills required.

Knowledge of basic OpenGL transformations.

 

 

Project 8: Wii head tracking for 3D display

Goal:

Implement Johnny Lee's head tracking for 3D display - this makes the screen adapt to where you are in the room making it look as if the screen is a window onto a real 3D world.

Idea:

Use Johnny Lee's Wii software and Flex's 3D effects (or OpenGL) to implement simple dynamic 3D sceens.

See the YouTube videos and his web site for great description.

Alternative

Id also like to do this with an Android phone with tilt sensors.

Skills required

Flex/openGL/blue tooth application so good programming skills required.

 

 

Project 9: Web application - texture generator

Idea

Web application that allows users to synthesise 3D surface textures such as rock, stone, tiles, brushed metal, weaves, wood grain, marble etc.

Project

This project would develop a set of Flex components (in ActionScript) and Flex's automatic layout tools to produce a Flash application.

Two user modes would be provided: Basic and Expert.

Basic Mode - Users would select a texture 'type' (e.g. rock, stone, tiles, brushed metal, etc.) and be presented an image of the output texture. Sliders would allow users to change attributes such as roughness, granularity, randomness, etc. Users could then save surface normal and height maps to image files.

Expert Mode - Switching to expert mode would show the basic texture generators used to produce a particular texture as a series of interconnected blocks (e.g. to generate marble we would have a fractal noise block connected to  folding block connected to thresholding block). The user could then alter any parameter in any block, change the connections between blocks to reorder them or add in new blocks from other texture generators for complete control.

Good combinations could be published on the web with the expert's name.

Skills required

Flex application so basic programming skills required.

 

 

Project 10: Web navigation designer (or distributed brain storming)

Idea

Develop a Flex application to allow a number of remote users to drag and drop web page categories into groups - the application then generates the optimal grouping for tree navigation of the site.

This could be extended to distributed brainstorming if users were allowed to dynamically create categories.

Could also be extended using a little image processing to process photos of collections of posit notes - each posit note containing an idea from a brain storming session. Users could then organise them into groups individually - the aggregate result being presented (as a  dendrogram or other cluster representation).

Project

Use Flex list components (advanced data grids) to allow users to drag and drop categories together. Then apply something called dendrogram analysis to combine and show optimal grouping. This would be similar in many ways to WebSort

Skills required

Flex application so basic programming skills required.

 

Project 11: Web-based meeting  planner and other tools

Idea

Improve on Doodle's meeting organiser and other tools using a Flex interface.

Project

Use Flex list components (advanced data grids) to allow users to wipe, highlight, drag, drop diary to indicate availability for meetings.

Skills required

Flex application so basic programming skills required.