top of page



The course I used to design for art students who would want to apply digital media to their design works. The Syllabus sample is based on the 2019 Fall section.

Creative Coding is an applied course that focuses on creating internet-based projects that impact media and culture. Students will learn current web design and development workflows with an emphasis on networked interaction and visualization. Current trends in online media will be examined with special attention paid to how projects can exist on multiple platforms such as mobile phones, tablets, and desktop computers. Through in-class exercises, projects, critique, hands-on workshops, readings, and discussions we will explore the role of the digital artist/designer in a constantly evolving digital landscape. Students will develop an understanding of web technologies in order to implement creative systems.


• Exercises due at the end of each class

• Homework assignments due at the beginning of each class

• Lectures that open each new topic to provide a creative context within each


• Lab Instruction and tutorials focused on developing technological craft

• In-class work time and individual meetings

• Readings and accompanying discussions

• Critiques during and after each unit project

After completing this course students will be able to...

• Technical Competencies

Implement basic functionality of JavaScript such as if statements, variables, 

    and for loops.

Use JavaScript and p5.js to draw onto an HTML canvas. Visualize data with

    JavaScript. Create custom functions.

Create arrays of objects.

Create an interactive interface.

Pull API information from an external website.

Construct a simple layout with HTML and CSS

Control the DOM using JavaScript and p5.js.

Playback and analyze a sound using p5.js.

Use many of the technical foundations for web and interactivity through the

    following topics: network culture, the archive, and creative systems.


• General Competencies

Analyze and incorporate historical and contemporary ideas and strategies

    across various digital genres.

Speak and write effectively through medium-specific writing forms and

    speaking exercises.

Develop innovative, artistically, and culturally relevant projects through a

    process of idea formulation, planning, researching, experimenting, producing, seeking feedback, and refining.

Work efficiently through adopting collaboration, project management, and

    workflow skills.

Project 1: Abstract Self-portrait 

The project aims to equip students with basic computer graphics coordinates and coding conventions (syntax, arguments, curly brackets, parentheses, and semicolons). Students need to understand Functions, built-in variables, conditional control statements, and conditional logic/ boolean expressions.

  • Draw a static image of a self-portrait in an abstract way using js

  • Using at least 3 different functions we introduced in class

  • Set up at least 1 Variable and apply at least 3 times

  • Grade Breakdown (total 15, 15% of final)

    • Visual elements (9)

      • Proportion (3)

      • Composition (3)

      • Color (3)

    • Concept (3) - (more than 300 words)

    • Code effectiveness (3)

Student work samples

4.3 white.jpg

Project 2: Motion-based Simple Interactive Game

Creating a simple game will help students understand responses (mouse, keyboard, touch) and practice motion & random variables. The game could be easy, but please apply the following requirements.

  • Requirements

    • Automatically adapt to window size.

    • Constructor functions and call them in function draw

    • Mouse inputs or Keyboard inputs

  • Optional chooses

    • Constructor function in a different js file (potentially multiple files)

    • Use sound (sound effects, background music, etc.)

    • Images (background, character, monster, etc.)

    • Use a scoring system.

    • Create at least two different scenes (intro, main, different levels, game over, etc.)

  • Please do

    • Be creative

    • Have fun!

  • Please don’t

    • Do not make the same games (e.g., Pac-Man, Space invaders, Ping-pong, etc.)

    • Do not copy online game codes

  • Grade Breakdown (total 15)

    • Visual elements (6)

      • Movements (2)

      • Composition (2)

      • Color (2)

    • Game elements (5) - students’ vote

      • Funniest Game (1)

      • Most Creative Game (2)

      • The Most Well-made Game (2)

    • Code effectiveness (4)

Student work samples

4.3 white.jpg

Project 3: Data Visualization 

As the second half of the course introduced the concept of big data, the final project is data visualization in that students will use created JSON data or AIP to create a dynamic data display.

  • You can elevate Project 1 or Project 2, or choose a new topic

  • Data Visualization is required

  • p5.js library is not limited, but the project has to be done by js (CSS or other language project is not accepted)

  • Open sources are acceptable, please note resource

  • Grade Breakdown (total 15)

    • Visual elements (6)

      • Movements (2)

      • Composition (2)

      • Color (2)

    • Data elements (5) 

      • Correctly using Array (1)

      • loadJSON (2)

      • Start a Server (2)

    • Code effectiveness (4)

Student work samples

4.3 white.jpg
bottom of page