NM2: interactive visualization

6700020 / project-based course, semester 2, 6 ects

Æliens


schedule(s) -- common(s) / register! / request for grading


participant(s) / lab(s) / assignment(s) / NM2

  1. introduction -- storytelling in the digital age
  2. interactive scenario(s) -- concept/story/space(s)
  3. requirement(s) -- animation & visualisation
  4. student presentation(s) -- concept(s) & plan(s)
  5. advanced topics -- storytelling & game design
  6. advanced topics -- sound & visuals
  7. student presentation(s) -- work in progress / moodboard(s)
  8. student presentation(s)-- final assignment(s)

overview


basic exercise(s): storytelling in a digital age / NM2


final application(s): deliverable(s) / NM2


(*) approach: scenario-based visualisation(s)/game(s);
technology: unity, ximpel, html5/js, flex/as3;
recommendation(s): low * -- ***** high

www.writingstudio.eu / tip(s) / how to write an essay? / NM2


deliverable(s) -- interactive visualization

document(s) / scenario(s) / format(s)

  1. concept(s) -- (short) synopsis, with (optional) sketches
  2. requirement(s) -- with shareholders, planning, MOSCOW
  3. story board -- storyline(s), non-linear storygraph, assets
  4. prototype(s) -- partial version(s) of interactive application(s)
  5. final application -- full interactive application
  6. accompanying website -- with application and support
  7. promotional clip -- one/two minute trailer
  8. justification -- explanation of design decisions, reflection(s)
  9. package -- all the material with documentation

www.writingstudio.eu / defragment your mind


remark(s)

Students will work in groups, and manage themselves. Representatives from the group are required to contact the stakeholders in an early state, and obtain the requirements and wishes, and organise these in suitable documents, using e.g. the MOSCOW division into must have, should have and will not have categories of properties.

In general, each project will result in a series of such documents, that should be part of an online working site, an interactive video (using ximpel.org), which gives interactive access to the video material obtained, a 3D game space (developed with unity3d.com), which provides spatial exploration of the various scenarios and/or animations, as well a clip, that may serve as a trailer. The end result will be delivered online, as a website, in such a way that it can be packaged an put on the website of the person or institution that gave the project assignment. Documentation, must be sufficient for installing and using the material delivered, and should include a justification of design decisions.

In a way

this may seem like a rather constrained approach, that may limit your creativity. Indeed, it is, and it may limit your creativity! But, it does allow you to create products that are really worthwhile, and that will be appreciated by others, and hopefully praised for its creativity. And, keep in mind that working in a group, although not easy, is the best if not the only way to develop your skills and creative insights.

and finally,

don't forget that together we create a great collection of applications contributing to the CTSG, so don't forget to mention that also this project is powered by CTSG.

lens 01 <> essential experience(s)

_ .. []: << >> / _ / .

... stop thinking about your game and start thinking about the experience of the player:

If there is a big difference between the experience you want to create and the one you are actually creating, your game needs to change ...

* play / social(s) / machine(s) / method(s) / cycle(s) # ! @ Æ

session(s): interactive visualization

(..) / sign(s) / NM2: 1_


session(s): interactive visualization

(..) / crisis / NM2: 8_


contents

The course will address the development of rich media applications using current web-based media technology, with a special focus on animation and interactive visualization(s) of dynamic complex systems. The platform used will be Adobe flex / as3.

Recommeded literature: Foundation Actionscript 3.0 Animation: Making Things Move! by Keith Peters

Online reference(s):

prerequisites:

CA1, CS1, NM1, MA1

goal(s) & attainment target(s)

During the course students are expected to learn the skills to create moderately complex media applications.

After following the course, students are expected to have

Students are expected to have an explorative attitude, and will be stimulated in developing aesthetically interesting animations and dynamical visualisations.

place in curriculum:

NM2 is meant to be an intermediate course, required for both ST and NM students. The course will enable students to apply their knowledge of dynamic systems and mathematics in a (media-rich) context, as a preparation for more advanced projects in virtual enbironments and game development. In relation to DE-courses, the focus of NM-courses Is primarily on technical issues and programmatic authoring.

application area & motivating example(s)

Physics based animation is an effective means of visualizing complex information structurs. Effective information visualization morever depends on intuitive ways of interaction to support exploration. Interactive information visualization is increasingly being used in web 2.0 applications, for giving access to huge amounts of user-contributed data such as blogs and video.

teaching method(s)

The course will be organized around lectures in which both technical and conceptual issues, related to animation and visualization, are dealt with. The assignments will consist of a series of basic exercises and a final exercise In which the students are required to develop a moderately complex dynamic web application.

Regular feedback will be given in classroom sessions where students present their work as well as via online comments or email. Grading will be based on basic assignments, the final assignment project with documentation, as well as an essay in which a topic of choice, either technical or in relation to issues of animation and information visualisation, is discussed in more depth.

special facilities:

computer lab & presentation facilities, installation of flex 3 SDK.

topic(s)


NM2 target(s)


interactive visualization -- authoring


session(s)


  1. introduction of (rich) media platform(s)
  2. basic assignment(s) -- animation (1)
  3. essentials of animation and visualisation
  4. basic assignment(s) -- visualization (2)
  5. principles of interactive information presentation
  6. basic assignment(s) -- interaction (3)
  7. elements of data-driven information systems
  8. presentation of final assignment(s)

basic(s) -- interactive visualization


  1. particle systems -- with collisions and effects
  2. map-based visualization -- e.g. using www.umapper.com with flex/as3
  3. information overlays -- e.g. in combination with interactive video

final(s) -- interactive visualization


reference(s)


As said before, a highly recommended reference for interactive data visualization is Visualizing Data by Ben Fry, not in the least because the approach described is tightly connected with processing and its underlying philosophy of creative intuitive understanding by computational means. However, also the flex/as3 related references are worthwhile because they give access to the display environment of flash, which is the dominant media technolgy for (business-related) web-applications.
  1. Visualizing Data: Exploring and Explaining Data with the Processing Environment, by Ben Fry -- (amazon)
  2. Foundation Actionscript 3.0 Animation: Making Things Move! by Keith Peters -- (amazon)
  3. Professional Adobe Flex 2 (Programmer to Programmer) by Rich Tretola, Simon Barber, and Renaun Erickson -- (amazon)
  4. Foundation Flash 8 Video (Foundation) by Jordan L Chilcott and Tom Green -- (amazon)
  5. Visualizing the Semantic Web: XML-based Internet and Information Visualization by Vladimir Geroimenko -- (amazon)
  6. Eliëns A., Wang Y. van Riel C. and Scholte T. (2007), 3D Digital Dossiers -- a new way of presenting cultural heritage on the Web, In Proc. Web3D 2007, ACM SIGGRAPH, pp. 157-160
  7. A. Eliëns, topical media & game development -- media.eliens.net

resource(s) / NM2 / assignment(s)


  • community -- blprnt.com
  • jared tarbell -- www.complexification.net / levitated.net/gravityIndex.html (flash) /
  • learning -- www.learningprocessing.com
  • visualizing data -- benfry.com/writing
  • computational art -- friendsofed.com/book.html?isbn=159059617X
  • physic(s) -- www.pathf.com/blogs/2008/09/flash-flex-physics-engines-and-examples/
  • js -- ejohn.org/blog/processingjs
  • org -- www.processing.org
  • living planet -- unicef report
  • visible city -- vimeo.com/2437214 / vimeo.com/2437344
  • gadget(s) -- code.google.com/apis/visualization/documentation/gadgetgallery.html
  • networked visualization -- www.latebytes.nl
  • student(s) work -- www.annehelmond.nl/2009/05/15/ma-students-present-projects-visualizing-our-world-of-data

  • NM2

    advice for the student(s)

    The interactive visualization course provides you the opportunity to apply what your have learned in previous mathematics and programming courses in an integrated way. You may even try to apply what you learn in dynamic systems in an application that may primarily be meant to be entertaining. Keep in mind that, as testified by the use of physics simulation(s) in games, that visual appeal may well be served by more or less deep computational/physical principles and, as you should have learned in the creatove explorations, mathematical insight(s).

    (11/5/11):

    PDF

    monitor(s)


    Almost a year later, a few comment sremain. First, the choice for unity was justified, and seems even more so when the group gets larger. The moodspace election, however was suggested to be earlier.

    All in allthe students liked the involvement of external shareholders with their assignments. For the telemedicine application this was succesful. The nano group, however, did not succeed, due to planning, too high expectations, and students of the team stopping with the study.

    (11/5/11):

    PDF

    monitor(s)


    In contrast with last year, most groups chose for the nano assigment, and the concepy presentations were promising. Not every group is online though. Perhaps partly due to an overladen schedule, the students started really slowly. Also, somewhat disappointingly, only half of the students submitted a moodboard in unity, and all in all the quality, I must say, was quite OK. In general, however, the (total) group of students is somewhat unresponsive and passive. And with the exception of some, both blogs and portfolios are not maintained after CA1 and NM1, which makes them virtually useless as an instrument to monitor progess and as a measure for motivation and activity. I partially blame the mentor/tutor system for this, since they do not properly emphasize the importance of individual students' portfolios, nor, apparently, take the time to look at either blogs or portfolios!