In this session we use JS on the server and in the browser to visualize personality changes of musical artists over time, through their lyrics. On the server we use Node to interface with Natural Language Processing APIs. On the client we use WebAudio to explore the dimensions of sound, and experiment with Houdini to play with visualizations. The session steps through the open source code, analyzes the outcomes, and considers real world applications for the concepts.

1. PERSONALITY HACKING
WITH NLP & CSS HOUDINI
ANTON McCONVILLE
OCTOBER 2019

2. @antonmcPersonality hacking with CSS Houdini
CHAT GRAPH SUGGEST
DIGITAL DESIGNER & DEVELOPER
SENIOR TECHNICAL STAFF MEMBER, IBM
VISUAL RECOGNITION PERSONA STUDY DATA MINING WELLNESS LOCATION AWARE SOCIAL INSIGHT IoT CHATBOT
ANTON McCONVILLE

3. @antonmcPersonality hacking with CSS Houdini
PASSION PROJECT
ANALYZING PERSONA
THROUGH LYRICS
NATURAL LANGUAGE PROCESSING
DIGITAL EXPRESSION
SELF REFLECTION

4. @antonmcPersonality hacking with CSS Houdini
1
PERSONALITY
THROUGH
NATURAL
LANGUAGE
2
WORKING
WITH
CSS HOUDINI
PAINT API
3
EXPERIMENTING
WITH WEB AUDIO
API

5. @antonmcPersonality hacking with CSS Houdini
1
PERSONALITY
THROUGH
NATURAL
LANGUAGE
WATSON
PERSONALITY
INSIGHTS
( CAN USE FREE TRIAL PLAN )

6. @antonmcPersonality hacking with CSS Houdini
CONCEPTS - BIG FIVE PERSONALITY TRAITS
OPENNESS CONCIENCIOUSNESS EXTRAVERSION AGREEABLENESS
EMOTIONAL
RANGE
APPRECIATION
FOR ART,
EMOTION,
ADVENTURE
TENDENCY TO BE
ORGANIZED AND
DEPENDABLE,
SHOW
SELF DISCIPLINE
TENDENCY TO BE
COMPASSIONATE
AND
COOPERATIVE
ENERGY,
POSITIVE EMOTIONS,
ASSERTIVENESS,
SOCIABILITY
DEGREE OF
EMOTIONAL
STABILITY
AND IMPULSE
CONTROL

7. @antonmcPersonality hacking with CSS Houdini
CONCEPTS - GATHERING PERSONALITY DATA FROM LYRICS
ARTIST ALBUM LYRICS WATSON PERSONALITY INSIGHTS BIG 5 PERSONALITY TRAITS

8. INSPIRED BY COLDPLAY

9. @antonmcPersonality hacking with CSS Houdini
COLDPLAY 2000 - 2015
PARACHUTES
2000
A RUSH OF BLOOD
TO THE HEAD
2002
X AND Y
2005
VIVA LA VIDA
2008
MYLO XYLOTO
2011
GHOST STORIES
2014
A HEAD FULL OF
DREAMS
2015

10. @antonmcPersonality hacking with CSS Houdini
CODE
WALKTHROUGH
& DEMO

11. @antonmcPersonality hacking with CSS Houdini
2
WORKING
WITH
CSS HOUDINI
PAINT API
DATA
DRIVEN
CONFETTI

12. @antonmcPersonality hacking with CSS Houdini
CSS HOUDINI IS A COLLECTION OF
BROWSER APIS THAT REACH INTO
THE CSS ENGINE.
CSS HOUDINI PAINT API ALLOWS
US TO DRAW HTML BACKGROUNDS
WITH THE CANVAS API
WORKING
WITH
CSS HOUDINI
PAINT API

13. @antonmcPersonality hacking with CSS Houdini
CODE
WALKTHROUGH
& DEMO

14. @antonmcPersonality hacking with CSS Houdini
ANATOMY OF A CUSTOM CSS CLASS
class MyNewPaintClass{
static get inputProperties{
return[’—property1’,
’—property2’ ];
}
paint(context, geometry, properties){
// read properties
this.draw(context, geometry);
}
draw(context, geometry){
// do canvas things here
}
}
CUSTOM
PARAMETERS
PAINT CALL
GET
PROPERTIES
DRAWING
SURFACE
HEIGHT &
WIDTH
SETTINGS

15. @antonmcPersonality hacking with CSS Houdini
HTML FILE
ID FOR
YOUR DOM
ELEMENT
JAVASCRIPT
FILE FOR YOUR
CUSTOM CLASS
IMPLEMENTATION
CSS FILE
USING THE
CLASS
DEFINITION
ORGANIZING FILES FOR BUILDING WITH A CUSTOM CLASS
JAVASCRIPT
FILE TO
REGISTER YOUR
CUSTOM CLASS

16. @antonmcPersonality hacking with CSS Houdini
TIPS FOR BUILDING YOUR OWN CSS CLASS
THINK OF FRESH IDEAS TO ENHANCE THE UX :)1
PROTOTYPE WITH JUST HTML AND CANVAS FIRST2
CREATE & TEST A SKELETON FOR THE NEW CLASS3
MOVE THE CANVAS CODE TO THE SKELETON & TEST4
EXPERIMENT WITH VARIABLES5

17. @antonmcPersonality hacking with CSS Houdini
3
EXPERIMENTING
WITH WEB AUDIO
API
CONTROLLING
CONFETTI
WITH SOUND

18. @antonmcPersonality hacking with CSS Houdini
THE WEB AUDIO API IS A HIGH LEVEL
JAVASCRIPT API FOR PROCESSING AND
SYTHESIZING AUDIO IN WEB APPLICATIONS
IS IT POSSIBLE TO CONTROL THE
CONFETTI ANIMATION USING THE
AMPLITUDE OF A SOUND FILE?
EXPERIMENTING
WITH WEB AUDIO
API

19. @antonmcPersonality hacking with CSS Houdini
CODE
WALKTHROUGH
& DEMO

20. @antonmcPersonality hacking with CSS Houdini
WHY DOES ANY OF THIS MATTER?
HOUDINI OPENS UP NEW OPTIONS FOR CREATIVE VISUALIZATION
EASY LAYOUT WITH FLEX AND GRID FOR CANVAS BASED ELEMENTS
NATURAL LANGUAGE ANALYSIS OFFERS BETTER UNDERSTANDING
OF OUR CLIENTS AND OURSELVES :)
EASY TO SHARE AND REUSE VISUAL CUSTOM CLASSES

21. @antonmcPersonality hacking with CSS Houdini
RESOURCES
https://github.com/mcconville/coldplay
@antonmc
THANK YOU :)