JMG's Projects

Be City, an interactive fiction, gallery of web designs

This gallery presents several websites and micro-websites created for the presention of stories and for the visualization of dynamic media. The illustration above this text shows a single frame from "The Coastal Express is on time"; a micro-site with a real time web animation that plays inside a web browser using javascript and cascading spreadsheets. The webpage displays several layers of images that are animated on top of the background of the scene.

Some of the following projects are personal experimentations, others are website designed for clients. You can click on the image to open the corresponding webpage. Best viewed in Chrome or Firefox.

BeCity animated story

Long form web documentary, one page website, HTML5, javascript, Cascading Spreadsheets, vertical scrolling, digital watercolors, character design, transmedia, non-linear storytelling.

The website presents a story and its characters. The story is based on the journal of a tourist that disappeared while visiting small islands in the Pacific. The visuals and the design are inspired by a lost world of steam engines and trains. The space of the island is used as the environment for a scavenger hunt type of game.

Digital Sketchbookanimated story

Interactive gallery, HTML5, javascript, Cascading Spreadsheets, horizontal scrolling using buttons, digital sketching, drawing, character development.

The interactive gallery has the look and feel of an old sketchbook. It presents the main characters of the story, some elements of the plot and some of the backgrounds of the scenes..

Children bookchildren story

Interactive overlays, HTML5, javascript, Cascading Spreadsheets, digital sketching, drawing, character design, 3D animation, game, mobile device, transmedia, non-linear storytelling.

This is a serie of interactive illustrations for an interactive book adaptation of BeCity.

Berlin 1937, interiorscharacter design

Dynamic media, overlays and layers, HTML5, javascript, non-linear storytelling.

Presentation of a gallery of characters composited over digital paintings. This is a study for scenes taking place in 1937 Berlin.

Chess Gameanimated story

Storytelling, 3D characters design, dynamic content, non-linear storytelling.

This is a serie of interactive illustrations for a children book adaptation of BeCity for 6 to 9 years old.
The trigger on the right side of the frame switches to the next slide.

presentation at "Digital Anthropology 2014", France.

Scene 1. Click on the image Best viewed in Chrome or Firefox.

Scene 2.

Scene 3.

Scene 4.

Scene 5.

Scene 6.

Transmedia, real time animation, linear storytelling.

Viewers have the possibility to create their own interactive paths through the episodes of “Be City”. A “Content Manager”, inspired by what has been created for online games, uses HTML5 + Javascript for the distribution of different versions of a scene over multiple platforms and devices.

A typical scene of “Be City” includes several images with transparencies in the foreground, character animations in the middleground and a painted background. Writers and programmers create scripts that assemble the scene - in real time inside a web browser or on the screen of a device" smartphone or tablet. The “Content Manager” chooses to hide or to show assets, to create basic animations (translate, rotate, scale), to add filters for color, black and white, transparencies, motion blur, etc.