Cyril Sellam

Project reminder

Nosfell concert in Paris

Nosfeel logos

The best and the most productive way to perform this process being to use a mindmap, I decided to try FreeMind and I was satisfied of the result. Taking the shape of a tree, it's really easy to use and handle. It helped me to find some ideas for the logo and I'm sure it will help me later to design the emotions launched in the application.

Here was my first idea of logo I submitted to Chris and Nicklas: a keyboard key with a musical note on it to symbolize the launching of sounds thanks to the keyboard and to show that the user will be with this application a kind of composer.
Obviously, it was too bland and didn't involve the feeling part of my project.

So I worked on it and increased it to get this new logo with different colours (cyan, magenta, yellow and black) that represent different emotions and different musical notes that show that each key sets off a different sound with a specific rhythm.

To be even more explicit, I decided to create a new logo with pictures on each key. I was inspired by the Optimus conceptual keyboard (first picture on the left) designed by Artemy Lebedev. Every key is a stand-alone display showing exactly what it is controlling at this very moment, with logos of software for instance, making the buttons topped with displays.

This keyboard of the future will be released on May 20, 2007 and will cost US$ 1564 (Shakespeare's birthday...).
My first idea was to put the instruments above and different shapes of Nosfell mouth so that it would follow the application functioning ("number keys" launching musical instrument tracks and "type keys" setting off the klokobetz words).

Nosfeel logos - Part II

Here is the latest Nosfeel logo:

The idea is:

• 4 keyboard keys representing the whole keyboard.
• The symbols on each key is a musical note which symbolizes the launching of a musical sound thanks to the keyboard, the user becoming with this application a kind of composer.
• On each key there is a different musical note to show that each key sets off a different sound with a specific rhythm.
• Each key contains a light with a specific colour (cyan, magenta, yellow or black) to represent the range of different emotions involved in the application each time a sound is launched.

And here is the vectorial version of this logo:

How to represent feelings visually?

This question turned in my mind from the time I had the idea of the Nosfeel project.
I made a deep research to find a quite exhaustive list of emotions. I found many sources and I am now making a selection of the feelings I'll pick to sort them out in a clear table.
At the beginning, I thought about abstract representations such as frequency lines or simple shapes to represent them.
Actually, it's during the creation process of the logo that some more precise ideas came to me:

• Each class of emotions will imply a main colour.
• Each feeling within these categories will have a specific grade of the main colour.
• For each emotion, a square containing a light with this particular colour will be launch.
• The size of this square will depend of the power of the feeling.
• The radius of the rounded corners of this square will result from the hardness of this emotion.
• The squares will appear from in fading and zooming from the center of the screen and will stay until the sound corresponding ends.
• These squares will move from the center of the screen to the position of the mouse to represent the movement of the emotion to the user, he's the one who launch them so he is the one who has to feel them.

Nosfeel logos - Part III

This week, I kept on working on the branding, particularly on the title part of the logo.
I wanted a smooth font really curved with letter that could overlap. I chose the Pump Rus font.
I needed to emphasize the "feel" part of "Nosfeel", only difference with "Nosfell", the name of the singer and main concept involved in the project.

That's why, in my first attempt, I coloured each of these 4 letters in cyan, magenta, yellow and dark grey as a reminder to the 4 colours of the keys of the previous logo. I added a brush effect to the stroke, the "Marker - Rough" one supplyed by Illustrator, to symbolize the whirl the feelings produce and also to represent the "perception" meaning of a feeling (see the mindmap). Indeed, the user can understand that the word "nosfeel" is written even if the shape of the letters doesn't have clear contour lines. Chris told me that it was not clear enough for a logo title.

So I canceled this brush effect and brought closer the first three letters so that they overlap, in order to emphasize the "feel" part again. I worked on the "s" so that it follows the shape of the "o" in order the overlapping to be perfect. I also added a light effect to the coloured letters thanks to a radial gradient. This time, Chris advised me to keep only one colour, the white, because it would be too much when putting the title logo and the keyboard logo at the same time, there wouldn't be any need of this kind of reminder. I may keep this logo in the case I wouldn't have enough space to add the keyboard logo.

Here is the final result of the Nosfeel title logo:

Actually iIt's quite funny because now I realize that to reach this logo, I did it the opposite of the usual way. Indeed, throughout the improvement process, I had to go simpler and simpler, cancelling unnecessary effects and colours. But that's true that too many ideas in one concept can kill this concept, I noticed it several times.

So here is the full logo, combination between the keyboard and the title logos:

Flash experimentations

This week I decided to make some experimentations with Flash 8 in order to create dynamically shapes and add some effects also via Action Script 2.0. I focused on 2 classes added to ActionScript 2.0 in Flash 8:

• the BitmapData class which allows to create and manipulate arbitrarily sized transparent or opaque bitmap images,
• the BitmapFilter class which is a base class for filter effects and which allows to add a bevel effect to a variety of objects in Flash. The BevelFilter, BlurFilter, ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilter, DropShadowFilter, GlowFilter, GradientBevelFilter, and GradientGlowFilter classes all extend the BitmapFilter class. It's possible to apply these filter effects to bitmaps or MovieClip instances.

Here are the results I got after some research and attemps:

In these 2 examples, a square was created dynamically thanks to the beginGradientFill and lineTo functions. A matrix was also necessary to apply the shade properties. The 1st square has the property fillType="linear", the 2nd being radial.

Here, Iused the Drop Shadow filter. Some important properties of this filter are blurX, blurY, distance, angle, strength, alpha, inner and color.
In the 1st example, as you can see, this filter can be applied even to PNG files, following the shape of the picture. In the 2nd animation, you can see the different possible states of shadows, depending on the position of your mouse.

Glow filter in use here. Interactivity on the 1st, animated thanks to an onEnterFrame function in the 2nd.

In these 2 interactive examples, I applied the Bevel filter, giving objects such as buttons a three- dimensional look. We can customize the look of the bevel with different highlight and shadow colors, the amount of blur on the bevel, the angle of the bevel, its placement and a knockout effect.

The Color Matrix filter class allows to apply a 4 x 5 matrix transformation on the RGBA color and alpha values of every pixel on the input image to produce a result with a new set of RGBA color and alpha values. It allows saturation changes, hue rotation, luminance to alpha and various other effects. You can apply this filter to bitmaps and MovieClip instances.

Thanks to the alpha value of the matrix, we can affect the luminance like in this example.
Try it by clicking on the picture to increase the luminance.

Here is another example of Color Matrix filter use, affecting also the luminance.
The animation is performed thanks to the Tween class and its yoyo function.

With this example, I tested the Convolution filter. A convolution combines pixels in the input image with neighboring pixels to produce an image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling.

The Displacement Map filter class uses the pixel values from the specified BitmapData object to perform a displacement of an object on the Stage, such as a MovieClip instance. We can use this filter to achieve a warped or mottled effect on a BitmapData or MovieClip instance. Try it by rolling over this picture.

Emotions classification

As I said on week 03, representing a feeling visually is not so easy. I need to create a clear table with each emotion involved in my project (the ones launched by the user by pressing a key) and the properties associated.
Thus, my first task is to find a list of feelings as complete as possible.
The most relevant websites I found about this topic are:

• Wikipedia with an interesting definition of Emotion with also its etymology, theoretical traditions, examples of classification and a big list of emotions.
• Worldwide Marriage Encounter, a website dealing with couple communication and especially about how to show feelings to the partner. We can find a list of feeling words sorted by themes (to help in writing love letters) and a table to describe feelings with some different categories.
• Center for Nonviolent Communication (CNCV) with an interesting feelings inventory divided in two main catagories, "feelings when your needs are satisfied" and "feelings when your needs are not satisfied".

Here is the list I found on the CNCV website:

Now the work I have to do is to choose the ones I need depending on the Klokobetz words corresponding (in my point of view) used in the song.
Then I'll have to fill this other table with properties. I called it the Nosfeelings table:

The luminance (intern light and glow) will be a random value, no need to include it in the table. Indeed, I believe the luminance of an emotion represents the expressivity, the exteriorization of someone, the physical way to express a feeling. And it's obvious it's different for each person, more or less visible. I think the random solution is the most relevant (of course, the intern light and the glow will be linked and shine with the same intensity).
The strength of the emotion is characterized by the size of the rectangle as well as the colour (close from the main colour of the catagory it belongs to if it's a strong feeling).
The duration corresponds to the persitence duration of a feeling, to the length we need to "digest" a feeling.
The print symbolizes the tracks an emotion leaves after it disappears.It's not the same thing as the duration, for example a feeling can quickly disappear but leave a print forever, even if hidden deeply.
All the rectangles will have an opacity of 70% to allow overlapping.
The "big" feelings (sum of several "smaller" ones and appearing when several keys will be pressed at the same time) will be the sum of all the properties of the feelings it contains. I'll have to create another table with these "big" feelings and the related "small" ones. Its colour will be whether the average or the sum or a blink of the colours of the "small" feelings. I like the idea to think that all the keys pressed together (so all the feelings launched at the same time) would produce a white rectangle as big as the screen.
All these data will then be put in XML files which will be kind of database.
Here is an idea of what it could look like:

Conceptual musical projects

I found an interesting musical project on Typorganism, a great experimental website.
It's called Visual Composer and it's a virtual limited sequencer. To compose, the user has to select an instrument and start. He can compose a 12-second passage. As the playhead is looping through, he can add up notes. Whenever a note is played, a coloured shape is launched, zooming and fading as I wanted. It works quite well, good omen for me. Every column can have maximum 2 notes. We can add notes wether by using the keyboard or toggle the small notes in score with mouse. We can delete a note with mouse as well. When finished, the user can submit and save his composition.

Plutchik's theory of basic emotions

Amazing! I just found an emotion theory developed by the psychologist Robert Plutchik during the 1960s to 80s totally related to my project! He assumes we have eight native basic emotions that developed evolutionary. All other emotions derive from these emotions.
Plutchik described a radial diagram similar to a colour circle when structuring the basic emotions in his book "EMOTION - A Psychoevolutionary Synthesis". Author's three-dimensional "circumplex model" describes the relations among emotion concepts, which are analogous to the colors on a color wheel. The cone's vertical dimension represents intensity, and the circle represents degrees of similarity among the emotions. The eight sectors are designed to indicate that there are eight primary emotion dimensions defined by the theory arranged as four pairs of opposites. In the exploded model the emotions in the blank spaces are the primary dyads-emotions that are mixtures of two of the primary emotions.

Coming from this diagram, Markus Drews, a German student in Master of Arts, Specialisation in Interface Design, had the idea to visualise more of Plutchik's theory by tranforming it from a text in his book to a comprehensive poster.
It's very clear, complete, nice and just great for me!

Plutchik describes his assumptions in ten postulates. These postulates also explain all diagrams on the poster. Not every postulate is suited for a visualisation and it's not useful to integrate all postulates in a single diagram. So the postulates are connected to four diagrams on the poster.

Emotion neighbours, one to three steps away from each other on the circle, can be combined to new emotions when they are felt simultaneously. Plutchik calls them dyads. For example, joy and trust add up to love. Opposite emotions result in a conflict that can lead to a constraint in acting.

Basic emotions in the circle are more or less similar or opposing to each other. The colours of the Plutchik colour circle were only used in the words, not in the circle itself. These colours are then used throughout the whole poster. Intensities of different emotions, measured by Plutchik, are shown in a kind of "emotion cloud". This also clarifies that the word are just diffuse, fuzzy, culturally and subjectively used definitions, and that they are only valid in the English language.

Nosfell + Plutchik = Nosfeel

Plutchik's theory adapts perfectly to my project. Without knowing it, my ideas were really close from him. He uses nearly all the properties I listed above in the Nosfeelings table. I will definitely use it as a justification to my different visual choices.
By finding it, I solved my main problems: the feelings categories to choose, the main colours to use, the feelings that can combine together. It's now time to fill the XML files with these data.

Experimentations

This week I made some experimentations with Flash. I wanted to test the dynamically create rectangles, apply different colour, use tweens so that they will come from the center of the screen fading and zooming when pressing keys from the keyboard. I achieved my goals with the three following examples:

Press a key and move your mouse, it will follow it. Here the colour of each rectangle is chosen randomly.

Press a key and move your mouse, it will follow it. Here, the colour of the rectangles launched changes each time a key is pressed, gradiently from white to black.

Press a key and move your mouse, it will follow it. Here, the colour of each rectangle created changes every second, gradiently from white to black.

Nosfell's team contact

I finally managed to contact by telephone a Nosfell producer who seemed quite enthusiastic. She liked the concept and even told me that if the project was good enough according to the singer, they could use it as a projection during his concerts. My first ideas of exploitations, if there would be any, were on his official website or as a bonus on his cd. But that's true that it could work live as well (however it would need some adaptations, the interaction being cancelled).
She told me she will talk about it directly to Nosfell and if he is interested, they could send me what I need soon.

Portfolio finalized

This week I added the content and sections missing to my portfolio. It's been so much time I should have built it, I always put the other projects before it, that's good it was compulsary to do it during this module. I'm quite happy of the result: www.cyrilsellam.com. I still have to detail my projects, add diaporama for each project in the portfolio section and translate everything in French.

There is a diaporama of random pictures (taken from a XML file) of my projects on the homepage and all over the different sections. The website centers dynamically with a tween effect each time the size of the window changes and the shadow of the background follows unobtrusively the mouse.

In the portfolio section, I put a mozaik of 25 of my projects. We can navigate whether by the dynamic scrollbar or the little pictures.

When a project is selected, a big picture representing it appears on the right (when I'll have time to improve this website, I'll put a diaporama or flash animations instead) and a description on the left. I decided to include a "XML style" to this description for each subsection of it.

cyrilsellam.com and nosfeel.com not free anymore

I decided it was time to buy my domain names. I chose 1&1 just to redirect to these 2 websites for now.
Until the end of the Nosfeel project creation, www.nosfeel.com will redirect to this blog.

Nosfeel presentation

The challenge of this week is to create a dynamic presentation about Nosfeel and to use it during a lecture in the Art College of Belfast in front of the teachers and all the students of the course (about a hundred people).
Here are the constraints:

• PowerPoint,
• No Video,
• No sound either,
• Just text and images,
• 5 Minutes.

I decided to keep this presentation as simple as possible, with a small amount of words and colours, short sentences and just the main ideas about my project.
I'll try to explain and detail my concept orally to be clear.

Here is the result: Nosfeel viva.

Nosfell's team contact - Part II

The member of Nosfell's team told me that the singer and the managers agreed and led me to the legal department to deal with the rights aspects. As this project will be online, they want me to sign a contract before sending me any track. I agreeded and told them to go as fast as possible.