Reflection 1st Nov

interaction

During these days, I completed the technical method of interaction. In my opinion, the most difference between Web and Game is the form of interaction. Generally, a Web interaction merely require a Scroll, some more complicate interaction might allow user to use cursor to interact. Hence most of interaction are base on mouse activity. In games, interactions could be control with keyboard and mouse. In modern devices, touch-able screen fulfilled touch interaction but technically, it is similar with mouse, because a touch activity is control a cursor. However, in some advanced devices, the force of touch can be detected and react relative respond. However, currently there are no enough equipment support this interaction. So the most important interaction on Web would be scroll. Furthermore, when people use trackpad like apple’s production ‘MagicPad’ the scroll experience will be extremely smooth, user will easily use finger to scroll the page with a high-level accuracy. Practically, a high accuracy scrolling allow user control the progress of animation, which means people can scroll and choose the frame, if keeping scroll, they will see a series of frames which looks like animation.

In my project, I will enhance the effect of scrolling in animation, so user will get more reaction after scrolling, rather only change the position of page. For example, a scrolling could change the background colour and lighting in scene, so the users would definitely feel that they are controlling whole of browsing process.

user experience

In original plan, a camera would alway operate to capture face. However, in my research, some people would not glad be taken photo in a strange environment. Hence I added a switch can turn off camera, and programming will generate random data to replace the data face detection would analyses. Furthermore, random data can save performance and improve the quality of graphic.

「Emotion modifier」

I wanna enhance the influence of emotion, whatever effected by other people or environment, emotion would be easily affected and it also has opposite work which means when a people has been affected by externals, he could also reflect on it. Hence I call this emotion as Emotion modifier. To show this, I gonna imitate a factory and allow user to interact with it, then produce modifiers, and use that to effect other scenes. The modifier would be generated by facial detection, current temperature or weather, online text, each information could influence people might be collected as the potential influences of emotion.

what is good/poor

There’s a good point which I focused on user experience. As Web, a smooth and interesting visuals is important, and I tried many ways to improve it.

1. I made motion more smooth, by change the method of render (2d to 3d)
2. More simple interaction ( scrolling only), but still show dynamic visuals
3. achievement of deploy face-detection and serving with graphics.

However, there were some shortcoming should be improved.

Interface

Currently, the interface is definitely not good enough. The first problem is the text blcok is weak. Text and icon should be served with graphics, and it should have more strong contrast at colour or form.

Next point is, the introduction is unclear. So user could not understand some functions of button. The solve method would be add some icons and decoration to show the texture of it, it can help viewer realise its priority or intractability.

Design of scenes

Though I’ve achieve the technical solution of showing scene, it s specific visuals and the transitions between different scenes.

During this week, I’ve complete a whole plan to show all of this project. As the main point I want to show, external factor like environment, atmosphere or other person would affect individual emotion. As also, individual emotion could influence externals as well. Especially, potential expression could hurt others in some situation like apathy, ignoring, libel, etc… Hence, I have a strong motivation to show this point. reveal the influence of emotion, see what emotion shows.

like this sketch, others’ attitude could make individual be different and strange. Besides, it could be seen as kind of discrimination. Though the expression could be invisible and weak, it would affect and hurt other.

Web construction

The basic process of browsing would like this:

User see some scene with varying elements or lighting （looks weird), so character wants to explore why this world is changing. He goes into a factory, and produce sort of factors which can effect environment and generate elements with personal expression or other information. Then he can go to gallery, garden, Computer room to see some scenes he could effect.

So, there are some scenes could appear in web

1. Introduction
2. Emotion factory
3. Computer room
4. Gallery
5. Garden

Factory sketches

For rendering an intensive and serious (even horror) feeling, I’d like use dark, close space to show the factory scene. And couple of sketches indicate how emotion factor be produced.

Lighting is important in this scene, hence I used BloomEffect to enhance lighting in Web.

Emotion factors

Each factor would be different, and it could represent the emotion of user in a moment. Effected by various element like temperature, lighting, sentiments, the graphic on ‘factor’ will be generated as mixed style and colours. I painted some sketched to explore the method of generation.

After generation, these pattern will used in other scene as the influence of viewer to the scene.

Problem

There is an issue for me, as I said I will use couple of scenes in project and viewer will brows them in order. However, they are hard to organisation. How camera move into other scene? At the technical point, it is difficult to create coherent connection between different scene. Besides, user need enough motivation to encourage he continue watching and interact. For me, if I am a visitor, sometimes I would not do complicated operation in an exhibition work. ( Afraid to damage it ) Therefore, the connection should be automatic, so even nobody interact with, it can play whole process.

Style

In my painting progress, I found some stroke / texture and organic outline has really strong visual effect. In my early programming, most of visual on Web is Pure vector, so the visual look simple and little boring. In future development, there’s required to add more bitmap / hand-draw elements on objects.

Next step

Completing all of scene draftily is important, so I can preview the whole process of browsing.

what Ive done

In early process, I’ve fulfilled the technic of detection of facial expression and engage it to drive graphic generation. However, the detection of facial-expression has a high frequency which reach least once/0.7s hence, the generation of graphic will consume huge of performance and would make lagging in future development. So I changed method in many times to expect a more smooth effect.

programming

The first changing is, I used 3D visual as main element in Web. Supported by WebGL, 3D element can be rendered with higher frequency in Web, so it can be more dynamic, and user can better realise the effecting of emotion.

Secondly, I make emotional data influence lighting in 3d scene rather than directly effect on graphic. Hence the atmosphere can be showed with effected by sentiments.

Thirdly, 3d animation was using in webpage. A interactive 3D animation would be attractive.

painting

To plan the composition of 3D element, I painted some sketches.

In this idea, boxes are mapped with hand-draw style texture or some mixed-colour graphics, so each box can display different feeling. Besides, this style would make work attract more young viewer, the orthographical view is popular in Web which can show all of elements with same perspective so viewer can better focus on each individuals.

Nice & Bad

good interaction

3D is good for interaction on Web, user can control sight and distance by mouse, and they can affect visuals by their facial expression during I wrote face detection programming. So in this project viewer can interact with most of elements. Not only the hand activity, but also the facial expression would influence visuals, hence it access kind of abstract interaction.

dynamic generation

Most of element would be different because the factor of them is base on real-time data capture.

bad interface

Because there are some function should be controlled by user, user interface is pretty ‘busy’ and uncomfortable so far. Furthermore, the main style of GUI has not been ensured, is it be stylish? warm? abstract or real-looking?

bad introduction

As a Web and interactive application, this work must introduce user how they control or affect elements. Hence there is a serious problem, how I introduce user or encourage them to interact with these scene in this project.

Next step

1. design better GUI
2. think about introduction and motivation which user would like to explore whole scenes.
3. order of scenes