A collection of interactive sketches built with p5.js, exploring how digital media can transform multimedia assets into interactive systems.
🎓 Educational material for ISTEC students
MySketches presents simple yet expressive examples of creative coding, where inputs such as images or speech are translated into behavior, motion, and interaction.
Rather than focusing only on visuals, these works emphasize:
- systems over static representation
- interaction over passive observation
- process over final form
Transforms an image into a grid of interactive particles. Each pixel becomes a dynamic element that reacts to the user’s presence.
Captures speech and converts it into letters that behave as physical objects. Language becomes something that can move, fall, and disappear.
These sketches introduce key concepts in creative coding, including:
- Real-time interaction (mouse, keyboard, voice)
- Object-oriented programming in JavaScript
- Generative and interactive design
They are intentionally simple, allowing students to:
- understand the structure
- modify the code
- extend the ideas
- p5.js
- JavaScript (ES6)
- Web APIs (Speech Recognition)
- HTML5 / CSS3
Clone the repository:
git clone https://github.com/your-username/MySketches.gitOpen index.html in your browser.
⚠️ For microphone-based interaction, it is recommended to run a local server.
This work is part of a broader exploration of:
- Interaction as a form of meaning-making
- The transformation of symbolic systems (language) into physical behaviors
- The relationship between perception, emotion, and computation
The sketches can be understood as small prototypes where:
- images become systems
- words become objects
- interaction reshapes meaning
Jorge Forero Artist & Media Researcher PhD Researcher – University of Porto www.forero.cl
Open for educational and non-commercial use.
These sketches are intended not only as technical examples, but as starting points for thinking about how code can be used to create interactive, expressive, and meaningful systems.