{"id":80,"date":"2025-01-31T16:47:11","date_gmt":"2025-01-31T16:47:11","guid":{"rendered":"https:\/\/pf.fmxut.com\/whelchel\/?page_id=80"},"modified":"2025-04-25T03:05:09","modified_gmt":"2025-04-25T03:05:09","slug":"creative-coding","status":"publish","type":"page","link":"https:\/\/pf.fmxut.com\/whelchel\/creative-coding\/","title":{"rendered":"FMX 310 Creative Coding"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/IIposterimg.png\" src=\"https:\/\/www.dropbox.com\/scl\/fi\/ty1kjyb2ozvzcrprs86wn\/InteractiveIllustration.mp4?rlkey=eieelk1xbcza90h569z46vs7s&amp;st=r7mgggkw&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Angel in the Garden, Interactive Illustration<br>Media: HTML5 Canvas, JavaScript<br>Class: Creative Coding<br>Professor: Santiago Echeverry<br>Term: SP 24<br>Institution: The University of Tampa<br>Description: The first assignment, the interactive illustration, was definitely the most time-consuming but also one of the coolest projects. I took an illustration I had previously created and reimagined it entirely through code using an HTML5 Canvas. This allowed me to make various elements of the image interactive\u2014such as the wings, the sky, and the dragon\u2014so they all respond to user interaction and movement.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/collageposterimg.png\" src=\"https:\/\/www.dropbox.com\/scl\/fi\/agnmn900tb2d9qaaldk4v\/Collage.mp4?rlkey=tvlmcp6la928gop7hftj1c8gf&amp;st=us31wek3&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Portals, Interactive Collage<br>Media: HTML5 Canvas, JavaScript<br>Class: Creative Coding<br>Professor: Santiago Echeverry<br>Term: SP 24<br>Institution: The University of Tampa<br>Description: The interactive collage was one of my favorite projects. I collected various pictures of items from my room and created masks for each of them. Once I brought them into the HTML5 canvas, I was able to make them float, spin, and glow in response to mouse interaction. My favorite part of the project was incorporating videos into the portals, giving the illusion of different dimensions and adding a unique, dynamic element to the collage.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/mandalaposterimg.png\" src=\"https:\/\/www.dropbox.com\/scl\/fi\/5vbf3pz6hdvwy5kalge0p\/Mandala.mp4?rlkey=pyqyagd2a8dqxq9zhojaiwom9&amp;st=os9sobxr&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Celestial Mandala<br>Media: HTML5 Canvas, JavaScript<br>Class: Creative Coding<br>Professor: Santiago Echeverry<br>Term: SP 24<br>Institution: The University of Tampa<br>Description: The Mandala was another one of my favorite projects. I titled it &#8220;Celestial&#8221; because much of the imagery I incorporated was inspired by stars and space. There are so many elements of this piece that I love, such as the spinning centerpiece and the sparkling background. Each segment was initially drawn in Procreate before I recreated it on the HTML5 Canvas, bringing the design to life with interactivity and animation.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/witchposterimg.png\" src=\"https:\/\/www.dropbox.com\/scl\/fi\/wvxku6ejpcgvudx0f13no\/FinalWitch.mp4?rlkey=wtte5ry0182tu9h9e2x6iddv4&amp;st=80sik7pn&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Soaring Witch, Eternal Motion Final<br>Media: HTML5 Canvas, JavaScript<br>Class: Creative Coding<br>Professor: Santiago Echeverry<br>Term: SP 24<br>Institution: The University of Tampa<br>Description: For the final project, I chose to create another piece of eternal motion featuring one of my characters. I took this project to the next level by incorporating passing clouds and adding more dynamic, moving elements. I was particularly proud of how I managed to make the entire character appear to float up and down on their broom, while still having their joints move fluidly, which added a nice sense of realism and depth to the animation.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/spriteposterimg.png\" src=\"https:\/\/www.dropbox.com\/scl\/fi\/15p366vpyam154jjvlu9i\/sprite.mp4?rlkey=debr66hevim2os91d50ohtnxq&amp;st=cz8hk145&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Star Girl, Sprite Sheet<br>Media: HTML5 Canvas, JavaScript<br>Class: Creative Coding<br>Professor: Santiago Echeverry<br>Term: SP 24<br>Institution: The University of Tampa<br>Description: I had a lot of fun creating the sprite sheet and building a story around it. I knew three of the five sprites would feature the character walking, but for the other two, I decided to have the character playing a guitar and floating on a star. From there, I developed the story, which follows a musician who transforms into an actual star, blending the character&#8217;s journey with the visual elements.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/cakegirlposterimg.png\" src=\"https:\/\/www.dropbox.com\/scl\/fi\/ne5bzfnoue4arhcp03ips\/GirlWithCake.mp4?rlkey=g5eiz2ff5yvjqyzzsaqjd4os9&amp;st=wz51ddlo&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: The Baker, Eternal Motion<br>Media: HTML5 Canvas, JavaScript<br>Class: Creative Coding<br>Professor: Santiago Echeverry<br>Term: SP 24<br>Institution: The University of Tampa<br>Description: For the eternal motion project, I came up with the idea of a character in the kitchen holding a cake. I felt this concept worked really well for eternal motion, as the cake sways back and forth, creating the illusion that it might fall. Meanwhile, the character\u2019s enthusiastic expression adds to the charm, showing her excitement about the cake she just made.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/kineticposterimg.png\" src=\"https:\/\/www.dropbox.com\/scl\/fi\/31764iyy3lzibb11wy04b\/Rabbitvid.mp4?rlkey=w2jzpw4pz6bi4lz3jz3hvk4it&amp;st=9oqt3by9&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Kinetic <br>Media: HTML5 Canvas, JavaScript<br>Class: Creative Coding<br>Professor: Santiago Echeverry<br>Term: SP 24<br>Institution: The University of Tampa<br>Description: The kinetic typography project was enjoyable, though not my favorite. I chose to center mine around the topic of animal cruelty, specifically animal testing. The words float slowly across the screen, and when the user mouses over the rabbit\u2014replaced by a syringe\u2014the rabbit reveals additional words, and the entire page shakes to create a sense of impact and urgency.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Title: Angel in the Garden, Interactive IllustrationMedia: HTML5 Canvas, JavaScriptClass: Creative CodingProfessor: Santiago EcheverryTerm: SP 24Institution: The University of TampaDescription:&hellip; <a class=\"read-more\" href=\"https:\/\/pf.fmxut.com\/whelchel\/creative-coding\/\">Read more <span class=\"screen-reader-text\">FMX 310 Creative Coding<\/span><\/a><\/p>\n","protected":false},"author":234,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","footnotes":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/users\/234"}],"replies":[{"embeddable":true,"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":15,"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":493,"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/pages\/80\/revisions\/493"}],"wp:attachment":[{"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/media?parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}