{"id":13595,"date":"2025-05-07T03:27:52","date_gmt":"2025-05-07T07:27:52","guid":{"rendered":"https:\/\/rmu.andrewyames.com\/?p=13595"},"modified":"2025-05-07T20:18:22","modified_gmt":"2025-05-08T00:18:22","slug":"animated-timeline-of-the-universe-4d-final","status":"publish","type":"post","link":"https:\/\/rmu.andrewyames.com\/?p=13595","title":{"rendered":"Animated Timeline of the Universe (4D Final)"},"content":{"rendered":"\n<p>Bryce Mathews<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>I enjoy education when it is entertaining, whether through visual effects or interactive media. For my project, I wanted to present a narrative to the class while also challenging myself. I decided to give a timeline of the future of the universe, including researched facts, animated sprites, and interactivity via a webpage.<\/p>\n\n\n\n<p>I began by animating my videos in Aseprite, a pixel-art creation tool with built-in animation tools. For the challenge, I asked some friends to provide some relevant obstructions to my work: I was limited to 9 videos to tell a complete story, I couldn&#8217;t use orange, green, or violet, and I was limited to a 121 by 121 canvas. On top of learning the application, I feel that these obstructions &#8220;gamified&#8221; the experience more.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_workspace.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_workspace-1024x576.png\" alt=\"\" class=\"wp-image-13596\" srcset=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_workspace-1024x576.png 1024w, https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_workspace-300x169.png 300w, https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_workspace-768x432.png 768w, https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_workspace-1536x864.png 1536w, https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_workspace.png 1920w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_frames.png\"><img loading=\"lazy\" decoding=\"async\" width=\"709\" height=\"167\" src=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_frames.png\" alt=\"\" class=\"wp-image-13597\" srcset=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_frames.png 709w, https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/aesprite_frames-300x71.png 300w\" sizes=\"auto, (max-width: 709px) 100vw, 709px\" \/><\/a><\/figure>\n\n\n\n<p>Using Aseprite, I created pixel animations detailing the 9 major events in the universe, ranging from 1-3 second animations running at about 10fps.<\/p>\n\n\n\n<p>I needed a way to present and add more context. I had taken what I had learned from Dreamweaver and created a webpage that integrated the sprites (now GIFs) I had made.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/dreamweave_workspace.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/dreamweave_workspace-1024x576.png\" alt=\"\" class=\"wp-image-13598\" srcset=\"https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/dreamweave_workspace-1024x576.png 1024w, https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/dreamweave_workspace-300x169.png 300w, https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/dreamweave_workspace-768x432.png 768w, https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/dreamweave_workspace-1536x864.png 1536w, https:\/\/rmu.andrewyames.com\/wp-content\/uploads\/2025\/05\/dreamweave_workspace.png 1920w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/figure>\n\n\n\n<p>The finished product is a basic website with animated sprites and a scrollable website for reading. Some key areas for improvement are: improved website UI, or more interactive features.<\/p>\n\n\n\n<p><strong>How do these fufill the requirements?<\/strong><\/p>\n\n\n\n<p><strong>Animated Narrative<\/strong>: The project is a complete narrative of the universe&#8217;s future, with sprite animations as visual complements to the educational material.<\/p>\n\n\n\n<p><strong>Game Design\/Play<\/strong>: To introduce a challenge, I forced myself to learn Aseprite and had friends choose obstructions that would define the project&#8217;s scope. Users must also engage with the text and video to learn or entertain themselves.<\/p>\n\n\n\n<p><strong>Video<\/strong>: Each sprite is its own video that enhances the text-based storytelling.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Link to Google Drive for HTML download:<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/drive.google.com\/drive\/folders\/1oxC7-vocP0t2yOEpSg66HCCTeoC2cwnk?usp=sharing\">https:\/\/drive.google.com\/drive\/folders\/1oxC7-vocP0t2yOEpSg66HCCTeoC2cwnk?usp=sharing<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bryce Mathews I enjoy education when it is entertaining, whether through visual effects or interactive media. For my project, I wanted to present a narrative to the class while also challenging myself. I decided to give a timeline of the future of the universe, including researched facts, animated sprites, and interactivity via a webpage. I &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/rmu.andrewyames.com\/?p=13595\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Animated Timeline of the Universe (4D Final)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":291,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[120],"tags":[],"class_list":["post-13595","post","type-post","status-publish","format-standard","hentry","category-4d-studio"],"_links":{"self":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/posts\/13595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/users\/291"}],"replies":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13595"}],"version-history":[{"count":5,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/posts\/13595\/revisions"}],"predecessor-version":[{"id":13604,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/posts\/13595\/revisions\/13604"}],"wp:attachment":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}