Skip to Navigation | Skip to Content

MAT 175 - Web Design - JavaScript + jQuery

Menu

Assignments and Exercises

Exercises (60%)

Exercise details are provided on the schedule page within the week that they are assigned.

Final Game or App Project (20% - due 12/11 or no later than 12/13)

Using p5.js, create an HTML5/JavaScript game and/or interactive web application using content of your own choosing.

You may choose to create a new application, or extend upon and refine an application that you started in one of the class exercises.

Strive to create a rich user experience (UX) through thoughtful interaction design, animated and/or multimedia-based content, and by providing engaging interactivity and user feedback. Strive to create an attractive and easy to use interface (UI) through the use of graphic design, imagery, typography, and/or animation.

Explore and demonstrate p5.js and/or JavaScript programming techniques and logic such as the use of variables, functions, conditional statements, loops, arrays, objects, DOM and event scripting, and/or other programming as appropriate to your concept.

You can use any screen size you wish, but I recommend not exceeding the size of 1280 x 720. A common/standard size for web-games is 960 x 640.

Create a folder named "final" and save your files into this folder. From the p5.js editor, use the File > Download option to get a .zip file with all of your dependent files in it. Upzip that into your final folder. Lastly, upload your "final" folder to your Lastname_First name folder on the MAT server. See FTP Information for details.

Once you've completed your final project, participate in the Final Project Review and Reflection Discussion in Canvas (to be posted during finals week).

Be sure to give credit where credit is due. Ideally, you should compose your own graphics, text, photographs, drawings, sound, etc. However, if you appropriate anything, give the author/artist credit.

Code/Sketch Library (8%)

As the class progresses, students are expected to generate multiple sample scripts and/or code snippets that demonstrate code fundamentals or programmatic techniques. These will be largely technical explorations based on assigned tutorials or reading. Students will upload/store these scripts and sample files in their own sketches folder and account on the p5.js.org website. There are not formal requirements for what to include in this sketchbook (similar to how you might submit an informal sketchbook in an art class), but you will get some credit for your p5.js sketchbook to show that you've been exploring code through the tutorials, the reading, and/or on your own.

Email the instructor your user name and/or the link to your sketches from the p5.js editor (for example, https://editor.p5js.org/YourUserName/sketches).

Class/Online Participation (12%)

The instructor will assess your overall level of engagement and participation in online discussion forums, blogging, class assignments, online critiques, and/or other online activities as assigned and facilitated through Canvas.

Explorations and the Blog (part of your participation grade, two postings due 10/23 and 11/27)

In this class you will survey, research, and explore compelling and cutting-edge examples of computational and interactive media arts, the studios and artists involved in the production of such work, and other issues related to the design of interactive media products and/or experiences. A collaborative class blog hosted within the discussion forums on Canvas will provide an opportunity to share and discuss your findings. Your research may focus on such areas as:

  1. Studio/Artist Exploration: An in-depth look into a design or development studio or individual multimedia or generative artist, coder, or animator and their work.

    Find and research a compelling and cutting-edge interactive mecdia design studio or interactive media artist/coder who develops using p5.js, Animate/Flash, Processing, Arduino, openFrameworks, HTML5/JavaScript, Canvas/Web GL, or or other technologies for creating computational media , animation, and/or rich interactive media experiences. In the class blog, post the equivalent of a one page paper describing their work, background, techniques, conceptual philosophy, themes, client list, etc. Explain what sets this studio/artist apart from others, why you are attracted to their work, and what you think makes their work effective, well designed, moving, or otherwise innovative. Provide short reviews and links to a couple good examples of this studio's/artist's work. Include all relevant URLs.

  2. Design or Showcase Exploration: An exploration of an individual artwork, design, game, animation, or other interactive media product.

    Find 1 or 2 examples of good, effective, cutting-edge, and/or compelling rich media web experiences and/or interactive multimedia applications developed using developed using p5.js, Processing, HTML5/JavaScript, Animate/Flash. Arduino, openFrameworks, or similar technologies. Investigate and contemplate your chosen examples in depth. Dissect the design and artistic elements, uncovering the principles and techniques that are at work, and how these principles are applied and/or operate within your example(s). In the class blog, post the equivalent of a one page paper about your exploration. Explain what attracted you to your chosen design(s) or artwork(s) and share any ideas or insights that you've gained into what makes it effective. Referencing your example(s), explain how the design functions to create an effective and engaging experience.

  3. New Media Exploration: An exploration of issues and practices related to interactive media arts, such as technology use; creative, developmental, and/or business processes; and critical/theoretical analysis.

    The new media exploration is designed to be an open-ended, flexible exploration of an aspect or issue related to interactive media or computational media arts. Explore/research a topic of your choice related to the design, production, distribution, and/or experience of interactive media. In the class blog, post the equivalent of a one page paper about your exploration and the ideas and insights you have gained.

  4. Resources Exploration: An exploration of resources available online (such as tools, instructional tutorials, and/or sites of inspiration) that are of value to the animator, media designer, or developer.

    As a designer, it's important that you learn where to find sites of information, inspiration, and resources. Find and explore at least 3 websites that provide resources (information, tutorials, forums, stock resources, scripts, downloads, articles, advice, design tips, or links to well-designed and inspiring sites) that are of value the animator, media designer, or developer. In the class blog, write a post describing the sites you've found, what the sites are about and how they are useful, and include links to their URLs.

Your research will culminate in two blog postings to the class blog.

Due Dates:

  • 1st Exploration due by or before 10/23
  • 2nd Exploration due by or before 11/27

Link to the CLASS BLOG ON CANVAS:

Good ExploRation Starting Points:

These are just jumping off places though to begin your explorations. You are free to find and share any work that focuses on animation, games, and/or interactive media in some way.