Creative Technology & Interactive Experiences
Creative Coding introduced me to code as a visual and interactive medium. Rather than using software only as a production tool, I learned how to build systems that generate their own forms, movements, colors, and behaviors.
Using JavaScript and the p5.js library, I explored programming fundamentals such as variables, loops, conditionals, arrays, functions, and objects. Through a series of small experiments, I gradually moved from writing simple instructions to creating responsive visual systems.
Coding Experiments
The early projects focused on understanding how individual programming concepts could influence a visual composition. I created generative objects and patterns by using repetition, randomness, and changing values. These exercises demonstrated how a small set of rules could produce many different visual outcomes.
I also experimented with mouse and keyboard interaction, allowing viewers to directly affect what appeared on the screen. Mouse position, clicks, and key presses became creative inputs that could trigger new objects, clear a composition, or alter the behavior of the program.
Movement-based studies helped me understand animation, timing, direction, and speed. Instead of designing a single static frame, I began thinking about how objects could move, respond, and change over time.
Color experiments explored how code could dynamically modify a composition. Colors could shift according to position, interaction, image data, or programmed conditions. These projects helped me see color not as a fixed design decision, but as information that could be sampled, transformed, and continuously updated.
Together, these experiments developed my understanding of event-driven programming and taught me how to organize visual elements as reusable JavaScript objects. More importantly, they showed me how code can create experiences that are variable, responsive, and never exactly the same twice.
Movement-based studies helped me understand animation, timing, direction, and speed. Instead of designing a single static frame, I began thinking about how objects could move, respond, and change over time.
Color experiments explored how code could dynamically modify a composition. Colors could shift according to position, interaction, image data, or programmed conditions. These projects helped me see color not as a fixed design decision, but as information that could be sampled, transformed, and continuously updated.
Together, these experiments developed my understanding of event-driven programming and taught me how to organize visual elements as reusable JavaScript objects. More importantly, they showed me how code can create experiences that are variable, responsive, and never exactly the same twice.
Reflection
This course changed the way I understand both design and software. I learned that code is not only a method for implementing a finished idea; it can also be part of the ideation process itself.
Programming allowed me to design rules, behaviors, and possibilities rather than controlling every individual outcome. Through experimentation, debugging, and iteration, I developed greater technical independence and became more comfortable translating visual concepts into functioning interactive systems.
Creative Coding gave me a foundation for creating experiences that combine design, interaction, and technology. It also strengthened my ability to communicate with developers and to think more critically about how digital tools are structured, who controls them, and how they shape the experiences we create.
DinART!
Concept Overview
DinArt! is an experimental, interactive drawing tool that replaces traditional digital brushes with dynamic food elements and environmental color sampling. Built with JavaScript and p5.js, the experience explores playful UI/UX by turning ambient scenery into a functional color palette and allowing users to compose artwork through intuitive drag-and-place mechanics.
Technical Features
-
Dynamic Color Tinting: Reads pixel data from background window imagery to apply real-time color tints to placed objects.
-
Object-Oriented Animation: Generates ambient background effects, such as animated window sparkles and visual candle-flame color previews.
-
Customizable Controls: Built-in controls for object scaling, element switching, and canvas clearing.
Potential Multi-Industry Applications
-
Preschool & Early Education: An open-ended, low-frustration creative sandbox that reinforces fine motor skills, spatial coordination, and color recognition.
-
Themed Entertainment & Hospitality: Adaptable as a zero-friction, QR/Wi-Fi web app for restaurant wait-times to keep young guests entertained at the table.
- Brand Gamification & Lifestyle: Scalable for wellness, nutrition, and consumer packaged goods looking to introduce products, healthy eating concepts, or brand mascots through playful, interactive digital touchpoints.
(Click work to enter, then drag your mouse to draw food on the wall.)
MOIRE PATTERNS
PARTICLE SYSTEM
TRANSFORMATIONS
BIRDMAKER
(Click work to enter, then press‑hold and drag your mouse to interact with the project)