Tweet
Tweet

Slide 1

Slide 1 text

Storytelling through Creative Coding Hardik Chandrahas ( @18Hardik) Information Design @ NID, Bangalore Processing Community Day // 19

Slide 2

Slide 2 text

intro( ) // Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Currently pursuing Post Grad NID,Bangalore - Information Design Graduation: BITS Pilani Goa Campus - EEE + Phy Work Exp: 2 yrs UX Designer Data Viz || Generative Art sift it . clean it . sketch it. make it

Slide 3

Slide 3 text

.storytelling ( ) Storytelling is the act of describing narratives generally comprising of a beginning, middle and an end resolution. Breaking down a larger event (novels, larger essays) into comprehensible bits // Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Allows viewer to develop meaning by their own impact (self-choosing stories). // Harry Potter Book 1 - JKR // // Bandersnatch - Charles Brooker //

Slide 4

Slide 4 text

.narrative ( ) A narrative is a framework through which a story is presented to the reader. The structure of a narrative represents the form and structure: the protagonist, his journey, the climax, conquest and final resolution. Storytelling // Hardik Chandrahas (@18Hardik) Processing Community Day // 19

Slide 5

Slide 5 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Call to Action Meets Guardian Crossing 1st Threshold Tests, trials - friends, enemies Challenge - Reward Resurrection Final Trial Return with Elixir //Start// //End// .harrypotter-1 ( )

Slide 6

Slide 6 text

“ Data is the new soil, because for me, it feels like a fertile, creative medium. Over the years, online, we've laid down a huge amount of information and data, and we irrigate it with networks and connectivity.” - David McCandles / / .data driven Narrative / / // Hardik Chandrahas (@18Hardik) Processing Community Day // 19

Slide 7

Slide 7 text

Insights derived through data enable a newer angle to look at the story; Allowing the reader to absorb in a better manner. / / .data driven Narrative / / // Hardik Chandrahas (@18Hardik) Processing Community Day // 19

Slide 8

Slide 8 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 / / .data driven Narrative / / // https://flowingdata.com/2016/10/12/all-the-harry-potter-spells-when-they-were-used/ // // https://imgur.com/a/ytNmb //

Slide 9

Slide 9 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Code as a tool aids us to delve deeper into stories to unearth newer insights; What does { CODE * } do ? Allowing an elaborate understanding of the story.

Slide 10

Slide 10 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 creative.coding( ) { * } “Creative coding refers to a practice where the artist uses a system, such as; // A set of natural language rules, A computer program, A machine, or other procedural invention, set into motion with some degree of autonomy creating a design piece. //

Slide 11

Slide 11 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Creative coding as a practice to delve deeper into stories, deriving insights to aid comprehension. // Algorithm as the protagonist, Variables as the conditions, Inputs as the events shaping it and final multiple resolutions on choices taken. // { creative.coding ( ) * } Tracks { c.c ( ) } to derive insights { c.c ( ) } as a framework

Slide 12

Slide 12 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 { Creative Coding * } Tracks Data Visualisation. Generative Art Range of Expression President Speeches - Sentiment Analysis : https://emotions.periscopic.com/inauguration/

Slide 13

Slide 13 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 { Creative Coding * } Tracks Simulated Dendrochronology - Pedro Cruz (2018) - https://web.northeastern.edu/naturalizing-immigration-dataviz/ Data Visualisation. Generative Art Range of Expression

Slide 14

Slide 14 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 { Creative Coding * } Tracks Casa da Musica Identity Design - Sagmeister & Walsh: https://sagmeisterwalsh.com/work/all/casa-da-musica/ Generative Art Data Visualisation Range of Expression

Slide 15

Slide 15 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 { Creative Coding * } Tracks Generative Artwork - Manuel Gamboa Naon: https://www.behance.net/manoloide Generative Art Data Visualisation Range of Expression

Slide 16

Slide 16 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Data Visualisation What is the intent behind visualising ? Describe ( ) Detail ( ) Explore ( ) The lens guiding our visualisation’s framework is often based on a story, we are trying to put forth before our users. List out Data Answer Questions Seek multiple interpretations

Slide 17

Slide 17 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Quantified Self Visualising Personal Data “In all of these patterns, I do think there is an essential idea of who we are,” - Laurie Frick Mood + Quantify - Laurie frick: http://www.lauriefrick.com/mood-quantify

Slide 18

Slide 18 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Quantified Self Visualising Personal Data Visualising cycle rides over the past two years Motivations in this endeavour were to observe seasonal variation in my cycling rides.

Slide 19

Slide 19 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Quantified Self Visualising Personal Data How do I use my bike for commuting ? How often and how much do I train on my cycle? Train enough to claim myself as a serious cyclist ? How does the community respond to my cycling ? How has college life affected my training routine ?

Slide 20

Slide 20 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Quantified Self Visualising Personal Data // Initial Analysis //

Slide 21

Slide 21 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Quantified Self Visualising Personal Data // Code Renders // //2016// //2017//

Slide 22

Slide 22 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Quantified Self Visualising Personal Data // Viz. Key //

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Karna has always been righteous, yet never fortunate. Whereas Arjuna has been consistently favoured by the gods. A story of contrast between the two epic warriors. A tale of fate // Grant Morrison’s 18 Days // Visualising the World’s Longest Poem Decoding an Epic

Slide 25

Slide 25 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Which characters are frequently mentioned with Karna and Arjuna? What events in the book cause these associations and interactions ? How are Karna and Arjuna described qualitatively in the book? What events brought them closer ? Visualising the World’s Longest Poem Decoding an Epic

Slide 26

Slide 26 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 python + spaCY Using spaCy to find out mentions around the protagonist and the adjectives used to describe them. Visualising the World’s Longest Poem // Initial Analysis // Decoding an Epic

Slide 27

Slide 27 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Visualising the World’s Longest Poem // Code Renders // Decoding an Epic

Slide 28

Slide 28 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Visualising the World’s Longest Poem Decoding an Epic // Code Renders //

Slide 29

Slide 29 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Visualising the World’s Longest Poem Decoding an Epic // Code Renders // Plotting the counts of the protagonists & their acquaintances.

Slide 30

Slide 30 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Visualising the World’s Longest Poem // Visualisation Key // Decoding an Epic Bhima Vasudeva Krishna mighty illustrious

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Data Visualisation Generative Art / / > > > / /

Slide 33

Slide 33 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Generative Art Computer Generated // Artist Generated algo( ) random( ) modular.patterns( ) Determine base form and behaviour of artwork. An avenue for chance ,to add an element of surprise. Smaller patterns that depend on static + live inputs. The laws to setup a framework generating multiple variants of an artwork using data (preset/live) as the variable

Slide 34

Slide 34 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Evolving perceptions on cultural art Keep it Today Depicting the impact on a traditional art form in modern times , using contemporary production techniques Ajrakh block & resist printing technique Lippan Mirror & White Clay relief wall art

Slide 35

Slide 35 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Evolving perceptions on cultural art Keep it Today Projecting Lippan patterns to a surface from a distorted arrangement of mirrors in its base form. Visualising live sound input to depict the changing perception of people on the craft.

Slide 36

Slide 36 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Evolving perceptions on cultural art Keep it Today Broken Mirror patterns -> Artform Disorganisation -> fragmented state of the craft in current times. As people appreciate Ajrakh, its perception evolves; modernisation causing decreased authenticity.

Slide 37

Slide 37 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19

Slide 38

Slide 38 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Processing Video Stroke thickness = Amplitude of sound

Slide 39

Slide 39 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Face reflecting the self Abstractionism Welcoming the Information Design juniors ,@ NID. Generative Identity artworks embedded in an abstract face.

Slide 40

Slide 40 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Face reflecting the self Abstractionism Crowd Filled datasheets. Marks developed to signify the aspects // Initial Analysis//

Slide 41

Slide 41 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 Face reflecting the self Abstractionism // Visualisation Key//

Slide 42

Slide 42 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 // Code Render//

Slide 43

Slide 43 text

// Hardik Chandrahas (@18Hardik) Processing Community Day // 19 “Most of us need to listen to the music to understand how beautiful it is. But often that’s how we present statistics: we just show the notes, we don’t play the music.” - Hans Rosling

Slide 44

Slide 44 text

Processing Community Day // 19 Thank You! .exit() Github Twitter Behance github.com/IllusionInk @18Hardik behance.net/HardikChandrahas