---

TITLE: Catch-a-Concubine
MEDIA: Interactive Game
SOFTWARE: Procreate, Adobe Photoshop, Adobe Dreamweaver, HTML5
HARDWARE: MacOS
SPECIFICATIONS: 800px × 600px
CLASS: FMX 310 Creative Coding
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 23
INSTITUTION: University of Tampa
DESCRIPTION: This is gameplay of a simple game I coded using HTML5, with original characters I drew and designed in Procreate. The starting screen was made in Photoshop and saved as a JPG to be included in the code. The player plays as an Emperor who has to catch male and female concubines to build their harem. As the levels go on, the harder the game gets, with the numbers of concubines and eunuchs you have to catch increasing over time. If you drop 3 concubines or catch a eunuch, it is game over.

TITLE: Sprite Sheet Animation
MEDIA: Interactive Code Art
SOFTWARE: Adobe Photoshop, Adobe Dreamweaver, HTML5
HARDWARE: MacOS
SPECIFICATIONS: 800px × 600px
CLASS: FMX 310 Creative Coding
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 23
INSTITUTION: University of Tampa
DESCRIPTION: This project was done by masking several pictures of myself in Adobe Photoshop and inserting the images into my code in order to have them play in a sequence when the mouse moves across the screen. It uses the song “OMG” by New Jeans with the choreographed dance as my sprite images. The stage also includes the members from New Jeans, fully immersing my character into the world of Kpop performance.

TITLE: Mandala
MEDIA: Interactive Code Art
SOFTWARE: Adobe Dreamweaver, HTML5
HARDWARE: MacOS
SPECIFICATIONS: 800px x 800px
CLASS: FMX 310 Creative Coding
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 23
INSTITUTION: University of Tampa
DESCRIPTION: This mandala was created with a variety of shapes and colors, all moving and changing when the mouse moves across the image. I wanted my mandala to feel mesmerizing, which is why there is a set focal point right at the center while the rest of it moves and changes.

TITLE: Collage
MEDIA: Interactive Code Art
SOFTWARE: Adobe Dreamweaver, HTML5
HARDWARE: MacOS
SPECIFICATIONS: 600px x 800px
CLASS: FMX 310 Creative Coding
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 23
INSTITUTION: University of Tampa
DESCRIPTION: This collage was created using multiple masked images of myself over a single background image. These masked images were made in Adobe Photoshop, saved as JPGS, and then inserted into the code. I added different effects to each image so that all of them change in a different way when the user moves the mouse across the screen.

TITLE: Lost Time
MEDIA: Interactive Code Art
SOFTWARE: Adobe Dreamweaver, HTML5
HARDWARE: MacOS
SPECIFICATIONS: 800px x 800px
CLASS: FMX 310 Creative Coding
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 23
INSTITUTION: University of Tampa
DESCRIPTION: I created this art with the message of lost time. Time is something we can never get back, no matter how hard we try. It always feels blurred and like it is slipping through our fingers, which is why I chose for the text in the piece to get more and more blurry the longer you are on the page. The text is supposed to create a clock, with the two red lines as the big hand and small hand. No matter how you move the mouse on the screen, the hands keep moving in a circle, which is a metaphor for time in real life.

TITLE: Howl and Calcifer
MEDIA: Interactive Code Art
SOFTWARE: Adobe Dreamweaver, HTML5
HARDWARE: MacOS
SPECIFICATIONS: 600px × 800px
CLASS: FMX 310 Creative Coding
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 23
INSTITUTION: University of Tampa
DESCRIPTION: This character (Howl from “Howl’s Moving Castle”) was traced using HTML5 in Adobe Dreamweaver. The embers radiating from his hands grow outwards and shrink inwards depending on where the mouse moves. The light itself moves slightly up and down with the mouse as well.

TITLE: No Face
MEDIA: Interactive Code Art
SOFTWARE: Adobe Dreamweaver, HTML5
HARDWARE: MacOS
SPECIFICATIONS: 800px × 800px
CLASS: FMX 310 Creative Coding
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 23
INSTITUTION: University of Tampa
DESCRIPTION: This was the first character I traced in Adobe Dreamweaver. His body is somewhat translucent as he is a spirit from the movie “Spirited Away.” The sun in the background is interactive and moves wherever the mouse moves.