{"id":1331,"date":"2023-08-27T10:30:54","date_gmt":"2023-08-27T14:30:54","guid":{"rendered":"https:\/\/jausoft.com\/blog\/?p=1331"},"modified":"2023-08-29T03:06:04","modified_gmt":"2023-08-29T07:06:04","slug":"graphui_animation_animgroup","status":"publish","type":"post","link":"https:\/\/jausoft.com\/blog\/2023\/08\/27\/graphui_animation_animgroup\/","title":{"rendered":"GraphUI Type &#038; Shape Animation at your Fingertips"},"content":{"rendered":"<p>Finished a little over the weekend animation work with <a href=\"https:\/\/jogamp.org\/cgit\/jogl.git\/tree\/src\/graphui\/classes\/com\/jogamp\/graph\/ui\/AnimGroup.java#n54\"><em>AnimGroup<\/em><\/a> (<a href=\"https:\/\/jogamp.org\/cgit\/jogl.git\/commit\/?id=4448010d8d787c73d48f54b296c3a8c2499aeaa0\">main commit)<\/a>, continuing the <a href=\"https:\/\/jausoft.com\/blog\/tag\/graph_type_rendering\/\">Graph Type Rendering and UI<\/a> saga.<\/p>\n<p><a href=\"https:\/\/jogamp.org\/cgit\/jogl.git\/tree\/src\/demos\/com\/jogamp\/opengl\/demos\/graph\/ui\/UISceneDemo03.java#n87\">UISceneDemo03<\/a> demonstrates <a href=\"https:\/\/jogamp.org\/cgit\/jogl.git\/tree\/src\/graphui\/classes\/com\/jogamp\/graph\/ui\/AnimGroup.java#n54\"><em>AnimGroup<\/em><\/a> capabilities:<\/p>\n<ul>\n<li>Two repetitive steady scrolling text lines. One text shorter than the line-width and one longer<\/li>\n<li>One line of animated rectangles, rotating around their z-axis and accelerating towards their target<\/li>\n<li>A text animation assembling one line of text, each glyph coming from a random 3D point moving to its destination all at once including rotation.<\/li>\n<li>One line of text with sine wave animation flattening and accelerating towards its target<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p>The mandatory demo video<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1331-1\" width=\"640\" height=\"360\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/jausoft.com\/Files\/media\/20230827-UISceneDemo03.mp4?_=1\" \/><a href=\"https:\/\/jausoft.com\/Files\/media\/20230827-UISceneDemo03.mp4\">https:\/\/jausoft.com\/Files\/media\/20230827-UISceneDemo03.mp4<\/a><\/video><\/div>\n<p style=\"text-align: center;\">(<a href=\"https:\/\/jausoft.com\/Files\/media\/20230827-UISceneDemo03.mp4\">Direct video URL<\/a>, download and share \u2013 or just view at original resolution)<\/p>\n<p><em>(No, there is no stuttering, I intentionally demonstrated the Pause button. See mouse pointer and button-pressed)<\/em><\/p>\n<p>I added sound using our GLMediaPlayer ( FFmpeg + JOAL\/OpenAL), which is paused and resumed using the <em>Pause<\/em> button in the demo.<\/p>\n<p><em>Music: Heaven by Zero V ( 2006-08-14, <a href=\"https:\/\/archive.org\/details\/Agree_to_Disagree_an_index_of_possibilities-12891\/Zero_V_-_05_-_Heaven.mp3\">archive.org<\/a>).<\/em><\/p>\n<p><em>I have posted <a href=\"https:\/\/forum.jogamp.org\/Graph-Type-Rendering-Updates-Graph-UI-tp4042173p4042910.html\">artifacts on the JogAmp forum<\/a> first, where I update and discuss things.<\/em><\/p>\n<p style=\"text-align: center;\">***<\/p>\n<p><em>GraphUI<\/em>&#8216;s new <em>AnimGroup<\/em> allows adding multiple <em>AnimGroup.Set<\/em> of <em>AnimGroup.ShapeData<\/em>.<\/p>\n<p><em>AnimGroup.ShapeData<\/em> holds the actual Shape and its start- and target position as well as its active animation state and an optional user object attachment.<\/p>\n<p><em>AnimGroup.Set<\/em> holds a list of <em>AnimGroup.ShapeData<\/em> as well as the animation properties and states like acceleration and velocity for translation and angular operations.<br \/>\nIt also contains the <em>AnimGroup.LerpFunc<\/em> for linear interpolation of the next position as called via <em>AnimGroup.tick()<\/em> over all sets.<\/p>\n<p><em>AnimGroup.LerpFunc<\/em> is intended to perform the linear interpolation for the next position, either user provided or one of the provided may be used, i.e. <em>TargetLerp<\/em>, <em>ScrollLerp<\/em> and <em>SineLerp<\/em>.<\/p>\n<p>To setup the start- and target position for each <em>AnimGroup.ShapeData<\/em>, a <em>AnimGroup.ShapeSetup<\/em> is used, either user implemented or one of the build-in of <em>AnimGroup.addGlyphSetHorizScroll01(..),<\/em> <em>AnimGroup.addGlyphSetRandom01(..)<\/em>.<\/p>\n<p style=\"text-align: center;\">***<\/p>\n<p>Screenshots &#8230;<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap03-1280x0720-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1329\" src=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap03-1280x0720-1.png\" alt=\"\" width=\"1280\" height=\"720\" srcset=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap03-1280x0720-1.png 1280w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap03-1280x0720-1-300x169.png 300w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap03-1280x0720-1-1024x576.png 1024w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap03-1280x0720-1-768x432.png 768w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap03-1280x0720-1-1088x612.png 1088w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/>***<\/a><\/p>\n<p><a href=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap05-1280x0720-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1330\" src=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap05-1280x0720-1.png\" alt=\"\" width=\"1280\" height=\"720\" srcset=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap05-1280x0720-1.png 1280w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap05-1280x0720-1-300x169.png 300w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap05-1280x0720-1-1024x576.png 1024w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap05-1280x0720-1-768x432.png 768w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2023\/08\/UISceneDemo03-vbaa-s04-fsaa0-snap05-1280x0720-1-1088x612.png 1088w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a>.. enjoy.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Finished a little over the weekend animation work with AnimGroup (main commit), continuing the Graph Type Rendering and UI saga. UISceneDemo03 demonstrates AnimGroup capabilities: Two repetitive steady scrolling text lines. One text shorter than the line-width and one longer One line of animated rectangles, rotating around their z-axis and accelerating towards their target A text&hellip; <a class=\"more-link\" href=\"https:\/\/jausoft.com\/blog\/2023\/08\/27\/graphui_animation_animgroup\/\">Continue reading <span class=\"screen-reader-text\">GraphUI Type &#038; Shape Animation at your Fingertips<\/span> <span class=\"meta-nav\" aria-hidden=\"true\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[7,3,8],"tags":[9,13,74,22,71,16,44,17,46,68,73],"class_list":["post-1331","post","type-post","status-publish","format-standard","hentry","category-3d-opengl","category-computer-stuff","category-jogamp","tag-3d","tag-embedded-device","tag-ffmpeg","tag-fonts","tag-graph_type_rendering","tag-java","tag-jogamp","tag-opengl","tag-openjdk","tag-type-rendering","tag-video"],"_links":{"self":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1331"}],"version-history":[{"count":12,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1331\/revisions"}],"predecessor-version":[{"id":1344,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1331\/revisions\/1344"}],"wp:attachment":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}