{"id":143,"date":"2023-01-25T17:04:47","date_gmt":"2023-01-25T17:04:47","guid":{"rendered":"https:\/\/fmx298.santiago.bz\/maddy\/?page_id=143"},"modified":"2023-04-17T15:31:55","modified_gmt":"2023-04-17T15:31:55","slug":"adobe-dreamweaver","status":"publish","type":"page","link":"https:\/\/fmx298.santiago.bz\/maddy\/adobe-dreamweaver\/","title":{"rendered":"JAVASCRIPT"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/03\/Screen-Shot-2022-04-30-at-9.44.28-PM-1.png\" src=\"https:\/\/www.dropbox.com\/s\/a8jpe533yofy06i\/Screen%20Recording%202022-05-04%20at%208.27.33%20PM.mp4.mp4?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">DISPLAY TIME: 0:00 -&gt; 0.30<br>TITLE: Doxie Dash <br>MEDIA: Javascript<br>SOFTWARE: Adobe Dreamweaver <br>HARDWARE: Macbook Pro 2019<br>DURATION: 1&#8217;11&#8221;                                                                                                                                                         <br>CLASS: FMX 310 Creative Coding <br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 22<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/fmx310.santiago.bz\/FMX310\/sp22\/maddy_wessling\/08_oopgame\/doxie_dash.html\">https:\/\/fmx310.santiago.bz\/FMX310\/sp22\/maddy_wessling\/08_oopgame\/doxie_dash.html<\/a><br>DESCRIPTION: &#8220;Doxie Dash&#8221; is a single player game created in Javascript. The goal is to move the dachshund around the screen with the mouse to eat the most food and get the most points. There is a timer and various food items that deduct points, which makes it difficult to collect points in the time period. I was inspired to create this game by my own dachshund, Coco, and based the dachshund colors off of her and some other real life dachshunds she has met. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/cocospritesheet.png\" src=\"https:\/\/www.dropbox.com\/s\/7hqon3oxr3s2ip5\/spritesheet.mp4.mp4?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Coco Sprite Sheet <br>MEDIA: Javascript<br>SOFTWARE: Adobe Dreamweaver <br>HARDWARE: Macbook Pro 2019<br>DURATION: 0&#8217;15&#8221;                                                                                                                                                         <br>CLASS: FMX 310 Creative Coding <br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 22<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/maddywessling.blogspot.com\/2022\/04\/coco-sprite-sheet.html\">https:\/\/maddywessling.blogspot.com\/2022\/04\/coco-sprite-sheet.html<\/a><br>DESCRIPTION: &#8220;Coco Sprite Sheet&#8221; is a sprite sheet imported into Dreamweaver using code. This sprite sheet was reused later on for the game &#8220;Doxie Dash&#8221; above, although it&#8217;s original name was &#8220;Coco&#8217;s Catch&#8221; displayed on the sprite sheet. I ended up changing the name because I later on added more characters than just Coco into the game. Each section of the page has a different animation when you move the dachshund around. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screen-Shot-2022-04-12-at-7.34.55-PM.png\" src=\"https:\/\/www.dropbox.com\/s\/xf0wyg798u796pt\/eternal_motion.mp4.mp4?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: System Error <br>MEDIA: Javascript<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>DURATION: 0&#8217;12&#8221;<br>CLASS: FMX 310 Creative Coding<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 22<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/maddywessling.blogspot.com\/2022\/04\/system-error.html\">https:\/\/maddywessling.blogspot.com\/2022\/04\/system-error.html<\/a><br>DESCRIPTION: &#8220;System Error&#8221; is an eternal motion piece using the character &#8216;Freddy Fazbear&#8217; from the famous &#8216;Five Nights at Freddy&#8217;s&#8217; series. Each piece of Freddy is cut using Photoshop and imported one by one into Dreamweaver. Using timed code, Freddy is able to move and looks as though he is cleaning up a mess. I also included some lines from the game &#8216;Security Breach&#8217; and added the mess line to make it seem as though Freddy is glitching out. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/kinetic_typography.png\" src=\"https:\/\/www.dropbox.com\/s\/r50v88171e5bwoq\/kinetic_typography.mp4.mp4?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Things My Grandpa Told Me <br>MEDIA: Javascript<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>DURATION: 0&#8217;18&#8221;<br>CLASS: FMX 310 Creative Coding<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 22<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/maddywessling.blogspot.com\/2022\/03\/things-my-grandpa-told-me.html\">https:\/\/maddywessling.blogspot.com\/2022\/03\/things-my-grandpa-told-me.html<\/a><br>DESCRIPTION: &#8220;Things My Grandpa Told Me&#8221; is a kinetic typography piece that was created in Dreamweaver. My grandpa passed away a few years ago and before he passed, he wrote his grandchildren a book which he called &#8220;Things I Wish My Grandparents Had Told Me.&#8221; The book contains details about his life that we did not know before. I included his picture and surrounding it is some passages from his book. When the mouse is moved around the piece, the text grows, shrinks, and even spins around. This is one of my favorite artworks I have ever done as it pays tribute to my grandpa and his life he led. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/illustrator-mandala.png\" src=\"https:\/\/www.dropbox.com\/s\/8aojdea5gfyw1hz\/illustmandala.mp4.mp4?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: It&#8217;s My Party <br>MEDIA: Javascript<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>DURATION: 0&#8217;15&#8221;<br>CLASS: FMX 310 Creative Coding<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 22<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/maddywessling.blogspot.com\/2022\/03\/its-my-party.html\">https:\/\/maddywessling.blogspot.com\/2022\/03\/its-my-party.html<\/a><br>DESCRIPTION: &#8220;It&#8217;s My Party&#8221; is an illustrator mandala piece. Using Adobe Illustrator, I reused a balloon dog character that I created for practice, along with some other elements and imported them into Dreamweaver using Javascript. Within the code, it specifies how the different objects transform with size and color. All of the images were then made into a mandala shape to create a moving piece. I chose to stick to a birthday theme as I really enjoy birthday parties and the aesthetic around birthdays. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/vectormandala.png\" src=\"https:\/\/www.dropbox.com\/s\/7flc8e4r88duo6c\/vector%20mandala%20maddy%20wessling%20.mp4.mp4?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Vector Mandala <br>MEDIA: Javascript<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>DURATION: 0&#8217;13&#8221;<br>CLASS: FMX 310 Creative Coding<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 22<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/maddywessling.blogspot.com\/2022\/03\/vector-mandala.html\n\">https:\/\/maddywessling.blogspot.com\/2022\/03\/vector-mandala.html<br><\/a>DESCRIPTION: &#8220;Vector Mandala&#8221; is a piece created in Dreamweaver. This piece uses code to create different vectored shapes and mouse movement to move the piece. The very condensed rainbow circles under the crescent moons were actually made by mistake! While I was coding, I typed in a very different number than I originally wanted and accidentally created the rainbow circles. I really liked the texture that they added to the piece, so I decided to keep them. I really like how the different colors make the composition of the piece seem like a colorful galaxy. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/imgmandala.png\" src=\"https:\/\/www.dropbox.com\/s\/nsldjqnguqtl1mp\/Screen%20Recording%202022-03-02%20at%208.28.59%20PM.mov?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Image Mandala<br>MEDIA: Javascript<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>DURATION: 0&#8217;42&#8221;<br>CLASS: FMX 310 Creative Coding<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 22<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/maddywessling.blogspot.com\/2022\/03\/image-mandala.html\">https:\/\/maddywessling.blogspot.com\/2022\/03\/image-mandala.html<\/a><a href=\"https:\/\/maddywessling.blogspot.com\/2022\/03\/vector-mandala.html\"><br><\/a>DESCRIPTION: &#8220;Image Mandala&#8221; is a piece created in Dreamweaver using Photoshop to make snippets of the objects used. Each object was a photo taken by myself of either flowers, or my rock mandalas that I like to paint. The outer ring of the mandala is an image of a sunset taken at my house. I chose to have this piece be multicolored because I wanted to go for a colorful garden theme.  When the mouse moves around the screen, the colors move based on the mouse position. The images are on a timer that make the piece constantly move and expand. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/totoro_01.png\" src=\"https:\/\/www.dropbox.com\/s\/204kfntr6klczfi\/blue_totoros_sunset.mp4?raw=1\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/totoro.jpg\" alt=\"\" class=\"wp-image-394\" srcset=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/totoro.jpg 800w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/totoro-300x225.jpg 300w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/totoro-768x576.jpg 768w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/totoro-660x495.jpg 660w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Blue Totoro&#8217;s Sunset<br>MEDIA: Javascript<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>DURATION: 0&#8217;11&#8221;<br>CLASS: FMX 310 Creative Coding<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 22<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/maddywessling.blogspot.com\/2022\/02\/blue-totoros-sunset.html\">https:\/\/maddywessling.blogspot.com\/2022\/02\/blue-totoros-sunset.html<\/a><a href=\"https:\/\/maddywessling.blogspot.com\/2022\/03\/vector-mandala.html\"><br><\/a>DESCRIPTION: &#8220;Blue Totoro&#8217;s Sunset&#8221; is an Illustration piece created in Dreamweaver using code to create the different objects. For this artwork, I drew an image of &#8216;Blue Totoro&#8217; from &#8216;Studio Ghibli&#8217;s My Neighbor Totoro&#8217; sneaking around a house and a tree similar to the one in the movie. I then was able to recreate the image with code and made Blue Totoro move in and out of the scene with the mouse. The background colors also move along with the mouse. &#8216;Soot Sprites&#8217; from the movie also randomly appear on the screen with different sizes. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"774\" src=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/carebear_final-1024x774.png\" alt=\"\" class=\"wp-image-396\" srcset=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/carebear_final-1024x774.png 1024w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/carebear_final-300x227.png 300w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/carebear_final-768x580.png 768w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/carebear_final-1536x1161.png 1536w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/carebear_final-660x499.png 660w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/carebear_final.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Care Bears Countdown<br>MEDIA: Javascript<br>SOFTWARE: Adobe Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>CLASS: FMX 210 Digital Media<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: FA 21<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/maddywessling.blogspot.com\/2021\/09\/care-bears-countdown.html\">https:\/\/maddywessling.blogspot.com\/2021\/09\/care-bears-countdown.html<br><\/a>DESCRIPTION: &#8220;Care Bears Countdown&#8221; is an illustration created with code using Dreamweaver. This was my first big assignment in the New Media Major using an image of &#8216;Love a Lot Bear&#8217; from the &#8216;Care Bears&#8217; series. Growing up, I loved the Care Bears and wanted my first project to give a sense of nostalgia. Looking back, this piece is far from perfect, but makes me feel proud looking at how far I&#8217;ve come since this piece in my coding skills. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>DISPLAY TIME: 0:00 -&gt; 0.30TITLE: Doxie Dash MEDIA: JavascriptSOFTWARE: Adobe Dreamweaver HARDWARE: Macbook Pro 2019DURATION: 1&#8217;11&#8221; CLASS: FMX 310 Creative&hellip; <a class=\"read-more\" href=\"https:\/\/fmx298.santiago.bz\/maddy\/adobe-dreamweaver\/\">Read more <span class=\"screen-reader-text\">JAVASCRIPT<\/span><\/a><\/p>\n","protected":false},"author":147,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","footnotes":""},"class_list":["post-143","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/pages\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/users\/147"}],"replies":[{"embeddable":true,"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":10,"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/pages\/143\/revisions"}],"predecessor-version":[{"id":469,"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/pages\/143\/revisions\/469"}],"wp:attachment":[{"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/media?parent=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}