{"id":114,"date":"2021-04-06T16:31:49","date_gmt":"2021-04-06T16:31:49","guid":{"rendered":"https:\/\/fmx298.santiago.bz\/platteter\/?page_id=114"},"modified":"2021-04-06T22:10:03","modified_gmt":"2021-04-06T22:10:03","slug":"creative-coding","status":"publish","type":"page","link":"https:\/\/fmx298.santiago.bz\/platteter\/creative-coding\/","title":{"rendered":"CREATIVE CODING"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"896\" style=\"aspect-ratio: 1158 \/ 896;\" width=\"1158\" autoplay controls loop src=\"https:\/\/fmx298.santiago.bz\/platteter\/wp-content\/uploads\/sites\/88\/2021\/04\/res.mp4\"><\/video><figcaption>TITLE: Visual Resume<br>MEDIA: HTML<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Windows 64bit<br>SPECIFICATIONS: 1200px x 800px<br>CLASS: FMX 311 Online Production<br>PROFESSOR: Santiago Echeverry<br>SEMESTER&nbsp;\/ TERM: SP 19<br>INSTITUTION: University of Tampa<br>DESCRIPTION: This visual\/interactive resume was created to display to show my skills in a fun way. By hovering over the different skills, examples of my work are shown. There&#8217;s also a video slideshow of my work as well as a link to my portfolio. Overall, it was a fun project to make and helped me decide what colors and aesthetic I wanted to use for my &#8220;branding&#8221;.<br>LINK: <a href=\"http:\/\/art311.santiago.bz\/SP20\/barnett\/03_imgtxtpoem\/text_image_01.html\">https:\/\/fmx311.santiago.bz\/FMX311\/FA19\/platteter\/05_IntResume\/resume.html<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"760\" style=\"aspect-ratio: 956 \/ 760;\" width=\"956\" autoplay controls loop src=\"https:\/\/fmx298.santiago.bz\/platteter\/wp-content\/uploads\/sites\/88\/2021\/04\/vixtextpoem.mp4\"><\/video><figcaption>TITLE: Image\/Text Poem<br>MEDIA: HTML<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Windows 64bit<br>SPECIFICATIONS: 1200px x 800px<br>CLASS: FMX 311 Online Production<br>PROFESSOR: Santiago Echeverry<br>SEMESTER&nbsp;\/ TERM: SP 19<br>INSTITUTION: University of Tampa<br>DESCRIPTION: This text and image-based HTML poem uses lyrics from the song &#8220;[A]ddiction&#8221;. I created the main character image and animated it to have a blinking motion. Hovering on any of the &#8216;love&#8217; lyrics makes a heart appear on their hat. The lyrics show up in a staggered manner using CSS animations and timing. Other words can also be hovered over for further interactivity.<br>LINK: <a href=\"http:\/\/art311.santiago.bz\/SP20\/barnett\/03_imgtxtpoem\/text_image_01.html\">https:\/\/fmx311.santiago.bz\/FMX311\/FA19\/platteter\/03_TextImagePoem\/textimagepoem.html<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"636\" style=\"aspect-ratio: 760 \/ 636;\" width=\"760\" autoplay controls loop src=\"https:\/\/fmx298.santiago.bz\/platteter\/wp-content\/uploads\/sites\/88\/2021\/04\/poem.mp4\"><\/video><figcaption>TITLE: Text Poem<br>MEDIA: HTML<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Windows 64bit<br>SPECIFICATIONS: 1200px x 800px<br>CLASS: FMX 311 Online Production<br>PROFESSOR: Santiago Echeverry<br>SEMESTER&nbsp;\/ TERM: SP 19<br>INSTITUTION: University of Tampa<br>DESCRIPTION: This text poem was created using the lyrics from the song &#8220;When the Day Met the Night&#8221;, and uses CSS animations and timing to make the lyrics appear one at a time. There are interactive elements such as a moon and sun appearing when hovering over the page. It was a fun experiment in creating something interesting without using images. The sun and moon images used are actually unicode symbols.<br>LINK: <a href=\"http:\/\/art311.santiago.bz\/SP20\/barnett\/03_imgtxtpoem\/text_image_01.html\">https:\/\/art310.santiago.bz\/sp19\/bplatteter\/07_EternalMotion\/eternalmotion.html<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video style=\"aspect-ratio: 286 \/ 500;\" width=\"286\" height=\"500\" autoplay controls loop src=\"https:\/\/fmx298.santiago.bz\/platteter\/wp-content\/uploads\/sites\/88\/2021\/04\/silke.mp4\"><\/video><figcaption>TITLE: Silke<br>MEDIA: HTML<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Windows 64bit<br>SPECIFICATIONS: 1500px x 800px<br>CLASS: FMX 310 Creative Coding<br>PROFESSOR: Santiago Echeverry<br>SEMESTER&nbsp;\/ TERM: SP 19<br>INSTITUTION: University of Tampa<br>DESCRIPTION: This piece was much easier to create since the pieces did not have to individually be made of code. I drew an illustration where each part was a separate image and placed\/animated them with code. The elements respond to mouse movement here as well.<br>LINK: <a href=\"http:\/\/art311.santiago.bz\/SP20\/barnett\/03_imgtxtpoem\/text_image_01.html\">https:\/\/art310.santiago.bz\/sp19\/bplatteter\/07_EternalMotion\/eternalmotion.html<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video style=\"aspect-ratio: 398 \/ 664;\" width=\"398\" height=\"664\" autoplay controls loop src=\"https:\/\/fmx298.santiago.bz\/platteter\/wp-content\/uploads\/sites\/88\/2021\/04\/oliver.mp4\"><\/video><figcaption>TITLE: Oliver<br>MEDIA: HTML<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Windows 64bit<br>SPECIFICATIONS: 1300px x 800px<br>CLASS: FMX 310 Creative Coding<br>PROFESSOR: Santiago Echeverry<br>SEMESTER&nbsp;\/ TERM: SP 19<br>INSTITUTION: University of Tampa<br>DESCRIPTION: This was my first time creating an animation using HTML. It is based off of a drawing of one of my characters, recreated with code. The background and eye movements change with the mouse&#8217;s movement. It was definitely a learning experience in the possibilities of the canvas element in HTML.<br>LINK: <a href=\"http:\/\/art311.santiago.bz\/SP20\/barnett\/03_imgtxtpoem\/text_image_01.html\">https:\/\/art310.santiago.bz\/sp19\/bplatteter\/01_illustration\/oliverillust.html<\/a><\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-114","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fmx298.santiago.bz\/platteter\/wp-json\/wp\/v2\/pages\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fmx298.santiago.bz\/platteter\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fmx298.santiago.bz\/platteter\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fmx298.santiago.bz\/platteter\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/fmx298.santiago.bz\/platteter\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":9,"href":"https:\/\/fmx298.santiago.bz\/platteter\/wp-json\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":172,"href":"https:\/\/fmx298.santiago.bz\/platteter\/wp-json\/wp\/v2\/pages\/114\/revisions\/172"}],"wp:attachment":[{"href":"https:\/\/fmx298.santiago.bz\/platteter\/wp-json\/wp\/v2\/media?parent=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}