Creative Development Journal
Welcome to my journal! My name is Mat Wright and I’m a creative app developer. I use this journal to document my research and development.
Latest Updates
Using Unity MARS and Flutter to Author Cross-Platform AR ExpEriences
I previously experimented with combining the Unity game engine and Flutter (Google’s UI toolkit for natively compiled cross-platform apps) back in late 2019, early 2020; with mixed outcomes. At the time, I was working on an AR prototype using Vuforia, a framework for which a Flutter plugin wasn’t (and still isn’t) available. In any case…
Using NFC Tags with Flutter
I recently developed functionality to allow an app’s users to sign in using a business card. The business card has an embedded batteryless, short-range communication device known as a Near Field Communication (NFC) tag. The user simply positions the business card close to their mobile device (usually top rear) and data is transferred from the…
Review and Retrospective
Over the past six months I have been working with Flutter and Firebase to develop a framework for a cloud connected interactive smartphone expérience. The app delivers virtual objects into the user’s real-world space with AR. The user searches and collects virtual objects over time. Each find unveils new interactivity, for example an object may…
Narrativity in Mobile Computing Augmented Reality
My research interests have led me to want to understand more about the processes and determining factors behind the concept of ludological narrative and examine whether it could be worthwhile carrying out primary research to examine how mobile computing combined with augmented reality has already, or will through future innovation, enhance the existing narrative mode…
Character Study: Femme Fatale
Researching the history and significance of the femme fatale in classic and revivalist film noir has provided rich insight to the complex nature of a characterisation that might otherwise be easily taken for granted. The common themes of beauty, sexuality and danger which emanate from the popular notion of the femme fatale only betray the…
Noirscape Swipe Card Development
Noirscape uses NFC (Near Field Communications) technology to add some fun to the signing in process. A detective ID card is among the items that will be included in the boxed version of the game but they’ll also be available via the future website and onlin merchandise store.
NFC is a tiny, low-cost, batteryless radio…
Noirspeak
The classic film noir era played out under the Hollywood Production Code, a strict set of guidelines that governed movie content throughout the nineteen thirties and forties. The Production Code meant specific restrictions on behaviour and language: no sex, no nudity, no blasphemy, no swearing… all of this meant that film makers had to get…
AR Gamification : snaps
Finding hidden objects in an augmented reality [AR] experience is fun; especially when the items have interactive qualities which trigger new content, clues and narrrative. Furthermore, given the quality of 3D assets, AR lighting, shadow and reflection prediction and generation; coupled with a the Noirscape black & white filter, it’s a great little feature to…
AR : Fiction or Virtual?
Augmented Reality (AR) provides a way to place realistic looking virtual objects into a realworld scene. While the object may merely exist upon the screen of a phone; there are features to AR which combine the worlds; fiction and reality; beyond the two dimensional surface of a smartphone. For example, when a 3D object is…
360 Flashback Interaction
This is a demo of an interactive scene using 360 photography, 3D character design and animation pulled together in Adobe After Effects to produce a WEBP image file which then has interaction through sound and buttons using the Flutter mobileapplication development framework.
Spatial Narrative Content
Noirscape experiments with a cross reality approach to narrative. Participants search for and find fictional objects in their own physical home through the AR (augmented reality) feature. One of these objects is a door and it’s keyhole a doorway between an augmented view of one world and the entirely fictional world of another. Furthermore, Noirscape…
Target Audience Research : User Survey
While the allure of Noir is an assumption I hold about the target audience; it is just as important that the audience is interested in role-playing, interacting with other participants and within the context of their local town. I made assumptions about attitudes towards a product which is tailored to a person’s home town as…
Interactive Rotary Phone Demo
A demo of my vintage rotary phone dialler build with Flutter with sound effects and number dialling recognition. This an interactive element linked to AR artefacts found within the game.
Custom Animated Interactivity #Dialler
I created a telephone dial using Flutter’s CustomPainter API. This permitted me to draw the various elements onto the screen relative to the size of the screen. The problem now is : how to detect which number has been dialled.
Interactive Components
The Noirscape participant collects fictional objects in the Augmented and Immersive reality parts of the experience. Beyond the fun of finding these items and seeing them appear in-situ on your living room table; they also provide important props and gameplay. The objects are associated with actions. Sometimes an object will have multiple actions, sometimes they’ll…
Narrative Props & Backstory
While, in itself, the narrative of Noirscape is to be interpreted at will by it’s participants, the structure of the environment in which the experience will take place will of course provide the underlying props and backstory along with the opportunity for interactivity with these props, people and different types of spaces – fictional, semi-fictional…
ARCore Flutter Further Tests
I was able to scale my 3D object correctly using a combination of GLTF settings and ARCore config. With some Shader work within Flutter I’ve created a Noiresque look in which the vintage 1940’s 3D telephone I got from Sketchfab (see link in video description) is positions consistently in the AR of ‘Mixed Reality’ world…
ARCore with Flutter Tests
In order to get to the bottom of the issues I have been experiencing with ArCore for Flutter I decided to test and document different combinations of factors. Given that there is a multitude of possible test cases with different types of 3d object file, different versions of Sceneform and heaps of other stuff; I…
Dev: 3D Object into AR with Flutter
I encountered a number of issues with getting complex 3d objects into a Flutter AR app. The Flutter AR components takes either a remote glft file, a format designed for loading 3 objects in a web browser; or sfb a format specific to Sceneform, a 3D rendering component for smartphones.
Reflection: Creative License and Cloud Reorientation
After much deliberation about how to handle the narrative element of my app I believe I am close to pivoting in a slightly new direction. Although I’ve identified suitable source material for a narrative, it isn’t really what I want to do at a personal-creative level. Although, I understand that in business apps, the user…
Pre-Production Reflection and Audit
Over the last 12 weeks I have taken a problem – the withering public interest in smaller city and town centers as a point of inspiration and ideated, through the help of academic research and experimentation, a concept for an ‘app-game’. I have a name for the app, a theme, and even an overview of…
Adobe Workshops
Over the last nine months I’ve taken a number of intenstive Adobe workshops, each of which culminating in an exam and if passed, recognition as an Adobe Certified Associate in the related software and field of practice (video, graphics, etc).
Narrative Design [WIP]
The Noirscape app narrative design features several conceptual layers.
A Conceptual Interactive & Spatialised Narrative Design – Part 2
The boxed product is sold on the high street in selected specialised stores. The product’s cover design will be highly stylised to the ‘Noir’ look and feel. It is clear from the cover illustration that this is a hybrid board-app game.
A Conceptual Interactive & Spatialised Narrative Design – Part 1
To design an immersive and interactive smartphone application using 360 video and GPS to send users on a film noir themed investigation into the physical space of their local town.
Conceptual Design
I am currently working on a conceptual design document inspired by BJ Fogg, founder, and director of the Stanford Behavior Design Lab.
Interactive Narrative : Spatial Narrative
Following on from my reflection and study-notes about the porous boundary between the fictional [or synthetic] world of electronic narrative platforms and the realworld, I would like to now switch my focus to the role of realworld within the scope of interactive networked narrative; I shall focus particularly upon the idea of spatialised narrative i.e.…
Interactive Narrative : Blurred Boundaries
In my previous post I compiled some of my thinking and study notes around the notion of implementing interactive, branching narrative using the smartphone medium. This got me thinking more about the uniqueness of the smartphone app as a creative interactive medium as opposed to book or video. I considered how the Choose Your Own…
Interactive Narrative : CYOA
Like so many other kids growing up in the 1980’s I spent a heck of a lot of time playing Choose Your Own Adventure (CYOA) books as well as playing/making text based adventure games for my Commodore and Sinclair home computers. I recall spending hours upon end staring at a tv screen with a flashing…
Photoshoot and After Effects Improvements
During my recent experiments I have been working with Adobe After Effects to apply special effects and animations to 360 degree video footage. My first experiments were quite successful. I was able to do what I set out to do, with a couple of areas that would need some further attention. One such area was…
Delivering 360 Video from Device Assets
360 video files can be quite big, the short ones I have been experimenting with are around 10Mb and even on a fast wifi connection there was a significant delay while the video is downloaded in its entirety before the 360 video player starts playing. This would provide a poor user experience in terms of…
Testing 360 Video with Flutter App Development
Following on from my 360 video experimentation in Adobe After Effects I wanted to test out options for embedding my 360 videos within a a mobile app using Flutter.
360 Film Experimentation
I would like to explore the possibility of shooting studio footage – for example of character acted scenes, using a green screen which would be integrated into the town footage. This would mean I could reuse the same studio footage in multiple towns and therefore offer the app to a greater number of users. As…
Ideation : imagining a solution
The aim would be to create a ‘Pilot’ version of the interactive experience at a local town, to which I have easy access and which I know well. I would be looking to pitch the pilot to the local population as well as the tourist board and local newspaper.
Familiarity Hypothesis
Although I consider this app to be foremostly an artistic endeavour, this doesn’t mean I can simply ignore user research. A creative app is quite pointless if no-one ever interacts or engages with it. My hypothesis is that that people react with greater curiousity and desire to engage with a creative piece when they feel…
Ideation : Finding and analysing a problem
Over the last 6 weeks I’ve spent much time ideating for a new app. I know that I want to make good use of the technical skills I’ve been developing over the last couple of years in augmented reality, digital illustration, applied machine learning and somehow bring it all together with my gamification research as…
XR Experiments Retrospection
It’s been a couple of years since I became keenly interested in cross reality (XR) app design and development. To begin with, I was experimenting with Google Daydream VR (virtual reality) and had also recently acquired an Oculus Go headset; which had become widely available and popular. At this time I began thinking about ideas…
Flutter Adoption Retrospection
Although I’ve built several mobile apps previously using web technologies Cordova and Ionic, I was never fully satisfied with the quality of the end products. In most cases, this was because of the un-native ‘look’ of the web based ‘hybrid’ apps. I recall experiencing much frustration using native plugins too.
AISpy – a research driven app using TensorFlow Lite + Flutter
Introduction AISpy is an experimental app concept built using Flutter, a cross-platform toolkit made by Google. The app uses TensorFlow Lite, a deep learning framework for on-device inference. The app combines artificial intelligence and gamification to acquire user submitted source images to enhance the underlying machine learning object recognition dataset. The app protoype uses a…
Hack 20 – Flutter Hackathon
The second-annual international Flutter hackathon, organised by the global Flutter Community, took place over the weekend 27/28 June 2020.
The 48 hour app jam invites teams of up to five members to build an app using Flutter – Google’s UI toolkit for building natively compiled applications for mobile, web and desktop from a single…
Askeuomorphic UI – visual design for digital natives.
The purpose of this article is to explore how elements of UI (user interface) design evolved from the analogue world of physical, three dimensional switches, dials and buttons. It also examines potential current and future roles for skeuomorphs (digital components which look like real-world objects) within the field of software and product design.
Build a Contact Form with VueJS, Firebase & Postmark
This article covers the process of setting up a web contact form using a Javascript library, VueJS, alongside Google Firebase Cloud services. The form’s content is saved to Google Firestore and we set up an event handler using Google Cloud’s serverless compute platform (Cloud Functions) to send an email notification via the Postmark API.
Chapter Review of Douglas Brown’s Thesis on ‘The Suspension of Disbelief in Video Games
I am reviewing the first chapter of Douglas Brown’s thesis on the suspension of disbelief in video games. I chose this chapter for analysis because I wanted to understand the foundations upon which the thesis is based – the case for games as a distinct medium. One of my own research interests is the nature…
Creating A Google Cloud Firestore Contact Form for Flutter Web Apps
Within this post I will provide a step by step guide to create a Google Cloud Firestore driven contact form for a Flutter web app; including details about how to build the form, validate the input and set up security rules before finally saving the data to the Google Firestore database.
ARCore Cloud Anchor Testing
I recently decided to test drive Google’s ARCore Extension for the Unity game engine to find out how Cloud Anchors work. Cloud anchors allow AR (Augmented Reality) apps to create virtual objects within a physical space and persist them across multiple user sessions. This means that different users should be able see and interact with…
Dear John Game Design
John is a french baker. He has been baking bread in his village bakery alongside his wife for over 30 years. John gets up every morning at 4am to make sure there is plenty of fresh bread on sale when the bakery opens it’s doors at 7am. At which time John’s wife, Matilda, joins him…
An Embedded Approach to AR App Design
Last summer, I was working on a prototype for an AR app that would allow users to create virtual objects in real world spaces. I carried out the work using the Unity3D game engine. My last commit to the repository was five months ago.
Since those last commits I’ve been busy working on a few…
Google Flutter Clock Challenge
The Challenge I recently completed my first experience building a mobile app with Flutter while working as part of the Newspeak Creative. Off the back of that experience I decided to take part in the Google Flutter Clock challenge. I only found out about the competition a couple of weeks before the deadline but decided…
Educational Revision App – Final Review
Over the last 10 weeks I’ve been working within a small group of developers collectively known as “Newspeak Creative”. We have designed and developed a revision app for GCSE school children studying Orwell’s Animal Farm for their final exams. I was charged with writing the code and general technical development of the app while comrades…
Educational Revision App – Sprint Review [#2]
Our proposal to build a GCSE revision app, as described in my previous post, was accepted by the client. The team settled on an art style for the app’s avatars and began compiling content. Work has also begun on building the app itself. Following technical research into the feasability of using a game engine for…
Educational Revision App – Sprint Review [#1]
I am currentlly working within a small team of three creative app developers to deliver an interactive mobile app for a UK secondary school. The main purpose of the app is to assist year 11 (15/16 y.o.) students with their GCSE English Literature revision. The theme of the app is George Orwell’s classic novel, Animal…
Lovelock XR: Demo & Next Steps
Introduction During my recent agile sprints, I completed the minimum requirements for two key user stories. Firstly, my player can sign into the app using Facebook. This makes it quick and easy for the user, providing they have a Facebook account. As I have integrated authentication through Firebase, I am able to add further social…
Lovelock XR: Position Virtual Lock in Realworld Space
“As a player I want to position my lovelock in the realworld so that it stays in the same place. ” Week Ten User Story Sprint Introduction Originally, I had aimed to allow players to place a virtual lovelock in a realworld physical location. For example, a player would be able to attach their virtual…
LoveLock XR: Social Sign In
“As a player I want to sign in using my facebook account so that I can save time.” Week Nine User Story Sprint Introduction From a player’s perspective, signing up for an app on a mobile device can be an offputting chore. It usually involves entering an email address and then having to verify it,…
XR Project
Introduction I have spent the previous six weeks exploring software kits, programming frameworks and 3D graphics techniques. I have been focused on developing skills which are relevant to building apps for virtual and mixed/augmented reality; otherwise collectively known as XR – eXtended (or in some cases ‘cross [x]’) reality. To start putting these skills to…
Working With Personas
Introducion A feature of Agile methodology, the persona is a kind of fictional character, invented to represent a typcial user who will be engaging with the app your team is going to develop. Storyboard Agile development consists of a storyboard. This is a collection of short stories, which act as a placeholder for a real…
48 Hour App Jam
During the last week I participated in a 48 hour app jam. The theme for the jam was decided using VNA (verb, noun, adjective) ideation cards. In addition to the VNA derived theme I decided to constrain my app to being a VR game to be built using Unity. This was following on from my…
Platforms & Tools
Introduction To explore a new technological platform with a view to getting under the hood and coding something up is one of the most exciting prospects, as a creative app developer, I can think of! In today’s connected world, apps have become a ubiquitous feature of our daily lives. At night while I sleep, my…