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.
INSTRUCTIONAL METHODS
• 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
unit
• 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) - README.md (more than 300 words)
-
Code effectiveness (3)
-
Student work samples
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
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
