Interactive media design is the practice of building immersive environments using emerging technologies. New media technologies like web-based media, AR, VR etc. are spaces in which you can build worlds and craft narratives of visual messaging. In this project you will use creative coding in p5.js as a starting off point into the world of interactive media. You will learn methods in world-building, storytelling to craft an interactive experience on the web.
In this project, you will complete several coding exercises in class and at times finish for homework that will relate to your larger final project. You will create a github repository and submit links to your live site in our project archive (and canvas).
You will be expected to conduct an ideation process to map out your ideas. A moodboard and mind map will be the main deliverables for this portion of the project. You will submit this using figma and post it to your spot in the virtual studio space.
Your project will utilize various sources of input to then be feedback as output into different forms. You have the keyboard and mouse as default sources of input. You also can use any other sources of input you are willing to experiment with. You can use the microphone, sound input from a file, webcam, video files, image files, data etc. You will not be expected to utilize any other javascript libraries, but are more than welcome to use some other than p5.js if you want.
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.
Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, youβre not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.
Start creating with the p5.js editor!
We will look at p5.js in the editor but your final project will not be using the editor and will exist as its own website. You will learn how to embed p5.js into our own websites using visual studio code by linking the library as a .js file in your HTML.