Creative Coding Experiments Interactive & Self-Research I 4 Months Exploring node-based coding tool 'TouchDesigner' and JavaScript library 'p5.js' to create interactive, tech-driven motion graphics that can be embedded in websites, transformed into interactive posters, or utilized as pop-up event engagement tools.
Methods Self study, Research, Learn from a mentor (Zeke Wattles)
Tools Touch Designer p5.js Obsidian Programming language (Html, Css, JavaScript, and JQuery)
My role UX/UI Graphic Designer Creative Coder
Redesign the current brand identity system based on client needs.
Goal Enhance communication with the audience and provide the business with a fresh opportunity to expand its brand awareness.
Overview
In today’s fast-paced, technology-driven world, we constantly encounter new design tools. To thrive, capture audience interest, express creativity, and meet client needs, staying adaptable to emerging technologies is essential—much like Adobe Flash in the early 2000s.
As someone passionate about learning, I keep a close eye on industry trends, take courses, and self-research various software to stay ahead in the ever-evolving landscape.
Works
Three.js Project
Some Three.js experiment with potential to add more 3D objects, data, links, to evolve it into the media project. With this basic, students would able to create their own theme's space garden.
Use Mouse right/left click and Wheel to interact!
Inspired by personal and immigrant stories from the Immigrant Archive Project, created a digital garden dedicated to the U.S. immigrant experience.
Each story is saved as a "node" and connected to similar stories. The garden is divided into three main themes: Immigrants, English as a Second Language speakers, and First-Generation Students in Higher Education.
Each node links to relevant stories, creating a network that blooms and grows, reflecting the interconnectedness of these experiences.
p5.js Explorations
p5.js Project: Flower bloom + Personal Character
The flower bloom was created using p5.js and coded/published on Glitch. It consists of two pages that interact with each other: one with a control bar and the other displaying the blooming flower.
The control bar on one page manipulates the flower bloom on the other, with the possibility of using a phone as a controller while displaying the flower bloom on a projected screen.
The "Personal Character" project is a simple exploration of shapes, placement, and mouse interaction in pure p5.js. Feel free to interact and experiment with it!
Touch Designer Projects (Still updating)
Next Steps Gained proficiency in various programming languages, including HTML, CSS, JavaScript, jQuery, and node-based coding. Eager to explore C# (Unity) and C++ (Unreal Engine) as they offer exciting opportunities for game UX/UI design, mock-ups, and environmental design.
