Web X

Posted on Updated on

Human brain function grunge with gears
(Use of Brain in Bowling Tactics, 2018)

INSIGHT: The Big Five


The Group

Christopher Maycock., Gintare Gruzinskaite, Stephanie Field.

Introduction to the project.

The physical build and theoretical aim of our project was to externalise, through simple data visualisation, an individual user’s personality using the five factor model of personality traits, otherwise known as the CANOE/ OCEAN Model. This would be interactive and immersive, allowing an individual user to input their own data and affect the outcome of the live visualisation. We wanted to offer an artistic representation of the data as well as using different methods of realisations.

The aim of the project was to stimulate discussion on how others see our personality, how we might see ourselves in an objective manner.  Further to that; what questions that might cause to encourage. My aim was that I wanted to create a Meta environment that the user can experience of their own being or pysche.

We, as a group, felt the objective of our concept was important to realise, as the personality is a complex structure and we wanted to open up the idea of personality interpretation.



I was interested to experiment with the idea of taking the subjective data that a person enters into an interface about their own persona and realising an abstraction of that data into an external medium. The medium / environment  I chose, alongside our group was Plymouth Universities IVT (Immersive Vision Theatre) built in 1967. The space is a Fulldome experience, which is the term used to describe domed projection environment. (Plymouth University).

Plymouth University’s (Immersive Vision Theatre) ((i-DAT, 2018))

My aim was to create an experience for an individual user that could stimulate a meta-cognition( this higher-level cognition was given as a label by American developmental psychologist John Flavell). Also my aim was to create a shared experience for people to see the personality traits externalised into an abstraction of the perosonality.

Early on in the brainstorming sessions I explored the idea of code or robots that would react and exchange a “currency” based on Maslows Hierarchy of Needs.

Background Concept Research

I researched the idea of how an individuals’ needs might be in conflict with ones persona, an indication of how this might be demonstrated is that is one is single the sense of belonging might be affected which then interacts with ones sociability factors.

Maslows Hierarchy of Needs (Researchgate.net, 2018)

It was from this early research that the group decided on exploring the idea of realising, through technology a way of presenting the core modes of a personality.

The research into how to define the visualisation was a key factor in my contribution to the group project alongside other areas.

Although the personality of an individual is a very complex matter, my research looked for a standardised model to suit our requirements. This was done purely to move away from a data led analysis model into an artistic arena.

Looking into how could represent the a users data in a way that fitted our desired outcome we drew an end to exploring the Maslow model as it was framed in a way to explore more the needs rather than a personality model. We also explored the idea of making a small community of robots that used the individual strata of needs to operate but  the module timescale meant we dropped the idea. This early research stage led the team towards a personality model. We uncovered a model that used the acronym CANOE which what is referred to as the “big five”. This model is known as Five Factor Model (FFM).

The five characteristics are:

  • Openness
  • Conscientiousness
  • Extraversion
  • Agreeableness
  • Neuroticism

The theory is based on a lexical hypothesis, which can be segmented into two assumptions;

“The first states that those personality characteristics that are important to a group of people will eventually become a part of that group’s language. The second follows from the first, stating that more important personality characteristics are more likely to be encoded into language as a single word”. (En.wikipedia.org, 2018)


Development of Idea

Although Metacognition usually  involves thinking about one’s own thinking process such as study skills, memory capabilities I wondered if it was possible to externalise the mechanisms that define a personal sense of self. I appreciate this is an abstraction from the original concept but it began the groups brainstorming into what makes up a personalty. The group discussed the idea of making an organism,  a life form of the personality.


CANOE data mapping research

To understand how an assessments of a person CANOE model night be interpreted I entered my own data into online CANOE model sites. AS seen below after filling in a form a statistical model is generated.

 Taking an OCEAN/ CANOE assement (Truity.com, 2018)

Although the visualisation of the data input is statistically accurate it offers little in the way of artistic realisation.

My OCEAN/ CANOE assessment results output (Truity.com, 2018)

I began to draw up basic data entry models to inquire into how values from the user could be simplified to produce as better user experience.


CANOE table with values
Design for recording data from the Big Five assessments.(C Maycock 2017)

After settling on the parameters for the user input the project moved onto how to build the system.

My Systems – diagrams for the project

The Project plan (Chris Maycock 2017)


System components
System ; bringing the aspects of the project together into a whole (C Maycock 2017)

My system for animation

Once we have moved away from making a visualisation with live HTML and CSS with javascript we adopted p5.js as a way of rendering our ideas. I drew up an early sketch to investigate how p5.js would work and a roughed out code model to begin the visualisation processes.

basic model for animation
p5.js sketch by Chris Maycock

The U.I.(user interface) was built using sliders that offered a value range between 1 to 8. The values were set at this to eliminate a neutral (middle position on slider) result. This meant a natural number of 1-4 being in the negative and 5- 8 positive number was passed into the data base.

Later in the process of working out how the systems could deliver a visual abstraction, the group drew up how the interface and the visualisation might operate together.

Agreeable viusalisation model test
My system for parsing values 1-8 to shape values within the p5.js sketch

The user interface build.

I choose a glass head as part on the Raspberry Pi3 and Bluetooth enclosure for several reasons. On a practical level the glass head gave us opportunity to illuminate the base in an eye catching manner. On a more philosophical note the head has pertinent meaning relevant to this projects objectives. Among the Celts the head was the container of a sacred force, whereas in other ancient and traditional cultures, the head is conceived of as the seat of vital energy, the active principle of the whole individual. (Encyclopedia.com, 2018). The head is also a container for the mind ergo where the human psyche is seated.

After a brief venture on designing and producing a surround for the raspberry pi that users would interface with from a 3D printed hand held surround I moved onto a fixed base.

Designing a fixed base for the electronic led me to add the glass head, which I wanted to illuminate,e to attract potential users to the touch screen. The object of the head was to offer an aggregated visualisation of the more complex Immersive. Visual Theatre presentation.

Head Base Build v1
Construction of the Base completed as solid one piece structure


The Interface base (head mount) was designed on  CAD and laser cut from 3mm & 6mm Mediate board, assembled with wood glues and painted. This was built primarily to hold the raspberry Pi but later was developed as part of the installation.

Base raw painted
Base assembled and primer coat applied
Screen in place
Pi touch screen positioning

From temporarily mounting the touch screen and testing the UX (user experience) and how the UI worked several interface changes we designed.

We increased the width of the side navigation bar and broken the 5 slider sections into colour section to help navigation. Some information was added within the application for the user to access details on the CANOE model.

Inside to opening to house the raspberry Pi 3 I constructed a simple structure from Medite board (similar to MDF )to  hold the touch screen in place.

inner workings
Arduino One, HC-05 Bluetooth module  and breadboard feed data to the underside of the NEOPIXEL LED Ring

Finsihed underneath
Raspberry Pi, Arduino, HC-05 all mounted
My Light Diffuser, with LED ring and Glass Head 

Illumination Process

My first foray into how the glass head maybe look an illuminated feature built into the Raspberry Pi case was to run an LED strip  bundled inside the head.

My  movie research showing LED strip remotely controlled inside the glass head.

The effect was shown to the group and it was decided to include LED iluumination but that the LED light was harsh. I then went on from this prototype to build a domed light diffuser from 3D printing a frosted effect material.

During the later prototyping process we placed 3 LEDs inside the glass head with an Arduino Uno. The 3 single LEDs didn’t produce sufficient light therefore I upgraded the LED to a Adafruit NEOPIXEL 24 LED build into the bottom of the glass heads neck area, covered by the diffuser.

Picture above showing the development from serial to Bluetooth connection. Also shown above is the research into increasing from 1 LED to 3.


The Neopixel 24 LED inside the base increased illumination and lighting effects. The desired results were achieved of multi light effects to draw users to the interface.

HC-05 Bluetooth Module was married to Arduino Uno that drove the LED Ring to offer colour changes inside the head. A simple console app on an android phone was used to set the LED ring state.

Image result for adafruit Neopixel ring 24 LED

Adafruit 24 RGB Neopixel LED Ring (adafruit.com)

Movie showing my light diffuser, head and LED Ring working with Bluetooth. Controlled via android Bluetooth console app. (Code from Library/ assisted by Stephanie Field)

As shown in the movie above the light from th LED is concentrated in the bottom section of the diffuser. Although I would have liked to mimic the light spread from the LED strip illumination in the earlier research this was not possible at this stage of the build. Given further time I would have opted form randomly feeding an LED inside a larger diffuser and investigated how to construct a control and interface for LED Strips.

Bluetooth LED codeBluetooth NEO ring LED code

Code screen shots by Stephanie Hill and myself working on the Bluetooth connection from and android mobile phone to an Arduino Uno to power the LEDs



Pictures  and diagrams of my builds and systems .


This slideshow requires JavaScript.

List of photos of my build and systems designs within the project

  • Developing the visualisation through values and parameters System 1a.(Chris Maycock)
  • Developing the visualisation through values and parameters System 1b. (Chris Maycock)
  • How to change values from user input System 2. (Chris Maycock)
  • System idea for projecting visualisation spacila inside the dome environment.(Chris Maycock)
  • Mock up of  User interface box. (Chris Maycock)
  • Drawing out the base to be constructed from Medite.
  • Beginning the Construction of the Base to hold the Head and the Raspberry Pi.
  • Construction of the Base completed as solid one piece structure
  • Test LED to prototype illumination of the Head (with Stephanie).
  • Base and Head married together (with Stephanie).
  • Illuminated head with Neo Pixel 24 LED and self designed Light diffuser(with Stephanie).

Other aspects of the project.

For the animation Gintare used p5.js. JavaScript library which is very similar to Processing, the main difference between the two is that P5 is a direct JS port of the Processing language. Processing.js is a converter which interprets pure Processing code into JS on the fly (SitePoint, 2018). Gintare had some previous experience working with Processing since they both work on the same principles, it was relatively easy to learn a new library. As for the animation itself, Gintare researched code from the codepen.io and carried out some tweaking in order to get the desired result.

My analysis of Project

From a personal,point of view there were several aspects of  my side of the project I cam improve upon. Firstly, the base was a little inelegant in it’s design and could have been better constructed. The glass head did offer greater options for illuminating the the interface and could have been integrated earlier on in the process into the core visualisation. The Bluetooth aspect of wirelessly connecting the NEOPIXEL LED ring was successful adding a fully wireless dimension to the installation.

Group lead Responsibilities (me)

As group leader my additional project responsibilities were to aid the correct allocation of tasks, manage schedules. liaise with tutors, monitor progress, resource management and endeavour to ensure consistency of work loads from all group members to realise the aim of our project object. I also nominated myself to write and organise group contribution for the report, to free up more time at the end of the project for Stephanie and Gintare to work on the visualisation integration./

We used Trello, slack and Facebook messenger as a way on ensuring there was a library of stored processes, communication and instant messaging.

My responsibilities within the project;

Research Background

The duties included researching how a persona might be used to generate data to use form the project and the background research for the project.Shared diagram generations and negotiations such as MongoDB document systems and working systems diagrams


Animations alongside Gintare (Gruzinskaite) working together to design visualisations of data.Traffic light protype p5.js

User Interfacing

Assist with UX,UI design and UI testing

Physical interface build and Design

Chris –  CAD, laser cutting, physical build and finishing, with Stephanie – Bluetooth Code,LED & 24 LED ring code and Arduino wiring/build, Raspberry Pi setup (Touch screen .etc)for Arduino.

Budgets resources

Chris – build budgets, sourcing materials, LED ring, HC-05 bluetooth module for base, negotiating CAD and laser cutting times, Stephanie resource advising and providing Raspberry Pi/ screen.

Final Presentation

With Stephanie drafting the power point slides and scripts.

How it worked in the IVT

Oh the Code, adjusting the Visualisation inside the Dome
Ready for data state (Pic by S Field)
How the Big Five project looked in the IVT during testing
 Pictures above; How the presentation looked at submission

The Final Presentation (movie recording) at Plymouth University Immersive Video Theatre

In the video above, our program leader is winding up the semester, which gave me chance to film our audience enjoying our immersive experience.



Neo Pixel reference code/Created April 22, 2015/Hammad Tariq, Incubator (Pakistan)




En.wikipedia.org. (2018). Metacognition. [online] Available at: https://en.wikipedia.org/wiki/Metacognition [Accessed 20 Jan. 2018].

Use of Brain in Bowling Tactics. (2018). [image] Available at: http ://epilepsyu.com/wp-content/uploads/2014/04/brain-mechanism.jpg [Accessed 22 Jan. 2018].

Encyclopedia.com. (2018). Head: Symbolism and Ritual Use – Dictionary definition of Head: Symbolism and Ritual Use | Encyclopedia.com: FREE online dictionary. [online] Available at: http://www.encyclopedia.com/environment/encyclopedias-almanacs-transcripts-and-maps/head-symbolism-and-ritual-use [Accessed 21 Jan. 2018].

Simply Psychology. (2018). Maslow’s Hierarchy of Needs. [online] Available at: https://www.simplypsychology.org/maslow.html [Accessed 18 Jan. 2018].

En.wikipedia.org. (2018). Big Five personality traits. [online] Available at: https://en.wikipedia.org/wiki/Big_Five_personality_traits [Accessed 18 Jan. 2018].

emaze presentations. (2018). Big five factors. [online] Available at: https://www.emaze.com/@AIFIZTTQ/Big-five-factors [Accessed 18 Jan. 2018].

En.wikipedia.org. (2018). Lexical hypothesis. [online] Available at: https://en.wikipedia.org/wiki/Lexical_hypothesis [Accessed 18 Jan. 2018].

Information Age. (2018). Data with personality: the evolution of visualisation. [online] Available at: http://www.information-age.com/data-personality-evolution-visualisation-123464800/ [Accessed 18 Jan. 2018].

Sisense. (2018). 10 Useful Ways to Visualize Your Data (With Examples) l Sisense. [online] Available at: https://www.sisense.com/blog/10-useful-ways-visualize-data-examples/ [Accessed 20 Jan. 2018].

Personalitytest.org.uk. (2018). personalitytest.org.uk. [online] Available at: http://www.personalitytest.org.uk/ [Accessed 20 Jan. 2018].

Truity.com. (2018). The Big Five Personality Test. [online] Available at: https://www.truity.com/test/big-five-personality-test [Accessed 20 Jan. 2018].

SitePoint. (2018). Processing.js vs P5.js – What’s The Difference? — SitePoint. [online] Available at: https://www.sitepoint.com/processing-js-vs-p5-js-whats-difference/ [Accessed 20 Jan. 2018].

Researchgate.net. (2018). Cite a Website – Cite This For Me. [online] Available at: https ://www.researchgate.net/profile/Krzysztof_Piech/publication/308530946/figure/fig15/AS:409828104130561@1474722042201/Figure-23-Diagram-of-Maslow%27s-hierarchy-of-needs.png [Accessed 21 Jan. 2018].

Anon, (2018). [image] Available at: https ://cdn-shop.adafruit.com/1200×900/1586-01.jpg [Accessed 21 Jan. 2018].

i-DAT. (2018). IVT. [online] Available at: http://i-dat.org/ivt/ [Accessed 24 Jan. 2018].

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s