(`-') _ <-. (`-')_ <-. (`-')_ (`-') _ _ <-. (OO ).-/ .-> _ .-> <-. .-> \( OO) ) \( OO) )(OO ).-/ \-,-----. ,--. ) / ,---. ,--.' ,-. \-,-----.(`-')----. ,--. ) (`-')----. ,--./ ,--/ ,--./ ,--/ / ,---. | .--./ | (`-') | \ /`.\ (`-')'.' / | .--./( OO).-. ' | (`-')( OO).-. '| \ | | | \ | | | \ /`.\ /_) (`-') | |OO ) '-'|_.' |(OO \ / /_) (`-')( _) | | | | |OO )( _) | | || . '| |)| . '| |)'-'|_.' | || |OO )(| '__ |(| .-. | | / /) || |OO ) \| |)| |(| '__ | \| |)| || |\ | | |\ |(| .-. | (_' '--'\ | |' | | | | `-/ /` (_' '--'\ ' '-' ' | |' ' '-' '| | \ | | | \ | | | | | `-----' `-----' `--' `--' `--' `-----' `-----' `-----' `-----' `--' `--' `--' `--' `--' `--'
___ __ ____ ___
/ _ \ ___ ___ ____ _ __ ___ _ / /|_ / / _ \
/ ___// -_)/ -_)/ __/| |/ // _ `// /_/_ < / // /
/_/ \__/ \__//_/ |___/ \_,_//_//____//____/
Peerval 3D is a company funded by the University of Pittsburgh. Peerval 3D is a network where users are capable of creating projects that consist of their own STL files. Users can upload STL files to a project and share projects with other users. Users can then view and annotate those STL designs and share their feedback with other students. I was the sole developer on the project and developed the full application. I primarily used Node.JS/HTML/JavaScript/MongoDB to develop the application.
__ __ __ __ __ ___ __ __
\ \/ /__ _____/ / / /_ / |/ /__ / /____ ____ / / ___ ____
\ / _ `/ __/ _ \/ __/ / /|_/ / -_) __/ _ `/ _ \/ _ \/ _ \/ __/
/_/\_,_/\__/_//_/\__/ /_/ /_/\__/\__/\_,_/ .__/_//_/\___/_/
/_/
Yacht Metaphor is a multimedia showcase of the works of the Buffalo based artist Jenson Leonard. For this project I collaborated directly with Jenson to help realize his vision for the ineractive showcase. The piece was the focal point of an exhibition at CCS Bard and was featured on Rhizome
__ __ __
/ // /___ / /__ ___
/ _ // _ \ / '_// _ \
/_//_/ \___//_/\_\ \___/
Hoko Sounds is an independent record label based in Pittsburgh, PA. For this project I designed and developed the website using PHP, HTML, CSS, and Javascript. I included generative design patterns across the site using JavaScript and canvas elements to give the website a unique look.
___ __ __ __ __
/ _ ) ___ _ / / __ __ / /_ ___ ___ / /_ / /
/ _ |/ _ `// _ \/ // // __// -_)/ -_)/ __// _ \
/____/ \_,_//_.__/\_, / \__/ \__/ \__/ \__//_//_/
/___/
This project was an artist website for Pittsburgh-based producer Babyteeth. The site was developed in WebGL and features a 3D scan of the artist. The live-rendered graphics serve as the website's background. The site contains an about section, a live-updated list of the artist's songs from SoundCloud, and a video page containing the most up-to date videos from the artist's YouTube channel.
_ __ _ ____ __
| | / /(_)___ / __/__ _ ___ / /_ ___
| |/ // //_ / / _/ / ' \/ _ \/ __// -_)
|___//_/ /__/ /___//_/_/_/\___/\__/ \__/
Viz Emote is a project that creates live generated visuals for music performers. It was developed primarily in Electron/Node.JS/ It features a configurable number of audio tracks that are vizualized by groups of geometrics objects in a scene. The project also inegrates an Emotiv Epoc+ 14 channel EEG headset. The application processes the EEG signal feedback, transforms it using FFT and extracts an emotional state from the headset's wearer. The emotional state is then used to affect the live-generated 3D visuals.
_____ __ __
/ ___// / ___ ___ / /_
/ (_ // _ \/ _ \ (_-</ __/
\___//_//_/\___//___/\__/
'Ghost' is an interactive WebGL music video for With You and Vince Staples. It was directed by Vince McKelvie. For this project I worked with a team of developers and visual artists. I was responsible for the initial development of the final scene as well as writing JavaScript functions to scale and resize the rendered graphics.
__ _ ___ __ _
/ / (_)/ _/___ / /(_)___ ___ ___
/ /__ / // _// -_)/ // // _ \/ -_)(_-<
/____//_//_/ \__//_//_//_//_/\__//___/
Lifelines is an interactive fully explorable online zine. It was created for the MFA writing class of 2019 at the Pratt Institute. I was responsible for creating a fully fledged online gallery to showcase the writings and media from the class. The site was developed in WebGL using the Three.js library and JQuery.
__ ___ _ __ ___ __ __
/ |/ /(_)/ // _/___/ /___ _ ___/ /
/ /|_/ // // // _// _ // _ `// _ /
/_/ /_//_//_//_/ \_,_/ \_,_/ \_,_/
Milf Dad is a clothing company located in New York City. I was responsible for implementing the company's design and developing the site using Shopify's liquid language.
____ _ _ _ __
/ __/__ _ ___ (_)(_) (_)___ / /__
/ _/ / ' \/ _ \ / // /_ / // _ \ / '_/
/___//_/_/_/\___/__/ //_/(_)/_//_//_//_/\_\
|___/
Emoji.ink is a project developed by Vince McKelvie for Tig.ht (a collective or artists and developers based out of Los Angeles). During 2016, I was responsible for maintaining and upgrading the website as Apple released new emoji's into their software update. During this period, I was also responsible for using Processing and After Effects to create a timelapse video of Yung Jake's Emoji Paintings.
__ __
/ / ____ ___ / /__ ___ ___
/ _ \ / __// _ \ / '_// -_)/ _ \
/_.__//_/ \___//_/\_\ \__//_//_/
Broken is a visual accompaniment to an EP I produced as DJ Poodle Emoji. The site was built using Three.JS and the gyroscopic controls module. It also features a responsive aspect, in which the falling tear drops respond to the wave form of the audio in real time. The main focus of the piece is a distorted tear drop 3D object, which I modeled using Cinema 4D.
__ __ ___ _ __
__ / /___ ___ ___ / |/ /(_) / / ___
/ // // _ \ / _ \/ _ \ / /|_/ // / / /__/ _ \
\___/ \___//_//_/\___/ /_/ /_//_/ /____/\___/
Jono Mi Lo's portfolio site was one of my own design and development. It was the first project I developed that integrated WebGL, and specifically Three.JS. I built everything on the website from scratch, from the navigation sphere (modeled in Cinema 4D), to the custom animated social media icons (created with a combination of Cinema 4D and Phoroshop).
___ _ __
/ _ \ ___ _ (_)___ / / ___ _ __
/ , _// _ `// // _ \ / _ \/ _ \| |/|/ /
/_/|_| \_,_//_//_//_//_.__/\___/|__,__/
Somewhere Over the Rainbow is an audio/visual piece created for From the Dream to the Cosmos, an exhibit at the Frame Gallery in Pittsburgh, PA, curated by Kasem Kydd. The piece is a visual/auditory representation of the FBI's 2011 statistics on hate crimes in the United States
__ _ __ __ ___ ___ ___ ___ ___
___/ / (_)/ / / /_ __ _ < /< /< /< /|_ |
/ _ / / // _ \/ __// ' \ / / / / / / / // __/
\_,_/__/ //_//_/\__//_/_/_//_/ /_/ /_/ /_//____/
|___/
Dagshenma's 'djhtm11112' is a single from the Japanese techno producer's Zona Music debut. I was asked to create a visual component to accompany the artist's single. The site features a generated geometric 3D environment that moves planar shapes to circumnavigate the central scene at a given radius. It also features spheres that change scale dependent on the assigned frequency range of the live-streamed audio wave form.
__ __ __
___ ___ / /___ _ ___ / / / /_ ___ _ ___ ___ ___
(_-< / _ \ / // _ `/(_-< / _ \ / __// _ `// _ \/ -_)(_-<
/___// .__//_/ \_,_//___//_//_/ \__/ \_,_// .__/\__//___/
/_/ /_/
Splash Tapes is a record label based out of Los Angeles. I envisioned the design to replicate the User Interface of a Mac OS 9 desktop. The site features 4 pages, that are implemented as 'Applications' on the faux desktop. The site integrates Tumblr's API to pull the most recent blog posts and showcases them on the 'news' page.
______ _
/_ __/___ _ (_)____ ___ __ __
/ / / _ `// // __// -_)/ // /
/_/ \_,_//_//_/ \__/ \_, /
/___/
Tairey is a hip hop artist based in Pittsburgh, PA. I designed and developed his website using generative Three.JS. The title of the album I built the website for was 'Atmos', so I created a cosmos theme website, featuring an interactive star system that serves as the backdrop for the website.
_ __ _ ___ __ __
| | /| / /(_)___ ___ / _ ) / /___ ___ ___/ /
| |/ |/ // /(_-</ -_) / _ |/ // _ \/ _ \/ _ /
|__/|__//_//___/\__/ /____//_/ \___/\___/\_,_/
'Tearing Out the Numbers' was a single by Pittsburgh-based musician Wise Blood. The interactive experience for 'Tearing Out the Numbers' was built to mimic the controls of a First Person Shooter. The assets of the environment were collaged in modeled in Cinema 4D, and exported to JSON. The website also features a hidden link to a download of the single, which requires the user to explore the environment to uncover the secret.
____ ___ _ __ _ __ _
/ __// _ \ | | / /(_)___ __ __ ___ _ / /(_)___ ___ ____
/ _/ / ___/ | |/ // /(_-</ // // _ `// // //_ // -_)/ __/
/_/ /_/ |___//_//___/\_,_/ \_,_//_//_/ /__/\__//_/
This first person visualizer is an experiment in Three.JS and the WebAudio API. The site consists of a generated colorful environment. There are randomly placed objects around the room that correspond to the audio wave form of the html5 audio element.
___
/ _ \ ___ __ _ ___
/ , _// _ \ / ' \/ -_)
/_/|_| \___//_/_/_/\__/
'Rome' was a sinlge by Pittsburgh-based producer Wise Blood featuring The Moon Baby. It was my first collaboration with a musician that I had worked on, and my first published generative responsive visual/audio piece. It was developed using the WebAudio API and Three.JS to create an interactive visualizer to accompany the song.
__ ___ __ __ __
/ /___ / _// /_ / / ___ _ ___ ___/ /
/ // -_)/ _// __/ / _ \/ _ `// _ \/ _ /
/_/ \__//_/ \__/ /_//_/\_,_//_//_/\_,_/
Left Hand LA is an underground clothing company based in Los Angeles. I was approached to create an interactive 3D piece for the splash page of their website. I created a site which integrated the company's lookbook photos into an interactive and constantly changing display.
___ _ __ ____ __
/ _ \ (_)____ / / / __// /___ _ __
/ , _// // __// _ \ / _/ / // _ \| |/|/ /
/_/|_|/_/ \__//_//_/ /_/ /_/ \___/|__,__/
Rich Flow is a rapper based in Philadelphia. I designed and developed the website using HTML, CSS, and JavaScript. The website features an interactive, generated camo pattern on both sides of the page, which move based on the user's mouse movements.