[{"data":1,"prerenderedAt":370},["ShallowReactive",2],{"project-31724613":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":35,"aspects":36,"strip":45,"post_text":46,"what":47,"said":84,"maker_in_thread":176,"shape":185,"grid":190,"attempts":331,"same_week":332,"maker_shows":32,"maker_hidden":362,"reader_version":363,"card":364},"31724613","Animation Magic","Visualizing the math that powers 3D character animation","title","Show HN: Visualizing the math that powers 3D character animation","https:\u002F\u002Fdiegomacario.github.io\u002FAnimation-Magic\u002Fpublic\u002Findex.html","diegomacario.github.io","diegomacario",1655123838,2022,238,53,207,2570,9,"notable","learning_science","interactive visualization of 3D animation math","web_app",[24,25,26,27,28],"quaternions","3d character animation","skeletal animation","gltf","webgl","debated",0.063,{"positive":32,"neutral":32,"mixed":33,"critical":34},6,2,5,19,{"design":37,"idea":39,"performance":41,"docs":42,"execution":43},{"positive":33,"critical":38},1,{"positive":33,"critical":40},0,{"positive":38,"critical":40},{"positive":40,"critical":38},{"positive":38,"critical":44},3,[40,40,40,40,40,40,40,40,40,40,40,40,38,34,44,44,34,34,44,44,40,40,40,40,38,40,38,38,40,40,40,40,40,44,40,34,44,40,44,34],"Hi everyone! I'm the author of this project. I wrote it because I think that the math that makes characters move in games and movies is incredibly beautiful, and I wanted to give others a glimpse into it.\n\nIt's crazy to think that quaternions, an abstract mathematical tool discovered by William Rowan Hamilton in 1843, would be so perfectly suited to solve hard problems in the world of 3D character animation more than a hundred years later. The story of how he discovered quaternions is also beautiful. Here's an excerpt from Wikipedia:\n\n\"Hamilton was looking for ways of extending complex numbers",{"problem":48,"audience":54,"pricing":59,"motivation":60,"time_to_build":59,"stack":64,"openness":81,"stage":82,"team_size":83},{"value":49,"source":50,"evidence":51},"Shows the math that makes 3D characters move, such as quaternion joint orientations","maker",[52],{"id":53},"post",{"value":55,"source":56,"evidence":57},"People curious about the math behind character animation","inferred",[58],{"id":53},null,{"value":61,"source":50,"evidence":62},"Find the math of character animation beautiful and share a glimpse of it",[63],{"id":53},[65,73,77],{"value":66,"source":67,"evidence":68},"WebGL","commenter",[69],{"id":70,"by":71,"text":72},"31729425","xaedes","Seeing glfw mentioned in your readme, I wanted to know how your (web) build process looks like. Gotta say I love this CMakeLists.txt It is so clean and simple!",{"value":74,"source":67,"evidence":75},"glfw",[76],{"id":70,"by":71,"text":72},{"value":78,"source":67,"evidence":79},"CMake",[80],{"id":70,"by":71,"text":72},"open_source","launched","unknown",{"praise":85,"objections":105,"requests":134,"questions":148,"alternatives":162},[86,101],{"value":87,"source":67,"evidence":88},"Visualization is beautiful and educational",[89,93,97],{"id":90,"by":91,"text":92},"31729760","samstave","I AM IN LOVE WITH THIS DATA: But hear me out as to why: Surely - the amount of spatial kinematic maths that has been built around how we 'perceive' natural movement within a…",{"id":94,"by":95,"text":96},"31732095","panki27","Could you overlay the graphs with a sort of arrow, indicating the the actual direction the quaternion is pointing in? I had no knowledge on animation before, this was a great…",{"id":98,"by":99,"text":100},"31731640","barrysteve","I love this site, the animations have so much character!",{"value":102,"source":67,"evidence":103},"Helpful primer on animation",[104],{"id":94,"by":95,"text":96},[106,113,123],{"value":107,"source":67,"evidence":108},"Graphs of individual quaternion components are not intuitive",[109],{"id":110,"by":111,"text":112},"31731196","aaaaaaaaaaab","Nice work, but displaying the time evolution of individual quaternion components is about as intuitive of a visualization as displaying the time evolution of an individual pixel…",{"value":114,"source":67,"evidence":115},"Only works well in Chrome; buggy on Safari and Brave",[116,120],{"id":117,"by":118,"text":119},"31729220","dwrodri","It's a gorgeous visualization, but it appears the UI is bugging out for me on Brave and Safari in MacOS. The layout has no issue, but I can't select any of the dropdowns.",{"id":121,"by":11,"text":122},"31729292","I recommend running it on Chrome. It runs more smoothly there. I'm still improving the performance on Safari.",{"value":124,"source":67,"evidence":125},"Lacks explanation of the math itself",[126,130],{"id":127,"by":128,"text":129},"31729334","suyash","I don't see any math, only visualization, where is the mathematical concepts and equations explained again?",{"id":131,"by":132,"text":133},"31741664","dolmen","I agree. For example I don't see a link between a given graph and one particular joint. The README says each joint has (3 + 4 + 3) values but I only see graphs with 4 curves.…",[135,139,143],{"value":136,"source":67,"evidence":137},"Overlay direction arrows on the graphs",[138],{"id":94,"by":95,"text":96},{"value":140,"source":67,"evidence":141},"Label each graph and link curves to specific joints",[142],{"id":131,"by":132,"text":133},{"value":144,"source":67,"evidence":145},"Pause and speed controls, and sync graphs",[146,147],{"id":131,"by":132,"text":133},{"id":94,"by":95,"text":96},[149,156],{"value":150,"source":67,"evidence":151},"Why curves are sampled per frame and how sampling works",[152],{"id":153,"by":154,"text":155},"31732348","saeranv","I'm a little confused about why the curves are \"sampled\" to update the joint transformations: ``` So if we are rendering 60 frames per second, we are basically doing the…",{"value":157,"source":67,"evidence":158},"Whether dual quaternions are relevant",[159],{"id":160,"by":111,"text":161},"31732706","Got it! I think you should also read up on dual quaternions for more mind-blowing math if you haven’t done so yet!",[163,170],{"value":164,"source":67,"evidence":165},"Geometric algebra (rotors) as a replacement for quaternions",[166],{"id":167,"by":168,"text":169},"31729259","GuB-42","On the subject of quaternions, here is an article that pops up on HN from time to time. https:\u002F\u002Fmarctenbosch.com\u002Fquaternions\u002F It is called \"Let's remove Quaternions from every 3D…",{"value":171,"source":50,"evidence":172},"Grant Sanderson and Ben Eater quaternion videos",[173],{"id":174,"by":11,"text":175},"31729463","Wow that's fascinating, thanks for sharing it! Although I disagree with how the author describes quaternions as black boxes. The two questions he asks: - Why does i2=j2=k2=−1 and…",{"comments":18,"answered":44,"key":177},[178,179,182],{"id":174,"text":175},{"id":180,"text":181},"31731468","Hahaha this is a fair comment. I guess my intention was to show the complex number crunching that happens in the background to make characters move. I'm still thinking about…",{"id":183,"text":184},"31730004","Thanks proc0! What you are describing (a hierarchy of bones) is exactly what I'm doing. I decided not to mention that to simplify the explanation of how character animations…",{"commenters":186,"max_depth":187,"maker_replies":18,"first_comment_mins":188,"lifespan_hours":189},32,10,336,47,[191,193,195,199,202,205,208,210,213,215,219,221,224,228,231,234,236,238,240,242,246,249,253,257,259,261,264,267,270,272,275,277,279,283,285,289,292,294,297,300,302,305,307,309,311,315,317,319,321,324,326,328,330],[167,40,40,192,168,40],"other\u002Fneutral\u002Fidea",[174,40,40,194,11,38],"commenter\u002Fneutral\u002Fdocs",[196,40,40,197,198,40],"31731534","commenter\u002Fneutral\u002Fidea","wyager",[200,40,40,194,201,40],"31734598","naikrovek",[203,40,40,204,198,40],"31731493","other\u002Fneutral\u002Fperformance",[206,40,40,207,111,40],"31732685","commenter\u002Fneutral\u002Fperformance",[209,40,40,207,198,40],"31739713",[211,40,40,207,212,40],"31733242","gfxgirl",[214,40,40,207,198,40],"31739783",[216,40,40,217,218,40],"31731544","other\u002Fneutral\u002Fnone","Uehreka",[220,40,40,217,168,40],"31732227",[222,40,40,217,223,40],"31733832","RicardoLuis0",[225,40,40,226,227,40],"31751579","commenter\u002Fneutral\u002Fnone","IYasha",[229,40,40,217,230,40],"31734816","jimmySixDOF",[232,40,40,197,233,40],"31735676","japanuspus",[110,38,38,235,111,40],"project\u002Fcritical\u002Fdesign",[180,38,40,237,11,38],"maker\u002Fneutral\u002Fdesign",[94,38,34,239,95,40],"project\u002Fpositive\u002Fdesign",[160,38,44,241,111,40],"maker\u002Fneutral\u002Fidea",[243,33,44,244,245,40],"31732650","project\u002Fneutral\u002Fperformance","Const-me",[247,33,44,244,248,40],"31732871","soylentgraham",[250,33,34,251,252,40],"31734681","project\u002Fpositive\u002Fperformance","Ono-Sendai",[254,44,34,255,256,40],"31729835","project\u002Fpositive\u002Fidea","proc0",[183,44,40,258,11,38],"maker\u002Fneutral\u002Fdocs",[260,44,44,258,256,40],"31730219",[153,262,44,263,154,40],4,"project\u002Fneutral\u002Fdocs",[265,262,40,194,266,40],"31732405","arjvik",[268,262,40,194,269,40],"31732411","danachow",[271,262,40,194,154,40],"31741023",[273,262,40,194,274,40],"31732933","jameshart",[276,262,40,258,11,38],"31738095",[117,34,38,278,118,40],"project\u002Fcritical\u002Fexecution",[280,34,44,281,282,40],"31729282","project\u002Fmixed\u002Fperformance","j_leboulanger",[121,34,40,284,11,38],"maker\u002Fneutral\u002Fperformance",[286,34,38,287,288,40],"31729438","maker\u002Fcritical\u002Fexecution","dylan604",[290,34,40,291,11,38],"31729611","commenter\u002Fneutral\u002Fexecution",[293,34,38,287,288,40],"31729676",[295,34,40,207,296,40],"31730510","dahart",[298,34,40,217,299,40],"31732818","Hammershaft",[301,34,40,226,288,40],"31733286",[303,34,40,226,304,40],"31734062","macintux",[306,34,40,291,288,40],"31749443",[308,34,40,226,132,40],"31741293",[310,34,40,226,288,40],"31749433",[312,34,44,313,314,40],"31730779","project\u002Fneutral\u002Fexecution","Kiro",[316,34,40,313,11,38],"31729284",[70,32,34,318,71,40],"maker\u002Fpositive\u002Fexecution",[90,320,34,255,91,40],7,[127,322,38,323,128,40],8,"project\u002Fcritical\u002Fdocs",[325,322,40,258,11,38],"31729360",[131,322,44,327,132,40],"project\u002Fmixed\u002Fdesign",[329,322,40,237,11,38],"31745409",[98,18,34,239,99,40],[],[333,338,343,348,353,357],{"id":334,"name":335,"points":336,"category":337},"31710603","Vytal",313,"security_privacy",{"id":339,"name":340,"points":341,"category":342},"31755025","anonfriendly",306,"web_saas",{"id":344,"name":345,"points":346,"category":347},"31679811","Ory Kratos",290,"infrastructure",{"id":349,"name":350,"points":351,"category":352},"31726472","Tuc",241,"dev_tools",{"id":354,"name":355,"points":356,"category":342},"31741018","My Side Project Rocks",220,{"id":358,"name":359,"points":360,"category":361},"31735754","Coquistt",191,"productivity",false,"v2",{"id":365,"name":5,"line":6,"ai":362,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":366,"top":18,"kw":367,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":368,"url":9,"mix":369,"praise":87,"objection":107,"sub":21},31724613,0.06,[24,25,26,27,28],"0000000000001533553300001011000003053035",[32,32,33,34],1794036621389]