the! graphical!web!! Anima&ng(2D(Digital(Puppets(using( Mo&on(Capture(and(Vectorial(Graphics!! Developing(Interac&ve(Storytelling(Tools(for(Educa&onal(Anima&ons( Alberto!Pacheco! M.Learning!Lab! IT!Chihuahua! MEXICO! René!Cruz! M.Learning!Lab! UAEMex!Valle!de!Chalco! MEXICO! The!University!of!Winchester!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!27.08.2014!
Digital!NarraCve! as!a!cognicve!tool! Podcasts!(hHp://Cny.cc/videotec)! Audio! Video!! Produced!by!Students! As!learning!evidence! CollaboraCve!endeavor! Storytelling! 6!
Why!AnimaCon?! Engage!!retain!student!aHenCon! Friendly!!improve!learning!experience! AcCng!freedom!!!Alter!ego!effect! 9!
(InteracCve)!Visual!Storytelling! Work!in!progress! Experiments!with!digital!puppetry! To!tell!stories! Real.Cme!moCon!capture! AnimaCon! 10!
LimitaCons! Key.frame!animaCon!! is!difficult! Time.consuming! Video!streaming!(slow!traffic)! InteracCve!video!/!animaCon! 11!
Why!Puppetry?! 12!
(Audio)!Visual!Storytelling! Puppetry(( can(be(a(great(method(for(( telling(stories! TeoChuacan!puppets!100.600!AD! 15!
(Audio)!Visual!Storytelling! a!ludic!and!expressive!approach!to!! to!explore!content,! demonstrate!learning,! sharing!knowledge!in!an!! arcscc,!interaccve!and!mulcmodal!way! 19!
Problem! AcCng!in!front!of!a!camera!!! 22!
Problem! the!mask(effect ((alter(ego(effect)! a!learner!may!parccipate!and!! act! disguised! 23!
(Audio)!Visual!Storytelling! An!audio.visual!narraCve!with!!animated!characters!! may!unleash!! the!persona(effect!! 25!
(Audio)!Visual!Storytelling! An!audio.visual!narraCve!with!!animated!characters!! can!go!along!with!student!as!! a!tutor,!presenter,!helper!or!guide!person!!! 29!
Our!students!are!kinestheCc!learners!! Enginnering!students!learning!styles!(VARK!poll,!summer!2014)! Visual! Reading! Verbal! Kinesthesic! 0! 50! 100! 150! 200! 250! 300! 30!
Scenarios! Real.Cme! Stored!animaCon! Web!page!animaCon! AnimaCon!Web!streaming! 31!
Why!Web?! SVG!browser!support! Lightweight!protocol! One!device!!one!server! Unlimited!number!cliets! Real.Cme!visual!storytelling! 32!
SVG!Puppet! 33!
MoCon!Capture! 34!
Procedure! MoCon!Capture! Tranform! Animate!!Points!!Joint!angle!!Puppet! 39!
!!! ImplementaCon! Processing Programming Language! SVG (subset)! Depth Camera (Prime Sense)! 40!
! Joint!Objects! class Joint {! "Point pivot! "float angle! "PShape group! "...! }! 41!
! Puppet!Object! Class Puppet {! "ArrayList<Joint> joints! "...! }! 42!
! Main!Loop! draw {! "Kinect.update "! }! "pointlist = mapjoint2d(kinect.skeleton)! "anglelist = mappoint2angle(pointlist)! "filteredangles = avgfilter(anglelist)! "Puppet.update(filteredAngles)! "Puppet.draw! "...! 48!
SVG!Groups! eyes head mouth puppet hip chest neck left-leg thigh knee foot right-leg thigh knee foot left-arm forearm elbow hand right-arm forearm elbow hand 49!
SVG!Puppet! <svg>! <g id= puppet'>! </svg>! <g id= head >...! <g id= hip >...! <g id= chest'>...! <g id= left-arm'>...! <g id='left-forearm'>...! <g id='left-elbow >...!...! <g id= left-hand >...! 50!
SVG!AnimaCon! <svg>! <g id= puppet'>!...! <g id='left-elbow'>! <animatetransform type='rotate'! begin='0.5' dur= 3.0'!! keytimes='0; 0.2; 1! values='35 90 70; 25 90 70; />! 51!
SVG!AnimaCon! <svg>! <g id= puppet'>!...! <g id='left-elbow'>! <animatetransform type='rotate'! begin='0.5' dur= 3.0'!! keytimes='0; 0.2; 1! values='35 90 70; 25 90 70; />! Redundancy! 52!
One!Euro!Filter! 53!
One!Peso!Filter! 54!
Frame!Grouping! [107.6,!0.3],![108.1,!0.3],![108.2,!0.3],![107.7,!0.3]! "! [108,!1.2]! angle! frames! 57!
Frame!Grouping! [108,!1.2]! "! <animatetransform!type='rotate! values=!108!!dur= 1.2!!!/>! angle! frames! 58!
Joint!Angle!Stream! 10!frames!!(mean!value)! 94.76, 106.68, 110.08,, 93.48! 94.82, 105.69, 111.95,, 93.38! 94.96, 105.07, 112.79,, 94.07! 95.11, 105.15, 113.35,, 93.91! 96.76, 106.09, 116.05,, 91.51!! 60!
Joint!Angle!Stream! 10!frames!@!30fps!!0.3!sec! 94.76, 106.68, 110.08,, 93.48! 94.82, 105.69, 111.95,, 93.38! 94.96, 105.07, 112.79,, 94.07! 95.11, 105.15, 113.35,, 93.91! 96.76, 106.09, 116.05,, 91.51!! 61!
Joint!Angle!Stream! joint!angle! 94.76, 106.68, 110.08,, 93.48! 94.82, 105.69, 111.95,, 93.38! 94.96, 105.07, 112.79,, 94.07! 95.11, 105.15, 113.35,, 93.91! 96.76, 106.09, 116.05,, 91.51!! 62!
Joint!Angle!Stream! ā!=!90!! 90.76, 106.68, 110.08,, 93.48!!Δ!<!3!!Δ!>!3!!Δ!>!3! 90.82, 105.69, 111.95,, 93.38! 90.96, 105.07, 112.79,, 94.07! 94.11, 105.15, 113.35,, 93.91! 97.86, 106.09, 116.05,, 91.51!! 63!
Joint!Angle!Stream! ā!=!90!!! 90.76, 106.68, 110.08,, 93.48! 90.82, 105.69, 111.95,, 93.38! 90.96, 105.07, 112.79,, 94.07!!Δ!!=!3!!Δ!!=!4! 93.21, 105.15, 113.35,, 93.91! 97.06, 106.09, 116.05,, 91.51! [90,!1.2],![93,!0.3],![97,!0.3],!!!!! 64!
Joint!Angle!Stream! ā!=!90!!! 90.76, 106.68, 110.08,, 93.48! 90.82, 105.69, 111.95,, 93.38! 90.96, 105.07, 112.79,, 94.07!!Δ!!=!3!!Δ!!=!4! 93.21, 105.15, 113.35,, 93.91! 97.06, 106.09, 116.05,, 91.51! [90,!1.2],![93,!0.3],![97,!0.3],!!!! <animatetransform!type='rotate!!!!!!!!values= 90! ;!93! ;!97!!!! dur= 1.2;!0.3;!0.3!!!/>! 65!
Joint!Angle!Stream! ā!=!90!!! 90.76, 106.68, 110.08,, 93.48! 90.82, 105.69, 111.95,, 93.38! 90.96, 105.07, 112.79,, 94.07!!Δ!!=!3!!Δ!!=!4! 93.21, 105.15, 113.35,, 93.91! 97.06, 106.09, 116.05,, 91.51! [90,!1.2],![93,!0.3],![97,!0.3],!!!! <animatetransform!type='rotate!!!!!!!!values= 90! ;!93! ;!97!!!! dur= 1.2;!0.3;!0.3!!!/>! 66!
Joint!Angle!Stream! ā!=!90!!! 90.76, 106.68, 110.08,, 93.48! 90.82, 105.69, 111.95,, 93.38! 90.96, 105.07, 112.79,, 94.07!!Δ!!=!3!!Δ!!=!4! 93.21, 105.15, 113.35,, 93.91! 97.06, 106.09, 116.05,, 91.51! [90,!1.2],![93,!0.3],![97,!0.3],!!!! <animatetransform!type='rotate!!!!!!!!values= 90! ;!93! ;!97!!!! dur= 1.8!!keyTimes= 0;!0.67;!1.0!/>! 67!
Joint!Angle!Stream! ā!=!90!!! 90.76, 106.68, 110.08,, 93.48! 90.82, 105.69, 111.95,, 93.38! 90.96, 105.07, 112.79,, 94.07!!Δ!!=!3!!Δ!!=!4! 93.21, 105.15, 113.35,, 93.91! 97.06, 106.09, 116.05,, 91.51! [90,!1.2],![93,!0.3],![97,!0.3],!!!! <animatetransform!type='rotate!!!!!!!!values= 90! ;!93! ;!97!!!! dur= 1.8!!keyTimes= 0;!0.67;!1.0!/>! 68!
JS!&!DOM!AnimaCon! <g id='left-elbow'>! <animatetransform type='rotate! onend='update(this)' />!! 69!
JS!&!DOM!AnimaCon! <g id='left-elbow'>! <animatetransform type='rotate! <script>! onend='update(this)' />...! function update(obj) {! obj.setattribute( transform,rotate);! anim.setattribute( begin,t1);! anim.setattribute( dur,t2);! anim.setattribute( keytimes,seq);! anim.setattribute( values,val);... 70!
! SVG!Streaming! <g id='left-elbow'! data-rotate-pivot='90 70 >!! <set xlink:href='#left-elbow'! animatetransform='rotate(35)'! " dur='0.35' keyframe='53' />!! <set xlink:href='#left-elbow'! animatetransform='rotate(15)'! " dur='0.70' keyframe='54' />! 73!
Preeliminary!Results! Lightweight!SVG!puppet!design! (30Kb)! Lightweight!data!stream! (300!floats/sec)! Real.Cme!animaCon! Easy!to!use!&!modify! 74!
Roadmap! Streaming!AnimaCon!Protocol! MulCple!puppets!(users)! Face!recogniCon!(eyes,!mouth)! Editor!(stored!animaCons)! 75!
the! graphical!web!! Thank(You!! Alberto!Pacheco! alberto@acm.org! @beto0303! René!Cruz! rgcruzf@uaemex.mx! The!University!of!Winchester!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!27.08.2014!