Projects – DTC 477: Advanced Multimedia Authoring

E-lit Project: 10%

In this project, you will be creating a work of “electronic literature”– a digital work of poetry or storytelling that uses programming (in this case JavaScript) to manipulate text. Here are the steps for this project using ChaGPT as an assistant:

Come up with an idea for what you want to do with text. Break down the idea into a sequence of specific steps. Be as detailed as you can. Write out the steps in natural human language.
Check with ChatGPT about the sequence of steps needed for programming your project (still in natural language). Compare the ChatGPT results with your written steps. Adjust.
Try to translate the sequence of steps into what you know so far about JavaScript’s programming concepts: variables, operators, functions, loops, arrays etc. Come up with what you think you will need to code in JavaScript with each step. Do you need arrays? Functions? Note these JavaScript concepts with each step in your list.
Start to write your JavaScript. Make sure you have all the HTML in place. Don’t worry about CSS design yet. Just use basic outlines to show what is happening.
Use ChatGPT to figure out certain tasks in your script as you build it. For example, “help me write a function to animate a div horizontally across the browser page.” Working with ChatGPT on each task will give you maximum control over your work and your will learn how to write JavaScript. If you ask it to write the whole script, you will not have control of the script and you will not learn anything!
Test your script. Check the console for problems.
Apply CSS design.
Upload the project to the server and post the url in the Slack channel along with a description of the steps that you started with.

MapBox: 10%

Build a site using the Mapbox API. Create a map with at least 5 markers that tells a story about a place you visited, lived in, would like to visit or make fictional journey across different locations. Include images and text, video/audio (if needed) and a Mapbox map with JavaScript. Integrate the design by styling the site with CSS with and the map with MapBox styles.

Audio/Video: 5%

In this project you are to use JavaScript to manipulate audio and/or video elements on the page. Come up with an idea for what you want to do, such as:

Karaoke lyrics to a public domain audio or video tack,
text or commentary to accompany a video,
page style changes to match video
an interactive video story or essay
a work of sound/visual art

Write out the algorithm (the steps of instructions for what you want to do) and use this to begin coding the JavaScript. You may use ChatGPT to assist you with the code, but you are required to make a statement in the head to describe how you used ChatGPT.

Your JavaScript must have detailed comments at each stage of the script describing what the code is doing.

Canvas Game: 10%

This project is intended to loosen you up with creative applications of JavaScript. Using techniques for generative or interactive animation using the Canvas element, you are to follow your own intuition and creative ideas. Don’t worry about something polished or even practical. The idea is to push your current knowledge of JavaScript, with ChatGPT as a code assistant, towards building an innovative HTML5 Canvas game. The crazier your approach, the better!

This and all class projects can be the sketch of an idea that you develop in the Final Project. The important thing for this project is to have a working script and a solid proof of concept for further development.

P5js: 5%

This project is intended to expose you the creative possibilities of using JavaScript and P5js (Processing for Javascript). Processing is a programming language for creating Generative Art – visual art that animates through programmed change. Using techniques for generative or interactive animation using the P5js library and the Canvas element, you are to follow your own intuition and creative ideas. Push your current knowledge of JavaScript, with ChatGPT as a code assistant. Have fun!

Weather App: 5%

Use the openweather API to create your own weather app using Javascript fetch() method to get the current weather by city and state. Design your results page.

Final Project: 20%

The Final Project is quite open, but it must include your own scripting in JavaScript (jQuery is optional) and design with HTML/CSS. You have worked on small scripting projects, worked with an API and had the chance to write your own scripts in a creative way. Now is the time to put all of these skills together in a project for your portfolio. The subject and genre may be anything, but you will have to design something that involves user interaction with multimedia. Multimedia means using text, images, video, audio, maps in an integrated way. JavaScript and jQuery can be used to get data, add animation, create galleries, create dynamic video/audio, interactive elements, generative/random procedures -anything you want.

I encourage future developers to learn a JavaScript framework (such as the very popular React) for this project. I will take into account the effort to learn a new framework.
I encourage designers to explore methods of animation and interactivity that use JavaScript with jQuery or another framework. An interactive learning module or animated infographic would be good in your portfolio.
I encourage game developers to work in teams. Please talk to me about this as I can point you to tutorials for building HTML5 games with Canvas.
You will be graded on your own scripting using JavaScript (30%), interface and interaction design (30%) and the completion of the content (30%).
Small group projects (max 2 people) are allowed, but you must work together on thinking through both the JavaScript and the design.
In the next three weeks, we will begin each class discussing 2-3 final projects in progress. This means that you must make progress after each class. If you are not making progress, this will be reflected on your final grade.