{"id":106,"date":"2021-09-15T12:12:25","date_gmt":"2021-09-15T12:12:25","guid":{"rendered":"https:\/\/fmx298.santiago.bz\/cannatelli\/?page_id=106"},"modified":"2021-11-03T04:39:58","modified_gmt":"2021-11-03T04:39:58","slug":"creative-coding","status":"publish","type":"page","link":"https:\/\/fmx298.santiago.bz\/cannatelli\/creative-coding\/","title":{"rendered":"CREATIVE CODING"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls src=\"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-content\/uploads\/sites\/102\/2021\/11\/illustrator_mandala.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>TITLE:<\/strong> DDDODIYL &#8211; Illustrator Mandala<br><strong>MEDIA:<\/strong> Javascript and HTML Coding<br><strong>SOFTWARE:<\/strong> Adobe Dreamweaver<br><strong>HARDWARE:<\/strong> MacOS Catalina 64-bit<br><strong>SPECIFICATIONS:<\/strong> 1280X720px<br><strong>CLASS:<\/strong> FMX 310 Creative Coding<br><strong>PROFESSOR:<\/strong> Santiago Echeverry<br><strong>TERM:<\/strong> Fall 2020<br><strong>INSTITUTION:<\/strong> University of Tampa<br><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/fmx310.santiago.bz\/FMX310\/fa20\/cannatelli\/04_ILLUSTRATOR\/illman_FINAL.html\" data-type=\"URL\" data-id=\"https:\/\/fmx310.santiago.bz\/FMX310\/fa20\/cannatelli\/04_ILLUSTRATOR\/illman_FINAL.html\" target=\"_blank\">LINK<\/a><\/strong><br><br><strong>DESCRIPTION: <\/strong>This assignment involved using a plugin with Adobe Illustrator to export vector assets as Javascript canvas compatible code. These assets were then placed within this environment, and had aspects such as replication, color change, opacity and position automated and adapted through Javascript and user interaction. The music which accompanies this piece (which can be viewed through the link above) was also produced by myself. This piece was inspired by psychedelic trip art-styles. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls src=\"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-content\/uploads\/sites\/102\/2021\/11\/img_mandala.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>TITLE:<\/strong> Room &#8211; Image Mandala<br><strong>MEDIA:<\/strong> Javascript and HTML Coding<br><strong>SOFTWARE:<\/strong> Adobe Dreamweaver<br><strong>HARDWARE:<\/strong> MacOS Catalina 64-bit<br><strong>SPECIFICATIONS:<\/strong> 1000X563px<br><strong>CLASS:<\/strong> FMX 310 Creative Coding<br><strong>PROFESSOR:<\/strong> Santiago Echeverry<br><strong>TERM:<\/strong> Fall 2020<br><strong>INSTITUTION:<\/strong> University of Tampa<br><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/fmx310.santiago.bz\/FMX310\/fa20\/cannatelli\/03_IMAGEMANDALA\/img_mandala_Final.html\" data-type=\"URL\" data-id=\"https:\/\/fmx310.santiago.bz\/FMX310\/fa20\/cannatelli\/03_IMAGEMANDALA\/img_mandala_Final.html\" target=\"_blank\">LINK<\/a><\/strong><br><br><strong>DESCRIPTION: <\/strong>Room was inspired by what I see every day when I sit at my desk and produce music or digital art. All objects were photographed using a Sony A6500 camera and 30mm lens. These images were then imported into Photoshop to be cleaned and isolated using masks. These images were then applied into an HTML framework using a Javascript canvas object to create an interactive environment for users to play in. Opacity, animation time, replication and radius size are just a few aspects of the canvas users can control by moving their mouse. The additional audio (available from above link) was recorded by myself in my room, with only extra reverb added from a Logic Pro X session. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls src=\"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-content\/uploads\/sites\/102\/2021\/11\/sprite_sheet.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>TITLE:<\/strong> Nostalgia &#8211; Sprite Sheet<br><strong>MEDIA:<\/strong> Javascript and HTML Coding<br><strong>SOFTWARE:<\/strong> Adobe Dreamweaver, Photoshop, Piskel, Advanced Map<br><strong>HARDWARE:<\/strong> MacOS Catalina 64-bit<br><strong>SPECIFICATIONS:<\/strong> 1280X720px<br><strong>CLASS:<\/strong> FMX 310 Creative Coding<br><strong>PROFESSOR:<\/strong> Santiago Echeverry<br><strong>TERM:<\/strong> Fall 2020<br><strong>INSTITUTION:<\/strong> University of Tampa<br><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/fmx310.santiago.bz\/FMX310\/fa20\/cannatelli\/07_SPRITESHEET\/sprite_sheet_01.html\" data-type=\"URL\" data-id=\"https:\/\/fmx310.santiago.bz\/FMX310\/fa20\/cannatelli\/07_SPRITESHEET\/sprite_sheet_01.html\" target=\"_blank\">LINK<\/a><\/strong><br><br><strong>DESCRIPTION: <\/strong>Nostalgia is a call to old Pokemon Games that were on the Gameboy Advanced. The Piskel Sprite Sheet editor was used to create the sprite &#8212; resembling the nostalgic Gamefreak design. Various frames were then created to create various animation poses. The sheets were then exported and arranged to a single image in Photoshop. This image is used in combination with Javascript code to handle &#8220;moving&#8221; the frames, similar to stop motion. As the user moves left-to-right across the canvas, the different movements are replicated on the center sprite, The background was created using Advanced Map, a software created by the Pokemon modding community in order to edit the maps on Pokemon ROM files. Sprites were then scattered around this artificial Pokemon landscape to simulate gameplay with the created sprite.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TITLE: DDDODIYL &#8211; Illustrator MandalaMEDIA: Javascript and HTML CodingSOFTWARE: Adobe DreamweaverHARDWARE: MacOS Catalina 64-bitSPECIFICATIONS: 1280X720pxCLASS: FMX 310 Creative CodingPROFESSOR: Santiago&hellip; <a class=\"read-more\" href=\"https:\/\/fmx298.santiago.bz\/cannatelli\/creative-coding\/\">Read more <span class=\"screen-reader-text\">CREATIVE CODING<\/span><\/a><\/p>\n","protected":false},"author":101,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-106","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-json\/wp\/v2\/pages\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-json\/wp\/v2\/users\/101"}],"replies":[{"embeddable":true,"href":"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":10,"href":"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-json\/wp\/v2\/pages\/106\/revisions"}],"predecessor-version":[{"id":323,"href":"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-json\/wp\/v2\/pages\/106\/revisions\/323"}],"wp:attachment":[{"href":"https:\/\/fmx298.santiago.bz\/cannatelli\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}